diff --git a/.claude/rules/angular.md b/.claude/rules/angular.md
index 58df53e6..a27b7c7a 100644
--- a/.claude/rules/angular.md
+++ b/.claude/rules/angular.md
@@ -33,7 +33,7 @@ These apply to every Angular and TypeScript file in the repository: the panel (`
 - Use `model()` for two-way bound properties with `[(prop)]` syntax instead of pairing `input()` with `output()`
 - Use `computed()` for derived state
 - Use `linkedSignal()` for state derived from multiple reactive sources that must stay synchronized
-- Prefer inline templates for small components
+- Give every component its own files: `templateUrl: './x.html'` and `styleUrl: './x.scss'` next to `x.ts`. Do NOT use inline `template:` or `styles:` in new or split components
 - Prefer Signal Forms (`@angular/forms/signals`) for new forms. They are stable in Angular v22+ and provide signal-based state, type-safe field access, and schema-based validation
 - When not using Signal Forms, prefer Reactive forms instead of Template-driven ones
 - Do NOT use `ngClass`, use `class` bindings instead
diff --git a/app/src/__tests__/page-conventions.test.ts b/app/src/__tests__/page-conventions.test.ts
index 2561ed97..0f604817 100644
--- a/app/src/__tests__/page-conventions.test.ts
+++ b/app/src/__tests__/page-conventions.test.ts
@@ -14,11 +14,15 @@ async function pageSources(): Promise<Map<string, string>> {
     readdirSync(path: string, options: { recursive: true }): string[];
   };
   // Recursive, so a page split into a folder (pages/network/) is still checked.
-  const files = fs
-    .readdirSync(PAGES, { recursive: true })
-    .map((file) => file.replaceAll('\\', '/'))
-    .filter((file) => file.endsWith('.ts'));
-  return new Map(files.map((file) => [file, fs.readFileSync(`${PAGES}${file}`, 'utf8')]));
+  const all = fs.readdirSync(PAGES, { recursive: true }).map((file) => file.replaceAll('\\', '/'));
+  const files = all.filter((file) => file.endsWith('.ts'));
+  // A component's template and style files count as part of its source.
+  const read = (file: string) =>
+    [file, file.replace(/\.ts$/, '.html'), file.replace(/\.ts$/, '.scss')]
+      .filter((path) => all.includes(path))
+      .map((path) => fs.readFileSync(`${PAGES}${path}`, 'utf8'))
+      .join('\n');
+  return new Map(files.map((file) => [file, read(file)]));
 }
 
 describe('every page uses the shared search field', () => {
@@ -36,7 +40,7 @@ describe('every page uses the shared search field', () => {
       ),
     );
     // The values filter sits under the component filter in the Components detail panel.
-    expect(labels).toEqual(['component-tree.ts: Filter values']);
+    expect(labels).toEqual(['components/component-detail.ts: Filter values']);
   });
 
   it('uses Filter, not Find, in every placeholder', async () => {
@@ -59,10 +63,10 @@ describe('pages with a splitter', () => {
     const page = (name: string) => sources.get(name) ?? '';
     expect(page('di-inspector.ts')).toMatch(/<app-splitter[^>]*view="injectors"/s);
     expect(page('di-inspector.ts')).toContain("storedPaneSize('injectors', 420)");
-    expect(page('store-inspector.ts')).toMatch(
+    expect(page('store/store-log.ts')).toMatch(
       /<app-splitter[^>]*view="store-log"[^>]*pane="before"/s,
     );
-    expect(page('store-inspector.ts')).toContain("storedPaneSize('store-log', 300)");
+    expect(page('store/store-log.ts')).toContain("storedPaneSize('store-log', 300)");
   });
 });
 
@@ -76,7 +80,7 @@ describe('pages use the shared state component', () => {
       'plugins-inspector.ts',
       'audit-inspector.ts',
       'query-inspector.ts',
-      'store-inspector.ts',
+      'store/store-live.ts',
       'network-inspector.ts',
       'live-route.ts',
       'route-lint.ts',
@@ -128,12 +132,13 @@ describe('pages with a keyboard list use the shared roving list', () => {
     const sources = await pageSources();
     const lists = {
       'capacitor-inspector.ts': '[data-cap-call]',
-      'pipes-inspector.ts': '[data-pipe-row]',
+      'pipes/pipe-list.ts': '[data-pipe-row]',
       'network/call-timeline.ts': '',
       'network/ssr-requests.ts': '',
       'query-inspector.ts': '',
       'signal-inspector.ts': '',
-      'store-inspector.ts': '',
+      'store/store-log.ts': '',
+      'store/store-events.ts': '',
       'timeline.ts': '',
     };
     for (const [file, selector] of Object.entries(lists)) {
diff --git a/app/src/__tests__/tint-contrast.test.ts b/app/src/__tests__/tint-contrast.test.ts
index 64dab59c..eeeb2889 100644
--- a/app/src/__tests__/tint-contrast.test.ts
+++ b/app/src/__tests__/tint-contrast.test.ts
@@ -221,9 +221,25 @@ describe('signal kind badges', () => {
 // both themes get a value these tests check.
 const TOKEN_ONLY_PAGES = [
   'analog-inspector.ts',
+  'analog/analog-content.ts',
+  'analog/analog-lint.ts',
+  'analog/analog-render.ts',
+  'analog/analog-routes.ts',
+  'analog/analog-server.ts',
+  // The Analog page's styles, which moved out of the page into shared mixins.
+  '../styles/_analog.scss',
   'route-timeline.ts',
   'signal-graph-view.ts',
   'signal-inspector.ts',
+  'signals/resource-list.ts',
+  'signals/signal-detail-state.ts',
+  'signals/signal-detail.ts',
+  'signals/signal-graph-section.ts',
+  'signals/signal-list.ts',
+  'signals/signal-model.ts',
+  'signals/signal-state.ts',
+  'signals/source-signals.ts',
+  'signals/watched-signals.ts',
 ];
 
 describe('pages that use theme tokens only', () => {
@@ -233,8 +249,14 @@ describe('pages that use theme tokens only', () => {
       const fsName = 'node:fs';
       const fs = (await import(/* @vite-ignore */ fsName)) as {
         readFileSync(path: string, encoding: 'utf8'): string;
+        existsSync(path: string): boolean;
       };
-      const source = fs.readFileSync(`${PAGES}${file}`, 'utf8');
+      // A component's template and style files count as part of its source.
+      const source = [file, file.replace(/\.ts$/, '.html'), file.replace(/\.ts$/, '.scss')]
+        .filter((path, index, all) => all.indexOf(path) === index)
+        .filter((path) => fs.existsSync(`${PAGES}${path}`))
+        .map((path) => fs.readFileSync(`${PAGES}${path}`, 'utf8'))
+        .join('\n');
       expect(source.match(/#[0-9a-f]{3,8}\b/gi) ?? []).toEqual([]);
     });
   }
diff --git a/app/src/pages/analog-inspector.html b/app/src/pages/analog-inspector.html
new file mode 100644
index 00000000..a43d5c44
--- /dev/null
+++ b/app/src/pages/analog-inspector.html
@@ -0,0 +1,107 @@
+@if (project() === null && loadFailed()) {
+  <div class="empty" role="alert">
+    <h2 class="empty-title">Could not read the project.</h2>
+    <p class="muted">
+      Check that the dev server with Pangular Inspector is still running, then retry.
+    </p>
+    <button type="button" class="btn" (click)="retry()">Retry</button>
+  </div>
+} @else if (project() === null) {
+  <div class="loading" role="status">
+    <span class="spinner" aria-hidden="true"></span>
+    <span>Reading the project…</span>
+  </div>
+} @else if (!project()!.analog) {
+  <div class="empty">
+    <h2 class="empty-title">This app is not an Analog app.</h2>
+    <p class="muted">
+      Add <code>pangular()</code> from <code>@pangular-inspector/devtools/vite</code> next to
+      <code>analog()</code> in vite.config.ts and run the Analog dev server.
+    </p>
+  </div>
+} @else {
+  <section class="summary" aria-label="Analog summary">
+    <div class="stat">
+      <span class="label">Analog</span>
+      <span class="value">{{ project()!.version || 'unknown' }}</span>
+    </div>
+    <div class="stat">
+      <span class="label">Pages</span>
+      <span class="value">{{ pageCount() }}</span>
+    </div>
+    <div class="stat">
+      <span class="label">API routes</span>
+      <span class="value">{{ project()!.api.length }}</span>
+    </div>
+    <div class="stat">
+      <span class="label">Server calls</span>
+      <span class="value">{{ tabCalls().length }}</span>
+    </div>
+    <div class="stat" [attr.data-tone]="lintTone() || 'good'">
+      <span class="label">Issues</span>
+      <span class="value">{{ lintCount().errors + lintCount().warnings }}</span>
+    </div>
+    @if (page(); as p) {
+      <div class="stat wide">
+        <span class="label">Open in the browser</span>
+        <span class="value mono" [title]="p.url">{{ p.url }}</span>
+      </div>
+    }
+  </section>
+
+  <div class="tabs" role="tablist" aria-label="Analog views" (keydown)="onKey($event)">
+    @for (v of views(); track v.id) {
+      <button
+        type="button"
+        role="tab"
+        [id]="'analog-tab-' + v.id"
+        [attr.aria-selected]="v.id === view()"
+        [attr.aria-controls]="'analog-panel-' + v.id"
+        [attr.tabindex]="v.id === view() ? 0 : -1"
+        (click)="view.set(v.id)"
+      >
+        {{ v.label }}
+        @if (v.count !== null) {
+          <span class="count" [attr.data-tone]="v.tone">{{ v.count }}</span>
+        }
+      </button>
+    }
+  </div>
+
+  <div
+    class="panel"
+    role="tabpanel"
+    [id]="'analog-panel-' + view()"
+    [attr.aria-labelledby]="'analog-tab-' + view()"
+  >
+    @switch (view()) {
+      @case ('routes') {
+        <div appAnalogRoutes></div>
+      }
+      @case ('server') {
+        <div appAnalogServer></div>
+      }
+      @case ('render') {
+        <div appAnalogRender></div>
+      }
+      @case ('content') {
+        <div appAnalogContent></div>
+      }
+      @case ('data') {
+        <app-analog-data
+          [rpc]="rpc()"
+          [page]="page()"
+          [serverFns]="serverFns()"
+          [duplicates]="state().duplicates ?? []"
+          [refetches]="state().refetches ?? []"
+        />
+      }
+      @case ('runtime') {
+        <app-analog-runtime [rpc]="rpc()" />
+      }
+      @case ('lint') {
+        <div appAnalogLint></div>
+      }
+    }
+  </div>
+}
diff --git a/app/src/pages/analog-inspector.scss b/app/src/pages/analog-inspector.scss
new file mode 100644
index 00000000..f9882fdf
--- /dev/null
+++ b/app/src/pages/analog-inspector.scss
@@ -0,0 +1,176 @@
+@use 'mixins' as m;
+@use 'analog' as a;
+
+:host {
+  --good: var(--ok);
+  --bad: var(--danger);
+}
+:host {
+  --mono: var(--font-mono);
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  color: var(--text);
+  font-size: 13px;
+}
+.loading {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--text-2);
+}
+.spinner {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+    border-color: var(--accent-line);
+  }
+}
+@include a.base;
+.summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 12px;
+  animation: enter 0.35s var(--ease) both;
+}
+.stat {
+  display: grid;
+  gap: 6px;
+  align-content: start;
+  padding: 12px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  box-shadow: var(--shadow);
+  transition:
+    border-color 180ms var(--ease),
+    background-color 180ms var(--ease);
+}
+.stat:hover {
+  border-color: var(--border-strong);
+}
+.stat.wide {
+  grid-column: span 2;
+  min-width: 0;
+}
+@media (max-width: 340px) {
+  .stat.wide {
+    grid-column: 1 / -1;
+  }
+}
+.stat .label {
+  color: var(--text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.stat .value {
+  color: var(--text-strong);
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.stat .value.mono {
+  overflow: hidden;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stat[data-tone='warn'] .value {
+  color: var(--warn);
+}
+.stat[data-tone='good'] .value {
+  color: var(--ok);
+}
+.stat[data-tone='bad'] .value {
+  color: var(--danger-text);
+}
+
+.tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  justify-self: start;
+  max-width: 100%;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+}
+[role='tab'] {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 28px;
+  padding: 4px 12px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-2);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 180ms var(--ease),
+    color 180ms var(--ease),
+    box-shadow 180ms var(--ease);
+}
+[role='tab']:hover {
+  color: var(--text);
+}
+[role='tab'][aria-selected='true'] {
+  background: var(--surface-3);
+  color: var(--text-strong);
+  box-shadow: inset 0 0 0 1px var(--border-strong);
+}
+@include a.count;
+
+.panel {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  animation: enter 0.35s var(--ease) both;
+}
+@include a.form;
+@include a.cards;
+
+.empty {
+  display: grid;
+  gap: 8px;
+  justify-items: center;
+  padding: 40px 24px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  text-align: center;
+  animation: enter 0.35s var(--ease) both;
+}
+.empty p {
+  margin: 0;
+  max-width: 520px;
+  line-height: 1.6;
+}
+.empty-title {
+  margin: 0;
+  color: var(--text-strong);
+  font-size: 15px;
+  font-weight: 600;
+}
diff --git a/app/src/pages/analog-inspector.ts b/app/src/pages/analog-inspector.ts
index 89441a6a..a3229ab7 100644
--- a/app/src/pages/analog-inspector.ts
+++ b/app/src/pages/analog-inspector.ts
@@ -1,2728 +1,89 @@
-import {
-  Component,
-  DestroyRef,
-  ElementRef,
-  computed,
-  effect,
-  inject,
-  input,
-  linkedSignal,
-  signal,
-  untracked,
-} from '@angular/core';
+import { Component, effect, inject, input, untracked } from '@angular/core';
 import type { DevframeRpcClient } from 'devframe/client';
-import { plural, time } from '../format';
-import { hostPageId } from '../page-id';
-import { rpcCall, rpcTry as call } from '../rpc';
-import { SourceLink } from '../ui/source-link';
-import { SearchField } from '../ui/search-field';
-import { AnalogPlayground, type PlaygroundTarget } from './analog-playground';
-import { AnalogBuild } from './analog-build';
 import { AnalogData } from './analog-data';
-import { AnalogContentPreview } from './analog-content-preview';
 import { AnalogRuntime } from './analog-runtime';
-import { AnalogTransform } from './analog-transform';
-
-interface AnalogRoute {
-  id: string;
-  fullPath: string;
-  file?: string;
-  kind: 'page' | 'layout' | 'markdown' | 'group' | 'implicit';
-  params: string[];
-  catchAll?: 'required' | 'optional';
-  serverFile?: string;
-  serverExports?: string[];
-  routeMeta?: string[];
-  title?: string;
-  children: AnalogRoute[];
-}
-
-interface ApiRoute {
-  path: string;
-  method: string;
-  file: string;
-}
-
-interface ContentFile {
-  file: string;
-  slug: string;
-  attributes: Record<string, string>;
-  error?: string;
-  schemaErrors?: string[];
-}
-
-interface ServerFn {
-  name: string;
-  file: string;
-  id: string;
-  method: string;
-}
-
-interface AnalogProject {
-  analog: boolean;
-  version?: string;
-  routes: AnalogRoute[];
-  api: ApiRoute[];
-  middleware: string[];
-  content: ContentFile[];
-  serverFns?: ServerFn[];
-  contentSchema?: { file: string; error?: string; unsupported?: string[] };
-  contentUsage?: { file: string; api: string; line: number }[];
-}
-
-interface RenderCheck {
-  path: string;
-  configured?: RenderRow['mode'];
-  observed?: RenderRow['mode'];
-  status?: number;
-  ms?: number;
-  matches?: boolean;
-  note?: string;
-  error?: string;
-}
-
-type ActionOutcome = 'success' | 'redirect' | 'invalid' | 'error';
-
-interface AnalogCall {
-  id: number;
-  at: number;
-  kind: 'page' | 'load' | 'action' | 'fn' | 'api';
-  method: string;
-  url: string;
-  route?: string;
-  status: number;
-  ms: number;
-  bytes?: number;
-  from: string;
-  render?: 'ssr' | 'client';
-  outcome?: ActionOutcome;
-  location?: string;
-  seeded?: boolean;
-  preview?: string;
-  /** The tab the call came from, when the dev server could tell. */
-  pageId?: string;
-}
-
-interface AnalogPage {
-  pageId: string;
-  url: string;
-  chain: { path: string; file?: string; serverFile?: string; outlet?: string }[];
-  load?: { preview: string; bytes: number; keys: string[] };
-  serverContext?: string;
-  hydrated: number;
-  hydrationErrors: string[];
-}
-
-interface DuplicateLoad {
-  route: string;
-  ssrAt: number;
-  browserAt: number;
-}
-
-interface ServerFnRefetch {
-  id: string;
-  ssrAt: number;
-  browserAt: number;
-}
-
-interface AnalogState {
-  pages?: AnalogPage[];
-  calls?: AnalogCall[];
-  duplicates?: DuplicateLoad[];
-  refetches?: ServerFnRefetch[];
-}
-
-interface Finding {
-  rule: string;
-  severity: 'error' | 'warning' | 'info';
-  file?: string;
-  path?: string;
-  relatedFile?: string;
-  message: string;
-  fix: string;
-}
-
-interface UrlMatch {
-  matched: boolean;
-  chain: AnalogRoute[];
-  params: Record<string, string>;
-  rejected: { file?: string; path: string; reason: string }[];
-}
-
-interface RenderRow {
-  path: string;
-  file?: string;
-  mode: 'ssr' | 'ssg' | 'client' | 'cached' | 'redirect';
-  reason: string;
-  last?: { render?: 'ssr' | 'client'; status: number; ms: number; at: number };
-}
-
-interface PrerenderPlan {
-  dynamicConfig: boolean;
-  configPartial?: string[];
-  listed: string[] | null;
-  fromRules?: string[];
-  staticMissing: string[];
-  dynamic: string[];
-  built: string[];
-  notBuilt: string[];
-}
-
-type View = 'routes' | 'server' | 'render' | 'content' | 'data' | 'runtime' | 'lint';
-
-interface LintCard {
-  rule: string;
-  severity: Finding['severity'];
-  title: string;
-  summary: string;
-  fix: string;
-  items: { file?: string; path?: string; message?: string }[];
-}
-
-const LINT_TEXT: Record<string, { title: string; summary: string }> = {
-  'scan-error': {
-    title: 'A folder could not be read',
-    summary: 'Its files are missing from routes, API routes and lint results.',
-  },
-  'duplicate-url': {
-    title: 'Two files serve the same URL',
-    summary: 'Only one of them is reachable; the other never renders.',
-  },
-  'sibling-params': {
-    title: 'Two dynamic pages in one folder',
-    summary: 'Both are [param] pages at the same level, so the first one always wins.',
-  },
-  'missing-default-export': {
-    title: 'Page has no default export',
-    summary: 'Analog needs the component as the default export, so the page renders nothing.',
-  },
-  'redirect-with-component': {
-    title: 'Redirect page also exports a component',
-    summary: 'The redirect runs first, so the component never shows.',
-  },
-  'redirect-path-match': {
-    title: 'Redirect matches too much',
-    summary: 'An empty-path redirect without pathMatch "full" catches every URL below it.',
-  },
-  'layout-without-outlet': {
-    title: 'Layout has no router-outlet',
-    summary: 'The layout has child pages, but without <router-outlet> they never render.',
-  },
-  'server-without-load': {
-    title: '.server.ts without load or action',
-    summary: 'The server file exports no load, action or server function, so Analog calls nothing.',
-  },
-  'orphan-server-file': {
-    title: '.server.ts without a page',
-    summary: 'No page file sits next to it, so its load never runs.',
-  },
-  'api-method-suffix': {
-    title: 'Unknown method suffix on an API file',
-    summary: 'The suffix is not an HTTP method, so it becomes part of the URL.',
-  },
-  'duplicate-api-route': {
-    title: 'Two handlers for one API route',
-    summary: 'Two files answer the same method and path.',
-  },
-  'api-outside-prefix': {
-    title: 'Server route outside the API prefix',
-    summary: 'During vite dev only routes under the prefix reach Nitro.',
-  },
-  'prerender-unknown-route': {
-    title: 'Prerender entry matches no page',
-    summary: 'prerender.routes lists a path that no page file serves.',
-  },
-  'prerender-missing-root': {
-    title: 'Home page is not prerendered',
-    summary: 'static is on, but prerender.routes leaves out /.',
-  },
-  'content-frontmatter': {
-    title: 'Broken frontmatter',
-    summary: 'The markdown frontmatter cannot be read.',
-  },
-  'content-schema': {
-    title: 'Frontmatter does not match the content schema',
-    summary: 'The keys or values differ from the JSON Schema that analog.contentSchema names.',
-  },
-  'content-schema-unreadable': {
-    title: 'The content schema could not be used',
-    summary: 'analog.contentSchema names a file that is missing, outside the project or not JSON.',
-  },
-  'duplicate-slug': {
-    title: 'Two posts share a slug',
-    summary: 'injectContent picks one of them at random.',
-  },
-  'content-shadows-page': {
-    title: 'Markdown file takes over a page',
-    summary:
-      'Files under src/content are routes too, so these URLs render the markdown file instead of the [param] page.',
-  },
-  'load-fetched-twice': {
-    title: 'load() runs twice',
-    summary:
-      'These pages fetched their data while rendering on the server and again in the browser.',
-  },
-  'fn-fetched-twice': {
-    title: 'Server function read runs twice',
-    summary:
-      'These reads ran while rendering on the server and again in the browser right after hydration.',
-  },
-  'restart-needed': {
-    title: 'New pages need a restart',
-    summary: 'These page files exist, but the running router does not know them yet.',
-  },
-  'hydration-error': {
-    title: 'Hydration error',
-    summary: 'The browser DOM did not match the server HTML.',
-  },
-  'api-not-found': {
-    title: 'API call failed with 404 or 405',
-    summary: 'A request hit a path or method that no server route handles.',
-  },
-};
-type Kind = 'all' | AnalogCall['kind'];
-
-/** Rows the call list renders at most, newest first. */
-const MAX_SHOWN_CALLS = 150;
-/** Calls the dev server keeps (`MAX_CALLS` in packages/devtools/src/analog-server-log.ts). */
-const MAX_SERVER_CALLS = 200;
-
-const STATIC_MESSAGES = new Set([
-  'missing-default-export',
-  'redirect-with-component',
-  'redirect-path-match',
-  'layout-without-outlet',
-  'server-without-load',
-  'orphan-server-file',
-  'load-fetched-twice',
-  'restart-needed',
-  'prerender-missing-root',
-]);
-
-const MODE_LABEL = {
-  ssr: 'SSR',
-  ssg: 'Prerendered',
-  client: 'Client only',
-  cached: 'Cached',
-  redirect: 'Redirect',
-} as const;
-const KIND_LABEL: Record<Kind, string> = {
-  all: 'All',
-  page: 'Pages',
-  load: 'load()',
-  action: 'Actions',
-  fn: 'Server fn',
-  api: 'API',
-};
-const OUTCOME_LABEL: Record<ActionOutcome, string> = {
-  success: 'succeeded',
-  redirect: 'redirected',
-  invalid: 'validation errors',
-  error: 'failed',
-};
-const OUTCOME_TONE: Record<ActionOutcome, string> = {
-  success: 'good',
-  redirect: 'info',
-  invalid: 'warn',
-  error: 'bad',
-};
-
-function walk(routes: AnalogRoute[], depth = 0, out: { route: AnalogRoute; depth: number }[] = []) {
-  for (const route of routes) {
-    out.push({ route, depth });
-    walk(route.children, depth + 1, out);
-  }
-  return out;
-}
-
+import { AnalogCallsState } from './analog/analog-calls-state';
+import { AnalogContent } from './analog/analog-content';
+import { AnalogLint } from './analog/analog-lint';
+import type { AnalogRoute, ApiRoute } from './analog/analog-model';
+import { AnalogPageState } from './analog/analog-page-state';
+import { AnalogRender } from './analog/analog-render';
+import { AnalogRoutes } from './analog/analog-routes';
+import { AnalogServer } from './analog/analog-server';
+
+/**
+ * The Analog page: the project summary, the view tabs, and one view per tab. The Routes, Server,
+ * Render, Content and Lint views live in `./analog/` and share the page's {@link AnalogPageState}
+ * and {@link AnalogCallsState}; the page keeps the members its tests and the shell read on itself.
+ */
 @Component({
   selector: 'app-analog-inspector',
   imports: [
-    SearchField,
-    SourceLink,
-    AnalogPlayground,
-    AnalogBuild,
+    AnalogContent,
     AnalogData,
-    AnalogContentPreview,
+    AnalogLint,
+    AnalogRender,
+    AnalogRoutes,
     AnalogRuntime,
-    AnalogTransform,
+    AnalogServer,
   ],
-  template: `
-    @if (project() === null && loadFailed()) {
-      <div class="empty" role="alert">
-        <h2 class="empty-title">Could not read the project.</h2>
-        <p class="muted">
-          Check that the dev server with Pangular Inspector is still running, then retry.
-        </p>
-        <button type="button" class="btn" (click)="retry()">Retry</button>
-      </div>
-    } @else if (project() === null) {
-      <div class="loading" role="status">
-        <span class="spinner" aria-hidden="true"></span>
-        <span>Reading the project…</span>
-      </div>
-    } @else if (!project()!.analog) {
-      <div class="empty">
-        <h2 class="empty-title">This app is not an Analog app.</h2>
-        <p class="muted">
-          Add <code>pangular()</code> from <code>@pangular-inspector/devtools/vite</code> next to
-          <code>analog()</code> in vite.config.ts and run the Analog dev server.
-        </p>
-      </div>
-    } @else {
-      <section class="summary" aria-label="Analog summary">
-        <div class="stat">
-          <span class="label">Analog</span>
-          <span class="value">{{ project()!.version || 'unknown' }}</span>
-        </div>
-        <div class="stat">
-          <span class="label">Pages</span>
-          <span class="value">{{ pageCount() }}</span>
-        </div>
-        <div class="stat">
-          <span class="label">API routes</span>
-          <span class="value">{{ project()!.api.length }}</span>
-        </div>
-        <div class="stat">
-          <span class="label">Server calls</span>
-          <span class="value">{{ tabCalls().length }}</span>
-        </div>
-        <div class="stat" [attr.data-tone]="lintTone() || 'good'">
-          <span class="label">Issues</span>
-          <span class="value">{{ lintCount().errors + lintCount().warnings }}</span>
-        </div>
-        @if (page(); as p) {
-          <div class="stat wide">
-            <span class="label">Open in the browser</span>
-            <span class="value mono" [title]="p.url">{{ p.url }}</span>
-          </div>
-        }
-      </section>
-
-      <div class="tabs" role="tablist" aria-label="Analog views" (keydown)="onKey($event)">
-        @for (v of views(); track v.id) {
-          <button
-            type="button"
-            role="tab"
-            [id]="'analog-tab-' + v.id"
-            [attr.aria-selected]="v.id === view()"
-            [attr.aria-controls]="'analog-panel-' + v.id"
-            [attr.tabindex]="v.id === view() ? 0 : -1"
-            (click)="view.set(v.id)"
-          >
-            {{ v.label }}
-            @if (v.count !== null) {
-              <span class="count" [attr.data-tone]="v.tone">{{ v.count }}</span>
-            }
-          </button>
-        }
-      </div>
-
-      <div
-        class="panel"
-        role="tabpanel"
-        [id]="'analog-panel-' + view()"
-        [attr.aria-labelledby]="'analog-tab-' + view()"
-      >
-        @switch (view()) {
-          @case ('routes') {
-            <div class="toolbar">
-              <form class="inline explain" (submit)="$event.preventDefault(); explain()">
-                <label for="analog-url">Test a URL</label>
-                <input
-                  id="analog-url"
-                  class="field grow mono"
-                  type="text"
-                  placeholder="/products/42"
-                  [value]="testUrl()"
-                  (input)="testUrl.set($any($event.target).value)"
-                />
-                <button type="submit" class="btn primary" [disabled]="explaining()">
-                  {{ explaining() ? 'Explaining…' : 'Explain' }}
-                </button>
-              </form>
-              <app-search-field
-                class="filter"
-                inputId="route-filter"
-                placeholder="Filter by path or file"
-                saveKey="analog-routes"
-                [(value)]="filter"
-              />
-            </div>
-            <div class="explain-result" role="status">
-              @if (explainError(); as error) {
-                <div class="callout" data-tone="bad">{{ error }}</div>
-              } @else if (explained(); as e) {
-                <div class="callout" [attr.data-tone]="e.match.matched ? 'good' : 'bad'">
-                  @if (e.match.matched) {
-                    <strong class="mono">{{ e.url }}</strong> renders
-                    <ol class="chain">
-                      @for (r of e.match.chain; track r.id) {
-                        <li>
-                          @if (r.file) {
-                            <app-source-link class="mono" [file]="r.file">{{
-                              short(r.file)
-                            }}</app-source-link>
-                          } @else {
-                            <span class="mono">{{ r.fullPath }}</span>
-                          }
-                          <span class="pill" [attr.data-kind]="r.kind">{{ r.kind }}</span>
-                        </li>
-                      }
-                    </ol>
-                    @if (paramList(e.match.params).length) {
-                      <div class="chips">
-                        @for (p of paramList(e.match.params); track p[0]) {
-                          <span class="chip mono">{{ p[0] }} = {{ p[1] }}</span>
-                        }
-                      </div>
-                    }
-                  } @else {
-                    <strong class="mono">{{ e.url }}</strong> matches no file route. Angular throws
-                    NG04002 "Cannot match any routes".
-                    @if (e.match.rejected.length) {
-                      <ul class="plain">
-                        @for (r of e.match.rejected.slice(0, 5); track $index) {
-                          <li>
-                            @if (r.file) {
-                              <app-source-link class="mono" [file]="r.file">{{
-                                short(r.file)
-                              }}</app-source-link>
-                            } @else {
-                              <span class="mono">{{ r.path }}</span>
-                            }
-                            <span class="muted">{{ r.reason }}</span>
-                          </li>
-                        }
-                      </ul>
-                    }
-                  }
-                </div>
-              }
-            </div>
-            <div class="table-wrap" role="region" aria-label="File routes" tabindex="0">
-              <table>
-                <thead>
-                  <tr>
-                    <th scope="col">Route</th>
-                    <th scope="col">File</th>
-                    <th scope="col">Data</th>
-                    <th scope="col">Route meta</th>
-                    <th scope="col"><span class="sr-only">Actions</span></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  @for (row of routeRows(); track row.route.id) {
-                    <tr
-                      [class.open]="isOpen(row.route)"
-                      [class.dim]="row.route.kind === 'group' || row.route.kind === 'implicit'"
-                    >
-                      <td>
-                        <div class="route" [style.padding-left.px]="row.depth * 16">
-                          @if (row.depth) {
-                            <span class="guide" aria-hidden="true">└</span>
-                          }
-                          <span class="mono path">{{ row.route.fullPath }}</span>
-                          <span class="pill" [attr.data-kind]="row.route.kind">{{
-                            kindText(row.route)
-                          }}</span>
-                          @if (isOpen(row.route)) {
-                            <span class="pill live">{{ openText(row.route) }}</span>
-                          }
-                        </div>
-                      </td>
-                      <td>
-                        @if (row.route.file) {
-                          <app-source-link class="file" [file]="row.route.file"
-                            ><span class="dir">{{ dir(row.route.file) }}</span
-                            >{{ base(row.route.file) }}</app-source-link
-                          >
-                        } @else {
-                          <span class="muted">folder only</span>
-                        }
-                      </td>
-                      <td>
-                        <div class="meta">
-                          @for (e of serverExports(row.route); track e) {
-                            <span class="pill" data-kind="load">{{ e }}()</span>
-                          }
-                        </div>
-                      </td>
-                      <td>
-                        @if (row.route.title) {
-                          <span class="chip">"{{ row.route.title }}"</span>
-                        }
-                        @for (key of row.route.routeMeta ?? []; track key) {
-                          @if (key !== 'title') {
-                            <span class="chip mono">{{ key }}</span>
-                          }
-                        }
-                      </td>
-                      <td class="actions">
-                        @if (row.route.file && row.route.kind !== 'markdown') {
-                          <button
-                            type="button"
-                            class="btn ghost"
-                            [attr.aria-label]="'Show the Vite transform stack of ' + row.route.file"
-                            [attr.aria-pressed]="transformFile() === row.route.file"
-                            (click)="showTransform(row.route.file)"
-                          >
-                            Transform
-                          </button>
-                        }
-                      </td>
-                    </tr>
-                  } @empty {
-                    <tr>
-                      <td colspan="5" class="empty-row">
-                        @if (filter().trim()) {
-                          No route matches the filter. Try part of a path or a file name.
-                        } @else {
-                          No file routes yet. Add a .page.ts file under src/app/pages.
-                        }
-                      </td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
-            </div>
-            @if (transformFile(); as file) {
-              <app-analog-transform
-                [rpc]="rpc()"
-                [file]="file"
-                [serverFns]="serverFns()"
-                (closed)="closeTransform(file)"
-              />
-            }
-          }
-
-          @case ('server') {
-            @if (duplicates().length) {
-              <div class="callout" data-tone="warn" role="note">
-                <strong>load() ran twice</strong> for
-                @for (d of duplicates(); track d; let last = $last) {
-                  <span class="mono">{{ d }}</span
-                  >{{ last ? '' : ', ' }}
-                }
-                : once while server rendering, again in the browser. TransferState did not serve the
-                server result.
-              </div>
-            }
-            @if (refetchedFns().length) {
-              <div class="callout" data-tone="warn" role="note">
-                <strong>Server function read ran twice</strong>:
-                @for (name of refetchedFns(); track name; let last = $last) {
-                  <span class="mono">{{ name }}</span
-                  >{{ last ? '' : ', ' }}
-                }
-                ran while server rendering, then again in the browser. The browser did not use the
-                TransferState seed.
-              </div>
-            }
-            <h2 id="analog-calls-heading">Server calls</h2>
-            <div class="calls-bar">
-              <fieldset class="segmented">
-                <legend class="sr-only">Show calls of kind</legend>
-                @for (k of kinds; track k) {
-                  <label [class.on]="kind() === k">
-                    <input
-                      type="radio"
-                      name="analog-kind"
-                      class="sr-only"
-                      [attr.data-kind]="k"
-                      [checked]="kind() === k"
-                      (change)="kind.set(k)"
-                    />
-                    {{ kindLabel(k) }} <span class="muted">{{ kindCount(k) }}</span>
-                  </label>
-                }
-              </fieldset>
-              <div class="calls-actions">
-                <button
-                  type="button"
-                  class="btn ghost"
-                  [disabled]="!allCalls().length"
-                  (click)="clearCalls()"
-                >
-                  Clear calls
-                </button>
-                <span class="calls-message" role="status">{{ callsMessage() }}</span>
-              </div>
-            </div>
-            <div class="call-filters" role="group" aria-label="Filter the server calls">
-              <app-search-field
-                class="search"
-                inputId="analog-call-search"
-                placeholder="Filter by URL, path or function"
-                saveKey="analog-calls"
-                [(value)]="callQuery"
-              />
-              <label class="check">
-                <input
-                  type="checkbox"
-                  [checked]="failedOnly()"
-                  (change)="failedOnly.set($any($event.target).checked)"
-                />
-                Failed only
-              </label>
-              @if (scopePageId()) {
-                <label class="check">
-                  <input
-                    type="checkbox"
-                    data-testid="analog-all-tabs"
-                    [checked]="allTabs()"
-                    (change)="allTabs.set($any($event.target).checked)"
-                  />
-                  All tabs (including untagged)
-                </label>
-              }
-              <span class="total" aria-live="polite"
-                >{{ matchingCalls().length }} of {{ tabCalls().length }}</span
-              >
-            </div>
-            @if (shownCount() < matchingCalls().length || serverFull()) {
-              <p class="note">
-                @if (shownCount() < matchingCalls().length) {
-                  Showing the newest {{ shownCount() }} of {{ matchingCalls().length }}.
-                }
-                @if (serverFull()) {
-                  The dev server keeps only the newest {{ maxServerCalls }} calls and drops older
-                  ones.
-                }
-              </p>
-            }
-            @if (calls().length) {
-              <div class="table-wrap" role="region" aria-label="Server calls" tabindex="0">
-                <table>
-                  <thead>
-                    <tr>
-                      <th scope="col">At</th>
-                      <th scope="col">Kind</th>
-                      <th scope="col">Request</th>
-                      <th scope="col">Status</th>
-                      <th scope="col" class="num">Duration</th>
-                      <th scope="col">From</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    @for (c of calls(); track c.id) {
-                      <tr>
-                        <td class="muted nowrap">{{ time(c.at) }}</td>
-                        <td>
-                          <span class="pill" [attr.data-call]="c.kind">{{
-                            kindLabel(c.kind)
-                          }}</span>
-                        </td>
-                        <td class="request">
-                          <div class="meta">
-                            <span class="method" [attr.data-method]="c.method">{{ c.method }}</span>
-                            @if (fnOf(c); as fn) {
-                              <strong class="mono url">{{ fn.name }}</strong>
-                              @if (fn.file) {
-                                <app-source-link class="mono muted" [file]="fn.file">{{
-                                  short(fn.file)
-                                }}</app-source-link>
-                              }
-                            } @else {
-                              <span class="mono url">{{ c.url }}</span>
-                            }
-                            @if (c.seeded) {
-                              <span class="pill">ran during server rendering</span>
-                            }
-                            @if (c.outcome) {
-                              <span class="pill" [attr.data-tone]="outcomeTone(c.outcome)"
-                                >{{ outcomeLabel(c.outcome) }}
-                                @if (c.location) {
-                                  to {{ c.location }}
-                                }
-                              </span>
-                            }
-                            @if (c.render) {
-                              <span
-                                class="pill"
-                                [attr.data-mode]="c.render === 'ssr' ? 'ssr' : 'client'"
-                                >{{ c.render === 'ssr' ? 'server rendered' : 'client only' }}</span
-                              >
-                            }
-                          </div>
-                          @if (c.preview) {
-                            <details>
-                              <summary>Response</summary>
-                              <pre class="code">{{ pretty(c.preview) }}</pre>
-                            </details>
-                          }
-                        </td>
-                        <td>
-                          <span class="status" [attr.data-status]="statusClass(c.status)">{{
-                            c.status
-                          }}</span>
-                        </td>
-                        <td class="num nowrap">
-                          @if (c.seeded) {
-                            <span class="muted">in process</span>
-                          } @else {
-                            {{ c.ms }} ms
-                          }
-                        </td>
-                        <td class="muted">{{ c.from }}</td>
-                      </tr>
-                    }
-                  </tbody>
-                </table>
-              </div>
-            } @else if (tabCalls().length && callFiltered()) {
-              <div class="empty-box no-match" role="status">
-                <p class="empty-lead">No calls match.</p>
-                <p class="muted">
-                  @if (callQuery().trim()) {
-                    Nothing matches “{{ callQuery().trim() }}” with these filters.
-                  } @else {
-                    None of the {{ tabCalls().length }} calls fit these filters.
-                  }
-                </p>
-                <div class="empty-actions">
-                  <button type="button" class="btn ghost" (click)="clearCallFilters()">
-                    Clear filters
-                  </button>
-                </div>
-              </div>
-            } @else {
-              <div class="empty-box">
-                <p class="empty-lead">
-                  @if (tabCalls().length) {
-                    No calls of this kind yet.
-                  } @else if (allCalls().length) {
-                    No calls from this tab yet.
-                  } @else {
-                    No calls yet.
-                  }
-                </p>
-                <p class="muted">
-                  Navigate in the app to see page renders, load() fetches, form actions, server
-                  functions and API calls.
-                  @if (!tabCalls().length && allCalls().length) {
-                    Tick “All tabs (including untagged)” to see the
-                    {{ allCalls().length }} calls from other tabs or tied to no tab.
-                  }
-                </p>
-              </div>
-            }
-
-            <h2>API routes</h2>
-            <div class="table-wrap" role="region" aria-label="API routes" tabindex="0">
-              <table>
-                <thead>
-                  <tr>
-                    <th scope="col">Method</th>
-                    <th scope="col">Path</th>
-                    <th scope="col">File</th>
-                    <th scope="col"><span class="sr-only">Actions</span></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  @for (api of project()!.api; track api.file + api.method) {
-                    <tr>
-                      <td>
-                        <span class="method" [attr.data-method]="api.method">{{ api.method }}</span>
-                      </td>
-                      <td class="mono">{{ api.path }}</td>
-                      <td>
-                        <app-source-link class="file" [file]="api.file"
-                          ><span class="dir">{{ dir(api.file) }}</span
-                          >{{ base(api.file) }}</app-source-link
-                        >
-                      </td>
-                      <td class="actions">
-                        <button
-                          type="button"
-                          class="btn ghost"
-                          [attr.aria-label]="'Try ' + api.method + ' ' + api.path"
-                          (click)="tryApi(api)"
-                        >
-                          Try
-                        </button>
-                      </td>
-                    </tr>
-                  } @empty {
-                    <tr>
-                      <td colspan="4" class="empty-row">
-                        No API routes. Add a handler under src/server/routes to test it here.
-                      </td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
-            </div>
-
-            @if (serverFns().length) {
-              <h2>Server functions</h2>
-              <div class="table-wrap" role="region" aria-label="Server functions" tabindex="0">
-                <table>
-                  <thead>
-                    <tr>
-                      <th scope="col">Method</th>
-                      <th scope="col">Name</th>
-                      <th scope="col">File</th>
-                      <th scope="col" class="num">Calls</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    @for (fn of serverFns(); track fn.id) {
-                      <tr>
-                        <td>
-                          <span class="method" [attr.data-method]="fn.method">{{ fn.method }}</span>
-                        </td>
-                        <td class="mono">{{ fn.name }}</td>
-                        <td>
-                          <app-source-link class="file" [file]="fn.file"
-                            ><span class="dir">{{ dir(fn.file) }}</span
-                            >{{ base(fn.file) }}</app-source-link
-                          >
-                        </td>
-                        <td class="num tnum">{{ fnCalls(fn.id) }}</td>
-                      </tr>
-                    }
-                  </tbody>
-                </table>
-              </div>
-            }
-
-            <app-analog-playground
-              [rpc]="rpc()"
-              [routes]="project()!.api"
-              [target]="tryTarget()"
-              [origin]="devOrigin()"
-            />
-          }
-
-          @case ('render') {
-            @if (plan()?.configPartial?.length) {
-              <p class="note" role="status">
-                The analog() options in vite.config could not be read in full, so these modes and
-                the prerender plan may be incomplete.
-                @for (reason of plan()!.configPartial; track reason) {
-                  {{ reason }}
-                }
-              </p>
-            }
-            @if (modeCounts().length) {
-              <div class="chips">
-                @for (m of modeCounts(); track m.mode) {
-                  <span class="pill" [attr.data-mode]="m.mode">{{ m.label }} · {{ m.count }}</span>
-                }
-              </div>
-            }
-            <div class="table-wrap" role="region" aria-label="Render modes" tabindex="0">
-              <table>
-                <thead>
-                  <tr>
-                    <th scope="col">Route</th>
-                    <th scope="col">Configured</th>
-                    <th scope="col">Last request</th>
-                    <th scope="col">Dev server check</th>
-                    <th scope="col">File</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  @for (row of renderRows(); track row.path) {
-                    <tr>
-                      <td class="mono path">{{ row.path }}</td>
-                      <td>
-                        <div class="meta">
-                          <span class="pill" [attr.data-mode]="row.mode">{{
-                            modeLabel(row.mode)
-                          }}</span>
-                          <span class="muted small">{{ row.reason }}</span>
-                        </div>
-                      </td>
-                      <td>
-                        @if (row.last; as last) {
-                          <div class="meta">
-                            <span class="status" [attr.data-status]="statusClass(last.status)">{{
-                              last.status
-                            }}</span>
-                            <span class="muted small tnum"
-                              >{{ last.render === 'client' ? 'client only' : 'server rendered' }} ·
-                              {{ last.ms }} ms</span
-                            >
-                            @if (mismatch(row)) {
-                              <span class="pill" data-tone="warn">differs from config</span>
-                            }
-                          </div>
-                        } @else {
-                          <span class="muted small">not requested yet</span>
-                        }
-                      </td>
-                      <td>
-                        @if (checks()[row.path]; as check) {
-                          @if (check === 'running') {
-                            <span class="muted small" role="status">Checking…</span>
-                          } @else if (check.error) {
-                            <span class="pill" data-tone="bad">{{ check.error }}</span>
-                          } @else {
-                            <div class="meta">
-                              <span class="pill" [attr.data-mode]="check.observed">{{
-                                modeLabel(check.observed!)
-                              }}</span>
-                              <span
-                                class="pill"
-                                [attr.data-tone]="check.matches ? 'good' : 'warn'"
-                                >{{
-                                  check.matches ? 'fits the config' : 'differs from config'
-                                }}</span
-                              >
-                              @if (check.note) {
-                                <span class="muted small">{{ check.note }}</span>
-                              }
-                            </div>
-                          }
-                        }
-                        <button
-                          type="button"
-                          class="btn ghost"
-                          [disabled]="checks()[row.path] === 'running'"
-                          [attr.aria-label]="'Request ' + row.path + ' and check its render mode'"
-                          (click)="checkRender(row.path)"
-                        >
-                          Check
-                        </button>
-                      </td>
-                      <td>
-                        @if (row.file) {
-                          <app-source-link class="file" [file]="row.file"
-                            ><span class="dir">{{ dir(row.file) }}</span
-                            >{{ base(row.file) }}</app-source-link
-                          >
-                        }
-                      </td>
-                    </tr>
-                  } @empty {
-                    <tr>
-                      <td colspan="5" class="empty-row">
-                        No page routes to render yet. Add a .page.ts file under src/app/pages.
-                      </td>
-                    </tr>
-                  }
-                </tbody>
-              </table>
-            </div>
-            @if (plan(); as p) {
-              <div class="card">
-                <h2>Prerender plan</h2>
-                @if (p.dynamicConfig) {
-                  <p class="muted">
-                    prerender.routes is a function, so the list is known only at build time.
-                  </p>
-                } @else {
-                  <dl class="facts">
-                    <dt>Listed</dt>
-                    <dd>
-                      @for (r of p.listed ?? ['/']; track r) {
-                        <span class="chip mono">{{ r }}</span>
-                      }
-                      @if (!p.listed) {
-                        <span class="muted small">default, nothing configured</span>
-                      }
-                    </dd>
-                    @if (p.fromRules?.length) {
-                      <dt>From routeRules</dt>
-                      <dd>
-                        @for (r of p.fromRules; track r) {
-                          <span class="chip mono">{{ r }}</span>
-                        }
-                      </dd>
-                    }
-                    @if (p.staticMissing.length) {
-                      <dt>Static, not listed</dt>
-                      <dd>
-                        @for (r of p.staticMissing; track r) {
-                          <span class="chip mono" data-tone="warn">{{ r }}</span>
-                        }
-                      </dd>
-                    }
-                    @if (p.dynamic.length) {
-                      <dt>Need explicit entries</dt>
-                      <dd>
-                        @for (r of p.dynamic; track r) {
-                          <span class="chip mono">{{ r }}</span>
-                        }
-                      </dd>
-                    }
-                    <dt>Build output</dt>
-                    <dd class="tnum">
-                      @if (p.built.length) {
-                        {{ plural(p.built.length, 'page') }} in dist/analog/public
-                        @if (p.notBuilt.length) {
-                          · missing
-                          @for (r of p.notBuilt; track r) {
-                            <span class="chip mono" data-tone="bad">{{ r }}</span>
-                          }
-                        }
-                      } @else {
-                        <span class="muted small">no build yet</span>
-                      }
-                    </dd>
-                  </dl>
-                }
-              </div>
-            }
-            <app-analog-build [rpc]="rpc()" />
-          }
-
-          @case ('content') {
-            @if (project()!.content.length) {
-              <div class="table-wrap" role="region" aria-label="Content files" tabindex="0">
-                <table>
-                  <thead>
-                    <tr>
-                      <th scope="col">Title</th>
-                      <th scope="col">URL</th>
-                      <th scope="col">Slug</th>
-                      <th scope="col">Date</th>
-                      <th scope="col">File</th>
-                      <th scope="col"><span class="sr-only">Actions</span></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    @for (f of project()!.content; track f.file) {
-                      <tr>
-                        <td>
-                          <strong>{{ f.attributes['title'] || '(no title)' }}</strong>
-                          @if (f.error) {
-                            <div>
-                              <span class="pill" data-tone="bad">{{ f.error }}</span>
-                            </div>
-                          }
-                          @if (shadowed(f.file); as page) {
-                            <div>
-                              <span class="pill" data-tone="warn">takes over {{ base(page) }}</span>
-                            </div>
-                          }
-                          @if (f.schemaErrors?.length) {
-                            <div>
-                              <span class="pill" data-tone="warn">{{
-                                plural(f.schemaErrors!.length, 'schema problem')
-                              }}</span>
-                            </div>
-                          }
-                        </td>
-                        <td class="mono path">{{ contentUrl(f.file) ?? '' }}</td>
-                        <td class="mono">{{ f.slug }}</td>
-                        <td class="muted nowrap tnum">{{ f.attributes['date'] || '' }}</td>
-                        <td>
-                          <app-source-link class="file" [file]="f.file"
-                            ><span class="dir">{{ dir(f.file) }}</span
-                            >{{ base(f.file) }}</app-source-link
-                          >
-                        </td>
-                        <td class="actions">
-                          <button
-                            type="button"
-                            class="btn ghost"
-                            [attr.aria-label]="'Preview ' + f.file"
-                            [attr.aria-pressed]="previewFile() === f.file"
-                            (click)="showPreview(f.file)"
-                          >
-                            Preview
-                          </button>
-                        </td>
-                      </tr>
-                    }
-                  </tbody>
-                </table>
-              </div>
-            } @else {
-              <div class="empty-box">
-                <p class="empty-lead">No markdown files under src/content.</p>
-                <p class="muted">
-                  Add a .md file there to see its title, slug, date and the URL it serves.
-                </p>
-              </div>
-            }
-            @if (project()!.content.length) {
-              <dl class="facts content-facts">
-                <dt>Schema</dt>
-                <dd>
-                  @if (project()!.contentSchema; as schema) {
-                    @if (schema.error) {
-                      <span class="pill" data-tone="bad">{{ schema.error }}</span>
-                    } @else {
-                      <span class="mono">{{ schema.file }}</span>
-                      @if (schema.unsupported?.length) {
-                        <span class="muted small">
-                          (skips {{ schema.unsupported!.join(', ') }})</span
-                        >
-                      }
-                    }
-                  } @else {
-                    <span class="muted small"
-                      >none; set <code>analog.contentSchema</code> to check frontmatter</span
-                    >
-                  }
-                </dd>
-                <dt>Read by</dt>
-                <dd>
-                  @for (u of project()!.contentUsage ?? []; track u.file + u.line) {
-                    <app-source-link class="chip mono" [file]="u.file" [line]="u.line"
-                      >{{ u.api }} · {{ base(u.file) }}:{{ u.line }}</app-source-link
-                    >
-                  } @empty {
-                    <span class="muted small"
-                      >no injectContentFiles, injectContent or contentFilesSource call under
-                      src</span
-                    >
-                  }
-                </dd>
-              </dl>
-            }
-            @if (previewFile(); as file) {
-              <app-analog-content-preview
-                [rpc]="rpc()"
-                [file]="file"
-                [schema]="
-                  project()!.contentSchema?.error ? undefined : project()!.contentSchema?.file
-                "
-                (closed)="closePreview(file)"
-              />
-            }
-          }
-
-          @case ('data') {
-            <app-analog-data
-              [rpc]="rpc()"
-              [page]="page()"
-              [serverFns]="serverFns()"
-              [duplicates]="state().duplicates ?? []"
-              [refetches]="state().refetches ?? []"
-            />
-          }
-
-          @case ('runtime') {
-            <app-analog-runtime [rpc]="rpc()" />
-          }
-
-          @case ('lint') {
-            @if (findings().length) {
-              <p class="muted">
-                {{ plural(findings().length, 'issue') }} in
-                {{ plural(lintCards().length, 'group') }}. Each card says what is wrong, where, and
-                how to fix it.
-              </p>
-              <ul class="findings">
-                @for (card of lintCards(); track card.rule) {
-                  <li [attr.data-tone]="tone(card.severity)">
-                    <div class="finding-head">
-                      <span class="pill" [attr.data-tone]="tone(card.severity)">{{
-                        card.severity
-                      }}</span>
-                      <strong class="finding-title">{{ card.title }}</strong>
-                      @if (card.items.length > 1) {
-                        <span class="count">{{ card.items.length }}</span>
-                      }
-                    </div>
-                    <p>{{ card.summary }}</p>
-                    <ul class="where">
-                      @for (item of card.items; track $index) {
-                        <li>
-                          @if (item.file) {
-                            <app-source-link class="file" [file]="item.file"
-                              ><span class="dir">{{ dir(item.file) }}</span
-                              >{{ base(item.file) }}</app-source-link
-                            >
-                          }
-                          @if (item.path && item.path !== item.file) {
-                            <span class="mono path">{{ item.path }}</span>
-                          }
-                          @if (item.message) {
-                            <p class="detail">{{ item.message }}</p>
-                          }
-                        </li>
-                      }
-                    </ul>
-                    <div class="fix"><strong>How to fix</strong> {{ card.fix }}</div>
-                    <span class="rule mono">{{ card.rule }}</span>
-                  </li>
-                }
-              </ul>
-            } @else {
-              <div class="callout" data-tone="good" role="status">
-                <strong>No Analog problems found.</strong> Routes, server files, prerender config
-                and content all check out.
-              </div>
-            }
-          }
-        }
-      </div>
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      --good: var(--ok);
-      --bad: var(--danger);
-    }
-    :host {
-      --mono: var(--font-mono);
-      display: grid;
-      gap: 16px;
-      min-width: 0;
-      color: var(--text);
-      font-size: 13px;
-    }
-    .loading {
-      display: flex;
-      gap: 12px;
-      align-items: center;
-      padding: 16px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      color: var(--text-2);
-    }
-    .spinner {
-      width: 16px;
-      height: 16px;
-      flex: none;
-      border: 2px solid var(--border-strong);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .spinner {
-        animation: none;
-        border-color: var(--accent-line);
-      }
-    }
-    .tnum {
-      font-variant-numeric: tabular-nums;
-    }
-    .meta {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px 8px;
-      align-items: center;
-      min-width: 0;
-    }
-    .empty-row {
-      padding: 24px 16px;
-      color: var(--text-2);
-      text-align: center;
-    }
-    tbody tr:hover td.empty-row {
-      background: transparent;
-    }
-    .empty-box {
-      display: grid;
-      gap: 4px;
-      padding: 24px 16px;
-      border: 1px dashed var(--border-strong);
-      border-radius: var(--radius);
-      text-align: center;
-    }
-    .empty-box p {
-      margin: 0;
-      line-height: 1.55;
-    }
-    .empty-lead {
-      color: var(--text-strong);
-      font-weight: 600;
-    }
-    .mono {
-      font-family: var(--mono);
-      font-size: 12.5px;
-    }
-    .muted {
-      color: var(--text-2);
-    }
-    .small {
-      font-size: 12px;
-    }
-    .nowrap {
-      white-space: nowrap;
-    }
-    code {
-      padding: 1px 6px;
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      background: var(--surface-2);
-      color: var(--text-strong);
-      font-family: var(--mono);
-      font-size: 12.5px;
-    }
-
-    .summary {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-      gap: 12px;
-      animation: enter 0.35s var(--ease) both;
-    }
-    .stat {
-      display: grid;
-      gap: 6px;
-      align-content: start;
-      padding: 12px 16px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      box-shadow: var(--shadow);
-      transition:
-        border-color 180ms var(--ease),
-        background-color 180ms var(--ease);
-    }
-    .stat:hover {
-      border-color: var(--border-strong);
-    }
-    .stat.wide {
-      grid-column: span 2;
-      min-width: 0;
-    }
-    @media (max-width: 340px) {
-      .stat.wide {
-        grid-column: 1 / -1;
-      }
-    }
-    .stat .label {
-      color: var(--text-3);
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .stat .value {
-      color: var(--text-strong);
-      font-size: 20px;
-      font-weight: 600;
-      letter-spacing: -0.01em;
-      font-variant-numeric: tabular-nums;
-      overflow-wrap: anywhere;
-    }
-    .stat .value.mono {
-      overflow: hidden;
-      color: var(--text);
-      font-size: 13px;
-      font-weight: 500;
-      line-height: 24px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .stat[data-tone='warn'] .value {
-      color: var(--warn);
-    }
-    .stat[data-tone='good'] .value {
-      color: var(--ok);
-    }
-    .stat[data-tone='bad'] .value {
-      color: var(--danger-text);
-    }
-
-    .tabs {
-      display: inline-flex;
-      flex-wrap: wrap;
-      gap: 2px;
-      justify-self: start;
-      max-width: 100%;
-      padding: 3px;
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      background: var(--bg);
-    }
-    [role='tab'] {
-      display: inline-flex;
-      gap: 8px;
-      align-items: center;
-      min-height: 28px;
-      padding: 4px 12px;
-      border: none;
-      border-radius: 7px;
-      background: transparent;
-      color: var(--text-2);
-      font: inherit;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 180ms var(--ease),
-        color 180ms var(--ease),
-        box-shadow 180ms var(--ease);
-    }
-    [role='tab']:hover {
-      color: var(--text);
-    }
-    [role='tab'][aria-selected='true'] {
-      background: var(--surface-3);
-      color: var(--text-strong);
-      box-shadow: inset 0 0 0 1px var(--border-strong);
-    }
-    .count {
-      min-width: 20px;
-      padding: 0 6px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-      font-weight: 600;
-      line-height: 18px;
-      text-align: center;
-      font-variant-numeric: tabular-nums;
-    }
-    [role='tab'][aria-selected='true'] .count {
-      background: var(--border-strong);
-      color: var(--text);
-    }
-    .count[data-tone='warn'],
-    [role='tab'][aria-selected='true'] .count[data-tone='warn'] {
-      background: color-mix(in srgb, var(--warn) 12%, transparent);
-      color: var(--warn-text);
-    }
-    .count[data-tone='bad'],
-    [role='tab'][aria-selected='true'] .count[data-tone='bad'] {
-      background: color-mix(in srgb, var(--danger) 12%, transparent);
-      color: var(--danger-text);
-    }
-
-    .panel {
-      display: grid;
-      gap: 16px;
-      min-width: 0;
-      animation: enter 0.35s var(--ease) both;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: blur(10px);
-    }
-    .explain {
-      flex: 1 1 320px;
-      min-width: 0;
-    }
-    .filter {
-      flex: 0 1 240px;
-      min-width: 0;
-    }
-    @media (max-width: 560px) {
-      .filter {
-        flex: 1 1 100%;
-      }
-    }
-    .inline,
-    .row {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      align-items: center;
-    }
-    .inline > label,
-    .playground > label:not(.check) {
-      color: var(--text-3);
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-
-    .field {
-      box-sizing: border-box;
-      height: 34px;
-      padding: 0 12px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background-color: var(--bg);
-      color: var(--text);
-      font: inherit;
-      font-size: 13px;
-      transition:
-        border-color 180ms var(--ease),
-        box-shadow 180ms var(--ease);
-    }
-    .field.mono {
-      font-family: var(--mono);
-      font-size: 13px;
-    }
-    .field::placeholder {
-      color: var(--text-3);
-    }
-    .field:focus,
-    .field:focus-visible {
-      border-color: var(--accent);
-      box-shadow: 0 0 0 3px var(--accent-soft);
-      outline: none;
-    }
-    .method-select {
-      width: 112px;
-      font-family: var(--mono);
-    }
-    textarea.field {
-      height: auto;
-      padding: 8px 12px;
-    }
-    .grow {
-      flex: 1 1 180px;
-      min-width: 0;
-    }
-
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      height: 34px;
-      padding: 0 14px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font: inherit;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 160ms var(--ease),
-        border-color 160ms var(--ease),
-        color 160ms var(--ease);
-    }
-    .btn:hover {
-      background: var(--surface-3);
-      border-color: var(--control-border);
-    }
-    .btn:active {
-      transform: translateY(1px);
-    }
-    .btn.primary {
-      border-color: var(--accent);
-      background: var(--accent);
-      color: var(--accent-ink);
-      font-weight: 600;
-    }
-    .btn.primary:hover {
-      border-color: var(--accent-hover);
-      background: var(--accent-hover);
-    }
-    .btn.ghost {
-      height: 28px;
-      padding: 0 12px;
-      font-size: 12px;
-    }
-    .btn.ghost:hover {
-      border-color: var(--accent-line);
-      color: var(--text-strong);
-    }
-    td.actions {
-      width: 1%;
-      text-align: right;
-      vertical-align: middle;
-    }
-    .btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    [role='tab']:focus-visible,
-    .btn:focus-visible,
-    .table-wrap:focus-visible,
-    summary:focus-visible,
-    .segmented label:focus-within {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
-    }
-
-    .callout {
-      padding: 12px 16px;
-      border: 1px solid color-mix(in srgb, var(--hue-info) 30%, transparent);
-      border-radius: var(--radius);
-      background: color-mix(in srgb, var(--hue-info) 8%, var(--surface));
-      line-height: 1.6;
-      animation: enter 0.35s var(--ease) both;
-    }
-    .callout[data-tone='good'] {
-      border-color: color-mix(in srgb, var(--ok) 30%, transparent);
-      background: color-mix(in srgb, var(--ok) 12%, transparent);
-    }
-    .callout[data-tone='warn'] {
-      border-color: color-mix(in srgb, var(--warn) 30%, transparent);
-      background: color-mix(in srgb, var(--warn) 12%, transparent);
-    }
-    .callout[data-tone='bad'] {
-      border-color: color-mix(in srgb, var(--danger) 30%, transparent);
-      background: color-mix(in srgb, var(--danger) 12%, transparent);
-    }
-    .callout strong {
-      color: var(--text-strong);
-    }
-    .callout strong.mono {
-      overflow-wrap: anywhere;
-    }
-    .chain {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin: 8px 0 0;
-      padding: 0;
-      list-style: none;
-    }
-    .chain li {
-      display: inline-flex;
-      gap: 6px;
-      align-items: center;
-      min-width: 0;
-      overflow-wrap: anywhere;
-    }
-    .chain li:not(:last-child)::after {
-      content: '›';
-      margin-left: 2px;
-      color: var(--text-3);
-    }
-    .callout .chips {
-      margin-top: 8px;
-    }
-    .plain {
-      margin: 8px 0 0;
-      padding-left: 18px;
-    }
-    .plain li {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .table-wrap {
-      overflow-x: auto;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      box-shadow: var(--shadow);
-      animation: enter 0.35s var(--ease) both;
-    }
-    table {
-      width: 100%;
-      min-width: 560px;
-      border-collapse: collapse;
-    }
-    th,
-    td {
-      padding: 10px 12px;
-      border-bottom: 1px solid var(--border);
-      text-align: left;
-      vertical-align: top;
-    }
-    tbody tr:last-child td {
-      border-bottom: none;
-    }
-    th {
-      position: sticky;
-      top: 0;
-      background: var(--surface);
-      color: var(--text-3);
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      white-space: nowrap;
-    }
-    .num {
-      text-align: right;
-      font-variant-numeric: tabular-nums;
-    }
-    td.nowrap {
-      font-variant-numeric: tabular-nums;
-    }
-    tbody td {
-      transition: background-color 160ms var(--ease);
-    }
-    tbody tr:hover td {
-      background: var(--surface-2);
-    }
-    tr.open td {
-      background: var(--accent-soft);
-      color: var(--text-strong);
-    }
-    tr.open:hover td {
-      background: color-mix(in srgb, var(--accent) 16%, transparent);
-    }
-    tr.open td:first-child {
-      box-shadow: inset 2px 0 0 var(--accent);
-    }
-    tr.dim .path {
-      color: var(--text-2);
-    }
-    .route {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      align-items: center;
-    }
-    .guide {
-      color: var(--text-3);
-      font-family: var(--mono);
-    }
-    .path {
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-    }
-    .file {
-      font-family: var(--mono);
-      font-size: 12.5px;
-      color: var(--text);
-      overflow-wrap: anywhere;
-    }
-    .dir {
-      color: var(--text-3);
-    }
-
-    .pill,
-    .chip,
-    .status,
-    .method {
-      display: inline-block;
-      padding: 1px 8px;
-      border-radius: 99px;
-      font-size: 11px;
-      font-weight: 500;
-      line-height: 18px;
-      white-space: nowrap;
-    }
-    .pill {
-      border: 1px solid var(--border-strong);
-      background: var(--surface-2);
-      color: var(--text-2);
-    }
-    .chip {
-      margin: 0 4px 4px 0;
-      padding: 3px 10px;
-      border: 1px solid var(--border);
-      background: var(--surface-2);
-      color: var(--text);
-      font-size: 12px;
-      line-height: 16px;
-    }
-    .chip.mono {
-      font-size: 12px;
-    }
-    .chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .chips .pill {
-      padding: 3px 10px;
-      font-size: 12px;
-    }
-    .pill.live {
-      border-color: var(--accent-line);
-      background: color-mix(in srgb, var(--accent) 12%, var(--surface));
-      color: var(--accent-text);
-    }
-    .pill[data-kind='layout'],
-    .pill[data-mode='redirect'] {
-      border-color: var(--hue-slate);
-      color: var(--hue-slate-text);
-    }
-    .pill[data-kind='markdown'] {
-      border-color: var(--hue-sky);
-      color: var(--hue-sky-text);
-    }
-    .pill[data-kind='load'],
-    .pill[data-call='load'],
-    .pill[data-call='fn'] {
-      border-color: var(--hue-teal);
-      color: var(--hue-teal-text);
-    }
-    .pill[data-mode='ssr'],
-    .pill[data-call='page'] {
-      border-color: var(--hue-blue);
-      color: var(--hue-blue-text);
-    }
-    .pill[data-mode='ssg'] {
-      border-color: var(--hue-green);
-      color: var(--hue-green-text);
-    }
-    .pill[data-mode='client'] {
-      border-color: var(--hue-yellow);
-      color: var(--hue-yellow-text);
-    }
-    .pill[data-mode='cached'] {
-      border-color: var(--hue-purple);
-      color: var(--hue-purple-text);
-    }
-    .pill[data-call='api'] {
-      border-color: var(--hue-orange);
-      color: var(--hue-orange-text);
-    }
-    .pill[data-call='action'] {
-      border-color: var(--hue-pink);
-      color: var(--hue-pink-text);
-    }
-    [data-tone='good'].pill {
-      @include m.tint(ok);
-    }
-    [data-tone='warn'].pill,
-    [data-tone='warn'].chip {
-      @include m.tint(warn);
-    }
-    [data-tone='bad'].pill,
-    [data-tone='bad'].chip {
-      @include m.tint(danger);
-    }
-    [data-tone='info'].pill {
-      @include m.tint(hue-info);
-    }
-
-    .status {
-      border: 1px solid var(--border-strong);
-      font-family: var(--mono);
-      font-weight: 600;
-      font-variant-numeric: tabular-nums;
-    }
-    .status[data-status='good'] {
-      @include m.tint(ok);
-    }
-    .status[data-status='warn'] {
-      @include m.tint(warn);
-    }
-    .status[data-status='bad'] {
-      @include m.tint(danger);
-    }
-    .method {
-      min-width: 52px;
-      border: 1px solid var(--border-strong);
-      border-radius: 6px;
-      background: var(--surface-2);
-      color: var(--text);
-      font-family: var(--mono);
-      font-weight: 600;
-      text-align: center;
-    }
-    .method[data-method='GET'] {
-      @include m.tint(hue-sky);
-    }
-    .method[data-method='POST'] {
-      @include m.tint(ok);
-    }
-    .method[data-method='PUT'],
-    .method[data-method='PATCH'] {
-      @include m.tint(warn);
-    }
-    .method[data-method='DELETE'] {
-      @include m.tint(danger);
-    }
-    .request {
-      min-width: 260px;
-    }
-    .request .url {
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-    }
-    details {
-      margin-top: 8px;
-    }
-    summary {
-      width: fit-content;
-      border-radius: 6px;
-      color: var(--text-2);
-      font-size: 12px;
-      cursor: pointer;
-      transition: color 160ms var(--ease);
-    }
-    summary:hover {
-      color: var(--text);
-    }
-    .code {
-      margin: 8px 0 0;
-      padding: 10px 12px;
-      max-height: 220px;
-      overflow: auto;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--bg);
-      color: var(--text);
-      font-family: var(--mono);
-      font-size: 12.5px;
-      line-height: 1.55;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-    }
-
-    .calls-bar {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-    }
-    .calls-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px 12px;
-      align-items: center;
-    }
-    .calls-message {
-      color: var(--text-2);
-      font-size: 12.5px;
-    }
-    .call-filters {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px 12px;
-      align-items: center;
-    }
-    .search {
-      position: relative;
-      flex: 1 1 220px;
-      min-width: 0;
-    }
-    .search .field {
-      width: 100%;
-      padding-left: 34px;
-    }
-    .search-icon {
-      position: absolute;
-      top: 50%;
-      left: 12px;
-      width: 14px;
-      height: 14px;
-      transform: translateY(-50%);
-      fill: none;
-      stroke: var(--text-3);
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      pointer-events: none;
-    }
-    .search:focus-within .search-icon {
-      stroke: var(--accent);
-    }
-    .call-filters .check {
-      flex: none;
-      font-size: 13px;
-      font-weight: 500;
-    }
-    .total {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-      white-space: nowrap;
-      font-variant-numeric: tabular-nums;
-    }
-    .note {
-      margin: 0;
-      padding: 8px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .empty-actions {
-      display: flex;
-      justify-content: center;
-      margin-top: 8px;
-    }
-    .segmented {
-      display: inline-flex;
-      flex-wrap: wrap;
-      gap: 2px;
-      justify-self: start;
-      margin: 0;
-      padding: 3px;
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      background: var(--bg);
-    }
-    .segmented label {
-      display: inline-flex;
-      gap: 6px;
-      align-items: center;
-      padding: 5px 12px;
-      border-radius: 7px;
-      background: transparent;
-      color: var(--text-2);
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 180ms var(--ease),
-        color 180ms var(--ease),
-        box-shadow 180ms var(--ease);
-    }
-    .segmented label:hover {
-      color: var(--text);
-    }
-    .segmented label .muted {
-      color: var(--text-3);
-      font-size: 12px;
-      font-variant-numeric: tabular-nums;
-    }
-    .segmented label.on {
-      background: var(--surface-3);
-      color: var(--text-strong);
-      box-shadow: inset 0 0 0 1px var(--border-strong);
-    }
-    .segmented label.on .muted {
-      color: var(--text-2);
-    }
-
-    h2 {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      margin: 8px 0 0;
-      color: var(--text-3);
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .card {
-      display: grid;
-      gap: 12px;
-      padding: 16px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      box-shadow: var(--shadow);
-      animation: enter 0.35s var(--ease) both;
-    }
-    .card h2 {
-      margin: 0;
-    }
-    .check {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      color: var(--text-2);
-      cursor: pointer;
-    }
-    .check input {
-      width: 15px;
-      height: 15px;
-      margin: 0;
-      accent-color: var(--accent);
-    }
-    .check input:focus-visible {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
-    }
-    .response {
-      display: grid;
-      gap: 8px;
-      padding: 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-    }
-    .response .code {
-      margin: 0;
-    }
-    .facts {
-      display: grid;
-      grid-template-columns: max-content 1fr;
-      gap: 10px 16px;
-      margin: 0;
-    }
-    .facts dt {
-      padding-top: 3px;
-      color: var(--text-3);
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .facts dd {
-      margin: 0;
-    }
-
-    .findings {
-      display: grid;
-      gap: 12px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      animation: enter 0.35s var(--ease) both;
-    }
-    .findings > li {
-      position: relative;
-      padding: 16px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      box-shadow:
-        inset 3px 0 0 var(--hue-info),
-        var(--shadow);
-      transition: border-color 180ms var(--ease);
-    }
-    .findings > li:hover {
-      border-color: var(--border-strong);
-    }
-    .findings > li[data-tone='bad'] {
-      box-shadow:
-        inset 3px 0 0 var(--danger),
-        var(--shadow);
-    }
-    .findings > li[data-tone='warn'] {
-      box-shadow:
-        inset 3px 0 0 var(--warn),
-        var(--shadow);
-    }
-    .findings p {
-      margin: 8px 0 0;
-      line-height: 1.55;
-    }
-    .findings > li > p {
-      color: var(--text-2);
-    }
-    .finding-head {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      align-items: center;
-    }
-    .finding-title {
-      color: var(--text-strong);
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .where {
-      display: grid;
-      gap: 6px;
-      margin: 12px 0 0;
-      padding: 10px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      list-style: none;
-    }
-    .where li {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px 12px;
-    }
-    .where .detail {
-      flex-basis: 100%;
-      margin: 0;
-      color: var(--text-2);
-      overflow-wrap: anywhere;
-    }
-    .fix {
-      margin-top: 12px;
-      color: var(--text);
-      line-height: 1.55;
-    }
-    .fix strong {
-      display: block;
-      margin-bottom: 4px;
-      color: var(--ok);
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-    .rule {
-      display: block;
-      margin-top: 12px;
-      color: var(--text-3);
-      font-size: 12px;
-    }
-
-    .empty {
-      display: grid;
-      gap: 8px;
-      justify-items: center;
-      padding: 40px 24px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: var(--surface);
-      text-align: center;
-      animation: enter 0.35s var(--ease) both;
-    }
-    .empty p {
-      margin: 0;
-      max-width: 520px;
-      line-height: 1.6;
-    }
-    .empty-title {
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 15px;
-      font-weight: 600;
-    }
-  `,
+  providers: [AnalogPageState, AnalogCallsState],
+  templateUrl: './analog-inspector.html',
+  styleUrl: './analog-inspector.scss',
 })
 export class AnalogInspector {
-  protected readonly plural = plural;
   rpc = input<DevframeRpcClient | null>(null);
 
-  readonly kinds: Kind[] = ['all', 'page', 'load', 'action', 'fn', 'api'];
-  readonly view = signal<View>('routes');
-  readonly project = signal<AnalogProject | null>(null);
-  readonly loadFailed = signal(false);
-  readonly state = signal<AnalogState>({});
-  readonly findings = signal<Finding[]>([]);
-  readonly renderRows = signal<RenderRow[]>([]);
-  readonly plan = signal<PrerenderPlan | null>(null);
-  readonly filter = signal('');
-  readonly testUrl = signal('');
-  readonly explained = signal<{ url: string; match: UrlMatch } | null>(null);
-  readonly explainError = signal('');
-  readonly explaining = signal(false);
-  readonly kind = signal<Kind>('all');
-  /** The dev server origin for copied requests: the open page's, or the panel's own. */
-  readonly devOrigin = computed(() => {
-    const url = this.page()?.url ?? '';
-    if (/^https?:\/\//.test(url)) {
-      // A malformed page URL must not break the whole Server view.
-      try {
-        return new URL(url).origin;
-      } catch {
-        return '';
-      }
-    }
-    return /^https?:$/.test(location.protocol) ? location.origin : '';
-  });
-  /** The page file whose Vite transform stack is open below the routes. */
-  readonly transformFile = signal<string | null>(null);
-  /** The content file open in the preview. */
-  readonly previewFile = signal<string | null>(null);
-  /** Dev server render checks by route. */
-  readonly checks = signal<Record<string, RenderCheck | 'running'>>({});
-  /** The route the last Try button handed to the playground. */
-  // Cleared when the view changes, so coming back to Server doesn't load the last Try again.
-  readonly tryTarget = linkedSignal<View, PlaygroundTarget | null>({
-    source: this.view,
-    computation: () => null,
-  });
-  private tryNonce = 0;
-
-  private unsubscribe: (() => void) | null = null;
-  private refreshTimer: ReturnType<typeof setTimeout> | undefined;
-  private refreshRun = 0;
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  private readonly hostPageId = hostPageId();
-
-  readonly page = computed(() => {
-    const pages = this.state().pages ?? [];
-    return (this.hostPageId ? pages.find((p) => p.pageId === this.hostPageId) : pages[0]) ?? null;
-  });
-  /** Open page files, mapped to their named outlet ('' for the primary outlet). */
-  readonly openFiles = computed(() => {
-    const open = new Map<string, string>();
-    for (const c of this.page()?.chain ?? []) {
-      // The primary outlet wins when one file renders in several outlets.
-      if (c.file && (!open.has(c.file) || !c.outlet)) open.set(c.file, c.outlet ?? '');
-    }
-    return open;
-  });
-  /** Every call the dev server keeps, from every tab. */
-  readonly allCalls = computed(() => this.state().calls ?? []);
-  /** The tab the Server view shows by default: the panel's page. */
-  readonly scopePageId = computed(() => this.page()?.pageId);
-  /** Shows the calls of every tab, and those the dev server tied to no tab. */
-  readonly allTabs = signal(false);
-  /** The calls of the panel's tab, or every call with "All tabs" on or no page reporting. */
-  readonly tabCalls = computed(() => {
-    const pageId = this.scopePageId();
-    const calls = this.allCalls();
-    return this.allTabs() || !pageId ? calls : calls.filter((c) => c.pageId === pageId);
-  });
-  readonly maxServerCalls = MAX_SERVER_CALLS;
-  readonly callQuery = signal('');
-  readonly failedOnly = signal(false);
-  readonly callsMessage = signal('');
-  /** True when the search or the failed filter is on, so an empty list is a no-match. */
-  readonly callFiltered = computed(() => !!this.callQuery().trim() || this.failedOnly());
-  /** Every call that passes the kind, search and failed filters, oldest first. */
-  readonly matchingCalls = computed(() => {
-    const kind = this.kind();
-    const query = this.callQuery().trim().toLowerCase();
-    const failedOnly = this.failedOnly();
-    return this.tabCalls().filter(
-      (c) =>
-        (kind === 'all' || c.kind === kind) &&
-        (!failedOnly || this.isFailed(c)) &&
-        (!query || this.callText(c).includes(query)),
-    );
-  });
-  readonly calls = computed(() => this.matchingCalls().slice(-MAX_SHOWN_CALLS).reverse());
-  readonly shownCount = computed(() => this.calls().length);
-  readonly serverFull = computed(() => this.allCalls().length >= MAX_SERVER_CALLS);
-  readonly allRoutes = computed(() => walk(this.project()?.routes ?? []));
-  readonly pageCount = computed(
-    () => this.allRoutes().filter((r) => r.route.file && r.route.kind !== 'layout').length,
-  );
-  readonly routeRows = computed(() => {
-    const needle = this.filter().trim().toLowerCase();
-    if (!needle) return this.allRoutes();
-    return this.allRoutes().filter(
-      (r) =>
-        r.route.fullPath.toLowerCase().includes(needle) ||
-        !!r.route.file?.toLowerCase().includes(needle),
-    );
-  });
-  readonly serverFns = computed(() => this.project()?.serverFns ?? []);
-  private readonly fnById = computed(() => new Map(this.serverFns().map((fn) => [fn.id, fn])));
-  /** The routes and server functions the shown calls touch, so a warning about another tab stays hidden. */
-  private readonly shownRoutes = computed(
-    () => new Set(this.tabCalls().map((c) => `${c.kind} ${c.route ?? ''}`)),
-  );
-  readonly refetchedFns = computed(() =>
-    Array.from(
-      new Set(
-        (this.state().refetches ?? [])
-          .filter((r) => this.shownRoutes().has(`fn ${r.id}`))
-          .map((r) => this.fnById().get(r.id)?.name ?? r.id),
-      ),
-    ),
-  );
-  readonly duplicates = computed(() =>
-    Array.from(
-      new Set(
-        (this.state().duplicates ?? [])
-          .filter((d) => this.shownRoutes().has(`load ${d.route}`))
-          .map((d) => d.route),
-      ),
-    ),
-  );
-  readonly modeCounts = computed(() =>
-    (['ssr', 'ssg', 'cached', 'client', 'redirect'] as const)
-      .map((mode) => ({
-        mode,
-        label: MODE_LABEL[mode],
-        count: this.renderRows().filter((r) => r.mode === mode).length,
-      }))
-      .filter((m) => m.count),
-  );
-  readonly lintCards = computed(() => {
-    const order = { error: 0, warning: 1, info: 2 };
-    const cards = new Map<string, LintCard>();
-    for (const finding of this.findings()) {
-      let card = cards.get(finding.rule);
-      if (!card) {
-        const known = LINT_TEXT[finding.rule];
-        card = {
-          rule: finding.rule,
-          severity: finding.severity,
-          title: known?.title ?? finding.rule,
-          summary: known?.summary ?? finding.message,
-          fix: finding.fix,
-          items: [],
-        };
-        cards.set(finding.rule, card);
-      }
-      const message =
-        STATIC_MESSAGES.has(finding.rule) || finding.message === card.summary
-          ? undefined
-          : finding.message;
-      const same = (item: LintCard['items'][number]) =>
-        item.file === finding.file && item.path === finding.path && item.message === message;
-      if (!card.items.some(same))
-        card.items.push({ file: finding.file, path: finding.path, message });
-    }
-    return Array.from(cards.values()).sort((a, b) => order[a.severity] - order[b.severity]);
-  });
-  /** Errors and warnings; info findings are advice, so they are not counted. */
-  readonly lintCount = computed(() => {
-    const findings = this.findings();
-    return {
-      errors: findings.filter((f) => f.severity === 'error').length,
-      warnings: findings.filter((f) => f.severity === 'warning').length,
-    };
-  });
-  readonly lintTone = computed(() => {
-    const { errors, warnings } = this.lintCount();
-    return errors ? 'bad' : warnings ? 'warn' : '';
-  });
-  readonly views = computed(() => {
-    const { errors, warnings } = this.lintCount();
-    return [
-      { id: 'routes' as View, label: 'Routes', count: this.pageCount() as number | null, tone: '' },
-      { id: 'server' as View, label: 'Server', count: this.tabCalls().length, tone: '' },
-      { id: 'render' as View, label: 'Render', count: this.renderRows().length, tone: '' },
-      {
-        id: 'content' as View,
-        label: 'Content',
-        count: this.project()?.content.length ?? 0,
-        tone: '',
-      },
-      { id: 'data' as View, label: 'Data', count: null, tone: '' },
-      { id: 'runtime' as View, label: 'Runtime', count: null, tone: '' },
-      { id: 'lint' as View, label: 'Lint', count: errors + warnings, tone: this.lintTone() },
-    ];
-  });
+  private readonly pageState = inject(AnalogPageState);
+  private readonly callsState = inject(AnalogCallsState);
+
+  readonly view = this.pageState.view;
+  readonly project = this.pageState.project;
+  readonly loadFailed = this.pageState.loadFailed;
+  readonly state = this.pageState.state;
+  readonly findings = this.pageState.findings;
+  readonly filter = this.pageState.filter;
+  readonly page = this.pageState.page;
+  readonly serverFns = this.pageState.serverFns;
+  readonly tabCalls = this.pageState.tabCalls;
+  readonly pageCount = this.pageState.pageCount;
+  readonly lintCount = this.pageState.lintCount;
+  readonly lintTone = this.pageState.lintTone;
+  readonly views = this.pageState.views;
+
+  readonly kind = this.callsState.kind;
+  readonly callQuery = this.callsState.callQuery;
+  readonly failedOnly = this.callsState.failedOnly;
+  readonly tryTarget = this.callsState.tryTarget;
+  readonly duplicates = this.callsState.duplicates;
 
   constructor() {
+    this.pageState.connect(this.rpc);
     effect(() => {
       const client = this.rpc();
-      if (client) untracked(() => void this.load(client));
+      if (client) untracked(() => void this.pageState.load(client));
     });
     effect(() => {
       const view = this.view();
       this.state();
-      untracked(() => this.scheduleRefresh(view));
-    });
-    this.destroyRef.onDestroy(() => {
-      this.unsubscribe?.();
-      clearTimeout(this.refreshTimer);
+      untracked(() => this.pageState.scheduleRefresh(view));
     });
   }
 
-  private async load(client: DevframeRpcClient) {
-    const project = await call<AnalogProject>(client, 'analog-project');
-    if (this.destroyRef.destroyed) return;
-    this.project.set(project);
-    this.loadFailed.set(project === null);
-    try {
-      const shared = await client.scope('pangular').rpc.sharedState('analog');
-      if (this.destroyRef.destroyed) return;
-      const apply = (value: unknown) => this.state.set((value as AnalogState) ?? {});
-      apply(shared.value());
-      this.unsubscribe?.();
-      this.unsubscribe = shared.on('updated', apply);
-    } catch {
-      this.state.set({});
-    }
-    if (this.destroyRef.destroyed) return;
-    await this.refresh(this.view());
-  }
-
   retry() {
-    const client = this.rpc();
-    if (!client) return;
-    this.loadFailed.set(false);
-    void this.load(client);
-  }
-
-  private scheduleRefresh(view: View) {
-    clearTimeout(this.refreshTimer);
-    this.refreshTimer = setTimeout(() => void this.refresh(view), 300);
-  }
-
-  private async refresh(view: View) {
-    const client = this.rpc();
-    if (!client) return;
-    const run = ++this.refreshRun;
-    const [findings, render] = await Promise.all([
-      call<Finding[]>(client, 'analog-lint', this.hostPageId ?? undefined),
-      call<{ rows: RenderRow[]; plan: PrerenderPlan }>(client, 'analog-render'),
-    ]);
-    if (run !== this.refreshRun) return;
-    this.findings.set(findings ?? []);
-    this.renderRows.set(render?.rows ?? []);
-    this.plan.set(render?.plan ?? null);
-    if (view === 'routes' || view === 'content' || this.project() === null) {
-      const project = await call<AnalogProject>(client, 'analog-project');
-      if (project && run === this.refreshRun) {
-        this.project.set(project);
-        this.loadFailed.set(false);
-      }
-    }
+    this.pageState.retry();
   }
 
   isOpen(route: AnalogRoute): boolean {
-    return !!route.file && this.openFiles().has(route.file);
+    return this.pageState.isOpen(route);
   }
 
   openText(route: AnalogRoute): string {
-    const outlet = route.file ? this.openFiles().get(route.file) : undefined;
-    return outlet ? `open in ${outlet}` : 'open';
-  }
-
-  kindText(route: AnalogRoute): string {
-    if (route.catchAll) return route.catchAll === 'optional' ? 'optional catch-all' : 'catch-all';
-    if (route.kind === 'implicit') return 'folder';
-    return route.kind;
-  }
-
-  serverExports(route: AnalogRoute): string[] {
-    return (route.serverExports ?? []).filter((e) => e === 'load' || e === 'action');
-  }
-
-  short(file: string | undefined): string | undefined {
-    return file?.replace(/^\/src\/app\//, '').replace(/^\//, '');
-  }
-
-  dir(file: string): string {
-    const short = this.short(file) ?? file;
-    return short.includes('/') ? short.slice(0, short.lastIndexOf('/') + 1) : '';
-  }
-
-  base(file: string): string {
-    return file.slice(file.lastIndexOf('/') + 1);
-  }
-
-  paramList(params: Record<string, string>): [string, string][] {
-    return Object.entries(params);
-  }
-
-  kindLabel(kind: Kind): string {
-    return KIND_LABEL[kind];
-  }
-
-  kindCount(kind: Kind): number {
-    return kind === 'all'
-      ? this.tabCalls().length
-      : this.tabCalls().filter((c) => c.kind === kind).length;
-  }
-
-  modeLabel(mode: RenderRow['mode']): string {
-    return MODE_LABEL[mode];
-  }
-
-  mismatch(row: RenderRow): boolean {
-    if (!row.last?.render || row.mode === 'redirect') return false;
-    return row.mode === 'client' ? row.last.render !== 'client' : row.last.render === 'client';
-  }
-
-  fnOf(call: AnalogCall): ServerFn | undefined {
-    return call.kind === 'fn' && call.route ? this.fnById().get(call.route) : undefined;
-  }
-
-  fnCalls(id: string): number {
-    return this.tabCalls().filter((c) => c.kind === 'fn' && c.route === id).length;
-  }
-
-  outcomeLabel(outcome: ActionOutcome): string {
-    return OUTCOME_LABEL[outcome];
-  }
-
-  outcomeTone(outcome: ActionOutcome): string {
-    return OUTCOME_TONE[outcome];
-  }
-
-  statusClass(status: number): 'good' | 'warn' | 'bad' {
-    if (status >= 500 || status === 0) return 'bad';
-    if (status >= 400) return 'warn';
-    return 'good';
-  }
-
-  tone(severity: Finding['severity']): 'bad' | 'warn' | 'info' {
-    return severity === 'error' ? 'bad' : severity === 'warning' ? 'warn' : 'info';
-  }
-
-  shadowed(file: string): string | undefined {
-    const finding = this.findings().find(
-      (f) => f.rule === 'content-shadows-page' && f.file === file,
-    );
-    return finding?.relatedFile;
-  }
-
-  contentUrl(file: string): string | undefined {
-    return this.allRoutes().find((r) => r.route.file === file)?.route.fullPath;
-  }
-
-  pretty(text: string): string {
-    try {
-      return JSON.stringify(JSON.parse(text), null, 2);
-    } catch {
-      return text;
-    }
-  }
-
-  readonly time = time;
-
-  showTransform(file: string) {
-    this.transformFile.set(this.transformFile() === file ? null : file);
-  }
-
-  closeTransform(file: string) {
-    this.transformFile.set(null);
-    this.refocus(`Show the Vite transform stack of ${file}`);
-  }
-
-  showPreview(file: string) {
-    this.previewFile.set(this.previewFile() === file ? null : file);
-  }
-
-  closePreview(file: string) {
-    this.previewFile.set(null);
-    this.refocus(`Preview ${file}`);
-  }
-
-  /** Hands focus back to the row button that opened a detail card. */
-  private refocus(label: string) {
-    queueMicrotask(() =>
-      this.host.nativeElement
-        .querySelector<HTMLElement>(`button[aria-label="${CSS.escape(label)}"]`)
-        ?.focus(),
-    );
-  }
-
-  async checkRender(path: string) {
-    this.checks.update((all) => ({ ...all, [path]: 'running' }));
-    const check = await call<RenderCheck>(this.rpc(), 'analog-render-check', path);
-    this.checks.update((all) => ({
-      ...all,
-      [path]: check ?? { path, error: 'No answer from the devtools server.' },
-    }));
+    return this.pageState.openText(route);
   }
 
   tryApi(api: ApiRoute) {
-    this.tryTarget.set({ route: api, nonce: ++this.tryNonce });
-  }
-
-  /** A failed call answered with 400 or more, never answered, or ended in an error outcome. */
-  isFailed(c: AnalogCall): boolean {
-    return !c.status || c.status >= 400 || c.outcome === 'error';
-  }
-
-  private callText(c: AnalogCall): string {
-    const fn = this.fnOf(c);
-    return [c.url, c.route, fn?.name, fn?.file].filter(Boolean).join(' ').toLowerCase();
-  }
-
-  clearCallFilters() {
-    this.callQuery.set('');
-    this.failedOnly.set(false);
-    this.kind.set('all');
-    queueMicrotask(() =>
-      this.host.nativeElement.querySelector<HTMLInputElement>('#analog-call-search')?.focus(),
-    );
-  }
-
-  async clearCalls() {
-    const client = this.rpc();
-    try {
-      if (!client) throw new Error('No devtools server');
-      await rpcCall(client, 'analog-clear-calls');
-      this.callsMessage.set('Calls cleared.');
-      // The button is disabled once the list is empty, so hand focus to the kind filter.
-      queueMicrotask(() =>
-        this.host.nativeElement
-          .querySelector<HTMLInputElement>('input[name="analog-kind"]:checked')
-          ?.focus(),
-      );
-    } catch {
-      this.callsMessage.set('Could not clear the calls.');
-    }
-  }
-
-  async explain() {
-    const url = this.testUrl().trim();
-    if (!url) {
-      this.explained.set(null);
-      this.explainError.set('Type a URL to explain, for example /products/42.');
-      return;
-    }
-    this.explaining.set(true);
-    this.explainError.set('');
-    try {
-      const match = (await rpcCall(this.rpc(), 'analog-explain-url', url)) as UrlMatch | null;
-      if (!match) throw new Error('The devtools server did not answer');
-      this.explained.set({ url, match });
-    } catch (error) {
-      const reason = String((error as Error)?.message || 'The devtools server did not answer');
-      this.explained.set(null);
-      this.explainError.set(`Could not explain ${url}. ${reason.replace(/\.?$/, '.')}`);
-    } finally {
-      this.explaining.set(false);
-    }
+    this.callsState.tryApi(api);
   }
 
   onKey(event: KeyboardEvent) {
diff --git a/app/src/pages/analog/analog-calls-state.ts b/app/src/pages/analog/analog-calls-state.ts
new file mode 100644
index 00000000..fbcb0891
--- /dev/null
+++ b/app/src/pages/analog/analog-calls-state.ts
@@ -0,0 +1,144 @@
+import { Injectable, computed, inject, linkedSignal, signal } from '@angular/core';
+import { rpcCall } from '../../rpc';
+import type { PlaygroundTarget } from '../analog-playground';
+import {
+  KIND_LABEL,
+  MAX_SERVER_CALLS,
+  MAX_SHOWN_CALLS,
+  OUTCOME_LABEL,
+  OUTCOME_TONE,
+  type ActionOutcome,
+  type AnalogCall,
+  type ApiRoute,
+  type Kind,
+  type ServerFn,
+  type View,
+} from './analog-model';
+import { AnalogPageState } from './analog-page-state';
+
+/**
+ * The Server view's call list: the kind, search and failed filters, the warnings about reads
+ * that ran twice, and the route the last Try button handed to the playground. Kept on the page,
+ * so the filters stay set when another view is open.
+ */
+@Injectable()
+export class AnalogCallsState {
+  private readonly page = inject(AnalogPageState);
+
+  readonly kinds: Kind[] = ['all', 'page', 'load', 'action', 'fn', 'api'];
+  readonly kind = signal<Kind>('all');
+  /** The route the last Try button handed to the playground. */
+  // Cleared when the view changes, so coming back to Server doesn't load the last Try again.
+  readonly tryTarget = linkedSignal<View, PlaygroundTarget | null>({
+    source: this.page.view,
+    computation: () => null,
+  });
+  private tryNonce = 0;
+
+  readonly maxServerCalls = MAX_SERVER_CALLS;
+  readonly callQuery = signal('');
+  readonly failedOnly = signal(false);
+  readonly callsMessage = signal('');
+  /** True when the search or the failed filter is on, so an empty list is a no-match. */
+  readonly callFiltered = computed(() => !!this.callQuery().trim() || this.failedOnly());
+  /** Every call that passes the kind, search and failed filters, oldest first. */
+  readonly matchingCalls = computed(() => {
+    const kind = this.kind();
+    const query = this.callQuery().trim().toLowerCase();
+    const failedOnly = this.failedOnly();
+    return this.page
+      .tabCalls()
+      .filter(
+        (c) =>
+          (kind === 'all' || c.kind === kind) &&
+          (!failedOnly || this.isFailed(c)) &&
+          (!query || this.callText(c).includes(query)),
+      );
+  });
+  readonly calls = computed(() => this.matchingCalls().slice(-MAX_SHOWN_CALLS).reverse());
+  readonly shownCount = computed(() => this.calls().length);
+  readonly serverFull = computed(() => this.page.allCalls().length >= MAX_SERVER_CALLS);
+  /** The routes and server functions the shown calls touch, so a warning about another tab stays hidden. */
+  private readonly shownRoutes = computed(
+    () => new Set(this.page.tabCalls().map((c) => `${c.kind} ${c.route ?? ''}`)),
+  );
+  readonly refetchedFns = computed(() =>
+    Array.from(
+      new Set(
+        (this.page.state().refetches ?? [])
+          .filter((r) => this.shownRoutes().has(`fn ${r.id}`))
+          .map((r) => this.page.fnById().get(r.id)?.name ?? r.id),
+      ),
+    ),
+  );
+  readonly duplicates = computed(() =>
+    Array.from(
+      new Set(
+        (this.page.state().duplicates ?? [])
+          .filter((d) => this.shownRoutes().has(`load ${d.route}`))
+          .map((d) => d.route),
+      ),
+    ),
+  );
+
+  kindLabel(kind: Kind): string {
+    return KIND_LABEL[kind];
+  }
+
+  kindCount(kind: Kind): number {
+    return kind === 'all'
+      ? this.page.tabCalls().length
+      : this.page.tabCalls().filter((c) => c.kind === kind).length;
+  }
+
+  fnOf(call: AnalogCall): ServerFn | undefined {
+    return call.kind === 'fn' && call.route ? this.page.fnById().get(call.route) : undefined;
+  }
+
+  fnCalls(id: string): number {
+    return this.page.tabCalls().filter((c) => c.kind === 'fn' && c.route === id).length;
+  }
+
+  outcomeLabel(outcome: ActionOutcome): string {
+    return OUTCOME_LABEL[outcome];
+  }
+
+  outcomeTone(outcome: ActionOutcome): string {
+    return OUTCOME_TONE[outcome];
+  }
+
+  tryApi(api: ApiRoute) {
+    this.tryTarget.set({ route: api, nonce: ++this.tryNonce });
+  }
+
+  /** A failed call answered with 400 or more, never answered, or ended in an error outcome. */
+  isFailed(c: AnalogCall): boolean {
+    return !c.status || c.status >= 400 || c.outcome === 'error';
+  }
+
+  private callText(c: AnalogCall): string {
+    const fn = this.fnOf(c);
+    return [c.url, c.route, fn?.name, fn?.file].filter(Boolean).join(' ').toLowerCase();
+  }
+
+  /** Clears the search, the failed filter and the kind. */
+  resetFilters() {
+    this.callQuery.set('');
+    this.failedOnly.set(false);
+    this.kind.set('all');
+  }
+
+  /** Asks the dev server to drop its calls; true when it did. */
+  async clearCalls(): Promise<boolean> {
+    const client = this.page.rpc();
+    try {
+      if (!client) throw new Error('No devtools server');
+      await rpcCall(client, 'analog-clear-calls');
+      this.callsMessage.set('Calls cleared.');
+      return true;
+    } catch {
+      this.callsMessage.set('Could not clear the calls.');
+      return false;
+    }
+  }
+}
diff --git a/app/src/pages/analog/analog-content.html b/app/src/pages/analog/analog-content.html
new file mode 100644
index 00000000..51ca81a7
--- /dev/null
+++ b/app/src/pages/analog/analog-content.html
@@ -0,0 +1,108 @@
+@if (project()!.content.length) {
+  <div class="table-wrap" role="region" aria-label="Content files" tabindex="0">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Title</th>
+          <th scope="col">URL</th>
+          <th scope="col">Slug</th>
+          <th scope="col">Date</th>
+          <th scope="col">File</th>
+          <th scope="col"><span class="sr-only">Actions</span></th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (f of project()!.content; track f.file) {
+          <tr>
+            <td>
+              <strong>{{ f.attributes['title'] || '(no title)' }}</strong>
+              @if (f.error) {
+                <div>
+                  <span class="pill" data-tone="bad">{{ f.error }}</span>
+                </div>
+              }
+              @if (shadowed(f.file); as page) {
+                <div>
+                  <span class="pill" data-tone="warn">takes over {{ base(page) }}</span>
+                </div>
+              }
+              @if (f.schemaErrors?.length) {
+                <div>
+                  <span class="pill" data-tone="warn">{{
+                    plural(f.schemaErrors!.length, 'schema problem')
+                  }}</span>
+                </div>
+              }
+            </td>
+            <td class="mono path">{{ contentUrl(f.file) ?? '' }}</td>
+            <td class="mono">{{ f.slug }}</td>
+            <td class="muted nowrap tnum">{{ f.attributes['date'] || '' }}</td>
+            <td>
+              <app-source-link class="file" [file]="f.file"
+                ><span class="dir">{{ dir(f.file) }}</span
+                >{{ base(f.file) }}</app-source-link
+              >
+            </td>
+            <td class="actions">
+              <button
+                type="button"
+                class="btn ghost"
+                [attr.aria-label]="'Preview ' + f.file"
+                [attr.aria-pressed]="previewFile() === f.file"
+                (click)="showPreview(f.file)"
+              >
+                Preview
+              </button>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+} @else {
+  <div class="empty-box">
+    <p class="empty-lead">No markdown files under src/content.</p>
+    <p class="muted">Add a .md file there to see its title, slug, date and the URL it serves.</p>
+  </div>
+}
+@if (project()!.content.length) {
+  <dl class="facts content-facts">
+    <dt>Schema</dt>
+    <dd>
+      @if (project()!.contentSchema; as schema) {
+        @if (schema.error) {
+          <span class="pill" data-tone="bad">{{ schema.error }}</span>
+        } @else {
+          <span class="mono">{{ schema.file }}</span>
+          @if (schema.unsupported?.length) {
+            <span class="muted small"> (skips {{ schema.unsupported!.join(', ') }})</span>
+          }
+        }
+      } @else {
+        <span class="muted small"
+          >none; set <code>analog.contentSchema</code> to check frontmatter</span
+        >
+      }
+    </dd>
+    <dt>Read by</dt>
+    <dd>
+      @for (u of project()!.contentUsage ?? []; track u.file + u.line) {
+        <app-source-link class="chip mono" [file]="u.file" [line]="u.line"
+          >{{ u.api }} · {{ base(u.file) }}:{{ u.line }}</app-source-link
+        >
+      } @empty {
+        <span class="muted small"
+          >no injectContentFiles, injectContent or contentFilesSource call under src</span
+        >
+      }
+    </dd>
+  </dl>
+}
+@if (previewFile(); as file) {
+  <app-analog-content-preview
+    [rpc]="rpc()"
+    [file]="file"
+    [schema]="project()!.contentSchema?.error ? undefined : project()!.contentSchema?.file"
+    (closed)="closePreview(file)"
+  />
+}
diff --git a/app/src/pages/analog/analog-content.scss b/app/src/pages/analog/analog-content.scss
new file mode 100644
index 00000000..c6d3af3f
--- /dev/null
+++ b/app/src/pages/analog/analog-content.scss
@@ -0,0 +1,11 @@
+@use 'analog' as a;
+
+// A wrapper only: the view's parts are items of the page's panel grid, as they were.
+:host {
+  display: contents;
+}
+
+@include a.base;
+@include a.form;
+@include a.table;
+@include a.cards;
diff --git a/app/src/pages/analog/analog-content.ts b/app/src/pages/analog/analog-content.ts
new file mode 100644
index 00000000..98b99fba
--- /dev/null
+++ b/app/src/pages/analog/analog-content.ts
@@ -0,0 +1,54 @@
+import { Component, ElementRef, inject } from '@angular/core';
+import { plural } from '../../format';
+import { SourceLink } from '../../ui/source-link';
+import { AnalogContentPreview } from '../analog-content-preview';
+import { base, dir } from './analog-model';
+import { AnalogPageState } from './analog-page-state';
+
+/** The Content view of the Analog page: the markdown files, the content schema and the preview. */
+@Component({
+  selector: 'div[appAnalogContent]',
+  imports: [SourceLink, AnalogContentPreview],
+  templateUrl: './analog-content.html',
+  styleUrl: './analog-content.scss',
+})
+export class AnalogContent {
+  private readonly page = inject(AnalogPageState);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  protected readonly plural = plural;
+  protected readonly rpc = this.page.rpc;
+  protected readonly project = this.page.project;
+  protected readonly previewFile = this.page.previewFile;
+  protected readonly dir = dir;
+  protected readonly base = base;
+
+  protected shadowed(file: string): string | undefined {
+    const finding = this.page
+      .findings()
+      .find((f) => f.rule === 'content-shadows-page' && f.file === file);
+    return finding?.relatedFile;
+  }
+
+  protected contentUrl(file: string): string | undefined {
+    return this.page.allRoutes().find((r) => r.route.file === file)?.route.fullPath;
+  }
+
+  protected showPreview(file: string) {
+    this.previewFile.set(this.previewFile() === file ? null : file);
+  }
+
+  protected closePreview(file: string) {
+    this.previewFile.set(null);
+    this.refocus(`Preview ${file}`);
+  }
+
+  /** Hands focus back to the row button that opened a detail card. */
+  private refocus(label: string) {
+    queueMicrotask(() =>
+      this.host.nativeElement
+        .querySelector<HTMLElement>(`button[aria-label="${CSS.escape(label)}"]`)
+        ?.focus(),
+    );
+  }
+}
diff --git a/app/src/pages/analog/analog-lint.html b/app/src/pages/analog/analog-lint.html
new file mode 100644
index 00000000..9ac112e8
--- /dev/null
+++ b/app/src/pages/analog/analog-lint.html
@@ -0,0 +1,45 @@
+@if (findings().length) {
+  <p class="muted">
+    {{ plural(findings().length, 'issue') }} in {{ plural(lintCards().length, 'group') }}. Each card
+    says what is wrong, where, and how to fix it.
+  </p>
+  <ul class="findings">
+    @for (card of lintCards(); track card.rule) {
+      <li [attr.data-tone]="tone(card.severity)">
+        <div class="finding-head">
+          <span class="pill" [attr.data-tone]="tone(card.severity)">{{ card.severity }}</span>
+          <strong class="finding-title">{{ card.title }}</strong>
+          @if (card.items.length > 1) {
+            <span class="count">{{ card.items.length }}</span>
+          }
+        </div>
+        <p>{{ card.summary }}</p>
+        <ul class="where">
+          @for (item of card.items; track $index) {
+            <li>
+              @if (item.file) {
+                <app-source-link class="file" [file]="item.file"
+                  ><span class="dir">{{ dir(item.file) }}</span
+                  >{{ base(item.file) }}</app-source-link
+                >
+              }
+              @if (item.path && item.path !== item.file) {
+                <span class="mono path">{{ item.path }}</span>
+              }
+              @if (item.message) {
+                <p class="detail">{{ item.message }}</p>
+              }
+            </li>
+          }
+        </ul>
+        <div class="fix"><strong>How to fix</strong> {{ card.fix }}</div>
+        <span class="rule mono">{{ card.rule }}</span>
+      </li>
+    }
+  </ul>
+} @else {
+  <div class="callout" data-tone="good" role="status">
+    <strong>No Analog problems found.</strong> Routes, server files, prerender config and content
+    all check out.
+  </div>
+}
diff --git a/app/src/pages/analog/analog-lint.scss b/app/src/pages/analog/analog-lint.scss
new file mode 100644
index 00000000..49de25c3
--- /dev/null
+++ b/app/src/pages/analog/analog-lint.scss
@@ -0,0 +1,12 @@
+@use 'analog' as a;
+
+// A wrapper only: the view's parts are items of the page's panel grid, as they were.
+:host {
+  display: contents;
+}
+
+@include a.base;
+@include a.count;
+@include a.callout;
+@include a.table;
+@include a.findings;
diff --git a/app/src/pages/analog/analog-lint.ts b/app/src/pages/analog/analog-lint.ts
new file mode 100644
index 00000000..b71cc3c6
--- /dev/null
+++ b/app/src/pages/analog/analog-lint.ts
@@ -0,0 +1,26 @@
+import { Component, inject } from '@angular/core';
+import { plural } from '../../format';
+import { SourceLink } from '../../ui/source-link';
+import { base, dir, type Finding } from './analog-model';
+import { AnalogPageState } from './analog-page-state';
+
+/** The Lint view of the Analog page: one card per rule, with where it fired and how to fix it. */
+@Component({
+  selector: 'div[appAnalogLint]',
+  imports: [SourceLink],
+  templateUrl: './analog-lint.html',
+  styleUrl: './analog-lint.scss',
+})
+export class AnalogLint {
+  private readonly page = inject(AnalogPageState);
+
+  protected readonly plural = plural;
+  protected readonly findings = this.page.findings;
+  protected readonly lintCards = this.page.lintCards;
+  protected readonly dir = dir;
+  protected readonly base = base;
+
+  protected tone(severity: Finding['severity']): 'bad' | 'warn' | 'info' {
+    return severity === 'error' ? 'bad' : severity === 'warning' ? 'warn' : 'info';
+  }
+}
diff --git a/app/src/pages/analog/analog-model.ts b/app/src/pages/analog/analog-model.ts
new file mode 100644
index 00000000..4b4dd670
--- /dev/null
+++ b/app/src/pages/analog/analog-model.ts
@@ -0,0 +1,342 @@
+// The data the Analog page reads from the devtools server (`analog-project`, `analog-lint`,
+// `analog-render` and the `analog` shared state), and the labels its views show for it.
+export interface AnalogRoute {
+  id: string;
+  fullPath: string;
+  file?: string;
+  kind: 'page' | 'layout' | 'markdown' | 'group' | 'implicit';
+  params: string[];
+  catchAll?: 'required' | 'optional';
+  serverFile?: string;
+  serverExports?: string[];
+  routeMeta?: string[];
+  title?: string;
+  children: AnalogRoute[];
+}
+
+export interface ApiRoute {
+  path: string;
+  method: string;
+  file: string;
+}
+
+export interface ContentFile {
+  file: string;
+  slug: string;
+  attributes: Record<string, string>;
+  error?: string;
+  schemaErrors?: string[];
+}
+
+export interface ServerFn {
+  name: string;
+  file: string;
+  id: string;
+  method: string;
+}
+
+export interface AnalogProject {
+  analog: boolean;
+  version?: string;
+  routes: AnalogRoute[];
+  api: ApiRoute[];
+  middleware: string[];
+  content: ContentFile[];
+  serverFns?: ServerFn[];
+  contentSchema?: { file: string; error?: string; unsupported?: string[] };
+  contentUsage?: { file: string; api: string; line: number }[];
+}
+
+export interface RenderCheck {
+  path: string;
+  configured?: RenderRow['mode'];
+  observed?: RenderRow['mode'];
+  status?: number;
+  ms?: number;
+  matches?: boolean;
+  note?: string;
+  error?: string;
+}
+
+export type ActionOutcome = 'success' | 'redirect' | 'invalid' | 'error';
+
+export interface AnalogCall {
+  id: number;
+  at: number;
+  kind: 'page' | 'load' | 'action' | 'fn' | 'api';
+  method: string;
+  url: string;
+  route?: string;
+  status: number;
+  ms: number;
+  bytes?: number;
+  from: string;
+  render?: 'ssr' | 'client';
+  outcome?: ActionOutcome;
+  location?: string;
+  seeded?: boolean;
+  preview?: string;
+  /** The tab the call came from, when the dev server could tell. */
+  pageId?: string;
+}
+
+export interface AnalogPage {
+  pageId: string;
+  url: string;
+  chain: { path: string; file?: string; serverFile?: string; outlet?: string }[];
+  load?: { preview: string; bytes: number; keys: string[] };
+  serverContext?: string;
+  hydrated: number;
+  hydrationErrors: string[];
+}
+
+export interface DuplicateLoad {
+  route: string;
+  ssrAt: number;
+  browserAt: number;
+}
+
+export interface ServerFnRefetch {
+  id: string;
+  ssrAt: number;
+  browserAt: number;
+}
+
+export interface AnalogState {
+  pages?: AnalogPage[];
+  calls?: AnalogCall[];
+  duplicates?: DuplicateLoad[];
+  refetches?: ServerFnRefetch[];
+}
+
+export interface Finding {
+  rule: string;
+  severity: 'error' | 'warning' | 'info';
+  file?: string;
+  path?: string;
+  relatedFile?: string;
+  message: string;
+  fix: string;
+}
+
+export interface UrlMatch {
+  matched: boolean;
+  chain: AnalogRoute[];
+  params: Record<string, string>;
+  rejected: { file?: string; path: string; reason: string }[];
+}
+
+export interface RenderRow {
+  path: string;
+  file?: string;
+  mode: 'ssr' | 'ssg' | 'client' | 'cached' | 'redirect';
+  reason: string;
+  last?: { render?: 'ssr' | 'client'; status: number; ms: number; at: number };
+}
+
+export interface PrerenderPlan {
+  dynamicConfig: boolean;
+  configPartial?: string[];
+  listed: string[] | null;
+  fromRules?: string[];
+  staticMissing: string[];
+  dynamic: string[];
+  built: string[];
+  notBuilt: string[];
+}
+
+export type View = 'routes' | 'server' | 'render' | 'content' | 'data' | 'runtime' | 'lint';
+
+export interface LintCard {
+  rule: string;
+  severity: Finding['severity'];
+  title: string;
+  summary: string;
+  fix: string;
+  items: { file?: string; path?: string; message?: string }[];
+}
+
+export const LINT_TEXT: Record<string, { title: string; summary: string }> = {
+  'scan-error': {
+    title: 'A folder could not be read',
+    summary: 'Its files are missing from routes, API routes and lint results.',
+  },
+  'duplicate-url': {
+    title: 'Two files serve the same URL',
+    summary: 'Only one of them is reachable; the other never renders.',
+  },
+  'sibling-params': {
+    title: 'Two dynamic pages in one folder',
+    summary: 'Both are [param] pages at the same level, so the first one always wins.',
+  },
+  'missing-default-export': {
+    title: 'Page has no default export',
+    summary: 'Analog needs the component as the default export, so the page renders nothing.',
+  },
+  'redirect-with-component': {
+    title: 'Redirect page also exports a component',
+    summary: 'The redirect runs first, so the component never shows.',
+  },
+  'redirect-path-match': {
+    title: 'Redirect matches too much',
+    summary: 'An empty-path redirect without pathMatch "full" catches every URL below it.',
+  },
+  'layout-without-outlet': {
+    title: 'Layout has no router-outlet',
+    summary: 'The layout has child pages, but without <router-outlet> they never render.',
+  },
+  'server-without-load': {
+    title: '.server.ts without load or action',
+    summary: 'The server file exports no load, action or server function, so Analog calls nothing.',
+  },
+  'orphan-server-file': {
+    title: '.server.ts without a page',
+    summary: 'No page file sits next to it, so its load never runs.',
+  },
+  'api-method-suffix': {
+    title: 'Unknown method suffix on an API file',
+    summary: 'The suffix is not an HTTP method, so it becomes part of the URL.',
+  },
+  'duplicate-api-route': {
+    title: 'Two handlers for one API route',
+    summary: 'Two files answer the same method and path.',
+  },
+  'api-outside-prefix': {
+    title: 'Server route outside the API prefix',
+    summary: 'During vite dev only routes under the prefix reach Nitro.',
+  },
+  'prerender-unknown-route': {
+    title: 'Prerender entry matches no page',
+    summary: 'prerender.routes lists a path that no page file serves.',
+  },
+  'prerender-missing-root': {
+    title: 'Home page is not prerendered',
+    summary: 'static is on, but prerender.routes leaves out /.',
+  },
+  'content-frontmatter': {
+    title: 'Broken frontmatter',
+    summary: 'The markdown frontmatter cannot be read.',
+  },
+  'content-schema': {
+    title: 'Frontmatter does not match the content schema',
+    summary: 'The keys or values differ from the JSON Schema that analog.contentSchema names.',
+  },
+  'content-schema-unreadable': {
+    title: 'The content schema could not be used',
+    summary: 'analog.contentSchema names a file that is missing, outside the project or not JSON.',
+  },
+  'duplicate-slug': {
+    title: 'Two posts share a slug',
+    summary: 'injectContent picks one of them at random.',
+  },
+  'content-shadows-page': {
+    title: 'Markdown file takes over a page',
+    summary:
+      'Files under src/content are routes too, so these URLs render the markdown file instead of the [param] page.',
+  },
+  'load-fetched-twice': {
+    title: 'load() runs twice',
+    summary:
+      'These pages fetched their data while rendering on the server and again in the browser.',
+  },
+  'fn-fetched-twice': {
+    title: 'Server function read runs twice',
+    summary:
+      'These reads ran while rendering on the server and again in the browser right after hydration.',
+  },
+  'restart-needed': {
+    title: 'New pages need a restart',
+    summary: 'These page files exist, but the running router does not know them yet.',
+  },
+  'hydration-error': {
+    title: 'Hydration error',
+    summary: 'The browser DOM did not match the server HTML.',
+  },
+  'api-not-found': {
+    title: 'API call failed with 404 or 405',
+    summary: 'A request hit a path or method that no server route handles.',
+  },
+};
+export type Kind = 'all' | AnalogCall['kind'];
+
+/** Rows the call list renders at most, newest first. */
+export const MAX_SHOWN_CALLS = 150;
+/** Calls the dev server keeps (`MAX_CALLS` in packages/devtools/src/analog-server-log.ts). */
+export const MAX_SERVER_CALLS = 200;
+
+export const STATIC_MESSAGES = new Set([
+  'missing-default-export',
+  'redirect-with-component',
+  'redirect-path-match',
+  'layout-without-outlet',
+  'server-without-load',
+  'orphan-server-file',
+  'load-fetched-twice',
+  'restart-needed',
+  'prerender-missing-root',
+]);
+
+export const MODE_LABEL = {
+  ssr: 'SSR',
+  ssg: 'Prerendered',
+  client: 'Client only',
+  cached: 'Cached',
+  redirect: 'Redirect',
+} as const;
+export const KIND_LABEL: Record<Kind, string> = {
+  all: 'All',
+  page: 'Pages',
+  load: 'load()',
+  action: 'Actions',
+  fn: 'Server fn',
+  api: 'API',
+};
+export const OUTCOME_LABEL: Record<ActionOutcome, string> = {
+  success: 'succeeded',
+  redirect: 'redirected',
+  invalid: 'validation errors',
+  error: 'failed',
+};
+export const OUTCOME_TONE: Record<ActionOutcome, string> = {
+  success: 'good',
+  redirect: 'info',
+  invalid: 'warn',
+  error: 'bad',
+};
+
+export function walk(
+  routes: AnalogRoute[],
+  depth = 0,
+  out: { route: AnalogRoute; depth: number }[] = [],
+) {
+  for (const route of routes) {
+    out.push({ route, depth });
+    walk(route.children, depth + 1, out);
+  }
+  return out;
+}
+
+// The helpers below were methods of the page; the views share them.
+
+export function short(file: string | undefined): string | undefined {
+  return file?.replace(/^\/src\/app\//, '').replace(/^\//, '');
+}
+
+export function dir(file: string): string {
+  const shortened = short(file) ?? file;
+  return shortened.includes('/') ? shortened.slice(0, shortened.lastIndexOf('/') + 1) : '';
+}
+
+export function base(file: string): string {
+  return file.slice(file.lastIndexOf('/') + 1);
+}
+
+export function statusClass(status: number): 'good' | 'warn' | 'bad' {
+  if (status >= 500 || status === 0) return 'bad';
+  if (status >= 400) return 'warn';
+  return 'good';
+}
+
+export function modeLabel(mode: RenderRow['mode']): string {
+  return MODE_LABEL[mode];
+}
diff --git a/app/src/pages/analog/analog-page-state.ts b/app/src/pages/analog/analog-page-state.ts
new file mode 100644
index 00000000..fe58518e
--- /dev/null
+++ b/app/src/pages/analog/analog-page-state.ts
@@ -0,0 +1,231 @@
+import { DestroyRef, Injectable, computed, inject, signal, type Signal } from '@angular/core';
+import type { DevframeRpcClient } from 'devframe/client';
+import { hostPageId } from '../../page-id';
+import { rpcTry as call } from '../../rpc';
+import {
+  LINT_TEXT,
+  STATIC_MESSAGES,
+  walk,
+  type AnalogProject,
+  type AnalogRoute,
+  type AnalogState,
+  type Finding,
+  type LintCard,
+  type PrerenderPlan,
+  type RenderCheck,
+  type RenderRow,
+  type UrlMatch,
+  type View,
+} from './analog-model';
+
+/**
+ * What the Analog page reads from the devtools server, and the view state that outlives a switch
+ * between its views (the URL being explained, the route filter, the open transform and preview,
+ * the render checks). The page provides it; its views in `./analog/` share it.
+ */
+@Injectable()
+export class AnalogPageState {
+  private rpcSource: Signal<DevframeRpcClient | null> = signal(null);
+  readonly rpc = computed(() => this.rpcSource());
+
+  readonly view = signal<View>('routes');
+  readonly project = signal<AnalogProject | null>(null);
+  readonly loadFailed = signal(false);
+  readonly state = signal<AnalogState>({});
+  readonly findings = signal<Finding[]>([]);
+  readonly renderRows = signal<RenderRow[]>([]);
+  readonly plan = signal<PrerenderPlan | null>(null);
+  readonly filter = signal('');
+  readonly testUrl = signal('');
+  readonly explained = signal<{ url: string; match: UrlMatch } | null>(null);
+  readonly explainError = signal('');
+  readonly explaining = signal(false);
+  /** The dev server origin for copied requests: the open page's, or the panel's own. */
+  readonly devOrigin = computed(() => {
+    const url = this.page()?.url ?? '';
+    if (/^https?:\/\//.test(url)) {
+      // A malformed page URL must not break the whole Server view.
+      try {
+        return new URL(url).origin;
+      } catch {
+        return '';
+      }
+    }
+    return /^https?:$/.test(location.protocol) ? location.origin : '';
+  });
+  /** The page file whose Vite transform stack is open below the routes. */
+  readonly transformFile = signal<string | null>(null);
+  /** The content file open in the preview. */
+  readonly previewFile = signal<string | null>(null);
+  /** Dev server render checks by route. */
+  readonly checks = signal<Record<string, RenderCheck | 'running'>>({});
+
+  private unsubscribe: (() => void) | null = null;
+  private refreshTimer: ReturnType<typeof setTimeout> | undefined;
+  private refreshRun = 0;
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly hostPageId = hostPageId();
+
+  readonly page = computed(() => {
+    const pages = this.state().pages ?? [];
+    return (this.hostPageId ? pages.find((p) => p.pageId === this.hostPageId) : pages[0]) ?? null;
+  });
+  /** Open page files, mapped to their named outlet ('' for the primary outlet). */
+  readonly openFiles = computed(() => {
+    const open = new Map<string, string>();
+    for (const c of this.page()?.chain ?? []) {
+      // The primary outlet wins when one file renders in several outlets.
+      if (c.file && (!open.has(c.file) || !c.outlet)) open.set(c.file, c.outlet ?? '');
+    }
+    return open;
+  });
+  /** Every call the dev server keeps, from every tab. */
+  readonly allCalls = computed(() => this.state().calls ?? []);
+  /** The tab the Server view shows by default: the panel's page. */
+  readonly scopePageId = computed(() => this.page()?.pageId);
+  /** Shows the calls of every tab, and those the dev server tied to no tab. */
+  readonly allTabs = signal(false);
+  /** The calls of the panel's tab, or every call with "All tabs" on or no page reporting. */
+  readonly tabCalls = computed(() => {
+    const pageId = this.scopePageId();
+    const calls = this.allCalls();
+    return this.allTabs() || !pageId ? calls : calls.filter((c) => c.pageId === pageId);
+  });
+  readonly allRoutes = computed(() => walk(this.project()?.routes ?? []));
+  readonly pageCount = computed(
+    () => this.allRoutes().filter((r) => r.route.file && r.route.kind !== 'layout').length,
+  );
+  readonly serverFns = computed(() => this.project()?.serverFns ?? []);
+  readonly fnById = computed(() => new Map(this.serverFns().map((fn) => [fn.id, fn])));
+  readonly lintCards = computed(() => {
+    const order = { error: 0, warning: 1, info: 2 };
+    const cards = new Map<string, LintCard>();
+    for (const finding of this.findings()) {
+      let card = cards.get(finding.rule);
+      if (!card) {
+        const known = LINT_TEXT[finding.rule];
+        card = {
+          rule: finding.rule,
+          severity: finding.severity,
+          title: known?.title ?? finding.rule,
+          summary: known?.summary ?? finding.message,
+          fix: finding.fix,
+          items: [],
+        };
+        cards.set(finding.rule, card);
+      }
+      const message =
+        STATIC_MESSAGES.has(finding.rule) || finding.message === card.summary
+          ? undefined
+          : finding.message;
+      const same = (item: LintCard['items'][number]) =>
+        item.file === finding.file && item.path === finding.path && item.message === message;
+      if (!card.items.some(same))
+        card.items.push({ file: finding.file, path: finding.path, message });
+    }
+    return Array.from(cards.values()).sort((a, b) => order[a.severity] - order[b.severity]);
+  });
+  /** Errors and warnings; info findings are advice, so they are not counted. */
+  readonly lintCount = computed(() => {
+    const findings = this.findings();
+    return {
+      errors: findings.filter((f) => f.severity === 'error').length,
+      warnings: findings.filter((f) => f.severity === 'warning').length,
+    };
+  });
+  readonly lintTone = computed(() => {
+    const { errors, warnings } = this.lintCount();
+    return errors ? 'bad' : warnings ? 'warn' : '';
+  });
+  readonly views = computed(() => {
+    const { errors, warnings } = this.lintCount();
+    return [
+      { id: 'routes' as View, label: 'Routes', count: this.pageCount() as number | null, tone: '' },
+      { id: 'server' as View, label: 'Server', count: this.tabCalls().length, tone: '' },
+      { id: 'render' as View, label: 'Render', count: this.renderRows().length, tone: '' },
+      {
+        id: 'content' as View,
+        label: 'Content',
+        count: this.project()?.content.length ?? 0,
+        tone: '',
+      },
+      { id: 'data' as View, label: 'Data', count: null, tone: '' },
+      { id: 'runtime' as View, label: 'Runtime', count: null, tone: '' },
+      { id: 'lint' as View, label: 'Lint', count: errors + warnings, tone: this.lintTone() },
+    ];
+  });
+
+  constructor() {
+    this.destroyRef.onDestroy(() => {
+      this.unsubscribe?.();
+      clearTimeout(this.refreshTimer);
+    });
+  }
+
+  /** Reads the RPC client from the page's `rpc` input. Called once, by the page. */
+  connect(rpc: Signal<DevframeRpcClient | null>) {
+    this.rpcSource = rpc;
+  }
+
+  async load(client: DevframeRpcClient) {
+    const project = await call<AnalogProject>(client, 'analog-project');
+    if (this.destroyRef.destroyed) return;
+    this.project.set(project);
+    this.loadFailed.set(project === null);
+    try {
+      const shared = await client.scope('pangular').rpc.sharedState('analog');
+      if (this.destroyRef.destroyed) return;
+      const apply = (value: unknown) => this.state.set((value as AnalogState) ?? {});
+      apply(shared.value());
+      this.unsubscribe?.();
+      this.unsubscribe = shared.on('updated', apply);
+    } catch {
+      this.state.set({});
+    }
+    if (this.destroyRef.destroyed) return;
+    await this.refresh(this.view());
+  }
+
+  retry() {
+    const client = this.rpc();
+    if (!client) return;
+    this.loadFailed.set(false);
+    void this.load(client);
+  }
+
+  scheduleRefresh(view: View) {
+    clearTimeout(this.refreshTimer);
+    this.refreshTimer = setTimeout(() => void this.refresh(view), 300);
+  }
+
+  private async refresh(view: View) {
+    const client = this.rpc();
+    if (!client) return;
+    const run = ++this.refreshRun;
+    const [findings, render] = await Promise.all([
+      call<Finding[]>(client, 'analog-lint', this.hostPageId ?? undefined),
+      call<{ rows: RenderRow[]; plan: PrerenderPlan }>(client, 'analog-render'),
+    ]);
+    if (run !== this.refreshRun) return;
+    this.findings.set(findings ?? []);
+    this.renderRows.set(render?.rows ?? []);
+    this.plan.set(render?.plan ?? null);
+    if (view === 'routes' || view === 'content' || this.project() === null) {
+      const project = await call<AnalogProject>(client, 'analog-project');
+      if (project && run === this.refreshRun) {
+        this.project.set(project);
+        this.loadFailed.set(false);
+      }
+    }
+  }
+
+  isOpen(route: AnalogRoute): boolean {
+    return !!route.file && this.openFiles().has(route.file);
+  }
+
+  openText(route: AnalogRoute): string {
+    const outlet = route.file ? this.openFiles().get(route.file) : undefined;
+    return outlet ? `open in ${outlet}` : 'open';
+  }
+}
diff --git a/app/src/pages/analog/analog-render.html b/app/src/pages/analog/analog-render.html
new file mode 100644
index 00000000..78b66d06
--- /dev/null
+++ b/app/src/pages/analog/analog-render.html
@@ -0,0 +1,163 @@
+@if (plan()?.configPartial?.length) {
+  <p class="note" role="status">
+    The analog() options in vite.config could not be read in full, so these modes and the prerender
+    plan may be incomplete.
+    @for (reason of plan()!.configPartial; track reason) {
+      {{ reason }}
+    }
+  </p>
+}
+@if (modeCounts().length) {
+  <div class="chips">
+    @for (m of modeCounts(); track m.mode) {
+      <span class="pill" [attr.data-mode]="m.mode">{{ m.label }} · {{ m.count }}</span>
+    }
+  </div>
+}
+<div class="table-wrap" role="region" aria-label="Render modes" tabindex="0">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Route</th>
+        <th scope="col">Configured</th>
+        <th scope="col">Last request</th>
+        <th scope="col">Dev server check</th>
+        <th scope="col">File</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (row of renderRows(); track row.path) {
+        <tr>
+          <td class="mono path">{{ row.path }}</td>
+          <td>
+            <div class="meta">
+              <span class="pill" [attr.data-mode]="row.mode">{{ modeLabel(row.mode) }}</span>
+              <span class="muted small">{{ row.reason }}</span>
+            </div>
+          </td>
+          <td>
+            @if (row.last; as last) {
+              <div class="meta">
+                <span class="status" [attr.data-status]="statusClass(last.status)">{{
+                  last.status
+                }}</span>
+                <span class="muted small tnum"
+                  >{{ last.render === 'client' ? 'client only' : 'server rendered' }} ·
+                  {{ last.ms }} ms</span
+                >
+                @if (mismatch(row)) {
+                  <span class="pill" data-tone="warn">differs from config</span>
+                }
+              </div>
+            } @else {
+              <span class="muted small">not requested yet</span>
+            }
+          </td>
+          <td>
+            @if (checks()[row.path]; as check) {
+              @if (check === 'running') {
+                <span class="muted small" role="status">Checking…</span>
+              } @else if (check.error) {
+                <span class="pill" data-tone="bad">{{ check.error }}</span>
+              } @else {
+                <div class="meta">
+                  <span class="pill" [attr.data-mode]="check.observed">{{
+                    modeLabel(check.observed!)
+                  }}</span>
+                  <span class="pill" [attr.data-tone]="check.matches ? 'good' : 'warn'">{{
+                    check.matches ? 'fits the config' : 'differs from config'
+                  }}</span>
+                  @if (check.note) {
+                    <span class="muted small">{{ check.note }}</span>
+                  }
+                </div>
+              }
+            }
+            <button
+              type="button"
+              class="btn ghost"
+              [disabled]="checks()[row.path] === 'running'"
+              [attr.aria-label]="'Request ' + row.path + ' and check its render mode'"
+              (click)="checkRender(row.path)"
+            >
+              Check
+            </button>
+          </td>
+          <td>
+            @if (row.file) {
+              <app-source-link class="file" [file]="row.file"
+                ><span class="dir">{{ dir(row.file) }}</span
+                >{{ base(row.file) }}</app-source-link
+              >
+            }
+          </td>
+        </tr>
+      } @empty {
+        <tr>
+          <td colspan="5" class="empty-row">
+            No page routes to render yet. Add a .page.ts file under src/app/pages.
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>
+@if (plan(); as p) {
+  <div class="card">
+    <h2>Prerender plan</h2>
+    @if (p.dynamicConfig) {
+      <p class="muted">prerender.routes is a function, so the list is known only at build time.</p>
+    } @else {
+      <dl class="facts">
+        <dt>Listed</dt>
+        <dd>
+          @for (r of p.listed ?? ['/']; track r) {
+            <span class="chip mono">{{ r }}</span>
+          }
+          @if (!p.listed) {
+            <span class="muted small">default, nothing configured</span>
+          }
+        </dd>
+        @if (p.fromRules?.length) {
+          <dt>From routeRules</dt>
+          <dd>
+            @for (r of p.fromRules; track r) {
+              <span class="chip mono">{{ r }}</span>
+            }
+          </dd>
+        }
+        @if (p.staticMissing.length) {
+          <dt>Static, not listed</dt>
+          <dd>
+            @for (r of p.staticMissing; track r) {
+              <span class="chip mono" data-tone="warn">{{ r }}</span>
+            }
+          </dd>
+        }
+        @if (p.dynamic.length) {
+          <dt>Need explicit entries</dt>
+          <dd>
+            @for (r of p.dynamic; track r) {
+              <span class="chip mono">{{ r }}</span>
+            }
+          </dd>
+        }
+        <dt>Build output</dt>
+        <dd class="tnum">
+          @if (p.built.length) {
+            {{ plural(p.built.length, 'page') }} in dist/analog/public
+            @if (p.notBuilt.length) {
+              · missing
+              @for (r of p.notBuilt; track r) {
+                <span class="chip mono" data-tone="bad">{{ r }}</span>
+              }
+            }
+          } @else {
+            <span class="muted small">no build yet</span>
+          }
+        </dd>
+      </dl>
+    }
+  </div>
+}
+<app-analog-build [rpc]="rpc()" />
diff --git a/app/src/pages/analog/analog-render.scss b/app/src/pages/analog/analog-render.scss
new file mode 100644
index 00000000..e94058be
--- /dev/null
+++ b/app/src/pages/analog/analog-render.scss
@@ -0,0 +1,12 @@
+@use 'analog' as a;
+
+// A wrapper only: the view's parts are items of the page's panel grid, as they were.
+:host {
+  display: contents;
+}
+
+@include a.base;
+@include a.form;
+@include a.table;
+@include a.calls;
+@include a.cards;
diff --git a/app/src/pages/analog/analog-render.ts b/app/src/pages/analog/analog-render.ts
new file mode 100644
index 00000000..c8527c78
--- /dev/null
+++ b/app/src/pages/analog/analog-render.ts
@@ -0,0 +1,60 @@
+import { Component, computed, inject } from '@angular/core';
+import { plural } from '../../format';
+import { rpcTry as call } from '../../rpc';
+import { SourceLink } from '../../ui/source-link';
+import { AnalogBuild } from '../analog-build';
+import {
+  MODE_LABEL,
+  base,
+  dir,
+  modeLabel,
+  statusClass,
+  type RenderCheck,
+  type RenderRow,
+} from './analog-model';
+import { AnalogPageState } from './analog-page-state';
+
+/** The Render view of the Analog page: the render mode of each route, the prerender plan and the build. */
+@Component({
+  selector: 'div[appAnalogRender]',
+  imports: [SourceLink, AnalogBuild],
+  templateUrl: './analog-render.html',
+  styleUrl: './analog-render.scss',
+})
+export class AnalogRender {
+  private readonly page = inject(AnalogPageState);
+
+  protected readonly plural = plural;
+  protected readonly rpc = this.page.rpc;
+  protected readonly plan = this.page.plan;
+  protected readonly renderRows = this.page.renderRows;
+  protected readonly checks = this.page.checks;
+  protected readonly dir = dir;
+  protected readonly base = base;
+  protected readonly modeLabel = modeLabel;
+  protected readonly statusClass = statusClass;
+
+  protected readonly modeCounts = computed(() =>
+    (['ssr', 'ssg', 'cached', 'client', 'redirect'] as const)
+      .map((mode) => ({
+        mode,
+        label: MODE_LABEL[mode],
+        count: this.renderRows().filter((r) => r.mode === mode).length,
+      }))
+      .filter((m) => m.count),
+  );
+
+  protected mismatch(row: RenderRow): boolean {
+    if (!row.last?.render || row.mode === 'redirect') return false;
+    return row.mode === 'client' ? row.last.render !== 'client' : row.last.render === 'client';
+  }
+
+  protected async checkRender(path: string) {
+    this.checks.update((all) => ({ ...all, [path]: 'running' }));
+    const check = await call<RenderCheck>(this.rpc(), 'analog-render-check', path);
+    this.checks.update((all) => ({
+      ...all,
+      [path]: check ?? { path, error: 'No answer from the devtools server.' },
+    }));
+  }
+}
diff --git a/app/src/pages/analog/analog-routes.html b/app/src/pages/analog/analog-routes.html
new file mode 100644
index 00000000..8dfa90e9
--- /dev/null
+++ b/app/src/pages/analog/analog-routes.html
@@ -0,0 +1,164 @@
+<div class="toolbar">
+  <form class="inline explain" (submit)="$event.preventDefault(); explain()">
+    <label for="analog-url">Test a URL</label>
+    <input
+      id="analog-url"
+      class="field grow mono"
+      type="text"
+      placeholder="/products/42"
+      [value]="testUrl()"
+      (input)="testUrl.set($any($event.target).value)"
+    />
+    <button type="submit" class="btn primary" [disabled]="explaining()">
+      {{ explaining() ? 'Explaining…' : 'Explain' }}
+    </button>
+  </form>
+  <app-search-field
+    class="filter"
+    inputId="route-filter"
+    placeholder="Filter by path or file"
+    saveKey="analog-routes"
+    [(value)]="filter"
+  />
+</div>
+<div class="explain-result" role="status">
+  @if (explainError(); as error) {
+    <div class="callout" data-tone="bad">{{ error }}</div>
+  } @else if (explained(); as e) {
+    <div class="callout" [attr.data-tone]="e.match.matched ? 'good' : 'bad'">
+      @if (e.match.matched) {
+        <strong class="mono">{{ e.url }}</strong> renders
+        <ol class="chain">
+          @for (r of e.match.chain; track r.id) {
+            <li>
+              @if (r.file) {
+                <app-source-link class="mono" [file]="r.file">{{ short(r.file) }}</app-source-link>
+              } @else {
+                <span class="mono">{{ r.fullPath }}</span>
+              }
+              <span class="pill" [attr.data-kind]="r.kind">{{ r.kind }}</span>
+            </li>
+          }
+        </ol>
+        @if (paramList(e.match.params).length) {
+          <div class="chips">
+            @for (p of paramList(e.match.params); track p[0]) {
+              <span class="chip mono">{{ p[0] }} = {{ p[1] }}</span>
+            }
+          </div>
+        }
+      } @else {
+        <strong class="mono">{{ e.url }}</strong> matches no file route. Angular throws NG04002
+        "Cannot match any routes".
+        @if (e.match.rejected.length) {
+          <ul class="plain">
+            @for (r of e.match.rejected.slice(0, 5); track $index) {
+              <li>
+                @if (r.file) {
+                  <app-source-link class="mono" [file]="r.file">{{
+                    short(r.file)
+                  }}</app-source-link>
+                } @else {
+                  <span class="mono">{{ r.path }}</span>
+                }
+                <span class="muted">{{ r.reason }}</span>
+              </li>
+            }
+          </ul>
+        }
+      }
+    </div>
+  }
+</div>
+<div class="table-wrap" role="region" aria-label="File routes" tabindex="0">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Route</th>
+        <th scope="col">File</th>
+        <th scope="col">Data</th>
+        <th scope="col">Route meta</th>
+        <th scope="col"><span class="sr-only">Actions</span></th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (row of routeRows(); track row.route.id) {
+        <tr
+          [class.open]="isOpen(row.route)"
+          [class.dim]="row.route.kind === 'group' || row.route.kind === 'implicit'"
+        >
+          <td>
+            <div class="route" [style.padding-left.px]="row.depth * 16">
+              @if (row.depth) {
+                <span class="guide" aria-hidden="true">└</span>
+              }
+              <span class="mono path">{{ row.route.fullPath }}</span>
+              <span class="pill" [attr.data-kind]="row.route.kind">{{ kindText(row.route) }}</span>
+              @if (isOpen(row.route)) {
+                <span class="pill live">{{ openText(row.route) }}</span>
+              }
+            </div>
+          </td>
+          <td>
+            @if (row.route.file) {
+              <app-source-link class="file" [file]="row.route.file"
+                ><span class="dir">{{ dir(row.route.file) }}</span
+                >{{ base(row.route.file) }}</app-source-link
+              >
+            } @else {
+              <span class="muted">folder only</span>
+            }
+          </td>
+          <td>
+            <div class="meta">
+              @for (e of serverExports(row.route); track e) {
+                <span class="pill" data-kind="load">{{ e }}()</span>
+              }
+            </div>
+          </td>
+          <td>
+            @if (row.route.title) {
+              <span class="chip">"{{ row.route.title }}"</span>
+            }
+            @for (key of row.route.routeMeta ?? []; track key) {
+              @if (key !== 'title') {
+                <span class="chip mono">{{ key }}</span>
+              }
+            }
+          </td>
+          <td class="actions">
+            @if (row.route.file && row.route.kind !== 'markdown') {
+              <button
+                type="button"
+                class="btn ghost"
+                [attr.aria-label]="'Show the Vite transform stack of ' + row.route.file"
+                [attr.aria-pressed]="transformFile() === row.route.file"
+                (click)="showTransform(row.route.file)"
+              >
+                Transform
+              </button>
+            }
+          </td>
+        </tr>
+      } @empty {
+        <tr>
+          <td colspan="5" class="empty-row">
+            @if (filter().trim()) {
+              No route matches the filter. Try part of a path or a file name.
+            } @else {
+              No file routes yet. Add a .page.ts file under src/app/pages.
+            }
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>
+@if (transformFile(); as file) {
+  <app-analog-transform
+    [rpc]="rpc()"
+    [file]="file"
+    [serverFns]="serverFns()"
+    (closed)="closeTransform(file)"
+  />
+}
diff --git a/app/src/pages/analog/analog-routes.scss b/app/src/pages/analog/analog-routes.scss
new file mode 100644
index 00000000..05e54026
--- /dev/null
+++ b/app/src/pages/analog/analog-routes.scss
@@ -0,0 +1,11 @@
+@use 'analog' as a;
+
+// A wrapper only: the view's parts are items of the page's panel grid, as they were.
+:host {
+  display: contents;
+}
+
+@include a.base;
+@include a.form;
+@include a.callout;
+@include a.table;
diff --git a/app/src/pages/analog/analog-routes.ts b/app/src/pages/analog/analog-routes.ts
new file mode 100644
index 00000000..8e5a0d34
--- /dev/null
+++ b/app/src/pages/analog/analog-routes.ts
@@ -0,0 +1,105 @@
+import { Component, ElementRef, computed, inject } from '@angular/core';
+import { rpcCall } from '../../rpc';
+import { SearchField } from '../../ui/search-field';
+import { SourceLink } from '../../ui/source-link';
+import { AnalogTransform } from '../analog-transform';
+import { base, dir, short, type AnalogRoute, type UrlMatch } from './analog-model';
+import { AnalogPageState } from './analog-page-state';
+
+/** The Routes view of the Analog page: the URL tester and the file route table. */
+@Component({
+  selector: 'div[appAnalogRoutes]',
+  imports: [SearchField, SourceLink, AnalogTransform],
+  templateUrl: './analog-routes.html',
+  styleUrl: './analog-routes.scss',
+})
+export class AnalogRoutes {
+  private readonly page = inject(AnalogPageState);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  protected readonly rpc = this.page.rpc;
+  protected readonly serverFns = this.page.serverFns;
+  protected readonly filter = this.page.filter;
+  protected readonly testUrl = this.page.testUrl;
+  protected readonly explained = this.page.explained;
+  protected readonly explainError = this.page.explainError;
+  protected readonly explaining = this.page.explaining;
+  protected readonly transformFile = this.page.transformFile;
+  protected readonly short = short;
+  protected readonly dir = dir;
+  protected readonly base = base;
+
+  protected readonly routeRows = computed(() => {
+    const needle = this.filter().trim().toLowerCase();
+    if (!needle) return this.page.allRoutes();
+    return this.page
+      .allRoutes()
+      .filter(
+        (r) =>
+          r.route.fullPath.toLowerCase().includes(needle) ||
+          !!r.route.file?.toLowerCase().includes(needle),
+      );
+  });
+
+  protected isOpen(route: AnalogRoute): boolean {
+    return this.page.isOpen(route);
+  }
+
+  protected openText(route: AnalogRoute): string {
+    return this.page.openText(route);
+  }
+
+  protected kindText(route: AnalogRoute): string {
+    if (route.catchAll) return route.catchAll === 'optional' ? 'optional catch-all' : 'catch-all';
+    if (route.kind === 'implicit') return 'folder';
+    return route.kind;
+  }
+
+  protected serverExports(route: AnalogRoute): string[] {
+    return (route.serverExports ?? []).filter((e) => e === 'load' || e === 'action');
+  }
+
+  protected paramList(params: Record<string, string>): [string, string][] {
+    return Object.entries(params);
+  }
+
+  protected showTransform(file: string) {
+    this.transformFile.set(this.transformFile() === file ? null : file);
+  }
+
+  protected closeTransform(file: string) {
+    this.transformFile.set(null);
+    this.refocus(`Show the Vite transform stack of ${file}`);
+  }
+
+  /** Hands focus back to the row button that opened a detail card. */
+  private refocus(label: string) {
+    queueMicrotask(() =>
+      this.host.nativeElement
+        .querySelector<HTMLElement>(`button[aria-label="${CSS.escape(label)}"]`)
+        ?.focus(),
+    );
+  }
+
+  protected async explain() {
+    const url = this.testUrl().trim();
+    if (!url) {
+      this.explained.set(null);
+      this.explainError.set('Type a URL to explain, for example /products/42.');
+      return;
+    }
+    this.explaining.set(true);
+    this.explainError.set('');
+    try {
+      const match = (await rpcCall(this.rpc(), 'analog-explain-url', url)) as UrlMatch | null;
+      if (!match) throw new Error('The devtools server did not answer');
+      this.explained.set({ url, match });
+    } catch (error) {
+      const reason = String((error as Error)?.message || 'The devtools server did not answer');
+      this.explained.set(null);
+      this.explainError.set(`Could not explain ${url}. ${reason.replace(/\.?$/, '.')}`);
+    } finally {
+      this.explaining.set(false);
+    }
+  }
+}
diff --git a/app/src/pages/analog/analog-server.html b/app/src/pages/analog/analog-server.html
new file mode 100644
index 00000000..840f8909
--- /dev/null
+++ b/app/src/pages/analog/analog-server.html
@@ -0,0 +1,282 @@
+@if (duplicates().length) {
+  <div class="callout" data-tone="warn" role="note">
+    <strong>load() ran twice</strong> for
+    @for (d of duplicates(); track d; let last = $last) {
+      <span class="mono">{{ d }}</span
+      >{{ last ? '' : ', ' }}
+    }
+    : once while server rendering, again in the browser. TransferState did not serve the server
+    result.
+  </div>
+}
+@if (refetchedFns().length) {
+  <div class="callout" data-tone="warn" role="note">
+    <strong>Server function read ran twice</strong>:
+    @for (name of refetchedFns(); track name; let last = $last) {
+      <span class="mono">{{ name }}</span
+      >{{ last ? '' : ', ' }}
+    }
+    ran while server rendering, then again in the browser. The browser did not use the TransferState
+    seed.
+  </div>
+}
+<h2 id="analog-calls-heading">Server calls</h2>
+<div class="calls-bar">
+  <fieldset class="segmented">
+    <legend class="sr-only">Show calls of kind</legend>
+    @for (k of kinds; track k) {
+      <label [class.on]="kind() === k">
+        <input
+          type="radio"
+          name="analog-kind"
+          class="sr-only"
+          [attr.data-kind]="k"
+          [checked]="kind() === k"
+          (change)="kind.set(k)"
+        />
+        {{ kindLabel(k) }} <span class="muted">{{ kindCount(k) }}</span>
+      </label>
+    }
+  </fieldset>
+  <div class="calls-actions">
+    <button type="button" class="btn ghost" [disabled]="!allCalls().length" (click)="clearCalls()">
+      Clear calls
+    </button>
+    <span class="calls-message" role="status">{{ callsMessage() }}</span>
+  </div>
+</div>
+<div class="call-filters" role="group" aria-label="Filter the server calls">
+  <app-search-field
+    class="search"
+    inputId="analog-call-search"
+    placeholder="Filter by URL, path or function"
+    saveKey="analog-calls"
+    [(value)]="callQuery"
+  />
+  <label class="check">
+    <input
+      type="checkbox"
+      [checked]="failedOnly()"
+      (change)="failedOnly.set($any($event.target).checked)"
+    />
+    Failed only
+  </label>
+  @if (scopePageId()) {
+    <label class="check">
+      <input
+        type="checkbox"
+        data-testid="analog-all-tabs"
+        [checked]="allTabs()"
+        (change)="allTabs.set($any($event.target).checked)"
+      />
+      All tabs (including untagged)
+    </label>
+  }
+  <span class="total" aria-live="polite"
+    >{{ matchingCalls().length }} of {{ tabCalls().length }}</span
+  >
+</div>
+@if (shownCount() < matchingCalls().length || serverFull()) {
+  <p class="note">
+    @if (shownCount() < matchingCalls().length) {
+      Showing the newest {{ shownCount() }} of {{ matchingCalls().length }}.
+    }
+    @if (serverFull()) {
+      The dev server keeps only the newest {{ maxServerCalls }} calls and drops older ones.
+    }
+  </p>
+}
+@if (calls().length) {
+  <div class="table-wrap" role="region" aria-label="Server calls" tabindex="0">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">At</th>
+          <th scope="col">Kind</th>
+          <th scope="col">Request</th>
+          <th scope="col">Status</th>
+          <th scope="col" class="num">Duration</th>
+          <th scope="col">From</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (c of calls(); track c.id) {
+          <tr>
+            <td class="muted nowrap">{{ time(c.at) }}</td>
+            <td>
+              <span class="pill" [attr.data-call]="c.kind">{{ kindLabel(c.kind) }}</span>
+            </td>
+            <td class="request">
+              <div class="meta">
+                <span class="method" [attr.data-method]="c.method">{{ c.method }}</span>
+                @if (fnOf(c); as fn) {
+                  <strong class="mono url">{{ fn.name }}</strong>
+                  @if (fn.file) {
+                    <app-source-link class="mono muted" [file]="fn.file">{{
+                      short(fn.file)
+                    }}</app-source-link>
+                  }
+                } @else {
+                  <span class="mono url">{{ c.url }}</span>
+                }
+                @if (c.seeded) {
+                  <span class="pill">ran during server rendering</span>
+                }
+                @if (c.outcome) {
+                  <span class="pill" [attr.data-tone]="outcomeTone(c.outcome)"
+                    >{{ outcomeLabel(c.outcome) }}
+                    @if (c.location) {
+                      to {{ c.location }}
+                    }
+                  </span>
+                }
+                @if (c.render) {
+                  <span class="pill" [attr.data-mode]="c.render === 'ssr' ? 'ssr' : 'client'">{{
+                    c.render === 'ssr' ? 'server rendered' : 'client only'
+                  }}</span>
+                }
+              </div>
+              @if (c.preview) {
+                <details>
+                  <summary>Response</summary>
+                  <pre class="code">{{ pretty(c.preview) }}</pre>
+                </details>
+              }
+            </td>
+            <td>
+              <span class="status" [attr.data-status]="statusClass(c.status)">{{ c.status }}</span>
+            </td>
+            <td class="num nowrap">
+              @if (c.seeded) {
+                <span class="muted">in process</span>
+              } @else {
+                {{ c.ms }} ms
+              }
+            </td>
+            <td class="muted">{{ c.from }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+} @else if (tabCalls().length && callFiltered()) {
+  <div class="empty-box no-match" role="status">
+    <p class="empty-lead">No calls match.</p>
+    <p class="muted">
+      @if (callQuery().trim()) {
+        Nothing matches “{{ callQuery().trim() }}” with these filters.
+      } @else {
+        None of the {{ tabCalls().length }} calls fit these filters.
+      }
+    </p>
+    <div class="empty-actions">
+      <button type="button" class="btn ghost" (click)="clearCallFilters()">Clear filters</button>
+    </div>
+  </div>
+} @else {
+  <div class="empty-box">
+    <p class="empty-lead">
+      @if (tabCalls().length) {
+        No calls of this kind yet.
+      } @else if (allCalls().length) {
+        No calls from this tab yet.
+      } @else {
+        No calls yet.
+      }
+    </p>
+    <p class="muted">
+      Navigate in the app to see page renders, load() fetches, form actions, server functions and
+      API calls.
+      @if (!tabCalls().length && allCalls().length) {
+        Tick “All tabs (including untagged)” to see the
+        {{ allCalls().length }} calls from other tabs or tied to no tab.
+      }
+    </p>
+  </div>
+}
+
+<h2>API routes</h2>
+<div class="table-wrap" role="region" aria-label="API routes" tabindex="0">
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Method</th>
+        <th scope="col">Path</th>
+        <th scope="col">File</th>
+        <th scope="col"><span class="sr-only">Actions</span></th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (api of project()!.api; track api.file + api.method) {
+        <tr>
+          <td>
+            <span class="method" [attr.data-method]="api.method">{{ api.method }}</span>
+          </td>
+          <td class="mono">{{ api.path }}</td>
+          <td>
+            <app-source-link class="file" [file]="api.file"
+              ><span class="dir">{{ dir(api.file) }}</span
+              >{{ base(api.file) }}</app-source-link
+            >
+          </td>
+          <td class="actions">
+            <button
+              type="button"
+              class="btn ghost"
+              [attr.aria-label]="'Try ' + api.method + ' ' + api.path"
+              (click)="tryApi(api)"
+            >
+              Try
+            </button>
+          </td>
+        </tr>
+      } @empty {
+        <tr>
+          <td colspan="4" class="empty-row">
+            No API routes. Add a handler under src/server/routes to test it here.
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>
+
+@if (serverFns().length) {
+  <h2>Server functions</h2>
+  <div class="table-wrap" role="region" aria-label="Server functions" tabindex="0">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Method</th>
+          <th scope="col">Name</th>
+          <th scope="col">File</th>
+          <th scope="col" class="num">Calls</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (fn of serverFns(); track fn.id) {
+          <tr>
+            <td>
+              <span class="method" [attr.data-method]="fn.method">{{ fn.method }}</span>
+            </td>
+            <td class="mono">{{ fn.name }}</td>
+            <td>
+              <app-source-link class="file" [file]="fn.file"
+                ><span class="dir">{{ dir(fn.file) }}</span
+                >{{ base(fn.file) }}</app-source-link
+              >
+            </td>
+            <td class="num tnum">{{ fnCalls(fn.id) }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+}
+
+<app-analog-playground
+  [rpc]="rpc()"
+  [routes]="project()!.api"
+  [target]="tryTarget()"
+  [origin]="devOrigin()"
+/>
diff --git a/app/src/pages/analog/analog-server.scss b/app/src/pages/analog/analog-server.scss
new file mode 100644
index 00000000..4e2522fd
--- /dev/null
+++ b/app/src/pages/analog/analog-server.scss
@@ -0,0 +1,13 @@
+@use 'analog' as a;
+
+// A wrapper only: the view's parts are items of the page's panel grid, as they were.
+:host {
+  display: contents;
+}
+
+@include a.base;
+@include a.form;
+@include a.callout;
+@include a.table;
+@include a.calls;
+@include a.cards;
diff --git a/app/src/pages/analog/analog-server.ts b/app/src/pages/analog/analog-server.ts
new file mode 100644
index 00000000..d931dc0c
--- /dev/null
+++ b/app/src/pages/analog/analog-server.ts
@@ -0,0 +1,114 @@
+import { Component, ElementRef, inject } from '@angular/core';
+import { time } from '../../format';
+import { SearchField } from '../../ui/search-field';
+import { SourceLink } from '../../ui/source-link';
+import { AnalogPlayground } from '../analog-playground';
+import { AnalogCallsState } from './analog-calls-state';
+import {
+  base,
+  dir,
+  short,
+  statusClass,
+  type ActionOutcome,
+  type AnalogCall,
+  type ApiRoute,
+  type Kind,
+} from './analog-model';
+import { AnalogPageState } from './analog-page-state';
+
+/** The Server view of the Analog page: the server calls, API routes, server functions and the playground. */
+@Component({
+  selector: 'div[appAnalogServer]',
+  imports: [SearchField, SourceLink, AnalogPlayground],
+  templateUrl: './analog-server.html',
+  styleUrl: './analog-server.scss',
+})
+export class AnalogServer {
+  private readonly page = inject(AnalogPageState);
+  private readonly callsState = inject(AnalogCallsState);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  protected readonly rpc = this.page.rpc;
+  protected readonly project = this.page.project;
+  protected readonly serverFns = this.page.serverFns;
+  protected readonly devOrigin = this.page.devOrigin;
+  protected readonly allCalls = this.page.allCalls;
+  protected readonly tabCalls = this.page.tabCalls;
+  protected readonly scopePageId = this.page.scopePageId;
+  protected readonly allTabs = this.page.allTabs;
+
+  protected readonly kinds = this.callsState.kinds;
+  protected readonly kind = this.callsState.kind;
+  protected readonly tryTarget = this.callsState.tryTarget;
+  protected readonly maxServerCalls = this.callsState.maxServerCalls;
+  protected readonly callQuery = this.callsState.callQuery;
+  protected readonly failedOnly = this.callsState.failedOnly;
+  protected readonly callsMessage = this.callsState.callsMessage;
+  protected readonly callFiltered = this.callsState.callFiltered;
+  protected readonly matchingCalls = this.callsState.matchingCalls;
+  protected readonly calls = this.callsState.calls;
+  protected readonly shownCount = this.callsState.shownCount;
+  protected readonly serverFull = this.callsState.serverFull;
+  protected readonly refetchedFns = this.callsState.refetchedFns;
+  protected readonly duplicates = this.callsState.duplicates;
+
+  protected readonly time = time;
+  protected readonly short = short;
+  protected readonly dir = dir;
+  protected readonly base = base;
+  protected readonly statusClass = statusClass;
+
+  protected kindLabel(kind: Kind): string {
+    return this.callsState.kindLabel(kind);
+  }
+
+  protected kindCount(kind: Kind): number {
+    return this.callsState.kindCount(kind);
+  }
+
+  protected fnOf(call: AnalogCall) {
+    return this.callsState.fnOf(call);
+  }
+
+  protected fnCalls(id: string): number {
+    return this.callsState.fnCalls(id);
+  }
+
+  protected outcomeLabel(outcome: ActionOutcome): string {
+    return this.callsState.outcomeLabel(outcome);
+  }
+
+  protected outcomeTone(outcome: ActionOutcome): string {
+    return this.callsState.outcomeTone(outcome);
+  }
+
+  protected tryApi(api: ApiRoute) {
+    this.callsState.tryApi(api);
+  }
+
+  protected pretty(text: string): string {
+    try {
+      return JSON.stringify(JSON.parse(text), null, 2);
+    } catch {
+      return text;
+    }
+  }
+
+  protected clearCallFilters() {
+    this.callsState.resetFilters();
+    queueMicrotask(() =>
+      this.host.nativeElement.querySelector<HTMLInputElement>('#analog-call-search')?.focus(),
+    );
+  }
+
+  protected async clearCalls() {
+    if (await this.callsState.clearCalls()) {
+      // The button is disabled once the list is empty, so hand focus to the kind filter.
+      queueMicrotask(() =>
+        this.host.nativeElement
+          .querySelector<HTMLInputElement>('input[name="analog-kind"]:checked')
+          ?.focus(),
+      );
+    }
+  }
+}
diff --git a/app/src/pages/component-tree.html b/app/src/pages/component-tree.html
new file mode 100644
index 00000000..07364bdd
--- /dev/null
+++ b/app/src/pages/component-tree.html
@@ -0,0 +1,266 @@
+@if (live()) {
+  <p class="intro">
+    Every component instance on the page, in the order Angular rendered them. Hover a row to
+    highlight its host in the page, and select it to read its live inputs, properties, outputs and
+    injected services.
+  </p>
+
+  <div class="toolbar">
+    <app-search-field
+      #filterInput
+      class="search"
+      placeholder="Filter by text, <tag> or [directive]"
+      describedBy="ct-filter-hint"
+      saveKey="components"
+      [value]="filter()"
+      (valueChange)="setFilter($event)"
+    />
+    <span id="ct-filter-hint" class="sr-only">
+      Type plain text, a tag such as &lt;button&gt;, or a directive such as [routerLink]. Combine
+      them to narrow the tree.
+    </span>
+    @if (pageOptions().length > 1) {
+      <span class="sr-only" id="ct-page-label">Page</span>
+      <app-select
+        class="page-select"
+        labelledBy="ct-page-label"
+        [options]="pageOptions()"
+        [value]="page()?.pageId ?? null"
+        (valueChange)="selectPage($event)"
+      />
+    }
+    <span class="count">{{ countLabel() }}</span>
+    <div class="tree-actions">
+      @if (page()!.directiveHostCount) {
+        <button
+          type="button"
+          class="tree-action"
+          title="Directive hosts"
+          [attr.aria-pressed]="showDirectiveHosts()"
+          (click)="toggleDirectiveHosts()"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M8 4H5v16h3" />
+            <path d="M16 4h3v16h-3" />
+          </svg>
+          <span class="label">Directive hosts</span>
+        </button>
+      }
+      <button
+        type="button"
+        class="tree-action"
+        title="Expand all"
+        [disabled]="!!filter().trim()"
+        (click)="expandAll()"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="m7 15 5 5 5-5" />
+          <path d="m7 9 5-5 5 5" />
+        </svg>
+        <span class="label">Expand all</span>
+      </button>
+      <button
+        type="button"
+        class="tree-action"
+        title="Collapse all"
+        [disabled]="!!filter().trim()"
+        (click)="collapseAll()"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="m7 20 5-5 5 5" />
+          <path d="m7 4 5 5 5-5" />
+        </svg>
+        <span class="label">Collapse all</span>
+      </button>
+      <button
+        type="button"
+        class="pick"
+        [class.on]="picking()"
+        [attr.title]="pickLabel()"
+        (click)="picking() ? cancelPick() : pick()"
+      >
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M4 4l6.5 16 2.3-6.7L19.5 11z" />
+        </svg>
+        <span class="label">{{ pickLabel() }}</span>
+      </button>
+    </div>
+  </div>
+  <p class="sr-only" role="status">{{ announcement() }}</p>
+  @if (pickMessage()) {
+    <p class="pick-message">{{ pickMessage() }}</p>
+  }
+  @if (page()!.truncated) {
+    <p class="notice" role="status">{{ truncationText() }}</p>
+  }
+
+  <div class="layout">
+    <div appTreeRows class="tree-col" (clearFilter)="clearFilter()"></div>
+
+    @if (selectedHost(); as host) {
+      <section
+        appHostDetail
+        class="detail"
+        aria-labelledby="ct-detail-title"
+        [node]="host"
+      ></section>
+    } @else if (selectedNode(); as sel) {
+      <section
+        appComponentDetail
+        class="detail"
+        aria-labelledby="ct-detail-title"
+        [node]="sel"
+        (showForm)="showForm.emit($event)"
+        (showInjector)="showInjector.emit($event)"
+        (showSignals)="showSignals.emit($event)"
+        (showPipe)="showPipe.emit($event)"
+      ></section>
+    } @else {
+      <div class="detail placeholder">
+        @if (destroyed(); as name) {
+          <p class="state-title">The selected component was destroyed</p>
+          <p class="state-hint">
+            <span class="mono">{{ name }}</span> is no longer on the page. Select another component
+            to see its live values.
+          </p>
+        } @else {
+          <p class="state-hint">
+            Select a component to see its live inputs, properties, outputs, change detection and
+            injected services.
+          </p>
+        }
+      </div>
+    }
+  </div>
+
+  <app-defer-blocks
+    [blocks]="deferBlocks()"
+    [truncated]="page()?.deferTruncated === true"
+    [clockOffset]="page()?.clockOffset ?? 0"
+    [mismatches]="page()?.hydration?.mismatches ?? []"
+    (showOwner)="showOwner($event)"
+    (showNode)="revealNode($event)"
+    (highlight)="$event ? highlightBlock($event) : highlight(null)"
+  />
+  @if (deferUnavailable()) {
+    <app-angular-unavailable
+      class="defer"
+      [page]="angularPage()"
+      capability="deferBlocks"
+      compact
+    />
+  }
+  @if (!native()) {
+    <app-hydration-section
+      [report]="page()?.hydration"
+      (overlay)="setHydrationOverlay($event)"
+      (showNode)="revealNode($event)"
+      (highlight)="highlight($event)"
+    />
+  }
+  <app-for-blocks
+    [blocks]="page()?.forBlocks"
+    [truncated]="page()?.forBlocksTruncated === true"
+    [supported]="(page()?.deferBlocks && !page()?.forBlocks) || forUnavailable() ? false : null"
+    [angular]="angularPage()"
+    (showOwner)="showForOwner($event)"
+    (highlight)="highlight($event)"
+  />
+  @if (!staticReport()) {
+    <app-cd-recording
+      [page]="cdPage()"
+      [pageId]="page()!.pageId"
+      [rpc]="rpc()"
+      [native]="native()"
+      (showComponent)="showCdComponent($event)"
+    />
+    <app-leaks-section
+      [report]="leaksPage()"
+      [pageId]="page()!.pageId"
+      [rpc]="rpc()"
+      [angular]="angularPage()"
+      (showComponent)="showLeakComponent($event)"
+      (highlight)="highlight($event)"
+    />
+  }
+} @else {
+  @if (page()) {
+    <p class="notice" role="status">
+      The page reported no component instances. The live tree needs a development build with
+      Angular's debug API. Showing what the source declares instead.
+    </p>
+  } @else if (!pagesKnown()) {
+    <p class="notice" role="status">Loading the live component tree…</p>
+  } @else {
+    <p class="notice">
+      No page is connected, so this lists what the source declares. Open the app in a browser with
+      the devtools connected to see each rendered instance.
+    </p>
+  }
+
+  <div class="toolbar">
+    <app-search-field
+      #filterInput
+      class="search"
+      placeholder="Filter by selector, class or file"
+      saveKey="components-source"
+      [(value)]="filter"
+    />
+    @if (source().length) {
+      <span class="count" aria-live="polite">
+        @if (filter().trim()) {
+          {{ filteredSource().length }} of {{ source().length }}
+        } @else {
+          {{ sourceCounts().components }}
+          {{ sourceCounts().components === 1 ? 'component' : 'components' }} ·
+          {{ sourceCounts().directives }}
+          {{ sourceCounts().directives === 1 ? 'directive' : 'directives' }}
+        }
+      </span>
+    }
+    <button
+      type="button"
+      class="refresh"
+      [class.spinning]="loading()"
+      [attr.aria-busy]="loading()"
+      (click)="refresh()"
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M20 12a8 8 0 1 1-2.34-5.66" />
+        <path d="M20 4v5h-5" />
+      </svg>
+      Refresh
+    </button>
+  </div>
+
+  @if (loading() && !source().length) {
+    <div class="state" role="status">
+      <span class="spinner" aria-hidden="true"></span>
+      <p class="state-title">Scanning components…</p>
+    </div>
+  } @else if (error() && !source().length) {
+    <div class="state" role="alert">
+      <p class="state-title">Could not load components</p>
+      <p class="state-hint">
+        @if (staticReport()) {
+          Run <code>pangular build</code> again to rebuild the report.
+        } @else {
+          Check that the dev server is running, then try again.
+        }
+      </p>
+      <button type="button" (click)="refresh()">Retry</button>
+    </div>
+  } @else if (!source().length) {
+    <div class="state">
+      <p class="state-title">No components found</p>
+      <p class="state-hint">No @Component or @Directive was found in the source.</p>
+    </div>
+  } @else if (!filteredSource().length) {
+    <div class="state">
+      <p class="state-title">No components match “{{ filter().trim() }}”</p>
+      <button type="button" (click)="clearFilter()">Clear filters</button>
+    </div>
+  } @else {
+    <ul appSourceList class="source-list" role="list" (showForm)="showForm.emit($event)"></ul>
+  }
+}
diff --git a/app/src/pages/component-tree.scss b/app/src/pages/component-tree.scss
new file mode 100644
index 00000000..f273d3f9
--- /dev/null
+++ b/app/src/pages/component-tree.scss
@@ -0,0 +1,111 @@
+@use 'mixins' as m;
+@use 'components' as ct;
+
+:host {
+  display: block;
+  color: var(--text);
+  font-size: 13px;
+}
+@include ct.base;
+.intro {
+  max-width: 720px;
+  margin: 0 0 12px;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.notice {
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+@include ct.search;
+@include ct.buttons;
+.refresh.spinning svg {
+  animation: spin 0.8s linear infinite;
+}
+.page-select {
+  flex: 0 1 220px;
+  min-width: 0;
+}
+.tree-action:disabled,
+.tree-action:disabled:hover {
+  background: var(--surface-2);
+  border-color: var(--border-strong);
+  opacity: 0.5;
+}
+.pick.on {
+  background: var(--accent-soft);
+  border-color: var(--accent-line);
+  color: var(--text-strong);
+}
+.defer {
+  margin-top: 16px;
+}
+.pick-message {
+  margin: 0 0 12px;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+@media (min-width: 880px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
+  }
+  .detail {
+    position: sticky;
+    top: 64px;
+    max-height: calc(100vh - 150px);
+    overflow: auto;
+  }
+}
+@include ct.narrow;
+.tree-col {
+  position: relative;
+  min-width: 0;
+}
+.detail {
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  @include m.enter;
+}
+.detail.placeholder {
+  padding: 24px 16px;
+  border-style: dashed;
+  text-align: center;
+}
+@include ct.states;
+.source-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/app/src/pages/component-tree.ts b/app/src/pages/component-tree.ts
index 94826039..5c41c1e9 100644
--- a/app/src/pages/component-tree.ts
+++ b/app/src/pages/component-tree.ts
@@ -1,1879 +1,69 @@
 import {
   Component,
   DestroyRef,
-  ElementRef,
-  Injector,
-  afterNextRender,
   computed,
   effect,
   inject,
   input,
-  linkedSignal,
   output,
-  signal,
   untracked,
   viewChild,
 } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
 import type { DevframeRpcClient } from 'devframe/client';
-import { ExtensionBridge, type SourceLocation } from '../extension-bridge';
-import { hostPageId } from '../page-id';
-import { ComponentPipesSection } from './component-pipes-section';
-import {
-  angularVersionAtLeast,
-  lacksCapability,
-} from '@pangular-inspector/devtools/internal/config';
-import { angularPageFor, injectAngularPages } from '../angular-pages';
 import { AngularUnavailable } from '../ui/angular-unavailable';
-import { pickPage } from '../live-pages';
-import { isNativePage } from '../native-page';
-import { isStaticReport } from '../rpc';
-import { Select, type SelectOption } from '../ui/select';
-import {
-  countText,
-  directiveHostLabel,
-  filterAnnouncement,
-  truncationNotice,
-  filterTree,
-  hydrationLabel,
-  nearestRow,
-  reconcileSelection,
-  withoutDirectiveHosts,
-  type HydrationStatus,
-} from './component-tree-state';
-import { HydrationSection, type HydrationReport } from './hydration-section';
-import { CdRecording, type CdPage } from './cd-recording';
+import { Select } from '../ui/select';
+import { SearchField } from '../ui/search-field';
+import { CdRecording } from './cd-recording';
+import { DeferBlocksSection, type DeferBlock } from './defer-blocks-section';
+import { ForBlocksSection, type ForBlock } from './for-blocks-section';
+import { HydrationSection } from './hydration-section';
+import { LeaksSection } from './leaks-section';
 import type { ComponentFocus } from '../types/component-focus.types';
 import type { ComponentCommand } from '../types/component-command.types';
 import type { InjectorFocus } from '../types/injector-focus.types';
 import type { SignalFocus } from '../types/signal-focus.types';
-import { componentJson, hostPathText } from './component-copy';
-import { ValueFlash, flashKey } from './component-value-flash';
-import { SourceLink } from '../ui/source-link';
-import { actionAllowed } from '../devtools-config';
-import { ValueTree } from './component-value-tree';
-import { ValueStore } from './component-value-store';
-import { nestedMatches } from './component-value-state';
-import { StoreGlobal } from '../ui/store-global';
-import { DeferBlocksSection, type DeferBlock } from './defer-blocks-section';
-import { ForBlocksSection, type ForBlock } from './for-blocks-section';
-import { LeaksSection, type LeaksPage } from './leaks-section';
-import { VirtualWindow } from '../ui/virtual-window';
-import { keepBelowSticky, stickyClearance } from '../ui/sticky-clearance';
-import { SearchField } from '../ui/search-field';
-import { RedactionCount } from '../ui/redaction-count';
-
-interface SourceComponent {
-  selector: string;
-  className: string;
-  kind: 'component' | 'directive';
-  file: string;
-  line: number;
-  inputs: string[];
-  outputs: string[];
-  isStandalone: boolean;
-  changeDetection?: 'OnPush' | 'Eager' | 'unknown';
-}
-interface LiveNode {
-  id: string;
-  name: string;
-  tag: string;
-  /** `directive` for an element that hosts directives but no component. */
-  kind?: 'directive';
-  directives?: string[];
-  attributes?: string[];
-  hydration?: HydrationStatus;
-  children: LiveNode[];
-}
-
-interface Prop {
-  name: string;
-  prop: string;
-  value?: unknown;
-  listened?: boolean;
-  kind?: 'signal' | 'resource';
-  edit?: 'property' | 'signal';
-  locked?: string;
-  editInside?: 'property' | 'signal';
-}
-
-interface Dependency {
-  from: string;
-  token: string;
-  flags: string[];
-  providedBy: string | null;
-  providedByName?: string;
-}
-
-interface Detail {
-  id: string;
-  name: string;
-  tag: string;
-  path: string;
-  /** A CSS selector that finds the host with `querySelector`, from a browser page. */
-  selector?: string;
-  source?: SourceLocation;
-  changeDetection?: string;
-  encapsulation?: string;
-  inputs: Prop[];
-  outputs: Prop[];
-  properties?: Prop[];
-  listeners: string[];
-  directives: { name: string; inputs: Prop[]; outputs: Prop[] }[];
-  dependencies: Dependency[];
-  /** Nested value levels opened in the panel, read again on each push. */
-  expanded?: Record<string, unknown>;
-}
-
-interface Page {
-  pageId: string;
-  url?: string;
-  title?: string;
-  platform?: string;
-  deferBlocks?: DeferBlock[];
-  /** The page has more defer blocks than the ones in `deferBlocks`. */
-  deferTruncated?: boolean;
-  forBlocks?: ForBlock[];
-  forBlocksTruncated?: boolean;
-  roots: LiveNode[];
-  count: number;
-  /** Elements in `roots` that host directives but no component. */
-  directiveHostCount?: number;
-  hydration?: HydrationReport;
-  truncated?: boolean;
-  truncatedBy?: { components?: number; depth?: number; directiveHosts?: number };
-  detail: Detail | null;
-  reportedAt: number;
-  /** The server clock minus the page clock, in ms, for ages of page times. */
-  clockOffset?: number;
-}
-
-interface OutletInfo {
-  outlet: string;
-  route?: string;
-  element?: string;
-  devtoolsId?: string;
-  activated: boolean;
-  children?: OutletInfo[];
-}
-
-interface RoutedHit {
-  route: string;
-  outlet: string;
-}
-
-interface PickResult {
-  ok?: boolean;
-  id?: string;
-  name?: string;
-  pageId?: string;
-  error?: string;
-}
-
-interface Row {
-  node: LiveNode;
-  depth: number;
-  hasChildren: boolean;
-  expanded: boolean;
-  /** Position among its siblings, from 1, and how many siblings there are, for screen readers. */
-  posinset: number;
-  setsize: number;
-}
-
-/** Height of a tree row, fixed while the tree renders only the rows in view. */
-const TREE_ROW_PX = 32;
-
-function bare(name: string): string {
-  return name.replace(/^_(?=[A-Z])/, '');
-}
-
-/** True when two paths name the same file, one maybe longer or with `./` or backslashes. */
-function sameSourceFile(a: string, b: string): boolean {
-  const norm = (path: string) => path.replace(/\\/g, '/').replace(/^\.\//, '');
-  const [x, y] = [norm(a), norm(b)];
-  return x === y || x.endsWith('/' + y) || y.endsWith('/' + x);
-}
-
-/** The ids above `id`, nearest first; stops at a repeated id so a bad map cannot loop. */
-export function ancestors(parents: ReadonlyMap<string, string>, id: string): string[] {
-  const out: string[] = [];
-  const seen = new Set([id]);
-  for (let parent = parents.get(id); parent && !seen.has(parent); parent = parents.get(parent)) {
-    seen.add(parent);
-    out.push(parent);
-  }
-  return out;
-}
-
-/** The keys that move a running pick on the page, as the page names them. */
-const PICK_KEY_NAMES: Record<string, string> = {
-  ArrowDown: 'next',
-  ArrowUp: 'previous',
-  ArrowLeft: 'parent',
-  ArrowRight: 'child',
-  Enter: 'pick',
-};
-
-const DIRECTIVE_HOSTS_KEY = 'pangular:components:directive-hosts';
-
-/** Whether this viewer last chose to show directive hosts; shown unless they hid them. */
-function storedDirectiveHosts(): boolean {
-  try {
-    return localStorage.getItem(DIRECTIVE_HOSTS_KEY) !== 'hidden';
-  } catch {
-    return true;
-  }
-}
-
+import type { LiveNode } from './components/component-model';
+import { ComponentDetail } from './components/component-detail';
+import { DetailState } from './components/detail-state';
+import { HostDetail } from './components/host-detail';
+import { PickState } from './components/pick-state';
+import { SourceList } from './components/source-list';
+import { SourceScan } from './components/source-scan';
+import { TreeRows } from './components/tree-rows';
+import { TreeState } from './components/tree-state';
+
+export { ancestors } from './components/component-model';
+
+/**
+ * The Components page: the live component tree with the selected instance's detail and the
+ * page sections under it, or what the source declares when no page reports a tree. The sections
+ * live in `./components/` and share the page's {@link TreeState}, {@link PickState},
+ * {@link SourceScan} and {@link DetailState}; the page keeps the members the app and its tests
+ * read on itself.
+ */
 @Component({
   selector: 'app-component-tree',
   imports: [
     SearchField,
-    RedactionCount,
-    NgTemplateOutlet,
     Select,
     CdRecording,
-    SourceLink,
-    ValueTree,
-    StoreGlobal,
     DeferBlocksSection,
     ForBlocksSection,
     HydrationSection,
     LeaksSection,
     AngularUnavailable,
-    ComponentPipesSection,
+    TreeRows,
+    HostDetail,
+    ComponentDetail,
+    SourceList,
   ],
+  providers: [TreeState, PickState, SourceScan, DetailState],
   host: { '(keydown.escape)': 'cancelPick()', '(keydown)': 'pickKey($event)' },
-  template: `
-    @if (live()) {
-      <p class="intro">
-        Every component instance on the page, in the order Angular rendered them. Hover a row to
-        highlight its host in the page, and select it to read its live inputs, properties, outputs
-        and injected services.
-      </p>
-
-      <div class="toolbar">
-        <app-search-field
-          #filterInput
-          class="search"
-          placeholder="Filter by text, <tag> or [directive]"
-          describedBy="ct-filter-hint"
-          saveKey="components"
-          [value]="filter()"
-          (valueChange)="setFilter($event)"
-        />
-        <span id="ct-filter-hint" class="sr-only">
-          Type plain text, a tag such as &lt;button&gt;, or a directive such as [routerLink].
-          Combine them to narrow the tree.
-        </span>
-        @if (pageOptions().length > 1) {
-          <span class="sr-only" id="ct-page-label">Page</span>
-          <app-select
-            class="page-select"
-            labelledBy="ct-page-label"
-            [options]="pageOptions()"
-            [value]="page()?.pageId ?? null"
-            (valueChange)="selectPage($event)"
-          />
-        }
-        <span class="count">{{ countLabel() }}</span>
-        <div class="tree-actions">
-          @if (page()!.directiveHostCount) {
-            <button
-              type="button"
-              class="tree-action"
-              title="Directive hosts"
-              [attr.aria-pressed]="showDirectiveHosts()"
-              (click)="toggleDirectiveHosts()"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M8 4H5v16h3" />
-                <path d="M16 4h3v16h-3" />
-              </svg>
-              <span class="label">Directive hosts</span>
-            </button>
-          }
-          <button
-            type="button"
-            class="tree-action"
-            title="Expand all"
-            [disabled]="!!filter().trim()"
-            (click)="expandAll()"
-          >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="m7 15 5 5 5-5" />
-              <path d="m7 9 5-5 5 5" />
-            </svg>
-            <span class="label">Expand all</span>
-          </button>
-          <button
-            type="button"
-            class="tree-action"
-            title="Collapse all"
-            [disabled]="!!filter().trim()"
-            (click)="collapseAll()"
-          >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="m7 20 5-5 5 5" />
-              <path d="m7 4 5 5 5-5" />
-            </svg>
-            <span class="label">Collapse all</span>
-          </button>
-          <button
-            type="button"
-            class="pick"
-            [class.on]="picking()"
-            [attr.title]="pickLabel()"
-            (click)="picking() ? cancelPick() : pick()"
-          >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M4 4l6.5 16 2.3-6.7L19.5 11z" />
-            </svg>
-            <span class="label">{{ pickLabel() }}</span>
-          </button>
-        </div>
-      </div>
-      <p class="sr-only" role="status">{{ announcement() }}</p>
-      @if (pickMessage()) {
-        <p class="pick-message">{{ pickMessage() }}</p>
-      }
-      @if (page()!.truncated) {
-        <p class="notice" role="status">{{ truncationText() }}</p>
-      }
-
-      <div class="layout">
-        <div class="tree-col">
-          <h2 class="sr-only">Component tree</h2>
-          @if (!rows().length) {
-            <div class="state compact tree">
-              <p class="state-title">No components match “{{ filter().trim() }}”</p>
-              @if (page()!.truncated) {
-                <p class="state-hint">The filter only searches the components the tree lists.</p>
-              }
-              @if (!showDirectiveHosts() && page()!.directiveHostCount) {
-                <p class="state-hint">Directive hosts are hidden, so they are not searched.</p>
-              }
-              <button type="button" (click)="clearFilter()">Clear filters</button>
-            </div>
-          }
-          @if (rowWindow.enabled()) {
-            <p class="window-note">
-              {{ rows().length }} rows. Rows render as you scroll, so the browser's find only sees
-              the ones near view; the filter above searches them all.
-            </p>
-          }
-          <div
-            #treeEl
-            class="tree"
-            role="tree"
-            aria-label="Component instances"
-            [class.windowed]="rowWindow.enabled()"
-            [style.padding-top.px]="rowWindow.enabled() ? 6 + rowWindow.padTop() : null"
-            [style.padding-bottom.px]="rowWindow.enabled() ? 6 + rowWindow.padBottom() : null"
-            [hidden]="!rows().length"
-            (keydown)="onTreeKey($event)"
-          >
-            @for (shown of shownRows(); track shown.row.node.id) {
-              @let row = shown.row;
-              <div
-                class="row"
-                role="treeitem"
-                [attr.aria-level]="row.depth + 1"
-                [attr.aria-setsize]="row.setsize"
-                [attr.aria-posinset]="row.posinset"
-                [attr.aria-expanded]="row.hasChildren ? row.expanded : null"
-                [attr.aria-selected]="selectedId() === row.node.id"
-                [attr.tabindex]="tabStop() === row.node.id ? 0 : -1"
-                [attr.data-vindex]="shown.index"
-                [attr.data-id]="row.node.id"
-                [class.selected]="selectedId() === row.node.id"
-                [class.dir-host]="row.node.kind === 'directive'"
-                [style.--depth]="row.depth"
-                (click)="select(row.node.id)"
-                (focus)="focusId.set(row.node.id); highlight(row.node.id); showNameTip($event)"
-                (blur)="highlight(null); nameTip.set(null)"
-                (keydown.escape)="nameTip.set(null)"
-                (mouseenter)="highlight(row.node.id)"
-                (mouseleave)="highlight(null)"
-              >
-                @if (row.hasChildren) {
-                  <span
-                    class="twisty"
-                    aria-hidden="true"
-                    [class.open]="row.expanded"
-                    (click)="toggle(row.node.id, $event)"
-                  >
-                    <svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
-                  </span>
-                } @else {
-                  <span class="twisty-space" aria-hidden="true"></span>
-                }
-                @if (row.node.kind === 'directive') {
-                  <span class="tag host-tag mono">&lt;{{ row.node.tag }}&gt;</span>
-                  <span class="host-dirs mono" [attr.title]="row.node.directives?.join(', ')">{{
-                    hostLabel(row.node)
-                  }}</span>
-                  <span class="sr-only">directive host</span>
-                } @else {
-                  <span class="name mono" [attr.title]="row.node.name">{{ row.node.name }}</span>
-                  <span class="tag mono" [attr.title]="'<' + row.node.tag + '>'"
-                    >&lt;{{ row.node.tag }}&gt;</span
-                  >
-                }
-                @if (row.node.hydration; as status) {
-                  <span [class]="'hyd hyd-' + status"
-                    ><span class="sr-only">Hydration: </span>{{ hydrationText(status) }}</span
-                  >
-                }
-                @for (hit of routedById().get(row.node.id) ?? []; track hit.outlet + hit.route) {
-                  <span class="routed">{{ hit.route || '/' }}</span>
-                }
-                @if (cdHosts()[row.node.id]; as checks) {
-                  <span class="checks">
-                    {{ checks
-                    }}<span class="sr-only">
-                      {{ checks === 1 ? 'check' : 'checks' }} while recording</span
-                    >
-                  </span>
-                }
-                @if (row.node.kind !== 'directive' && row.node.directives?.length) {
-                  <span class="dirs" [attr.title]="row.node.directives!.join(', ')">
-                    +{{ row.node.directives!.length }}
-                    <span class="sr-only">
-                      {{ row.node.directives!.length === 1 ? 'directive' : 'directives' }}
-                    </span>
-                  </span>
-                }
-              </div>
-            }
-          </div>
-          @if (nameTip(); as tip) {
-            <div class="name-tip mono" aria-hidden="true" [style.top.px]="tip.top">
-              {{ tip.text }}
-            </div>
-          }
-        </div>
-
-        @if (selectedHost(); as host) {
-          <section class="detail" aria-labelledby="ct-detail-title">
-            <header class="detail-head">
-              <span class="badge">directive host</span>
-              <h2 id="ct-detail-title" class="mono">&lt;{{ host.tag }}&gt;</h2>
-              <span class="mono muted">{{ hostLabel(host) }}</span>
-            </header>
-            <div class="block">
-              <h3>
-                Directives <span class="pill">{{ host.directives?.length ?? 0 }}</span>
-              </h3>
-              <ul class="chips">
-                @for (name of host.directives ?? []; track name + $index) {
-                  <li class="chip mono">
-                    {{ name }}
-                    <ng-container
-                      [ngTemplateOutlet]="directiveSource"
-                      [ngTemplateOutletContext]="{ $implicit: name }"
-                    />
-                  </li>
-                }
-              </ul>
-            </div>
-            <div class="block">
-              <p class="empty-line">
-                This element hosts directives but no component. Their inputs are bound in the
-                template of the component that renders it.
-              </p>
-              @if (ownerOf(host.id); as owner) {
-                <div class="actions owner-action">
-                  <button type="button" (click)="reveal(owner.id, true)">
-                    Show {{ owner.name }}
-                  </button>
-                </div>
-              }
-            </div>
-          </section>
-        } @else if (selectedNode(); as sel) {
-          <section class="detail" aria-labelledby="ct-detail-title">
-            <header class="detail-head">
-              <span class="badge">component</span>
-              <h2 id="ct-detail-title" class="mono">{{ sel.name }}</h2>
-              <span class="mono muted">&lt;{{ sel.tag }}&gt;</span>
-              @if (detail()?.source; as where) {
-                <p class="where mono">
-                  <app-source-link [file]="where.file" [line]="where.line" />
-                </p>
-              } @else {
-                @let guesses = sourceCandidates(sel);
-                @if (guesses.length === 1) {
-                  <p class="where mono guess" [title]="guessTitle">
-                    <span class="likely">Likely</span
-                    ><span class="sr-only">, matched by class name: </span
-                    ><app-source-link [file]="guesses[0].file" [line]="guesses[0].line" />
-                  </p>
-                } @else if (guesses.length > 1) {
-                  <div class="where guess" [title]="guessTitle">
-                    <p class="guess-text">
-                      <span class="likely">Not certain</span>
-                      {{ guesses.length }} source files define {{ bareName(sel.name) }}:
-                    </p>
-                    <ul class="guess-list mono">
-                      @for (guess of guesses; track sourceKey(guess)) {
-                        <li><app-source-link [file]="guess.file" [line]="guess.line" /></li>
-                      }
-                    </ul>
-                  </div>
-                }
-              }
-              @if (devtoolsActions()) {
-                <div class="actions" role="group" aria-label="Chrome DevTools">
-                  <button type="button" (click)="revealInElements(sel)">Reveal in Elements</button>
-                  <button type="button" (click)="openSource(sel)">Open source</button>
-                </div>
-                <p class="where action-message" role="status">{{ actionMessage() }}</p>
-              }
-              @if (sourceFor(sel); as src) {
-                @if (formsIn(src.file).length) {
-                  <div class="actions">
-                    @for (form of formsIn(src.file); track form.formId) {
-                      <button type="button" class="show-form" (click)="showForm.emit(form.formId)">
-                        Show {{ form.label }} in Forms
-                      </button>
-                    }
-                  </div>
-                }
-              }
-              @if ((canShowInjector() || canShowSignals()) && !staticReport()) {
-                <div class="actions">
-                  @if (canShowInjector()) {
-                    <button type="button" (click)="openInjector(sel)">
-                      Show in Injectors
-                      <span class="sr-only">: {{ sel.name }}</span>
-                    </button>
-                  }
-                  @if (canShowSignals()) {
-                    <button type="button" (click)="openSignals(sel)">
-                      Show in Signals
-                      <span class="sr-only">: {{ sel.name }}</span>
-                    </button>
-                  }
-                </div>
-              }
-              @if (detail(); as d) {
-                <div class="actions" role="group" aria-label="Copy">
-                  <button type="button" (click)="copyJson(d)">Copy as JSON</button>
-                  <button type="button" (click)="copyHostPath(d)">Copy host path</button>
-                </div>
-                <p class="where action-message" role="status">{{ copyMessage() }}</p>
-              }
-              @if (!staticReport() && !native()) {
-                <app-store-global
-                  class="console-global"
-                  [rpc]="rpc()"
-                  [pageId]="page()?.pageId"
-                  [target]="{ kind: 'component', id: sel.id }"
-                  [label]="sel.name"
-                />
-              }
-            </header>
-
-            @if (detail(); as d) {
-              <dl class="facts">
-                <dt>Change detection</dt>
-                <dd>{{ d.changeDetection ?? 'Unknown' }}</dd>
-                <dt>Encapsulation</dt>
-                <dd>{{ d.encapsulation ?? 'Unknown' }}</dd>
-                <dt>Host path</dt>
-                <dd class="mono">{{ d.path }}</dd>
-                @for (hit of routedById().get(sel.id) ?? []; track hit.outlet + hit.route) {
-                  <dt>Routed</dt>
-                  <dd class="mono">{{ hit.route || '/' }} in outlet {{ hit.outlet }}</dd>
-                }
-              </dl>
-
-              <div class="prop-filter">
-                <app-search-field
-                  #propFilterInput
-                  class="search"
-                  label="Filter values"
-                  placeholder="Filter inputs, outputs and properties by name"
-                  [(value)]="propFilter"
-                />
-                @if (propQuery()) {
-                  <span class="count">{{ shownValues()?.count ?? 0 }} of {{ valueTotal() }}</span>
-                }
-                <p class="sr-only" role="status">{{ propFilterStatus() }}</p>
-              </div>
-
-              @if (shownValues(); as v) {
-                <app-redaction-count [value]="v" />
-                @if (propQuery() && !v.count) {
-                  <div class="state compact">
-                    <p class="state-title">
-                      No inputs, outputs or properties match “{{ propFilter().trim() }}”
-                    </p>
-                    <p class="state-hint">
-                      The filter searches names, and the nested keys of values you opened.
-                    </p>
-                    <button type="button" (click)="clearPropFilter()">Clear filters</button>
-                  </div>
-                }
-
-                @if (!propQuery() || v.inputs.length) {
-                  <div class="block">
-                    <h3>
-                      Inputs <span class="pill">{{ v.inputs.length }}</span>
-                    </h3>
-                    @if (v.inputs.length) {
-                      <ul class="props">
-                        @for (p of v.inputs; track p.name) {
-                          <li class="prop" [class.changed]="flashed('input', p.name)">
-                            <span class="prop-name mono">
-                              {{ p.name }}
-                              @if (p.prop !== p.name) {
-                                <span class="muted">({{ p.prop }})</span>
-                              }
-                            </span>
-                            <app-value-tree
-                              [prop]="p"
-                              [store]="values"
-                              [query]="propFilter()"
-                              [componentId]="d.id"
-                              [pageId]="page()?.pageId ?? null"
-                              [rpc]="rpc()"
-                              [writes]="canEdit()"
-                            />
-                          </li>
-                        }
-                      </ul>
-                    } @else {
-                      <p class="empty-line">No inputs.</p>
-                    }
-                  </div>
-                }
-
-                @if (!propQuery() || v.outputs.length) {
-                  <div class="block">
-                    <h3>
-                      Outputs <span class="pill">{{ v.outputs.length }}</span>
-                    </h3>
-                    @if (v.outputs.length) {
-                      <ul class="chips">
-                        @for (p of v.outputs; track p.name) {
-                          <li class="chip" [class.on]="p.listened">
-                            <span class="mono">{{ p.name }}</span>
-                            <span class="chip-note">{{
-                              p.listened ? 'listened' : 'no listener'
-                            }}</span>
-                          </li>
-                        }
-                      </ul>
-                    } @else {
-                      <p class="empty-line">No outputs.</p>
-                    }
-                  </div>
-                }
-
-                @if (!propQuery() || v.properties.length) {
-                  <div class="block">
-                    <h3>
-                      Properties <span class="pill">{{ v.properties.length }}</span>
-                    </h3>
-                    @if (v.properties.length) {
-                      <ul class="props">
-                        @for (p of v.properties; track p.name) {
-                          <li class="prop" [class.changed]="flashed('property', p.name)">
-                            <span class="prop-name mono">
-                              {{ p.name }}
-                              @if (p.kind) {
-                                <span class="flag">{{ p.kind }}</span>
-                              }
-                              @if (p.kind === 'signal' && canShowSignals() && !staticReport()) {
-                                <button
-                                  type="button"
-                                  class="signal-link"
-                                  (click)="openSignals(sel, p.prop)"
-                                >
-                                  Show in Signals<span class="sr-only">: {{ p.name }}</span>
-                                </button>
-                              }
-                            </span>
-                            <app-value-tree
-                              [prop]="p"
-                              [store]="values"
-                              [query]="propFilter()"
-                              [componentId]="d.id"
-                              [pageId]="page()?.pageId ?? null"
-                              [rpc]="rpc()"
-                              [writes]="canEdit()"
-                            />
-                          </li>
-                        }
-                      </ul>
-                    } @else {
-                      <p class="empty-line">No other properties.</p>
-                    }
-                  </div>
-                }
-
-                @if (!propQuery() && d.listeners.length) {
-                  <div class="block">
-                    <h3>
-                      DOM listeners <span class="pill">{{ d.listeners.length }}</span>
-                    </h3>
-                    <ul class="chips">
-                      @for (name of d.listeners; track name) {
-                        <li class="chip mono">{{ name }}</li>
-                      }
-                    </ul>
-                  </div>
-                }
-
-                @if (!propQuery() && ownedDeferBlocks().length) {
-                  <div class="block">
-                    <h3>
-                      Defer blocks <span class="pill">{{ ownedDeferBlocks().length }}</span>
-                    </h3>
-                    <ul class="chips">
-                      @for (block of ownedDeferBlocks(); track block.id) {
-                        <li class="chip">
-                          <span class="mono">{{ block.state }}</span>
-                          <span class="chip-note">{{
-                            block.triggers.join(', ') || 'no triggers'
-                          }}</span>
-                        </li>
-                      }
-                    </ul>
-                  </div>
-                }
-
-                @for (dir of v.directives; track dir.name + dir.index) {
-                  <div class="block">
-                    <h3>
-                      <span class="mono">{{ dir.name }}</span>
-                      <span class="flag">directive on host</span>
-                    </h3>
-                    <p class="directive-where mono">
-                      <ng-container
-                        [ngTemplateOutlet]="directiveSource"
-                        [ngTemplateOutletContext]="{ $implicit: dir.name }"
-                      />
-                    </p>
-                    @if (dir.inputs.length) {
-                      <ul class="props">
-                        @for (p of dir.inputs; track p.name) {
-                          <li
-                            class="prop"
-                            [class.changed]="flashed('directive', p.name, dir.index)"
-                          >
-                            <span class="prop-name mono">{{ p.name }}</span>
-                            <app-value-tree
-                              [prop]="p"
-                              [store]="values"
-                              [query]="propFilter()"
-                              [directive]="dir.index"
-                              [componentId]="d.id"
-                              [pageId]="page()?.pageId ?? null"
-                              [rpc]="rpc()"
-                            />
-                          </li>
-                        }
-                      </ul>
-                    }
-                    @if (dir.outputs.length) {
-                      <ul class="chips">
-                        @for (p of dir.outputs; track p.name) {
-                          <li class="chip" [class.on]="p.listened">
-                            <span class="mono">{{ p.name }}</span>
-                            <span class="chip-note">{{
-                              p.listened ? 'listened' : 'no listener'
-                            }}</span>
-                          </li>
-                        }
-                      </ul>
-                    }
-                    @if (!dir.inputs.length && !dir.outputs.length) {
-                      <p class="empty-line">No inputs or outputs.</p>
-                    }
-                  </div>
-                }
-              }
-
-              <div class="block">
-                <h3>
-                  Injected <span class="pill">{{ d.dependencies.length }}</span>
-                </h3>
-                @if (d.dependencies.length) {
-                  <ul class="deps">
-                    @for (dep of d.dependencies; track dep.token + $index) {
-                      <li class="dep">
-                        <span class="token mono">{{ dep.token }}</span>
-                        @for (flag of dep.flags; track flag) {
-                          <span class="flag">{{ flag }}</span>
-                        }
-                        @if (dep.providedBy) {
-                          <span class="from"
-                            >from
-                            <span class="mono">{{
-                              dep.providedByName ?? 'an injector'
-                            }}</span></span
-                          >
-                        } @else {
-                          <span class="from missing">not provided</span>
-                        }
-                      </li>
-                    }
-                  </ul>
-                } @else {
-                  <p class="empty-line">Nothing is injected through the constructor or inject().</p>
-                }
-              </div>
-
-              @if (canShowPipes()) {
-                <app-component-pipes
-                  [rpc]="rpc()"
-                  [pageId]="page()?.pageId"
-                  [component]="bareName(sel.name)"
-                  [canShowPipes]="!staticReport()"
-                  (showPipe)="showPipe.emit({ name: $event, pageId: page()?.pageId })"
-                />
-              }
-            } @else {
-              <div class="state compact" role="status">
-                <span class="spinner" aria-hidden="true"></span>
-                <p class="state-hint">Reading live values from the page…</p>
-              </div>
-            }
-          </section>
-        } @else {
-          <div class="detail placeholder">
-            @if (destroyed(); as name) {
-              <p class="state-title">The selected component was destroyed</p>
-              <p class="state-hint">
-                <span class="mono">{{ name }}</span> is no longer on the page. Select another
-                component to see its live values.
-              </p>
-            } @else {
-              <p class="state-hint">
-                Select a component to see its live inputs, properties, outputs, change detection and
-                injected services.
-              </p>
-            }
-          </div>
-        }
-      </div>
-
-      <app-defer-blocks
-        [blocks]="deferBlocks()"
-        [truncated]="page()?.deferTruncated === true"
-        [clockOffset]="page()?.clockOffset ?? 0"
-        [mismatches]="page()?.hydration?.mismatches ?? []"
-        (showOwner)="showOwner($event)"
-        (showNode)="revealNode($event)"
-        (highlight)="$event ? highlightBlock($event) : highlight(null)"
-      />
-      @if (deferUnavailable()) {
-        <app-angular-unavailable
-          class="defer"
-          [page]="angularPage()"
-          capability="deferBlocks"
-          compact
-        />
-      }
-      @if (!native()) {
-        <app-hydration-section
-          [report]="page()?.hydration"
-          (overlay)="setHydrationOverlay($event)"
-          (showNode)="revealNode($event)"
-          (highlight)="highlight($event)"
-        />
-      }
-      <app-for-blocks
-        [blocks]="page()?.forBlocks"
-        [truncated]="page()?.forBlocksTruncated === true"
-        [supported]="(page()?.deferBlocks && !page()?.forBlocks) || forUnavailable() ? false : null"
-        [angular]="angularPage()"
-        (showOwner)="showForOwner($event)"
-        (highlight)="highlight($event)"
-      />
-      @if (!staticReport()) {
-        <app-cd-recording
-          [page]="cdPage()"
-          [pageId]="page()!.pageId"
-          [rpc]="rpc()"
-          [native]="native()"
-          (showComponent)="showCdComponent($event)"
-        />
-        <app-leaks-section
-          [report]="leaksPage()"
-          [pageId]="page()!.pageId"
-          [rpc]="rpc()"
-          [angular]="angularPage()"
-          (showComponent)="showLeakComponent($event)"
-          (highlight)="highlight($event)"
-        />
-      }
-    } @else {
-      @if (page()) {
-        <p class="notice" role="status">
-          The page reported no component instances. The live tree needs a development build with
-          Angular's debug API. Showing what the source declares instead.
-        </p>
-      } @else if (!pagesKnown()) {
-        <p class="notice" role="status">Loading the live component tree…</p>
-      } @else {
-        <p class="notice">
-          No page is connected, so this lists what the source declares. Open the app in a browser
-          with the devtools connected to see each rendered instance.
-        </p>
-      }
-
-      <div class="toolbar">
-        <app-search-field
-          #filterInput
-          class="search"
-          placeholder="Filter by selector, class or file"
-          saveKey="components-source"
-          [(value)]="filter"
-        />
-        @if (source().length) {
-          <span class="count" aria-live="polite">
-            @if (filter().trim()) {
-              {{ filteredSource().length }} of {{ source().length }}
-            } @else {
-              {{ sourceCounts().components }}
-              {{ sourceCounts().components === 1 ? 'component' : 'components' }} ·
-              {{ sourceCounts().directives }}
-              {{ sourceCounts().directives === 1 ? 'directive' : 'directives' }}
-            }
-          </span>
-        }
-        <button
-          type="button"
-          class="refresh"
-          [class.spinning]="loading()"
-          [attr.aria-busy]="loading()"
-          (click)="refresh()"
-        >
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <path d="M20 12a8 8 0 1 1-2.34-5.66" />
-            <path d="M20 4v5h-5" />
-          </svg>
-          Refresh
-        </button>
-      </div>
-
-      @if (loading() && !source().length) {
-        <div class="state" role="status">
-          <span class="spinner" aria-hidden="true"></span>
-          <p class="state-title">Scanning components…</p>
-        </div>
-      } @else if (error() && !source().length) {
-        <div class="state" role="alert">
-          <p class="state-title">Could not load components</p>
-          <p class="state-hint">
-            @if (staticReport()) {
-              Run <code>pangular build</code> again to rebuild the report.
-            } @else {
-              Check that the dev server is running, then try again.
-            }
-          </p>
-          <button type="button" (click)="refresh()">Retry</button>
-        </div>
-      } @else if (!source().length) {
-        <div class="state">
-          <p class="state-title">No components found</p>
-          <p class="state-hint">No @Component or @Directive was found in the source.</p>
-        </div>
-      } @else if (!filteredSource().length) {
-        <div class="state">
-          <p class="state-title">No components match “{{ filter().trim() }}”</p>
-          <button type="button" (click)="clearFilter()">Clear filters</button>
-        </div>
-      } @else {
-        <ul class="source-list" role="list">
-          @for (comp of filteredSource(); track sourceKey(comp); let i = $index) {
-            <li class="source-item" [class.expanded]="openKey() === sourceKey(comp)">
-              <button
-                type="button"
-                class="source-toggle"
-                [attr.aria-expanded]="openKey() === sourceKey(comp)"
-                [attr.aria-controls]="openKey() === sourceKey(comp) ? 'ct-source-' + i : null"
-                (click)="openKey.set(openKey() === sourceKey(comp) ? null : sourceKey(comp))"
-              >
-                <span class="kind-flag" [class.directive]="comp.kind === 'directive'">{{
-                  comp.kind
-                }}</span>
-                <span class="row-main">
-                  <span class="selector mono">{{ sourceLabel(comp) }}</span>
-                  <span class="file mono">
-                    @if (comp.selector) {
-                      {{ bareName(comp.className) }} ·
-                    }
-                    {{ comp.file }}:{{ comp.line }}
-                  </span>
-                </span>
-                <svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="m9 6 6 6-6 6" />
-                </svg>
-              </button>
-              @if (openKey() === sourceKey(comp)) {
-                <div class="inline-detail" [id]="'ct-source-' + i">
-                  <dl class="facts">
-                    <dt>Class</dt>
-                    <dd class="mono">{{ bareName(comp.className) }}</dd>
-                    <dt>File</dt>
-                    <dd class="mono">
-                      <app-source-link [file]="comp.file" [line]="comp.line" />
-                    </dd>
-                    <dt>Standalone</dt>
-                    <dd>{{ comp.isStandalone ? 'Yes' : 'No' }}</dd>
-                    @if (comp.kind === 'component') {
-                      <dt>Change detection</dt>
-                      <dd>{{ comp.changeDetection ?? 'Unknown' }}</dd>
-                    }
-                    <dt>Inputs</dt>
-                    <dd class="mono">{{ comp.inputs.join(', ') || 'None' }}</dd>
-                    <dt>Outputs</dt>
-                    <dd class="mono">{{ comp.outputs.join(', ') || 'None' }}</dd>
-                  </dl>
-                  @for (form of formsIn(comp.file); track form.formId) {
-                    <button type="button" class="show-form" (click)="showForm.emit(form.formId)">
-                      Show {{ form.label }} in Forms
-                    </button>
-                  }
-                </div>
-              }
-            </li>
-          }
-        </ul>
-      }
-    }
-
-    <!-- A directive's file from the source scan, by class name: the page gives none. -->
-    <ng-template #directiveSource let-name>
-      @let found = directiveSources(name);
-      @if (found.length === 1) {
-        <span class="directive-guess" [title]="guessTitle">
-          <span class="likely">Likely</span><span class="sr-only">, matched by class name: </span
-          ><app-source-link [file]="found[0].file" [line]="found[0].line" />
-        </span>
-      } @else if (found.length > 1) {
-        <span class="chip-note" [title]="guessTitle"
-          >{{ found.length }} source files define {{ bareName(name) }}</span
-        >
-      }
-    </ng-template>
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: block;
-      color: var(--text);
-      font-size: 13px;
-    }
-    .mono {
-      font-family: var(--font-mono);
-    }
-    .muted {
-      color: var(--text-2);
-    }
-    .intro {
-      max-width: 720px;
-      margin: 0 0 12px;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .notice {
-      margin: 0 0 12px;
-      padding: 10px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 12px;
-      margin: 0 0 12px;
-      padding: 8px;
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    .search {
-      position: relative;
-      flex: 1 1 220px;
-      min-width: 0;
-    }
-    .search-icon {
-      position: absolute;
-      top: 50%;
-      left: 12px;
-      width: 14px;
-      height: 14px;
-      transform: translateY(-50%);
-      fill: none;
-      stroke: var(--text-3);
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      pointer-events: none;
-    }
-    .search:focus-within .search-icon {
-      stroke: var(--accent);
-    }
-    input[type='search'] {
-      width: 100%;
-      height: 34px;
-      padding: 0 12px 0 34px;
-      background: var(--bg);
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      color: var(--text);
-      font: inherit;
-      font-size: 13px;
-    }
-    input[type='search']::placeholder {
-      color: var(--text-3);
-    }
-    input[type='search']:focus-visible {
-      @include m.field-focus;
-    }
-    .count {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-      font-variant-numeric: tabular-nums;
-      white-space: nowrap;
-    }
-    button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      height: 34px;
-      padding: 0 14px;
-      background: var(--surface-2);
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      color: var(--text);
-      cursor: pointer;
-      font: inherit;
-      font-size: 13px;
-      font-weight: 500;
-      transition:
-        background-color 150ms var(--ease),
-        border-color 150ms var(--ease);
-    }
-    button:hover {
-      background: var(--surface-3);
-      border-color: var(--accent-line);
-    }
-    button:focus-visible {
-      @include m.focus-ring;
-    }
-    button svg {
-      flex: none;
-      width: 14px;
-      height: 14px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .refresh.spinning svg {
-      animation: spin 0.8s linear infinite;
-    }
-    .page-select {
-      flex: 0 1 220px;
-      min-width: 0;
-    }
-    .tree-action:disabled,
-    .tree-action:disabled:hover {
-      background: var(--surface-2);
-      border-color: var(--border-strong);
-      opacity: 0.5;
-    }
-    .pick.on {
-      background: var(--accent-soft);
-      border-color: var(--accent-line);
-      color: var(--text-strong);
-    }
-    .defer {
-      margin-top: 16px;
-    }
-    .pick-message {
-      margin: 0 0 12px;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .layout {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      gap: 12px;
-      align-items: start;
-    }
-    @media (min-width: 880px) {
-      .layout {
-        grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
-      }
-      .detail {
-        position: sticky;
-        top: 64px;
-        max-height: calc(100vh - 150px);
-        overflow: auto;
-      }
-    }
-    .tree {
-      min-width: 0;
-      padding: 6px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      @include m.enter;
-    }
-    .window-note {
-      margin: 0 0 6px;
-      font-size: 12px;
-      color: var(--text-2);
-    }
-    .tree.windowed .row {
-      height: 32px;
-      overflow: hidden;
-    }
-    .row {
-      position: relative;
-      scroll-margin-top: var(--ct-toolbar-clearance, 72px);
-      scroll-margin-bottom: 8px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      min-height: 32px;
-      padding: 0 8px 0 calc(4px + var(--depth, 0) * 18px);
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      transition: background-color 120ms var(--ease);
-    }
-    .row::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 14px;
-      width: calc(var(--depth, 0) * 18px);
-      background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 18px);
-      pointer-events: none;
-    }
-    .row:hover {
-      background: var(--surface-2);
-    }
-    .row:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .row.selected {
-      background: var(--accent-soft);
-      box-shadow: inset 2px 0 0 var(--accent);
-    }
-    .twisty,
-    .twisty-space {
-      flex: none;
-      width: 20px;
-      height: 20px;
-    }
-    .twisty {
-      display: grid;
-      place-items: center;
-      border-radius: 4px;
-      color: var(--text-3);
-    }
-    .twisty:hover {
-      color: var(--text);
-      background: var(--surface-3);
-    }
-    .twisty svg {
-      width: 14px;
-      height: 14px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      transition: transform 150ms var(--ease);
-    }
-    .twisty.open svg {
-      transform: rotate(90deg);
-    }
-    .name {
-      min-width: 0;
-      color: var(--text-strong);
-      font-size: 12px;
-      font-weight: 600;
-      @include m.truncate;
-    }
-    .tag {
-      flex: 0 1 auto;
-      min-width: 0;
-      color: var(--text-2);
-      font-size: 12px;
-      @include m.truncate;
-    }
-    .routed {
-      flex: none;
-      max-width: 40%;
-      padding: 0 8px;
-      border: 1px solid var(--accent-line);
-      border-radius: 99px;
-      background: var(--accent-soft);
-      color: var(--accent);
-      font-family: var(--font-mono);
-      font-size: 11px;
-      line-height: 18px;
-      @include m.truncate;
-    }
-    .checks {
-      flex: none;
-      margin-left: auto;
-      padding: 0 7px;
-      border-radius: 99px;
-      background: var(--accent-soft);
-      color: var(--text);
-      font-size: 11px;
-      line-height: 18px;
-      font-variant-numeric: tabular-nums;
-    }
-    .checks + .dirs {
-      margin-left: 0;
-    }
-    .row.dir-host .host-tag {
-      color: var(--text);
-    }
-    .host-dirs {
-      min-width: 0;
-      color: var(--text-2);
-      font-size: 12px;
-      font-style: italic;
-      @include m.truncate;
-    }
-    .row.dir-host .twisty-space,
-    .row.dir-host .twisty {
-      border-left: 1px dashed var(--border-strong);
-    }
-    .hyd {
-      flex: none;
-      padding: 0 7px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-      line-height: 18px;
-    }
-    .hyd-skipped {
-      @include m.tint(warn);
-    }
-    .hyd-mismatched {
-      @include m.tint(danger);
-    }
-    .tree-action[aria-pressed='true'] {
-      background: var(--accent-soft);
-      border-color: var(--accent-line);
-      color: var(--text-strong);
-    }
-    /* A narrow panel keeps the search and count on one row and the tree
-       actions on a second one, as icons named by their hidden labels. */
-    .tree-actions {
-      display: contents;
-    }
-    @media (max-width: 600px) {
-      .toolbar {
-        gap: 8px;
-      }
-      .search {
-        flex-basis: 100%;
-      }
-      .toolbar:has(.page-select) .search {
-        flex-basis: 160px;
-      }
-      .page-select {
-        flex: 1 1 120px;
-      }
-      .count {
-        flex: 1 1 80px;
-        min-width: 0;
-        white-space: normal;
-        line-height: 1.3;
-      }
-      .tree-actions {
-        display: flex;
-        flex: none;
-        gap: 8px;
-        margin-left: auto;
-      }
-      .tree-action,
-      .pick {
-        flex: none;
-        width: var(--control-h);
-        padding: 0;
-      }
-      .tree-action .label,
-      .pick .label {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip-path: inset(50%);
-        white-space: nowrap;
-      }
-    }
-    .tree-col {
-      position: relative;
-      min-width: 0;
-    }
-    .name-tip {
-      position: absolute;
-      z-index: 1;
-      left: 8px;
-      max-width: calc(100% - 16px);
-      padding: 4px 8px;
-      background: var(--surface-3);
-      border: 1px solid var(--border-strong);
-      border-radius: var(--radius-sm);
-      box-shadow: var(--shadow);
-      color: var(--text-strong);
-      font-size: 12px;
-      line-height: 1.4;
-      overflow-wrap: anywhere;
-      pointer-events: none;
-      @include m.enter(150ms);
-    }
-    .owner-action {
-      margin-top: 10px;
-    }
-    .dirs {
-      flex: none;
-      margin-left: auto;
-      padding: 0 7px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-      line-height: 18px;
-    }
-    .detail {
-      min-width: 0;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      @include m.enter;
-    }
-    .detail.placeholder {
-      padding: 24px 16px;
-      border-style: dashed;
-      text-align: center;
-    }
-    .detail-head {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px 10px;
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .detail-head h2 {
-      min-width: 0;
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 15px;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-    .where {
-      width: 100%;
-      margin: 0;
-      color: var(--text-2);
-      font-size: 12px;
-      overflow-wrap: anywhere;
-    }
-    .directive-where {
-      margin: -4px 0 8px;
-      font-size: 12px;
-    }
-    .directive-where:empty {
-      display: none;
-    }
-    .directive-guess {
-      display: inline-flex;
-      align-items: center;
-      font-family: var(--font-sans);
-    }
-    .likely {
-      display: inline-block;
-      margin-right: 6px;
-      padding: 0 6px;
-      border: 1px solid;
-      border-radius: 99px;
-      @include m.tint(warn);
-      font-family: var(--font-sans);
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      line-height: 16px;
-      text-transform: uppercase;
-      vertical-align: 1px;
-    }
-    .guess-text {
-      margin: 0;
-    }
-    .guess-list {
-      margin: 4px 0 0;
-      padding-left: 18px;
-    }
-    .badge {
-      padding: 2px 8px;
-      border-radius: 99px;
-      @include m.tint(accent);
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }
-    .actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      width: 100%;
-    }
-    .show-form {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: var(--accent-ink);
-      font-weight: 600;
-    }
-    .show-form:hover {
-      background: var(--accent-hover);
-      border-color: var(--accent-hover);
-    }
-    .facts {
-      display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
-      gap: 8px 16px;
-      margin: 0;
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .facts dt {
-      @include m.label;
-      align-self: center;
-    }
-    .facts dd {
-      min-width: 0;
-      margin: 0;
-      color: var(--text);
-      overflow-wrap: anywhere;
-    }
-    .block {
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .block:last-child {
-      border-bottom: 0;
-    }
-    h3 {
-      @include m.label;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin: 0 0 8px;
-    }
-    .pill {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 18px;
-      height: 16px;
-      padding: 0 5px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 10px;
-      font-weight: 600;
-      letter-spacing: 0;
-    }
-    .props,
-    .deps,
-    .chips {
-      display: grid;
-      gap: 6px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .chips {
-      display: flex;
-      flex-wrap: wrap;
-    }
-    .prop,
-    .dep {
-      min-width: 0;
-      padding: 8px 10px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--bg);
-    }
-    .prop.changed {
-      outline: 2px solid var(--accent);
-      outline-offset: -1px;
-      animation: value-flash 1s var(--ease) forwards;
-    }
-    @keyframes value-flash {
-      from {
-        outline-color: var(--accent);
-      }
-      to {
-        outline-color: transparent;
-      }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .prop.changed {
-        animation: none;
-      }
-    }
-    .signal-link {
-      height: auto;
-      min-height: 0;
-      margin-left: 6px;
-      padding: 0 6px;
-      font-family: inherit;
-      font-size: 11px;
-      font-weight: 500;
-      line-height: 18px;
-    }
-    .signal-link:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .prop-name {
-      display: block;
-      margin-bottom: 4px;
-      color: var(--text-strong);
-      font-size: 12px;
-      font-weight: 600;
-    }
-    pre {
-      max-height: 200px;
-      margin: 0;
-      overflow: auto;
-      color: var(--text);
-      font-family: var(--font-mono);
-      font-size: 12px;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-    }
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 2px 10px;
-      border: 1px solid var(--border-strong);
-      border-radius: 99px;
-      color: var(--text);
-      font-size: 12px;
-    }
-    .chip.on {
-      @include m.tint(ok);
-    }
-    .chip-note {
-      color: var(--text-2);
-      font-size: 11px;
-    }
-    .chip.on .chip-note {
-      color: inherit;
-    }
-    .dep {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px 8px;
-    }
-    .token {
-      min-width: 0;
-      color: var(--text-strong);
-      font-size: 12px;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-    .flag {
-      padding: 0 6px;
-      border: 1px solid var(--border-strong);
-      border-radius: 5px;
-      color: var(--text-2);
-      font-family: var(--font-mono);
-      font-size: 10px;
-      font-weight: 400;
-      letter-spacing: 0;
-      line-height: 16px;
-      text-transform: none;
-    }
-    .from {
-      margin-left: auto;
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .from .mono {
-      color: var(--text);
-    }
-    .from.missing {
-      color: var(--warn);
-    }
-    .empty-line {
-      margin: 0;
-      color: var(--text-2);
-    }
-    .state {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      padding: 40px 16px;
-      text-align: center;
-      background: var(--surface);
-      border: 1px dashed var(--border-strong);
-      border-radius: var(--radius);
-    }
-    .state.compact {
-      padding: 24px 12px;
-      border: 0;
-      background: none;
-    }
-    .state-title {
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 14px;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-    .state-hint {
-      max-width: 440px;
-      margin: 0 auto;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .spinner {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--border-strong);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .spinner,
-      .refresh.spinning svg {
-        animation: none;
-      }
-    }
-    .source-list {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .source-item {
-      min-width: 0;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      overflow: hidden;
-    }
-    .source-item.expanded {
-      border-color: var(--accent-line);
-      box-shadow: inset 2px 0 0 var(--accent);
-    }
-    .source-toggle {
-      justify-content: flex-start;
-      gap: 12px;
-      width: 100%;
-      height: auto;
-      min-height: 52px;
-      padding: 10px 16px;
-      background: none;
-      border: 0;
-      border-radius: 0;
-      text-align: left;
-    }
-    .source-toggle:hover {
-      background: var(--surface-2);
-    }
-    .source-toggle:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .kind-flag {
-      flex: none;
-      padding: 1px 8px;
-      border-radius: 99px;
-      @include m.tint(accent);
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }
-    .kind-flag.directive {
-      @include m.tint(ok);
-    }
-    .row-main {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      gap: 2px;
-      min-width: 0;
-    }
-    .selector {
-      color: var(--text-strong);
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-    .file {
-      color: var(--text-2);
-      font-size: 12px;
-      @include m.truncate;
-    }
-    .chevron {
-      flex: none;
-      width: 16px;
-      height: 16px;
-      fill: none;
-      stroke: var(--text-3);
-      stroke-width: 2.2;
-      transition: transform 200ms var(--ease);
-    }
-    .expanded .chevron {
-      transform: rotate(90deg);
-      stroke: var(--accent);
-    }
-    .inline-detail {
-      padding: 0 0 12px;
-      border-top: 1px solid var(--border);
-    }
-    .inline-detail .facts {
-      border-bottom: 0;
-    }
-    .inline-detail .show-form {
-      margin: 0 16px;
-    }
-  `,
+  templateUrl: './component-tree.html',
+  styleUrl: './component-tree.scss',
 })
 export class ComponentTree {
   readonly rpc = input<DevframeRpcClient | null>(null);
-  readonly staticReport = computed(() => isStaticReport(this.rpc()));
   readonly focus = input<ComponentFocus | null>(null);
   readonly showForm = output<string>();
   readonly focusHandled = output<void>();
@@ -1891,394 +81,92 @@ export class ComponentTree {
   readonly canShowSignals = input(false);
   readonly showSignals = output<SignalFocus>();
 
-  readonly filter = signal('');
-  readonly loading = signal(false);
-  readonly error = signal(false);
-  readonly source = signal<SourceComponent[]>([]);
-  readonly formOwners = signal<{ formId: string; label: string; file: string | null }[]>([]);
-  readonly pages = signal<Record<string, Page>>({});
-  readonly chosenPageId = signal<string | null>(null);
-  readonly selectedId = signal<string | null>(null);
-  readonly destroyed = signal<string | null>(null);
-  readonly announcement = signal('');
-  readonly picking = signal(false);
-  readonly pickMessage = signal('');
-  private pickPageId: string | null = null;
-  private pickSeq = 0;
-  readonly focusId = signal<string | null>(null);
-  /** The full text of the focused row when its name or tag is cut off, shown below the row. */
-  readonly nameTip = signal<{ text: string; top: number } | null>(null);
-  readonly pickLabel = computed(() =>
-    this.picking()
-      ? 'Cancel pick'
-      : this.native()
-        ? 'Pick component on device'
-        : 'Pick component on page',
-  );
-  private readonly bridge = inject(ExtensionBridge);
-  readonly actionMessage = linkedSignal<string | null, string>({
-    source: this.selectedId,
-    computation: () => '',
-  });
-  /** What the last copy did, for the selected component only. */
-  readonly copyMessage = linkedSignal<string | null, string>({
-    source: this.selectedId,
-    computation: () => '',
-  });
-  /** Values of the selected component that changed in the last push, outlined for a second. */
-  private readonly flash = new ValueFlash();
-  readonly collapsed = signal<ReadonlySet<string>>(new Set());
-  /** Elements that host directives but no component show as rows; this viewer can hide them. */
-  readonly showDirectiveHosts = signal(storedDirectiveHosts());
-  readonly openKey = signal<string | null>(null);
-  private readonly routerPages = signal<{ pageId?: string; outlets?: OutletInfo[] }[]>([]);
-  private readonly pageId = hostPageId();
-  private readonly angularPages = injectAngularPages(() => this.rpc());
-  /** The shown page's Angular version and debug API parts, for the unavailable notes. */
-  readonly angularPage = computed(() =>
-    angularPageFor(this.angularPages(), this.page()?.pageId ?? this.pageId),
-  );
-  /** `@defer` and `@for` exist from Angular 17.0, so older pages get no note about them. */
-  private readonly hasControlFlow = computed(() => {
-    const version = this.angularPage()?.version;
-    return !version || angularVersionAtLeast(version, '17.0');
-  });
-  readonly deferUnavailable = computed(
-    () => this.hasControlFlow() && lacksCapability(this.angularPage(), 'deferBlocks'),
-  );
-  readonly forUnavailable = computed(
-    () => this.hasControlFlow() && lacksCapability(this.angularPage(), 'forBlocks'),
-  );
+  private readonly state = inject(TreeState);
+  private readonly picker = inject(PickState);
+  private readonly scan = inject(SourceScan);
+  private readonly details = inject(DetailState);
   private readonly destroyRef = inject(DestroyRef);
-  private readonly injector = inject(Injector);
-  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
   private readonly filterInput = viewChild<SearchField>('filterInput');
   private readonly cdRecording = viewChild(CdRecording);
-  /** Whether the server sent the component tree state yet, so an empty one means no page. */
-  protected readonly pagesKnown = signal(false);
-  private readonly cleanups: (() => void)[] = [];
-  private selection = { pageId: null as string | null, detailId: null as string | null };
-
-  private readonly shownPageId = linkedSignal<
-    { pages: Record<string, Page>; chosen: string | null },
-    string | null
-  >({
-    source: () => ({ pages: this.pages(), chosen: this.chosenPageId() }),
-    computation: ({ pages, chosen }, previous) =>
-      pickPage(pages, { chosen, host: this.pageId, previous: previous?.value ?? null }),
-  });
-
-  readonly page = computed<Page | null>(() => {
-    const id = this.shownPageId();
-    return id ? (this.pages()[id] ?? null) : null;
-  });
-
-  readonly pageOptions = computed<SelectOption[]>(() =>
-    Object.values(this.pages()).map((page) => ({
-      value: page.pageId,
-      label: page.title || page.url || `Page ${page.pageId}`,
-      hint: page.url,
-    })),
-  );
-
-  readonly live = computed(() => (this.page()?.roots.length ?? 0) > 0);
-  readonly native = computed(() => isNativePage(this.page()));
-  /** Inputs, properties and writable signals are editable on a live browser page. */
-  readonly canEdit = computed(
-    () =>
-      this.live() &&
-      !this.native() &&
-      !this.staticReport() &&
-      actionAllowed(this.rpc(), 'components'),
-  );
-  readonly devtoolsActions = computed(
-    () => this.bridge.available && !!this.page() && !this.native() && !this.staticReport(),
-  );
-
-  private readonly cdPages = signal<Record<string, CdPage>>({});
-  readonly cdPage = computed(() => {
-    const pageId = this.page()?.pageId;
-    return pageId ? (this.cdPages()[pageId] ?? null) : null;
-  });
-  readonly cdHosts = computed(() => this.cdPage()?.hosts ?? {});
 
-  private readonly leaksPages = signal<Record<string, LeaksPage>>({});
-  /** The shown page's leak report, from the `leaks` shared state. */
-  readonly leaksPage = computed(() => {
-    const pageId = this.page()?.pageId;
-    return pageId ? (this.leaksPages()[pageId] ?? null) : null;
-  });
-
-  /** The page's tree, without directive hosts when this viewer hid them. */
-  private readonly visibleRoots = computed(() => {
-    const roots = this.page()?.roots ?? [];
-    return this.showDirectiveHosts() || !this.page()?.directiveHostCount
-      ? roots
-      : withoutDirectiveHosts(roots);
-  });
-
-  private readonly index = computed(() => {
-    const map = new Map<string, LiveNode>();
-    const parents = new Map<string, string>();
-    const walk = (nodes: LiveNode[], parent: string | null) => {
-      for (const node of nodes) {
-        // The first row with an id wins, so `parents` can never loop.
-        if (map.has(node.id)) continue;
-        map.set(node.id, node);
-        if (parent) parents.set(node.id, parent);
-        walk(node.children, node.id);
-      }
-    };
-    walk(this.visibleRoots(), null);
-    return { map, parents };
-  });
-
-  private readonly query = computed(() => this.filter().trim().toLowerCase());
-
-  private readonly filtered = computed(() => filterTree(this.visibleRoots(), this.query()));
-
-  /** Directive host rows in the tree as shown. */
-  private readonly shownDirectiveHosts = computed(() =>
-    this.showDirectiveHosts() ? (this.page()?.directiveHostCount ?? 0) : 0,
-  );
-
-  readonly deferBlocks = computed(() => this.page()?.deferBlocks ?? []);
-  /** The defer blocks in the selected component's template. */
-  readonly ownedDeferBlocks = computed(() => {
-    const id = this.selectedId();
-    return id ? this.deferBlocks().filter((block) => block.owner?.id === id) : [];
-  });
-
-  readonly countLabel = computed(() =>
-    countText(
-      this.page()?.count ?? 0,
-      this.filtered().matches,
-      !!this.query(),
-      !!this.page()?.truncated,
-      this.shownDirectiveHosts(),
-    ),
-  );
-
-  readonly truncationText = computed(() => truncationNotice(this.page()?.truncatedBy));
-
-  readonly rows = computed<Row[]>(() => {
-    const rows: Row[] = [];
-    const collapsed = this.collapsed();
-    const searching = !!this.query();
-    const walk = (nodes: LiveNode[], depth: number) => {
-      nodes.forEach((node, i) => {
-        const expanded = searching || !collapsed.has(node.id);
-        rows.push({
-          node,
-          depth,
-          hasChildren: node.children.length > 0,
-          expanded,
-          posinset: i + 1,
-          setsize: nodes.length,
-        });
-        if (expanded) walk(node.children, depth + 1);
-      });
-    };
-    walk(this.filtered().nodes, 0);
-    return rows;
-  });
-
-  /** A long tree renders only the rows near the visible part of the page. */
-  readonly rowWindow = new VirtualWindow({
-    count: computed(() => this.rows().length),
-    estimate: TREE_ROW_PX,
-    fixed: true,
-  });
-  readonly shownRows = computed(() => {
-    const { start, end } = this.rowWindow.range();
-    return this.rows()
-      .slice(start, end)
-      .map((row, i) => ({ row, index: start + i }));
-  });
-  /** The row Tab lands on: the roving one, or the first rendered row when it is out of view. */
-  readonly tabStop = computed(() => {
-    const id = this.rovingId();
-    const shown = this.shownRows();
-    return shown.some(({ row }) => row.node.id === id) ? id : (shown[0]?.row.node.id ?? null);
-  });
-  private readonly treeEl = viewChild<ElementRef<HTMLElement>>('treeEl');
-
-  readonly selectedNode = computed(() => {
-    const id = this.selectedId();
-    return id ? (this.index().map.get(id) ?? null) : null;
-  });
-
-  /** The selected row when it is a directive host, which has no component detail. */
-  readonly selectedHost = computed(() => {
-    const node = this.selectedNode();
-    return node?.kind === 'directive' ? node : null;
-  });
-
-  readonly detail = computed(() => {
-    const detail = this.page()?.detail;
-    return detail && detail.id === this.selectedId() ? detail : null;
-  });
-
-  /** Opened value levels of the selected component. */
-  readonly values = new ValueStore();
-  /** The detail's filter over input, output and property names and opened nested keys. */
-  readonly propFilter = signal('');
-  readonly propQuery = computed(() => this.propFilter().trim().toLowerCase());
-  private readonly propFilterInput = viewChild<SearchField>('propFilterInput');
-
-  /** Inputs, outputs, properties and directive inputs the filter keeps, and how many. */
-  readonly shownValues = computed(() => {
-    const d = this.detail();
-    if (!d) return null;
-    const query = this.propQuery();
-    const named = (p: Prop) =>
-      !query || p.name.toLowerCase().includes(query) || p.prop.toLowerCase().includes(query);
-    const kept = (p: Prop, directive?: number) =>
-      named(p) ||
-      nestedMatches([p.prop], p.value, (path) => this.values.level(path, directive), query, 1)
-        .length > 0;
-    const inputs = d.inputs.filter((p) => kept(p));
-    const outputs = d.outputs.filter(named);
-    const properties = (d.properties ?? []).filter((p) => kept(p));
-    const directives = d.directives
-      .map((dir, index) => ({
-        ...dir,
-        index,
-        inputs: dir.inputs.filter((p) => kept(p, index)),
-        outputs: dir.outputs.filter(named),
-      }))
-      .filter((dir) => !query || dir.inputs.length || dir.outputs.length);
-    const count =
-      inputs.length +
-      outputs.length +
-      properties.length +
-      directives.reduce((n, dir) => n + dir.inputs.length + dir.outputs.length, 0);
-    return { inputs, outputs, properties, directives, count };
-  });
-
-  readonly valueTotal = computed(() => {
-    const d = this.detail();
-    if (!d) return 0;
-    return (
-      d.inputs.length +
-      d.outputs.length +
-      (d.properties?.length ?? 0) +
-      d.directives.reduce((n, dir) => n + dir.inputs.length + dir.outputs.length, 0)
-    );
-  });
-
-  readonly propFilterStatus = computed(() => {
-    if (!this.propQuery()) return '';
-    const count = this.shownValues()?.count ?? 0;
-    return count
-      ? `${count} of ${this.valueTotal()} values match.`
-      : 'No inputs, outputs or properties match.';
-  });
-
-  /** Clears the detail filter and keeps focus in its field. */
-  clearPropFilter(event?: Event) {
-    if (event && this.propFilter()) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    this.propFilter.set('');
-    this.propFilterInput()?.focus();
-  }
-
-  readonly rovingId = computed(() => {
-    const rows = this.rows();
-    const ids = new Set(rows.map((r) => r.node.id));
-    const focus = this.focusId();
-    if (focus && ids.has(focus)) return focus;
-    const selected = this.selectedId();
-    if (selected && ids.has(selected)) return selected;
-    return rows[0]?.node.id ?? null;
-  });
-
-  private readonly outlets = computed<OutletInfo[]>(() => {
-    const shown = this.page()?.pageId;
-    return this.routerPages().find((p) => p.pageId === shown)?.outlets ?? [];
-  });
-
-  readonly routedById = computed(() => {
-    const map = new Map<string, RoutedHit[]>();
-    const visit = (outlets: OutletInfo[]) => {
-      for (const outlet of outlets) {
-        if (outlet.activated && outlet.devtoolsId) {
-          const hits = map.get(outlet.devtoolsId) ?? [];
-          hits.push({ route: outlet.route ?? '', outlet: outlet.outlet });
-          map.set(outlet.devtoolsId, hits);
-        }
-        if (outlet.children) visit(outlet.children);
-      }
-    };
-    visit(this.outlets());
-    return map;
-  });
-
-  private readonly sourceByClass = computed(() => {
-    const map = new Map<string, SourceComponent[]>();
-    for (const comp of this.source()) {
-      const key = bare(comp.className);
-      map.set(key, [...(map.get(key) ?? []), comp]);
-    }
-    return map;
-  });
-
-  readonly filteredSource = computed(() => {
-    const q = this.query();
-    const all = this.source();
-    if (!q) return all;
-    return all.filter(
-      (c) =>
-        c.selector.toLowerCase().includes(q) ||
-        c.className.toLowerCase().includes(q) ||
-        c.file.toLowerCase().includes(q),
-    );
-  });
-
-  readonly sourceCounts = computed(() => {
-    const components = this.source().filter((c) => c.kind === 'component').length;
-    return { components, directives: this.source().length - components };
-  });
+  readonly staticReport = computed(() => this.state.staticReport());
+  readonly filter = this.state.filter;
+  readonly pages = this.state.pages;
+  readonly chosenPageId = this.state.chosenPageId;
+  readonly selectedId = this.state.selectedId;
+  readonly destroyed = this.state.destroyed;
+  readonly announcement = this.state.announcement;
+  readonly pickMessage = this.state.pickMessage;
+  readonly focusId = this.state.focusId;
+  readonly collapsed = this.state.collapsed;
+  readonly showDirectiveHosts = this.state.showDirectiveHosts;
+  protected readonly pagesKnown = this.state.pagesKnown;
+  readonly angularPage = this.state.angularPage;
+  readonly deferUnavailable = this.state.deferUnavailable;
+  readonly forUnavailable = this.state.forUnavailable;
+  readonly page = this.state.page;
+  readonly pageOptions = this.state.pageOptions;
+  readonly live = this.state.live;
+  readonly native = this.state.native;
+  readonly canEdit = this.state.canEdit;
+  readonly cdPage = this.state.cdPage;
+  readonly cdHosts = this.state.cdHosts;
+  readonly leaksPage = this.state.leaksPage;
+  readonly deferBlocks = this.state.deferBlocks;
+  readonly ownedDeferBlocks = this.state.ownedDeferBlocks;
+  readonly countLabel = this.state.countLabel;
+  readonly truncationText = this.state.truncationText;
+  readonly rows = this.state.rows;
+  readonly rowWindow = this.state.rowWindow;
+  readonly shownRows = this.state.shownRows;
+  readonly tabStop = this.state.tabStop;
+  readonly selectedNode = this.state.selectedNode;
+  readonly selectedHost = this.state.selectedHost;
+  readonly detail = this.state.detail;
+  readonly rovingId = this.state.rovingId;
+  readonly routedById = this.state.routedById;
+
+  readonly picking = this.picker.picking;
+  readonly pickLabel = this.picker.pickLabel;
+
+  readonly loading = this.scan.loading;
+  readonly error = this.scan.error;
+  readonly source = this.scan.source;
+  readonly formOwners = this.scan.formOwners;
+  readonly openKey = this.scan.openKey;
+  readonly filteredSource = this.scan.filteredSource;
+  readonly sourceCounts = this.scan.sourceCounts;
+
+  readonly values = this.details.values;
+  readonly propFilter = this.details.propFilter;
+  readonly propQuery = this.details.propQuery;
+  readonly shownValues = this.details.shownValues;
+  readonly valueTotal = this.details.valueTotal;
+  readonly propFilterStatus = this.details.propFilterStatus;
+  readonly actionMessage = this.details.actionMessage;
+  readonly copyMessage = this.details.copyMessage;
+  readonly devtoolsActions = this.details.devtoolsActions;
 
   constructor() {
-    effect(() => {
-      const tree = this.treeEl()?.nativeElement;
-      if (tree) this.rowWindow.attach(tree);
-    });
-    effect(() => {
-      const detail = this.detail();
-      const target = {
-        rpc: this.rpc(),
-        pageId: this.page()?.pageId ?? null,
-        componentId: detail?.id ?? null,
-      };
-      untracked(() => this.values.follow(target, detail?.expanded));
+    const state = this.state;
+    state.connect({
+      rpc: this.rpc,
+      canShowInjector: this.canShowInjector,
+      canShowSignals: this.canShowSignals,
+      canShowPipes: this.canShowPipes,
     });
+    effect(() => this.details.followValues());
     effect(() => {
       const shown = this.page()?.pageId ?? null;
-      untracked(() => {
-        if (this.picking() && shown !== this.pickPageId) this.dropPick();
-      });
+      untracked(() => this.picker.followPage(shown));
     });
-    effect(() => {
-      const detail = this.detail();
-      const owner = detail ? `${this.page()?.pageId ?? ''}|${detail.id}` : null;
-      const values = new Map<string, unknown>();
-      for (const p of detail?.inputs ?? []) values.set(flashKey('input', p.name), p.value);
-      for (const p of detail?.properties ?? []) values.set(flashKey('property', p.name), p.value);
-      detail?.directives.forEach((dir, index) => {
-        for (const p of dir.inputs) values.set(flashKey('directive', p.name, index), p.value);
-      });
-      untracked(() => this.flash.update(owner, values));
-    });
-    this.destroyRef.onDestroy(() => this.flash.clear());
+    effect(() => this.details.trackChanges());
+    this.destroyRef.onDestroy(() => this.details.clearChanges());
     effect(() => {
       const client = this.rpc();
       if (!client) return;
       void this.refresh();
-      void this.watch(client);
+      void state.watch(client);
     });
     effect(() => {
       const focus = this.focus();
@@ -2292,7 +180,7 @@ export class ComponentTree {
       if (!this.live()) return;
       untracked(() => {
         const onPage = !focus.pageId || shown === focus.pageId;
-        if (onPage && this.index().map.has(focus.id)) this.reveal(focus.id);
+        if (onPage && state.index().map.has(focus.id)) this.reveal(focus.id);
         else this.announcement.set('That component is no longer on the page.');
         this.focusHandled.emit();
       });
@@ -2316,7 +204,7 @@ export class ComponentTree {
       if (!recording) {
         if (this.native() || this.staticReport()) {
           untracked(() => {
-            this.say('This page cannot record change detection.');
+            state.say('This page cannot record change detection.');
             this.commandHandled.emit();
           });
         }
@@ -2328,283 +216,19 @@ export class ComponentTree {
         this.commandHandled.emit();
       });
     });
-    this.destroyRef.onDestroy(() => {
-      this.highlight(null);
-      for (const cleanup of this.cleanups.splice(0)) cleanup();
-    });
-  }
-
-  private async watch(client: DevframeRpcClient) {
-    for (const cleanup of this.cleanups.splice(0)) cleanup();
-    const my = client.scope('pangular');
-    try {
-      const tree = await my.rpc.sharedState('component-tree');
-      if (this.destroyRef.destroyed) return;
-      const applyTree = (value: unknown) => {
-        const pages = (value as { pages?: Record<string, Page> } | null)?.pages;
-        this.applyPages(pages && typeof pages === 'object' ? pages : {});
-        // A state the client hasn't loaded from the server yet says nothing.
-        if (value !== undefined) this.pagesKnown.set(true);
-      };
-      applyTree(tree.value());
-      this.cleanups.push(tree.on('updated', applyTree));
-    } catch {
-      this.applyPages({});
-      this.pagesKnown.set(true);
-    }
-    try {
-      const cd = await my.rpc.sharedState('change-detection');
-      if (this.destroyRef.destroyed) return;
-      const applyCd = (value: unknown) => {
-        const pages = (value as { pages?: Record<string, CdPage> } | null)?.pages;
-        this.cdPages.set(pages && typeof pages === 'object' ? pages : {});
-      };
-      applyCd(cd.value());
-      this.cleanups.push(cd.on('updated', applyCd));
-    } catch {
-      this.cdPages.set({});
-    }
-    try {
-      const leaks = await my.rpc.sharedState('leaks');
-      if (this.destroyRef.destroyed) return;
-      const applyLeaks = (value: unknown) => {
-        const pages = (value as { pages?: Record<string, LeaksPage> } | null)?.pages;
-        this.leaksPages.set(pages && typeof pages === 'object' ? pages : {});
-      };
-      applyLeaks(leaks.value());
-      this.cleanups.push(leaks.on('updated', applyLeaks));
-    } catch {
-      this.leaksPages.set({});
-    }
-    try {
-      const router = await my.rpc.sharedState('router');
-      if (this.destroyRef.destroyed) return;
-      const applyRouter = (value: unknown) => {
-        const pages = (value as { pages?: { pageId?: string; outlets?: OutletInfo[] }[] })?.pages;
-        this.routerPages.set(Array.isArray(pages) ? pages : []);
-      };
-      applyRouter(router.value());
-      this.cleanups.push(router.on('updated', applyRouter));
-    } catch {
-      this.routerPages.set([]);
-    }
-  }
-
-  async refresh() {
-    const client = this.rpc();
-    if (!client) return;
-    this.loading.set(true);
-    const my = client.scope('pangular');
-    try {
-      this.source.set((await my.rpc.call('get-components')) as SourceComponent[]);
-      this.error.set(false);
-    } catch {
-      this.error.set(true);
-    } finally {
-      this.loading.set(false);
-    }
-    const owners = (await my.rpc.call('forms-owners').catch(() => [])) as {
-      formId: string;
-      label: string;
-      file: string | null;
-    }[];
-    this.formOwners.set(owners ?? []);
+    this.destroyRef.onDestroy(() => state.destroy());
   }
 
-  formsIn(file: string) {
-    return this.formOwners().filter((form) => form.file === file);
-  }
-
-  /**
-   * The exact location the page gives, else the source scan's guess when only one class may be
-   * it. Several candidates give null, so Open source falls back to the class itself.
-   */
-  whereOf(node: LiveNode): SourceLocation | null {
-    const exact = this.detail()?.source;
-    if (exact) return exact;
-    const candidates = this.sourceCandidates(node);
-    return candidates.length === 1 ? candidates[0] : null;
-  }
-
-  async revealInElements(node: LiveNode) {
-    const pageId = this.page()?.pageId;
-    if (!pageId) return;
-    this.actionMessage.set('');
-    const result = await this.bridge.reveal(pageId, node.id);
-    if (this.selectedId() !== node.id) return;
-    this.actionMessage.set(
-      result.ok
-        ? ''
-        : 'Could not reveal it. The component must be rendered in the tab these DevTools inspect.',
-    );
-  }
-
-  /** Whether a value of the detail changed in the last push, so it shows an outline. */
-  flashed(section: 'input' | 'property' | 'directive', name: string, index?: number): boolean {
-    return this.flash.changed().has(flashKey(section, name, index));
-  }
-
-  /** Opens the Signals tab on this component's graph, with the signal in `key` selected. */
-  openSignals(node: LiveNode, key?: string) {
-    const pageId = this.page()?.pageId;
-    this.showSignals.emit({
-      componentId: node.id,
-      ...(pageId ? { pageId } : {}),
-      ...(key ? { key } : {}),
-    });
-  }
-
-  /** Copies only what the panel holds, which the page serialized and masked already. */
-  async copyJson(detail: Detail) {
-    await this.copy(detail.id, componentJson(detail), `Copied ${detail.name} as JSON.`);
-  }
-
-  async copyHostPath(detail: Detail) {
-    await this.copy(
-      detail.id,
-      hostPathText(detail),
-      detail.selector ? 'Copied the host selector.' : 'Copied the host path.',
-    );
-  }
-
-  private async copy(id: string, text: string, done: string) {
-    let message = done;
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch {
-      message = 'The clipboard is not available here.';
-    }
-    if (this.selectedId() === id) this.copyMessage.set(message);
-  }
-
-  /** Opens the Injectors tab on this component's element injector. */
-  openInjector(node: LiveNode) {
-    const pageId = this.page()?.pageId;
-    this.showInjector.emit(pageId ? { componentId: node.id, pageId } : { componentId: node.id });
-  }
-
-  async openSource(node: LiveNode) {
-    const pageId = this.page()?.pageId;
-    if (!pageId) return;
-    const where = this.whereOf(node);
-    this.actionMessage.set('');
-    const result = await this.bridge.openSource(pageId, node.id, where);
-    if (this.selectedId() !== node.id) return;
-    if (result.ok) return;
-    this.actionMessage.set(
-      where
-        ? `Not found in Sources. Open ${where.file}:${where.line} in your editor.`
-        : 'Could not open the source. The component must be rendered in the tab these DevTools inspect.',
-    );
-  }
-
-  /** Why a location from the source scan is marked as a guess. */
-  protected readonly guessTitle =
-    'The page gave no exact location. This comes from the source scan, matched by class name.';
-
-  /**
-   * The source scan components that may define this instance, for when the page gives no exact
-   * location: the classes with its name, narrowed to those whose selector is its host tag when
-   * any is. More than one means the scan cannot tell which file it is.
-   */
-  sourceCandidates(node: LiveNode): SourceComponent[] {
-    const matches = (this.sourceByClass().get(bare(node.name)) ?? []).filter(
-      (c) => c.kind === 'component',
-    );
-    const bySelector = matches.filter((c) => c.selector === node.tag);
-    return bySelector.length ? bySelector : matches;
-  }
-
-  /**
-   * The source scan entry of this instance: the one in the file the page names, or the only
-   * candidate. Null when none matches or several may be it.
-   */
-  sourceFor(node: LiveNode): SourceComponent | null {
-    const candidates = this.sourceCandidates(node);
-    const exact = this.detail()?.source;
-    if (exact) return candidates.find((c) => sameSourceFile(c.file, exact.file)) ?? null;
-    return candidates.length === 1 ? candidates[0] : null;
-  }
-
-  /**
-   * The source scan directives a directive on the page may be, by class name. Angular gives
-   * directives no debug location, so a match is only likely.
-   */
-  directiveSources(name: string): SourceComponent[] {
-    return (this.sourceByClass().get(bare(name)) ?? []).filter((c) => c.kind === 'directive');
-  }
-
-  sourceKey(comp: SourceComponent) {
-    return `${comp.file}#${comp.className}`;
-  }
-
-  sourceLabel(comp: SourceComponent) {
-    if (!comp.selector) return bare(comp.className);
-    return comp.kind === 'component' && /^[a-z][\w-]*$/i.test(comp.selector)
-      ? `<${comp.selector}>`
-      : comp.selector;
-  }
-
-  bareName(name: string) {
-    return bare(name);
-  }
-
-  private applyPages(pages: Record<string, Page>) {
-    const active = document.activeElement;
-    const focused =
-      active instanceof HTMLElement && this.host.nativeElement.contains(active)
-        ? (active.closest<HTMLElement>('.row')?.dataset['id'] ?? null)
-        : null;
-    const before = focused ? this.rows().map((row) => row.node.id) : [];
-    const known = this.index().map;
-    this.pages.set(pages);
-    this.syncSelection(known);
-    if (!focused) return;
-    const after = new Set(this.rows().map((row) => row.node.id));
-    if (after.has(focused)) return;
-    const next = nearestRow(before, after, focused);
-    if (!next) return;
-    this.focusId.set(next);
-    afterNextRender(() => this.rowElement(next)?.focus(), { injector: this.injector });
-  }
-
-  private syncSelection(known = this.index().map) {
-    const page = this.page();
-    const next = reconcileSelection(
-      { ...this.selection, selectedId: this.selectedId() },
-      page
-        ? { pageId: page.pageId, roots: page.roots, detail: page.detail, truncated: page.truncated }
-        : null,
-    );
-    const name = next.destroyed ? known.get(next.destroyed)?.name : undefined;
-    this.selection = { pageId: next.pageId, detailId: next.detailId };
-    if (next.selectedId !== this.selectedId()) this.selectedId.set(next.selectedId);
-    if (next.selectedId) this.destroyed.set(null);
-    if (!next.destroyed) return;
-    this.destroyed.set(name ?? 'The component');
-    this.announcement.set('The selected component was destroyed.');
-    this.sendSelection(null);
+  refresh() {
+    return this.scan.refresh();
   }
 
   selectPage(pageId: string | null) {
-    if (!pageId) return;
-    this.chosenPageId.set(pageId);
-    this.destroyed.set(null);
-    this.syncSelection();
+    this.state.selectPage(pageId);
   }
 
   setFilter(value: string) {
-    this.filter.set(value);
-    const { matches } = this.filtered();
-    this.announcement.set(
-      filterAnnouncement(
-        this.page()?.count ?? 0,
-        matches,
-        value,
-        !!this.page()?.truncated,
-        this.shownDirectiveHosts(),
-      ),
-    );
+    this.state.setFilter(value);
   }
 
   /** Clears the filter from the no-match state and keeps focus on the search box. */
@@ -2614,288 +238,68 @@ export class ComponentTree {
     this.filterInput()?.focus();
   }
 
-  async pick() {
-    const client = this.rpc();
-    if (!client || this.picking()) return;
-    const seq = ++this.pickSeq;
-    this.pickPageId = this.page()?.pageId ?? null;
-    this.picking.set(true);
-    this.say(
-      this.native()
-        ? 'Tap a component on the device, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.'
-        : 'Click a component in the app, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.',
-    );
-    const result = (await client
-      .scope('pangular')
-      .rpc.call('request-component-pick', { pageId: this.pickPageId ?? undefined })
-      .catch(() => ({ ok: false, error: 'Could not reach the devtools server.' }))) as PickResult;
-    if (seq !== this.pickSeq) return;
-    this.picking.set(false);
-    if (!result?.ok || !result.id) {
-      this.say(result?.error ?? 'No component was picked.');
-      return;
-    }
-    if (result.pageId && result.pageId !== this.page()?.pageId) this.selectPage(result.pageId);
-    this.say(`Picked ${result.name ?? 'a component'}.`);
-    this.destroyed.set(null);
-    if (this.index().map.has(result.id)) this.reveal(result.id);
-    else this.selectedId.set(result.id);
+  pick() {
+    return this.picker.pick();
   }
 
-  /**
-   * Moves a running pick with the keyboard: down and up go through the components in page
-   * order, left to the one around, right to the first one inside, and Enter picks.
-   */
   pickKey(event: KeyboardEvent) {
-    const key = PICK_KEY_NAMES[event.key];
-    if (!this.picking() || !key || event.altKey || event.ctrlKey || event.metaKey) return;
-    // Enter would press the focused button, which cancels the pick.
-    event.preventDefault();
-    const client = this.rpc();
-    if (!client) return;
-    const seq = this.pickSeq;
-    void client
-      .scope('pangular')
-      .rpc.call('request-component-pick-move', { pageId: this.pickPageId ?? undefined, key })
-      .then((answer) => {
-        const result = answer as { moved?: boolean; name?: string; tag?: string; error?: string };
-        if (seq !== this.pickSeq || !this.picking() || key === 'pick') return;
-        this.say(
-          result?.moved
-            ? `${result.name ?? 'Component'} <${result.tag ?? ''}>. Press Enter to pick it.`
-            : (result?.error ?? 'The page did not move.'),
-        );
-      })
-      .catch(() => {});
+    this.picker.pickKey(event);
   }
 
   cancelPick() {
-    const client = this.rpc();
-    if (!client || !this.picking()) return;
-    void client
-      .scope('pangular')
-      .rpc.call('cancel-component-pick', { pageId: this.pickPageId ?? undefined })
-      .catch(() => {});
-  }
-
-  private dropPick() {
-    this.cancelPick();
-    this.pickSeq++;
-    this.picking.set(false);
-    this.say('Picking stopped because the page changed.');
-  }
-
-  private say(message: string) {
-    this.pickMessage.set(message);
-    this.announce(message);
-  }
-
-  private sendSelection(id: string | null) {
-    const client = this.rpc();
-    if (!client) return;
-    void client
-      .scope('pangular')
-      .rpc.call('select-component', { pageId: this.page()?.pageId, id, console: true })
-      .catch(() => {});
-  }
-
-  private rowElement(id: string) {
-    return this.host.nativeElement.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
+    this.picker.cancelPick();
   }
 
   select(id: string) {
-    const next = this.selectedId() === id ? null : id;
-    this.selectedId.set(next);
-    this.destroyed.set(null);
-    this.focusId.set(id);
-    // A directive host has no component detail for the page to send.
-    if (next && this.index().map.get(next)?.kind === 'directive') return;
-    this.sendSelection(next);
-  }
-
-  hostLabel(node: LiveNode) {
-    return directiveHostLabel(node);
-  }
-
-  hydrationText(status: HydrationStatus) {
-    return hydrationLabel(status);
-  }
-
-  /** The nearest component above a row, such as the one whose template renders a directive host. */
-  ownerOf(id: string): LiveNode | null {
-    const { map, parents } = this.index();
-    for (const parent of ancestors(parents, id)) {
-      const node = map.get(parent);
-      if (node && node.kind !== 'directive') return node;
-    }
-    return null;
+    this.state.select(id);
   }
 
   toggleDirectiveHosts() {
-    const next = !this.showDirectiveHosts();
-    this.showDirectiveHosts.set(next);
-    try {
-      localStorage.setItem(DIRECTIVE_HOSTS_KEY, next ? 'shown' : 'hidden');
-    } catch {
-      // the choice lasts for this view only
-    }
-    const selected = this.selectedId();
-    if (!next && selected && !this.index().map.has(selected)) this.selectedId.set(null);
-    this.announce(next ? 'Directive hosts are shown.' : 'Directive hosts are hidden.');
+    this.state.toggleDirectiveHosts();
   }
 
   setHydrationOverlay(on: boolean) {
-    const client = this.rpc();
-    const pageId = this.page()?.pageId;
-    if (!client || !pageId) return;
-    void client
-      .scope('pangular')
-      .rpc.call('request-hydration-overlay', { pageId, on })
-      .catch(() => {});
-    this.announce(on ? 'Outlining hydration on the page.' : 'Hydration outline removed.');
+    this.state.setHydrationOverlay(on);
   }
 
   /** Shows a node that the hydration summary names, when it is in the tree. */
   revealNode(id: string) {
-    if (this.index().map.has(id)) this.reveal(id);
+    if (this.state.index().map.has(id)) this.reveal(id);
   }
 
   /** Shows a component a Leaks row names, and moves keyboard focus to its tree row. */
   showLeakComponent(id: string) {
-    if (this.index().map.has(id)) this.reveal(id, true);
+    if (this.state.index().map.has(id)) this.reveal(id, true);
   }
 
   /** Opens the tree to a node and selects it; `focus` also moves keyboard focus to its row. */
   reveal(id: string, focus = false) {
-    const { parents } = this.index();
-    this.collapsed.update((set) => {
-      const next = new Set(set);
-      for (const parent of ancestors(parents, id)) next.delete(parent);
-      return next;
-    });
-    if (!this.rows().some((row) => row.node.id === id)) this.setFilter('');
-    if (this.selectedId() !== id) this.select(id);
-    if (focus) this.focusId.set(id);
-    // In a long tree the row may be outside the rendered window.
-    const index = this.rows().findIndex((row) => row.node.id === id);
-    if (index >= 0) this.rowWindow.reveal(index);
-    afterNextRender(
-      () => {
-        const row = document.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
-        this.clearToolbar();
-        row?.scrollIntoView({ block: 'nearest' });
-        if (row) this.keepBelowToolbar(row);
-        if (focus) row?.focus({ preventScroll: true });
-      },
-      { injector: this.injector },
-    );
-  }
-
-  /**
-   * Sets the rows' `scroll-margin-top` so a row scrolled into view sits below
-   * the sticky toolbar, whose height changes as it wraps and which sticks
-   * inside the scroller's padding.
-   */
-  private clearToolbar() {
-    const toolbar = this.host.nativeElement.querySelector<HTMLElement>('.toolbar');
-    if (!toolbar) return;
-    this.host.nativeElement.style.setProperty(
-      '--ct-toolbar-clearance',
-      `${stickyClearance(toolbar)}px`,
-    );
-  }
-
-  /** Moves a row the sticky toolbar covers back below it. */
-  private keepBelowToolbar(row: HTMLElement) {
-    const toolbar = this.host.nativeElement.querySelector<HTMLElement>('.toolbar');
-    if (toolbar) keepBelowSticky(row, toolbar);
+    this.state.reveal(id, focus);
   }
 
   toggle(id: string, event?: Event) {
-    event?.stopPropagation();
-    if (this.query()) return;
-    this.collapsed.update((set) => {
-      const next = new Set(set);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
+    this.state.toggle(id, event);
   }
 
   expandAll() {
-    if (this.query()) return;
-    this.collapsed.set(new Set());
-    this.announce('Expanded every component.');
+    this.state.expandAll();
   }
 
   collapseAll() {
-    if (this.query()) return;
-    const { map, parents } = this.index();
-    const previous = this.rovingId();
-    const next = new Set<string>();
-    for (const node of map.values()) if (node.children.length) next.add(node.id);
-    this.collapsed.set(next);
-    if (previous) {
-      const visible = new Set(this.rows().map((row) => row.node.id));
-      let id: string | undefined = previous;
-      while (id && !visible.has(id)) id = parents.get(id);
-      if (id) this.focusId.set(id);
-    }
-    this.announce('Collapsed every component. Only the top level is shown.');
-  }
-
-  /** Sets the live message, changing it slightly when it repeats so screen readers say it again. */
-  private announce(message: string) {
-    this.announcement.update((current) => (current === message ? `${message}\u00a0` : message));
-  }
-
-  private expandSiblings(id: string) {
-    if (this.query()) return;
-    const parent = this.index().parents.get(id);
-    const siblings = parent
-      ? (this.index().map.get(parent)?.children ?? [])
-      : (this.page()?.roots ?? []);
-    this.collapsed.update((set) => {
-      const next = new Set(set);
-      for (const sibling of siblings) next.delete(sibling.id);
-      return next;
-    });
-  }
-
-  /** Shows the full text of a focused row whose name, tag or directives are cut off. */
-  showNameTip(event: FocusEvent) {
-    const row = event.currentTarget as HTMLElement;
-    const parts = Array.from(row.querySelectorAll<HTMLElement>('.name, .tag, .host-dirs'));
-    const cut = parts.some((part) => part.scrollWidth > part.clientWidth + 1);
-    if (!cut) {
-      this.nameTip.set(null);
-      return;
-    }
-    const text = parts.map((part) => part.title || part.textContent?.trim()).join(' ');
-    this.nameTip.set({ text, top: row.offsetTop + row.offsetHeight + 2 });
+    this.state.collapseAll();
   }
 
   highlight(id: string | null) {
-    this.requestHighlight(id ? { id } : null);
+    this.state.highlight(id);
   }
 
   /** One box around every root element of the block, or its owner when none is rendered. */
   highlightBlock(block: DeferBlock) {
-    if (block.rootIds.length > 1) this.requestHighlight({ ids: block.rootIds });
-    else this.highlight(block.rootIds[0] ?? block.owner?.id ?? null);
-  }
-
-  private requestHighlight(target: { id: string } | { ids: string[] } | null) {
-    const client = this.rpc();
-    if (!client) return;
-    void client
-      .scope('pangular')
-      .rpc.call('request-page-highlight', target && { pageId: this.page()?.pageId, ...target })
-      .catch(() => {});
+    this.state.highlightBlock(block);
   }
 
   showOwner(block: DeferBlock) {
-    if (block.owner && this.index().map.has(block.owner.id)) this.reveal(block.owner.id);
+    if (block.owner && this.state.index().map.has(block.owner.id)) this.reveal(block.owner.id);
   }
 
   /**
@@ -2905,77 +309,24 @@ export class ComponentTree {
   showCdComponent(name: string) {
     const hosts = this.cdHosts();
     let best: LiveNode | null = null;
-    for (const node of this.index().map.values()) {
+    for (const node of this.state.index().map.values()) {
       if (node.name !== name) continue;
       if (!best || (hosts[node.id] ?? 0) > (hosts[best.id] ?? 0)) best = node;
     }
     if (!best) {
-      this.say(`No ${name} is in the tree now.`);
+      this.state.say(`No ${name} is in the tree now.`);
       return;
     }
-    this.say(`Showing ${name} in the tree.`);
+    this.state.say(`Showing ${name} in the tree.`);
     this.reveal(best.id);
   }
 
   showForOwner(block: ForBlock) {
-    if (block.owner && this.index().map.has(block.owner.id)) this.reveal(block.owner.id);
+    if (block.owner && this.state.index().map.has(block.owner.id)) this.reveal(block.owner.id);
   }
 
-  onTreeKey(event: KeyboardEvent) {
-    const rows = this.rows();
-    if (!rows.length) return;
-    const current = rows.findIndex((r) => r.node.id === this.rovingId());
-    const at = Math.max(current, 0);
-    const row = rows[at];
-    let next = -1;
-    switch (event.key) {
-      case 'ArrowDown':
-        next = Math.min(at + 1, rows.length - 1);
-        break;
-      case 'ArrowUp':
-        next = Math.max(at - 1, 0);
-        break;
-      case 'Home':
-        next = 0;
-        break;
-      case 'End':
-        next = rows.length - 1;
-        break;
-      case 'ArrowRight':
-        if (row.hasChildren && !row.expanded) this.toggle(row.node.id);
-        else if (row.hasChildren) next = at + 1;
-        break;
-      case 'ArrowLeft':
-        if (row.hasChildren && row.expanded && !this.query()) this.toggle(row.node.id);
-        else {
-          const parent = this.index().parents.get(row.node.id);
-          next = rows.findIndex((r) => r.node.id === parent);
-        }
-        break;
-      case 'Enter':
-      case ' ':
-        this.select(row.node.id);
-        break;
-      case '*':
-        this.expandSiblings(row.node.id);
-        break;
-      default:
-        return;
-    }
-    event.preventDefault();
-    if (next >= 0) {
-      const id = rows[next].node.id;
-      this.focusId.set(id);
-      const focus = () => {
-        const el = document.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
-        this.clearToolbar();
-        el?.focus({ preventScroll: true });
-        el?.scrollIntoView({ block: 'nearest' });
-        if (el) this.keepBelowToolbar(el);
-      };
-      // A row outside the rendered window is brought in first.
-      if (this.rowWindow.rendered(next)) queueMicrotask(focus);
-      else this.rowWindow.reveal(next, focus);
-    }
+  /** The nearest component above a row, such as the one whose template renders a directive host. */
+  ownerOf(id: string): LiveNode | null {
+    return this.state.ownerOf(id);
   }
 }
diff --git a/app/src/pages/components/component-detail.html b/app/src/pages/components/component-detail.html
new file mode 100644
index 00000000..5b07d52a
--- /dev/null
+++ b/app/src/pages/components/component-detail.html
@@ -0,0 +1,348 @@
+@let sel = node();
+<header class="detail-head">
+  <span class="badge">component</span>
+  <h2 id="ct-detail-title" class="mono">{{ sel.name }}</h2>
+  <span class="mono muted">&lt;{{ sel.tag }}&gt;</span>
+  @if (detail()?.source; as where) {
+    <p class="where mono">
+      <app-source-link [file]="where.file" [line]="where.line" />
+    </p>
+  } @else {
+    @let guesses = sourceCandidates(sel);
+    @if (guesses.length === 1) {
+      <p class="where mono guess" [title]="guessTitle">
+        <span class="likely">Likely</span><span class="sr-only">, matched by class name: </span
+        ><app-source-link [file]="guesses[0].file" [line]="guesses[0].line" />
+      </p>
+    } @else if (guesses.length > 1) {
+      <div class="where guess" [title]="guessTitle">
+        <p class="guess-text">
+          <span class="likely">Not certain</span>
+          {{ guesses.length }} source files define {{ bareName(sel.name) }}:
+        </p>
+        <ul class="guess-list mono">
+          @for (guess of guesses; track sourceKey(guess)) {
+            <li><app-source-link [file]="guess.file" [line]="guess.line" /></li>
+          }
+        </ul>
+      </div>
+    }
+  }
+  @if (devtoolsActions()) {
+    <div class="actions" role="group" aria-label="Chrome DevTools">
+      <button type="button" (click)="revealInElements(sel)">Reveal in Elements</button>
+      <button type="button" (click)="openSource(sel)">Open source</button>
+    </div>
+    <p class="where action-message" role="status">{{ actionMessage() }}</p>
+  }
+  @if (sourceFor(sel); as src) {
+    @if (formsIn(src.file).length) {
+      <div class="actions">
+        @for (form of formsIn(src.file); track form.formId) {
+          <button type="button" class="show-form" (click)="showForm.emit(form.formId)">
+            Show {{ form.label }} in Forms
+          </button>
+        }
+      </div>
+    }
+  }
+  @if ((canShowInjector() || canShowSignals()) && !staticReport()) {
+    <div class="actions">
+      @if (canShowInjector()) {
+        <button type="button" (click)="openInjector(sel)">
+          Show in Injectors
+          <span class="sr-only">: {{ sel.name }}</span>
+        </button>
+      }
+      @if (canShowSignals()) {
+        <button type="button" (click)="openSignals(sel)">
+          Show in Signals
+          <span class="sr-only">: {{ sel.name }}</span>
+        </button>
+      }
+    </div>
+  }
+  @if (detail(); as d) {
+    <div class="actions" role="group" aria-label="Copy">
+      <button type="button" (click)="copyJson(d)">Copy as JSON</button>
+      <button type="button" (click)="copyHostPath(d)">Copy host path</button>
+    </div>
+    <p class="where action-message" role="status">{{ copyMessage() }}</p>
+  }
+  @if (!staticReport() && !native()) {
+    <app-store-global
+      class="console-global"
+      [rpc]="rpc()"
+      [pageId]="page()?.pageId"
+      [target]="{ kind: 'component', id: sel.id }"
+      [label]="sel.name"
+    />
+  }
+</header>
+
+@if (detail(); as d) {
+  <dl class="facts">
+    <dt>Change detection</dt>
+    <dd>{{ d.changeDetection ?? 'Unknown' }}</dd>
+    <dt>Encapsulation</dt>
+    <dd>{{ d.encapsulation ?? 'Unknown' }}</dd>
+    <dt>Host path</dt>
+    <dd class="mono">{{ d.path }}</dd>
+    @for (hit of routedById().get(sel.id) ?? []; track hit.outlet + hit.route) {
+      <dt>Routed</dt>
+      <dd class="mono">{{ hit.route || '/' }} in outlet {{ hit.outlet }}</dd>
+    }
+  </dl>
+
+  <div class="prop-filter">
+    <app-search-field
+      #propFilterInput
+      class="search"
+      label="Filter values"
+      placeholder="Filter inputs, outputs and properties by name"
+      [(value)]="propFilter"
+    />
+    @if (propQuery()) {
+      <span class="count">{{ shownValues()?.count ?? 0 }} of {{ valueTotal() }}</span>
+    }
+    <p class="sr-only" role="status">{{ propFilterStatus() }}</p>
+  </div>
+
+  @if (shownValues(); as v) {
+    <app-redaction-count [value]="v" />
+    @if (propQuery() && !v.count) {
+      <div class="state compact">
+        <p class="state-title">
+          No inputs, outputs or properties match “{{ propFilter().trim() }}”
+        </p>
+        <p class="state-hint">
+          The filter searches names, and the nested keys of values you opened.
+        </p>
+        <button type="button" (click)="clearPropFilter()">Clear filters</button>
+      </div>
+    }
+
+    @if (!propQuery() || v.inputs.length) {
+      <div class="block">
+        <h3>
+          Inputs <span class="pill">{{ v.inputs.length }}</span>
+        </h3>
+        @if (v.inputs.length) {
+          <ul class="props">
+            @for (p of v.inputs; track p.name) {
+              <li class="prop" [class.changed]="flashed('input', p.name)">
+                <span class="prop-name mono">
+                  {{ p.name }}
+                  @if (p.prop !== p.name) {
+                    <span class="muted">({{ p.prop }})</span>
+                  }
+                </span>
+                <app-value-tree
+                  [prop]="p"
+                  [store]="values"
+                  [query]="propFilter()"
+                  [componentId]="d.id"
+                  [pageId]="page()?.pageId ?? null"
+                  [rpc]="rpc()"
+                  [writes]="canEdit()"
+                />
+              </li>
+            }
+          </ul>
+        } @else {
+          <p class="empty-line">No inputs.</p>
+        }
+      </div>
+    }
+
+    @if (!propQuery() || v.outputs.length) {
+      <div class="block">
+        <h3>
+          Outputs <span class="pill">{{ v.outputs.length }}</span>
+        </h3>
+        @if (v.outputs.length) {
+          <ul class="chips">
+            @for (p of v.outputs; track p.name) {
+              <li class="chip" [class.on]="p.listened">
+                <span class="mono">{{ p.name }}</span>
+                <span class="chip-note">{{ p.listened ? 'listened' : 'no listener' }}</span>
+              </li>
+            }
+          </ul>
+        } @else {
+          <p class="empty-line">No outputs.</p>
+        }
+      </div>
+    }
+
+    @if (!propQuery() || v.properties.length) {
+      <div class="block">
+        <h3>
+          Properties <span class="pill">{{ v.properties.length }}</span>
+        </h3>
+        @if (v.properties.length) {
+          <ul class="props">
+            @for (p of v.properties; track p.name) {
+              <li class="prop" [class.changed]="flashed('property', p.name)">
+                <span class="prop-name mono">
+                  {{ p.name }}
+                  @if (p.kind) {
+                    <span class="flag">{{ p.kind }}</span>
+                  }
+                  @if (p.kind === 'signal' && canShowSignals() && !staticReport()) {
+                    <button type="button" class="signal-link" (click)="openSignals(sel, p.prop)">
+                      Show in Signals<span class="sr-only">: {{ p.name }}</span>
+                    </button>
+                  }
+                </span>
+                <app-value-tree
+                  [prop]="p"
+                  [store]="values"
+                  [query]="propFilter()"
+                  [componentId]="d.id"
+                  [pageId]="page()?.pageId ?? null"
+                  [rpc]="rpc()"
+                  [writes]="canEdit()"
+                />
+              </li>
+            }
+          </ul>
+        } @else {
+          <p class="empty-line">No other properties.</p>
+        }
+      </div>
+    }
+
+    @if (!propQuery() && d.listeners.length) {
+      <div class="block">
+        <h3>
+          DOM listeners <span class="pill">{{ d.listeners.length }}</span>
+        </h3>
+        <ul class="chips">
+          @for (name of d.listeners; track name) {
+            <li class="chip mono">{{ name }}</li>
+          }
+        </ul>
+      </div>
+    }
+
+    @if (!propQuery() && ownedDeferBlocks().length) {
+      <div class="block">
+        <h3>
+          Defer blocks <span class="pill">{{ ownedDeferBlocks().length }}</span>
+        </h3>
+        <ul class="chips">
+          @for (block of ownedDeferBlocks(); track block.id) {
+            <li class="chip">
+              <span class="mono">{{ block.state }}</span>
+              <span class="chip-note">{{ block.triggers.join(', ') || 'no triggers' }}</span>
+            </li>
+          }
+        </ul>
+      </div>
+    }
+
+    @for (dir of v.directives; track dir.name + dir.index) {
+      <div class="block">
+        <h3>
+          <span class="mono">{{ dir.name }}</span>
+          <span class="flag">directive on host</span>
+        </h3>
+        <p class="directive-where mono">
+          <ng-container
+            [ngTemplateOutlet]="directiveSource"
+            [ngTemplateOutletContext]="{ $implicit: dir.name }"
+          />
+        </p>
+        @if (dir.inputs.length) {
+          <ul class="props">
+            @for (p of dir.inputs; track p.name) {
+              <li class="prop" [class.changed]="flashed('directive', p.name, dir.index)">
+                <span class="prop-name mono">{{ p.name }}</span>
+                <app-value-tree
+                  [prop]="p"
+                  [store]="values"
+                  [query]="propFilter()"
+                  [directive]="dir.index"
+                  [componentId]="d.id"
+                  [pageId]="page()?.pageId ?? null"
+                  [rpc]="rpc()"
+                />
+              </li>
+            }
+          </ul>
+        }
+        @if (dir.outputs.length) {
+          <ul class="chips">
+            @for (p of dir.outputs; track p.name) {
+              <li class="chip" [class.on]="p.listened">
+                <span class="mono">{{ p.name }}</span>
+                <span class="chip-note">{{ p.listened ? 'listened' : 'no listener' }}</span>
+              </li>
+            }
+          </ul>
+        }
+        @if (!dir.inputs.length && !dir.outputs.length) {
+          <p class="empty-line">No inputs or outputs.</p>
+        }
+      </div>
+    }
+  }
+
+  <div class="block">
+    <h3>
+      Injected <span class="pill">{{ d.dependencies.length }}</span>
+    </h3>
+    @if (d.dependencies.length) {
+      <ul class="deps">
+        @for (dep of d.dependencies; track dep.token + $index) {
+          <li class="dep">
+            <span class="token mono">{{ dep.token }}</span>
+            @for (flag of dep.flags; track flag) {
+              <span class="flag">{{ flag }}</span>
+            }
+            @if (dep.providedBy) {
+              <span class="from"
+                >from <span class="mono">{{ dep.providedByName ?? 'an injector' }}</span></span
+              >
+            } @else {
+              <span class="from missing">not provided</span>
+            }
+          </li>
+        }
+      </ul>
+    } @else {
+      <p class="empty-line">Nothing is injected through the constructor or inject().</p>
+    }
+  </div>
+
+  @if (canShowPipes()) {
+    <app-component-pipes
+      [rpc]="rpc()"
+      [pageId]="page()?.pageId"
+      [component]="bareName(sel.name)"
+      [canShowPipes]="!staticReport()"
+      (showPipe)="showPipe.emit({ name: $event, pageId: page()?.pageId })"
+    />
+  }
+} @else {
+  <div class="state compact" role="status">
+    <span class="spinner" aria-hidden="true"></span>
+    <p class="state-hint">Reading live values from the page…</p>
+  </div>
+}
+
+<!-- A directive's file from the source scan, by class name: the page gives none. -->
+<ng-template #directiveSource let-name>
+  @let found = directiveSources(name);
+  @if (found.length === 1) {
+    <span class="directive-guess" [title]="guessTitle">
+      <span class="likely">Likely</span><span class="sr-only">, matched by class name: </span
+      ><app-source-link [file]="found[0].file" [line]="found[0].line" />
+    </span>
+  } @else if (found.length > 1) {
+    <span class="chip-note" [title]="guessTitle"
+      >{{ found.length }} source files define {{ bareName(name) }}</span
+    >
+  }
+</ng-template>
diff --git a/app/src/pages/components/component-detail.scss b/app/src/pages/components/component-detail.scss
new file mode 100644
index 00000000..b2d6e61e
--- /dev/null
+++ b/app/src/pages/components/component-detail.scss
@@ -0,0 +1,10 @@
+@use 'components' as ct;
+
+@include ct.base;
+@include ct.search;
+@include ct.buttons;
+@include ct.narrow;
+@include ct.detail;
+@include ct.facts;
+@include ct.values;
+@include ct.states;
diff --git a/app/src/pages/components/component-detail.ts b/app/src/pages/components/component-detail.ts
new file mode 100644
index 00000000..276509be
--- /dev/null
+++ b/app/src/pages/components/component-detail.ts
@@ -0,0 +1,141 @@
+import { Component, inject, input, output, viewChild } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import type { InjectorFocus } from '../../types/injector-focus.types';
+import type { SignalFocus } from '../../types/signal-focus.types';
+import { RedactionCount } from '../../ui/redaction-count';
+import { SearchField } from '../../ui/search-field';
+import { SourceLink } from '../../ui/source-link';
+import { StoreGlobal } from '../../ui/store-global';
+import { ComponentPipesSection } from '../component-pipes-section';
+import { ValueTree } from '../component-value-tree';
+import { bare, type Detail, type LiveNode, type SourceComponent } from './component-model';
+import { DetailState } from './detail-state';
+import { SourceScan } from './source-scan';
+import { TreeState } from './tree-state';
+
+/**
+ * The detail of a selected component: where its source is, the Chrome DevTools, copy and tab
+ * links, its live inputs, outputs and properties with a filter, its directives, what it injects
+ * and the pipes of its template.
+ */
+@Component({
+  selector: 'section[appComponentDetail]',
+  imports: [
+    NgTemplateOutlet,
+    RedactionCount,
+    SearchField,
+    SourceLink,
+    StoreGlobal,
+    ValueTree,
+    ComponentPipesSection,
+  ],
+  templateUrl: './component-detail.html',
+  styleUrl: './component-detail.scss',
+})
+export class ComponentDetail {
+  private readonly state = inject(TreeState);
+  private readonly scan = inject(SourceScan);
+  private readonly details = inject(DetailState);
+
+  /** The selected component instance. */
+  readonly node = input.required<LiveNode>();
+  readonly showForm = output<string>();
+  readonly showInjector = output<InjectorFocus>();
+  readonly showSignals = output<SignalFocus>();
+  readonly showPipe = output<{ name: string; pageId?: string }>();
+
+  protected readonly rpc = this.state.rpc;
+  protected readonly page = this.state.page;
+  protected readonly detail = this.state.detail;
+  protected readonly native = this.state.native;
+  protected readonly staticReport = this.state.staticReport;
+  protected readonly canEdit = this.state.canEdit;
+  protected readonly canShowInjector = this.state.canShowInjector;
+  protected readonly canShowSignals = this.state.canShowSignals;
+  protected readonly canShowPipes = this.state.canShowPipes;
+  protected readonly routedById = this.state.routedById;
+  protected readonly ownedDeferBlocks = this.state.ownedDeferBlocks;
+
+  protected readonly guessTitle = this.scan.guessTitle;
+
+  protected readonly devtoolsActions = this.details.devtoolsActions;
+  protected readonly actionMessage = this.details.actionMessage;
+  protected readonly copyMessage = this.details.copyMessage;
+  protected readonly values = this.details.values;
+  protected readonly propFilter = this.details.propFilter;
+  protected readonly propQuery = this.details.propQuery;
+  protected readonly shownValues = this.details.shownValues;
+  protected readonly valueTotal = this.details.valueTotal;
+  protected readonly propFilterStatus = this.details.propFilterStatus;
+  private readonly propFilterInput = viewChild<SearchField>('propFilterInput');
+
+  /** Clears the detail filter and keeps focus in its field. */
+  protected clearPropFilter(event?: Event) {
+    if (event && this.propFilter()) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+    this.propFilter.set('');
+    this.propFilterInput()?.focus();
+  }
+
+  protected flashed(section: 'input' | 'property' | 'directive', name: string, index?: number) {
+    return this.details.flashed(section, name, index);
+  }
+
+  protected revealInElements(node: LiveNode) {
+    return this.details.revealInElements(node);
+  }
+
+  protected openSource(node: LiveNode) {
+    return this.details.openSource(node);
+  }
+
+  protected copyJson(detail: Detail) {
+    return this.details.copyJson(detail);
+  }
+
+  protected copyHostPath(detail: Detail) {
+    return this.details.copyHostPath(detail);
+  }
+
+  /** Opens the Signals tab on this component's graph, with the signal in `key` selected. */
+  protected openSignals(node: LiveNode, key?: string) {
+    const pageId = this.page()?.pageId;
+    this.showSignals.emit({
+      componentId: node.id,
+      ...(pageId ? { pageId } : {}),
+      ...(key ? { key } : {}),
+    });
+  }
+
+  /** Opens the Injectors tab on this component's element injector. */
+  protected openInjector(node: LiveNode) {
+    const pageId = this.page()?.pageId;
+    this.showInjector.emit(pageId ? { componentId: node.id, pageId } : { componentId: node.id });
+  }
+
+  protected formsIn(file: string) {
+    return this.scan.formsIn(file);
+  }
+
+  protected sourceCandidates(node: LiveNode) {
+    return this.scan.sourceCandidates(node);
+  }
+
+  protected sourceFor(node: LiveNode) {
+    return this.scan.sourceFor(node);
+  }
+
+  protected directiveSources(name: string) {
+    return this.scan.directiveSources(name);
+  }
+
+  protected sourceKey(comp: SourceComponent) {
+    return this.scan.sourceKey(comp);
+  }
+
+  protected bareName(name: string) {
+    return bare(name);
+  }
+}
diff --git a/app/src/pages/components/component-model.ts b/app/src/pages/components/component-model.ts
new file mode 100644
index 00000000..df26768d
--- /dev/null
+++ b/app/src/pages/components/component-model.ts
@@ -0,0 +1,176 @@
+import type { SourceLocation } from '../../extension-bridge';
+import type { HydrationStatus } from '../component-tree-state';
+import type { HydrationReport } from '../hydration-section';
+import type { DeferBlock } from '../defer-blocks-section';
+import type { ForBlock } from '../for-blocks-section';
+
+/** A component or directive the source scan found. */
+export interface SourceComponent {
+  selector: string;
+  className: string;
+  kind: 'component' | 'directive';
+  file: string;
+  line: number;
+  inputs: string[];
+  outputs: string[];
+  isStandalone: boolean;
+  changeDetection?: 'OnPush' | 'Eager' | 'unknown';
+}
+
+export interface LiveNode {
+  id: string;
+  name: string;
+  tag: string;
+  /** `directive` for an element that hosts directives but no component. */
+  kind?: 'directive';
+  directives?: string[];
+  attributes?: string[];
+  hydration?: HydrationStatus;
+  children: LiveNode[];
+}
+
+export interface Prop {
+  name: string;
+  prop: string;
+  value?: unknown;
+  listened?: boolean;
+  kind?: 'signal' | 'resource';
+  edit?: 'property' | 'signal';
+  locked?: string;
+  editInside?: 'property' | 'signal';
+}
+
+export interface Dependency {
+  from: string;
+  token: string;
+  flags: string[];
+  providedBy: string | null;
+  providedByName?: string;
+}
+
+export interface Detail {
+  id: string;
+  name: string;
+  tag: string;
+  path: string;
+  /** A CSS selector that finds the host with `querySelector`, from a browser page. */
+  selector?: string;
+  source?: SourceLocation;
+  changeDetection?: string;
+  encapsulation?: string;
+  inputs: Prop[];
+  outputs: Prop[];
+  properties?: Prop[];
+  listeners: string[];
+  directives: { name: string; inputs: Prop[]; outputs: Prop[] }[];
+  dependencies: Dependency[];
+  /** Nested value levels opened in the panel, read again on each push. */
+  expanded?: Record<string, unknown>;
+}
+
+export interface Page {
+  pageId: string;
+  url?: string;
+  title?: string;
+  platform?: string;
+  deferBlocks?: DeferBlock[];
+  /** The page has more defer blocks than the ones in `deferBlocks`. */
+  deferTruncated?: boolean;
+  forBlocks?: ForBlock[];
+  forBlocksTruncated?: boolean;
+  roots: LiveNode[];
+  count: number;
+  /** Elements in `roots` that host directives but no component. */
+  directiveHostCount?: number;
+  hydration?: HydrationReport;
+  truncated?: boolean;
+  truncatedBy?: { components?: number; depth?: number; directiveHosts?: number };
+  detail: Detail | null;
+  reportedAt: number;
+  /** The server clock minus the page clock, in ms, for ages of page times. */
+  clockOffset?: number;
+}
+
+export interface OutletInfo {
+  outlet: string;
+  route?: string;
+  element?: string;
+  devtoolsId?: string;
+  activated: boolean;
+  children?: OutletInfo[];
+}
+
+export interface RoutedHit {
+  route: string;
+  outlet: string;
+}
+
+export interface PickResult {
+  ok?: boolean;
+  id?: string;
+  name?: string;
+  pageId?: string;
+  error?: string;
+}
+
+export interface Row {
+  node: LiveNode;
+  depth: number;
+  hasChildren: boolean;
+  expanded: boolean;
+  /** Position among its siblings, from 1, and how many siblings there are, for screen readers. */
+  posinset: number;
+  setsize: number;
+}
+
+/** A form the Forms inspector found, and the file of the component that owns it. */
+export interface FormOwner {
+  formId: string;
+  label: string;
+  file: string | null;
+}
+
+/** Height of a tree row, fixed while the tree renders only the rows in view. */
+export const TREE_ROW_PX = 32;
+
+export function bare(name: string): string {
+  return name.replace(/^_(?=[A-Z])/, '');
+}
+
+/** True when two paths name the same file, one maybe longer or with `./` or backslashes. */
+export function sameSourceFile(a: string, b: string): boolean {
+  const norm = (path: string) => path.replace(/\\/g, '/').replace(/^\.\//, '');
+  const [x, y] = [norm(a), norm(b)];
+  return x === y || x.endsWith('/' + y) || y.endsWith('/' + x);
+}
+
+/** The ids above `id`, nearest first; stops at a repeated id so a bad map cannot loop. */
+export function ancestors(parents: ReadonlyMap<string, string>, id: string): string[] {
+  const out: string[] = [];
+  const seen = new Set([id]);
+  for (let parent = parents.get(id); parent && !seen.has(parent); parent = parents.get(parent)) {
+    seen.add(parent);
+    out.push(parent);
+  }
+  return out;
+}
+
+/** The keys that move a running pick on the page, as the page names them. */
+export const PICK_KEY_NAMES: Record<string, string> = {
+  ArrowDown: 'next',
+  ArrowUp: 'previous',
+  ArrowLeft: 'parent',
+  ArrowRight: 'child',
+  Enter: 'pick',
+};
+
+export const DIRECTIVE_HOSTS_KEY = 'pangular:components:directive-hosts';
+
+/** Whether this viewer last chose to show directive hosts; shown unless they hid them. */
+export function storedDirectiveHosts(): boolean {
+  try {
+    return localStorage.getItem(DIRECTIVE_HOSTS_KEY) !== 'hidden';
+  } catch {
+    return true;
+  }
+}
diff --git a/app/src/pages/components/detail-state.ts b/app/src/pages/components/detail-state.ts
new file mode 100644
index 00000000..b95a0bd3
--- /dev/null
+++ b/app/src/pages/components/detail-state.ts
@@ -0,0 +1,192 @@
+import { Injectable, computed, inject, linkedSignal, signal, untracked } from '@angular/core';
+import { ExtensionBridge, type SourceLocation } from '../../extension-bridge';
+import { componentJson, hostPathText } from '../component-copy';
+import { ValueFlash, flashKey } from '../component-value-flash';
+import { ValueStore } from '../component-value-store';
+import { nestedMatches } from '../component-value-state';
+import type { Detail, LiveNode, Prop } from './component-model';
+import { SourceScan } from './source-scan';
+import { TreeState } from './tree-state';
+
+/**
+ * The selected component's detail: its opened value levels, the values filter, the values that
+ * just changed, and the Chrome DevTools and copy actions with their messages. Provided by the
+ * Components page, so the filter and the opened levels outlive one detail panel.
+ */
+@Injectable()
+export class DetailState {
+  private readonly tree = inject(TreeState);
+  private readonly scan = inject(SourceScan);
+  private readonly bridge = inject(ExtensionBridge);
+
+  readonly actionMessage = linkedSignal<string | null, string>({
+    source: this.tree.selectedId,
+    computation: () => '',
+  });
+  /** What the last copy did, for the selected component only. */
+  readonly copyMessage = linkedSignal<string | null, string>({
+    source: this.tree.selectedId,
+    computation: () => '',
+  });
+  /** Values of the selected component that changed in the last push, outlined for a second. */
+  private readonly flash = new ValueFlash();
+
+  readonly devtoolsActions = computed(
+    () =>
+      this.bridge.available &&
+      !!this.tree.page() &&
+      !this.tree.native() &&
+      !this.tree.staticReport(),
+  );
+
+  /** Opened value levels of the selected component. */
+  readonly values = new ValueStore();
+  /** The detail's filter over input, output and property names and opened nested keys. */
+  readonly propFilter = signal('');
+  readonly propQuery = computed(() => this.propFilter().trim().toLowerCase());
+
+  /** Inputs, outputs, properties and directive inputs the filter keeps, and how many. */
+  readonly shownValues = computed(() => {
+    const d = this.tree.detail();
+    if (!d) return null;
+    const query = this.propQuery();
+    const named = (p: Prop) =>
+      !query || p.name.toLowerCase().includes(query) || p.prop.toLowerCase().includes(query);
+    const kept = (p: Prop, directive?: number) =>
+      named(p) ||
+      nestedMatches([p.prop], p.value, (path) => this.values.level(path, directive), query, 1)
+        .length > 0;
+    const inputs = d.inputs.filter((p) => kept(p));
+    const outputs = d.outputs.filter(named);
+    const properties = (d.properties ?? []).filter((p) => kept(p));
+    const directives = d.directives
+      .map((dir, index) => ({
+        ...dir,
+        index,
+        inputs: dir.inputs.filter((p) => kept(p, index)),
+        outputs: dir.outputs.filter(named),
+      }))
+      .filter((dir) => !query || dir.inputs.length || dir.outputs.length);
+    const count =
+      inputs.length +
+      outputs.length +
+      properties.length +
+      directives.reduce((n, dir) => n + dir.inputs.length + dir.outputs.length, 0);
+    return { inputs, outputs, properties, directives, count };
+  });
+
+  readonly valueTotal = computed(() => {
+    const d = this.tree.detail();
+    if (!d) return 0;
+    return (
+      d.inputs.length +
+      d.outputs.length +
+      (d.properties?.length ?? 0) +
+      d.directives.reduce((n, dir) => n + dir.inputs.length + dir.outputs.length, 0)
+    );
+  });
+
+  readonly propFilterStatus = computed(() => {
+    if (!this.propQuery()) return '';
+    const count = this.shownValues()?.count ?? 0;
+    return count
+      ? `${count} of ${this.valueTotal()} values match.`
+      : 'No inputs, outputs or properties match.';
+  });
+
+  /** Lets the value store follow the selected component; run from an effect. */
+  followValues() {
+    const detail = this.tree.detail();
+    const target = {
+      rpc: this.tree.rpc(),
+      pageId: this.tree.page()?.pageId ?? null,
+      componentId: detail?.id ?? null,
+    };
+    untracked(() => this.values.follow(target, detail?.expanded));
+  }
+
+  /** Compares the selected component's values with the last push; run from an effect. */
+  trackChanges() {
+    const detail = this.tree.detail();
+    const owner = detail ? `${this.tree.page()?.pageId ?? ''}|${detail.id}` : null;
+    const values = new Map<string, unknown>();
+    for (const p of detail?.inputs ?? []) values.set(flashKey('input', p.name), p.value);
+    for (const p of detail?.properties ?? []) values.set(flashKey('property', p.name), p.value);
+    detail?.directives.forEach((dir, index) => {
+      for (const p of dir.inputs) values.set(flashKey('directive', p.name, index), p.value);
+    });
+    untracked(() => this.flash.update(owner, values));
+  }
+
+  /** Stops the change outlines, when the page is destroyed. */
+  clearChanges() {
+    this.flash.clear();
+  }
+
+  /** Whether a value of the detail changed in the last push, so it shows an outline. */
+  flashed(section: 'input' | 'property' | 'directive', name: string, index?: number): boolean {
+    return this.flash.changed().has(flashKey(section, name, index));
+  }
+
+  /**
+   * The exact location the page gives, else the source scan's guess when only one class may be
+   * it. Several candidates give null, so Open source falls back to the class itself.
+   */
+  whereOf(node: LiveNode): SourceLocation | null {
+    const exact = this.tree.detail()?.source;
+    if (exact) return exact;
+    const candidates = this.scan.sourceCandidates(node);
+    return candidates.length === 1 ? candidates[0] : null;
+  }
+
+  async revealInElements(node: LiveNode) {
+    const pageId = this.tree.page()?.pageId;
+    if (!pageId) return;
+    this.actionMessage.set('');
+    const result = await this.bridge.reveal(pageId, node.id);
+    if (this.tree.selectedId() !== node.id) return;
+    this.actionMessage.set(
+      result.ok
+        ? ''
+        : 'Could not reveal it. The component must be rendered in the tab these DevTools inspect.',
+    );
+  }
+
+  async openSource(node: LiveNode) {
+    const pageId = this.tree.page()?.pageId;
+    if (!pageId) return;
+    const where = this.whereOf(node);
+    this.actionMessage.set('');
+    const result = await this.bridge.openSource(pageId, node.id, where);
+    if (this.tree.selectedId() !== node.id) return;
+    if (result.ok) return;
+    this.actionMessage.set(
+      where
+        ? `Not found in Sources. Open ${where.file}:${where.line} in your editor.`
+        : 'Could not open the source. The component must be rendered in the tab these DevTools inspect.',
+    );
+  }
+
+  /** Copies only what the panel holds, which the page serialized and masked already. */
+  async copyJson(detail: Detail) {
+    await this.copy(detail.id, componentJson(detail), `Copied ${detail.name} as JSON.`);
+  }
+
+  async copyHostPath(detail: Detail) {
+    await this.copy(
+      detail.id,
+      hostPathText(detail),
+      detail.selector ? 'Copied the host selector.' : 'Copied the host path.',
+    );
+  }
+
+  private async copy(id: string, text: string, done: string) {
+    let message = done;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      message = 'The clipboard is not available here.';
+    }
+    if (this.tree.selectedId() === id) this.copyMessage.set(message);
+  }
+}
diff --git a/app/src/pages/components/host-detail.html b/app/src/pages/components/host-detail.html
new file mode 100644
index 00000000..becfb488
--- /dev/null
+++ b/app/src/pages/components/host-detail.html
@@ -0,0 +1,48 @@
+@let host = node();
+<header class="detail-head">
+  <span class="badge">directive host</span>
+  <h2 id="ct-detail-title" class="mono">&lt;{{ host.tag }}&gt;</h2>
+  <span class="mono muted">{{ hostLabel(host) }}</span>
+</header>
+<div class="block">
+  <h3>
+    Directives <span class="pill">{{ host.directives?.length ?? 0 }}</span>
+  </h3>
+  <ul class="chips">
+    @for (name of host.directives ?? []; track name + $index) {
+      <li class="chip mono">
+        {{ name }}
+        <ng-container
+          [ngTemplateOutlet]="directiveSource"
+          [ngTemplateOutletContext]="{ $implicit: name }"
+        />
+      </li>
+    }
+  </ul>
+</div>
+<div class="block">
+  <p class="empty-line">
+    This element hosts directives but no component. Their inputs are bound in the template of the
+    component that renders it.
+  </p>
+  @if (ownerOf(host.id); as owner) {
+    <div class="actions owner-action">
+      <button type="button" (click)="reveal(owner.id, true)">Show {{ owner.name }}</button>
+    </div>
+  }
+</div>
+
+<!-- A directive's file from the source scan, by class name: the page gives none. -->
+<ng-template #directiveSource let-name>
+  @let found = directiveSources(name);
+  @if (found.length === 1) {
+    <span class="directive-guess" [title]="guessTitle">
+      <span class="likely">Likely</span><span class="sr-only">, matched by class name: </span
+      ><app-source-link [file]="found[0].file" [line]="found[0].line" />
+    </span>
+  } @else if (found.length > 1) {
+    <span class="chip-note" [title]="guessTitle"
+      >{{ found.length }} source files define {{ bareName(name) }}</span
+    >
+  }
+</ng-template>
diff --git a/app/src/pages/components/host-detail.scss b/app/src/pages/components/host-detail.scss
new file mode 100644
index 00000000..8701719f
--- /dev/null
+++ b/app/src/pages/components/host-detail.scss
@@ -0,0 +1,9 @@
+@use 'components' as ct;
+
+@include ct.base;
+@include ct.buttons;
+.owner-action {
+  margin-top: 10px;
+}
+@include ct.detail;
+@include ct.values;
diff --git a/app/src/pages/components/host-detail.ts b/app/src/pages/components/host-detail.ts
new file mode 100644
index 00000000..ecf9e18e
--- /dev/null
+++ b/app/src/pages/components/host-detail.ts
@@ -0,0 +1,43 @@
+import { Component, inject, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { SourceLink } from '../../ui/source-link';
+import { directiveHostLabel } from '../component-tree-state';
+import { bare, type LiveNode } from './component-model';
+import { SourceScan } from './source-scan';
+import { TreeState } from './tree-state';
+
+/** The detail of a selected directive host: its directives and the component that renders it. */
+@Component({
+  selector: 'section[appHostDetail]',
+  imports: [NgTemplateOutlet, SourceLink],
+  templateUrl: './host-detail.html',
+  styleUrl: './host-detail.scss',
+})
+export class HostDetail {
+  private readonly state = inject(TreeState);
+  private readonly scan = inject(SourceScan);
+  /** The selected row, an element that hosts directives but no component. */
+  readonly node = input.required<LiveNode>();
+
+  protected readonly guessTitle = this.scan.guessTitle;
+
+  protected hostLabel(node: LiveNode) {
+    return directiveHostLabel(node);
+  }
+
+  protected ownerOf(id: string) {
+    return this.state.ownerOf(id);
+  }
+
+  protected reveal(id: string, focus = false) {
+    this.state.reveal(id, focus);
+  }
+
+  protected directiveSources(name: string) {
+    return this.scan.directiveSources(name);
+  }
+
+  protected bareName(name: string) {
+    return bare(name);
+  }
+}
diff --git a/app/src/pages/components/pick-state.ts b/app/src/pages/components/pick-state.ts
new file mode 100644
index 00000000..40a7123d
--- /dev/null
+++ b/app/src/pages/components/pick-state.ts
@@ -0,0 +1,101 @@
+import { Injectable, computed, inject, signal } from '@angular/core';
+import { PICK_KEY_NAMES, type PickResult } from './component-model';
+import { TreeState } from './tree-state';
+
+/**
+ * Picking a component on the page: the pick button's state, the keys that move a running pick,
+ * and what happens when the page answers. Provided by the Components page.
+ */
+@Injectable()
+export class PickState {
+  private readonly tree = inject(TreeState);
+
+  readonly picking = signal(false);
+  private pickPageId: string | null = null;
+  private pickSeq = 0;
+  readonly pickLabel = computed(() =>
+    this.picking()
+      ? 'Cancel pick'
+      : this.tree.native()
+        ? 'Pick component on device'
+        : 'Pick component on page',
+  );
+
+  /** Stops a running pick when the shown page is no longer the one it runs on. */
+  followPage(shown: string | null) {
+    if (this.picking() && shown !== this.pickPageId) this.dropPick();
+  }
+
+  async pick() {
+    const client = this.tree.rpc();
+    if (!client || this.picking()) return;
+    const seq = ++this.pickSeq;
+    this.pickPageId = this.tree.page()?.pageId ?? null;
+    this.picking.set(true);
+    this.tree.say(
+      this.tree.native()
+        ? 'Tap a component on the device, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.'
+        : 'Click a component in the app, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.',
+    );
+    const result = (await client
+      .scope('pangular')
+      .rpc.call('request-component-pick', { pageId: this.pickPageId ?? undefined })
+      .catch(() => ({ ok: false, error: 'Could not reach the devtools server.' }))) as PickResult;
+    if (seq !== this.pickSeq) return;
+    this.picking.set(false);
+    if (!result?.ok || !result.id) {
+      this.tree.say(result?.error ?? 'No component was picked.');
+      return;
+    }
+    if (result.pageId && result.pageId !== this.tree.page()?.pageId) {
+      this.tree.selectPage(result.pageId);
+    }
+    this.tree.say(`Picked ${result.name ?? 'a component'}.`);
+    this.tree.destroyed.set(null);
+    if (this.tree.index().map.has(result.id)) this.tree.reveal(result.id);
+    else this.tree.selectedId.set(result.id);
+  }
+
+  /**
+   * Moves a running pick with the keyboard: down and up go through the components in page
+   * order, left to the one around, right to the first one inside, and Enter picks.
+   */
+  pickKey(event: KeyboardEvent) {
+    const key = PICK_KEY_NAMES[event.key];
+    if (!this.picking() || !key || event.altKey || event.ctrlKey || event.metaKey) return;
+    // Enter would press the focused button, which cancels the pick.
+    event.preventDefault();
+    const client = this.tree.rpc();
+    if (!client) return;
+    const seq = this.pickSeq;
+    void client
+      .scope('pangular')
+      .rpc.call('request-component-pick-move', { pageId: this.pickPageId ?? undefined, key })
+      .then((answer) => {
+        const result = answer as { moved?: boolean; name?: string; tag?: string; error?: string };
+        if (seq !== this.pickSeq || !this.picking() || key === 'pick') return;
+        this.tree.say(
+          result?.moved
+            ? `${result.name ?? 'Component'} <${result.tag ?? ''}>. Press Enter to pick it.`
+            : (result?.error ?? 'The page did not move.'),
+        );
+      })
+      .catch(() => {});
+  }
+
+  cancelPick() {
+    const client = this.tree.rpc();
+    if (!client || !this.picking()) return;
+    void client
+      .scope('pangular')
+      .rpc.call('cancel-component-pick', { pageId: this.pickPageId ?? undefined })
+      .catch(() => {});
+  }
+
+  private dropPick() {
+    this.cancelPick();
+    this.pickSeq++;
+    this.picking.set(false);
+    this.tree.say('Picking stopped because the page changed.');
+  }
+}
diff --git a/app/src/pages/components/source-list.html b/app/src/pages/components/source-list.html
new file mode 100644
index 00000000..0c413fd4
--- /dev/null
+++ b/app/src/pages/components/source-list.html
@@ -0,0 +1,52 @@
+@for (comp of filteredSource(); track sourceKey(comp); let i = $index) {
+  <li class="source-item" [class.expanded]="openKey() === sourceKey(comp)">
+    <button
+      type="button"
+      class="source-toggle"
+      [attr.aria-expanded]="openKey() === sourceKey(comp)"
+      [attr.aria-controls]="openKey() === sourceKey(comp) ? 'ct-source-' + i : null"
+      (click)="openKey.set(openKey() === sourceKey(comp) ? null : sourceKey(comp))"
+    >
+      <span class="kind-flag" [class.directive]="comp.kind === 'directive'">{{ comp.kind }}</span>
+      <span class="row-main">
+        <span class="selector mono">{{ sourceLabel(comp) }}</span>
+        <span class="file mono">
+          @if (comp.selector) {
+            {{ bareName(comp.className) }} ·
+          }
+          {{ comp.file }}:{{ comp.line }}
+        </span>
+      </span>
+      <svg class="chevron" viewBox="0 0 24 24" aria-hidden="true">
+        <path d="m9 6 6 6-6 6" />
+      </svg>
+    </button>
+    @if (openKey() === sourceKey(comp)) {
+      <div class="inline-detail" [id]="'ct-source-' + i">
+        <dl class="facts">
+          <dt>Class</dt>
+          <dd class="mono">{{ bareName(comp.className) }}</dd>
+          <dt>File</dt>
+          <dd class="mono">
+            <app-source-link [file]="comp.file" [line]="comp.line" />
+          </dd>
+          <dt>Standalone</dt>
+          <dd>{{ comp.isStandalone ? 'Yes' : 'No' }}</dd>
+          @if (comp.kind === 'component') {
+            <dt>Change detection</dt>
+            <dd>{{ comp.changeDetection ?? 'Unknown' }}</dd>
+          }
+          <dt>Inputs</dt>
+          <dd class="mono">{{ comp.inputs.join(', ') || 'None' }}</dd>
+          <dt>Outputs</dt>
+          <dd class="mono">{{ comp.outputs.join(', ') || 'None' }}</dd>
+        </dl>
+        @for (form of formsIn(comp.file); track form.formId) {
+          <button type="button" class="show-form" (click)="showForm.emit(form.formId)">
+            Show {{ form.label }} in Forms
+          </button>
+        }
+      </div>
+    }
+  </li>
+}
diff --git a/app/src/pages/components/source-list.scss b/app/src/pages/components/source-list.scss
new file mode 100644
index 00000000..f0992203
--- /dev/null
+++ b/app/src/pages/components/source-list.scss
@@ -0,0 +1,88 @@
+@use 'mixins' as m;
+@use 'components' as ct;
+
+@include ct.base;
+@include ct.buttons;
+@include ct.facts;
+.source-item {
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.source-item.expanded {
+  border-color: var(--accent-line);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.source-toggle {
+  justify-content: flex-start;
+  gap: 12px;
+  width: 100%;
+  height: auto;
+  min-height: 52px;
+  padding: 10px 16px;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  text-align: left;
+}
+.source-toggle:hover {
+  background: var(--surface-2);
+}
+.source-toggle:focus-visible {
+  @include m.focus-ring(-2px);
+}
+.kind-flag {
+  flex: none;
+  padding: 1px 8px;
+  border-radius: 99px;
+  @include m.tint(accent);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.kind-flag.directive {
+  @include m.tint(ok);
+}
+.row-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.selector {
+  color: var(--text-strong);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.file {
+  color: var(--text-2);
+  font-size: 12px;
+  @include m.truncate;
+}
+.chevron {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 2.2;
+  transition: transform 200ms var(--ease);
+}
+.expanded .chevron {
+  transform: rotate(90deg);
+  stroke: var(--accent);
+}
+.inline-detail {
+  padding: 0 0 12px;
+  border-top: 1px solid var(--border);
+}
+.inline-detail .facts {
+  border-bottom: 0;
+}
+.inline-detail .show-form {
+  margin: 0 16px;
+}
diff --git a/app/src/pages/components/source-list.ts b/app/src/pages/components/source-list.ts
new file mode 100644
index 00000000..b83102b7
--- /dev/null
+++ b/app/src/pages/components/source-list.ts
@@ -0,0 +1,35 @@
+import { Component, inject, output } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { bare, type SourceComponent } from './component-model';
+import { SourceScan } from './source-scan';
+
+/** What the source declares, one row per component or directive, opened in place. */
+@Component({
+  selector: 'ul[appSourceList]',
+  imports: [SourceLink],
+  templateUrl: './source-list.html',
+  styleUrl: './source-list.scss',
+})
+export class SourceList {
+  private readonly scan = inject(SourceScan);
+  readonly showForm = output<string>();
+
+  protected readonly filteredSource = this.scan.filteredSource;
+  protected readonly openKey = this.scan.openKey;
+
+  protected formsIn(file: string) {
+    return this.scan.formsIn(file);
+  }
+
+  protected sourceKey(comp: SourceComponent) {
+    return this.scan.sourceKey(comp);
+  }
+
+  protected sourceLabel(comp: SourceComponent) {
+    return this.scan.sourceLabel(comp);
+  }
+
+  protected bareName(name: string) {
+    return bare(name);
+  }
+}
diff --git a/app/src/pages/components/source-scan.ts b/app/src/pages/components/source-scan.ts
new file mode 100644
index 00000000..9f4c0f3e
--- /dev/null
+++ b/app/src/pages/components/source-scan.ts
@@ -0,0 +1,119 @@
+import { Injectable, computed, inject, signal } from '@angular/core';
+import {
+  bare,
+  sameSourceFile,
+  type FormOwner,
+  type LiveNode,
+  type SourceComponent,
+} from './component-model';
+import { TreeState } from './tree-state';
+
+/**
+ * What the source declares: the components and directives of the source scan, the forms they
+ * own, and the guesses that match a live instance or directive to a source file by class name.
+ * Provided by the Components page.
+ */
+@Injectable()
+export class SourceScan {
+  private readonly tree = inject(TreeState);
+
+  readonly loading = signal(false);
+  readonly error = signal(false);
+  readonly source = signal<SourceComponent[]>([]);
+  readonly formOwners = signal<FormOwner[]>([]);
+  readonly openKey = signal<string | null>(null);
+
+  /** Why a location from the source scan is marked as a guess. */
+  readonly guessTitle =
+    'The page gave no exact location. This comes from the source scan, matched by class name.';
+
+  private readonly sourceByClass = computed(() => {
+    const map = new Map<string, SourceComponent[]>();
+    for (const comp of this.source()) {
+      const key = bare(comp.className);
+      map.set(key, [...(map.get(key) ?? []), comp]);
+    }
+    return map;
+  });
+
+  readonly filteredSource = computed(() => {
+    const q = this.tree.query();
+    const all = this.source();
+    if (!q) return all;
+    return all.filter(
+      (c) =>
+        c.selector.toLowerCase().includes(q) ||
+        c.className.toLowerCase().includes(q) ||
+        c.file.toLowerCase().includes(q),
+    );
+  });
+
+  readonly sourceCounts = computed(() => {
+    const components = this.source().filter((c) => c.kind === 'component').length;
+    return { components, directives: this.source().length - components };
+  });
+
+  async refresh() {
+    const client = this.tree.rpc();
+    if (!client) return;
+    this.loading.set(true);
+    const my = client.scope('pangular');
+    try {
+      this.source.set((await my.rpc.call('get-components')) as SourceComponent[]);
+      this.error.set(false);
+    } catch {
+      this.error.set(true);
+    } finally {
+      this.loading.set(false);
+    }
+    const owners = (await my.rpc.call('forms-owners').catch(() => [])) as FormOwner[];
+    this.formOwners.set(owners ?? []);
+  }
+
+  formsIn(file: string) {
+    return this.formOwners().filter((form) => form.file === file);
+  }
+
+  /**
+   * The source scan components that may define this instance, for when the page gives no exact
+   * location: the classes with its name, narrowed to those whose selector is its host tag when
+   * any is. More than one means the scan cannot tell which file it is.
+   */
+  sourceCandidates(node: LiveNode): SourceComponent[] {
+    const matches = (this.sourceByClass().get(bare(node.name)) ?? []).filter(
+      (c) => c.kind === 'component',
+    );
+    const bySelector = matches.filter((c) => c.selector === node.tag);
+    return bySelector.length ? bySelector : matches;
+  }
+
+  /**
+   * The source scan entry of this instance: the one in the file the page names, or the only
+   * candidate. Null when none matches or several may be it.
+   */
+  sourceFor(node: LiveNode): SourceComponent | null {
+    const candidates = this.sourceCandidates(node);
+    const exact = this.tree.detail()?.source;
+    if (exact) return candidates.find((c) => sameSourceFile(c.file, exact.file)) ?? null;
+    return candidates.length === 1 ? candidates[0] : null;
+  }
+
+  /**
+   * The source scan directives a directive on the page may be, by class name. Angular gives
+   * directives no debug location, so a match is only likely.
+   */
+  directiveSources(name: string): SourceComponent[] {
+    return (this.sourceByClass().get(bare(name)) ?? []).filter((c) => c.kind === 'directive');
+  }
+
+  sourceKey(comp: SourceComponent) {
+    return `${comp.file}#${comp.className}`;
+  }
+
+  sourceLabel(comp: SourceComponent) {
+    if (!comp.selector) return bare(comp.className);
+    return comp.kind === 'component' && /^[a-z][\w-]*$/i.test(comp.selector)
+      ? `<${comp.selector}>`
+      : comp.selector;
+  }
+}
diff --git a/app/src/pages/components/tree-rows.html b/app/src/pages/components/tree-rows.html
new file mode 100644
index 00000000..1cc79e0c
--- /dev/null
+++ b/app/src/pages/components/tree-rows.html
@@ -0,0 +1,107 @@
+<h2 class="sr-only">Component tree</h2>
+@if (!rows().length) {
+  <div class="state compact tree">
+    <p class="state-title">No components match “{{ filter().trim() }}”</p>
+    @if (page()!.truncated) {
+      <p class="state-hint">The filter only searches the components the tree lists.</p>
+    }
+    @if (!showDirectiveHosts() && page()!.directiveHostCount) {
+      <p class="state-hint">Directive hosts are hidden, so they are not searched.</p>
+    }
+    <button type="button" (click)="clearFilter.emit()">Clear filters</button>
+  </div>
+}
+@if (rowWindow.enabled()) {
+  <p class="window-note">
+    {{ rows().length }} rows. Rows render as you scroll, so the browser's find only sees the ones
+    near view; the filter above searches them all.
+  </p>
+}
+<div
+  #treeEl
+  class="tree"
+  role="tree"
+  aria-label="Component instances"
+  [class.windowed]="rowWindow.enabled()"
+  [style.padding-top.px]="rowWindow.enabled() ? 6 + rowWindow.padTop() : null"
+  [style.padding-bottom.px]="rowWindow.enabled() ? 6 + rowWindow.padBottom() : null"
+  [hidden]="!rows().length"
+  (keydown)="onTreeKey($event)"
+>
+  @for (shown of shownRows(); track shown.row.node.id) {
+    @let row = shown.row;
+    <div
+      class="row"
+      role="treeitem"
+      [attr.aria-level]="row.depth + 1"
+      [attr.aria-setsize]="row.setsize"
+      [attr.aria-posinset]="row.posinset"
+      [attr.aria-expanded]="row.hasChildren ? row.expanded : null"
+      [attr.aria-selected]="selectedId() === row.node.id"
+      [attr.tabindex]="tabStop() === row.node.id ? 0 : -1"
+      [attr.data-vindex]="shown.index"
+      [attr.data-id]="row.node.id"
+      [class.selected]="selectedId() === row.node.id"
+      [class.dir-host]="row.node.kind === 'directive'"
+      [style.--depth]="row.depth"
+      (click)="select(row.node.id)"
+      (focus)="focusId.set(row.node.id); highlight(row.node.id); showNameTip($event)"
+      (blur)="highlight(null); nameTip.set(null)"
+      (keydown.escape)="nameTip.set(null)"
+      (mouseenter)="highlight(row.node.id)"
+      (mouseleave)="highlight(null)"
+    >
+      @if (row.hasChildren) {
+        <span
+          class="twisty"
+          aria-hidden="true"
+          [class.open]="row.expanded"
+          (click)="toggle(row.node.id, $event)"
+        >
+          <svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
+        </span>
+      } @else {
+        <span class="twisty-space" aria-hidden="true"></span>
+      }
+      @if (row.node.kind === 'directive') {
+        <span class="tag host-tag mono">&lt;{{ row.node.tag }}&gt;</span>
+        <span class="host-dirs mono" [attr.title]="row.node.directives?.join(', ')">{{
+          hostLabel(row.node)
+        }}</span>
+        <span class="sr-only">directive host</span>
+      } @else {
+        <span class="name mono" [attr.title]="row.node.name">{{ row.node.name }}</span>
+        <span class="tag mono" [attr.title]="'<' + row.node.tag + '>'"
+          >&lt;{{ row.node.tag }}&gt;</span
+        >
+      }
+      @if (row.node.hydration; as status) {
+        <span [class]="'hyd hyd-' + status"
+          ><span class="sr-only">Hydration: </span>{{ hydrationText(status) }}</span
+        >
+      }
+      @for (hit of routedById().get(row.node.id) ?? []; track hit.outlet + hit.route) {
+        <span class="routed">{{ hit.route || '/' }}</span>
+      }
+      @if (cdHosts()[row.node.id]; as checks) {
+        <span class="checks">
+          {{ checks
+          }}<span class="sr-only"> {{ checks === 1 ? 'check' : 'checks' }} while recording</span>
+        </span>
+      }
+      @if (row.node.kind !== 'directive' && row.node.directives?.length) {
+        <span class="dirs" [attr.title]="row.node.directives!.join(', ')">
+          +{{ row.node.directives!.length }}
+          <span class="sr-only">
+            {{ row.node.directives!.length === 1 ? 'directive' : 'directives' }}
+          </span>
+        </span>
+      }
+    </div>
+  }
+</div>
+@if (nameTip(); as tip) {
+  <div class="name-tip mono" aria-hidden="true" [style.top.px]="tip.top">
+    {{ tip.text }}
+  </div>
+}
diff --git a/app/src/pages/components/tree-rows.scss b/app/src/pages/components/tree-rows.scss
new file mode 100644
index 00000000..2a044430
--- /dev/null
+++ b/app/src/pages/components/tree-rows.scss
@@ -0,0 +1,182 @@
+@use 'mixins' as m;
+@use 'components' as ct;
+
+@include ct.base;
+@include ct.buttons;
+.tree {
+  min-width: 0;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  @include m.enter;
+}
+.window-note {
+  margin: 0 0 6px;
+  font-size: 12px;
+  color: var(--text-2);
+}
+.tree.windowed .row {
+  height: 32px;
+  overflow: hidden;
+}
+.row {
+  position: relative;
+  scroll-margin-top: var(--ct-toolbar-clearance, 72px);
+  scroll-margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 8px 0 calc(4px + var(--depth, 0) * 18px);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 120ms var(--ease);
+}
+.row::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 14px;
+  width: calc(var(--depth, 0) * 18px);
+  background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 18px);
+  pointer-events: none;
+}
+.row:hover {
+  background: var(--surface-2);
+}
+.row:focus-visible {
+  @include m.focus-ring(-2px);
+}
+.row.selected {
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.twisty,
+.twisty-space {
+  flex: none;
+  width: 20px;
+  height: 20px;
+}
+.twisty {
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+  color: var(--text-3);
+}
+.twisty:hover {
+  color: var(--text);
+  background: var(--surface-3);
+}
+.twisty svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 150ms var(--ease);
+}
+.twisty.open svg {
+  transform: rotate(90deg);
+}
+.name {
+  min-width: 0;
+  color: var(--text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  @include m.truncate;
+}
+.tag {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--text-2);
+  font-size: 12px;
+  @include m.truncate;
+}
+.routed {
+  flex: none;
+  max-width: 40%;
+  padding: 0 8px;
+  border: 1px solid var(--accent-line);
+  border-radius: 99px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 18px;
+  @include m.truncate;
+}
+.checks {
+  flex: none;
+  margin-left: auto;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--accent-soft);
+  color: var(--text);
+  font-size: 11px;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+}
+.checks + .dirs {
+  margin-left: 0;
+}
+.row.dir-host .host-tag {
+  color: var(--text);
+}
+.host-dirs {
+  min-width: 0;
+  color: var(--text-2);
+  font-size: 12px;
+  font-style: italic;
+  @include m.truncate;
+}
+.row.dir-host .twisty-space,
+.row.dir-host .twisty {
+  border-left: 1px dashed var(--border-strong);
+}
+.hyd {
+  flex: none;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 11px;
+  line-height: 18px;
+}
+.hyd-skipped {
+  @include m.tint(warn);
+}
+.hyd-mismatched {
+  @include m.tint(danger);
+}
+.name-tip {
+  position: absolute;
+  z-index: 1;
+  left: 8px;
+  max-width: calc(100% - 16px);
+  padding: 4px 8px;
+  background: var(--surface-3);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow);
+  color: var(--text-strong);
+  font-size: 12px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  @include m.enter(150ms);
+}
+.dirs {
+  flex: none;
+  margin-left: auto;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 11px;
+  line-height: 18px;
+}
+@include ct.states;
diff --git a/app/src/pages/components/tree-rows.ts b/app/src/pages/components/tree-rows.ts
new file mode 100644
index 00000000..23a46d7f
--- /dev/null
+++ b/app/src/pages/components/tree-rows.ts
@@ -0,0 +1,133 @@
+import { Component, ElementRef, effect, inject, output, signal, viewChild } from '@angular/core';
+import { directiveHostLabel, hydrationLabel, type HydrationStatus } from '../component-tree-state';
+import type { LiveNode } from './component-model';
+import { TreeState } from './tree-state';
+
+/**
+ * The live component tree of the Components page: one ARIA tree item per instance, windowed
+ * when the tree is long, with arrow key moves and the full name of a cut off row under it.
+ */
+@Component({
+  selector: 'div[appTreeRows]',
+  templateUrl: './tree-rows.html',
+  styleUrl: './tree-rows.scss',
+})
+export class TreeRows {
+  private readonly state = inject(TreeState);
+  /** The no-match state's Clear filters, which the page handles so focus goes to its search. */
+  readonly clearFilter = output<void>();
+
+  protected readonly filter = this.state.filter;
+  protected readonly page = this.state.page;
+  protected readonly rows = this.state.rows;
+  protected readonly rowWindow = this.state.rowWindow;
+  protected readonly shownRows = this.state.shownRows;
+  protected readonly selectedId = this.state.selectedId;
+  protected readonly tabStop = this.state.tabStop;
+  protected readonly focusId = this.state.focusId;
+  protected readonly showDirectiveHosts = this.state.showDirectiveHosts;
+  protected readonly routedById = this.state.routedById;
+  protected readonly cdHosts = this.state.cdHosts;
+  /** The full text of the focused row when its name or tag is cut off, shown below the row. */
+  protected readonly nameTip = signal<{ text: string; top: number } | null>(null);
+  private readonly treeEl = viewChild<ElementRef<HTMLElement>>('treeEl');
+
+  constructor() {
+    effect(() => {
+      const tree = this.treeEl()?.nativeElement;
+      if (tree) this.rowWindow.attach(tree);
+    });
+  }
+
+  protected select(id: string) {
+    this.state.select(id);
+  }
+
+  protected toggle(id: string, event?: Event) {
+    this.state.toggle(id, event);
+  }
+
+  protected highlight(id: string | null) {
+    this.state.highlight(id);
+  }
+
+  protected hostLabel(node: LiveNode) {
+    return directiveHostLabel(node);
+  }
+
+  protected hydrationText(status: HydrationStatus) {
+    return hydrationLabel(status);
+  }
+
+  /** Shows the full text of a focused row whose name, tag or directives are cut off. */
+  protected showNameTip(event: FocusEvent) {
+    const row = event.currentTarget as HTMLElement;
+    const parts = Array.from(row.querySelectorAll<HTMLElement>('.name, .tag, .host-dirs'));
+    const cut = parts.some((part) => part.scrollWidth > part.clientWidth + 1);
+    if (!cut) {
+      this.nameTip.set(null);
+      return;
+    }
+    const text = parts.map((part) => part.title || part.textContent?.trim()).join(' ');
+    this.nameTip.set({ text, top: row.offsetTop + row.offsetHeight + 2 });
+  }
+
+  protected onTreeKey(event: KeyboardEvent) {
+    const state = this.state;
+    const rows = state.rows();
+    if (!rows.length) return;
+    const current = rows.findIndex((r) => r.node.id === state.rovingId());
+    const at = Math.max(current, 0);
+    const row = rows[at];
+    let next = -1;
+    switch (event.key) {
+      case 'ArrowDown':
+        next = Math.min(at + 1, rows.length - 1);
+        break;
+      case 'ArrowUp':
+        next = Math.max(at - 1, 0);
+        break;
+      case 'Home':
+        next = 0;
+        break;
+      case 'End':
+        next = rows.length - 1;
+        break;
+      case 'ArrowRight':
+        if (row.hasChildren && !row.expanded) state.toggle(row.node.id);
+        else if (row.hasChildren) next = at + 1;
+        break;
+      case 'ArrowLeft':
+        if (row.hasChildren && row.expanded && !state.query()) state.toggle(row.node.id);
+        else {
+          const parent = state.index().parents.get(row.node.id);
+          next = rows.findIndex((r) => r.node.id === parent);
+        }
+        break;
+      case 'Enter':
+      case ' ':
+        state.select(row.node.id);
+        break;
+      case '*':
+        state.expandSiblings(row.node.id);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (next >= 0) {
+      const id = rows[next].node.id;
+      state.focusId.set(id);
+      const focus = () => {
+        const el = document.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
+        state.clearToolbar();
+        el?.focus({ preventScroll: true });
+        el?.scrollIntoView({ block: 'nearest' });
+        if (el) state.keepBelowToolbar(el);
+      };
+      // A row outside the rendered window is brought in first.
+      if (this.rowWindow.rendered(next)) queueMicrotask(focus);
+      else this.rowWindow.reveal(next, focus);
+    }
+  }
+}
diff --git a/app/src/pages/components/tree-state.ts b/app/src/pages/components/tree-state.ts
new file mode 100644
index 00000000..edc46ce4
--- /dev/null
+++ b/app/src/pages/components/tree-state.ts
@@ -0,0 +1,610 @@
+import {
+  ElementRef,
+  Injectable,
+  Injector,
+  afterNextRender,
+  computed,
+  inject,
+  linkedSignal,
+  signal,
+  type Signal,
+} from '@angular/core';
+import type { DevframeRpcClient } from 'devframe/client';
+import {
+  angularVersionAtLeast,
+  lacksCapability,
+} from '@pangular-inspector/devtools/internal/config';
+import { hostPageId } from '../../page-id';
+import { angularPageFor, injectAngularPages } from '../../angular-pages';
+import { pickPage } from '../../live-pages';
+import { isNativePage } from '../../native-page';
+import { isStaticReport } from '../../rpc';
+import { actionAllowed } from '../../devtools-config';
+import type { SelectOption } from '../../ui/select';
+import { VirtualWindow } from '../../ui/virtual-window';
+import { keepBelowSticky, stickyClearance } from '../../ui/sticky-clearance';
+import {
+  countText,
+  filterAnnouncement,
+  filterTree,
+  nearestRow,
+  reconcileSelection,
+  truncationNotice,
+  withoutDirectiveHosts,
+} from '../component-tree-state';
+import type { CdPage } from '../cd-recording';
+import type { DeferBlock } from '../defer-blocks-section';
+import type { LeaksPage } from '../leaks-section';
+import {
+  DIRECTIVE_HOSTS_KEY,
+  TREE_ROW_PX,
+  ancestors,
+  storedDirectiveHosts,
+  type LiveNode,
+  type OutletInfo,
+  type Page,
+  type RoutedHit,
+  type Row,
+} from './component-model';
+
+/** The page inputs the state reads, connected by the page. */
+export interface TreeInputs {
+  rpc: Signal<DevframeRpcClient | null>;
+  /** Whether the Injectors tab is on, so "Show in Injectors" can open it. */
+  canShowInjector: Signal<boolean>;
+  /** Whether the Signals tab is on, so "Show in Signals" can open it. */
+  canShowSignals: Signal<boolean>;
+  /** Whether the Pipes inspector is on, so the detail lists the template's pipes. */
+  canShowPipes: Signal<boolean>;
+}
+
+/**
+ * The state the Components page and its sections share: the `component-tree`, `change-detection`,
+ * `leaks` and `router` shared states, the shown page, the tree rows with their filter and
+ * collapsed nodes, the selection and the live message. Provided by the page, so every section of
+ * one page reads the same signals.
+ */
+@Injectable()
+export class TreeState {
+  private inputs: TreeInputs = {
+    rpc: signal(null),
+    canShowInjector: signal(false),
+    canShowSignals: signal(false),
+    canShowPipes: signal(false),
+  };
+  readonly rpc = computed(() => this.inputs.rpc());
+  readonly canShowInjector = computed(() => this.inputs.canShowInjector());
+  readonly canShowSignals = computed(() => this.inputs.canShowSignals());
+  readonly canShowPipes = computed(() => this.inputs.canShowPipes());
+  readonly staticReport = computed(() => isStaticReport(this.rpc()));
+
+  readonly filter = signal('');
+  readonly pages = signal<Record<string, Page>>({});
+  readonly chosenPageId = signal<string | null>(null);
+  readonly selectedId = signal<string | null>(null);
+  readonly destroyed = signal<string | null>(null);
+  readonly announcement = signal('');
+  readonly pickMessage = signal('');
+  readonly focusId = signal<string | null>(null);
+  readonly collapsed = signal<ReadonlySet<string>>(new Set());
+  /** Elements that host directives but no component show as rows; this viewer can hide them. */
+  readonly showDirectiveHosts = signal(storedDirectiveHosts());
+  private readonly routerPages = signal<{ pageId?: string; outlets?: OutletInfo[] }[]>([]);
+  private readonly pageId = hostPageId();
+  private readonly angularPages = injectAngularPages(() => this.rpc());
+  /** The shown page's Angular version and debug API parts, for the unavailable notes. */
+  readonly angularPage = computed(() =>
+    angularPageFor(this.angularPages(), this.page()?.pageId ?? this.pageId),
+  );
+  /** `@defer` and `@for` exist from Angular 17.0, so older pages get no note about them. */
+  private readonly hasControlFlow = computed(() => {
+    const version = this.angularPage()?.version;
+    return !version || angularVersionAtLeast(version, '17.0');
+  });
+  readonly deferUnavailable = computed(
+    () => this.hasControlFlow() && lacksCapability(this.angularPage(), 'deferBlocks'),
+  );
+  readonly forUnavailable = computed(
+    () => this.hasControlFlow() && lacksCapability(this.angularPage(), 'forBlocks'),
+  );
+  private readonly injector = inject(Injector);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  /** Whether the server sent the component tree state yet, so an empty one means no page. */
+  readonly pagesKnown = signal(false);
+  private readonly cleanups: (() => void)[] = [];
+  private selection = { pageId: null as string | null, detailId: null as string | null };
+  /** Set once the page is destroyed, so a late shared state answer is dropped. */
+  private gone = false;
+
+  private readonly shownPageId = linkedSignal<
+    { pages: Record<string, Page>; chosen: string | null },
+    string | null
+  >({
+    source: () => ({ pages: this.pages(), chosen: this.chosenPageId() }),
+    computation: ({ pages, chosen }, previous) =>
+      pickPage(pages, { chosen, host: this.pageId, previous: previous?.value ?? null }),
+  });
+
+  readonly page = computed<Page | null>(() => {
+    const id = this.shownPageId();
+    return id ? (this.pages()[id] ?? null) : null;
+  });
+
+  readonly pageOptions = computed<SelectOption[]>(() =>
+    Object.values(this.pages()).map((page) => ({
+      value: page.pageId,
+      label: page.title || page.url || `Page ${page.pageId}`,
+      hint: page.url,
+    })),
+  );
+
+  readonly live = computed(() => (this.page()?.roots.length ?? 0) > 0);
+  readonly native = computed(() => isNativePage(this.page()));
+  /** Inputs, properties and writable signals are editable on a live browser page. */
+  readonly canEdit = computed(
+    () =>
+      this.live() &&
+      !this.native() &&
+      !this.staticReport() &&
+      actionAllowed(this.rpc(), 'components'),
+  );
+
+  private readonly cdPages = signal<Record<string, CdPage>>({});
+  readonly cdPage = computed(() => {
+    const pageId = this.page()?.pageId;
+    return pageId ? (this.cdPages()[pageId] ?? null) : null;
+  });
+  readonly cdHosts = computed(() => this.cdPage()?.hosts ?? {});
+
+  private readonly leaksPages = signal<Record<string, LeaksPage>>({});
+  /** The shown page's leak report, from the `leaks` shared state. */
+  readonly leaksPage = computed(() => {
+    const pageId = this.page()?.pageId;
+    return pageId ? (this.leaksPages()[pageId] ?? null) : null;
+  });
+
+  /** The page's tree, without directive hosts when this viewer hid them. */
+  private readonly visibleRoots = computed(() => {
+    const roots = this.page()?.roots ?? [];
+    return this.showDirectiveHosts() || !this.page()?.directiveHostCount
+      ? roots
+      : withoutDirectiveHosts(roots);
+  });
+
+  readonly index = computed(() => {
+    const map = new Map<string, LiveNode>();
+    const parents = new Map<string, string>();
+    const walk = (nodes: LiveNode[], parent: string | null) => {
+      for (const node of nodes) {
+        // The first row with an id wins, so `parents` can never loop.
+        if (map.has(node.id)) continue;
+        map.set(node.id, node);
+        if (parent) parents.set(node.id, parent);
+        walk(node.children, node.id);
+      }
+    };
+    walk(this.visibleRoots(), null);
+    return { map, parents };
+  });
+
+  readonly query = computed(() => this.filter().trim().toLowerCase());
+
+  private readonly filtered = computed(() => filterTree(this.visibleRoots(), this.query()));
+
+  /** Directive host rows in the tree as shown. */
+  private readonly shownDirectiveHosts = computed(() =>
+    this.showDirectiveHosts() ? (this.page()?.directiveHostCount ?? 0) : 0,
+  );
+
+  readonly deferBlocks = computed(() => this.page()?.deferBlocks ?? []);
+  /** The defer blocks in the selected component's template. */
+  readonly ownedDeferBlocks = computed(() => {
+    const id = this.selectedId();
+    return id ? this.deferBlocks().filter((block) => block.owner?.id === id) : [];
+  });
+
+  readonly countLabel = computed(() =>
+    countText(
+      this.page()?.count ?? 0,
+      this.filtered().matches,
+      !!this.query(),
+      !!this.page()?.truncated,
+      this.shownDirectiveHosts(),
+    ),
+  );
+
+  readonly truncationText = computed(() => truncationNotice(this.page()?.truncatedBy));
+
+  readonly rows = computed<Row[]>(() => {
+    const rows: Row[] = [];
+    const collapsed = this.collapsed();
+    const searching = !!this.query();
+    const walk = (nodes: LiveNode[], depth: number) => {
+      nodes.forEach((node, i) => {
+        const expanded = searching || !collapsed.has(node.id);
+        rows.push({
+          node,
+          depth,
+          hasChildren: node.children.length > 0,
+          expanded,
+          posinset: i + 1,
+          setsize: nodes.length,
+        });
+        if (expanded) walk(node.children, depth + 1);
+      });
+    };
+    walk(this.filtered().nodes, 0);
+    return rows;
+  });
+
+  /** A long tree renders only the rows near the visible part of the page. */
+  readonly rowWindow = new VirtualWindow({
+    count: computed(() => this.rows().length),
+    estimate: TREE_ROW_PX,
+    fixed: true,
+  });
+  readonly shownRows = computed(() => {
+    const { start, end } = this.rowWindow.range();
+    return this.rows()
+      .slice(start, end)
+      .map((row, i) => ({ row, index: start + i }));
+  });
+  /** The row Tab lands on: the roving one, or the first rendered row when it is out of view. */
+  readonly tabStop = computed(() => {
+    const id = this.rovingId();
+    const shown = this.shownRows();
+    return shown.some(({ row }) => row.node.id === id) ? id : (shown[0]?.row.node.id ?? null);
+  });
+
+  readonly selectedNode = computed(() => {
+    const id = this.selectedId();
+    return id ? (this.index().map.get(id) ?? null) : null;
+  });
+
+  /** The selected row when it is a directive host, which has no component detail. */
+  readonly selectedHost = computed(() => {
+    const node = this.selectedNode();
+    return node?.kind === 'directive' ? node : null;
+  });
+
+  readonly detail = computed(() => {
+    const detail = this.page()?.detail;
+    return detail && detail.id === this.selectedId() ? detail : null;
+  });
+
+  readonly rovingId = computed(() => {
+    const rows = this.rows();
+    const ids = new Set(rows.map((r) => r.node.id));
+    const focus = this.focusId();
+    if (focus && ids.has(focus)) return focus;
+    const selected = this.selectedId();
+    if (selected && ids.has(selected)) return selected;
+    return rows[0]?.node.id ?? null;
+  });
+
+  private readonly outlets = computed<OutletInfo[]>(() => {
+    const shown = this.page()?.pageId;
+    return this.routerPages().find((p) => p.pageId === shown)?.outlets ?? [];
+  });
+
+  readonly routedById = computed(() => {
+    const map = new Map<string, RoutedHit[]>();
+    const visit = (outlets: OutletInfo[]) => {
+      for (const outlet of outlets) {
+        if (outlet.activated && outlet.devtoolsId) {
+          const hits = map.get(outlet.devtoolsId) ?? [];
+          hits.push({ route: outlet.route ?? '', outlet: outlet.outlet });
+          map.set(outlet.devtoolsId, hits);
+        }
+        if (outlet.children) visit(outlet.children);
+      }
+    };
+    visit(this.outlets());
+    return map;
+  });
+
+  /** Reads the page's inputs. Call once, from the page's constructor. */
+  connect(inputs: TreeInputs) {
+    this.inputs = inputs;
+  }
+
+  /** Stops following the shared states, when the page is destroyed. */
+  destroy() {
+    this.gone = true;
+    this.highlight(null);
+    for (const cleanup of this.cleanups.splice(0)) cleanup();
+  }
+
+  async watch(client: DevframeRpcClient) {
+    for (const cleanup of this.cleanups.splice(0)) cleanup();
+    const my = client.scope('pangular');
+    try {
+      const tree = await my.rpc.sharedState('component-tree');
+      if (this.gone) return;
+      const applyTree = (value: unknown) => {
+        const pages = (value as { pages?: Record<string, Page> } | null)?.pages;
+        this.applyPages(pages && typeof pages === 'object' ? pages : {});
+        // A state the client hasn't loaded from the server yet says nothing.
+        if (value !== undefined) this.pagesKnown.set(true);
+      };
+      applyTree(tree.value());
+      this.cleanups.push(tree.on('updated', applyTree));
+    } catch {
+      this.applyPages({});
+      this.pagesKnown.set(true);
+    }
+    try {
+      const cd = await my.rpc.sharedState('change-detection');
+      if (this.gone) return;
+      const applyCd = (value: unknown) => {
+        const pages = (value as { pages?: Record<string, CdPage> } | null)?.pages;
+        this.cdPages.set(pages && typeof pages === 'object' ? pages : {});
+      };
+      applyCd(cd.value());
+      this.cleanups.push(cd.on('updated', applyCd));
+    } catch {
+      this.cdPages.set({});
+    }
+    try {
+      const leaks = await my.rpc.sharedState('leaks');
+      if (this.gone) return;
+      const applyLeaks = (value: unknown) => {
+        const pages = (value as { pages?: Record<string, LeaksPage> } | null)?.pages;
+        this.leaksPages.set(pages && typeof pages === 'object' ? pages : {});
+      };
+      applyLeaks(leaks.value());
+      this.cleanups.push(leaks.on('updated', applyLeaks));
+    } catch {
+      this.leaksPages.set({});
+    }
+    try {
+      const router = await my.rpc.sharedState('router');
+      if (this.gone) return;
+      const applyRouter = (value: unknown) => {
+        const pages = (value as { pages?: { pageId?: string; outlets?: OutletInfo[] }[] })?.pages;
+        this.routerPages.set(Array.isArray(pages) ? pages : []);
+      };
+      applyRouter(router.value());
+      this.cleanups.push(router.on('updated', applyRouter));
+    } catch {
+      this.routerPages.set([]);
+    }
+  }
+
+  private applyPages(pages: Record<string, Page>) {
+    const active = document.activeElement;
+    const focused =
+      active instanceof HTMLElement && this.host.nativeElement.contains(active)
+        ? (active.closest<HTMLElement>('.row')?.dataset['id'] ?? null)
+        : null;
+    const before = focused ? this.rows().map((row) => row.node.id) : [];
+    const known = this.index().map;
+    this.pages.set(pages);
+    this.syncSelection(known);
+    if (!focused) return;
+    const after = new Set(this.rows().map((row) => row.node.id));
+    if (after.has(focused)) return;
+    const next = nearestRow(before, after, focused);
+    if (!next) return;
+    this.focusId.set(next);
+    afterNextRender(() => this.rowElement(next)?.focus(), { injector: this.injector });
+  }
+
+  private syncSelection(known = this.index().map) {
+    const page = this.page();
+    const next = reconcileSelection(
+      { ...this.selection, selectedId: this.selectedId() },
+      page
+        ? { pageId: page.pageId, roots: page.roots, detail: page.detail, truncated: page.truncated }
+        : null,
+    );
+    const name = next.destroyed ? known.get(next.destroyed)?.name : undefined;
+    this.selection = { pageId: next.pageId, detailId: next.detailId };
+    if (next.selectedId !== this.selectedId()) this.selectedId.set(next.selectedId);
+    if (next.selectedId) this.destroyed.set(null);
+    if (!next.destroyed) return;
+    this.destroyed.set(name ?? 'The component');
+    this.announcement.set('The selected component was destroyed.');
+    this.sendSelection(null);
+  }
+
+  selectPage(pageId: string | null) {
+    if (!pageId) return;
+    this.chosenPageId.set(pageId);
+    this.destroyed.set(null);
+    this.syncSelection();
+  }
+
+  setFilter(value: string) {
+    this.filter.set(value);
+    const { matches } = this.filtered();
+    this.announcement.set(
+      filterAnnouncement(
+        this.page()?.count ?? 0,
+        matches,
+        value,
+        !!this.page()?.truncated,
+        this.shownDirectiveHosts(),
+      ),
+    );
+  }
+
+  /** Shows a message under the toolbar and says it. */
+  say(message: string) {
+    this.pickMessage.set(message);
+    this.announce(message);
+  }
+
+  private sendSelection(id: string | null) {
+    const client = this.rpc();
+    if (!client) return;
+    void client
+      .scope('pangular')
+      .rpc.call('select-component', { pageId: this.page()?.pageId, id, console: true })
+      .catch(() => {});
+  }
+
+  private rowElement(id: string) {
+    return this.host.nativeElement.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
+  }
+
+  select(id: string) {
+    const next = this.selectedId() === id ? null : id;
+    this.selectedId.set(next);
+    this.destroyed.set(null);
+    this.focusId.set(id);
+    // A directive host has no component detail for the page to send.
+    if (next && this.index().map.get(next)?.kind === 'directive') return;
+    this.sendSelection(next);
+  }
+
+  /** The nearest component above a row, such as the one whose template renders a directive host. */
+  ownerOf(id: string): LiveNode | null {
+    const { map, parents } = this.index();
+    for (const parent of ancestors(parents, id)) {
+      const node = map.get(parent);
+      if (node && node.kind !== 'directive') return node;
+    }
+    return null;
+  }
+
+  toggleDirectiveHosts() {
+    const next = !this.showDirectiveHosts();
+    this.showDirectiveHosts.set(next);
+    try {
+      localStorage.setItem(DIRECTIVE_HOSTS_KEY, next ? 'shown' : 'hidden');
+    } catch {
+      // the choice lasts for this view only
+    }
+    const selected = this.selectedId();
+    if (!next && selected && !this.index().map.has(selected)) this.selectedId.set(null);
+    this.announce(next ? 'Directive hosts are shown.' : 'Directive hosts are hidden.');
+  }
+
+  setHydrationOverlay(on: boolean) {
+    const client = this.rpc();
+    const pageId = this.page()?.pageId;
+    if (!client || !pageId) return;
+    void client
+      .scope('pangular')
+      .rpc.call('request-hydration-overlay', { pageId, on })
+      .catch(() => {});
+    this.announce(on ? 'Outlining hydration on the page.' : 'Hydration outline removed.');
+  }
+
+  /** Opens the tree to a node and selects it; `focus` also moves keyboard focus to its row. */
+  reveal(id: string, focus = false) {
+    const { parents } = this.index();
+    this.collapsed.update((set) => {
+      const next = new Set(set);
+      for (const parent of ancestors(parents, id)) next.delete(parent);
+      return next;
+    });
+    if (!this.rows().some((row) => row.node.id === id)) this.setFilter('');
+    if (this.selectedId() !== id) this.select(id);
+    if (focus) this.focusId.set(id);
+    // In a long tree the row may be outside the rendered window.
+    const index = this.rows().findIndex((row) => row.node.id === id);
+    if (index >= 0) this.rowWindow.reveal(index);
+    afterNextRender(
+      () => {
+        const row = document.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
+        this.clearToolbar();
+        row?.scrollIntoView({ block: 'nearest' });
+        if (row) this.keepBelowToolbar(row);
+        if (focus) row?.focus({ preventScroll: true });
+      },
+      { injector: this.injector },
+    );
+  }
+
+  /**
+   * Sets the rows' `scroll-margin-top` so a row scrolled into view sits below
+   * the sticky toolbar, whose height changes as it wraps and which sticks
+   * inside the scroller's padding.
+   */
+  clearToolbar() {
+    const toolbar = this.host.nativeElement.querySelector<HTMLElement>('.toolbar');
+    if (!toolbar) return;
+    this.host.nativeElement.style.setProperty(
+      '--ct-toolbar-clearance',
+      `${stickyClearance(toolbar)}px`,
+    );
+  }
+
+  /** Moves a row the sticky toolbar covers back below it. */
+  keepBelowToolbar(row: HTMLElement) {
+    const toolbar = this.host.nativeElement.querySelector<HTMLElement>('.toolbar');
+    if (toolbar) keepBelowSticky(row, toolbar);
+  }
+
+  toggle(id: string, event?: Event) {
+    event?.stopPropagation();
+    if (this.query()) return;
+    this.collapsed.update((set) => {
+      const next = new Set(set);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  expandAll() {
+    if (this.query()) return;
+    this.collapsed.set(new Set());
+    this.announce('Expanded every component.');
+  }
+
+  collapseAll() {
+    if (this.query()) return;
+    const { map, parents } = this.index();
+    const previous = this.rovingId();
+    const next = new Set<string>();
+    for (const node of map.values()) if (node.children.length) next.add(node.id);
+    this.collapsed.set(next);
+    if (previous) {
+      const visible = new Set(this.rows().map((row) => row.node.id));
+      let id: string | undefined = previous;
+      while (id && !visible.has(id)) id = parents.get(id);
+      if (id) this.focusId.set(id);
+    }
+    this.announce('Collapsed every component. Only the top level is shown.');
+  }
+
+  /** Sets the live message, changing it slightly when it repeats so screen readers say it again. */
+  announce(message: string) {
+    this.announcement.update((current) => (current === message ? `${message} ` : message));
+  }
+
+  expandSiblings(id: string) {
+    if (this.query()) return;
+    const parent = this.index().parents.get(id);
+    const siblings = parent
+      ? (this.index().map.get(parent)?.children ?? [])
+      : (this.page()?.roots ?? []);
+    this.collapsed.update((set) => {
+      const next = new Set(set);
+      for (const sibling of siblings) next.delete(sibling.id);
+      return next;
+    });
+  }
+
+  highlight(id: string | null) {
+    this.requestHighlight(id ? { id } : null);
+  }
+
+  /** One box around every root element of the block, or its owner when none is rendered. */
+  highlightBlock(block: DeferBlock) {
+    if (block.rootIds.length > 1) this.requestHighlight({ ids: block.rootIds });
+    else this.highlight(block.rootIds[0] ?? block.owner?.id ?? null);
+  }
+
+  private requestHighlight(target: { id: string } | { ids: string[] } | null) {
+    const client = this.rpc();
+    if (!client) return;
+    void client
+      .scope('pangular')
+      .rpc.call('request-page-highlight', target && { pageId: this.page()?.pageId, ...target })
+      .catch(() => {});
+  }
+}
diff --git a/app/src/pages/di-inspector.html b/app/src/pages/di-inspector.html
new file mode 100644
index 00000000..789d0e86
--- /dev/null
+++ b/app/src/pages/di-inspector.html
@@ -0,0 +1,260 @@
+<p class="sr-only" role="status">{{ announcement() }}</p>
+<ng-template #loadError let-compact="compact">
+  <div class="state load-error" [class.compact]="compact" role="alert">
+    <p class="state-title">
+      {{ compact ? "Couldn't load the live injector tree" : "Couldn't load DI data" }}
+    </p>
+    <p class="state-hint">
+      The devtools server did not answer. Check that it is still running, then retry.
+    </p>
+    <button type="button" [attr.aria-disabled]="retrying() || null" (click)="retry()">
+      {{ retrying() ? 'Retrying…' : 'Retry' }}
+    </button>
+  </div>
+</ng-template>
+<ng-template #pagePicker>
+  @if (pageOptions().length > 1) {
+    <div class="page-picker">
+      <span class="label-key" id="di-page-label">Page</span>
+      <app-select
+        labelledBy="di-page-label"
+        [options]="pageOptions()"
+        [value]="shownPageId()"
+        (valueChange)="selectPage($event)"
+      />
+    </div>
+  }
+</ng-template>
+@if (roots().length > 0) {
+  <p class="intro">
+    Every component and directive gets an injector. When it asks for a token, Angular walks up this
+    tree, then through the environment injectors, until something provides it.
+  </p>
+  <app-angular-unavailable [page]="angularPage()" capability="injectorMetadata" compact>
+    This tree shows the element injectors the page reports, with providers and environment injectors
+    only where its Angular exposes them.
+  </app-angular-unavailable>
+
+  <div class="toolbar">
+    <div class="segmented" role="group" aria-label="Injector tree">
+      <button
+        type="button"
+        [class.active]="view() === 'element'"
+        [attr.aria-pressed]="view() === 'element'"
+        (click)="setView('element')"
+      >
+        Elements <span class="pill">{{ elementCount() }}</span>
+      </button>
+      <button
+        type="button"
+        [class.active]="view() === 'environment'"
+        [attr.aria-pressed]="view() === 'environment'"
+        (click)="setView('environment')"
+      >
+        Environment <span class="pill">{{ environmentCount() }}</span>
+      </button>
+    </div>
+    <app-search-field
+      #queryInput
+      class="search"
+      placeholder="Filter by token, component or injector"
+      saveKey="injectors"
+      [(value)]="query"
+    />
+    <ng-container [ngTemplateOutlet]="pagePicker" />
+    @if (view() === 'element') {
+      <label class="checkbox">
+        <input
+          type="checkbox"
+          [checked]="componentsOnly()"
+          (change)="componentsOnly.set(!componentsOnly())"
+        />
+        Components only
+      </label>
+    }
+    <label class="checkbox">
+      <input
+        type="checkbox"
+        [checked]="onlyProviding()"
+        (change)="onlyProviding.set(!onlyProviding())"
+      />
+      With providers
+    </label>
+    <label class="checkbox">
+      <input
+        type="checkbox"
+        [checked]="hideFramework()"
+        (change)="setHideFramework(!hideFramework())"
+      />
+      Hide framework
+    </label>
+    @if (hideFramework()) {
+      <span class="total framework-hidden">{{ frameworkHiddenText() }}</span>
+    }
+    @if (zone(); as zone) {
+      <span class="total">Change detection: {{ zone }}</span>
+    }
+    <button
+      type="button"
+      class="refresh"
+      [attr.aria-disabled]="!shownPageId() || null"
+      (click)="refresh()"
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" />
+      </svg>
+      Refresh
+    </button>
+  </div>
+
+  @if (truncated()) {
+    <p class="notice">
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 11v5M12 8h.01" />
+      </svg>
+      <span>
+        <strong>The page reported only part of its injector tree.</strong>
+        It keeps at most {{ limits().elements }} element injectors and {{ limits().injectors }} in
+        all, and leaves out injectors nested more than {{ limits().depth }} levels deep, so a lookup
+        path or a provider can point to one that is not listed.
+      </span>
+    </p>
+  }
+
+  @if (providedBy().length) {
+    <div class="where">
+      <span class="where-label">Provided by</span>
+      @for (hit of providedBy(); track hit.id) {
+        <button type="button" class="chip" (click)="reveal(hit.id)">
+          <span class="dot" [style.background]="tone(hit.kind)" aria-hidden="true"></span>
+          <span class="mono">{{ hit.label }}</span>
+          <span class="chip-tokens">{{ hit.tokens }}</span>
+        </button>
+      }
+      @if (providedByMore(); as more) {
+        <span class="more">+{{ more }} more</span>
+      }
+    </div>
+  } @else if (query().trim() && !rows().length) {
+    <div class="where muted">
+      Nothing here matches “{{ query().trim() }}”.
+      <button type="button" class="link" (click)="clearQuery()">Clear filters</button>
+    </div>
+  }
+
+  @if (orphaned().length) {
+    <div appInjectorOrphans class="orphans"></div>
+  }
+
+  <div class="layout" [style.--detail-size.px]="detailSize()">
+    @if (!rows().length) {
+      <div class="state">
+        <p class="state-title">No injectors to show</p>
+        <p class="state-hint">
+          @if (hideFramework() && frameworkHiddenCount().injectors > 0) {
+            Turn off “Hide framework” to see Angular's own injectors.
+          } @else if (onlyProviding()) {
+            None of them provide anything themselves.
+          } @else if (componentsOnly() && view() === 'element') {
+            Turn off “Components only” to see directives.
+          } @else {
+            Try a different search.
+          }
+        </p>
+      </div>
+    }
+    <div
+      appInjectorTree
+      class="tree"
+      role="tree"
+      [attr.aria-label]="view() === 'element' ? 'Element injectors' : 'Environment injectors'"
+      [hidden]="!rows().length"
+    ></div>
+    <app-splitter
+      view="injectors"
+      label="Resize the injector detail"
+      [min]="300"
+      [max]="900"
+      [defaultSize]="420"
+      [(size)]="detailSize"
+    />
+
+    @if (gone(); as name) {
+      <section
+        appInjectorGone
+        class="detail gone"
+        aria-labelledby="di-detail-title"
+        [name]="name"
+      ></section>
+    } @else if (selected(); as sel) {
+      <section
+        appInjectorDetail
+        class="detail"
+        aria-labelledby="di-detail-title"
+        [node]="sel"
+        [canShowComponent]="canShowComponent()"
+        (showComponent)="openComponent($event)"
+      ></section>
+    }
+  </div>
+  <app-startup-section [rpc]="rpc()" [pageId]="shownPageId()" />
+} @else if (!loaded()) {
+  <div class="state" role="status">
+    <span class="spinner" aria-hidden="true"></span>
+    <p class="state-title">Loading dependency injection data…</p>
+  </div>
+} @else if (loadFailed() && sourceProviders().length === 0) {
+  <ng-container [ngTemplateOutlet]="loadError" [ngTemplateOutletContext]="{ compact: false }" />
+} @else if (sourceProviders().length === 0) {
+  @if (pageOptions().length > 1) {
+    <div class="toolbar">
+      <ng-container [ngTemplateOutlet]="pagePicker" />
+    </div>
+  }
+  <div class="state">
+    <p class="state-title">No DI data found</p>
+    <p class="state-hint">
+      Open the app in a browser with the devtools connected to see its live injectors. No providers,
+      injectables or inject() calls were found in the source either.
+    </p>
+  </div>
+} @else {
+  <div class="toolbar">
+    <app-search-field
+      #queryInput
+      class="search"
+      placeholder="Filter by token or file"
+      saveKey="injectors-source"
+      [(value)]="query"
+    />
+    <ng-container [ngTemplateOutlet]="pagePicker" />
+    <span class="total" aria-live="polite">
+      {{ sourceMatchCount() }} of {{ sourceProviders().length }}
+    </span>
+  </div>
+
+  @if (loadFailed()) {
+    <ng-container [ngTemplateOutlet]="loadError" [ngTemplateOutletContext]="{ compact: true }" />
+  }
+  <p class="notice">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v5M12 8h.01" />
+    </svg>
+    <span>
+      <strong>DI from the source scan.</strong>
+      Connect the overlay to a development build to see the live injector tree.
+    </span>
+  </p>
+  <app-angular-unavailable [page]="angularPage()" capability="debugApi" compact />
+  @if (groupedProviders().length === 0) {
+    <div class="state">
+      <p class="state-title">No providers match “{{ query() }}”</p>
+      <p class="state-hint">Try part of a token name or a file path.</p>
+      <button type="button" (click)="clearQuery()">Clear filters</button>
+    </div>
+  } @else {
+    <div appSourceProviders class="source-providers"></div>
+  }
+}
diff --git a/app/src/pages/di-inspector.scss b/app/src/pages/di-inspector.scss
new file mode 100644
index 00000000..9f77aadf
--- /dev/null
+++ b/app/src/pages/di-inspector.scss
@@ -0,0 +1,334 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+:host {
+  --directive: #7cb4ff;
+  display: block;
+  color: var(--text);
+  font-size: 13px;
+
+  @include m.light {
+    --directive: #1e40af;
+  }
+}
+@include inj.mono;
+.intro {
+  max-width: 720px;
+  margin: 0 0 12px;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.page-picker {
+  display: flex;
+  flex: 0 1 240px;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.page-picker app-select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.label-key {
+  flex: none;
+  color: var(--text-2);
+  font-size: 12px;
+}
+.segmented {
+  display: inline-flex;
+  flex: none;
+  height: var(--control-h);
+  padding: 3px;
+  gap: 2px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+}
+.segmented button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 150ms var(--ease),
+    color 150ms var(--ease);
+}
+.segmented button:hover {
+  color: var(--text);
+}
+.segmented button.active {
+  background: var(--surface-3);
+  color: var(--text-strong);
+}
+.segmented button:focus-visible {
+  @include m.focus-ring(-2px);
+}
+@include inj.pill;
+.segmented .active .pill {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.search {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+.search-icon {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+.search:focus-within .search-icon {
+  stroke: var(--accent);
+}
+input[type='search'] {
+  width: 100%;
+  height: 34px;
+  padding: 0 12px 0 34px;
+  background: var(--bg);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 13px;
+  transition:
+    border-color 150ms var(--ease),
+    box-shadow 150ms var(--ease);
+}
+input[type='search']::placeholder {
+  color: var(--text-3);
+}
+input[type='search']:focus-visible {
+  @include m.field-focus;
+}
+.checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  color: var(--text-2);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.checkbox:hover {
+  color: var(--text);
+}
+.checkbox input {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+.checkbox input:focus-visible {
+  @include m.focus-ring;
+}
+.total {
+  flex: none;
+  color: var(--text-2);
+  font-size: 12px;
+  white-space: nowrap;
+}
+.where {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--accent-line);
+  border-radius: var(--radius-sm);
+  background: var(--accent-soft);
+  @include m.enter(0.2s);
+}
+.where.muted {
+  border-color: var(--border);
+  background: var(--surface);
+  color: var(--text-2);
+}
+.where-label {
+  @include m.label;
+  margin-right: 4px;
+  color: var(--accent);
+}
+@include inj.chips;
+.chip-tokens {
+  color: var(--text-2);
+  @include m.truncate;
+}
+.more {
+  color: var(--text-2);
+  font-size: 12px;
+}
+@include inj.link;
+@include inj.dot;
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+.layout > app-splitter {
+  display: none;
+}
+@media (min-width: 880px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr) auto min(var(--detail-size, 420px), 70%);
+  }
+  .layout > * {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .layout > app-splitter {
+    display: block;
+    grid-column: 2;
+  }
+  .layout > .detail {
+    grid-column: 3;
+  }
+  .detail {
+    position: sticky;
+    top: 64px;
+    max-height: calc(100vh - 150px);
+    overflow: auto;
+  }
+}
+.tree {
+  min-width: 0;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  @include m.enter;
+}
+.detail {
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  @include m.enter;
+}
+@include inj.state;
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+}
+@include inj.buttons;
+@include inj.state-buttons;
+.load-error.compact {
+  margin: 0 0 16px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+.state-title + .state-hint + button {
+  margin-top: 8px;
+}
+@include inj.state-button-focus;
+.notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.notice strong {
+  color: var(--text);
+  font-weight: 600;
+}
+.notice svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.refresh {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--control-h);
+  margin-left: auto;
+  padding: 0 12px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: 12px;
+  cursor: pointer;
+  transition:
+    background-color 150ms var(--ease),
+    border-color 150ms var(--ease);
+}
+.refresh:hover {
+  background: var(--surface-3);
+  border-color: var(--accent-line);
+}
+.refresh[aria-disabled='true'] {
+  cursor: default;
+  opacity: 0.6;
+}
+.refresh:focus-visible {
+  @include m.focus-ring;
+}
+@include inj.chevron;
+.orphans {
+  margin: 0 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+.source-providers {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  @include m.enter;
+}
diff --git a/app/src/pages/di-inspector.ts b/app/src/pages/di-inspector.ts
index f1f53236..91db2ad3 100644
--- a/app/src/pages/di-inspector.ts
+++ b/app/src/pages/di-inspector.ts
@@ -1,14 +1,9 @@
 import {
   Component,
-  DestroyRef,
-  ElementRef,
-  Injector,
-  afterNextRender,
   computed,
   effect,
   inject,
   input,
-  linkedSignal,
   output,
   signal,
   untracked,
@@ -16,93 +11,35 @@ import {
 } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import type { DevframeRpcClient } from 'devframe/client';
-import { pickPage, type ReportedPage } from '../live-pages';
-import { hostPageId } from '../page-id';
 import { angularPageFor, injectAngularPages } from '../angular-pages';
 import { AngularUnavailable } from '../ui/angular-unavailable';
-import { Select, type SelectOption } from '../ui/select';
-import { zoneLabel } from './dashboard';
-import { SourceLink } from '../ui/source-link';
-import { StoreGlobal } from '../ui/store-global';
-import { ProviderValue } from './di-provider-value';
+import { SearchField } from '../ui/search-field';
+import { Select } from '../ui/select';
+import { Splitter, storedPaneSize } from '../ui/splitter';
 import type { ComponentFocus } from '../types/component-focus.types';
 import type { InjectorFocus } from '../types/injector-focus.types';
-import { storeFlag, storedFlag } from '../view-prefs';
 import { StartupSection } from './startup-section';
-import { SearchField } from '../ui/search-field';
-import { Splitter, storedPaneSize } from '../ui/splitter';
-import type {
-  InjectorTreeLimits,
-  InjectorTreeNode,
-  ProviderInfo as PanelProviderInfo,
-} from '@pangular-inspector/devtools/internal/types';
-
-type ProviderInfo = PanelProviderInfo;
-type InjectorNode = InjectorTreeNode;
-
-interface SourceProvider {
-  token: string;
-  source: string;
-  file: string;
-  line: number;
-  providedIn?: string;
-  type: string;
-}
-
-interface Row {
-  node: InjectorNode;
-  depth: number;
-  hasChildren: boolean;
-  expanded: boolean;
-}
-
-type TreeView = 'element' | 'environment';
-
-interface InjectorPage {
-  roots?: unknown;
-  environment?: unknown;
-  truncated?: unknown;
-  limits?: unknown;
-  zone?: unknown;
-  reportedAt?: unknown;
-}
-
-interface InjectorTreeState extends InjectorPage {
-  pages?: Record<string, InjectorPage>;
-}
-
-const NULL_ID = 'inj-null';
-const HIDE_FRAMEWORK_PREF = 'injectors.hideFramework';
-const MAX_PROVIDED_BY = 12;
-/** The `type` the source scan gives a provide*() call it can't resolve to tokens. */
-const HELPER_TYPE = 'helper';
-/** Source entries that provide a token, which the orphaned providers hint checks. */
-const PROVIDING_TYPES = new Set(['provider', 'injectable']);
-/** How long typing must pause before the search result is announced. */
-const SEARCH_ANNOUNCE_MS = 600;
-
-// Text tones: these color the kind letter and badge on a 14 to 16% tint of
-// themselves, so they use the stronger `-text` tokens.
-const KIND_TONE: Record<string, string> = {
-  component: 'var(--accent-text)',
-  directive: 'var(--directive)',
-  environment: 'var(--ok-text)',
-  null: 'var(--text-3)',
-};
-
-function kindOf(node: InjectorNode): 'component' | 'directive' | 'environment' {
-  if (node.injector.type !== 'element') return 'environment';
-  return node.injector.component ? 'component' : 'directive';
-}
-
-function labelOf(node: InjectorNode): string {
-  return node.injector.type === 'element' ? `<${node.injector.name}>` : node.injector.name;
-}
-
-function isTree(value: unknown): value is InjectorNode[] {
-  return Array.isArray(value);
-}
-
+import { InjectorDetail } from './injectors/injector-detail';
+import { InjectorGone } from './injectors/injector-gone';
+import {
+  SEARCH_ANNOUNCE_MS,
+  labelOf,
+  toneOf,
+  type InjectorNode,
+  type TreeView,
+} from './injectors/injector-model';
+import { InjectorOrphans } from './injectors/injector-orphans';
+import { InjectorTree } from './injectors/injector-tree';
+import { InjectorsState } from './injectors/injectors-state';
+import { SourceProviders } from './injectors/source-providers';
+import { SourceScan } from './injectors/source-scan';
+
+/**
+ * The Injectors page: the toolbar, the notices and the tree with its detail, or the source scan
+ * while no page reports a live tree. The sections live in `./injectors/` and share the page's
+ * {@link InjectorsState} and {@link SourceScan}; the page keeps the members its tests and the
+ * shell read on itself.
+ */
 @Component({
   selector: 'app-di-inspector',
   imports: [
@@ -110,1741 +47,17 @@ function isTree(value: unknown): value is InjectorNode[] {
     Splitter,
     AngularUnavailable,
     NgTemplateOutlet,
-    ProviderValue,
+    InjectorDetail,
+    InjectorGone,
+    InjectorOrphans,
+    InjectorTree,
     Select,
-    SourceLink,
+    SourceProviders,
     StartupSection,
-    StoreGlobal,
   ],
-  template: `
-    <p class="sr-only" role="status">{{ announcement() }}</p>
-    <ng-template #loadError let-compact="compact">
-      <div class="state load-error" [class.compact]="compact" role="alert">
-        <p class="state-title">
-          {{ compact ? "Couldn't load the live injector tree" : "Couldn't load DI data" }}
-        </p>
-        <p class="state-hint">
-          The devtools server did not answer. Check that it is still running, then retry.
-        </p>
-        <button type="button" [attr.aria-disabled]="retrying() || null" (click)="retry()">
-          {{ retrying() ? 'Retrying…' : 'Retry' }}
-        </button>
-      </div>
-    </ng-template>
-    <ng-template #pagePicker>
-      @if (pageOptions().length > 1) {
-        <div class="page-picker">
-          <span class="label-key" id="di-page-label">Page</span>
-          <app-select
-            labelledBy="di-page-label"
-            [options]="pageOptions()"
-            [value]="shownPageId()"
-            (valueChange)="selectPage($event)"
-          />
-        </div>
-      }
-    </ng-template>
-    @if (roots().length > 0) {
-      <p class="intro">
-        Every component and directive gets an injector. When it asks for a token, Angular walks up
-        this tree, then through the environment injectors, until something provides it.
-      </p>
-      <app-angular-unavailable [page]="angularPage()" capability="injectorMetadata" compact>
-        This tree shows the element injectors the page reports, with providers and environment
-        injectors only where its Angular exposes them.
-      </app-angular-unavailable>
-
-      <div class="toolbar">
-        <div class="segmented" role="group" aria-label="Injector tree">
-          <button
-            type="button"
-            [class.active]="view() === 'element'"
-            [attr.aria-pressed]="view() === 'element'"
-            (click)="setView('element')"
-          >
-            Elements <span class="pill">{{ elementCount() }}</span>
-          </button>
-          <button
-            type="button"
-            [class.active]="view() === 'environment'"
-            [attr.aria-pressed]="view() === 'environment'"
-            (click)="setView('environment')"
-          >
-            Environment <span class="pill">{{ environmentCount() }}</span>
-          </button>
-        </div>
-        <app-search-field
-          #queryInput
-          class="search"
-          placeholder="Filter by token, component or injector"
-          saveKey="injectors"
-          [(value)]="query"
-        />
-        <ng-container [ngTemplateOutlet]="pagePicker" />
-        @if (view() === 'element') {
-          <label class="checkbox">
-            <input
-              type="checkbox"
-              [checked]="componentsOnly()"
-              (change)="componentsOnly.set(!componentsOnly())"
-            />
-            Components only
-          </label>
-        }
-        <label class="checkbox">
-          <input
-            type="checkbox"
-            [checked]="onlyProviding()"
-            (change)="onlyProviding.set(!onlyProviding())"
-          />
-          With providers
-        </label>
-        <label class="checkbox">
-          <input
-            type="checkbox"
-            [checked]="hideFramework()"
-            (change)="setHideFramework(!hideFramework())"
-          />
-          Hide framework
-        </label>
-        @if (hideFramework()) {
-          <span class="total framework-hidden">{{ frameworkHiddenText() }}</span>
-        }
-        @if (zone(); as zone) {
-          <span class="total">Change detection: {{ zone }}</span>
-        }
-        <button
-          type="button"
-          class="refresh"
-          [attr.aria-disabled]="!shownPageId() || null"
-          (click)="refresh()"
-        >
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7" />
-          </svg>
-          Refresh
-        </button>
-      </div>
-
-      @if (truncated()) {
-        <p class="notice">
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <circle cx="12" cy="12" r="9" />
-            <path d="M12 11v5M12 8h.01" />
-          </svg>
-          <span>
-            <strong>The page reported only part of its injector tree.</strong>
-            It keeps at most {{ limits().elements }} element injectors and
-            {{ limits().injectors }} in all, and leaves out injectors nested more than
-            {{ limits().depth }} levels deep, so a lookup path or a provider can point to one that
-            is not listed.
-          </span>
-        </p>
-      }
-
-      @if (providedBy().length) {
-        <div class="where">
-          <span class="where-label">Provided by</span>
-          @for (hit of providedBy(); track hit.id) {
-            <button type="button" class="chip" (click)="reveal(hit.id)">
-              <span class="dot" [style.background]="tone(hit.kind)" aria-hidden="true"></span>
-              <span class="mono">{{ hit.label }}</span>
-              <span class="chip-tokens">{{ hit.tokens }}</span>
-            </button>
-          }
-          @if (providedByMore(); as more) {
-            <span class="more">+{{ more }} more</span>
-          }
-        </div>
-      } @else if (query().trim() && !rows().length) {
-        <div class="where muted">
-          Nothing here matches “{{ query().trim() }}”.
-          <button type="button" class="link" (click)="clearQuery()">Clear filters</button>
-        </div>
-      }
-
-      @if (orphaned().length) {
-        <div class="orphans">
-          <button
-            type="button"
-            class="orphans-toggle"
-            [attr.aria-expanded]="orphansOpen()"
-            aria-controls="di-orphans"
-            (click)="orphansOpen.set(!orphansOpen())"
-          >
-            <svg
-              class="chevron"
-              [class.open]="orphansOpen()"
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-            >
-              <path d="m9 6 6 6-6 6" />
-            </svg>
-            <span class="hint-tag">Hint</span>
-            {{ orphanedText() }}
-          </button>
-          <div id="di-orphans" class="orphans-body" [hidden]="!orphansOpen()">
-            <p class="hint">
-              Provided in your source, but nothing on this page has injected them so far. This is
-              not an error: a guard, an interceptor or code that has not run yet may still use them.
-            </p>
-            <ul class="orphan-list">
-              @for (p of orphaned(); track p.token + p.file + p.line) {
-                <li>
-                  <span class="token mono">{{ p.token }}</span>
-                  @if (p.providedIn) {
-                    <span class="flag">providedIn: {{ p.providedIn }}</span>
-                  }
-                  <app-source-link class="orphan-file" [file]="p.file" [line]="p.line" />
-                </li>
-              }
-            </ul>
-          </div>
-        </div>
-      }
-
-      <div class="layout" [style.--detail-size.px]="detailSize()">
-        @if (!rows().length) {
-          <div class="state">
-            <p class="state-title">No injectors to show</p>
-            <p class="state-hint">
-              @if (hideFramework() && frameworkHiddenCount().injectors > 0) {
-                Turn off “Hide framework” to see Angular's own injectors.
-              } @else if (onlyProviding()) {
-                None of them provide anything themselves.
-              } @else if (componentsOnly() && view() === 'element') {
-                Turn off “Components only” to see directives.
-              } @else {
-                Try a different search.
-              }
-            </p>
-          </div>
-        }
-        <div
-          class="tree"
-          role="tree"
-          [attr.aria-label]="view() === 'element' ? 'Element injectors' : 'Environment injectors'"
-          [hidden]="!rows().length"
-          (keydown)="onTreeKey($event)"
-        >
-          @for (row of rows(); track row.node.injector.id; let i = $index) {
-            <div
-              class="row"
-              role="treeitem"
-              [attr.aria-level]="row.depth + 1"
-              [attr.aria-expanded]="row.hasChildren ? row.expanded : null"
-              [attr.aria-selected]="selected()?.injector?.id === row.node.injector.id"
-              [attr.tabindex]="rovingId() === row.node.injector.id ? 0 : -1"
-              [attr.data-id]="row.node.injector.id"
-              [class.selected]="selected()?.injector?.id === row.node.injector.id"
-              [style.--depth]="row.depth"
-              (click)="select(row.node.injector.id)"
-              (focus)="focusId.set(row.node.injector.id); highlight(row.node)"
-              (blur)="highlight(null)"
-              (mouseenter)="highlight(row.node)"
-              (mouseleave)="highlight(null)"
-            >
-              @if (row.hasChildren) {
-                <span
-                  class="twisty"
-                  aria-hidden="true"
-                  [class.open]="row.expanded"
-                  (click)="toggle(row.node.injector.id, $event)"
-                >
-                  <svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
-                </span>
-              } @else {
-                <span class="twisty-space" aria-hidden="true"></span>
-              }
-              <span
-                class="kind"
-                [style.--tone]="tone(kind(row.node))"
-                [attr.title]="kind(row.node)"
-                aria-hidden="true"
-                >{{ kind(row.node)[0].toUpperCase() }}</span
-              >
-              <span class="sr-only">{{ kind(row.node) }}</span>
-              <span class="name mono">{{ label(row.node) }}</span>
-              @if (row.node.injector.inactive) {
-                <span class="flag inactive-flag">inactive</span>
-              }
-              @if (row.node.injector.component) {
-                <span class="sub">{{ row.node.injector.component }}</span>
-              } @else if (row.node.injector.directives?.length) {
-                <span class="sub">{{ row.node.injector.directives!.join(', ') }}</span>
-              }
-              <span class="meta">
-                @if ((row.node.dependencies?.length ?? 0) > 0) {
-                  <span class="count" [attr.title]="row.node.dependencies!.length + ' injected'">
-                    <svg viewBox="0 0 24 24" aria-hidden="true">
-                      <path d="M12 5v14M5 12l7 7 7-7" />
-                    </svg>
-                    <span class="sr-only">injects</span>
-                    {{ row.node.dependencies!.length }}
-                  </span>
-                }
-                @if (providerCount(row.node); as provided) {
-                  <span class="count provides" [attr.title]="provided + ' provided'">
-                    <svg viewBox="0 0 24 24" aria-hidden="true">
-                      <path d="M21 8 12 3 3 8v8l9 5 9-5z" />
-                    </svg>
-                    <span class="sr-only">provides</span>
-                    {{ provided }}
-                  </span>
-                }
-              </span>
-            </div>
-          }
-        </div>
-        <app-splitter
-          view="injectors"
-          label="Resize the injector detail"
-          [min]="300"
-          [max]="900"
-          [defaultSize]="420"
-          [(size)]="detailSize"
-        />
-
-        @if (gone(); as name) {
-          <section class="detail gone" aria-labelledby="di-detail-title">
-            <header class="detail-head">
-              <h2 id="di-detail-title" class="mono">{{ name }}</h2>
-            </header>
-            <div class="state compact">
-              <p class="state-hint">
-                This injector is no longer on the page. Its component or directive was destroyed.
-              </p>
-              @if (rows()[0]; as first) {
-                <button type="button" (click)="reveal(first.node.injector.id)">
-                  Show {{ label(first.node) }}
-                </button>
-              }
-            </div>
-          </section>
-        } @else if (selected(); as sel) {
-          <section class="detail" aria-labelledby="di-detail-title">
-            <header class="detail-head">
-              <span class="badge" [style.--tone]="tone(kind(sel))">{{ kind(sel) }}</span>
-              <h2 id="di-detail-title" class="mono">{{ label(sel) }}</h2>
-              @if (sel.injector.directives?.length) {
-                <ul class="classes" aria-label="Classes on this element">
-                  @for (name of sel.injector.directives; track name) {
-                    <li [class.is-component]="name === sel.injector.component">{{ name }}</li>
-                  }
-                </ul>
-              }
-              @if (canShowComponent() && sel.injector.componentId; as componentId) {
-                <button type="button" class="show-component" (click)="openComponent(componentId)">
-                  Show in Components
-                  <span class="sr-only">: {{ sel.injector.component }}</span>
-                </button>
-              }
-            </header>
-
-            @if (sel.injector.inactive) {
-              <p class="hint inactive-note">
-                Inactive: the router loaded this route's injector, but no element on the page uses
-                it now. It keeps the services it created until the app is reloaded.
-              </p>
-            }
-            <div class="block">
-              <h3>Lookup path</h3>
-              <p class="hint">Angular asks these injectors in order until one has the token.</p>
-              <ol class="path">
-                @for (step of path(); track step.id; let first = $first) {
-                  <li [class.current]="first">
-                    @if (step.id === nullId) {
-                      <span class="step null">
-                        <span
-                          class="dot"
-                          [style.background]="tone('null')"
-                          aria-hidden="true"
-                        ></span>
-                        Null injector
-                        <span class="hint-inline">throws NullInjectorError</span>
-                      </span>
-                    } @else {
-                      <button type="button" class="step" (click)="reveal(step.id)">
-                        <span
-                          class="dot"
-                          [style.background]="tone(step.kind)"
-                          aria-hidden="true"
-                        ></span>
-                        <span class="mono">{{ step.label }}</span>
-                        @if (step.providers) {
-                          <span class="step-count">
-                            {{ step.providers }}
-                            <span class="sr-only">{{
-                              step.providers === 1 ? 'provider' : 'providers'
-                            }}</span>
-                          </span>
-                        }
-                      </button>
-                    }
-                  </li>
-                }
-              </ol>
-            </div>
-
-            @if (sel.injector.type === 'element' || sel.dependencies) {
-              <div class="block">
-                <h3>
-                  {{
-                    sel.injector.type === 'element' ? 'Injected here' : 'Injected by its services'
-                  }}
-                  <span class="pill">{{ sel.dependencies?.length ?? 0 }}</span>
-                </h3>
-                @if (sel.injector.type !== 'element') {
-                  <p class="hint">Only services this injector has already created are listed.</p>
-                }
-                @if (sel.dependencies?.length) {
-                  <ul class="deps">
-                    @for (
-                      dep of sel.dependencies;
-                      track dep.from + (dep.tokenId ?? dep.token) + $index
-                    ) {
-                      <li class="dep" [class.hit]="matches(dep.token)">
-                        <div class="dep-main">
-                          <span class="token mono">{{ dep.token }}</span>
-                          @for (flag of dep.flags; track flag) {
-                            <span class="flag">{{ flag }}</span>
-                          }
-                        </div>
-                        <div class="dep-meta">
-                          @if (
-                            sel.injector.type !== 'element' ||
-                            (sel.injector.directives && sel.injector.directives.length > 1)
-                          ) {
-                            <span>for {{ dep.from }}</span>
-                          }
-                          @if (dep.providedBy; as by) {
-                            <button type="button" class="from" (click)="reveal(by)">
-                              <span
-                                class="dot"
-                                [style.background]="tone(kindById(by))"
-                                aria-hidden="true"
-                              ></span>
-                              from <span class="mono">{{ labelById(by) }}</span>
-                            </button>
-                          } @else if (dep.flags.includes('optional')) {
-                            <span class="from absent">optional, not provided</span>
-                          } @else {
-                            <span class="from missing">not provided anywhere</span>
-                          }
-                          <button
-                            type="button"
-                            class="link resolve-toggle"
-                            [attr.aria-expanded]="resolvingKey() === depKey(dep, $index)"
-                            [attr.aria-controls]="'di-resolve-' + $index"
-                            (click)="toggleResolve(depKey(dep, $index))"
-                          >
-                            Resolution
-                            <span class="sr-only">of {{ dep.token }}</span>
-                          </button>
-                        </div>
-                        <div
-                          class="resolution"
-                          [id]="'di-resolve-' + $index"
-                          [hidden]="resolvingKey() !== depKey(dep, $index)"
-                        >
-                          @if (resolvingKey() === depKey(dep, $index)) {
-                            <ol
-                              class="resolve-graph"
-                              [attr.aria-label]="'How Angular resolves ' + dep.token"
-                            >
-                              @for (step of resolution(dep); track step.id + $index) {
-                                <li [class]="'resolve-' + step.state">
-                                  <span class="resolve-dot" aria-hidden="true"></span>
-                                  @if (step.id === nullId) {
-                                    <span class="mono">Null injector</span>
-                                  } @else {
-                                    <button type="button" class="step" (click)="reveal(step.id)">
-                                      <span class="mono">{{ step.label }}</span>
-                                    </button>
-                                  }
-                                  <span class="resolve-state">{{ step.text }}</span>
-                                </li>
-                              }
-                            </ol>
-                          }
-                        </div>
-                      </li>
-                    }
-                  </ul>
-                } @else if (sel.injector.type === 'element') {
-                  <p class="empty-line">Nothing is injected through the constructor or inject().</p>
-                } @else {
-                  <p class="empty-line">No service created here has injected anything yet.</p>
-                }
-              </div>
-            }
-
-            <div class="block">
-              <h3>
-                Provides <span class="pill">{{ providerCount(sel) }}</span>
-              </h3>
-              @if (hiddenProviders(sel); as hidden) {
-                <p class="hint framework-note">
-                  {{ hidden }} framework {{ hidden === 1 ? 'provider' : 'providers' }} hidden.
-                  <button type="button" class="link" (click)="setHideFramework(false)">
-                    Show them
-                  </button>
-                </p>
-              }
-              @if (providerCount(sel)) {
-                <ul class="providers">
-                  @for (
-                    p of sel.providers;
-                    track (p.tokenId ?? p.token) + $index;
-                    let index = $index
-                  ) {
-                    @if (!isHidden(p)) {
-                      <li class="provider" [class.hit]="matches(p.token)">
-                        <div class="dep-main">
-                          <span class="token mono">{{ p.token }}</span>
-                          <span class="flag kind-flag">{{
-                            p.type === 'unknown' ? 'provider' : 'use' + capital(p.type)
-                          }}</span>
-                          @if (p.isViewProvider) {
-                            <span class="flag">viewProviders</span>
-                          }
-                          @if (p.multi) {
-                            <span class="flag">multi</span>
-                          }
-                          @if (p.framework) {
-                            <span class="flag">Angular</span>
-                          }
-                        </div>
-                        @if (p.importPath?.length) {
-                          <div class="dep-meta">via {{ p.importPath!.join(' › ') }}</div>
-                        }
-                        @if (sourceOf(p.token); as places) {
-                          <div class="dep-meta declared">
-                            <span>Declared in</span>
-                            @for (place of places.shown; track place.file + place.line) {
-                              <app-source-link
-                                class="decl-file"
-                                [file]="place.file"
-                                [line]="place.line"
-                              />
-                            }
-                            @if (places.more) {
-                              <span>+{{ places.more }} more</span>
-                            }
-                          </div>
-                        }
-                        <app-store-global
-                          class="provider-global"
-                          [rpc]="rpc()"
-                          [pageId]="shownPageId()"
-                          [target]="{
-                            kind: 'provider',
-                            injectorId: sel.injector.id,
-                            token: p.token,
-                            tokenId: p.tokenId,
-                            index: index,
-                          }"
-                          [label]="p.token + positionSuffix(sel.providers, index)"
-                          [canLog]="true"
-                        />
-                        <app-provider-value
-                          [rpc]="rpc()"
-                          [pageId]="shownPageId()"
-                          [injectorId]="sel.injector.id"
-                          [token]="p.token"
-                          [tokenId]="p.tokenId"
-                          [index]="index"
-                          [position]="tokenPosition(sel.providers, index)"
-                        />
-                      </li>
-                    }
-                  }
-                </ul>
-              } @else if (!hiddenProviders(sel)) {
-                <p class="empty-line">
-                  @if (sel.injector.type === 'element') {
-                    No providers or viewProviders on this element.
-                  } @else {
-                    This injector has no providers of its own.
-                  }
-                </p>
-              }
-            </div>
-          </section>
-        }
-      </div>
-      <app-startup-section [rpc]="rpc()" [pageId]="shownPageId()" />
-    } @else if (!loaded()) {
-      <div class="state" role="status">
-        <span class="spinner" aria-hidden="true"></span>
-        <p class="state-title">Loading dependency injection data…</p>
-      </div>
-    } @else if (loadFailed() && sourceProviders().length === 0) {
-      <ng-container [ngTemplateOutlet]="loadError" [ngTemplateOutletContext]="{ compact: false }" />
-    } @else if (sourceProviders().length === 0) {
-      @if (pageOptions().length > 1) {
-        <div class="toolbar">
-          <ng-container [ngTemplateOutlet]="pagePicker" />
-        </div>
-      }
-      <div class="state">
-        <p class="state-title">No DI data found</p>
-        <p class="state-hint">
-          Open the app in a browser with the devtools connected to see its live injectors. No
-          providers, injectables or inject() calls were found in the source either.
-        </p>
-      </div>
-    } @else {
-      <div class="toolbar">
-        <app-search-field
-          #queryInput
-          class="search"
-          placeholder="Filter by token or file"
-          saveKey="injectors-source"
-          [(value)]="query"
-        />
-        <ng-container [ngTemplateOutlet]="pagePicker" />
-        <span class="total" aria-live="polite">
-          {{ sourceMatchCount() }} of {{ sourceProviders().length }}
-        </span>
-      </div>
-
-      @if (loadFailed()) {
-        <ng-container
-          [ngTemplateOutlet]="loadError"
-          [ngTemplateOutletContext]="{ compact: true }"
-        />
-      }
-      <p class="notice">
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <circle cx="12" cy="12" r="9" />
-          <path d="M12 11v5M12 8h.01" />
-        </svg>
-        <span>
-          <strong>DI from the source scan.</strong>
-          Connect the overlay to a development build to see the live injector tree.
-        </span>
-      </p>
-      <app-angular-unavailable [page]="angularPage()" capability="debugApi" compact />
-      @if (groupedProviders().length === 0) {
-        <div class="state">
-          <p class="state-title">No providers match “{{ query() }}”</p>
-          <p class="state-hint">Try part of a token name or a file path.</p>
-          <button type="button" (click)="clearQuery()">Clear filters</button>
-        </div>
-      } @else {
-        <div class="source-providers">
-          @for (group of groupedProviders(); track group.type) {
-            <section class="provider-group">
-              @if (group.type === helperType) {
-                <h2>
-                  <button
-                    type="button"
-                    class="group-toggle"
-                    [attr.aria-expanded]="helpersShown()"
-                    aria-controls="di-helpers"
-                    (click)="helpersOpen.set(!helpersOpen())"
-                  >
-                    <svg
-                      class="chevron"
-                      [class.open]="helpersShown()"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="m9 6 6 6-6 6" />
-                    </svg>
-                    {{ group.label }}
-                    <span class="section-count">{{ group.items.length }}</span>
-                  </button>
-                </h2>
-                <p class="hint helper-hint" [hidden]="!helpersShown()">
-                  provide*() calls the scan can't resolve to the tokens they register, such as your
-                  own provider functions.
-                </p>
-              } @else {
-                <h2>
-                  {{ group.label }} <span class="section-count">{{ group.items.length }}</span>
-                </h2>
-              }
-              <ul
-                class="provider-list"
-                role="list"
-                [attr.id]="group.type === helperType ? 'di-helpers' : null"
-                [hidden]="group.type === helperType && !helpersShown()"
-              >
-                @for (p of group.items; track p.token + p.file + p.line) {
-                  <li class="provider-card">
-                    <div class="provider-header">
-                      <span class="token">{{ p.token }}</span>
-                      @if (p.providedIn) {
-                        <span class="provided-in">providedIn: {{ p.providedIn }}</span>
-                      }
-                      @if (p.type === helperType) {
-                        <span class="flag">helper (unresolved)</span>
-                      }
-                    </div>
-                    <div class="provider-meta">
-                      <app-source-link class="path" [file]="p.file" [line]="p.line" />
-                      @if (
-                        p.source !== 'class' &&
-                        p.source !== 'providers array' &&
-                        p.type !== helperType
-                      ) {
-                        <span class="as">as {{ p.source }}</span>
-                      }
-                    </div>
-                  </li>
-                }
-              </ul>
-            </section>
-          }
-        </div>
-      }
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      --directive: #7cb4ff;
-      display: block;
-      color: var(--text);
-      font-size: 13px;
-
-      @include m.light {
-        --directive: #1e40af;
-      }
-    }
-    .mono {
-      font-family: var(--font-mono);
-    }
-    .intro {
-      max-width: 720px;
-      margin: 0 0 12px;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px 12px;
-      align-items: center;
-      margin: 0 0 12px;
-      padding: 8px;
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    .page-picker {
-      display: flex;
-      flex: 0 1 240px;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-    }
-    .page-picker app-select {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-    .label-key {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .segmented {
-      display: inline-flex;
-      flex: none;
-      height: var(--control-h);
-      padding: 3px;
-      gap: 2px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--bg);
-    }
-    .segmented button {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      height: 100%;
-      padding: 0 10px;
-      border: 0;
-      border-radius: 6px;
-      background: none;
-      color: var(--text-2);
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition:
-        background-color 150ms var(--ease),
-        color 150ms var(--ease);
-    }
-    .segmented button:hover {
-      color: var(--text);
-    }
-    .segmented button.active {
-      background: var(--surface-3);
-      color: var(--text-strong);
-    }
-    .segmented button:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .pill {
-      display: inline-flex;
-      align-items: center;
-      min-width: 18px;
-      height: 16px;
-      padding: 0 5px;
-      justify-content: center;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 10px;
-      font-weight: 600;
-      letter-spacing: 0;
-      font-variant-numeric: tabular-nums;
-    }
-    .segmented .active .pill {
-      background: var(--accent-soft);
-      color: var(--accent);
-    }
-    .search {
-      position: relative;
-      flex: 1 1 220px;
-      min-width: 0;
-    }
-    .search-icon {
-      position: absolute;
-      top: 50%;
-      left: 12px;
-      width: 14px;
-      height: 14px;
-      transform: translateY(-50%);
-      fill: none;
-      stroke: var(--text-3);
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      pointer-events: none;
-    }
-    .search:focus-within .search-icon {
-      stroke: var(--accent);
-    }
-    input[type='search'] {
-      width: 100%;
-      height: 34px;
-      padding: 0 12px 0 34px;
-      background: var(--bg);
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      color: var(--text);
-      font-size: 13px;
-      transition:
-        border-color 150ms var(--ease),
-        box-shadow 150ms var(--ease);
-    }
-    input[type='search']::placeholder {
-      color: var(--text-3);
-    }
-    input[type='search']:focus-visible {
-      @include m.field-focus;
-    }
-    .checkbox {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      height: 34px;
-      color: var(--text-2);
-      white-space: nowrap;
-      cursor: pointer;
-    }
-    .checkbox:hover {
-      color: var(--text);
-    }
-    .checkbox input {
-      width: 15px;
-      height: 15px;
-      margin: 0;
-      accent-color: var(--accent);
-      cursor: pointer;
-    }
-    .checkbox input:focus-visible {
-      @include m.focus-ring;
-    }
-    .total {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-      white-space: nowrap;
-    }
-    .where {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px;
-      margin: 0 0 12px;
-      padding: 8px 10px;
-      border: 1px solid var(--accent-line);
-      border-radius: var(--radius-sm);
-      background: var(--accent-soft);
-      @include m.enter(0.2s);
-    }
-    .where.muted {
-      border-color: var(--border);
-      background: var(--surface);
-      color: var(--text-2);
-    }
-    .where-label {
-      @include m.label;
-      margin-right: 4px;
-      color: var(--accent);
-    }
-    .chip,
-    .from,
-    .step {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      min-width: 0;
-      max-width: 100%;
-      height: 26px;
-      padding: 0 10px;
-      border: 1px solid var(--control-border);
-      border-radius: 99px;
-      background: var(--surface);
-      color: var(--text);
-      font-size: 12px;
-      cursor: pointer;
-      transition:
-        border-color 150ms var(--ease),
-        background-color 150ms var(--ease);
-    }
-    .chip:hover,
-    .from:hover,
-    .step:hover {
-      border-color: var(--accent-line);
-      background: var(--surface-2);
-    }
-    .chip:focus-visible,
-    .from:focus-visible,
-    .step:focus-visible,
-    .link:focus-visible {
-      @include m.focus-ring;
-    }
-    .chip-tokens {
-      color: var(--text-2);
-      @include m.truncate;
-    }
-    .more {
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .link {
-      padding: 0;
-      border: 0;
-      background: none;
-      color: var(--accent);
-      font-size: 13px;
-      cursor: pointer;
-      text-decoration: underline;
-      text-underline-offset: 2px;
-    }
-    .dot {
-      flex: none;
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-    }
-    .layout {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      gap: 12px;
-      align-items: start;
-    }
-    .layout > app-splitter {
-      display: none;
-    }
-    @media (min-width: 880px) {
-      .layout {
-        grid-template-columns: minmax(0, 1fr) auto min(var(--detail-size, 420px), 70%);
-      }
-      .layout > * {
-        grid-column: 1;
-        grid-row: 1;
-      }
-      .layout > app-splitter {
-        display: block;
-        grid-column: 2;
-      }
-      .layout > .detail {
-        grid-column: 3;
-      }
-      .detail {
-        position: sticky;
-        top: 64px;
-        max-height: calc(100vh - 150px);
-        overflow: auto;
-      }
-    }
-    .tree {
-      min-width: 0;
-      padding: 6px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      @include m.enter;
-    }
-    .row {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      min-height: 32px;
-      padding: 0 8px 0 calc(4px + var(--depth, 0) * 18px);
-      border-radius: var(--radius-sm);
-      cursor: pointer;
-      transition: background-color 120ms var(--ease);
-    }
-    .row::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 14px;
-      width: calc(var(--depth, 0) * 18px);
-      background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 18px);
-      pointer-events: none;
-    }
-    .row:hover {
-      background: var(--surface-2);
-    }
-    .row:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .row.selected {
-      background: var(--accent-soft);
-      box-shadow: inset 2px 0 0 var(--accent);
-    }
-    .twisty,
-    .twisty-space {
-      flex: none;
-      width: 20px;
-      height: 20px;
-    }
-    .twisty {
-      display: grid;
-      place-items: center;
-      padding: 0;
-      border: 0;
-      border-radius: 4px;
-      background: none;
-      color: var(--text-3);
-      cursor: pointer;
-    }
-    .twisty:hover {
-      color: var(--text);
-      background: var(--surface-3);
-    }
-    .twisty svg {
-      width: 14px;
-      height: 14px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      transition: transform 150ms var(--ease);
-    }
-    .twisty.open svg {
-      transform: rotate(90deg);
-    }
-    .kind {
-      flex: none;
-      display: grid;
-      place-items: center;
-      width: 18px;
-      height: 18px;
-      border-radius: 5px;
-      background: color-mix(in srgb, var(--tone) 16%, transparent);
-      color: var(--tone);
-      font-size: 10px;
-      font-weight: 700;
-    }
-    .name {
-      min-width: 0;
-      color: var(--text);
-      font-size: 12px;
-      @include m.truncate;
-    }
-    .row.selected .name {
-      color: var(--text-strong);
-      font-weight: 600;
-    }
-    .sub {
-      flex: 0 1 auto;
-      min-width: 0;
-      color: var(--text-3);
-      font-size: 12px;
-      @include m.truncate;
-    }
-    .meta {
-      display: inline-flex;
-      flex: none;
-      gap: 4px;
-      margin-left: auto;
-      padding-left: 8px;
-    }
-    .count {
-      display: inline-flex;
-      align-items: center;
-      gap: 3px;
-      height: 20px;
-      padding: 0 7px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-    }
-    .count.provides {
-      @include m.tint(ok);
-    }
-    .count svg {
-      width: 11px;
-      height: 11px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .detail {
-      min-width: 0;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      @include m.enter;
-    }
-    .detail-head {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 10px;
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .detail-head h2 {
-      flex: 1 1 auto;
-      min-width: 0;
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 15px;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-    .badge {
-      padding: 2px 8px;
-      border-radius: 99px;
-      background: color-mix(in srgb, var(--tone) 14%, transparent);
-      color: var(--tone);
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }
-    .classes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .classes li {
-      padding: 1px 8px;
-      border: 1px solid var(--border-strong);
-      border-radius: 6px;
-      color: var(--text-2);
-      font-family: var(--font-mono);
-      font-size: 11px;
-    }
-    .classes li.is-component {
-      border-color: var(--accent-line);
-      color: var(--accent);
-    }
-    .block {
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .block:last-child {
-      border-bottom: 0;
-    }
-    h3 {
-      @include m.label;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin: 0 0 8px;
-    }
-    .hint {
-      margin: -4px 0 10px;
-      color: var(--text-3);
-      font-size: 12px;
-    }
-    .path {
-      position: relative;
-      display: grid;
-      gap: 6px;
-      margin: 0;
-      padding: 0 0 0 18px;
-      list-style: none;
-    }
-    .path::before {
-      content: '';
-      position: absolute;
-      top: 13px;
-      bottom: 13px;
-      left: 5px;
-      width: 1px;
-      background: var(--border-strong);
-    }
-    .path li {
-      position: relative;
-      min-width: 0;
-    }
-    .path li::before {
-      content: '';
-      position: absolute;
-      top: 12px;
-      left: -16px;
-      width: 9px;
-      height: 1px;
-      background: var(--border-strong);
-    }
-    .path li.current .step {
-      border-color: var(--accent);
-      background: var(--accent-soft);
-    }
-    .step.null {
-      cursor: default;
-      color: var(--text-2);
-    }
-    .step.null:hover {
-      border-color: var(--border-strong);
-      background: var(--surface);
-    }
-    .hint-inline {
-      color: var(--text-3);
-    }
-    .step-count {
-      color: var(--text-3);
-      font-size: 11px;
-    }
-    .deps,
-    .providers {
-      display: grid;
-      gap: 6px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .dep,
-    .provider {
-      min-width: 0;
-      padding: 8px 10px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--bg);
-    }
-    .dep.hit,
-    .provider.hit {
-      border-color: var(--accent-line);
-      box-shadow: 0 0 0 3px var(--accent-soft);
-    }
-    .provider-global {
-      margin-top: 6px;
-    }
-    .show-component {
-      display: inline-flex;
-      align-items: center;
-      height: var(--control-h);
-      padding: 0 14px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 150ms var(--ease),
-        border-color 150ms var(--ease);
-    }
-    .show-component:hover {
-      background: var(--surface-3);
-      border-color: var(--accent-line);
-    }
-    .show-component:focus-visible {
-      @include m.focus-ring;
-    }
-    .framework-note {
-      margin: 0 0 10px;
-      color: var(--text-2);
-    }
-    .dep-main {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px;
-    }
-    .token {
-      min-width: 0;
-      color: var(--text-strong);
-      font-size: 12px;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-    .flag {
-      padding: 0 6px;
-      border: 1px solid var(--border-strong);
-      border-radius: 5px;
-      color: var(--text-2);
-      font-family: var(--font-mono);
-      font-size: 10px;
-      line-height: 16px;
-    }
-    .kind-flag {
-      @include m.tint(accent);
-    }
-    .dep-meta {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px 10px;
-      margin-top: 6px;
-      color: var(--text-3);
-      font-size: 12px;
-      overflow-wrap: anywhere;
-    }
-    .from {
-      height: 22px;
-      padding: 0 8px;
-      color: var(--text-2);
-    }
-    .from .mono {
-      color: var(--text);
-    }
-    .from.absent {
-      cursor: default;
-      background: none;
-    }
-    .from.missing {
-      cursor: default;
-      border-color: color-mix(in srgb, var(--warn) 40%, transparent);
-      background: none;
-      color: var(--warn);
-    }
-    .empty-line {
-      margin: 0;
-      color: var(--text-2);
-    }
-    .state {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      padding: 40px 16px;
-      text-align: center;
-      background: var(--surface);
-      border: 1px dashed var(--border-strong);
-      border-radius: var(--radius);
-      @include m.enter;
-    }
-    .state.compact {
-      padding: 24px 12px;
-      border: 0;
-    }
-    .state-title {
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .state-hint {
-      max-width: 440px;
-      margin: 0;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .spinner {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--border-strong);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .spinner {
-        animation: none;
-      }
-    }
-    button {
-      font: inherit;
-    }
-    .state button,
-    .provider-group button {
-      height: 34px;
-      padding: 0 14px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      cursor: pointer;
-    }
-    .load-error.compact {
-      margin: 0 0 16px;
-      border: 1px solid var(--border);
-      background: var(--surface);
-    }
-    .state-title + .state-hint + button {
-      margin-top: 8px;
-    }
-    .state button:focus-visible {
-      @include m.focus-ring;
-    }
-    .gone .state {
-      align-items: flex-start;
-      text-align: left;
-    }
-    .notice {
-      display: flex;
-      align-items: flex-start;
-      gap: 8px;
-      margin: 0 0 16px;
-      padding: 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      color: var(--text-2);
-      font-size: 13px;
-      line-height: 1.5;
-    }
-    .notice strong {
-      color: var(--text);
-      font-weight: 600;
-    }
-    .notice svg {
-      flex: none;
-      width: 16px;
-      height: 16px;
-      margin-top: 2px;
-      fill: none;
-      stroke: var(--accent);
-      stroke-width: 2;
-      stroke-linecap: round;
-    }
-    .resolve-toggle {
-      font-size: 12px;
-    }
-    .resolution[hidden] {
-      display: none;
-    }
-    .resolve-graph {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin: 8px 0 0;
-      padding: 0 0 0 4px;
-      list-style: none;
-    }
-    .resolve-graph li {
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 4px 8px;
-      min-width: 0;
-      padding-left: 18px;
-      font-size: 12px;
-    }
-    .resolve-graph li::before {
-      content: '';
-      position: absolute;
-      left: 4px;
-      top: -6px;
-      bottom: 50%;
-      width: 2px;
-      background: var(--border-strong);
-    }
-    .resolve-graph li:first-child::before {
-      display: none;
-    }
-    .resolve-dot {
-      position: absolute;
-      left: 0;
-      width: 10px;
-      height: 10px;
-      border: 2px solid var(--border-strong);
-      border-radius: 50%;
-      background: var(--surface);
-    }
-    .resolve-provides .resolve-dot {
-      border-color: var(--ok);
-      background: var(--ok);
-    }
-    .resolve-throws .resolve-dot {
-      border-color: var(--danger);
-      background: var(--danger);
-    }
-    .resolve-state {
-      color: var(--text-2);
-    }
-    .resolve-provides .resolve-state {
-      color: var(--ok-text);
-      font-weight: 600;
-    }
-    .resolve-throws .resolve-state {
-      color: var(--danger-text);
-    }
-    .resolve-not-asked .resolve-state,
-    .resolve-skipped .resolve-state {
-      color: var(--text-3);
-    }
-    .declared {
-      color: var(--text-3);
-    }
-    .decl-file {
-      min-width: 0;
-      font-family: var(--font-mono);
-      font-size: 11px;
-      overflow-wrap: anywhere;
-    }
-    .refresh {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      height: var(--control-h);
-      margin-left: auto;
-      padding: 0 12px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font-size: 12px;
-      cursor: pointer;
-      transition:
-        background-color 150ms var(--ease),
-        border-color 150ms var(--ease);
-    }
-    .refresh:hover {
-      background: var(--surface-3);
-      border-color: var(--accent-line);
-    }
-    .refresh[aria-disabled='true'] {
-      cursor: default;
-      opacity: 0.6;
-    }
-    .refresh:focus-visible {
-      @include m.focus-ring;
-    }
-    .refresh svg,
-    .chevron {
-      flex: none;
-      width: 14px;
-      height: 14px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    .chevron {
-      transition: transform 150ms var(--ease);
-    }
-    .chevron.open {
-      transform: rotate(90deg);
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .chevron {
-        transition: none;
-      }
-    }
-    .inactive-flag {
-      flex: none;
-    }
-    .inactive-note {
-      margin: 0 0 12px;
-    }
-    .orphans {
-      margin: 0 0 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-    }
-    .orphans-toggle,
-    .provider-group .group-toggle {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      width: 100%;
-      min-height: var(--control-h);
-      padding: 0 12px;
-      border: 0;
-      border-radius: var(--radius-sm);
-      background: none;
-      color: var(--text-2);
-      font-size: 12px;
-      text-align: left;
-      cursor: pointer;
-    }
-    .provider-group .group-toggle {
-      width: auto;
-      height: auto;
-      min-height: 0;
-      padding: 2px 4px;
-      margin-left: -4px;
-      color: inherit;
-      font: inherit;
-      letter-spacing: inherit;
-      text-transform: inherit;
-    }
-    .orphans-toggle:hover,
-    .provider-group .group-toggle:hover {
-      color: var(--text);
-    }
-    .orphans-toggle:focus-visible,
-    .provider-group .group-toggle:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .hint-tag {
-      padding: 0 6px;
-      border-radius: 5px;
-      @include m.tint(accent);
-      font-size: 10px;
-      line-height: 16px;
-    }
-    .orphans-body {
-      padding: 0 12px 12px;
-    }
-    .orphan-list {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .orphan-list li {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 4px 8px;
-      min-width: 0;
-      font-size: 12px;
-    }
-    .orphans-body .hint {
-      margin: 0 0 8px;
-    }
-    .orphan-list .orphan-file {
-      min-width: 0;
-      color: var(--text-3);
-      font-family: var(--font-mono);
-      font-size: 11px;
-      overflow-wrap: anywhere;
-    }
-    .helper-hint {
-      margin: 0 0 8px;
-    }
-    .provider-list[hidden],
-    .orphans-body[hidden],
-    .helper-hint[hidden] {
-      display: none;
-    }
-    .source-providers {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-      @include m.enter;
-    }
-    .provider-group h2 {
-      @include m.label;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin: 0 0 8px;
-    }
-    .section-count {
-      padding: 0 6px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 10px;
-      letter-spacing: 0;
-      line-height: 16px;
-      font-variant-numeric: tabular-nums;
-    }
-    .provider-list {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-    .provider-card {
-      min-width: 0;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 8px 12px;
-      transition:
-        background-color 150ms var(--ease),
-        border-color 150ms var(--ease);
-    }
-    .provider-card:hover {
-      background: var(--surface-2);
-      border-color: var(--border-strong);
-    }
-    .provider-header {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 4px 8px;
-    }
-    .provider-header .token {
-      font-size: 13px;
-      font-weight: 600;
-    }
-    .provided-in {
-      font-size: 11px;
-      padding: 1px 8px;
-      border-radius: 99px;
-      @include m.tint(ok);
-      border-width: 1px;
-      border-style: solid;
-    }
-    .provider-meta {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0 8px;
-      margin-top: 4px;
-      font-family: var(--font-mono);
-      font-size: 11px;
-      color: var(--text-3);
-    }
-    .provider-meta .path {
-      min-width: 0;
-      overflow-wrap: anywhere;
-    }
-    .provider-meta .as {
-      color: var(--text-2);
-    }
-  `,
+  providers: [InjectorsState, SourceScan],
+  templateUrl: './di-inspector.html',
+  styleUrl: './di-inspector.scss',
 })
 export class DiInspector {
   rpc = input<DevframeRpcClient | null>(null);
@@ -1854,437 +67,70 @@ export class DiInspector {
   readonly canShowComponent = input(false);
   readonly focusHandled = output<void>();
   readonly showComponent = output<ComponentFocus>();
-  private readonly injector = inject(Injector);
 
-  readonly nullId = NULL_ID;
-  private readonly hostPage = hostPageId();
+  private readonly state = inject(InjectorsState);
+  private readonly scan = inject(SourceScan);
+
   private readonly angularPages = injectAngularPages(() => this.rpc());
   /** The shown page's Angular version and debug API parts, for the unavailable notes. */
   readonly angularPage = computed(() =>
-    angularPageFor(this.angularPages(), this.shownPageId() || this.hostPage),
+    angularPageFor(this.angularPages(), this.shownPageId() || this.state.hostPage),
   );
-  private readonly treeState = signal<InjectorTreeState | null>(null);
-  private readonly pageTitles = signal<Record<string, { title?: string; url?: string }>>({});
-  readonly chosenPageId = signal<string | null>(null);
-
-  // Older servers send only the newest tree, without the per-page map.
-  private readonly treePages = computed<Record<string, InjectorPage>>(() => {
-    const state = this.treeState();
-    if (!state) return {};
-    const pages = state.pages && typeof state.pages === 'object' ? state.pages : {};
-    if (Object.keys(pages).length || this.hostPage) return pages;
-    return { '': state };
-  });
-
-  // A page that reports later never takes over from the one shown.
-  readonly shownPageId = linkedSignal<
-    { pages: Record<string, InjectorPage>; chosen: string | null },
-    string | null
-  >({
-    source: () => ({ pages: this.treePages(), chosen: this.chosenPageId() }),
-    computation: ({ pages, chosen }, previous) => {
-      const reported: Record<string, ReportedPage> = {};
-      for (const [pageId, page] of Object.entries(pages)) {
-        const at = typeof page?.reportedAt === 'number' ? page.reportedAt : 0;
-        reported[pageId] = { pageId, reportedAt: at };
-      }
-      return pickPage(reported, {
-        chosen,
-        host: this.hostPage,
-        previous: previous?.value ?? null,
-      });
-    },
-  });
-
-  private readonly shownPage = computed(() => {
-    const pageId = this.shownPageId();
-    return pageId === null ? null : (this.treePages()[pageId] ?? null);
-  });
-  readonly roots = computed<InjectorNode[]>(() => {
-    const roots = this.shownPage()?.roots;
-    return isTree(roots) ? roots : [];
-  });
-  readonly environment = computed<InjectorNode[]>(() => {
-    const environment = this.shownPage()?.environment;
-    return isTree(environment) ? environment : [];
-  });
-  readonly truncated = computed(() => this.shownPage()?.truncated === true);
-  /** The caps the server names with `truncated`, or the ones it has always used. */
-  readonly limits = computed<InjectorTreeLimits>(() => {
-    const limits = this.shownPage()?.limits as Partial<InjectorTreeLimits> | undefined;
-    const whole = (n: unknown, fallback: number) =>
-      typeof n === 'number' && Number.isInteger(n) && n > 0 ? n : fallback;
-    return {
-      elements: whole(limits?.elements, 2000),
-      injectors: whole(limits?.injectors, 2500),
-      depth: whole(limits?.depth, 1000),
-    };
-  });
-  readonly zone = computed(() => {
-    const zone = this.shownPage()?.zone;
-    return typeof zone === 'string' ? zoneLabel(zone) : null;
-  });
 
-  private readonly multiPage = computed(
-    () => !this.hostPage && Object.keys(this.treePages()).length > 1,
-  );
-  readonly pageOptions = computed<SelectOption[]>(() => {
-    if (!this.multiPage()) return [];
-    const titles = this.pageTitles();
-    return Object.keys(this.treePages()).map((pageId) => {
-      const page = titles[pageId];
-      return {
-        value: pageId,
-        label: page?.title || page?.url || `Page ${pageId}`,
-        hint: page?.url,
-      };
-    });
-  });
-
-  /** Injector ids belong to one page, so each page keeps its own selection and expansion. */
-  private readonly pageKey = computed(() => this.shownPageId() ?? '');
-  private perPage<T>(initial: () => T) {
-    const saved = new Map<string, T>();
-    return linkedSignal<string, T>({
-      source: this.pageKey,
-      computation: (key, previous) => {
-        if (previous) saved.set(previous.source, previous.value);
-        return saved.has(key) ? (saved.get(key) as T) : initial();
-      },
-    });
-  }
-
-  readonly sourceProviders = signal<SourceProvider[]>([]);
-  readonly loaded = signal(false);
-  /** The live injector tree or the source scan could not be read from the server. */
-  private readonly treeFailed = signal(false);
-  private readonly sourceFailed = signal(false);
-  readonly loadFailed = computed(() => this.treeFailed() || this.sourceFailed());
-  readonly retrying = signal(false);
-  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
-  readonly view = signal<TreeView>('element');
-  readonly query = signal('');
+  readonly chosenPageId = this.state.chosenPageId;
+  readonly shownPageId = this.state.shownPageId;
+  readonly roots = this.state.roots;
+  readonly environment = this.state.environment;
+  readonly truncated = this.state.truncated;
+  readonly limits = this.state.limits;
+  readonly zone = this.state.zone;
+  readonly pageOptions = this.state.pageOptions;
+  readonly sourceProviders = this.state.sourceProviders;
+  readonly loaded = this.state.loaded;
+  readonly loadFailed = this.state.loadFailed;
+  readonly retrying = this.state.retrying;
+  readonly view = this.state.view;
+  readonly query = this.state.query;
   /** The detail width on wide panels, set by the splitter and saved per view. */
   readonly detailSize = signal(storedPaneSize('injectors', 420));
   private readonly queryInput = viewChild<SearchField>('queryInput');
-  readonly onlyProviding = signal(false);
-  readonly componentsOnly = signal(true);
-  /** Hides Angular's own injectors and providers (marked `framework` by the server). */
-  readonly hideFramework = signal(storedFlag(HIDE_FRAMEWORK_PREF) ?? false);
-  readonly collapsed = this.perPage<ReadonlySet<string>>(() => new Set());
-  readonly selectedId = this.perPage<string | null>(() => null);
-  readonly focusId = this.perPage<string | null>(() => null);
-  readonly announcement = signal('');
-  private readonly selectedLabel = this.perPage<string | null>(() => null);
-  private wasGone = false;
-
-  private readonly index = computed(() => {
-    const map = new Map<string, InjectorNode>();
-    const parents = new Map<string, string>();
-    const walk = (nodes: InjectorNode[], parent: string | null) => {
-      for (const node of nodes) {
-        map.set(node.injector.id, node);
-        if (parent) parents.set(node.injector.id, parent);
-        walk(node.children, node.injector.id);
-      }
-    };
-    walk(this.roots(), null);
-    walk(this.environment(), null);
-    const byComponent = new Map<string, string>();
-    for (const node of map.values()) {
-      const componentId = node.injector.componentId;
-      if (componentId && node.injector.type === 'element')
-        byComponent.set(componentId, node.injector.id);
-    }
-    return { map, parents, byComponent };
-  });
-
-  /** The element and environment trees without framework injectors, while they are hidden. */
-  private readonly shownRoots = computed(() => this.withoutFramework(this.roots()));
-  private readonly shownEnvironment = computed(() => this.withoutFramework(this.environment()));
-
-  readonly elementCount = computed(() => this.count(this.shownRoots()));
-  readonly environmentCount = computed(() => this.count(this.shownEnvironment()));
-
-  /** What "Hide framework" hides in the current view: injectors, and providers on the rest. */
-  readonly frameworkHiddenCount = computed(() => {
-    const all = this.view() === 'element' ? this.roots() : this.environment();
-    let injectors = 0;
-    let providers = 0;
-    const walk = (nodes: InjectorNode[]) => {
-      for (const node of nodes) {
-        if (node.injector.framework) injectors++;
-        else providers += node.providers.filter((p) => p.framework).length;
-        walk(node.children);
-      }
-    };
-    walk(all);
-    return { injectors, providers };
-  });
-  readonly frameworkHiddenText = computed(() => {
-    const { injectors, providers } = this.frameworkHiddenCount();
-    const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? '' : 's'}`;
-    if (!injectors && !providers) return 'Nothing hidden';
-    if (!providers) return `${plural(injectors, 'injector')} hidden`;
-    if (!injectors) return `${plural(providers, 'provider')} hidden`;
-    return `${plural(injectors, 'injector')} and ${plural(providers, 'provider')} hidden`;
-  });
-
-  private readonly visible = computed(() => {
-    let nodes = this.view() === 'element' ? this.shownRoots() : this.shownEnvironment();
-    if (this.view() === 'element' && this.componentsOnly()) {
-      nodes = this.prune(nodes, (n) => !!n.injector.component);
-    }
-    if (this.onlyProviding()) nodes = this.prune(nodes, (n) => this.providerCount(n) > 0);
-    const q = this.normalizedQuery();
-    if (q) nodes = this.prune(nodes, (n) => this.nodeMatches(n, q));
-    return nodes;
-  });
-
-  readonly rows = computed<Row[]>(() => {
-    const rows: Row[] = [];
-    const collapsed = this.collapsed();
-    const searching = !!this.normalizedQuery();
-    const walk = (nodes: InjectorNode[], depth: number) => {
-      for (const node of nodes) {
-        const expanded = searching || !collapsed.has(node.injector.id);
-        rows.push({ node, depth, hasChildren: node.children.length > 0, expanded });
-        if (expanded) walk(node.children, depth + 1);
-      }
-    };
-    walk(this.visible(), 0);
-    return rows;
-  });
-
-  /** Falls back to the first row only while nothing is chosen, never when the choice is gone. */
-  readonly selected = computed(() => {
-    const id = this.selectedId();
-    if (!id) return this.rows()[0]?.node ?? null;
-    return this.index().map.get(id) ?? null;
-  });
-
-  /** The label of the chosen injector once it has left the page. */
-  readonly gone = computed(() => {
-    const id = this.selectedId();
-    return id && !this.index().map.has(id) ? (this.selectedLabel() ?? 'The injector') : null;
-  });
-
-  readonly rovingId = computed(() => {
-    const rows = this.rows();
-    const want = this.focusId() ?? this.selected()?.injector.id;
-    if (want && rows.some((r) => r.node.injector.id === want)) return want;
-    return rows[0]?.node.injector.id ?? null;
-  });
-
-  readonly path = computed(() => {
-    const sel = this.selected();
-    if (!sel) return [];
-    const { map, parents } = this.index();
-    let ids = sel.injector.path ?? [];
-    if (!ids.length) {
-      ids = [sel.injector.id];
-      let parent = parents.get(sel.injector.id);
-      while (parent) {
-        ids.push(parent);
-        parent = parents.get(parent);
-      }
-      ids.push(NULL_ID);
-    }
-    return ids.map((id) => {
-      const node = map.get(id);
-      return {
-        id,
-        label: node ? labelOf(node) : id === NULL_ID ? 'Null injector' : 'Not listed',
-        kind: node ? kindOf(node) : 'null',
-        providers: node ? this.providerCount(node) : 0,
-      };
-    });
-  });
-
-  /** Every injector that provides a token matching the search. */
-  private readonly providerHits = computed(() => {
-    const q = this.normalizedQuery();
-    if (!q) return [];
-    const hits: { id: string; label: string; kind: string; tokens: string }[] = [];
-    for (const node of this.index().map.values()) {
-      if (this.isHiddenInjector(node)) continue;
-      const tokens = node.providers.filter(
-        (p) => !this.isHidden(p) && p.token.toLowerCase().includes(q),
-      );
-      if (!tokens.length) continue;
-      hits.push({
-        id: node.injector.id,
-        label: labelOf(node),
-        kind: kindOf(node),
-        tokens: tokens.map((t) => t.token).join(', '),
-      });
-    }
-    return hits;
-  });
-  readonly providedBy = computed(() => this.providerHits().slice(0, MAX_PROVIDED_BY));
-  readonly providedByMore = computed(() =>
-    Math.max(0, this.providerHits().length - MAX_PROVIDED_BY),
-  );
-
-  readonly groupedProviders = computed(() => {
-    const q = this.normalizedQuery();
-    const filtered = q
-      ? this.sourceProviders().filter(
-          (p) => p.token.toLowerCase().includes(q) || p.file.toLowerCase().includes(q),
-        )
-      : this.sourceProviders();
-    const groups: { type: string; label: string; items: SourceProvider[] }[] = [
-      { type: 'root-provider', label: 'Root Providers (provide*)', items: [] },
-      { type: 'injectable', label: 'Injectable Services', items: [] },
-      { type: 'injection', label: 'inject() Calls', items: [] },
-      { type: 'provider', label: 'Component Providers', items: [] },
-      { type: HELPER_TYPE, label: 'Helpers (unresolved)', items: [] },
-    ];
-    for (const p of filtered) groups.find((g) => g.type === p.type)?.items.push(p);
-    return groups.filter((g) => g.items.length > 0);
-  });
-
-  readonly sourceMatchCount = computed(() =>
-    this.groupedProviders().reduce((sum, g) => sum + g.items.length, 0),
-  );
-
-  readonly helperType = HELPER_TYPE;
-  /** The unresolved provide*() helpers start collapsed; a search shows them. */
-  readonly helpersOpen = signal(false);
-  readonly helpersShown = computed(() => this.helpersOpen() || !!this.normalizedQuery());
-
-  /**
-   * Providers the source declares (`providers` entries and injectables) whose
-   * token nothing on the shown page injected: no element injector and no
-   * created service lists it among its dependencies. A `providedIn` service
-   * that an environment injector already created counts as injected. Matched
-   * by name, so this is only a hint.
-   */
-  readonly orphaned = computed<SourceProvider[]>(() => {
-    const roots = this.roots();
-    if (!roots.length) return [];
-    const injected = new Set<string>();
-    const created = new Set<string>();
-    for (const node of this.index().map.values()) {
-      for (const dep of node.dependencies ?? []) injected.add(dep.token);
-      if (node.injector.type !== 'element') {
-        for (const p of node.providers) created.add(p.token);
-      }
-    }
-    const out: SourceProvider[] = [];
-    const seen = new Set<string>();
-    for (const p of this.sourceProviders()) {
-      if (!PROVIDING_TYPES.has(p.type)) continue;
-      // `Feature.Token` in source is the token `Token` on the page.
-      const name = p.token.slice(p.token.lastIndexOf('.') + 1);
-      if (injected.has(name) || (p.providedIn && created.has(name))) continue;
-      const key = `${p.token}|${p.file}|${p.line}`;
-      if (seen.has(key)) continue;
-      seen.add(key);
-      out.push(p);
-    }
-    return out;
-  });
-  readonly orphansOpen = signal(false);
-
-  /**
-   * Where the source scan declares each token: `providers` entries, injectable
-   * classes and known provide*() functions, by token name (the last part of
-   * `Feature.Token`). Joins the live Provides list to the source.
-   */
-  private readonly sourceByToken = computed(() => {
-    const map = new Map<string, SourceProvider[]>();
-    for (const p of this.sourceProviders()) {
-      if (!PROVIDING_TYPES.has(p.type) && p.type !== 'root-provider') continue;
-      const name = p.token.slice(p.token.lastIndexOf('.') + 1);
-      let list = map.get(name);
-      if (!list) map.set(name, (list = []));
-      if (!list.some((q) => q.file === p.file && q.line === p.line)) list.push(p);
-    }
-    return map;
-  });
-
-  /** Up to three source places that declare `token`, and how many more. */
-  sourceOf(token: string): { shown: SourceProvider[]; more: number } | null {
-    const list = this.sourceByToken().get(token);
-    if (!list?.length) return null;
-    return { shown: list.slice(0, 3), more: Math.max(0, list.length - 3) };
-  }
-
-  /** The dependency whose resolution is open in the details. */
-  readonly resolvingKey = signal<string | null>(null);
-
-  depKey(dep: { from: string; token: string; tokenId?: string }, index: number): string {
-    return `${index}|${dep.from}|${dep.tokenId ?? dep.token}`;
-  }
-
-  toggleResolve(key: string) {
-    this.resolvingKey.update((open) => (open === key ? null : key));
-  }
-
-  /**
-   * The lookup path of the selected injector, read for one dependency: the
-   * steps Angular asked before the injector that provides the token, that
-   * injector, and the steps it never reached. `self` stops after the first
-   * step, `skipSelf` skips it, and a token nobody provides goes on to the null
-   * injector, which throws unless the dependency is optional.
-   */
-  resolution(dep: { flags: string[]; providedBy: string | null }) {
-    const steps = this.path();
-    const at = dep.providedBy ? steps.findIndex((step) => step.id === dep.providedBy) : -1;
-    const self = dep.flags.includes('self');
-    const skipSelf = dep.flags.includes('skipSelf');
-    const optional = dep.flags.includes('optional');
-    return steps.map((step, index) => {
-      let state: 'asked' | 'provides' | 'skipped' | 'not-asked' | 'throws' | 'null';
-      if (index === 0 && skipSelf) state = 'skipped';
-      else if (at >= 0) state = index < at ? 'asked' : index === at ? 'provides' : 'not-asked';
-      else if (self && index > (skipSelf ? 1 : 0)) state = 'not-asked';
-      else if (step.id === NULL_ID) state = optional ? 'null' : 'throws';
-      else state = 'asked';
-      const text = {
-        asked: 'asked, not here',
-        provides: 'provides it',
-        skipped: 'skipped (skipSelf)',
-        'not-asked': 'not asked',
-        throws: 'throws NullInjectorError',
-        null: 'gives null (optional)',
-      }[state];
-      return { ...step, state, text };
-    });
-  }
-  readonly orphanedText = computed(() => {
-    const count = new Set(this.orphaned().map((p) => p.token)).size;
-    return count === 1
-      ? '1 provider in source is never injected on this page'
-      : `${count} providers in source are never injected on this page`;
-  });
-
-  /** What a screen reader hears about the search results. */
-  private readonly searchSummary = computed(() => {
-    const query = this.query().trim();
-    if (!query) return '';
-    const hits = this.providerHits().length;
-    if (hits === 1) return `1 injector provides “${query}”.`;
-    if (hits > 1) return `${hits} injectors provide “${query}”.`;
-    if (!this.rows().length) return `Nothing here matches “${query}”.`;
-    return `No injector provides “${query}”.`;
-  });
-
-  private readonly normalizedQuery = computed(() => this.query().trim().toLowerCase());
-
-  private readonly destroyRef = inject(DestroyRef);
-  private stopTree: (() => void) | null = null;
-  private treeLoad = 0;
+  readonly onlyProviding = this.state.onlyProviding;
+  readonly componentsOnly = this.state.componentsOnly;
+  readonly hideFramework = this.state.hideFramework;
+  readonly collapsed = this.state.collapsed;
+  readonly selectedId = this.state.selectedId;
+  readonly focusId = this.state.focusId;
+  readonly announcement = this.state.announcement;
+  readonly elementCount = this.state.elementCount;
+  readonly environmentCount = this.state.environmentCount;
+  readonly frameworkHiddenCount = this.state.frameworkHiddenCount;
+  readonly frameworkHiddenText = this.state.frameworkHiddenText;
+  readonly rows = this.state.rows;
+  readonly selected = this.state.selected;
+  readonly gone = this.state.gone;
+  readonly rovingId = this.state.rovingId;
+  readonly path = this.state.path;
+  readonly providedBy = this.state.providedBy;
+  readonly providedByMore = this.state.providedByMore;
+  readonly resolvingKey = this.state.resolvingKey;
+
+  readonly groupedProviders = this.scan.groupedProviders;
+  readonly sourceMatchCount = this.scan.sourceMatchCount;
+  readonly helpersOpen = this.scan.helpersOpen;
+  readonly helpersShown = this.scan.helpersShown;
+  readonly orphaned = this.scan.orphaned;
+  readonly orphansOpen = this.scan.orphansOpen;
+  readonly orphanedText = this.scan.orphanedText;
 
   private lastSearchMessage = '';
   /** The page and element injector the panel last asked the page to read again. */
   private refreshedKey: string | null = null;
 
   constructor() {
+    this.state.connect(this.rpc);
     // One summary once typing pauses, instead of a live region that reads every keystroke.
     effect((onCleanup) => {
-      const message = this.searchSummary();
+      const message = this.state.searchSummary();
       if (!message) {
         this.lastSearchMessage = '';
         return;
@@ -2299,8 +145,8 @@ export class DiInspector {
     effect(() => {
       const client = this.rpc();
       if (!client) return;
-      void this.loadInjectorTree(client);
-      void this.loadSourceProviders(client);
+      void this.state.loadInjectorTree(client);
+      void this.state.loadSourceProviders(client);
     });
     // Element injectors are read once and cached on the page, so the selected
     // one is read again, once each time the selection moves to it.
@@ -2311,12 +157,12 @@ export class DiInspector {
       const key = id && pageId ? `${pageId}|${id}` : null;
       if (!key || key === this.refreshedKey) return;
       this.refreshedKey = key;
-      untracked(() => this.requestRefresh(pageId!, id!));
+      untracked(() => this.state.requestRefresh(pageId!, id!));
     });
     // Page titles come from the component tree, and are only needed for the Page picker.
     effect((onCleanup) => {
       const client = this.rpc();
-      if (!client || !this.multiPage()) return;
+      if (!client || !this.state.multiPage()) return;
       let live = true;
       let stop: (() => void) | null = null;
       onCleanup(() => {
@@ -2330,7 +176,7 @@ export class DiInspector {
           if (!live) return;
           const apply = (value: unknown) => {
             const pages = (value as { pages?: unknown } | null)?.pages;
-            this.pageTitles.set(
+            this.state.pageTitles.set(
               pages && typeof pages === 'object'
                 ? (pages as Record<string, { title?: string; url?: string }>)
                 : {},
@@ -2345,17 +191,18 @@ export class DiInspector {
     effect(() => {
       const focus = this.focus();
       if (!focus) return;
-      const pages = this.treePages();
+      const pages = this.state.treePages();
       const shown = this.shownPageId();
       if (focus.pageId && shown !== focus.pageId && pages[focus.pageId]) {
         untracked(() => this.selectPage(focus.pageId!));
         return;
       }
-      if (!this.treeState() && !this.treeFailed()) return;
+      if (!this.state.treeState() && !this.state.treeFailed()) return;
       untracked(() => {
         const onPage = !focus.pageId || shown === focus.pageId;
-        const id = onPage ? this.index().byComponent.get(focus.componentId) : undefined;
-        const node = id ? this.index().map.get(id) : undefined;
+        const index = this.state.index();
+        const id = onPage ? index.byComponent.get(focus.componentId) : undefined;
+        const node = id ? index.map.get(id) : undefined;
         if (id && node) {
           this.reveal(id);
           this.announcement.set(`Showing the injector of ${labelOf(node)}.`);
@@ -2365,16 +212,11 @@ export class DiInspector {
         this.focusHandled.emit();
       });
     });
-    this.destroyRef.onDestroy(() => {
-      this.stopTree?.();
-      this.highlight(null);
-    });
   }
 
   /** Turns "Hide framework" on or off and remembers the choice for the next visit. */
   setHideFramework(hide: boolean) {
-    this.hideFramework.set(hide);
-    storeFlag(HIDE_FRAMEWORK_PREF, hide);
+    this.state.setHideFramework(hide);
   }
 
   /** Opens the Components tab on the component that owns this element injector. */
@@ -2383,87 +225,13 @@ export class DiInspector {
     this.showComponent.emit(pageId ? { id: componentId, pageId } : { id: componentId });
   }
 
-  /** Whether a provider is left out of the lists while framework providers are hidden. */
-  /**
-   * `(2 of 3)` for a token that several shown providers share (multi
-   * providers), so their buttons and value regions get unique names; else ''.
-   */
-  tokenPosition(providers: readonly ProviderInfo[], index: number): string {
-    const token = providers[index]?.token;
-    let at = 0;
-    let count = 0;
-    providers.forEach((p, i) => {
-      if (p.token !== token || this.isHidden(p)) return;
-      count++;
-      if (i <= index) at++;
-    });
-    return count > 1 ? `(${at} of ${count})` : '';
-  }
-
-  positionSuffix(providers: readonly ProviderInfo[], index: number): string {
-    const position = this.tokenPosition(providers, index);
-    return position ? ` ${position}` : '';
-  }
-
-  isHidden(provider: ProviderInfo): boolean {
-    return this.hideFramework() && provider.framework === true;
-  }
-
-  private isHiddenInjector(node: InjectorNode): boolean {
-    return this.hideFramework() && node.injector.framework === true;
-  }
-
-  /** How many providers the node shows. */
-  providerCount(node: InjectorNode): number {
-    if (!this.hideFramework()) return node.injector.providerCount;
-    const hidden = node.providers.filter((p) => p.framework).length;
-    return Math.max(0, node.injector.providerCount - hidden);
-  }
-
-  hiddenProviders(node: InjectorNode): number {
-    return this.hideFramework() ? node.providers.filter((p) => p.framework).length : 0;
-  }
-
-  /** Loads the injector tree and the source scan again. The alert stays until they answer, so
-   * focus stays on Retry while it is shown and moves to the toolbar when the alert goes, which
-   * also happens when live injectors arrive but the source scan still fails. */
-  async retry() {
-    const client = this.rpc();
-    if (!client || this.retrying()) return;
-    const trigger = document.activeElement;
-    this.retrying.set(true);
-    try {
-      await Promise.all([this.loadInjectorTree(client), this.loadSourceProviders(client)]);
-    } finally {
-      this.retrying.set(false);
-    }
-    if (this.destroyRef.destroyed) return;
-    afterNextRender(
-      () => {
-        if (trigger?.isConnected && document.activeElement !== document.body) return;
-        this.host.nativeElement
-          .querySelector<HTMLElement>('.toolbar input, .toolbar button')
-          ?.focus();
-      },
-      { injector: this.injector },
-    );
+  retry() {
+    return this.state.retry();
   }
 
   /** Asks the shown page to read every injector again, element entries included. */
   refresh() {
-    const pageId = this.shownPageId();
-    if (!pageId) return;
-    this.requestRefresh(pageId);
-    this.announcement.set('Reading the injectors again.');
-  }
-
-  private requestRefresh(pageId: string, injectorId?: string) {
-    const client = this.rpc();
-    if (!client) return;
-    void client
-      .scope('pangular')
-      .rpc.call('request-injector-refresh', injectorId ? { pageId, injectorId } : { pageId })
-      .catch(() => {});
+    this.state.refresh();
   }
 
   /** Clears the search from a no-match message and keeps focus on the search box. */
@@ -2472,270 +240,35 @@ export class DiInspector {
     this.queryInput()?.focus();
   }
 
-  label(node: InjectorNode) {
-    return labelOf(node);
-  }
-
-  kind(node: InjectorNode) {
-    return kindOf(node);
-  }
-
   tone(kind: string) {
-    return KIND_TONE[kind] ?? KIND_TONE['null'];
-  }
-
-  kindById(id: string) {
-    const node = this.index().map.get(id);
-    return node ? kindOf(node) : 'null';
-  }
-
-  labelById(id: string) {
-    const node = this.index().map.get(id);
-    return node ? labelOf(node) : id === NULL_ID ? 'Null injector' : 'not listed';
-  }
-
-  capital(text: string) {
-    return text.charAt(0).toUpperCase() + text.slice(1);
+    return toneOf(kind);
   }
 
-  matches(token: string) {
-    const q = this.normalizedQuery();
-    return !!q && token.toLowerCase().includes(q);
+  providerCount(node: InjectorNode): number {
+    return this.state.providerCount(node);
   }
 
   setView(view: TreeView) {
-    if (this.view() === view) return;
-    this.view.set(view);
-    this.choose(null);
-    this.focusId.set(null);
+    this.state.setView(view);
   }
 
   select(id: string) {
-    this.choose(id);
-    this.focusId.set(id);
-  }
-
-  private choose(id: string | null) {
-    const node = id ? this.index().map.get(id) : undefined;
-    this.selectedId.set(id);
-    this.selectedLabel.set(node ? labelOf(node) : null);
-    this.wasGone = false;
-  }
-
-  /** Announces once when the chosen injector leaves the page, like the component tree does. */
-  private syncGone() {
-    const gone = this.gone() !== null;
-    if (gone && !this.wasGone) {
-      // A trailing no-break space makes a repeat differ, so screen readers say it again.
-      const message = 'The selected injector is no longer on the page.';
-      this.announcement.update((current) => (current === message ? `${message}\u00a0` : message));
-    }
-    this.wasGone = gone;
+    this.state.select(id);
   }
 
   selectPage(pageId: string | null) {
-    if (!pageId || pageId === this.shownPageId()) return;
-    this.chosenPageId.set(pageId);
-    this.wasGone = this.gone() !== null;
-    const label = this.pageOptions().find((o) => o.value === pageId)?.label ?? pageId;
-    this.announcement.set(`Showing the injectors of ${label}.`);
-  }
-
-  private notePageGone(pages: Record<string, InjectorPage> | undefined) {
-    const chosen = this.chosenPageId();
-    if (!chosen || pages?.[chosen]) return;
-    const label = this.pageOptions().find((o) => o.value === chosen)?.label ?? 'The chosen page';
-    this.chosenPageId.set(null);
-    this.announcement.set(`${label} closed, so this shows another page.`);
-    // The page that takes over brings its own selection; only a gone injector there is news.
-    this.wasGone = true;
+    this.state.selectPage(pageId);
   }
 
   toggle(id: string, event?: Event) {
-    event?.stopPropagation();
-    if (this.normalizedQuery()) return;
-    this.collapsed.update((set) => {
-      const next = new Set(set);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
+    this.state.toggle(id, event);
   }
 
   reveal(id: string) {
-    const node = this.index().map.get(id);
-    if (!node) return;
-    this.setView(node.injector.type === 'element' ? 'element' : 'environment');
-    const { parents } = this.index();
-    this.collapsed.update((set) => {
-      const next = new Set(set);
-      let parent = parents.get(id);
-      while (parent) {
-        next.delete(parent);
-        parent = parents.get(parent);
-      }
-      return next;
-    });
-    if (this.onlyProviding() && this.providerCount(node) === 0) this.onlyProviding.set(false);
-    if (node.injector.type === 'element' && !node.injector.component)
-      this.componentsOnly.set(false);
-    // Shows the target for now; the saved choice stays as it was.
-    if (this.isHiddenInjector(node)) this.hideFramework.set(false);
-    const q = this.normalizedQuery();
-    if (q && !this.nodeMatches(node, q)) this.query.set('');
-    this.select(id);
-    afterNextRender(() => this.focusRow(id, false), { injector: this.injector });
+    this.state.reveal(id);
   }
 
   highlight(node: InjectorNode | null) {
-    const client = this.rpc();
-    if (!client) return;
-    const selector = node?.injector.type === 'element' ? (node.injector.selector ?? null) : null;
-    const target = selector ? { pageId: this.shownPageId() || null, selector } : null;
-    void client
-      .scope('pangular')
-      .rpc.call('request-page-highlight', target)
-      .catch(() => {});
-  }
-
-  onTreeKey(event: KeyboardEvent) {
-    const rows = this.rows();
-    if (!rows.length) return;
-    const roving = this.rovingId();
-    const current = rows.findIndex((r) => r.node.injector.id === roving);
-    const at = Math.max(current, 0);
-    const row = rows[at];
-    let next = -1;
-    switch (event.key) {
-      case 'ArrowDown':
-        next = Math.min(at + 1, rows.length - 1);
-        break;
-      case 'ArrowUp':
-        next = Math.max(at - 1, 0);
-        break;
-      case 'Home':
-        next = 0;
-        break;
-      case 'End':
-        next = rows.length - 1;
-        break;
-      case 'ArrowRight':
-        if (row.hasChildren && !row.expanded) this.toggle(row.node.injector.id);
-        else if (row.hasChildren) next = at + 1;
-        break;
-      case 'ArrowLeft':
-        if (row.hasChildren && row.expanded && !this.normalizedQuery())
-          this.toggle(row.node.injector.id);
-        else {
-          // The nearest shown ancestor, since hidden framework injectors have no row.
-          const { parents } = this.index();
-          let parent = parents.get(row.node.injector.id);
-          next = -1;
-          while (parent && next < 0) {
-            const id = parent;
-            next = rows.findIndex((r) => r.node.injector.id === id);
-            parent = parents.get(parent);
-          }
-        }
-        break;
-      case 'Enter':
-      case ' ':
-        this.select(row.node.injector.id);
-        break;
-      default:
-        return;
-    }
-    event.preventDefault();
-    if (next >= 0) {
-      const id = rows[next].node.injector.id;
-      this.focusId.set(id);
-      this.choose(id);
-      queueMicrotask(() => this.focusRow(id, true));
-    }
-  }
-
-  private focusRow(id: string, focus: boolean) {
-    const el = document.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
-    if (!el) return;
-    if (focus) el.focus();
-    el.scrollIntoView({ block: 'nearest' });
-  }
-
-  private clearTree() {
-    this.stopTree?.();
-    this.stopTree = null;
-  }
-
-  private async loadInjectorTree(client: DevframeRpcClient) {
-    const load = ++this.treeLoad;
-    this.clearTree();
-    const my = client.scope('pangular');
-    let state: Awaited<ReturnType<typeof my.rpc.sharedState>>;
-    try {
-      state = await my.rpc.sharedState('injector-tree');
-    } catch {
-      if (load === this.treeLoad) this.treeFailed.set(true);
-      return;
-    }
-    if (this.destroyRef.destroyed || this.rpc() !== client || load !== this.treeLoad) return;
-    this.treeFailed.set(false);
-    const apply = (value: unknown) => {
-      const next = value && typeof value === 'object' ? (value as InjectorTreeState) : null;
-      this.notePageGone(next?.pages);
-      this.treeState.set(next);
-      this.syncGone();
-    };
-    apply(state.value());
-    this.clearTree();
-    this.stopTree = state.on('updated', apply);
-  }
-
-  private async loadSourceProviders(client: DevframeRpcClient) {
-    const my = client.scope('pangular');
-    try {
-      this.sourceProviders.set((await my.rpc.call('get-providers')) as SourceProvider[]);
-      this.sourceFailed.set(false);
-    } catch {
-      this.sourceProviders.set([]);
-      this.sourceFailed.set(true);
-    } finally {
-      this.loaded.set(true);
-    }
-  }
-
-  private count(nodes: InjectorNode[]): number {
-    return nodes.reduce((sum, n) => sum + 1 + this.count(n.children), 0);
-  }
-
-  private nodeMatches(node: InjectorNode, q: string): boolean {
-    const i = node.injector;
-    return (
-      i.name.toLowerCase().includes(q) ||
-      !!i.component?.toLowerCase().includes(q) ||
-      !!i.directives?.some((d) => d.toLowerCase().includes(q)) ||
-      node.providers.some((p) => p.token.toLowerCase().includes(q)) ||
-      !!node.dependencies?.some((d) => d.token.toLowerCase().includes(q))
-    );
-  }
-
-  /** Leaves framework injectors out while they are hidden, moving their children up a level. */
-  private withoutFramework(nodes: InjectorNode[]): InjectorNode[] {
-    if (!this.hideFramework()) return nodes;
-    const lift = (list: InjectorNode[]): InjectorNode[] =>
-      list.flatMap((node) =>
-        node.injector.framework
-          ? lift(node.children)
-          : [{ ...node, children: lift(node.children) }],
-      );
-    return lift(nodes);
-  }
-
-  private prune(nodes: InjectorNode[], keep: (node: InjectorNode) => boolean): InjectorNode[] {
-    const out: InjectorNode[] = [];
-    for (const node of nodes) {
-      const children = this.prune(node.children, keep);
-      if (keep(node) || children.length) out.push({ ...node, children });
-    }
-    return out;
+    this.state.highlight(node);
   }
 }
diff --git a/app/src/pages/injectors/injector-deps.html b/app/src/pages/injectors/injector-deps.html
new file mode 100644
index 00000000..32778b84
--- /dev/null
+++ b/app/src/pages/injectors/injector-deps.html
@@ -0,0 +1,77 @@
+@let sel = node();
+<h3>
+  {{ sel.injector.type === 'element' ? 'Injected here' : 'Injected by its services' }}
+  <span class="pill">{{ sel.dependencies?.length ?? 0 }}</span>
+</h3>
+@if (sel.injector.type !== 'element') {
+  <p class="hint">Only services this injector has already created are listed.</p>
+}
+@if (sel.dependencies?.length) {
+  <ul class="deps">
+    @for (dep of sel.dependencies; track dep.from + (dep.tokenId ?? dep.token) + $index) {
+      <li class="dep" [class.hit]="matches(dep.token)">
+        <div class="dep-main">
+          <span class="token mono">{{ dep.token }}</span>
+          @for (flag of dep.flags; track flag) {
+            <span class="flag">{{ flag }}</span>
+          }
+        </div>
+        <div class="dep-meta">
+          @if (
+            sel.injector.type !== 'element' ||
+            (sel.injector.directives && sel.injector.directives.length > 1)
+          ) {
+            <span>for {{ dep.from }}</span>
+          }
+          @if (dep.providedBy; as by) {
+            <button type="button" class="from" (click)="reveal(by)">
+              <span class="dot" [style.background]="tone(kindById(by))" aria-hidden="true"></span>
+              from <span class="mono">{{ labelById(by) }}</span>
+            </button>
+          } @else if (dep.flags.includes('optional')) {
+            <span class="from absent">optional, not provided</span>
+          } @else {
+            <span class="from missing">not provided anywhere</span>
+          }
+          <button
+            type="button"
+            class="link resolve-toggle"
+            [attr.aria-expanded]="resolvingKey() === depKey(dep, $index)"
+            [attr.aria-controls]="'di-resolve-' + $index"
+            (click)="toggleResolve(depKey(dep, $index))"
+          >
+            Resolution
+            <span class="sr-only">of {{ dep.token }}</span>
+          </button>
+        </div>
+        <div
+          class="resolution"
+          [id]="'di-resolve-' + $index"
+          [hidden]="resolvingKey() !== depKey(dep, $index)"
+        >
+          @if (resolvingKey() === depKey(dep, $index)) {
+            <ol class="resolve-graph" [attr.aria-label]="'How Angular resolves ' + dep.token">
+              @for (step of resolution(dep); track step.id + $index) {
+                <li [class]="'resolve-' + step.state">
+                  <span class="resolve-dot" aria-hidden="true"></span>
+                  @if (step.id === nullId) {
+                    <span class="mono">Null injector</span>
+                  } @else {
+                    <button type="button" class="step" (click)="reveal(step.id)">
+                      <span class="mono">{{ step.label }}</span>
+                    </button>
+                  }
+                  <span class="resolve-state">{{ step.text }}</span>
+                </li>
+              }
+            </ol>
+          }
+        </div>
+      </li>
+    }
+  </ul>
+} @else if (sel.injector.type === 'element') {
+  <p class="empty-line">Nothing is injected through the constructor or inject().</p>
+} @else {
+  <p class="empty-line">No service created here has injected anything yet.</p>
+}
diff --git a/app/src/pages/injectors/injector-deps.scss b/app/src/pages/injectors/injector-deps.scss
new file mode 100644
index 00000000..13ab6490
--- /dev/null
+++ b/app/src/pages/injectors/injector-deps.scss
@@ -0,0 +1,103 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+@include inj.mono;
+@include inj.pill;
+@include inj.chips;
+@include inj.link;
+@include inj.dot;
+@include inj.heading;
+@include inj.hint;
+@include inj.dep-list;
+@include inj.dep-main;
+@include inj.token;
+@include inj.flag;
+@include inj.dep-meta;
+.from {
+  height: 22px;
+  padding: 0 8px;
+  color: var(--text-2);
+}
+.from .mono {
+  color: var(--text);
+}
+.from.absent {
+  cursor: default;
+  background: none;
+}
+.from.missing {
+  cursor: default;
+  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
+  background: none;
+  color: var(--warn);
+}
+@include inj.empty-line;
+@include inj.buttons;
+.resolve-toggle {
+  font-size: 12px;
+}
+.resolution[hidden] {
+  display: none;
+}
+.resolve-graph {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 8px 0 0;
+  padding: 0 0 0 4px;
+  list-style: none;
+}
+.resolve-graph li {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  padding-left: 18px;
+  font-size: 12px;
+}
+.resolve-graph li::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: -6px;
+  bottom: 50%;
+  width: 2px;
+  background: var(--border-strong);
+}
+.resolve-graph li:first-child::before {
+  display: none;
+}
+.resolve-dot {
+  position: absolute;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--border-strong);
+  border-radius: 50%;
+  background: var(--surface);
+}
+.resolve-provides .resolve-dot {
+  border-color: var(--ok);
+  background: var(--ok);
+}
+.resolve-throws .resolve-dot {
+  border-color: var(--danger);
+  background: var(--danger);
+}
+.resolve-state {
+  color: var(--text-2);
+}
+.resolve-provides .resolve-state {
+  color: var(--ok-text);
+  font-weight: 600;
+}
+.resolve-throws .resolve-state {
+  color: var(--danger-text);
+}
+.resolve-not-asked .resolve-state,
+.resolve-skipped .resolve-state {
+  color: var(--text-3);
+}
diff --git a/app/src/pages/injectors/injector-deps.ts b/app/src/pages/injectors/injector-deps.ts
new file mode 100644
index 00000000..e4d18607
--- /dev/null
+++ b/app/src/pages/injectors/injector-deps.ts
@@ -0,0 +1,81 @@
+import { Component, inject, input } from '@angular/core';
+import { NULL_ID, toneOf, type InjectorNode } from './injector-model';
+import { InjectorsState } from './injectors-state';
+
+/**
+ * The "Injected here" block of the injector detail: each dependency, the injector that provides
+ * it, and how Angular resolves it along the lookup path.
+ */
+@Component({
+  selector: 'div[appInjectorDeps]',
+  templateUrl: './injector-deps.html',
+  styleUrl: './injector-deps.scss',
+})
+export class InjectorDeps {
+  private readonly state = inject(InjectorsState);
+
+  readonly node = input.required<InjectorNode>();
+
+  readonly nullId = NULL_ID;
+  readonly resolvingKey = this.state.resolvingKey;
+
+  depKey(dep: { from: string; token: string; tokenId?: string }, index: number): string {
+    return this.state.depKey(dep, index);
+  }
+
+  toggleResolve(key: string) {
+    this.state.toggleResolve(key);
+  }
+
+  /**
+   * The lookup path of the selected injector, read for one dependency: the
+   * steps Angular asked before the injector that provides the token, that
+   * injector, and the steps it never reached. `self` stops after the first
+   * step, `skipSelf` skips it, and a token nobody provides goes on to the null
+   * injector, which throws unless the dependency is optional.
+   */
+  resolution(dep: { flags: string[]; providedBy: string | null }) {
+    const steps = this.state.path();
+    const at = dep.providedBy ? steps.findIndex((step) => step.id === dep.providedBy) : -1;
+    const self = dep.flags.includes('self');
+    const skipSelf = dep.flags.includes('skipSelf');
+    const optional = dep.flags.includes('optional');
+    return steps.map((step, index) => {
+      let state: 'asked' | 'provides' | 'skipped' | 'not-asked' | 'throws' | 'null';
+      if (index === 0 && skipSelf) state = 'skipped';
+      else if (at >= 0) state = index < at ? 'asked' : index === at ? 'provides' : 'not-asked';
+      else if (self && index > (skipSelf ? 1 : 0)) state = 'not-asked';
+      else if (step.id === NULL_ID) state = optional ? 'null' : 'throws';
+      else state = 'asked';
+      const text = {
+        asked: 'asked, not here',
+        provides: 'provides it',
+        skipped: 'skipped (skipSelf)',
+        'not-asked': 'not asked',
+        throws: 'throws NullInjectorError',
+        null: 'gives null (optional)',
+      }[state];
+      return { ...step, state, text };
+    });
+  }
+
+  matches(token: string) {
+    return this.state.matches(token);
+  }
+
+  reveal(id: string) {
+    this.state.reveal(id);
+  }
+
+  tone(kind: string) {
+    return toneOf(kind);
+  }
+
+  kindById(id: string) {
+    return this.state.kindById(id);
+  }
+
+  labelById(id: string) {
+    return this.state.labelById(id);
+  }
+}
diff --git a/app/src/pages/injectors/injector-detail.html b/app/src/pages/injectors/injector-detail.html
new file mode 100644
index 00000000..be534b4b
--- /dev/null
+++ b/app/src/pages/injectors/injector-detail.html
@@ -0,0 +1,59 @@
+@let sel = node();
+<header class="detail-head">
+  <span class="badge" [style.--tone]="tone(kind(sel))">{{ kind(sel) }}</span>
+  <h2 id="di-detail-title" class="mono">{{ label(sel) }}</h2>
+  @if (sel.injector.directives?.length) {
+    <ul class="classes" aria-label="Classes on this element">
+      @for (name of sel.injector.directives; track name) {
+        <li [class.is-component]="name === sel.injector.component">{{ name }}</li>
+      }
+    </ul>
+  }
+  @if (canShowComponent() && sel.injector.componentId; as componentId) {
+    <button type="button" class="show-component" (click)="openComponent(componentId)">
+      Show in Components
+      <span class="sr-only">: {{ sel.injector.component }}</span>
+    </button>
+  }
+</header>
+
+@if (sel.injector.inactive) {
+  <p class="hint inactive-note">
+    Inactive: the router loaded this route's injector, but no element on the page uses it now. It
+    keeps the services it created until the app is reloaded.
+  </p>
+}
+<div class="block">
+  <h3>Lookup path</h3>
+  <p class="hint">Angular asks these injectors in order until one has the token.</p>
+  <ol class="path">
+    @for (step of path(); track step.id; let first = $first) {
+      <li [class.current]="first">
+        @if (step.id === nullId) {
+          <span class="step null">
+            <span class="dot" [style.background]="tone('null')" aria-hidden="true"></span>
+            Null injector
+            <span class="hint-inline">throws NullInjectorError</span>
+          </span>
+        } @else {
+          <button type="button" class="step" (click)="reveal(step.id)">
+            <span class="dot" [style.background]="tone(step.kind)" aria-hidden="true"></span>
+            <span class="mono">{{ step.label }}</span>
+            @if (step.providers) {
+              <span class="step-count">
+                {{ step.providers }}
+                <span class="sr-only">{{ step.providers === 1 ? 'provider' : 'providers' }}</span>
+              </span>
+            }
+          </button>
+        }
+      </li>
+    }
+  </ol>
+</div>
+
+@if (sel.injector.type === 'element' || sel.dependencies) {
+  <div appInjectorDeps class="block" [node]="sel"></div>
+}
+
+<div appInjectorProviders class="block" [node]="sel"></div>
diff --git a/app/src/pages/injectors/injector-detail.scss b/app/src/pages/injectors/injector-detail.scss
new file mode 100644
index 00000000..534eca29
--- /dev/null
+++ b/app/src/pages/injectors/injector-detail.scss
@@ -0,0 +1,75 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+@include inj.mono;
+@include inj.chips;
+@include inj.dot;
+@include inj.detail-head;
+.badge {
+  padding: 2px 8px;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--tone) 14%, transparent);
+  color: var(--tone);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.classes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.classes li {
+  padding: 1px 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  color: var(--text-2);
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+.classes li.is-component {
+  border-color: var(--accent-line);
+  color: var(--accent);
+}
+.block {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.block:last-child {
+  border-bottom: 0;
+}
+@include inj.heading;
+@include inj.hint;
+@include inj.path;
+.show-component {
+  display: inline-flex;
+  align-items: center;
+  height: var(--control-h);
+  padding: 0 14px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 150ms var(--ease),
+    border-color 150ms var(--ease);
+}
+.show-component:hover {
+  background: var(--surface-3);
+  border-color: var(--accent-line);
+}
+.show-component:focus-visible {
+  @include m.focus-ring;
+}
+@include inj.buttons;
+.inactive-note {
+  margin: 0 0 12px;
+}
diff --git a/app/src/pages/injectors/injector-detail.ts b/app/src/pages/injectors/injector-detail.ts
new file mode 100644
index 00000000..a9c64023
--- /dev/null
+++ b/app/src/pages/injectors/injector-detail.ts
@@ -0,0 +1,48 @@
+import { Component, inject, input, output } from '@angular/core';
+import { InjectorDeps } from './injector-deps';
+import { kindOf, labelOf, NULL_ID, toneOf, type InjectorNode } from './injector-model';
+import { InjectorProviders } from './injector-providers';
+import { InjectorsState } from './injectors-state';
+
+/**
+ * The detail of the selected injector: its kind and classes, the lookup path, what it injects
+ * and what it provides.
+ */
+@Component({
+  selector: 'section[appInjectorDetail]',
+  imports: [InjectorDeps, InjectorProviders],
+  templateUrl: './injector-detail.html',
+  styleUrl: './injector-detail.scss',
+})
+export class InjectorDetail {
+  private readonly state = inject(InjectorsState);
+
+  readonly node = input.required<InjectorNode>();
+  /** Whether the Components tab is on, so "Show in Components" can open it. */
+  readonly canShowComponent = input(false);
+  /** The component id of the element injector to open in the Components tab. */
+  readonly showComponent = output<string>();
+
+  readonly nullId = NULL_ID;
+  readonly path = this.state.path;
+
+  openComponent(componentId: string) {
+    this.showComponent.emit(componentId);
+  }
+
+  reveal(id: string) {
+    this.state.reveal(id);
+  }
+
+  label(node: InjectorNode) {
+    return labelOf(node);
+  }
+
+  kind(node: InjectorNode) {
+    return kindOf(node);
+  }
+
+  tone(kind: string) {
+    return toneOf(kind);
+  }
+}
diff --git a/app/src/pages/injectors/injector-gone.html b/app/src/pages/injectors/injector-gone.html
new file mode 100644
index 00000000..9e76db59
--- /dev/null
+++ b/app/src/pages/injectors/injector-gone.html
@@ -0,0 +1,13 @@
+<header class="detail-head">
+  <h2 id="di-detail-title" class="mono">{{ name() }}</h2>
+</header>
+<div class="state compact">
+  <p class="state-hint">
+    This injector is no longer on the page. Its component or directive was destroyed.
+  </p>
+  @if (rows()[0]; as first) {
+    <button type="button" (click)="reveal(first.node.injector.id)">
+      Show {{ label(first.node) }}
+    </button>
+  }
+</div>
diff --git a/app/src/pages/injectors/injector-gone.scss b/app/src/pages/injectors/injector-gone.scss
new file mode 100644
index 00000000..1db19e6b
--- /dev/null
+++ b/app/src/pages/injectors/injector-gone.scss
@@ -0,0 +1,14 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+@include inj.mono;
+@include inj.detail-head;
+@include inj.state;
+@include inj.buttons;
+@include inj.state-buttons;
+@include inj.state-button-focus;
+// The section is the host, so the original .gone .state is :host(.gone) .state here.
+:host(.gone) .state {
+  align-items: flex-start;
+  text-align: left;
+}
diff --git a/app/src/pages/injectors/injector-gone.ts b/app/src/pages/injectors/injector-gone.ts
new file mode 100644
index 00000000..1a51b780
--- /dev/null
+++ b/app/src/pages/injectors/injector-gone.ts
@@ -0,0 +1,25 @@
+import { Component, inject, input } from '@angular/core';
+import { labelOf, type InjectorNode } from './injector-model';
+import { InjectorsState } from './injectors-state';
+
+/** The detail of a chosen injector that has left the page, with a way back to the first row. */
+@Component({
+  selector: 'section[appInjectorGone]',
+  templateUrl: './injector-gone.html',
+  styleUrl: './injector-gone.scss',
+})
+export class InjectorGone {
+  private readonly state = inject(InjectorsState);
+
+  /** The label the injector had while it was on the page. */
+  readonly name = input.required<string>();
+  readonly rows = this.state.rows;
+
+  reveal(id: string) {
+    this.state.reveal(id);
+  }
+
+  label(node: InjectorNode) {
+    return labelOf(node);
+  }
+}
diff --git a/app/src/pages/injectors/injector-model.ts b/app/src/pages/injectors/injector-model.ts
new file mode 100644
index 00000000..b705ac30
--- /dev/null
+++ b/app/src/pages/injectors/injector-model.ts
@@ -0,0 +1,84 @@
+import type {
+  InjectorTreeNode,
+  ProviderInfo as PanelProviderInfo,
+} from '@pangular-inspector/devtools/internal/types';
+
+export type ProviderInfo = PanelProviderInfo;
+export type InjectorNode = InjectorTreeNode;
+
+/** One entry of the source scan (`get-providers`). */
+export interface SourceProvider {
+  token: string;
+  source: string;
+  file: string;
+  line: number;
+  providedIn?: string;
+  type: string;
+}
+
+/** One shown row of the injector tree. */
+export interface Row {
+  node: InjectorNode;
+  depth: number;
+  hasChildren: boolean;
+  expanded: boolean;
+}
+
+export type TreeView = 'element' | 'environment';
+
+export interface InjectorPage {
+  roots?: unknown;
+  environment?: unknown;
+  truncated?: unknown;
+  limits?: unknown;
+  zone?: unknown;
+  reportedAt?: unknown;
+}
+
+export interface InjectorTreeState extends InjectorPage {
+  pages?: Record<string, InjectorPage>;
+}
+
+/** One step of the selected injector's lookup path. */
+export interface PathStep {
+  id: string;
+  label: string;
+  kind: string;
+  providers: number;
+}
+
+export const NULL_ID = 'inj-null';
+export const HIDE_FRAMEWORK_PREF = 'injectors.hideFramework';
+export const MAX_PROVIDED_BY = 12;
+/** The `type` the source scan gives a provide*() call it can't resolve to tokens. */
+export const HELPER_TYPE = 'helper';
+/** Source entries that provide a token, which the orphaned providers hint checks. */
+export const PROVIDING_TYPES = new Set(['provider', 'injectable']);
+/** How long typing must pause before the search result is announced. */
+export const SEARCH_ANNOUNCE_MS = 600;
+
+// Text tones: these color the kind letter and badge on a 14 to 16% tint of
+// themselves, so they use the stronger `-text` tokens.
+const KIND_TONE: Record<string, string> = {
+  component: 'var(--accent-text)',
+  directive: 'var(--directive)',
+  environment: 'var(--ok-text)',
+  null: 'var(--text-3)',
+};
+
+export function kindOf(node: InjectorNode): 'component' | 'directive' | 'environment' {
+  if (node.injector.type !== 'element') return 'environment';
+  return node.injector.component ? 'component' : 'directive';
+}
+
+export function labelOf(node: InjectorNode): string {
+  return node.injector.type === 'element' ? `<${node.injector.name}>` : node.injector.name;
+}
+
+export function toneOf(kind: string): string {
+  return KIND_TONE[kind] ?? KIND_TONE['null'];
+}
+
+export function isTree(value: unknown): value is InjectorNode[] {
+  return Array.isArray(value);
+}
diff --git a/app/src/pages/injectors/injector-orphans.html b/app/src/pages/injectors/injector-orphans.html
new file mode 100644
index 00000000..ec10bffd
--- /dev/null
+++ b/app/src/pages/injectors/injector-orphans.html
@@ -0,0 +1,30 @@
+<button
+  type="button"
+  class="orphans-toggle"
+  [attr.aria-expanded]="orphansOpen()"
+  aria-controls="di-orphans"
+  (click)="orphansOpen.set(!orphansOpen())"
+>
+  <svg class="chevron" [class.open]="orphansOpen()" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="m9 6 6 6-6 6" />
+  </svg>
+  <span class="hint-tag">Hint</span>
+  {{ orphanedText() }}
+</button>
+<div id="di-orphans" class="orphans-body" [hidden]="!orphansOpen()">
+  <p class="hint">
+    Provided in your source, but nothing on this page has injected them so far. This is not an
+    error: a guard, an interceptor or code that has not run yet may still use them.
+  </p>
+  <ul class="orphan-list">
+    @for (p of orphaned(); track p.token + p.file + p.line) {
+      <li>
+        <span class="token mono">{{ p.token }}</span>
+        @if (p.providedIn) {
+          <span class="flag">providedIn: {{ p.providedIn }}</span>
+        }
+        <app-source-link class="orphan-file" [file]="p.file" [line]="p.line" />
+      </li>
+    }
+  </ul>
+</div>
diff --git a/app/src/pages/injectors/injector-orphans.scss b/app/src/pages/injectors/injector-orphans.scss
new file mode 100644
index 00000000..b635229b
--- /dev/null
+++ b/app/src/pages/injectors/injector-orphans.scss
@@ -0,0 +1,47 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+@include inj.mono;
+@include inj.hint;
+@include inj.token;
+@include inj.flag;
+@include inj.buttons;
+@include inj.chevron;
+@include inj.toggle;
+.hint-tag {
+  padding: 0 6px;
+  border-radius: 5px;
+  @include m.tint(accent);
+  font-size: 10px;
+  line-height: 16px;
+}
+.orphans-body {
+  padding: 0 12px 12px;
+}
+.orphan-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.orphan-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  font-size: 12px;
+}
+.orphans-body .hint {
+  margin: 0 0 8px;
+}
+.orphan-list .orphan-file {
+  min-width: 0;
+  color: var(--text-3);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+@include inj.hidden;
diff --git a/app/src/pages/injectors/injector-orphans.ts b/app/src/pages/injectors/injector-orphans.ts
new file mode 100644
index 00000000..32c3e932
--- /dev/null
+++ b/app/src/pages/injectors/injector-orphans.ts
@@ -0,0 +1,18 @@
+import { Component, inject } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { SourceScan } from './source-scan';
+
+/** The "never injected" hint: providers the source declares that nothing on the page injected. */
+@Component({
+  selector: 'div[appInjectorOrphans]',
+  imports: [SourceLink],
+  templateUrl: './injector-orphans.html',
+  styleUrl: './injector-orphans.scss',
+})
+export class InjectorOrphans {
+  private readonly scan = inject(SourceScan);
+
+  readonly orphaned = this.scan.orphaned;
+  readonly orphansOpen = this.scan.orphansOpen;
+  readonly orphanedText = this.scan.orphanedText;
+}
diff --git a/app/src/pages/injectors/injector-providers.html b/app/src/pages/injectors/injector-providers.html
new file mode 100644
index 00000000..d68eb59b
--- /dev/null
+++ b/app/src/pages/injectors/injector-providers.html
@@ -0,0 +1,84 @@
+@let sel = node();
+<h3>
+  Provides <span class="pill">{{ providerCount(sel) }}</span>
+</h3>
+@if (hiddenProviders(sel); as hidden) {
+  <p class="hint framework-note">
+    {{ hidden }} framework {{ hidden === 1 ? 'provider' : 'providers' }} hidden.
+    <!-- The spaces around the label are kept: the link underlines them, as it did before. -->
+    <!-- prettier-ignore -->
+    <button type="button" class="link" (click)="setHideFramework(false)">
+      Show them
+    </button>
+  </p>
+}
+@if (providerCount(sel)) {
+  <ul class="providers">
+    @for (p of sel.providers; track (p.tokenId ?? p.token) + $index; let index = $index) {
+      @if (!isHidden(p)) {
+        <li class="provider" [class.hit]="matches(p.token)">
+          <div class="dep-main">
+            <span class="token mono">{{ p.token }}</span>
+            <span class="flag kind-flag">{{
+              p.type === 'unknown' ? 'provider' : 'use' + capital(p.type)
+            }}</span>
+            @if (p.isViewProvider) {
+              <span class="flag">viewProviders</span>
+            }
+            @if (p.multi) {
+              <span class="flag">multi</span>
+            }
+            @if (p.framework) {
+              <span class="flag">Angular</span>
+            }
+          </div>
+          @if (p.importPath?.length) {
+            <div class="dep-meta">via {{ p.importPath!.join(' › ') }}</div>
+          }
+          @if (sourceOf(p.token); as places) {
+            <div class="dep-meta declared">
+              <span>Declared in</span>
+              @for (place of places.shown; track place.file + place.line) {
+                <app-source-link class="decl-file" [file]="place.file" [line]="place.line" />
+              }
+              @if (places.more) {
+                <span>+{{ places.more }} more</span>
+              }
+            </div>
+          }
+          <app-store-global
+            class="provider-global"
+            [rpc]="rpc()"
+            [pageId]="shownPageId()"
+            [target]="{
+              kind: 'provider',
+              injectorId: sel.injector.id,
+              token: p.token,
+              tokenId: p.tokenId,
+              index: index,
+            }"
+            [label]="p.token + positionSuffix(sel.providers, index)"
+            [canLog]="true"
+          />
+          <app-provider-value
+            [rpc]="rpc()"
+            [pageId]="shownPageId()"
+            [injectorId]="sel.injector.id"
+            [token]="p.token"
+            [tokenId]="p.tokenId"
+            [index]="index"
+            [position]="tokenPosition(sel.providers, index)"
+          />
+        </li>
+      }
+    }
+  </ul>
+} @else if (!hiddenProviders(sel)) {
+  <p class="empty-line">
+    @if (sel.injector.type === 'element') {
+      No providers or viewProviders on this element.
+    } @else {
+      This injector has no providers of its own.
+    }
+  </p>
+}
diff --git a/app/src/pages/injectors/injector-providers.scss b/app/src/pages/injectors/injector-providers.scss
new file mode 100644
index 00000000..96edfcaf
--- /dev/null
+++ b/app/src/pages/injectors/injector-providers.scss
@@ -0,0 +1,35 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+@include inj.mono;
+@include inj.pill;
+@include inj.chips;
+@include inj.link;
+@include inj.heading;
+@include inj.hint;
+@include inj.dep-list;
+.provider-global {
+  margin-top: 6px;
+}
+.framework-note {
+  margin: 0 0 10px;
+  color: var(--text-2);
+}
+@include inj.dep-main;
+@include inj.token;
+@include inj.flag;
+.kind-flag {
+  @include m.tint(accent);
+}
+@include inj.dep-meta;
+@include inj.empty-line;
+@include inj.buttons;
+.declared {
+  color: var(--text-3);
+}
+.decl-file {
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
diff --git a/app/src/pages/injectors/injector-providers.ts b/app/src/pages/injectors/injector-providers.ts
new file mode 100644
index 00000000..6631cdcb
--- /dev/null
+++ b/app/src/pages/injectors/injector-providers.ts
@@ -0,0 +1,63 @@
+import { Component, inject, input } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { StoreGlobal } from '../../ui/store-global';
+import { ProviderValue } from '../di-provider-value';
+import type { InjectorNode, ProviderInfo } from './injector-model';
+import { InjectorsState } from './injectors-state';
+import { SourceScan } from './source-scan';
+
+/**
+ * The "Provides" block of the injector detail: each provider with its flags, where the source
+ * declares it, the store-as-global action and its live value.
+ */
+@Component({
+  selector: 'div[appInjectorProviders]',
+  imports: [ProviderValue, SourceLink, StoreGlobal],
+  templateUrl: './injector-providers.html',
+  styleUrl: './injector-providers.scss',
+})
+export class InjectorProviders {
+  private readonly state = inject(InjectorsState);
+  private readonly scan = inject(SourceScan);
+
+  readonly node = input.required<InjectorNode>();
+
+  readonly rpc = this.state.rpc;
+  readonly shownPageId = this.state.shownPageId;
+
+  providerCount(node: InjectorNode) {
+    return this.state.providerCount(node);
+  }
+
+  hiddenProviders(node: InjectorNode) {
+    return this.state.hiddenProviders(node);
+  }
+
+  isHidden(provider: ProviderInfo) {
+    return this.state.isHidden(provider);
+  }
+
+  setHideFramework(hide: boolean) {
+    this.state.setHideFramework(hide);
+  }
+
+  matches(token: string) {
+    return this.state.matches(token);
+  }
+
+  sourceOf(token: string) {
+    return this.scan.sourceOf(token);
+  }
+
+  tokenPosition(providers: readonly ProviderInfo[], index: number) {
+    return this.state.tokenPosition(providers, index);
+  }
+
+  positionSuffix(providers: readonly ProviderInfo[], index: number) {
+    return this.state.positionSuffix(providers, index);
+  }
+
+  capital(text: string) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+  }
+}
diff --git a/app/src/pages/injectors/injector-tree.html b/app/src/pages/injectors/injector-tree.html
new file mode 100644
index 00000000..a145557a
--- /dev/null
+++ b/app/src/pages/injectors/injector-tree.html
@@ -0,0 +1,68 @@
+@for (row of rows(); track row.node.injector.id; let i = $index) {
+  <div
+    class="row"
+    role="treeitem"
+    [attr.aria-level]="row.depth + 1"
+    [attr.aria-expanded]="row.hasChildren ? row.expanded : null"
+    [attr.aria-selected]="selected()?.injector?.id === row.node.injector.id"
+    [attr.tabindex]="rovingId() === row.node.injector.id ? 0 : -1"
+    [attr.data-id]="row.node.injector.id"
+    [class.selected]="selected()?.injector?.id === row.node.injector.id"
+    [style.--depth]="row.depth"
+    (click)="select(row.node.injector.id)"
+    (focus)="focusId.set(row.node.injector.id); highlight(row.node)"
+    (blur)="highlight(null)"
+    (mouseenter)="highlight(row.node)"
+    (mouseleave)="highlight(null)"
+  >
+    @if (row.hasChildren) {
+      <span
+        class="twisty"
+        aria-hidden="true"
+        [class.open]="row.expanded"
+        (click)="toggle(row.node.injector.id, $event)"
+      >
+        <svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6" /></svg>
+      </span>
+    } @else {
+      <span class="twisty-space" aria-hidden="true"></span>
+    }
+    <span
+      class="kind"
+      [style.--tone]="tone(kind(row.node))"
+      [attr.title]="kind(row.node)"
+      aria-hidden="true"
+      >{{ kind(row.node)[0].toUpperCase() }}</span
+    >
+    <span class="sr-only">{{ kind(row.node) }}</span>
+    <span class="name mono">{{ label(row.node) }}</span>
+    @if (row.node.injector.inactive) {
+      <span class="flag inactive-flag">inactive</span>
+    }
+    @if (row.node.injector.component) {
+      <span class="sub">{{ row.node.injector.component }}</span>
+    } @else if (row.node.injector.directives?.length) {
+      <span class="sub">{{ row.node.injector.directives!.join(', ') }}</span>
+    }
+    <span class="meta">
+      @if ((row.node.dependencies?.length ?? 0) > 0) {
+        <span class="count" [attr.title]="row.node.dependencies!.length + ' injected'">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M12 5v14M5 12l7 7 7-7" />
+          </svg>
+          <span class="sr-only">injects</span>
+          {{ row.node.dependencies!.length }}
+        </span>
+      }
+      @if (providerCount(row.node); as provided) {
+        <span class="count provides" [attr.title]="provided + ' provided'">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M21 8 12 3 3 8v8l9 5 9-5z" />
+          </svg>
+          <span class="sr-only">provides</span>
+          {{ provided }}
+        </span>
+      }
+    </span>
+  </div>
+}
diff --git a/app/src/pages/injectors/injector-tree.scss b/app/src/pages/injectors/injector-tree.scss
new file mode 100644
index 00000000..f2b6c6fb
--- /dev/null
+++ b/app/src/pages/injectors/injector-tree.scss
@@ -0,0 +1,131 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+@include inj.mono;
+.row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 8px 0 calc(4px + var(--depth, 0) * 18px);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 120ms var(--ease);
+}
+.row::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 14px;
+  width: calc(var(--depth, 0) * 18px);
+  background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px 18px);
+  pointer-events: none;
+}
+.row:hover {
+  background: var(--surface-2);
+}
+.row:focus-visible {
+  @include m.focus-ring(-2px);
+}
+.row.selected {
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+.twisty,
+.twisty-space {
+  flex: none;
+  width: 20px;
+  height: 20px;
+}
+.twisty {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--text-3);
+  cursor: pointer;
+}
+.twisty:hover {
+  color: var(--text);
+  background: var(--surface-3);
+}
+.twisty svg {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 150ms var(--ease);
+}
+.twisty.open svg {
+  transform: rotate(90deg);
+}
+.kind {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--tone) 16%, transparent);
+  color: var(--tone);
+  font-size: 10px;
+  font-weight: 700;
+}
+.name {
+  min-width: 0;
+  color: var(--text);
+  font-size: 12px;
+  @include m.truncate;
+}
+.row.selected .name {
+  color: var(--text-strong);
+  font-weight: 600;
+}
+.sub {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--text-3);
+  font-size: 12px;
+  @include m.truncate;
+}
+.meta {
+  display: inline-flex;
+  flex: none;
+  gap: 4px;
+  margin-left: auto;
+  padding-left: 8px;
+}
+.count {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 11px;
+}
+.count.provides {
+  @include m.tint(ok);
+}
+.count svg {
+  width: 11px;
+  height: 11px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+@include inj.flag;
+.inactive-flag {
+  flex: none;
+}
diff --git a/app/src/pages/injectors/injector-tree.ts b/app/src/pages/injectors/injector-tree.ts
new file mode 100644
index 00000000..a102b21d
--- /dev/null
+++ b/app/src/pages/injectors/injector-tree.ts
@@ -0,0 +1,106 @@
+import { Component, inject } from '@angular/core';
+import { kindOf, labelOf, toneOf, type InjectorNode } from './injector-model';
+import { InjectorsState } from './injectors-state';
+
+/**
+ * The rows of the injector tree, an ARIA tree with arrow keys: Up and Down move, Right opens or
+ * goes to the first child, Left closes or goes to the nearest shown parent, Home and End jump.
+ */
+@Component({
+  selector: 'div[appInjectorTree]',
+  templateUrl: './injector-tree.html',
+  styleUrl: './injector-tree.scss',
+  host: { '(keydown)': 'onTreeKey($event)' },
+})
+export class InjectorTree {
+  private readonly state = inject(InjectorsState);
+
+  readonly rows = this.state.rows;
+  readonly selected = this.state.selected;
+  readonly rovingId = this.state.rovingId;
+  readonly focusId = this.state.focusId;
+
+  select(id: string) {
+    this.state.select(id);
+  }
+
+  toggle(id: string, event?: Event) {
+    this.state.toggle(id, event);
+  }
+
+  highlight(node: InjectorNode | null) {
+    this.state.highlight(node);
+  }
+
+  providerCount(node: InjectorNode) {
+    return this.state.providerCount(node);
+  }
+
+  label(node: InjectorNode) {
+    return labelOf(node);
+  }
+
+  kind(node: InjectorNode) {
+    return kindOf(node);
+  }
+
+  tone(kind: string) {
+    return toneOf(kind);
+  }
+
+  onTreeKey(event: KeyboardEvent) {
+    const rows = this.rows();
+    if (!rows.length) return;
+    const roving = this.rovingId();
+    const current = rows.findIndex((r) => r.node.injector.id === roving);
+    const at = Math.max(current, 0);
+    const row = rows[at];
+    let next = -1;
+    switch (event.key) {
+      case 'ArrowDown':
+        next = Math.min(at + 1, rows.length - 1);
+        break;
+      case 'ArrowUp':
+        next = Math.max(at - 1, 0);
+        break;
+      case 'Home':
+        next = 0;
+        break;
+      case 'End':
+        next = rows.length - 1;
+        break;
+      case 'ArrowRight':
+        if (row.hasChildren && !row.expanded) this.toggle(row.node.injector.id);
+        else if (row.hasChildren) next = at + 1;
+        break;
+      case 'ArrowLeft':
+        if (row.hasChildren && row.expanded && !this.state.normalizedQuery())
+          this.toggle(row.node.injector.id);
+        else {
+          // The nearest shown ancestor, since hidden framework injectors have no row.
+          const { parents } = this.state.index();
+          let parent = parents.get(row.node.injector.id);
+          next = -1;
+          while (parent && next < 0) {
+            const id = parent;
+            next = rows.findIndex((r) => r.node.injector.id === id);
+            parent = parents.get(parent);
+          }
+        }
+        break;
+      case 'Enter':
+      case ' ':
+        this.select(row.node.injector.id);
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (next >= 0) {
+      const id = rows[next].node.injector.id;
+      this.focusId.set(id);
+      this.state.choose(id);
+      queueMicrotask(() => this.state.focusRow(id, true));
+    }
+  }
+}
diff --git a/app/src/pages/injectors/injectors-state.ts b/app/src/pages/injectors/injectors-state.ts
new file mode 100644
index 00000000..5da9628c
--- /dev/null
+++ b/app/src/pages/injectors/injectors-state.ts
@@ -0,0 +1,627 @@
+import {
+  DestroyRef,
+  ElementRef,
+  Injectable,
+  Injector,
+  afterNextRender,
+  computed,
+  inject,
+  linkedSignal,
+  signal,
+  type OnDestroy,
+  type Signal,
+} from '@angular/core';
+import type { DevframeRpcClient } from 'devframe/client';
+import type { InjectorTreeLimits } from '@pangular-inspector/devtools/internal/types';
+import { pickPage, type ReportedPage } from '../../live-pages';
+import { hostPageId } from '../../page-id';
+import type { SelectOption } from '../../ui/select';
+import { storeFlag, storedFlag } from '../../view-prefs';
+import { zoneLabel } from '../dashboard';
+import {
+  HIDE_FRAMEWORK_PREF,
+  MAX_PROVIDED_BY,
+  NULL_ID,
+  isTree,
+  kindOf,
+  labelOf,
+  type InjectorNode,
+  type InjectorPage,
+  type InjectorTreeState,
+  type PathStep,
+  type ProviderInfo,
+  type Row,
+  type SourceProvider,
+  type TreeView,
+} from './injector-model';
+
+/**
+ * The state the Injectors page and its sections share: the `injector-tree` shared state and the
+ * source scan, the shown page, the tree filters, the selection and the announcements. Provided
+ * by the page, so every section of one page reads the same signals.
+ */
+@Injectable()
+export class InjectorsState implements OnDestroy {
+  private rpcSource: Signal<DevframeRpcClient | null> = signal(null);
+  readonly rpc = computed(() => this.rpcSource());
+  private readonly injector = inject(Injector);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly hostPage = hostPageId();
+  readonly treeState = signal<InjectorTreeState | null>(null);
+  readonly pageTitles = signal<Record<string, { title?: string; url?: string }>>({});
+  readonly chosenPageId = signal<string | null>(null);
+
+  // Older servers send only the newest tree, without the per-page map.
+  readonly treePages = computed<Record<string, InjectorPage>>(() => {
+    const state = this.treeState();
+    if (!state) return {};
+    const pages = state.pages && typeof state.pages === 'object' ? state.pages : {};
+    if (Object.keys(pages).length || this.hostPage) return pages;
+    return { '': state };
+  });
+
+  // A page that reports later never takes over from the one shown.
+  readonly shownPageId = linkedSignal<
+    { pages: Record<string, InjectorPage>; chosen: string | null },
+    string | null
+  >({
+    source: () => ({ pages: this.treePages(), chosen: this.chosenPageId() }),
+    computation: ({ pages, chosen }, previous) => {
+      const reported: Record<string, ReportedPage> = {};
+      for (const [pageId, page] of Object.entries(pages)) {
+        const at = typeof page?.reportedAt === 'number' ? page.reportedAt : 0;
+        reported[pageId] = { pageId, reportedAt: at };
+      }
+      return pickPage(reported, {
+        chosen,
+        host: this.hostPage,
+        previous: previous?.value ?? null,
+      });
+    },
+  });
+
+  private readonly shownPage = computed(() => {
+    const pageId = this.shownPageId();
+    return pageId === null ? null : (this.treePages()[pageId] ?? null);
+  });
+  readonly roots = computed<InjectorNode[]>(() => {
+    const roots = this.shownPage()?.roots;
+    return isTree(roots) ? roots : [];
+  });
+  readonly environment = computed<InjectorNode[]>(() => {
+    const environment = this.shownPage()?.environment;
+    return isTree(environment) ? environment : [];
+  });
+  readonly truncated = computed(() => this.shownPage()?.truncated === true);
+  /** The caps the server names with `truncated`, or the ones it has always used. */
+  readonly limits = computed<InjectorTreeLimits>(() => {
+    const limits = this.shownPage()?.limits as Partial<InjectorTreeLimits> | undefined;
+    const whole = (n: unknown, fallback: number) =>
+      typeof n === 'number' && Number.isInteger(n) && n > 0 ? n : fallback;
+    return {
+      elements: whole(limits?.elements, 2000),
+      injectors: whole(limits?.injectors, 2500),
+      depth: whole(limits?.depth, 1000),
+    };
+  });
+  readonly zone = computed(() => {
+    const zone = this.shownPage()?.zone;
+    return typeof zone === 'string' ? zoneLabel(zone) : null;
+  });
+
+  readonly multiPage = computed(() => !this.hostPage && Object.keys(this.treePages()).length > 1);
+  readonly pageOptions = computed<SelectOption[]>(() => {
+    if (!this.multiPage()) return [];
+    const titles = this.pageTitles();
+    return Object.keys(this.treePages()).map((pageId) => {
+      const page = titles[pageId];
+      return {
+        value: pageId,
+        label: page?.title || page?.url || `Page ${pageId}`,
+        hint: page?.url,
+      };
+    });
+  });
+
+  /** Injector ids belong to one page, so each page keeps its own selection and expansion. */
+  private readonly pageKey = computed(() => this.shownPageId() ?? '');
+  private perPage<T>(initial: () => T) {
+    const saved = new Map<string, T>();
+    return linkedSignal<string, T>({
+      source: this.pageKey,
+      computation: (key, previous) => {
+        if (previous) saved.set(previous.source, previous.value);
+        return saved.has(key) ? (saved.get(key) as T) : initial();
+      },
+    });
+  }
+
+  readonly sourceProviders = signal<SourceProvider[]>([]);
+  readonly loaded = signal(false);
+  /** The live injector tree or the source scan could not be read from the server. */
+  readonly treeFailed = signal(false);
+  private readonly sourceFailed = signal(false);
+  readonly loadFailed = computed(() => this.treeFailed() || this.sourceFailed());
+  readonly retrying = signal(false);
+  readonly view = signal<TreeView>('element');
+  readonly query = signal('');
+  readonly onlyProviding = signal(false);
+  readonly componentsOnly = signal(true);
+  /** Hides Angular's own injectors and providers (marked `framework` by the server). */
+  readonly hideFramework = signal(storedFlag(HIDE_FRAMEWORK_PREF) ?? false);
+  readonly collapsed = this.perPage<ReadonlySet<string>>(() => new Set());
+  readonly selectedId = this.perPage<string | null>(() => null);
+  readonly focusId = this.perPage<string | null>(() => null);
+  readonly announcement = signal('');
+  private readonly selectedLabel = this.perPage<string | null>(() => null);
+  private wasGone = false;
+  /** The dependency whose resolution is open in the details. */
+  readonly resolvingKey = signal<string | null>(null);
+
+  readonly index = computed(() => {
+    const map = new Map<string, InjectorNode>();
+    const parents = new Map<string, string>();
+    const walk = (nodes: InjectorNode[], parent: string | null) => {
+      for (const node of nodes) {
+        map.set(node.injector.id, node);
+        if (parent) parents.set(node.injector.id, parent);
+        walk(node.children, node.injector.id);
+      }
+    };
+    walk(this.roots(), null);
+    walk(this.environment(), null);
+    const byComponent = new Map<string, string>();
+    for (const node of map.values()) {
+      const componentId = node.injector.componentId;
+      if (componentId && node.injector.type === 'element')
+        byComponent.set(componentId, node.injector.id);
+    }
+    return { map, parents, byComponent };
+  });
+
+  /** The element and environment trees without framework injectors, while they are hidden. */
+  private readonly shownRoots = computed(() => this.withoutFramework(this.roots()));
+  private readonly shownEnvironment = computed(() => this.withoutFramework(this.environment()));
+
+  readonly elementCount = computed(() => this.count(this.shownRoots()));
+  readonly environmentCount = computed(() => this.count(this.shownEnvironment()));
+
+  /** What "Hide framework" hides in the current view: injectors, and providers on the rest. */
+  readonly frameworkHiddenCount = computed(() => {
+    const all = this.view() === 'element' ? this.roots() : this.environment();
+    let injectors = 0;
+    let providers = 0;
+    const walk = (nodes: InjectorNode[]) => {
+      for (const node of nodes) {
+        if (node.injector.framework) injectors++;
+        else providers += node.providers.filter((p) => p.framework).length;
+        walk(node.children);
+      }
+    };
+    walk(all);
+    return { injectors, providers };
+  });
+  readonly frameworkHiddenText = computed(() => {
+    const { injectors, providers } = this.frameworkHiddenCount();
+    const plural = (n: number, word: string) => `${n} ${word}${n === 1 ? '' : 's'}`;
+    if (!injectors && !providers) return 'Nothing hidden';
+    if (!providers) return `${plural(injectors, 'injector')} hidden`;
+    if (!injectors) return `${plural(providers, 'provider')} hidden`;
+    return `${plural(injectors, 'injector')} and ${plural(providers, 'provider')} hidden`;
+  });
+
+  private readonly visible = computed(() => {
+    let nodes = this.view() === 'element' ? this.shownRoots() : this.shownEnvironment();
+    if (this.view() === 'element' && this.componentsOnly()) {
+      nodes = this.prune(nodes, (n) => !!n.injector.component);
+    }
+    if (this.onlyProviding()) nodes = this.prune(nodes, (n) => this.providerCount(n) > 0);
+    const q = this.normalizedQuery();
+    if (q) nodes = this.prune(nodes, (n) => this.nodeMatches(n, q));
+    return nodes;
+  });
+
+  readonly rows = computed<Row[]>(() => {
+    const rows: Row[] = [];
+    const collapsed = this.collapsed();
+    const searching = !!this.normalizedQuery();
+    const walk = (nodes: InjectorNode[], depth: number) => {
+      for (const node of nodes) {
+        const expanded = searching || !collapsed.has(node.injector.id);
+        rows.push({ node, depth, hasChildren: node.children.length > 0, expanded });
+        if (expanded) walk(node.children, depth + 1);
+      }
+    };
+    walk(this.visible(), 0);
+    return rows;
+  });
+
+  /** Falls back to the first row only while nothing is chosen, never when the choice is gone. */
+  readonly selected = computed(() => {
+    const id = this.selectedId();
+    if (!id) return this.rows()[0]?.node ?? null;
+    return this.index().map.get(id) ?? null;
+  });
+
+  /** The label of the chosen injector once it has left the page. */
+  readonly gone = computed(() => {
+    const id = this.selectedId();
+    return id && !this.index().map.has(id) ? (this.selectedLabel() ?? 'The injector') : null;
+  });
+
+  readonly rovingId = computed(() => {
+    const rows = this.rows();
+    const want = this.focusId() ?? this.selected()?.injector.id;
+    if (want && rows.some((r) => r.node.injector.id === want)) return want;
+    return rows[0]?.node.injector.id ?? null;
+  });
+
+  readonly path = computed<PathStep[]>(() => {
+    const sel = this.selected();
+    if (!sel) return [];
+    const { map, parents } = this.index();
+    let ids = sel.injector.path ?? [];
+    if (!ids.length) {
+      ids = [sel.injector.id];
+      let parent = parents.get(sel.injector.id);
+      while (parent) {
+        ids.push(parent);
+        parent = parents.get(parent);
+      }
+      ids.push(NULL_ID);
+    }
+    return ids.map((id) => {
+      const node = map.get(id);
+      return {
+        id,
+        label: node ? labelOf(node) : id === NULL_ID ? 'Null injector' : 'Not listed',
+        kind: node ? kindOf(node) : 'null',
+        providers: node ? this.providerCount(node) : 0,
+      };
+    });
+  });
+
+  /** Every injector that provides a token matching the search. */
+  readonly providerHits = computed(() => {
+    const q = this.normalizedQuery();
+    if (!q) return [];
+    const hits: { id: string; label: string; kind: string; tokens: string }[] = [];
+    for (const node of this.index().map.values()) {
+      if (this.isHiddenInjector(node)) continue;
+      const tokens = node.providers.filter(
+        (p) => !this.isHidden(p) && p.token.toLowerCase().includes(q),
+      );
+      if (!tokens.length) continue;
+      hits.push({
+        id: node.injector.id,
+        label: labelOf(node),
+        kind: kindOf(node),
+        tokens: tokens.map((t) => t.token).join(', '),
+      });
+    }
+    return hits;
+  });
+  readonly providedBy = computed(() => this.providerHits().slice(0, MAX_PROVIDED_BY));
+  readonly providedByMore = computed(() =>
+    Math.max(0, this.providerHits().length - MAX_PROVIDED_BY),
+  );
+
+  /** What a screen reader hears about the search results. */
+  readonly searchSummary = computed(() => {
+    const query = this.query().trim();
+    if (!query) return '';
+    const hits = this.providerHits().length;
+    if (hits === 1) return `1 injector provides “${query}”.`;
+    if (hits > 1) return `${hits} injectors provide “${query}”.`;
+    if (!this.rows().length) return `Nothing here matches “${query}”.`;
+    return `No injector provides “${query}”.`;
+  });
+
+  readonly normalizedQuery = computed(() => this.query().trim().toLowerCase());
+
+  private stopTree: (() => void) | null = null;
+  private treeLoad = 0;
+
+  connect(rpc: Signal<DevframeRpcClient | null>) {
+    this.rpcSource = rpc;
+  }
+
+  ngOnDestroy() {
+    this.stopTree?.();
+    this.highlight(null);
+  }
+
+  depKey(dep: { from: string; token: string; tokenId?: string }, index: number): string {
+    return `${index}|${dep.from}|${dep.tokenId ?? dep.token}`;
+  }
+
+  toggleResolve(key: string) {
+    this.resolvingKey.update((open) => (open === key ? null : key));
+  }
+
+  /** Turns "Hide framework" on or off and remembers the choice for the next visit. */
+  setHideFramework(hide: boolean) {
+    this.hideFramework.set(hide);
+    storeFlag(HIDE_FRAMEWORK_PREF, hide);
+  }
+
+  /**
+   * `(2 of 3)` for a token that several shown providers share (multi
+   * providers), so their buttons and value regions get unique names; else ''.
+   */
+  tokenPosition(providers: readonly ProviderInfo[], index: number): string {
+    const token = providers[index]?.token;
+    let at = 0;
+    let count = 0;
+    providers.forEach((p, i) => {
+      if (p.token !== token || this.isHidden(p)) return;
+      count++;
+      if (i <= index) at++;
+    });
+    return count > 1 ? `(${at} of ${count})` : '';
+  }
+
+  positionSuffix(providers: readonly ProviderInfo[], index: number): string {
+    const position = this.tokenPosition(providers, index);
+    return position ? ` ${position}` : '';
+  }
+
+  /** Whether a provider is left out of the lists while framework providers are hidden. */
+  isHidden(provider: ProviderInfo): boolean {
+    return this.hideFramework() && provider.framework === true;
+  }
+
+  private isHiddenInjector(node: InjectorNode): boolean {
+    return this.hideFramework() && node.injector.framework === true;
+  }
+
+  /** How many providers the node shows. */
+  providerCount(node: InjectorNode): number {
+    if (!this.hideFramework()) return node.injector.providerCount;
+    const hidden = node.providers.filter((p) => p.framework).length;
+    return Math.max(0, node.injector.providerCount - hidden);
+  }
+
+  hiddenProviders(node: InjectorNode): number {
+    return this.hideFramework() ? node.providers.filter((p) => p.framework).length : 0;
+  }
+
+  /** Loads the injector tree and the source scan again. The alert stays until they answer, so
+   * focus stays on Retry while it is shown and moves to the toolbar when the alert goes, which
+   * also happens when live injectors arrive but the source scan still fails. */
+  async retry() {
+    const client = this.rpc();
+    if (!client || this.retrying()) return;
+    const trigger = document.activeElement;
+    this.retrying.set(true);
+    try {
+      await Promise.all([this.loadInjectorTree(client), this.loadSourceProviders(client)]);
+    } finally {
+      this.retrying.set(false);
+    }
+    if (this.destroyRef.destroyed) return;
+    afterNextRender(
+      () => {
+        if (trigger?.isConnected && document.activeElement !== document.body) return;
+        this.host.nativeElement
+          .querySelector<HTMLElement>('.toolbar input, .toolbar button')
+          ?.focus();
+      },
+      { injector: this.injector },
+    );
+  }
+
+  /** Asks the shown page to read every injector again, element entries included. */
+  refresh() {
+    const pageId = this.shownPageId();
+    if (!pageId) return;
+    this.requestRefresh(pageId);
+    this.announcement.set('Reading the injectors again.');
+  }
+
+  requestRefresh(pageId: string, injectorId?: string) {
+    const client = this.rpc();
+    if (!client) return;
+    void client
+      .scope('pangular')
+      .rpc.call('request-injector-refresh', injectorId ? { pageId, injectorId } : { pageId })
+      .catch(() => {});
+  }
+
+  kindById(id: string) {
+    const node = this.index().map.get(id);
+    return node ? kindOf(node) : 'null';
+  }
+
+  labelById(id: string) {
+    const node = this.index().map.get(id);
+    return node ? labelOf(node) : id === NULL_ID ? 'Null injector' : 'not listed';
+  }
+
+  matches(token: string) {
+    const q = this.normalizedQuery();
+    return !!q && token.toLowerCase().includes(q);
+  }
+
+  setView(view: TreeView) {
+    if (this.view() === view) return;
+    this.view.set(view);
+    this.choose(null);
+    this.focusId.set(null);
+  }
+
+  select(id: string) {
+    this.choose(id);
+    this.focusId.set(id);
+  }
+
+  choose(id: string | null) {
+    const node = id ? this.index().map.get(id) : undefined;
+    this.selectedId.set(id);
+    this.selectedLabel.set(node ? labelOf(node) : null);
+    this.wasGone = false;
+  }
+
+  /** Announces once when the chosen injector leaves the page, like the component tree does. */
+  private syncGone() {
+    const gone = this.gone() !== null;
+    if (gone && !this.wasGone) {
+      // A trailing no-break space makes a repeat differ, so screen readers say it again.
+      const message = 'The selected injector is no longer on the page.';
+      this.announcement.update((current) => (current === message ? `${message} ` : message));
+    }
+    this.wasGone = gone;
+  }
+
+  selectPage(pageId: string | null) {
+    if (!pageId || pageId === this.shownPageId()) return;
+    this.chosenPageId.set(pageId);
+    this.wasGone = this.gone() !== null;
+    const label = this.pageOptions().find((o) => o.value === pageId)?.label ?? pageId;
+    this.announcement.set(`Showing the injectors of ${label}.`);
+  }
+
+  private notePageGone(pages: Record<string, InjectorPage> | undefined) {
+    const chosen = this.chosenPageId();
+    if (!chosen || pages?.[chosen]) return;
+    const label = this.pageOptions().find((o) => o.value === chosen)?.label ?? 'The chosen page';
+    this.chosenPageId.set(null);
+    this.announcement.set(`${label} closed, so this shows another page.`);
+    // The page that takes over brings its own selection; only a gone injector there is news.
+    this.wasGone = true;
+  }
+
+  toggle(id: string, event?: Event) {
+    event?.stopPropagation();
+    if (this.normalizedQuery()) return;
+    this.collapsed.update((set) => {
+      const next = new Set(set);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  reveal(id: string) {
+    const node = this.index().map.get(id);
+    if (!node) return;
+    this.setView(node.injector.type === 'element' ? 'element' : 'environment');
+    const { parents } = this.index();
+    this.collapsed.update((set) => {
+      const next = new Set(set);
+      let parent = parents.get(id);
+      while (parent) {
+        next.delete(parent);
+        parent = parents.get(parent);
+      }
+      return next;
+    });
+    if (this.onlyProviding() && this.providerCount(node) === 0) this.onlyProviding.set(false);
+    if (node.injector.type === 'element' && !node.injector.component)
+      this.componentsOnly.set(false);
+    // Shows the target for now; the saved choice stays as it was.
+    if (this.isHiddenInjector(node)) this.hideFramework.set(false);
+    const q = this.normalizedQuery();
+    if (q && !this.nodeMatches(node, q)) this.query.set('');
+    this.select(id);
+    afterNextRender(() => this.focusRow(id, false), { injector: this.injector });
+  }
+
+  highlight(node: InjectorNode | null) {
+    const client = this.rpc();
+    if (!client) return;
+    const selector = node?.injector.type === 'element' ? (node.injector.selector ?? null) : null;
+    const target = selector ? { pageId: this.shownPageId() || null, selector } : null;
+    void client
+      .scope('pangular')
+      .rpc.call('request-page-highlight', target)
+      .catch(() => {});
+  }
+
+  focusRow(id: string, focus: boolean) {
+    const el = document.querySelector<HTMLElement>(`.row[data-id="${CSS.escape(id)}"]`);
+    if (!el) return;
+    if (focus) el.focus();
+    el.scrollIntoView({ block: 'nearest' });
+  }
+
+  private clearTree() {
+    this.stopTree?.();
+    this.stopTree = null;
+  }
+
+  async loadInjectorTree(client: DevframeRpcClient) {
+    const load = ++this.treeLoad;
+    this.clearTree();
+    const my = client.scope('pangular');
+    let state: Awaited<ReturnType<typeof my.rpc.sharedState>>;
+    try {
+      state = await my.rpc.sharedState('injector-tree');
+    } catch {
+      if (load === this.treeLoad) this.treeFailed.set(true);
+      return;
+    }
+    if (this.destroyRef.destroyed || this.rpc() !== client || load !== this.treeLoad) return;
+    this.treeFailed.set(false);
+    const apply = (value: unknown) => {
+      const next = value && typeof value === 'object' ? (value as InjectorTreeState) : null;
+      this.notePageGone(next?.pages);
+      this.treeState.set(next);
+      this.syncGone();
+    };
+    apply(state.value());
+    this.clearTree();
+    this.stopTree = state.on('updated', apply);
+  }
+
+  async loadSourceProviders(client: DevframeRpcClient) {
+    const my = client.scope('pangular');
+    try {
+      this.sourceProviders.set((await my.rpc.call('get-providers')) as SourceProvider[]);
+      this.sourceFailed.set(false);
+    } catch {
+      this.sourceProviders.set([]);
+      this.sourceFailed.set(true);
+    } finally {
+      this.loaded.set(true);
+    }
+  }
+
+  private count(nodes: InjectorNode[]): number {
+    return nodes.reduce((sum, n) => sum + 1 + this.count(n.children), 0);
+  }
+
+  nodeMatches(node: InjectorNode, q: string): boolean {
+    const i = node.injector;
+    return (
+      i.name.toLowerCase().includes(q) ||
+      !!i.component?.toLowerCase().includes(q) ||
+      !!i.directives?.some((d) => d.toLowerCase().includes(q)) ||
+      node.providers.some((p) => p.token.toLowerCase().includes(q)) ||
+      !!node.dependencies?.some((d) => d.token.toLowerCase().includes(q))
+    );
+  }
+
+  /** Leaves framework injectors out while they are hidden, moving their children up a level. */
+  private withoutFramework(nodes: InjectorNode[]): InjectorNode[] {
+    if (!this.hideFramework()) return nodes;
+    const lift = (list: InjectorNode[]): InjectorNode[] =>
+      list.flatMap((node) =>
+        node.injector.framework
+          ? lift(node.children)
+          : [{ ...node, children: lift(node.children) }],
+      );
+    return lift(nodes);
+  }
+
+  private prune(nodes: InjectorNode[], keep: (node: InjectorNode) => boolean): InjectorNode[] {
+    const out: InjectorNode[] = [];
+    for (const node of nodes) {
+      const children = this.prune(node.children, keep);
+      if (keep(node) || children.length) out.push({ ...node, children });
+    }
+    return out;
+  }
+}
diff --git a/app/src/pages/injectors/source-providers.html b/app/src/pages/injectors/source-providers.html
new file mode 100644
index 00000000..b078caf7
--- /dev/null
+++ b/app/src/pages/injectors/source-providers.html
@@ -0,0 +1,55 @@
+@for (group of groupedProviders(); track group.type) {
+  <section class="provider-group">
+    @if (group.type === helperType) {
+      <h2>
+        <button
+          type="button"
+          class="group-toggle"
+          [attr.aria-expanded]="helpersShown()"
+          aria-controls="di-helpers"
+          (click)="helpersOpen.set(!helpersOpen())"
+        >
+          <svg class="chevron" [class.open]="helpersShown()" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="m9 6 6 6-6 6" />
+          </svg>
+          {{ group.label }}
+          <span class="section-count">{{ group.items.length }}</span>
+        </button>
+      </h2>
+      <p class="hint helper-hint" [hidden]="!helpersShown()">
+        provide*() calls the scan can't resolve to the tokens they register, such as your own
+        provider functions.
+      </p>
+    } @else {
+      <h2>
+        {{ group.label }} <span class="section-count">{{ group.items.length }}</span>
+      </h2>
+    }
+    <ul
+      class="provider-list"
+      role="list"
+      [attr.id]="group.type === helperType ? 'di-helpers' : null"
+      [hidden]="group.type === helperType && !helpersShown()"
+    >
+      @for (p of group.items; track p.token + p.file + p.line) {
+        <li class="provider-card">
+          <div class="provider-header">
+            <span class="token">{{ p.token }}</span>
+            @if (p.providedIn) {
+              <span class="provided-in">providedIn: {{ p.providedIn }}</span>
+            }
+            @if (p.type === helperType) {
+              <span class="flag">helper (unresolved)</span>
+            }
+          </div>
+          <div class="provider-meta">
+            <app-source-link class="path" [file]="p.file" [line]="p.line" />
+            @if (p.source !== 'class' && p.source !== 'providers array' && p.type !== helperType) {
+              <span class="as">as {{ p.source }}</span>
+            }
+          </div>
+        </li>
+      }
+    </ul>
+  </section>
+}
diff --git a/app/src/pages/injectors/source-providers.scss b/app/src/pages/injectors/source-providers.scss
new file mode 100644
index 00000000..1532e1c8
--- /dev/null
+++ b/app/src/pages/injectors/source-providers.scss
@@ -0,0 +1,89 @@
+@use 'mixins' as m;
+@use 'injectors' as inj;
+
+@include inj.hint;
+// The source link of each card has the class path too, so it keeps these as it did on the page.
+@include inj.path;
+@include inj.token;
+@include inj.flag;
+@include inj.buttons;
+@include inj.state-buttons;
+@include inj.chevron;
+@include inj.toggle;
+.helper-hint {
+  margin: 0 0 8px;
+}
+@include inj.hidden;
+.provider-group h2 {
+  @include m.label;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+.section-count {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 10px;
+  letter-spacing: 0;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+.provider-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.provider-card {
+  min-width: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  transition:
+    background-color 150ms var(--ease),
+    border-color 150ms var(--ease);
+}
+.provider-card:hover {
+  background: var(--surface-2);
+  border-color: var(--border-strong);
+}
+.provider-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+}
+.provider-header .token {
+  font-size: 13px;
+  font-weight: 600;
+}
+.provided-in {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 99px;
+  @include m.tint(ok);
+  border-width: 1px;
+  border-style: solid;
+}
+.provider-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 8px;
+  margin-top: 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-3);
+}
+.provider-meta .path {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.provider-meta .as {
+  color: var(--text-2);
+}
diff --git a/app/src/pages/injectors/source-providers.ts b/app/src/pages/injectors/source-providers.ts
new file mode 100644
index 00000000..d47ca93c
--- /dev/null
+++ b/app/src/pages/injectors/source-providers.ts
@@ -0,0 +1,20 @@
+import { Component, inject } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { HELPER_TYPE } from './injector-model';
+import { SourceScan } from './source-scan';
+
+/** The providers the source scan found, by kind, shown while no page reports a live tree. */
+@Component({
+  selector: 'div[appSourceProviders]',
+  imports: [SourceLink],
+  templateUrl: './source-providers.html',
+  styleUrl: './source-providers.scss',
+})
+export class SourceProviders {
+  private readonly scan = inject(SourceScan);
+
+  readonly helperType = HELPER_TYPE;
+  readonly groupedProviders = this.scan.groupedProviders;
+  readonly helpersOpen = this.scan.helpersOpen;
+  readonly helpersShown = this.scan.helpersShown;
+}
diff --git a/app/src/pages/injectors/source-scan.ts b/app/src/pages/injectors/source-scan.ts
new file mode 100644
index 00000000..36475700
--- /dev/null
+++ b/app/src/pages/injectors/source-scan.ts
@@ -0,0 +1,104 @@
+import { Injectable, computed, inject, signal } from '@angular/core';
+import { HELPER_TYPE, PROVIDING_TYPES, type SourceProvider } from './injector-model';
+import { InjectorsState } from './injectors-state';
+
+/**
+ * What the Injectors page reads from the source scan: the provider groups shown without a live
+ * page, the providers nothing on the page injected, and where each token is declared. Provided
+ * by the page next to {@link InjectorsState}.
+ */
+@Injectable()
+export class SourceScan {
+  private readonly state = inject(InjectorsState);
+
+  readonly groupedProviders = computed(() => {
+    const q = this.state.normalizedQuery();
+    const filtered = q
+      ? this.state
+          .sourceProviders()
+          .filter((p) => p.token.toLowerCase().includes(q) || p.file.toLowerCase().includes(q))
+      : this.state.sourceProviders();
+    const groups: { type: string; label: string; items: SourceProvider[] }[] = [
+      { type: 'root-provider', label: 'Root Providers (provide*)', items: [] },
+      { type: 'injectable', label: 'Injectable Services', items: [] },
+      { type: 'injection', label: 'inject() Calls', items: [] },
+      { type: 'provider', label: 'Component Providers', items: [] },
+      { type: HELPER_TYPE, label: 'Helpers (unresolved)', items: [] },
+    ];
+    for (const p of filtered) groups.find((g) => g.type === p.type)?.items.push(p);
+    return groups.filter((g) => g.items.length > 0);
+  });
+
+  readonly sourceMatchCount = computed(() =>
+    this.groupedProviders().reduce((sum, g) => sum + g.items.length, 0),
+  );
+
+  /** The unresolved provide*() helpers start collapsed; a search shows them. */
+  readonly helpersOpen = signal(false);
+  readonly helpersShown = computed(() => this.helpersOpen() || !!this.state.normalizedQuery());
+
+  /**
+   * Providers the source declares (`providers` entries and injectables) whose
+   * token nothing on the shown page injected: no element injector and no
+   * created service lists it among its dependencies. A `providedIn` service
+   * that an environment injector already created counts as injected. Matched
+   * by name, so this is only a hint.
+   */
+  readonly orphaned = computed<SourceProvider[]>(() => {
+    const roots = this.state.roots();
+    if (!roots.length) return [];
+    const injected = new Set<string>();
+    const created = new Set<string>();
+    for (const node of this.state.index().map.values()) {
+      for (const dep of node.dependencies ?? []) injected.add(dep.token);
+      if (node.injector.type !== 'element') {
+        for (const p of node.providers) created.add(p.token);
+      }
+    }
+    const out: SourceProvider[] = [];
+    const seen = new Set<string>();
+    for (const p of this.state.sourceProviders()) {
+      if (!PROVIDING_TYPES.has(p.type)) continue;
+      // `Feature.Token` in source is the token `Token` on the page.
+      const name = p.token.slice(p.token.lastIndexOf('.') + 1);
+      if (injected.has(name) || (p.providedIn && created.has(name))) continue;
+      const key = `${p.token}|${p.file}|${p.line}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push(p);
+    }
+    return out;
+  });
+  readonly orphansOpen = signal(false);
+
+  readonly orphanedText = computed(() => {
+    const count = new Set(this.orphaned().map((p) => p.token)).size;
+    return count === 1
+      ? '1 provider in source is never injected on this page'
+      : `${count} providers in source are never injected on this page`;
+  });
+
+  /**
+   * Where the source scan declares each token: `providers` entries, injectable
+   * classes and known provide*() functions, by token name (the last part of
+   * `Feature.Token`). Joins the live Provides list to the source.
+   */
+  private readonly sourceByToken = computed(() => {
+    const map = new Map<string, SourceProvider[]>();
+    for (const p of this.state.sourceProviders()) {
+      if (!PROVIDING_TYPES.has(p.type) && p.type !== 'root-provider') continue;
+      const name = p.token.slice(p.token.lastIndexOf('.') + 1);
+      let list = map.get(name);
+      if (!list) map.set(name, (list = []));
+      if (!list.some((q) => q.file === p.file && q.line === p.line)) list.push(p);
+    }
+    return map;
+  });
+
+  /** Up to three source places that declare `token`, and how many more. */
+  sourceOf(token: string): { shown: SourceProvider[]; more: number } | null {
+    const list = this.sourceByToken().get(token);
+    if (!list?.length) return null;
+    return { shown: list.slice(0, 3), more: Math.max(0, list.length - 3) };
+  }
+}
diff --git a/app/src/pages/network-inspector.html b/app/src/pages/network-inspector.html
new file mode 100644
index 00000000..fa108811
--- /dev/null
+++ b/app/src/pages/network-inspector.html
@@ -0,0 +1,59 @@
+<p class="page-intro">
+  HttpClient calls made while rendering on the server and in the browser, from the live page and the
+  devtools server, with hydration stats, the TransferState payload and fault injection.
+</p>
+@if (loading()) {
+  <app-state kind="loading">Loading HTTP calls…</app-state>
+} @else if (failed()) {
+  <app-state kind="error" (retry)="retry()">
+    Could not reach the devtools server.
+    <p detail>Check that the app's dev server is running with the devtools plugin.</p>
+  </app-state>
+}
+
+<div class="toolbar" [hidden]="loading()">
+  <div class="page-picker">
+    <span id="page-picker-label">Page</span>
+    <app-select
+      labelledBy="page-picker-label"
+      emptyText="No connected page"
+      placeholder="No connected page"
+      [options]="pageOptions()"
+      [value]="selected()?.pageId ?? null"
+      (valueChange)="selectPage($event)"
+    />
+  </div>
+  <button
+    type="button"
+    [disabled]="!canWrite()"
+    [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
+    (click)="clearCalls()"
+  >
+    Clear timeline
+  </button>
+  <app-har-export
+    [calls]="timeline()"
+    [ssrRequest]="pageSsrRequest()"
+    [title]="selected()?.title ?? ''"
+    [pageUrl]="selected()?.url"
+    (done)="message.set($event)"
+  />
+  <p class="message" role="status">{{ message() }}</p>
+</div>
+
+<div class="grid" [hidden]="loading()">
+  <section appSsrRequests class="panel wide" aria-labelledby="ssr-heading"></section>
+  <section appCallTimeline class="panel wide" aria-labelledby="timeline-heading"></section>
+  <section class="panel wide" aria-labelledby="lint-heading">
+    <h2 id="lint-heading">HTTP lint</h2>
+    <app-http-lint
+      [calls]="selected()?.calls ?? []"
+      [serverCalls]="renderServerCalls()"
+      (open)="openCall($event)"
+    />
+  </section>
+  <section appFaultRules class="panel" aria-labelledby="rules-heading"></section>
+  <section appSsrOverrides class="panel" aria-labelledby="overrides-heading"></section>
+  <section appHydrationStats class="panel" aria-labelledby="hydration-heading"></section>
+  <section appTransferPayload class="panel wide" aria-labelledby="payload-heading"></section>
+</div>
diff --git a/app/src/pages/network-inspector.scss b/app/src/pages/network-inspector.scss
new file mode 100644
index 00000000..02e71d46
--- /dev/null
+++ b/app/src/pages/network-inspector.scss
@@ -0,0 +1,125 @@
+@use 'mixins' as m;
+@use 'network' as net;
+
+.page-intro {
+  margin: 0 0 12px;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+
+.toolbar[hidden],
+.grid[hidden] {
+  display: none;
+}
+
+:host {
+  display: block;
+  color: var(--text);
+  font-size: 13px;
+}
+.state {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text-2);
+}
+.state.error {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  @include m.tint(danger);
+}
+.state.error strong {
+  font-weight: 600;
+}
+.state.error span {
+  color: var(--text);
+}
+.state.error button {
+  margin-top: 4px;
+}
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 16px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: color-mix(in srgb, var(--surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.toolbar .page-picker {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.page-picker > span {
+  @include m.label;
+}
+.toolbar app-select {
+  width: 280px;
+  max-width: 420px;
+}
+.message {
+  flex: 1 1 200px;
+  min-width: 0;
+  margin: 0;
+  color: var(--text-2);
+  font-size: 12px;
+  text-align: right;
+}
+.message:empty {
+  display: none;
+}
+.grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.panel {
+  @include m.panel;
+  @include m.enter;
+  min-width: 0;
+  padding: 16px;
+}
+.wide {
+  grid-column: 1 / -1;
+}
+@include net.controls;
+@media (max-width: 760px) {
+  .grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .toolbar .page-picker {
+    flex: 1 1 100%;
+  }
+  .toolbar app-select {
+    flex: 1 1 auto;
+    width: auto;
+    max-width: none;
+  }
+  .message {
+    text-align: left;
+  }
+}
diff --git a/app/src/pages/network-inspector.ts b/app/src/pages/network-inspector.ts
index d7038aa9..0a963b60 100644
--- a/app/src/pages/network-inspector.ts
+++ b/app/src/pages/network-inspector.ts
@@ -42,194 +42,8 @@ import { TransferPayload } from './network/transfer-payload';
     TransferPayload,
   ],
   providers: [NetworkState, RuleState, OverrideState],
-  template: `
-    <p class="page-intro">
-      HttpClient calls made while rendering on the server and in the browser, from the live page and
-      the devtools server, with hydration stats, the TransferState payload and fault injection.
-    </p>
-    @if (loading()) {
-      <app-state kind="loading">Loading HTTP calls…</app-state>
-    } @else if (failed()) {
-      <app-state kind="error" (retry)="retry()">
-        Could not reach the devtools server.
-        <p detail>Check that the app's dev server is running with the devtools plugin.</p>
-      </app-state>
-    }
-
-    <div class="toolbar" [hidden]="loading()">
-      <div class="page-picker">
-        <span id="page-picker-label">Page</span>
-        <app-select
-          labelledBy="page-picker-label"
-          emptyText="No connected page"
-          placeholder="No connected page"
-          [options]="pageOptions()"
-          [value]="selected()?.pageId ?? null"
-          (valueChange)="selectPage($event)"
-        />
-      </div>
-      <button
-        type="button"
-        [disabled]="!canWrite()"
-        [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
-        (click)="clearCalls()"
-      >
-        Clear timeline
-      </button>
-      <app-har-export
-        [calls]="timeline()"
-        [ssrRequest]="pageSsrRequest()"
-        [title]="selected()?.title ?? ''"
-        [pageUrl]="selected()?.url"
-        (done)="message.set($event)"
-      />
-      <p class="message" role="status">{{ message() }}</p>
-    </div>
-
-    <div class="grid" [hidden]="loading()">
-      <section appSsrRequests class="panel wide" aria-labelledby="ssr-heading"></section>
-      <section appCallTimeline class="panel wide" aria-labelledby="timeline-heading"></section>
-      <section class="panel wide" aria-labelledby="lint-heading">
-        <h2 id="lint-heading">HTTP lint</h2>
-        <app-http-lint
-          [calls]="selected()?.calls ?? []"
-          [serverCalls]="renderServerCalls()"
-          (open)="openCall($event)"
-        />
-      </section>
-      <section appFaultRules class="panel" aria-labelledby="rules-heading"></section>
-      <section appSsrOverrides class="panel" aria-labelledby="overrides-heading"></section>
-      <section appHydrationStats class="panel" aria-labelledby="hydration-heading"></section>
-      <section appTransferPayload class="panel wide" aria-labelledby="payload-heading"></section>
-    </div>
-  `,
-  styles: `
-    @use 'mixins' as m;
-    @use 'network' as net;
-
-    .page-intro {
-      margin: 0 0 12px;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-
-    .toolbar[hidden],
-    .grid[hidden] {
-      display: none;
-    }
-
-    :host {
-      display: block;
-      color: var(--text);
-      font-size: 13px;
-    }
-    .state {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin: 0 0 16px;
-      padding: 10px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      color: var(--text-2);
-    }
-    .state.error {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 4px;
-      @include m.tint(danger);
-    }
-    .state.error strong {
-      font-weight: 600;
-    }
-    .state.error span {
-      color: var(--text);
-    }
-    .state.error button {
-      margin-top: 4px;
-    }
-    .spinner {
-      width: 14px;
-      height: 14px;
-      border: 2px solid var(--border-strong);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 12px;
-      margin: 0 0 16px;
-      padding: 8px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    }
-    .toolbar .page-picker {
-      display: flex;
-      flex: 0 1 auto;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-    }
-    .page-picker > span {
-      @include m.label;
-    }
-    .toolbar app-select {
-      width: 280px;
-      max-width: 420px;
-    }
-    .message {
-      flex: 1 1 200px;
-      min-width: 0;
-      margin: 0;
-      color: var(--text-2);
-      font-size: 12px;
-      text-align: right;
-    }
-    .message:empty {
-      display: none;
-    }
-    .grid {
-      display: grid;
-      gap: 16px;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .panel {
-      @include m.panel;
-      @include m.enter;
-      min-width: 0;
-      padding: 16px;
-    }
-    .wide {
-      grid-column: 1 / -1;
-    }
-    @include net.controls;
-    @media (max-width: 760px) {
-      .grid {
-        grid-template-columns: minmax(0, 1fr);
-      }
-      .toolbar .page-picker {
-        flex: 1 1 100%;
-      }
-      .toolbar app-select {
-        flex: 1 1 auto;
-        width: auto;
-        max-width: none;
-      }
-      .message {
-        text-align: left;
-      }
-    }
-  `,
+  templateUrl: './network-inspector.html',
+  styleUrl: './network-inspector.scss',
 })
 export class NetworkInspector {
   readonly rpc = input<DevframeRpcClient | null>(null);
diff --git a/app/src/pages/network/call-copy.html b/app/src/pages/network/call-copy.html
new file mode 100644
index 00000000..d5a7823e
--- /dev/null
+++ b/app/src/pages/network/call-copy.html
@@ -0,0 +1,16 @@
+@if (call(); as c) {
+  <button
+    type="button"
+    [attr.aria-label]="'Copy ' + c.method + ' ' + c.url + ' as fetch'"
+    (click)="copy('fetch')"
+  >
+    Copy as fetch
+  </button>
+  <button
+    type="button"
+    [attr.aria-label]="'Copy ' + c.method + ' ' + c.url + ' as cURL'"
+    (click)="copy('curl')"
+  >
+    Copy as cURL
+  </button>
+}
diff --git a/app/src/pages/network/call-copy.scss b/app/src/pages/network/call-copy.scss
new file mode 100644
index 00000000..b7a55bd2
--- /dev/null
+++ b/app/src/pages/network/call-copy.scss
@@ -0,0 +1,36 @@
+@use 'mixins' as m;
+
+:host {
+  display: contents;
+}
+button {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 0.2s var(--ease),
+    border-color 0.2s var(--ease),
+    color 0.2s var(--ease);
+  &:hover {
+    border-color: var(--border-strong);
+    background: var(--surface-2);
+    color: var(--text);
+  }
+  &:focus-visible {
+    @include m.focus-ring;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+  }
+}
diff --git a/app/src/pages/network/call-copy.ts b/app/src/pages/network/call-copy.ts
index 68e4917a..1465fe51 100644
--- a/app/src/pages/network/call-copy.ts
+++ b/app/src/pages/network/call-copy.ts
@@ -13,62 +13,8 @@ import {
  */
 @Component({
   selector: 'app-call-copy',
-  template: `
-    @if (call(); as c) {
-      <button
-        type="button"
-        [attr.aria-label]="'Copy ' + c.method + ' ' + c.url + ' as fetch'"
-        (click)="copy('fetch')"
-      >
-        Copy as fetch
-      </button>
-      <button
-        type="button"
-        [attr.aria-label]="'Copy ' + c.method + ' ' + c.url + ' as cURL'"
-        (click)="copy('curl')"
-      >
-        Copy as cURL
-      </button>
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: contents;
-    }
-    button {
-      display: inline-flex;
-      align-items: center;
-      height: 28px;
-      padding: 0 10px;
-      border: 1px solid transparent;
-      border-radius: var(--radius-sm);
-      background: none;
-      color: var(--text-2);
-      font-size: 12px;
-      font-weight: 500;
-      white-space: nowrap;
-      cursor: pointer;
-      transition:
-        background-color 0.2s var(--ease),
-        border-color 0.2s var(--ease),
-        color 0.2s var(--ease);
-      &:hover {
-        border-color: var(--border-strong);
-        background: var(--surface-2);
-        color: var(--text);
-      }
-      &:focus-visible {
-        @include m.focus-ring;
-      }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      button {
-        transition: none;
-      }
-    }
-  `,
+  templateUrl: './call-copy.html',
+  styleUrl: './call-copy.scss',
 })
 export class CallCopy {
   readonly call = input<SnippetCall | null>(null);
diff --git a/app/src/pages/network/call-origin.html b/app/src/pages/network/call-origin.html
new file mode 100644
index 00000000..e0b40fb3
--- /dev/null
+++ b/app/src/pages/network/call-origin.html
@@ -0,0 +1,3 @@
+@if (origin()) {
+  <span class="tag" [title]="title()">likely {{ label() }}</span>
+}
diff --git a/app/src/pages/network/call-origin.scss b/app/src/pages/network/call-origin.scss
new file mode 100644
index 00000000..bac23067
--- /dev/null
+++ b/app/src/pages/network/call-origin.scss
@@ -0,0 +1,16 @@
+:host {
+  display: contents;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px dashed var(--border-strong);
+  border-radius: 99px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
diff --git a/app/src/pages/network/call-origin.ts b/app/src/pages/network/call-origin.ts
index 94fa5ab5..634eec89 100644
--- a/app/src/pages/network/call-origin.ts
+++ b/app/src/pages/network/call-origin.ts
@@ -14,27 +14,8 @@ const LABEL: Record<CallOrigin, string> = {
  */
 @Component({
   selector: 'app-call-origin',
-  template: `@if (origin()) {
-    <span class="tag" [title]="title()">likely {{ label() }}</span>
-  }`,
-  styles: `
-    :host {
-      display: contents;
-    }
-    .tag {
-      display: inline-flex;
-      align-items: center;
-      height: 20px;
-      padding: 0 8px;
-      border: 1px dashed var(--border-strong);
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-      font-weight: 600;
-      white-space: nowrap;
-    }
-  `,
+  templateUrl: './call-origin.html',
+  styleUrl: './call-origin.scss',
 })
 export class CallOriginTag {
   readonly origin = input<CallOrigin | undefined>(undefined);
diff --git a/app/src/pages/network/call-timeline.html b/app/src/pages/network/call-timeline.html
new file mode 100644
index 00000000..7f648b96
--- /dev/null
+++ b/app/src/pages/network/call-timeline.html
@@ -0,0 +1,189 @@
+<h2 id="timeline-heading">HTTP timeline ({{ timeline().length }})</h2>
+<app-limit-note [dropped]="droppedCalls()" [max]="maxCalls()" what="HTTP calls" limit="httpCalls" />
+<div
+  class="filters"
+  role="group"
+  aria-label="Filter the HTTP timeline"
+  [class.no-calls]="!timeline().length"
+>
+  <app-search-field
+    class="search"
+    inputId="timeline-search"
+    placeholder="Filter by URL or method"
+    saveKey="network"
+    [(value)]="callQuery"
+  />
+  <app-select class="side-filter" ariaLabel="Side" [options]="sideOptions" [(value)]="sideFilter" />
+  <label class="inline failed-toggle">
+    <input
+      type="checkbox"
+      [checked]="failedOnly()"
+      (change)="failedOnly.set($any($event.target).checked)"
+    />
+    Failed only
+  </label>
+  <div class="view-toggle" role="group" aria-label="Timeline view">
+    <button
+      type="button"
+      [attr.aria-pressed]="timelineView() === 'table'"
+      (click)="timelineView.set('table')"
+    >
+      Table
+    </button>
+    <button
+      type="button"
+      [attr.aria-pressed]="timelineView() === 'waterfall'"
+      (click)="timelineView.set('waterfall')"
+    >
+      Waterfall
+    </button>
+  </div>
+  <span class="total">{{ countText() }}</span>
+  <span class="sr-only" role="status">{{ filterStatus() }}</span>
+</div>
+<div class="live-row">
+  <app-live-controls [feed]="callFeed" what="calls" />
+</div>
+@if (visibleCalls().length && timelineView() === 'waterfall') {
+  <app-network-waterfall
+    [calls]="waterfallCalls()"
+    [selectedId]="selectedCall()?.id ?? null"
+    (open)="openCall($event)"
+  />
+} @else if (visibleCalls().length) {
+  @if (callWindow.enabled()) {
+    <p class="muted small window-note">
+      Rows render as you scroll, so the browser's find only sees the ones near view; the search
+      field searches them all.
+    </p>
+  }
+  <div class="table-wrap">
+    <table [attr.aria-rowcount]="visibleCalls().length + 1">
+      <thead>
+        <tr aria-rowindex="1">
+          <th scope="col">Side</th>
+          <th scope="col" appSortHeader="method" [(sort)]="callSort">Method</th>
+          <th scope="col" appSortHeader="url" [(sort)]="callSort">URL</th>
+          <th scope="col">Page</th>
+          <th scope="col" appSortHeader="status" [(sort)]="callSort">Status</th>
+          <th scope="col" class="num" appSortHeader="time" [(sort)]="callSort">Time</th>
+          <th scope="col">Notes</th>
+        </tr>
+      </thead>
+      <tbody #callsBody appRovingList="button[data-call-id]" [rovingWindow]="callWindow">
+        @if (callWindow.padTop()) {
+          <tr class="spacer" aria-hidden="true">
+            <td colspan="7" [style.height.px]="callWindow.padTop()"></td>
+          </tr>
+        }
+        @for (shown of shownCalls(); track shown.entry.side + shown.entry.id) {
+          @let entry = shown.entry;
+          <tr
+            [attr.aria-rowindex]="shown.index + 2"
+            [attr.data-vindex]="shown.index"
+            [class.selected]="selectedCall()?.id === entry.id"
+            (click)="openCall(entry.id)"
+          >
+            <td>
+              <span class="tag" [class.server]="entry.side === 'server'">{{
+                entry.side === 'server' ? 'SSR' : 'Client'
+              }}</span>
+            </td>
+            <td class="method">{{ entry.method }}</td>
+            <td class="url">
+              <button
+                type="button"
+                class="link"
+                [title]="entry.url"
+                [attr.data-call-id]="entry.id"
+                [attr.aria-pressed]="selectedCall()?.id === entry.id"
+                [attr.aria-controls]="selectedCall() ? 'call-preview' : null"
+              >
+                {{ entry.url }}
+              </button>
+            </td>
+            <td class="page-url" [title]="entry.pageUrl ?? ''">
+              {{ entry.pageUrl ?? '' }}
+            </td>
+            <td
+              class="status"
+              [class.ok]="callTone(entry) === 'ok'"
+              [class.redirect]="callTone(entry) === 'redirect'"
+              [class.bad]="callTone(entry) === 'bad'"
+            >
+              <span class="dot" aria-hidden="true"></span>{{ statusLabel(entry) }}
+            </td>
+            <td class="num">{{ entry.durationMs }} ms</td>
+            <td>
+              <div class="notes">
+                @if (entry.nativeFetch) {
+                  <span class="tag" title="Made with fetch() directly, not through HttpClient"
+                    >fetch()</span
+                  >
+                }
+                @if (entry.origin) {
+                  <app-call-origin [origin]="entry.origin" />
+                }
+                @if (entry.cacheHit) {
+                  <span class="tag">transfer cache</span>
+                }
+                @if (entry.delayMs) {
+                  <span class="tag">delayed {{ entry.delayMs }} ms</span>
+                }
+                @if (entry.mocked) {
+                  <span class="tag mock">mocked</span>
+                }
+                @if (entry.faulted) {
+                  <span class="tag fault">faulted</span>
+                }
+                @if (rulePatternOf(entry); as pattern) {
+                  <span class="tag rule-ref" [title]="'Matched rule: ' + pattern"
+                    >rule <code>{{ pattern }}</code></span
+                  >
+                }
+              </div>
+            </td>
+          </tr>
+        }
+        @if (callWindow.padBottom()) {
+          <tr class="spacer" aria-hidden="true">
+            <td colspan="7" [style.height.px]="callWindow.padBottom()"></td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+} @else if (timeline().length) {
+  <div class="empty no-match" role="status">
+    <p>No requests match.</p>
+    <p class="muted small">
+      @if (callQuery().trim()) {
+        Nothing matches “{{ callQuery().trim() }}” with these filters.
+      } @else {
+        None of the {{ timeline().length }} requests fit these filters.
+      }
+    </p>
+    <div class="empty-actions">
+      <button type="button" (click)="clearCallFilters()">Clear filters</button>
+    </div>
+  </div>
+} @else {
+  <div class="empty">
+    <p>No requests yet.</p>
+    <p class="muted small">
+      Add <code>withPangular()</code> to <code>provideHttpClient</code>, then load a page of the
+      app.
+    </p>
+  </div>
+}
+@if (selectedCall(); as detail) {
+  <div
+    appResponsePreview
+    id="call-preview"
+    class="preview"
+    role="region"
+    aria-labelledby="preview-heading"
+    [call]="detail"
+    (keydown.escape)="closePreview()"
+  ></div>
+}
diff --git a/app/src/pages/network/call-timeline.scss b/app/src/pages/network/call-timeline.scss
new file mode 100644
index 00000000..74f16cec
--- /dev/null
+++ b/app/src/pages/network/call-timeline.scss
@@ -0,0 +1,90 @@
+@use 'mixins' as m;
+@use 'network' as net;
+
+@include net.controls;
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 12px;
+}
+.live-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: -4px 0 12px;
+}
+.search {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+.search-icon {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+.search:focus-within .search-icon {
+  stroke: var(--accent);
+}
+.filters input[type='search'] {
+  height: var(--control-h);
+  padding-left: 34px;
+}
+.filters .side-filter {
+  flex: 0 0 140px;
+}
+.failed-toggle {
+  flex: none;
+  height: var(--control-h);
+  font-size: 13px;
+  font-weight: 500;
+}
+.total {
+  flex: none;
+  color: var(--text-2);
+  font-size: 12px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+/* "0 of 0" says nothing before the first call; the empty state below explains it. */
+.filters.no-calls .total {
+  display: none;
+}
+@include net.table;
+@include net.status;
+.view-toggle {
+  display: inline-flex;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+.view-toggle button {
+  height: calc(var(--control-h) - 2px);
+  padding: 0 10px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-2);
+}
+.view-toggle button + button {
+  border-left: 1px solid var(--border-strong);
+}
+.view-toggle button[aria-pressed='true'] {
+  background: var(--accent-soft);
+  color: var(--text-strong);
+}
+.view-toggle button:focus-visible {
+  @include m.focus-ring(-2px);
+}
+@include net.preview;
diff --git a/app/src/pages/network/call-timeline.ts b/app/src/pages/network/call-timeline.ts
index 927eff6c..29190575 100644
--- a/app/src/pages/network/call-timeline.ts
+++ b/app/src/pages/network/call-timeline.ts
@@ -29,299 +29,8 @@ import { ResponsePreview } from './response-preview';
     Select,
     SortHeader,
   ],
-  template: `
-    <h2 id="timeline-heading">HTTP timeline ({{ timeline().length }})</h2>
-    <app-limit-note
-      [dropped]="droppedCalls()"
-      [max]="maxCalls()"
-      what="HTTP calls"
-      limit="httpCalls"
-    />
-    <div
-      class="filters"
-      role="group"
-      aria-label="Filter the HTTP timeline"
-      [class.no-calls]="!timeline().length"
-    >
-      <app-search-field
-        class="search"
-        inputId="timeline-search"
-        placeholder="Filter by URL or method"
-        saveKey="network"
-        [(value)]="callQuery"
-      />
-      <app-select
-        class="side-filter"
-        ariaLabel="Side"
-        [options]="sideOptions"
-        [(value)]="sideFilter"
-      />
-      <label class="inline failed-toggle">
-        <input
-          type="checkbox"
-          [checked]="failedOnly()"
-          (change)="failedOnly.set($any($event.target).checked)"
-        />
-        Failed only
-      </label>
-      <div class="view-toggle" role="group" aria-label="Timeline view">
-        <button
-          type="button"
-          [attr.aria-pressed]="timelineView() === 'table'"
-          (click)="timelineView.set('table')"
-        >
-          Table
-        </button>
-        <button
-          type="button"
-          [attr.aria-pressed]="timelineView() === 'waterfall'"
-          (click)="timelineView.set('waterfall')"
-        >
-          Waterfall
-        </button>
-      </div>
-      <span class="total">{{ countText() }}</span>
-      <span class="sr-only" role="status">{{ filterStatus() }}</span>
-    </div>
-    <div class="live-row">
-      <app-live-controls [feed]="callFeed" what="calls" />
-    </div>
-    @if (visibleCalls().length && timelineView() === 'waterfall') {
-      <app-network-waterfall
-        [calls]="waterfallCalls()"
-        [selectedId]="selectedCall()?.id ?? null"
-        (open)="openCall($event)"
-      />
-    } @else if (visibleCalls().length) {
-      @if (callWindow.enabled()) {
-        <p class="muted small window-note">
-          Rows render as you scroll, so the browser's find only sees the ones near view; the search
-          field searches them all.
-        </p>
-      }
-      <div class="table-wrap">
-        <table [attr.aria-rowcount]="visibleCalls().length + 1">
-          <thead>
-            <tr aria-rowindex="1">
-              <th scope="col">Side</th>
-              <th scope="col" appSortHeader="method" [(sort)]="callSort">Method</th>
-              <th scope="col" appSortHeader="url" [(sort)]="callSort">URL</th>
-              <th scope="col">Page</th>
-              <th scope="col" appSortHeader="status" [(sort)]="callSort">Status</th>
-              <th scope="col" class="num" appSortHeader="time" [(sort)]="callSort">Time</th>
-              <th scope="col">Notes</th>
-            </tr>
-          </thead>
-          <tbody #callsBody appRovingList="button[data-call-id]" [rovingWindow]="callWindow">
-            @if (callWindow.padTop()) {
-              <tr class="spacer" aria-hidden="true">
-                <td colspan="7" [style.height.px]="callWindow.padTop()"></td>
-              </tr>
-            }
-            @for (shown of shownCalls(); track shown.entry.side + shown.entry.id) {
-              @let entry = shown.entry;
-              <tr
-                [attr.aria-rowindex]="shown.index + 2"
-                [attr.data-vindex]="shown.index"
-                [class.selected]="selectedCall()?.id === entry.id"
-                (click)="openCall(entry.id)"
-              >
-                <td>
-                  <span class="tag" [class.server]="entry.side === 'server'">{{
-                    entry.side === 'server' ? 'SSR' : 'Client'
-                  }}</span>
-                </td>
-                <td class="method">{{ entry.method }}</td>
-                <td class="url">
-                  <button
-                    type="button"
-                    class="link"
-                    [title]="entry.url"
-                    [attr.data-call-id]="entry.id"
-                    [attr.aria-pressed]="selectedCall()?.id === entry.id"
-                    [attr.aria-controls]="selectedCall() ? 'call-preview' : null"
-                  >
-                    {{ entry.url }}
-                  </button>
-                </td>
-                <td class="page-url" [title]="entry.pageUrl ?? ''">
-                  {{ entry.pageUrl ?? '' }}
-                </td>
-                <td
-                  class="status"
-                  [class.ok]="callTone(entry) === 'ok'"
-                  [class.redirect]="callTone(entry) === 'redirect'"
-                  [class.bad]="callTone(entry) === 'bad'"
-                >
-                  <span class="dot" aria-hidden="true"></span>{{ statusLabel(entry) }}
-                </td>
-                <td class="num">{{ entry.durationMs }} ms</td>
-                <td>
-                  <div class="notes">
-                    @if (entry.nativeFetch) {
-                      <span class="tag" title="Made with fetch() directly, not through HttpClient"
-                        >fetch()</span
-                      >
-                    }
-                    @if (entry.origin) {
-                      <app-call-origin [origin]="entry.origin" />
-                    }
-                    @if (entry.cacheHit) {
-                      <span class="tag">transfer cache</span>
-                    }
-                    @if (entry.delayMs) {
-                      <span class="tag">delayed {{ entry.delayMs }} ms</span>
-                    }
-                    @if (entry.mocked) {
-                      <span class="tag mock">mocked</span>
-                    }
-                    @if (entry.faulted) {
-                      <span class="tag fault">faulted</span>
-                    }
-                    @if (rulePatternOf(entry); as pattern) {
-                      <span class="tag rule-ref" [title]="'Matched rule: ' + pattern"
-                        >rule <code>{{ pattern }}</code></span
-                      >
-                    }
-                  </div>
-                </td>
-              </tr>
-            }
-            @if (callWindow.padBottom()) {
-              <tr class="spacer" aria-hidden="true">
-                <td colspan="7" [style.height.px]="callWindow.padBottom()"></td>
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-    } @else if (timeline().length) {
-      <div class="empty no-match" role="status">
-        <p>No requests match.</p>
-        <p class="muted small">
-          @if (callQuery().trim()) {
-            Nothing matches “{{ callQuery().trim() }}” with these filters.
-          } @else {
-            None of the {{ timeline().length }} requests fit these filters.
-          }
-        </p>
-        <div class="empty-actions">
-          <button type="button" (click)="clearCallFilters()">Clear filters</button>
-        </div>
-      </div>
-    } @else {
-      <div class="empty">
-        <p>No requests yet.</p>
-        <p class="muted small">
-          Add <code>withPangular()</code> to <code>provideHttpClient</code>, then load a page of the
-          app.
-        </p>
-      </div>
-    }
-    @if (selectedCall(); as detail) {
-      <div
-        appResponsePreview
-        id="call-preview"
-        class="preview"
-        role="region"
-        aria-labelledby="preview-heading"
-        [call]="detail"
-        (keydown.escape)="closePreview()"
-      ></div>
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-    @use 'network' as net;
-
-    @include net.controls;
-    .filters {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 12px;
-      margin: 0 0 12px;
-    }
-    .live-row {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 12px;
-      margin: -4px 0 12px;
-    }
-    .search {
-      position: relative;
-      flex: 1 1 220px;
-      min-width: 0;
-    }
-    .search-icon {
-      position: absolute;
-      top: 50%;
-      left: 12px;
-      width: 14px;
-      height: 14px;
-      transform: translateY(-50%);
-      fill: none;
-      stroke: var(--text-3);
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      pointer-events: none;
-    }
-    .search:focus-within .search-icon {
-      stroke: var(--accent);
-    }
-    .filters input[type='search'] {
-      height: var(--control-h);
-      padding-left: 34px;
-    }
-    .filters .side-filter {
-      flex: 0 0 140px;
-    }
-    .failed-toggle {
-      flex: none;
-      height: var(--control-h);
-      font-size: 13px;
-      font-weight: 500;
-    }
-    .total {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-      white-space: nowrap;
-      font-variant-numeric: tabular-nums;
-    }
-    /* "0 of 0" says nothing before the first call; the empty state below explains it. */
-    .filters.no-calls .total {
-      display: none;
-    }
-    @include net.table;
-    @include net.status;
-    .view-toggle {
-      display: inline-flex;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      overflow: hidden;
-    }
-    .view-toggle button {
-      height: calc(var(--control-h) - 2px);
-      padding: 0 10px;
-      border: 0;
-      border-radius: 0;
-      background: transparent;
-      color: var(--text-2);
-    }
-    .view-toggle button + button {
-      border-left: 1px solid var(--border-strong);
-    }
-    .view-toggle button[aria-pressed='true'] {
-      background: var(--accent-soft);
-      color: var(--text-strong);
-    }
-    .view-toggle button:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    @include net.preview;
-  `,
+  templateUrl: './call-timeline.html',
+  styleUrl: './call-timeline.scss',
 })
 export class CallTimeline {
   private readonly state = inject(NetworkState);
diff --git a/app/src/pages/network/fault-rules.html b/app/src/pages/network/fault-rules.html
new file mode 100644
index 00000000..eaaeaccf
--- /dev/null
+++ b/app/src/pages/network/fault-rules.html
@@ -0,0 +1,182 @@
+<h2 id="rules-heading">Fault injection</h2>
+@if (!canWrite()) {
+  <p id="http-writes-off" class="muted small">{{ writesOff }}</p>
+}
+<app-rule-presets
+  [disabled]="!canWrite()"
+  [describedBy]="canWrite() ? '' : 'http-writes-off'"
+  (add)="addPreset($event)"
+/>
+<form id="rule-form" class="rule-form" (submit)="addRule($event)">
+  <label>
+    <span>URL pattern <span class="hint">(substring or * glob, ^ anchors the path)</span></span>
+    <input
+      id="rule-pattern"
+      required
+      spellcheck="false"
+      autocomplete="off"
+      [value]="draft().pattern"
+      (input)="patch('pattern', $event)"
+      placeholder="e.g. /api/products"
+    />
+  </label>
+  <app-rule-match-count
+    [calls]="timeline()"
+    [pattern]="draft().pattern"
+    [method]="draft().method"
+    [target]="draft().target"
+  />
+  <div class="row">
+    <div class="field-group">
+      <span id="rule-method-label">Method</span>
+      <app-select
+        labelledBy="rule-method-label"
+        [options]="methodOptions()"
+        [value]="draft().method"
+        (valueChange)="setDraft('method', $event ?? '')"
+      />
+    </div>
+    <div class="field-group">
+      <span id="rule-target-label">Apply on</span>
+      <app-select
+        labelledBy="rule-target-label"
+        [describedBy]="draftMocksOnServer() ? 'rule-ssr-note' : ''"
+        [options]="targetOptions"
+        [value]="draft().target"
+        (valueChange)="setDraft('target', $event ?? 'both')"
+      />
+    </div>
+  </div>
+  <div class="row">
+    <div class="field-group">
+      <span id="rule-status-label">Status</span>
+      <app-select
+        labelledBy="rule-status-label"
+        [describedBy]="draftMocksOnServer() ? 'rule-ssr-note' : ''"
+        [options]="statusOptions"
+        [value]="draft().status"
+        (valueChange)="setDraft('status', $event ?? '')"
+      />
+    </div>
+    <label>
+      Delay (ms)
+      <input
+        type="number"
+        inputmode="numeric"
+        min="0"
+        max="10000"
+        placeholder="0"
+        [value]="draft().delayMs"
+        (input)="patch('delayMs', $event)"
+      />
+    </label>
+  </div>
+  <label>
+    <span>Chance (%) <span class="hint">(optional, share of matching requests)</span></span>
+    <input
+      id="rule-chance"
+      type="number"
+      inputmode="numeric"
+      min="1"
+      max="99"
+      step="1"
+      placeholder="100"
+      [value]="draft().chance"
+      (input)="patch('chance', $event)"
+    />
+  </label>
+  <label>
+    <span>Mock JSON body <span class="hint">(optional)</span></span>
+    <textarea
+      rows="3"
+      spellcheck="false"
+      [placeholder]="bodyPlaceholder"
+      [value]="draft().body"
+      (input)="patch('body', $event)"
+      [attr.aria-invalid]="bodyError() ? 'true' : null"
+      aria-describedby="body-error"
+    ></textarea>
+  </label>
+  <p id="body-error" class="field-error">{{ bodyError() }}</p>
+  @if (draftMocksOnServer()) {
+    <p id="rule-ssr-note" class="muted small">
+      SSR mocks are not transferred to the client: the browser requests the URL again and gets the
+      real response unless the rule also applies on the client.
+    </p>
+  }
+  <p id="rule-hint" class="muted small">{{ draftHint() }}</p>
+  <div class="form-actions">
+    <button
+      type="submit"
+      [disabled]="!canWrite() || !draftRule()"
+      [attr.aria-disabled]="addingRule() || null"
+      [attr.aria-describedby]="canWrite() ? 'rule-hint' : 'http-writes-off'"
+    >
+      Add rule
+    </button>
+  </div>
+</form>
+
+<h3 id="rule-list-heading" class="rules-heading" tabindex="-1">Rules ({{ rules().length }})</h3>
+<ul class="rules">
+  @for (rule of rules(); track rule.id) {
+    <li [class.off]="!rule.enabled">
+      <label class="inline">
+        <input
+          type="checkbox"
+          [checked]="rule.enabled"
+          [disabled]="!canWrite()"
+          [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
+          (change)="toggleRule(rule.id)"
+          [attr.aria-label]="'Enable rule for ' + rule.pattern"
+        />
+        <code class="rule-pattern" [title]="rule.pattern"
+          ><span class="rule-method">{{ rule.method || 'ANY' }}</span> {{ rule.pattern }}</code
+        >
+      </label>
+      <button
+        type="button"
+        class="link remove"
+        data-remove-rule
+        [disabled]="!canWrite()"
+        [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
+        (click)="removeRule(rule.id)"
+        [attr.aria-label]="'Remove rule for ' + rule.pattern"
+      >
+        Remove
+      </button>
+      <span class="rule-meta">
+        <span>{{ targetLabel(rule.target) }}</span>
+        @if (rule.status === undefined) {
+          <span>passthrough</span>
+        } @else if (rule.status === 0) {
+          <span class="status bad">network error</span>
+        } @else {
+          <span
+            class="status"
+            [class.ok]="statusTone(rule.status) === 'ok'"
+            [class.redirect]="statusTone(rule.status) === 'redirect'"
+            [class.bad]="statusTone(rule.status) === 'bad'"
+            >{{ rule.status }}</span
+          >
+        }
+        @if (rule.delayMs) {
+          <span>{{ rule.delayMs }} ms</span>
+        }
+        @if (rule.body) {
+          <span>mock body</span>
+        }
+        @if (rule.chance) {
+          <span>{{ rule.chance }}% of requests</span>
+        }
+      </span>
+      @if (mocksOnServer(rule)) {
+        <p class="rule-note">
+          The SSR mock is not written to TransferState, so the browser requests this URL again.
+        </p>
+      }
+    </li>
+  } @empty {
+    <li class="empty-rule">No rules. SSR rules apply on the next page load.</li>
+  }
+</ul>
diff --git a/app/src/pages/network/fault-rules.scss b/app/src/pages/network/fault-rules.scss
new file mode 100644
index 00000000..c40a6eaa
--- /dev/null
+++ b/app/src/pages/network/fault-rules.scss
@@ -0,0 +1,5 @@
+@use 'network' as net;
+
+@include net.controls;
+@include net.status;
+@include net.rule-form;
diff --git a/app/src/pages/network/fault-rules.ts b/app/src/pages/network/fault-rules.ts
index daa8801f..795efb98 100644
--- a/app/src/pages/network/fault-rules.ts
+++ b/app/src/pages/network/fault-rules.ts
@@ -18,197 +18,8 @@ import type { SelectOption } from '../../ui/select';
 @Component({
   selector: 'section[appFaultRules]',
   imports: [RuleMatchCount, RulePresets, Select],
-  template: `
-    <h2 id="rules-heading">Fault injection</h2>
-    @if (!canWrite()) {
-      <p id="http-writes-off" class="muted small">{{ writesOff }}</p>
-    }
-    <app-rule-presets
-      [disabled]="!canWrite()"
-      [describedBy]="canWrite() ? '' : 'http-writes-off'"
-      (add)="addPreset($event)"
-    />
-    <form id="rule-form" class="rule-form" (submit)="addRule($event)">
-      <label>
-        <span>URL pattern <span class="hint">(substring or * glob, ^ anchors the path)</span></span>
-        <input
-          id="rule-pattern"
-          required
-          spellcheck="false"
-          autocomplete="off"
-          [value]="draft().pattern"
-          (input)="patch('pattern', $event)"
-          placeholder="e.g. /api/products"
-        />
-      </label>
-      <app-rule-match-count
-        [calls]="timeline()"
-        [pattern]="draft().pattern"
-        [method]="draft().method"
-        [target]="draft().target"
-      />
-      <div class="row">
-        <div class="field-group">
-          <span id="rule-method-label">Method</span>
-          <app-select
-            labelledBy="rule-method-label"
-            [options]="methodOptions()"
-            [value]="draft().method"
-            (valueChange)="setDraft('method', $event ?? '')"
-          />
-        </div>
-        <div class="field-group">
-          <span id="rule-target-label">Apply on</span>
-          <app-select
-            labelledBy="rule-target-label"
-            [describedBy]="draftMocksOnServer() ? 'rule-ssr-note' : ''"
-            [options]="targetOptions"
-            [value]="draft().target"
-            (valueChange)="setDraft('target', $event ?? 'both')"
-          />
-        </div>
-      </div>
-      <div class="row">
-        <div class="field-group">
-          <span id="rule-status-label">Status</span>
-          <app-select
-            labelledBy="rule-status-label"
-            [describedBy]="draftMocksOnServer() ? 'rule-ssr-note' : ''"
-            [options]="statusOptions"
-            [value]="draft().status"
-            (valueChange)="setDraft('status', $event ?? '')"
-          />
-        </div>
-        <label>
-          Delay (ms)
-          <input
-            type="number"
-            inputmode="numeric"
-            min="0"
-            max="10000"
-            placeholder="0"
-            [value]="draft().delayMs"
-            (input)="patch('delayMs', $event)"
-          />
-        </label>
-      </div>
-      <label>
-        <span>Chance (%) <span class="hint">(optional, share of matching requests)</span></span>
-        <input
-          id="rule-chance"
-          type="number"
-          inputmode="numeric"
-          min="1"
-          max="99"
-          step="1"
-          placeholder="100"
-          [value]="draft().chance"
-          (input)="patch('chance', $event)"
-        />
-      </label>
-      <label>
-        <span>Mock JSON body <span class="hint">(optional)</span></span>
-        <textarea
-          rows="3"
-          spellcheck="false"
-          [placeholder]="bodyPlaceholder"
-          [value]="draft().body"
-          (input)="patch('body', $event)"
-          [attr.aria-invalid]="bodyError() ? 'true' : null"
-          aria-describedby="body-error"
-        ></textarea>
-      </label>
-      <p id="body-error" class="field-error">{{ bodyError() }}</p>
-      @if (draftMocksOnServer()) {
-        <p id="rule-ssr-note" class="muted small">
-          SSR mocks are not transferred to the client: the browser requests the URL again and gets
-          the real response unless the rule also applies on the client.
-        </p>
-      }
-      <p id="rule-hint" class="muted small">{{ draftHint() }}</p>
-      <div class="form-actions">
-        <button
-          type="submit"
-          [disabled]="!canWrite() || !draftRule()"
-          [attr.aria-disabled]="addingRule() || null"
-          [attr.aria-describedby]="canWrite() ? 'rule-hint' : 'http-writes-off'"
-        >
-          Add rule
-        </button>
-      </div>
-    </form>
-
-    <h3 id="rule-list-heading" class="rules-heading" tabindex="-1">Rules ({{ rules().length }})</h3>
-    <ul class="rules">
-      @for (rule of rules(); track rule.id) {
-        <li [class.off]="!rule.enabled">
-          <label class="inline">
-            <input
-              type="checkbox"
-              [checked]="rule.enabled"
-              [disabled]="!canWrite()"
-              [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
-              (change)="toggleRule(rule.id)"
-              [attr.aria-label]="'Enable rule for ' + rule.pattern"
-            />
-            <code class="rule-pattern" [title]="rule.pattern"
-              ><span class="rule-method">{{ rule.method || 'ANY' }}</span> {{ rule.pattern }}</code
-            >
-          </label>
-          <button
-            type="button"
-            class="link remove"
-            data-remove-rule
-            [disabled]="!canWrite()"
-            [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
-            (click)="removeRule(rule.id)"
-            [attr.aria-label]="'Remove rule for ' + rule.pattern"
-          >
-            Remove
-          </button>
-          <span class="rule-meta">
-            <span>{{ targetLabel(rule.target) }}</span>
-            @if (rule.status === undefined) {
-              <span>passthrough</span>
-            } @else if (rule.status === 0) {
-              <span class="status bad">network error</span>
-            } @else {
-              <span
-                class="status"
-                [class.ok]="statusTone(rule.status) === 'ok'"
-                [class.redirect]="statusTone(rule.status) === 'redirect'"
-                [class.bad]="statusTone(rule.status) === 'bad'"
-                >{{ rule.status }}</span
-              >
-            }
-            @if (rule.delayMs) {
-              <span>{{ rule.delayMs }} ms</span>
-            }
-            @if (rule.body) {
-              <span>mock body</span>
-            }
-            @if (rule.chance) {
-              <span>{{ rule.chance }}% of requests</span>
-            }
-          </span>
-          @if (mocksOnServer(rule)) {
-            <p class="rule-note">
-              The SSR mock is not written to TransferState, so the browser requests this URL again.
-            </p>
-          }
-        </li>
-      } @empty {
-        <li class="empty-rule">No rules. SSR rules apply on the next page load.</li>
-      }
-    </ul>
-  `,
-  styles: `
-    @use 'network' as net;
-
-    @include net.controls;
-    @include net.status;
-    @include net.rule-form;
-  `,
+  templateUrl: './fault-rules.html',
+  styleUrl: './fault-rules.scss',
 })
 export class FaultRules {
   private readonly state = inject(NetworkState);
diff --git a/app/src/pages/network/har-export.html b/app/src/pages/network/har-export.html
new file mode 100644
index 00000000..3aa44d78
--- /dev/null
+++ b/app/src/pages/network/har-export.html
@@ -0,0 +1,11 @@
+<button
+  type="button"
+  [disabled]="!calls().length"
+  aria-describedby="har-export-note"
+  (click)="save()"
+>
+  Export HAR
+</button>
+<span id="har-export-note" class="sr-only"
+  >Saves the timeline as a HAR file with secrets masked.</span
+>
diff --git a/app/src/pages/network/har-export.scss b/app/src/pages/network/har-export.scss
new file mode 100644
index 00000000..82b33b93
--- /dev/null
+++ b/app/src/pages/network/har-export.scss
@@ -0,0 +1,36 @@
+@use 'mixins' as m;
+
+:host {
+  display: contents;
+}
+button {
+  display: inline-flex;
+  align-items: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 0.2s var(--ease),
+    border-color 0.2s var(--ease);
+  &:hover:not(:disabled) {
+    border-color: var(--accent-line);
+    background: var(--surface-3);
+  }
+  &:focus-visible {
+    @include m.focus-ring;
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+  }
+}
diff --git a/app/src/pages/network/har-export.ts b/app/src/pages/network/har-export.ts
index 1c1c2912..b6f1701c 100644
--- a/app/src/pages/network/har-export.ts
+++ b/app/src/pages/network/har-export.ts
@@ -24,57 +24,8 @@ export function harFileName(pageUrl: string | undefined): string {
  */
 @Component({
   selector: 'app-har-export',
-  template: `
-    <button
-      type="button"
-      [disabled]="!calls().length"
-      aria-describedby="har-export-note"
-      (click)="save()"
-    >
-      Export HAR
-    </button>
-    <span id="har-export-note" class="sr-only"
-      >Saves the timeline as a HAR file with secrets masked.</span
-    >
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: contents;
-    }
-    button {
-      display: inline-flex;
-      align-items: center;
-      height: 34px;
-      padding: 0 14px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      font-weight: 500;
-      white-space: nowrap;
-      cursor: pointer;
-      transition:
-        background-color 0.2s var(--ease),
-        border-color 0.2s var(--ease);
-      &:hover:not(:disabled) {
-        border-color: var(--accent-line);
-        background: var(--surface-3);
-      }
-      &:focus-visible {
-        @include m.focus-ring;
-      }
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      button {
-        transition: none;
-      }
-    }
-  `,
+  templateUrl: './har-export.html',
+  styleUrl: './har-export.scss',
 })
 export class HarExport {
   readonly calls = input<readonly RecordedCall[]>([]);
diff --git a/app/src/pages/network/http-lint.html b/app/src/pages/network/http-lint.html
new file mode 100644
index 00000000..d47d45ef
--- /dev/null
+++ b/app/src/pages/network/http-lint.html
@@ -0,0 +1,32 @@
+<p class="intro">
+  Same GET again within {{ defaults.duplicateWindowMs }} ms, {{ defaults.minChain }} or more calls
+  in a row that could start together, and server calls the browser made again. Transfer cache hits,
+  mocks and cancelled calls are left out.
+</p>
+@if (!calls().length) {
+  <p class="none">No client calls to check yet.</p>
+} @else if (!findings().length) {
+  <p class="none ok">No duplicate requests, waterfalls or repeated server calls.</p>
+} @else {
+  <ul class="findings">
+    @for (finding of findings(); track finding.kind + ':' + finding.callIds.join(',')) {
+      <li>
+        <span class="kind" [attr.data-kind]="finding.kind">{{ kindLabel(finding.kind) }}</span>
+        <p class="message">
+          {{ finding.message }}
+          @if (finding.wastedMs) {
+            <span class="cost">About {{ finding.wastedMs }} ms to win.</span>
+          }
+        </p>
+        <p class="hint">{{ finding.hint }}</p>
+        <button
+          type="button"
+          [attr.aria-label]="'Show the first call of: ' + finding.message"
+          (click)="open.emit(finding.callIds[0])"
+        >
+          Show first call
+        </button>
+      </li>
+    }
+  </ul>
+}
diff --git a/app/src/pages/network/http-lint.scss b/app/src/pages/network/http-lint.scss
new file mode 100644
index 00000000..14e53561
--- /dev/null
+++ b/app/src/pages/network/http-lint.scss
@@ -0,0 +1,84 @@
+@use 'mixins' as m;
+
+:host {
+  display: block;
+}
+.intro,
+.none,
+.hint {
+  margin: 0;
+  color: var(--text-2);
+  font-size: 12px;
+}
+.none {
+  margin-top: 8px;
+}
+.findings {
+  display: grid;
+  gap: 8px;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+}
+li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 4px 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+.kind {
+  @include m.label;
+  grid-column: 1;
+}
+.message {
+  grid-column: 1;
+  margin: 0;
+  color: var(--text);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+.cost {
+  color: var(--text-2);
+}
+.hint {
+  grid-column: 1;
+}
+button {
+  grid-column: 2;
+  grid-row: 1 / span 3;
+  align-self: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text);
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--ease);
+  &:hover {
+    background: var(--surface-3);
+  }
+  &:focus-visible {
+    @include m.focus-ring;
+  }
+}
+@media (max-width: 640px) {
+  li {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  button {
+    grid-column: 1;
+    grid-row: auto;
+    justify-self: start;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+  }
+}
diff --git a/app/src/pages/network/http-lint.ts b/app/src/pages/network/http-lint.ts
index 06a7b3e8..5516de6a 100644
--- a/app/src/pages/network/http-lint.ts
+++ b/app/src/pages/network/http-lint.ts
@@ -20,126 +20,8 @@ const KIND_LABEL: Record<HttpLintKind, string> = {
  */
 @Component({
   selector: 'app-http-lint',
-  template: `
-    <p class="intro">
-      Same GET again within {{ defaults.duplicateWindowMs }} ms, {{ defaults.minChain }} or more
-      calls in a row that could start together, and server calls the browser made again. Transfer
-      cache hits, mocks and cancelled calls are left out.
-    </p>
-    @if (!calls().length) {
-      <p class="none">No client calls to check yet.</p>
-    } @else if (!findings().length) {
-      <p class="none ok">No duplicate requests, waterfalls or repeated server calls.</p>
-    } @else {
-      <ul class="findings">
-        @for (finding of findings(); track finding.kind + ':' + finding.callIds.join(',')) {
-          <li>
-            <span class="kind" [attr.data-kind]="finding.kind">{{ kindLabel(finding.kind) }}</span>
-            <p class="message">
-              {{ finding.message }}
-              @if (finding.wastedMs) {
-                <span class="cost">About {{ finding.wastedMs }} ms to win.</span>
-              }
-            </p>
-            <p class="hint">{{ finding.hint }}</p>
-            <button
-              type="button"
-              [attr.aria-label]="'Show the first call of: ' + finding.message"
-              (click)="open.emit(finding.callIds[0])"
-            >
-              Show first call
-            </button>
-          </li>
-        }
-      </ul>
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: block;
-    }
-    .intro,
-    .none,
-    .hint {
-      margin: 0;
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .none {
-      margin-top: 8px;
-    }
-    .findings {
-      display: grid;
-      gap: 8px;
-      margin: 10px 0 0;
-      padding: 0;
-      list-style: none;
-    }
-    li {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 4px 12px;
-      padding: 8px 10px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-    }
-    .kind {
-      @include m.label;
-      grid-column: 1;
-    }
-    .message {
-      grid-column: 1;
-      margin: 0;
-      color: var(--text);
-      font-size: 13px;
-      overflow-wrap: anywhere;
-    }
-    .cost {
-      color: var(--text-2);
-    }
-    .hint {
-      grid-column: 1;
-    }
-    button {
-      grid-column: 2;
-      grid-row: 1 / span 3;
-      align-self: center;
-      height: 28px;
-      padding: 0 10px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      color: var(--text);
-      font-size: 12px;
-      white-space: nowrap;
-      cursor: pointer;
-      transition: background-color 0.2s var(--ease);
-      &:hover {
-        background: var(--surface-3);
-      }
-      &:focus-visible {
-        @include m.focus-ring;
-      }
-    }
-    @media (max-width: 640px) {
-      li {
-        grid-template-columns: minmax(0, 1fr);
-      }
-      button {
-        grid-column: 1;
-        grid-row: auto;
-        justify-self: start;
-      }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      button {
-        transition: none;
-      }
-    }
-  `,
+  templateUrl: './http-lint.html',
+  styleUrl: './http-lint.scss',
 })
 export class HttpLint {
   /** The selected page's client calls. */
diff --git a/app/src/pages/network/hydration-stats.html b/app/src/pages/network/hydration-stats.html
new file mode 100644
index 00000000..f64a9cc1
--- /dev/null
+++ b/app/src/pages/network/hydration-stats.html
@@ -0,0 +1,95 @@
+<h2 id="hydration-heading">Hydration</h2>
+@if (selected()?.hydration; as h) {
+  <dl class="stats">
+    <div>
+      <dt>Enabled</dt>
+      <dd>
+        <span class="tag" [class.on]="h.enabled" [class.off-tag]="!h.enabled">{{
+          h.enabled ? 'yes' : 'no (client render only)'
+        }}</span>
+      </dd>
+    </div>
+    <div>
+      <dt>Hydrated components</dt>
+      <dd>{{ h.hydratedComponents ?? 'n/a' }}</dd>
+    </div>
+    <div>
+      <dt>Hydrated nodes</dt>
+      <dd>{{ h.hydratedNodes ?? 'n/a' }}</dd>
+    </div>
+    <div>
+      <dt>Skipped components</dt>
+      <dd>{{ h.componentsSkippedHydration ?? 'n/a' }}</dd>
+    </div>
+    <div>
+      <dt>App stable after</dt>
+      <dd>{{ h.stableMs === undefined ? 'n/a' : h.stableMs + ' ms' }}</dd>
+    </div>
+    <div>
+      <dt>Incremental defer blocks</dt>
+      <dd>{{ h.deferBlocksWithIncrementalHydration ?? 'n/a' }}</dd>
+    </div>
+    @if (h.nodes; as n) {
+      <div>
+        <dt>DOM nodes hydrated</dt>
+        <dd>{{ n.hydrated }}</dd>
+      </div>
+      <div>
+        <dt>DOM nodes skipped</dt>
+        <dd>{{ n.skipped }}</dd>
+      </div>
+      <div>
+        <dt>Mismatched components</dt>
+        <dd [class.bad]="n.mismatched > 0">{{ n.mismatched }}</dd>
+      </div>
+    }
+  </dl>
+  @if (h.mismatches?.length) {
+    <h3>Mismatches ({{ h.mismatches!.length }})</h3>
+    <ul class="plain mismatches">
+      @for (m of h.mismatches; track $index) {
+        <li>
+          <code>{{ m.isClass ? m.component : '<' + m.component + '>' }}</code>
+          @if (m.expected) {
+            <span class="mismatch-row"
+              ><span class="mismatch-label">Expected</span> <code>{{ m.expected }}</code></span
+            >
+          }
+          @if (m.actual) {
+            <span class="mismatch-row"
+              ><span class="mismatch-label">Actual</span> <code>{{ m.actual }}</code></span
+            >
+          }
+        </li>
+      }
+    </ul>
+  }
+  @if (h.skipHydrationHosts.length) {
+    <h3>ngSkipHydration hosts</h3>
+    <ul class="plain">
+      @for (host of h.skipHydrationHosts; track $index) {
+        <li>
+          <code>{{ host }}</code>
+        </li>
+      }
+    </ul>
+  }
+  @if (h.warningsCaptured === false) {
+    <h3>Warnings</h3>
+    <p class="muted small">
+      Not captured: add <code>providePangularHttp()</code> to the app providers.
+    </p>
+  } @else {
+    <h3>Warnings ({{ h.warnings.length }})</h3>
+    @for (warning of h.warnings; track $index) {
+      <pre class="warn">{{ warning }}</pre>
+    } @empty {
+      <p class="muted small ok-note">No hydration warnings.</p>
+    }
+  }
+} @else {
+  <div class="empty">
+    <p>No hydration data for this page.</p>
+    <p class="muted small">Open a server rendered page of the app to see its stats.</p>
+  </div>
+}
diff --git a/app/src/pages/network/hydration-stats.scss b/app/src/pages/network/hydration-stats.scss
new file mode 100644
index 00000000..c5abb627
--- /dev/null
+++ b/app/src/pages/network/hydration-stats.scss
@@ -0,0 +1,39 @@
+@use 'network' as net;
+
+@include net.controls;
+.mismatches li {
+  display: grid;
+  gap: 4px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+}
+.mismatch-row {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+  font-size: 12px;
+}
+.mismatch-row code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.mismatch-label {
+  flex: none;
+  width: 64px;
+  color: var(--text-2);
+}
+@include net.status;
+@include net.pre;
+.plain {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.plain li {
+  overflow-wrap: anywhere;
+}
+@include net.stats;
diff --git a/app/src/pages/network/hydration-stats.ts b/app/src/pages/network/hydration-stats.ts
index 243ef7e0..3f664d7f 100644
--- a/app/src/pages/network/hydration-stats.ts
+++ b/app/src/pages/network/hydration-stats.ts
@@ -4,144 +4,8 @@ import { NetworkState } from './network-state';
 /** The hydration stats, mismatches and warnings of the page selected on the Network page. */
 @Component({
   selector: 'section[appHydrationStats]',
-  template: `
-    <h2 id="hydration-heading">Hydration</h2>
-    @if (selected()?.hydration; as h) {
-      <dl class="stats">
-        <div>
-          <dt>Enabled</dt>
-          <dd>
-            <span class="tag" [class.on]="h.enabled" [class.off-tag]="!h.enabled">{{
-              h.enabled ? 'yes' : 'no (client render only)'
-            }}</span>
-          </dd>
-        </div>
-        <div>
-          <dt>Hydrated components</dt>
-          <dd>{{ h.hydratedComponents ?? 'n/a' }}</dd>
-        </div>
-        <div>
-          <dt>Hydrated nodes</dt>
-          <dd>{{ h.hydratedNodes ?? 'n/a' }}</dd>
-        </div>
-        <div>
-          <dt>Skipped components</dt>
-          <dd>{{ h.componentsSkippedHydration ?? 'n/a' }}</dd>
-        </div>
-        <div>
-          <dt>App stable after</dt>
-          <dd>{{ h.stableMs === undefined ? 'n/a' : h.stableMs + ' ms' }}</dd>
-        </div>
-        <div>
-          <dt>Incremental defer blocks</dt>
-          <dd>{{ h.deferBlocksWithIncrementalHydration ?? 'n/a' }}</dd>
-        </div>
-        @if (h.nodes; as n) {
-          <div>
-            <dt>DOM nodes hydrated</dt>
-            <dd>{{ n.hydrated }}</dd>
-          </div>
-          <div>
-            <dt>DOM nodes skipped</dt>
-            <dd>{{ n.skipped }}</dd>
-          </div>
-          <div>
-            <dt>Mismatched components</dt>
-            <dd [class.bad]="n.mismatched > 0">{{ n.mismatched }}</dd>
-          </div>
-        }
-      </dl>
-      @if (h.mismatches?.length) {
-        <h3>Mismatches ({{ h.mismatches!.length }})</h3>
-        <ul class="plain mismatches">
-          @for (m of h.mismatches; track $index) {
-            <li>
-              <code>{{ m.isClass ? m.component : '<' + m.component + '>' }}</code>
-              @if (m.expected) {
-                <span class="mismatch-row"
-                  ><span class="mismatch-label">Expected</span> <code>{{ m.expected }}</code></span
-                >
-              }
-              @if (m.actual) {
-                <span class="mismatch-row"
-                  ><span class="mismatch-label">Actual</span> <code>{{ m.actual }}</code></span
-                >
-              }
-            </li>
-          }
-        </ul>
-      }
-      @if (h.skipHydrationHosts.length) {
-        <h3>ngSkipHydration hosts</h3>
-        <ul class="plain">
-          @for (host of h.skipHydrationHosts; track $index) {
-            <li>
-              <code>{{ host }}</code>
-            </li>
-          }
-        </ul>
-      }
-      @if (h.warningsCaptured === false) {
-        <h3>Warnings</h3>
-        <p class="muted small">
-          Not captured: add <code>providePangularHttp()</code> to the app providers.
-        </p>
-      } @else {
-        <h3>Warnings ({{ h.warnings.length }})</h3>
-        @for (warning of h.warnings; track $index) {
-          <pre class="warn">{{ warning }}</pre>
-        } @empty {
-          <p class="muted small ok-note">No hydration warnings.</p>
-        }
-      }
-    } @else {
-      <div class="empty">
-        <p>No hydration data for this page.</p>
-        <p class="muted small">Open a server rendered page of the app to see its stats.</p>
-      </div>
-    }
-  `,
-  styles: `
-    @use 'network' as net;
-
-    @include net.controls;
-    .mismatches li {
-      display: grid;
-      gap: 4px;
-      padding: 8px 12px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-    }
-    .mismatch-row {
-      display: flex;
-      gap: 8px;
-      min-width: 0;
-      font-size: 12px;
-    }
-    .mismatch-row code {
-      min-width: 0;
-      overflow-wrap: anywhere;
-    }
-    .mismatch-label {
-      flex: none;
-      width: 64px;
-      color: var(--text-2);
-    }
-    @include net.status;
-    @include net.pre;
-    .plain {
-      display: grid;
-      gap: 8px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .plain li {
-      overflow-wrap: anywhere;
-    }
-    @include net.stats;
-  `,
+  templateUrl: './hydration-stats.html',
+  styleUrl: './hydration-stats.scss',
 })
 export class HydrationStats {
   protected readonly selected = inject(NetworkState).selected;
diff --git a/app/src/pages/network/payload-insights.html b/app/src/pages/network/payload-insights.html
new file mode 100644
index 00000000..db9023af
--- /dev/null
+++ b/app/src/pages/network/payload-insights.html
@@ -0,0 +1,37 @@
+@let info = insights();
+@if (info.overBudget) {
+  <p class="budget over">
+    <strong>{{ bytes(info.size) }}, over the {{ bytes(info.budget) }} budget.</strong>
+    The payload is inlined in the HTML, so it delays the first render. Look at the largest entries
+    below.
+  </p>
+} @else {
+  <p class="budget">{{ bytes(info.size) }}, within the {{ bytes(info.budget) }} budget.</p>
+}
+@if (info.largest.length) {
+  <h3 id="payload-largest-heading">Largest entries</h3>
+  <ol class="largest" aria-labelledby="payload-largest-heading">
+    @for (item of info.largest; track item.key) {
+      <li>
+        <span class="name" [title]="item.key">{{ item.label }}</span>
+        <span class="size">{{ bytes(item.size) }}, {{ item.share }}%</span>
+        <span class="bar" aria-hidden="true"><span [style.width.%]="item.share"></span></span>
+      </li>
+    }
+  </ol>
+}
+@if (info.sameUrl.length) {
+  <h3 id="payload-same-url-heading">Same URL stored more than once ({{ info.sameUrl.length }})</h3>
+  <p class="hint">
+    Each key holds its own response, because the headers, params or body differ. Check whether one
+    request could serve them all.
+  </p>
+  <ul class="same-url" aria-labelledby="payload-same-url-heading">
+    @for (group of info.sameUrl; track group.url) {
+      <li>
+        <code class="name">{{ group.url }}</code>
+        <span class="size">{{ group.keys.length }} keys, {{ bytes(group.size) }}</span>
+      </li>
+    }
+  </ul>
+}
diff --git a/app/src/pages/network/payload-insights.scss b/app/src/pages/network/payload-insights.scss
new file mode 100644
index 00000000..08a9e89c
--- /dev/null
+++ b/app/src/pages/network/payload-insights.scss
@@ -0,0 +1,62 @@
+@use 'mixins' as m;
+
+:host {
+  display: block;
+  margin-bottom: 12px;
+}
+h3 {
+  @include m.label;
+  margin: 12px 0 6px;
+}
+.budget,
+.hint {
+  margin: 0;
+  color: var(--text-2);
+  font-size: 12px;
+}
+.budget.over {
+  padding: 8px 10px;
+  border: 1px solid var(--border-strong);
+  border-left: 3px solid var(--warn);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  color: var(--text);
+}
+ol,
+ul {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2px 8px;
+  font-size: 12px;
+}
+.name {
+  @include m.truncate;
+  font-family: var(--font-mono);
+  color: var(--text);
+}
+.size {
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+}
+.bar {
+  grid-column: 1 / -1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--surface-3);
+  overflow: hidden;
+  span {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+  }
+}
+.same-url {
+  margin-top: 6px;
+}
diff --git a/app/src/pages/network/payload-insights.ts b/app/src/pages/network/payload-insights.ts
index e411c45f..ba0bc4d9 100644
--- a/app/src/pages/network/payload-insights.ts
+++ b/app/src/pages/network/payload-insights.ts
@@ -12,111 +12,8 @@ import {
  */
 @Component({
   selector: 'app-payload-insights',
-  template: `
-    @let info = insights();
-    @if (info.overBudget) {
-      <p class="budget over">
-        <strong>{{ bytes(info.size) }}, over the {{ bytes(info.budget) }} budget.</strong>
-        The payload is inlined in the HTML, so it delays the first render. Look at the largest
-        entries below.
-      </p>
-    } @else {
-      <p class="budget">{{ bytes(info.size) }}, within the {{ bytes(info.budget) }} budget.</p>
-    }
-    @if (info.largest.length) {
-      <h3 id="payload-largest-heading">Largest entries</h3>
-      <ol class="largest" aria-labelledby="payload-largest-heading">
-        @for (item of info.largest; track item.key) {
-          <li>
-            <span class="name" [title]="item.key">{{ item.label }}</span>
-            <span class="size">{{ bytes(item.size) }}, {{ item.share }}%</span>
-            <span class="bar" aria-hidden="true"><span [style.width.%]="item.share"></span></span>
-          </li>
-        }
-      </ol>
-    }
-    @if (info.sameUrl.length) {
-      <h3 id="payload-same-url-heading">
-        Same URL stored more than once ({{ info.sameUrl.length }})
-      </h3>
-      <p class="hint">
-        Each key holds its own response, because the headers, params or body differ. Check whether
-        one request could serve them all.
-      </p>
-      <ul class="same-url" aria-labelledby="payload-same-url-heading">
-        @for (group of info.sameUrl; track group.url) {
-          <li>
-            <code class="name">{{ group.url }}</code>
-            <span class="size">{{ group.keys.length }} keys, {{ bytes(group.size) }}</span>
-          </li>
-        }
-      </ul>
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: block;
-      margin-bottom: 12px;
-    }
-    h3 {
-      @include m.label;
-      margin: 12px 0 6px;
-    }
-    .budget,
-    .hint {
-      margin: 0;
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .budget.over {
-      padding: 8px 10px;
-      border: 1px solid var(--border-strong);
-      border-left: 3px solid var(--warn);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-    }
-    ol,
-    ul {
-      display: grid;
-      gap: 6px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    li {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 2px 8px;
-      font-size: 12px;
-    }
-    .name {
-      @include m.truncate;
-      font-family: var(--font-mono);
-      color: var(--text);
-    }
-    .size {
-      color: var(--text-2);
-      font-variant-numeric: tabular-nums;
-    }
-    .bar {
-      grid-column: 1 / -1;
-      height: 4px;
-      border-radius: 2px;
-      background: var(--surface-3);
-      overflow: hidden;
-      span {
-        display: block;
-        height: 100%;
-        background: var(--accent);
-      }
-    }
-    .same-url {
-      margin-top: 6px;
-    }
-  `,
+  templateUrl: './payload-insights.html',
+  styleUrl: './payload-insights.scss',
 })
 export class PayloadInsights {
   readonly size = input(0);
diff --git a/app/src/pages/network/response-preview.html b/app/src/pages/network/response-preview.html
new file mode 100644
index 00000000..6c936707
--- /dev/null
+++ b/app/src/pages/network/response-preview.html
@@ -0,0 +1,66 @@
+@let detail = call();
+<div class="preview-head">
+  <h3 id="preview-heading" tabindex="-1">Response preview</h3>
+  <div class="preview-actions">
+    @if (!detail.error && detail.preview) {
+      <button
+        type="button"
+        class="ghost"
+        [attr.aria-label]="'Copy the response of ' + detail.method + ' ' + detail.url"
+        (click)="copyPreview(detail)"
+      >
+        Copy
+      </button>
+    }
+    <app-call-copy [call]="detail" (done)="message.set($event)" />
+    @if (!detail.nativeFetch) {
+      <button
+        type="button"
+        class="ghost"
+        aria-controls="rule-form"
+        [disabled]="!canWrite()"
+        [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
+        (click)="mockCall(detail)"
+      >
+        Mock this request
+      </button>
+    }
+    <button type="button" class="ghost" (click)="closePreview()">Close</button>
+  </div>
+</div>
+<p class="preview-meta">
+  <span class="method">{{ detail.method }}</span>
+  <span
+    class="status"
+    [class.ok]="callTone(detail) === 'ok'"
+    [class.redirect]="callTone(detail) === 'redirect'"
+    [class.bad]="callTone(detail) === 'bad'"
+    >{{ statusLabel(detail) }}</span
+  >
+  <span class="preview-url" [title]="detail.url">{{ detail.url }}</span>
+</p>
+@if (detail.nativeFetch) {
+  <p class="muted small">
+    Made with <code>fetch()</code> directly, which skips the HttpClient interceptor, so a fault rule
+    cannot mock it.
+  </p>
+}
+@if (rulePatternOf(detail); as pattern) {
+  <p class="preview-rule">
+    Matched rule <code>{{ pattern }}</code>
+  </p>
+}
+<app-redaction-count [value]="detail" />
+<!-- A named region, so the focusable scroll box says what it holds. -->
+<pre
+  class="preview-body"
+  tabindex="0"
+  role="region"
+  [attr.aria-label]="detail.error ? 'Response error' : 'Response body'"
+  [class.error]="!!detail.error && !detail.cancelled"
+  >{{ detail.error ?? previewText(detail) ?? '(no body)' }}</pre>
+<app-http-headers
+  [callId]="detail.id"
+  [request]="detail.requestHeaders"
+  [response]="detail.responseHeaders"
+/>
diff --git a/app/src/pages/network/response-preview.scss b/app/src/pages/network/response-preview.scss
new file mode 100644
index 00000000..8bc7b64d
--- /dev/null
+++ b/app/src/pages/network/response-preview.scss
@@ -0,0 +1,6 @@
+@use 'network' as net;
+
+@include net.controls;
+@include net.status;
+@include net.pre;
+@include net.preview;
diff --git a/app/src/pages/network/response-preview.ts b/app/src/pages/network/response-preview.ts
index 0fec762c..784764cc 100644
--- a/app/src/pages/network/response-preview.ts
+++ b/app/src/pages/network/response-preview.ts
@@ -13,82 +13,8 @@ import { RuleState } from './rule-state';
 @Component({
   selector: 'div[appResponsePreview]',
   imports: [CallCopy, HttpHeadersView, RedactionCount],
-  template: `
-    @let detail = call();
-    <div class="preview-head">
-      <h3 id="preview-heading" tabindex="-1">Response preview</h3>
-      <div class="preview-actions">
-        @if (!detail.error && detail.preview) {
-          <button
-            type="button"
-            class="ghost"
-            [attr.aria-label]="'Copy the response of ' + detail.method + ' ' + detail.url"
-            (click)="copyPreview(detail)"
-          >
-            Copy
-          </button>
-        }
-        <app-call-copy [call]="detail" (done)="message.set($event)" />
-        @if (!detail.nativeFetch) {
-          <button
-            type="button"
-            class="ghost"
-            aria-controls="rule-form"
-            [disabled]="!canWrite()"
-            [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
-            (click)="mockCall(detail)"
-          >
-            Mock this request
-          </button>
-        }
-        <button type="button" class="ghost" (click)="closePreview()">Close</button>
-      </div>
-    </div>
-    <p class="preview-meta">
-      <span class="method">{{ detail.method }}</span>
-      <span
-        class="status"
-        [class.ok]="callTone(detail) === 'ok'"
-        [class.redirect]="callTone(detail) === 'redirect'"
-        [class.bad]="callTone(detail) === 'bad'"
-        >{{ statusLabel(detail) }}</span
-      >
-      <span class="preview-url" [title]="detail.url">{{ detail.url }}</span>
-    </p>
-    @if (detail.nativeFetch) {
-      <p class="muted small">
-        Made with <code>fetch()</code> directly, which skips the HttpClient interceptor, so a fault
-        rule cannot mock it.
-      </p>
-    }
-    @if (rulePatternOf(detail); as pattern) {
-      <p class="preview-rule">
-        Matched rule <code>{{ pattern }}</code>
-      </p>
-    }
-    <app-redaction-count [value]="detail" />
-    <!-- A named region, so the focusable scroll box says what it holds. -->
-    <pre
-      class="preview-body"
-      tabindex="0"
-      role="region"
-      [attr.aria-label]="detail.error ? 'Response error' : 'Response body'"
-      [class.error]="!!detail.error && !detail.cancelled"
-      >{{ detail.error ?? previewText(detail) ?? '(no body)' }}</pre>
-    <app-http-headers
-      [callId]="detail.id"
-      [request]="detail.requestHeaders"
-      [response]="detail.responseHeaders"
-    />
-  `,
-  styles: `
-    @use 'network' as net;
-
-    @include net.controls;
-    @include net.status;
-    @include net.pre;
-    @include net.preview;
-  `,
+  templateUrl: './response-preview.html',
+  styleUrl: './response-preview.scss',
 })
 export class ResponsePreview {
   readonly call = input.required<HttpCall>();
diff --git a/app/src/pages/network/rule-match-count.html b/app/src/pages/network/rule-match-count.html
new file mode 100644
index 00000000..4642161a
--- /dev/null
+++ b/app/src/pages/network/rule-match-count.html
@@ -0,0 +1 @@
+<p class="match" role="status">{{ text() }}</p>
diff --git a/app/src/pages/network/rule-match-count.scss b/app/src/pages/network/rule-match-count.scss
new file mode 100644
index 00000000..6fc45c86
--- /dev/null
+++ b/app/src/pages/network/rule-match-count.scss
@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+.match {
+  margin: 0;
+  min-height: 1.5em;
+  color: var(--text-2);
+  font-size: 12px;
+}
diff --git a/app/src/pages/network/rule-match-count.ts b/app/src/pages/network/rule-match-count.ts
index 870c1660..1e003367 100644
--- a/app/src/pages/network/rule-match-count.ts
+++ b/app/src/pages/network/rule-match-count.ts
@@ -15,18 +15,8 @@ export interface MatchCountCall {
  */
 @Component({
   selector: 'app-rule-match-count',
-  template: ` <p class="match" role="status">{{ text() }}</p> `,
-  styles: `
-    :host {
-      display: block;
-    }
-    .match {
-      margin: 0;
-      min-height: 1.5em;
-      color: var(--text-2);
-      font-size: 12px;
-    }
-  `,
+  templateUrl: './rule-match-count.html',
+  styleUrl: './rule-match-count.scss',
 })
 export class RuleMatchCount {
   readonly calls = input<readonly MatchCountCall[]>([]);
diff --git a/app/src/pages/network/rule-presets.html b/app/src/pages/network/rule-presets.html
new file mode 100644
index 00000000..39874eed
--- /dev/null
+++ b/app/src/pages/network/rule-presets.html
@@ -0,0 +1,24 @@
+<div class="presets" role="group" aria-labelledby="rule-presets-label">
+  <span id="rule-presets-label" class="label">Presets</span>
+  <ul>
+    @for (preset of presets; track preset.id) {
+      <li>
+        <button
+          type="button"
+          class="ghost"
+          [attr.data-preset]="preset.id"
+          [disabled]="disabled()"
+          [attr.aria-describedby]="'preset-' + preset.id + ' ' + describedBy()"
+          (click)="add.emit(preset.id)"
+        >
+          {{ preset.label }}
+        </button>
+        <span class="what" [id]="'preset-' + preset.id">{{ preset.description }}</span>
+      </li>
+    }
+  </ul>
+  <p class="note">
+    A preset adds plain rules for every browser request. Rules above it match first. Remove the
+    rules to stop it.
+  </p>
+</div>
diff --git a/app/src/pages/network/rule-presets.scss b/app/src/pages/network/rule-presets.scss
new file mode 100644
index 00000000..2c7a3ec0
--- /dev/null
+++ b/app/src/pages/network/rule-presets.scss
@@ -0,0 +1,58 @@
+@use 'mixins' as m;
+
+:host {
+  display: block;
+  margin-bottom: 12px;
+}
+.label {
+  @include m.label;
+  display: block;
+  margin-bottom: 6px;
+}
+ul {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+li {
+  display: grid;
+  grid-template-columns: 7.5em minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+button {
+  height: var(--control-h);
+  padding: 0 10px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 150ms var(--ease);
+  &:hover:not(:disabled) {
+    background: var(--surface-2);
+  }
+  &:focus-visible {
+    @include m.focus-ring;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--text-2);
+  }
+}
+.what,
+.note {
+  color: var(--text-2);
+  font-size: 12px;
+}
+.note {
+  margin: 6px 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+  }
+}
diff --git a/app/src/pages/network/rule-presets.ts b/app/src/pages/network/rule-presets.ts
index c30ed7a8..c0201da5 100644
--- a/app/src/pages/network/rule-presets.ts
+++ b/app/src/pages/network/rule-presets.ts
@@ -7,92 +7,8 @@ import { HTTP_RULE_PRESETS } from '@pangular-inspector/devtools/internal/http-da
  */
 @Component({
   selector: 'app-rule-presets',
-  template: `
-    <div class="presets" role="group" aria-labelledby="rule-presets-label">
-      <span id="rule-presets-label" class="label">Presets</span>
-      <ul>
-        @for (preset of presets; track preset.id) {
-          <li>
-            <button
-              type="button"
-              class="ghost"
-              [attr.data-preset]="preset.id"
-              [disabled]="disabled()"
-              [attr.aria-describedby]="'preset-' + preset.id + ' ' + describedBy()"
-              (click)="add.emit(preset.id)"
-            >
-              {{ preset.label }}
-            </button>
-            <span class="what" [id]="'preset-' + preset.id">{{ preset.description }}</span>
-          </li>
-        }
-      </ul>
-      <p class="note">
-        A preset adds plain rules for every browser request. Rules above it match first. Remove the
-        rules to stop it.
-      </p>
-    </div>
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: block;
-      margin-bottom: 12px;
-    }
-    .label {
-      @include m.label;
-      display: block;
-      margin-bottom: 6px;
-    }
-    ul {
-      display: grid;
-      gap: 6px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    li {
-      display: grid;
-      grid-template-columns: 7.5em minmax(0, 1fr);
-      align-items: center;
-      gap: 8px;
-    }
-    button {
-      height: var(--control-h);
-      padding: 0 10px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface);
-      color: var(--text);
-      font: inherit;
-      cursor: pointer;
-      transition: background-color 150ms var(--ease);
-      &:hover:not(:disabled) {
-        background: var(--surface-2);
-      }
-      &:focus-visible {
-        @include m.focus-ring;
-      }
-      &:disabled {
-        cursor: not-allowed;
-        color: var(--text-2);
-      }
-    }
-    .what,
-    .note {
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .note {
-      margin: 6px 0 0;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      button {
-        transition: none;
-      }
-    }
-  `,
+  templateUrl: './rule-presets.html',
+  styleUrl: './rule-presets.scss',
 })
 export class RulePresets {
   readonly disabled = input(false);
diff --git a/app/src/pages/network/ssr-overrides.html b/app/src/pages/network/ssr-overrides.html
new file mode 100644
index 00000000..787774ef
--- /dev/null
+++ b/app/src/pages/network/ssr-overrides.html
@@ -0,0 +1,143 @@
+<h2 id="overrides-heading">SSR overrides</h2>
+<p class="muted small">
+  Development only. These change what the server sends for matching pages, from the next full page
+  load, and the request is marked <strong>overridden</strong>.
+</p>
+<form class="rule-form" (submit)="addOverride($event)">
+  <div class="field-group">
+    <span id="override-kind-label">Override</span>
+    <app-select
+      labelledBy="override-kind-label"
+      [describedBy]="overrideDraft().kind === 'state-edit' ? '' : 'override-kind-help'"
+      [options]="overrideKindOptions"
+      [value]="overrideDraft().kind"
+      (valueChange)="setOverrideDraft('kind', $event ?? 'render-error')"
+    />
+  </div>
+  <label>
+    <span>Page pattern <span class="hint">(substring or * glob, ^ anchors the path)</span></span>
+    <input
+      id="override-pattern"
+      required
+      spellcheck="false"
+      autocomplete="off"
+      placeholder="e.g. /examples/ssr"
+      [value]="overrideDraft().pattern"
+      (input)="patchOverride('pattern', $event)"
+    />
+  </label>
+  @switch (overrideDraft().kind) {
+    @case ('render-error') {
+      <p id="override-kind-help" class="muted small">
+        Throws while the server renders, so it needs <code>providePangularHttp()</code> and a page
+        the engine renders. Prerendered files served as static files skip it.
+      </p>
+      <label>
+        Error message
+        <input
+          spellcheck="false"
+          placeholder="Simulated render error"
+          aria-describedby="override-kind-help"
+          [value]="overrideDraft().message"
+          (input)="patchOverride('message', $event)"
+        />
+      </label>
+    }
+    @case ('state-edit') {
+      <label>
+        TransferState key
+        <input
+          id="override-key"
+          spellcheck="false"
+          autocomplete="off"
+          [value]="overrideDraft().key"
+          (input)="patchOverride('key', $event)"
+        />
+      </label>
+      <label>
+        <span>New JSON value <span class="hint">(empty removes the entry)</span></span>
+        <textarea
+          id="override-value"
+          rows="3"
+          spellcheck="false"
+          [value]="overrideDraft().value"
+          (input)="patchOverride('value', $event)"
+          [attr.aria-invalid]="overrideValueError() ? 'true' : null"
+          [attr.aria-describedby]="
+            overrideFromPayload()
+              ? 'override-value-error override-value-note'
+              : 'override-value-error'
+          "
+        ></textarea>
+      </label>
+      <p id="override-value-error" class="field-error">{{ overrideValueError() }}</p>
+      @if (overrideFromPayload(); as from) {
+        <p id="override-value-note" class="muted small">
+          Filled in from the TransferState payload. The value starts empty because the panel only
+          shows a redacted copy, so type the JSON the server should send.
+          @if (from === 'http') {
+            For a cached HTTP response this is the whole cache record, not only the response body.
+          }
+        </p>
+      }
+    }
+    @case ('client-render') {
+      <p id="override-kind-help" class="muted small">
+        Serves <code>index.csr.html</code> instead of rendering. Needs
+        <code>browserDistFolder</code> in <code>initPangularHub()</code>.
+      </p>
+    }
+  }
+  <div class="form-actions">
+    <button
+      type="submit"
+      [disabled]="!canWrite() || !overrideReady()"
+      [attr.aria-disabled]="addingOverride() || null"
+      [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
+    >
+      Add override
+    </button>
+  </div>
+</form>
+
+<h3 id="override-list-heading" class="rules-heading" tabindex="-1">
+  Overrides ({{ overrides().length }})
+</h3>
+<ul class="rules">
+  @for (o of overrides(); track o.id) {
+    <li [class.off]="!o.enabled">
+      <label class="inline">
+        <input
+          type="checkbox"
+          [checked]="o.enabled"
+          [disabled]="!canWrite()"
+          (change)="toggleOverride(o.id)"
+          [attr.aria-label]="'Enable ' + overrideLabel(o.kind) + ' for ' + o.pattern"
+        />
+        <code class="rule-pattern" [title]="o.pattern"
+          ><span class="rule-method">{{ overrideLabel(o.kind) }}</span> {{ o.pattern }}</code
+        >
+      </label>
+      <button
+        type="button"
+        class="link remove"
+        data-remove-override
+        [disabled]="!canWrite()"
+        (click)="removeOverride(o.id)"
+        [attr.aria-label]="'Remove ' + overrideLabel(o.kind) + ' for ' + o.pattern"
+      >
+        Remove
+      </button>
+      <span class="rule-meta">
+        @if (o.message) {
+          <span>{{ o.message }}</span>
+        }
+        @if (o.key) {
+          <span>{{ o.value === undefined ? 'remove' : 'set' }} {{ o.key }}</span>
+        }
+      </span>
+    </li>
+  } @empty {
+    <li class="empty-rule">No overrides.</li>
+  }
+</ul>
diff --git a/app/src/pages/network/ssr-overrides.scss b/app/src/pages/network/ssr-overrides.scss
new file mode 100644
index 00000000..8124ec88
--- /dev/null
+++ b/app/src/pages/network/ssr-overrides.scss
@@ -0,0 +1,4 @@
+@use 'network' as net;
+
+@include net.controls;
+@include net.rule-form;
diff --git a/app/src/pages/network/ssr-overrides.ts b/app/src/pages/network/ssr-overrides.ts
index 137f81e6..7aeae553 100644
--- a/app/src/pages/network/ssr-overrides.ts
+++ b/app/src/pages/network/ssr-overrides.ts
@@ -8,160 +8,8 @@ import { OverrideState } from './override-state';
 @Component({
   selector: 'section[appSsrOverrides]',
   imports: [Select],
-  template: `
-    <h2 id="overrides-heading">SSR overrides</h2>
-    <p class="muted small">
-      Development only. These change what the server sends for matching pages, from the next full
-      page load, and the request is marked <strong>overridden</strong>.
-    </p>
-    <form class="rule-form" (submit)="addOverride($event)">
-      <div class="field-group">
-        <span id="override-kind-label">Override</span>
-        <app-select
-          labelledBy="override-kind-label"
-          [describedBy]="overrideDraft().kind === 'state-edit' ? '' : 'override-kind-help'"
-          [options]="overrideKindOptions"
-          [value]="overrideDraft().kind"
-          (valueChange)="setOverrideDraft('kind', $event ?? 'render-error')"
-        />
-      </div>
-      <label>
-        <span
-          >Page pattern <span class="hint">(substring or * glob, ^ anchors the path)</span></span
-        >
-        <input
-          id="override-pattern"
-          required
-          spellcheck="false"
-          autocomplete="off"
-          placeholder="e.g. /examples/ssr"
-          [value]="overrideDraft().pattern"
-          (input)="patchOverride('pattern', $event)"
-        />
-      </label>
-      @switch (overrideDraft().kind) {
-        @case ('render-error') {
-          <p id="override-kind-help" class="muted small">
-            Throws while the server renders, so it needs <code>providePangularHttp()</code> and a
-            page the engine renders. Prerendered files served as static files skip it.
-          </p>
-          <label>
-            Error message
-            <input
-              spellcheck="false"
-              placeholder="Simulated render error"
-              aria-describedby="override-kind-help"
-              [value]="overrideDraft().message"
-              (input)="patchOverride('message', $event)"
-            />
-          </label>
-        }
-        @case ('state-edit') {
-          <label>
-            TransferState key
-            <input
-              id="override-key"
-              spellcheck="false"
-              autocomplete="off"
-              [value]="overrideDraft().key"
-              (input)="patchOverride('key', $event)"
-            />
-          </label>
-          <label>
-            <span>New JSON value <span class="hint">(empty removes the entry)</span></span>
-            <textarea
-              id="override-value"
-              rows="3"
-              spellcheck="false"
-              [value]="overrideDraft().value"
-              (input)="patchOverride('value', $event)"
-              [attr.aria-invalid]="overrideValueError() ? 'true' : null"
-              [attr.aria-describedby]="
-                overrideFromPayload()
-                  ? 'override-value-error override-value-note'
-                  : 'override-value-error'
-              "
-            ></textarea>
-          </label>
-          <p id="override-value-error" class="field-error">{{ overrideValueError() }}</p>
-          @if (overrideFromPayload(); as from) {
-            <p id="override-value-note" class="muted small">
-              Filled in from the TransferState payload. The value starts empty because the panel
-              only shows a redacted copy, so type the JSON the server should send.
-              @if (from === 'http') {
-                For a cached HTTP response this is the whole cache record, not only the response
-                body.
-              }
-            </p>
-          }
-        }
-        @case ('client-render') {
-          <p id="override-kind-help" class="muted small">
-            Serves <code>index.csr.html</code> instead of rendering. Needs
-            <code>browserDistFolder</code> in <code>initPangularHub()</code>.
-          </p>
-        }
-      }
-      <div class="form-actions">
-        <button
-          type="submit"
-          [disabled]="!canWrite() || !overrideReady()"
-          [attr.aria-disabled]="addingOverride() || null"
-          [attr.aria-describedby]="canWrite() ? null : 'http-writes-off'"
-        >
-          Add override
-        </button>
-      </div>
-    </form>
-
-    <h3 id="override-list-heading" class="rules-heading" tabindex="-1">
-      Overrides ({{ overrides().length }})
-    </h3>
-    <ul class="rules">
-      @for (o of overrides(); track o.id) {
-        <li [class.off]="!o.enabled">
-          <label class="inline">
-            <input
-              type="checkbox"
-              [checked]="o.enabled"
-              [disabled]="!canWrite()"
-              (change)="toggleOverride(o.id)"
-              [attr.aria-label]="'Enable ' + overrideLabel(o.kind) + ' for ' + o.pattern"
-            />
-            <code class="rule-pattern" [title]="o.pattern"
-              ><span class="rule-method">{{ overrideLabel(o.kind) }}</span> {{ o.pattern }}</code
-            >
-          </label>
-          <button
-            type="button"
-            class="link remove"
-            data-remove-override
-            [disabled]="!canWrite()"
-            (click)="removeOverride(o.id)"
-            [attr.aria-label]="'Remove ' + overrideLabel(o.kind) + ' for ' + o.pattern"
-          >
-            Remove
-          </button>
-          <span class="rule-meta">
-            @if (o.message) {
-              <span>{{ o.message }}</span>
-            }
-            @if (o.key) {
-              <span>{{ o.value === undefined ? 'remove' : 'set' }} {{ o.key }}</span>
-            }
-          </span>
-        </li>
-      } @empty {
-        <li class="empty-rule">No overrides.</li>
-      }
-    </ul>
-  `,
-  styles: `
-    @use 'network' as net;
-
-    @include net.controls;
-    @include net.rule-form;
-  `,
+  templateUrl: './ssr-overrides.html',
+  styleUrl: './ssr-overrides.scss',
 })
 export class SsrOverrides {
   private readonly state = inject(NetworkState);
diff --git a/app/src/pages/network/ssr-requests.html b/app/src/pages/network/ssr-requests.html
new file mode 100644
index 00000000..3be9b2ac
--- /dev/null
+++ b/app/src/pages/network/ssr-requests.html
@@ -0,0 +1,209 @@
+<h2 id="ssr-heading">SSR requests ({{ requests().length }})</h2>
+@if (requests().length) {
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Request</th>
+          <th scope="col">Status</th>
+          <th scope="col">Render mode</th>
+          <th scope="col" class="num">Render</th>
+          <th scope="col" class="num">Server calls</th>
+          <th scope="col">Notes</th>
+        </tr>
+      </thead>
+      <tbody appRovingList="button.ssr-row">
+        @for (req of requests(); track req.id) {
+          <tr
+            [class.selected]="selectedRequest()?.id === req.id"
+            (click)="selectedRequestId.set(req.id)"
+          >
+            <td class="url">
+              <button
+                type="button"
+                class="link ssr-row"
+                [title]="req.url"
+                [attr.aria-pressed]="selectedRequest()?.id === req.id"
+                aria-controls="ssr-detail"
+              >
+                <span class="method">{{ req.method }}</span> {{ req.url }}
+                <span class="sr-only"
+                  >, {{ req.status }}, {{ renderModeLabel(req.renderMode) }}</span
+                >
+              </button>
+            </td>
+            <td
+              class="status"
+              [class.ok]="statusTone(req.status) === 'ok'"
+              [class.redirect]="statusTone(req.status) === 'redirect'"
+              [class.bad]="statusTone(req.status) === 'bad'"
+            >
+              <span class="dot" aria-hidden="true"></span>{{ req.status }}
+            </td>
+            <td>{{ renderModeLabel(req.renderMode) }}</td>
+            <td class="num">{{ req.renderMs }} ms</td>
+            <td class="num">{{ req.fetches }} ({{ req.fetchMs }} ms)</td>
+            <td>
+              <div class="notes">
+                @if (req.id === selected()?.ssrRequestId) {
+                  <span class="tag server">this page</span>
+                }
+                @if (req.overrides?.length) {
+                  <span class="tag mock">overridden</span>
+                }
+                @if (req.aborted) {
+                  <span class="tag fault">aborted</span>
+                }
+              </div>
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+  @if (selectedRequest(); as req) {
+    <div id="ssr-detail" class="preview" role="region" aria-labelledby="ssr-detail-heading">
+      <h3 id="ssr-detail-heading">
+        {{ req.method }} <code>{{ req.url }}</code>
+      </h3>
+      <dl class="stats">
+        <div>
+          <dt>Request id</dt>
+          <dd>
+            <code>{{ req.id }}</code>
+          </dd>
+        </div>
+        <div>
+          <dt>Render</dt>
+          <dd>{{ req.renderMs }} ms</dd>
+        </div>
+        <div>
+          <dt>Total</dt>
+          <dd>{{ req.durationMs }} ms</dd>
+        </div>
+        <div>
+          <dt>Sent</dt>
+          <dd>{{ req.bytes }} B</dd>
+        </div>
+        <div>
+          <dt>Browser page</dt>
+          <dd>{{ requestPage()?.title || requestPage()?.url || 'not connected' }}</dd>
+        </div>
+      </dl>
+      @if (compressedWith(req); as encoding) {
+        <p class="muted small">
+          The body was already compressed ({{ encoding }}) when <code>ssrMiddleware</code> saw it,
+          so the render mode can't be read and TransferState edits can't apply. Mount
+          <code>ssrMiddleware</code> after <code>compression()</code>.
+        </p>
+      }
+      @if (req.overrides?.length) {
+        <h3>Overrides from the panel</h3>
+        <p class="muted small">
+          This response was changed on purpose, so it is not what the app sends on its own.
+        </p>
+        @for (o of req.overrides; track o.id + o.kind) {
+          <p class="request-call">
+            <span class="tag mock">{{ overrideLabel(o.kind) }}</span>
+            <span>{{ o.applied ? 'applied' : 'not applied' }}</span>
+            @if (o.note) {
+              <span class="muted">{{ o.note }}</span>
+            }
+          </p>
+        }
+      }
+      @if (req.navigations?.length) {
+        <h3>Router during the render</h3>
+        @for (n of req.navigations; track $index) {
+          <dl class="stats nav-stats">
+            <div>
+              <dt>Navigation</dt>
+              <dd>
+                <code>{{ n.url }}</code>
+                @if (n.finalUrl) {
+                  to <code>{{ n.finalUrl }}</code>
+                }
+                ({{ n.outcome }})
+              </dd>
+            </div>
+            @if (n.guards) {
+              <div>
+                <dt>Guards</dt>
+                <dd [class.bad]="guardVerdict(n) === 'rejected'">
+                  {{ msLabel(n.guards.ms) }}{{ guardVerdict(n) ? ', ' + guardVerdict(n) : '' }}
+                </dd>
+              </div>
+            }
+            @if (n.resolvers) {
+              <div>
+                <dt>Resolvers</dt>
+                <dd>{{ msLabel(n.resolvers.ms) }}</dd>
+              </div>
+            }
+            @if (n.durationMs !== undefined) {
+              <div>
+                <dt>Navigation total</dt>
+                <dd>{{ n.durationMs }} ms</dd>
+              </div>
+            }
+          </dl>
+          @if (n.reason) {
+            <p class="muted small">{{ n.reason }}</p>
+          }
+        }
+      }
+      <h3>Server calls ({{ requestCalls().length }})</h3>
+      @for (c of requestCalls(); track c.id) {
+        <p class="request-call">
+          <span class="method">{{ c.method }}</span>
+          <span class="preview-url" [title]="c.url">{{ c.url }}</span>
+          <span
+            class="status"
+            [class.ok]="callTone(c) === 'ok'"
+            [class.bad]="callTone(c) === 'bad'"
+            >{{ statusLabel(c) }}</span
+          >
+          <span class="muted">{{ c.durationMs }} ms</span>
+          @if (c.cacheStored) {
+            <span class="tag server">cached</span>
+          } @else if (c.cacheSkip) {
+            <span class="tag" [title]="skipText(c.cacheSkip)">not cached</span>
+          }
+        </p>
+        @if (!c.cacheStored && c.cacheSkip) {
+          <p class="muted small skip-reason">Not cached: {{ skipText(c.cacheSkip) }}.</p>
+        }
+      } @empty {
+        <p class="muted small">The render made no HttpClient calls.</p>
+      }
+      @if (refetched().length) {
+        <h3>Fetched again in the browser ({{ refetched().length }})</h3>
+        <p class="muted small">
+          These calls ran on the server and again after hydration instead of reading the transfer
+          cache.
+        </p>
+        @for (c of refetched(); track c.id) {
+          <p class="request-call">
+            <span class="method">{{ c.method }}</span>
+            <span class="preview-url" [title]="c.url">{{ c.url }}</span>
+            <span class="tag fault">cache miss</span>
+          </p>
+          @if (refetchReason(c); as why) {
+            <p class="muted small skip-reason">Why: {{ why }}.</p>
+          }
+        }
+      } @else if (requestPage() && requestCalls().length) {
+        <p class="muted small ok-note">No server call ran again in the browser.</p>
+      }
+    </div>
+  }
+} @else {
+  <div class="empty">
+    <p>No SSR requests traced.</p>
+    <p class="muted small">
+      Add <code>app.use(devtools.ssrMiddleware)</code> before the Angular handler in
+      <code>server.ts</code>, or wrap a web-standard handler with <code>withPangularSsr()</code>,
+      then load a server rendered page.
+    </p>
+  </div>
+}
diff --git a/app/src/pages/network/ssr-requests.scss b/app/src/pages/network/ssr-requests.scss
new file mode 100644
index 00000000..82a27a2d
--- /dev/null
+++ b/app/src/pages/network/ssr-requests.scss
@@ -0,0 +1,7 @@
+@use 'network' as net;
+
+@include net.controls;
+@include net.table;
+@include net.status;
+@include net.preview;
+@include net.stats;
diff --git a/app/src/pages/network/ssr-requests.ts b/app/src/pages/network/ssr-requests.ts
index 46a370c9..91e6b856 100644
--- a/app/src/pages/network/ssr-requests.ts
+++ b/app/src/pages/network/ssr-requests.ts
@@ -18,226 +18,8 @@ import { NetworkState } from './network-state';
 @Component({
   selector: 'section[appSsrRequests]',
   imports: [RovingList],
-  template: `
-    <h2 id="ssr-heading">SSR requests ({{ requests().length }})</h2>
-    @if (requests().length) {
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th scope="col">Request</th>
-              <th scope="col">Status</th>
-              <th scope="col">Render mode</th>
-              <th scope="col" class="num">Render</th>
-              <th scope="col" class="num">Server calls</th>
-              <th scope="col">Notes</th>
-            </tr>
-          </thead>
-          <tbody appRovingList="button.ssr-row">
-            @for (req of requests(); track req.id) {
-              <tr
-                [class.selected]="selectedRequest()?.id === req.id"
-                (click)="selectedRequestId.set(req.id)"
-              >
-                <td class="url">
-                  <button
-                    type="button"
-                    class="link ssr-row"
-                    [title]="req.url"
-                    [attr.aria-pressed]="selectedRequest()?.id === req.id"
-                    aria-controls="ssr-detail"
-                  >
-                    <span class="method">{{ req.method }}</span> {{ req.url }}
-                    <span class="sr-only"
-                      >, {{ req.status }}, {{ renderModeLabel(req.renderMode) }}</span
-                    >
-                  </button>
-                </td>
-                <td
-                  class="status"
-                  [class.ok]="statusTone(req.status) === 'ok'"
-                  [class.redirect]="statusTone(req.status) === 'redirect'"
-                  [class.bad]="statusTone(req.status) === 'bad'"
-                >
-                  <span class="dot" aria-hidden="true"></span>{{ req.status }}
-                </td>
-                <td>{{ renderModeLabel(req.renderMode) }}</td>
-                <td class="num">{{ req.renderMs }} ms</td>
-                <td class="num">{{ req.fetches }} ({{ req.fetchMs }} ms)</td>
-                <td>
-                  <div class="notes">
-                    @if (req.id === selected()?.ssrRequestId) {
-                      <span class="tag server">this page</span>
-                    }
-                    @if (req.overrides?.length) {
-                      <span class="tag mock">overridden</span>
-                    }
-                    @if (req.aborted) {
-                      <span class="tag fault">aborted</span>
-                    }
-                  </div>
-                </td>
-              </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-      @if (selectedRequest(); as req) {
-        <div id="ssr-detail" class="preview" role="region" aria-labelledby="ssr-detail-heading">
-          <h3 id="ssr-detail-heading">
-            {{ req.method }} <code>{{ req.url }}</code>
-          </h3>
-          <dl class="stats">
-            <div>
-              <dt>Request id</dt>
-              <dd>
-                <code>{{ req.id }}</code>
-              </dd>
-            </div>
-            <div>
-              <dt>Render</dt>
-              <dd>{{ req.renderMs }} ms</dd>
-            </div>
-            <div>
-              <dt>Total</dt>
-              <dd>{{ req.durationMs }} ms</dd>
-            </div>
-            <div>
-              <dt>Sent</dt>
-              <dd>{{ req.bytes }} B</dd>
-            </div>
-            <div>
-              <dt>Browser page</dt>
-              <dd>{{ requestPage()?.title || requestPage()?.url || 'not connected' }}</dd>
-            </div>
-          </dl>
-          @if (compressedWith(req); as encoding) {
-            <p class="muted small">
-              The body was already compressed ({{ encoding }}) when <code>ssrMiddleware</code> saw
-              it, so the render mode can't be read and TransferState edits can't apply. Mount
-              <code>ssrMiddleware</code> after <code>compression()</code>.
-            </p>
-          }
-          @if (req.overrides?.length) {
-            <h3>Overrides from the panel</h3>
-            <p class="muted small">
-              This response was changed on purpose, so it is not what the app sends on its own.
-            </p>
-            @for (o of req.overrides; track o.id + o.kind) {
-              <p class="request-call">
-                <span class="tag mock">{{ overrideLabel(o.kind) }}</span>
-                <span>{{ o.applied ? 'applied' : 'not applied' }}</span>
-                @if (o.note) {
-                  <span class="muted">{{ o.note }}</span>
-                }
-              </p>
-            }
-          }
-          @if (req.navigations?.length) {
-            <h3>Router during the render</h3>
-            @for (n of req.navigations; track $index) {
-              <dl class="stats nav-stats">
-                <div>
-                  <dt>Navigation</dt>
-                  <dd>
-                    <code>{{ n.url }}</code>
-                    @if (n.finalUrl) {
-                      to <code>{{ n.finalUrl }}</code>
-                    }
-                    ({{ n.outcome }})
-                  </dd>
-                </div>
-                @if (n.guards) {
-                  <div>
-                    <dt>Guards</dt>
-                    <dd [class.bad]="guardVerdict(n) === 'rejected'">
-                      {{ msLabel(n.guards.ms) }}{{ guardVerdict(n) ? ', ' + guardVerdict(n) : '' }}
-                    </dd>
-                  </div>
-                }
-                @if (n.resolvers) {
-                  <div>
-                    <dt>Resolvers</dt>
-                    <dd>{{ msLabel(n.resolvers.ms) }}</dd>
-                  </div>
-                }
-                @if (n.durationMs !== undefined) {
-                  <div>
-                    <dt>Navigation total</dt>
-                    <dd>{{ n.durationMs }} ms</dd>
-                  </div>
-                }
-              </dl>
-              @if (n.reason) {
-                <p class="muted small">{{ n.reason }}</p>
-              }
-            }
-          }
-          <h3>Server calls ({{ requestCalls().length }})</h3>
-          @for (c of requestCalls(); track c.id) {
-            <p class="request-call">
-              <span class="method">{{ c.method }}</span>
-              <span class="preview-url" [title]="c.url">{{ c.url }}</span>
-              <span
-                class="status"
-                [class.ok]="callTone(c) === 'ok'"
-                [class.bad]="callTone(c) === 'bad'"
-                >{{ statusLabel(c) }}</span
-              >
-              <span class="muted">{{ c.durationMs }} ms</span>
-              @if (c.cacheStored) {
-                <span class="tag server">cached</span>
-              } @else if (c.cacheSkip) {
-                <span class="tag" [title]="skipText(c.cacheSkip)">not cached</span>
-              }
-            </p>
-            @if (!c.cacheStored && c.cacheSkip) {
-              <p class="muted small skip-reason">Not cached: {{ skipText(c.cacheSkip) }}.</p>
-            }
-          } @empty {
-            <p class="muted small">The render made no HttpClient calls.</p>
-          }
-          @if (refetched().length) {
-            <h3>Fetched again in the browser ({{ refetched().length }})</h3>
-            <p class="muted small">
-              These calls ran on the server and again after hydration instead of reading the
-              transfer cache.
-            </p>
-            @for (c of refetched(); track c.id) {
-              <p class="request-call">
-                <span class="method">{{ c.method }}</span>
-                <span class="preview-url" [title]="c.url">{{ c.url }}</span>
-                <span class="tag fault">cache miss</span>
-              </p>
-              @if (refetchReason(c); as why) {
-                <p class="muted small skip-reason">Why: {{ why }}.</p>
-              }
-            }
-          } @else if (requestPage() && requestCalls().length) {
-            <p class="muted small ok-note">No server call ran again in the browser.</p>
-          }
-        </div>
-      }
-    } @else {
-      <div class="empty">
-        <p>No SSR requests traced.</p>
-        <p class="muted small">
-          Add <code>app.use(devtools.ssrMiddleware)</code> before the Angular handler in
-          <code>server.ts</code>, or wrap a web-standard handler with
-          <code>withPangularSsr()</code>, then load a server rendered page.
-        </p>
-      </div>
-    }
-  `,
-  styles: `
-    @use 'network' as net;
-
-    @include net.controls;
-    @include net.table;
-    @include net.status;
-    @include net.preview;
-    @include net.stats;
-  `,
+  templateUrl: './ssr-requests.html',
+  styleUrl: './ssr-requests.scss',
 })
 export class SsrRequests {
   private readonly state = inject(NetworkState);
diff --git a/app/src/pages/network/transfer-payload.html b/app/src/pages/network/transfer-payload.html
new file mode 100644
index 00000000..094fb26d
--- /dev/null
+++ b/app/src/pages/network/transfer-payload.html
@@ -0,0 +1,94 @@
+<h2 id="payload-heading">TransferState payload</h2>
+@if (selected(); as page) {
+  <div class="payload-tools">
+    <button
+      type="button"
+      data-refetch-payload
+      [disabled]="!canWrite() || refetching()"
+      [attr.aria-describedby]="canWrite() ? 'refetch-hint' : 'http-writes-off refetch-hint'"
+      (click)="refetchPayload(page.pageId)"
+    >
+      {{ refetching() ? 'Refetching…' : 'Refetch' }}
+    </button>
+    <span id="refetch-hint" class="muted small">
+      Renders this URL again on the server, with this tab's cookies, and shows the payload it sends
+      now. The tab does not reload.
+    </span>
+  </div>
+}
+@if (selectedPayload(); as payload) {
+  @if (!payload.found) {
+    <div class="empty">
+      <p>No TransferState script: this page was not server rendered.</p>
+    </div>
+  } @else {
+    <p class="muted small summary-line">
+      {{ payload.entries.length }} entr{{ payload.entries.length === 1 ? 'y' : 'ies' }},
+      {{ payload.size }} bytes
+      @if (payload.refetchedAt) {
+        <span class="tag" data-refetched>Refetched</span>
+      }
+    </p>
+    @if (payload.error) {
+      <p class="bad" role="alert">{{ payload.error }}</p>
+    }
+    <app-redaction-count [value]="payload.entries" />
+    <app-payload-insights [size]="payload.size" [entries]="payload.entries" />
+    <div class="entries">
+      @for (entry of payload.entries; track entry.key) {
+        <details>
+          <summary>
+            <span class="chevron" aria-hidden="true"></span>
+            @if (payloadLabel(entry); as label) {
+              <span class="tag">{{ label }}</span>
+            }
+            @if (entry.http; as http) {
+              <span
+                class="tag"
+                [class.server]="statusTone(http.status) === 'ok'"
+                [class.fault]="statusTone(http.status) === 'bad'"
+                >HTTP {{ http.status }}</span
+              >
+              <span class="entry-key">{{ http.url ?? entry.key }}</span>
+            } @else {
+              <span class="entry-key">{{ entry.key }}</span>
+            }
+            <span class="entry-size">{{ entry.size }} B</span>
+          </summary>
+          <div class="entry-key-row">
+            <span class="entry-key-label">Key</span>
+            <code class="entry-key-text">{{ entry.key }}</code>
+            <div class="entry-actions">
+              <button
+                type="button"
+                class="ghost"
+                [attr.aria-label]="'Copy key ' + entry.key"
+                (click)="copyKey(entry.key)"
+              >
+                Copy
+              </button>
+              @if (canEditEntry(entry)) {
+                <button
+                  type="button"
+                  class="ghost"
+                  [attr.aria-label]="'Edit in SSR overrides, key ' + entry.key"
+                  (click)="editEntry(entry)"
+                >
+                  Edit in SSR overrides
+                </button>
+              }
+            </div>
+          </div>
+          <!-- Focusable so a long value can be scrolled with the keyboard. -->
+          <pre tabindex="0" role="region" [attr.aria-label]="'Value of ' + entry.key">{{
+            entry.value | json
+          }}</pre>
+        </details>
+      }
+    </div>
+  }
+} @else {
+  <div class="empty">
+    <p>Open a page of the app to see its payload.</p>
+  </div>
+}
diff --git a/app/src/pages/network/transfer-payload.scss b/app/src/pages/network/transfer-payload.scss
new file mode 100644
index 00000000..1a6cfe80
--- /dev/null
+++ b/app/src/pages/network/transfer-payload.scss
@@ -0,0 +1,103 @@
+@use 'mixins' as m;
+@use 'network' as net;
+
+@include net.controls;
+@include net.status;
+@include net.pre;
+.summary-line {
+  margin-bottom: 8px;
+  font-variant-numeric: tabular-nums;
+}
+.payload-tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin-bottom: 12px;
+}
+.payload-tools .muted {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+.entries {
+  border-top: 1px solid var(--border);
+}
+details {
+  border-bottom: 1px solid var(--border);
+}
+details pre {
+  margin: 0 0 12px;
+}
+summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 6px 4px;
+  border-radius: 4px;
+  list-style: none;
+  cursor: pointer;
+  transition: background-color 0.15s var(--ease);
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+summary:hover {
+  background: var(--surface-2);
+}
+.chevron {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  margin: 0 4px;
+  border-right: 1.5px solid var(--text-3);
+  border-bottom: 1.5px solid var(--text-3);
+  transform: rotate(-45deg);
+  transition: transform 0.15s var(--ease);
+}
+details[open] .chevron {
+  transform: rotate(45deg);
+}
+.entry-key {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+summary:hover .entry-key {
+  color: var(--accent);
+}
+.entry-key-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  margin: 0 0 8px;
+  padding: 0 4px;
+}
+.entry-key-label {
+  @include m.label;
+  flex: none;
+}
+.entry-key-text {
+  flex: 1 1 200px;
+  min-width: 0;
+  color: var(--text-strong);
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+.entry-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.entry-size {
+  flex: none;
+  color: var(--text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
diff --git a/app/src/pages/network/transfer-payload.ts b/app/src/pages/network/transfer-payload.ts
index cbb760ce..9712c6ae 100644
--- a/app/src/pages/network/transfer-payload.ts
+++ b/app/src/pages/network/transfer-payload.ts
@@ -10,207 +10,8 @@ import { PayloadInsights } from './payload-insights';
 @Component({
   selector: 'section[appTransferPayload]',
   imports: [JsonPipe, PayloadInsights, RedactionCount],
-  template: `
-    <h2 id="payload-heading">TransferState payload</h2>
-    @if (selected(); as page) {
-      <div class="payload-tools">
-        <button
-          type="button"
-          data-refetch-payload
-          [disabled]="!canWrite() || refetching()"
-          [attr.aria-describedby]="canWrite() ? 'refetch-hint' : 'http-writes-off refetch-hint'"
-          (click)="refetchPayload(page.pageId)"
-        >
-          {{ refetching() ? 'Refetching…' : 'Refetch' }}
-        </button>
-        <span id="refetch-hint" class="muted small">
-          Renders this URL again on the server, with this tab's cookies, and shows the payload it
-          sends now. The tab does not reload.
-        </span>
-      </div>
-    }
-    @if (selectedPayload(); as payload) {
-      @if (!payload.found) {
-        <div class="empty">
-          <p>No TransferState script: this page was not server rendered.</p>
-        </div>
-      } @else {
-        <p class="muted small summary-line">
-          {{ payload.entries.length }} entr{{ payload.entries.length === 1 ? 'y' : 'ies' }},
-          {{ payload.size }} bytes
-          @if (payload.refetchedAt) {
-            <span class="tag" data-refetched>Refetched</span>
-          }
-        </p>
-        @if (payload.error) {
-          <p class="bad" role="alert">{{ payload.error }}</p>
-        }
-        <app-redaction-count [value]="payload.entries" />
-        <app-payload-insights [size]="payload.size" [entries]="payload.entries" />
-        <div class="entries">
-          @for (entry of payload.entries; track entry.key) {
-            <details>
-              <summary>
-                <span class="chevron" aria-hidden="true"></span>
-                @if (payloadLabel(entry); as label) {
-                  <span class="tag">{{ label }}</span>
-                }
-                @if (entry.http; as http) {
-                  <span
-                    class="tag"
-                    [class.server]="statusTone(http.status) === 'ok'"
-                    [class.fault]="statusTone(http.status) === 'bad'"
-                    >HTTP {{ http.status }}</span
-                  >
-                  <span class="entry-key">{{ http.url ?? entry.key }}</span>
-                } @else {
-                  <span class="entry-key">{{ entry.key }}</span>
-                }
-                <span class="entry-size">{{ entry.size }} B</span>
-              </summary>
-              <div class="entry-key-row">
-                <span class="entry-key-label">Key</span>
-                <code class="entry-key-text">{{ entry.key }}</code>
-                <div class="entry-actions">
-                  <button
-                    type="button"
-                    class="ghost"
-                    [attr.aria-label]="'Copy key ' + entry.key"
-                    (click)="copyKey(entry.key)"
-                  >
-                    Copy
-                  </button>
-                  @if (canEditEntry(entry)) {
-                    <button
-                      type="button"
-                      class="ghost"
-                      [attr.aria-label]="'Edit in SSR overrides, key ' + entry.key"
-                      (click)="editEntry(entry)"
-                    >
-                      Edit in SSR overrides
-                    </button>
-                  }
-                </div>
-              </div>
-              <!-- Focusable so a long value can be scrolled with the keyboard. -->
-              <pre tabindex="0" role="region" [attr.aria-label]="'Value of ' + entry.key">{{
-                entry.value | json
-              }}</pre>
-            </details>
-          }
-        </div>
-      }
-    } @else {
-      <div class="empty">
-        <p>Open a page of the app to see its payload.</p>
-      </div>
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-    @use 'network' as net;
-
-    @include net.controls;
-    @include net.status;
-    @include net.pre;
-    .summary-line {
-      margin-bottom: 8px;
-      font-variant-numeric: tabular-nums;
-    }
-    .payload-tools {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 12px;
-      margin-bottom: 12px;
-    }
-    .payload-tools .muted {
-      flex: 1 1 240px;
-      min-width: 0;
-    }
-    .entries {
-      border-top: 1px solid var(--border);
-    }
-    details {
-      border-bottom: 1px solid var(--border);
-    }
-    details pre {
-      margin: 0 0 12px;
-    }
-    summary {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-height: 36px;
-      padding: 6px 4px;
-      border-radius: 4px;
-      list-style: none;
-      cursor: pointer;
-      transition: background-color 0.15s var(--ease);
-    }
-    summary::-webkit-details-marker {
-      display: none;
-    }
-    summary:hover {
-      background: var(--surface-2);
-    }
-    .chevron {
-      flex: none;
-      width: 6px;
-      height: 6px;
-      margin: 0 4px;
-      border-right: 1.5px solid var(--text-3);
-      border-bottom: 1.5px solid var(--text-3);
-      transform: rotate(-45deg);
-      transition: transform 0.15s var(--ease);
-    }
-    details[open] .chevron {
-      transform: rotate(45deg);
-    }
-    .entry-key {
-      flex: 1 1 auto;
-      min-width: 0;
-      overflow: hidden;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    summary:hover .entry-key {
-      color: var(--accent);
-    }
-    .entry-key-row {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 4px 8px;
-      min-width: 0;
-      margin: 0 0 8px;
-      padding: 0 4px;
-    }
-    .entry-key-label {
-      @include m.label;
-      flex: none;
-    }
-    .entry-key-text {
-      flex: 1 1 200px;
-      min-width: 0;
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-      user-select: text;
-    }
-    .entry-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-    }
-    .entry-size {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-      font-variant-numeric: tabular-nums;
-    }
-  `,
+  templateUrl: './transfer-payload.html',
+  styleUrl: './transfer-payload.scss',
 })
 export class TransferPayload {
   private readonly state = inject(NetworkState);
diff --git a/app/src/pages/pipes-inspector.html b/app/src/pages/pipes-inspector.html
new file mode 100644
index 00000000..3b408749
--- /dev/null
+++ b/app/src/pages/pipes-inspector.html
@@ -0,0 +1,110 @@
+<p class="intro">
+  Pipes declared in your source, the built-in pipes your templates use and library pipes seen on the
+  page. Live data shows which components use each pipe on the page; turn on recording to capture
+  calls and the last input and output.
+</p>
+
+<div class="toolbar">
+  <app-search-field
+    #filterInput
+    class="search"
+    placeholder="Filter by pipe, class or file"
+    saveKey="pipes"
+    [(value)]="filter"
+  />
+  <app-select ariaLabel="Show pipes" [options]="kindOptions" [(value)]="kind" />
+  <app-select ariaLabel="Sort pipes" [options]="sortOptions" [(value)]="sort" />
+  <span class="total" aria-live="polite">{{ filtered().length }} of {{ allPipes().length }}</span>
+  <div class="actions">
+    <button type="button" (click)="refresh()" [disabled]="loading()">Refresh</button>
+    <button
+      type="button"
+      class="record"
+      [class.on]="instrumenting()"
+      [attr.aria-pressed]="instrumenting()"
+      [attr.aria-busy]="pendingRecord() !== null"
+      [attr.aria-disabled]="pendingRecord() !== null"
+      (click)="toggleInstrument()"
+    >
+      <span class="rec-dot" aria-hidden="true"></span>
+      {{ recordLabel() }}
+    </button>
+  </div>
+</div>
+
+@if (recordMessage(); as message) {
+  <p class="notice" role="status">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v5M12 8h.01" />
+    </svg>
+    <span>{{ message }}</span>
+  </p>
+}
+
+@if (instrumenting()) {
+  <p class="notice" role="status">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 11v5M12 8h.01" />
+    </svg>
+    <span>
+      <strong>Recording on {{ plural(instrumentedPages().length, 'page') }}.</strong>
+      Pipe prototypes are patched in the inspected page to count calls and keep the last input and
+      output. Stop recording when you are done.
+    </span>
+  </p>
+}
+
+@if (loading() && allPipes().length === 0) {
+  <div class="state" role="status">
+    <span class="spinner" aria-hidden="true"></span>
+    <p class="state-title">Scanning pipes…</p>
+  </div>
+} @else if (loadFailed() && allPipes().length === 0) {
+  <div class="state" role="alert">
+    <p class="state-title">Couldn't load pipes</p>
+    <p class="state-hint">The devtools server did not answer. Check that it is running.</p>
+    <button type="button" (click)="refresh()">Try again</button>
+  </div>
+} @else if (allPipes().length === 0) {
+  <div class="state">
+    <p class="state-title">No pipes found</p>
+    <p class="state-hint">
+      No &#64;Pipe classes were found in the source, and no template uses a built-in pipe yet.
+    </p>
+  </div>
+} @else {
+  @if (loadFailed()) {
+    <div class="notice error" role="alert">
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 8v5M12 16h.01" />
+      </svg>
+      <span>
+        @if (pipes().length) {
+          Couldn't scan the source again. The list keeps the last scan.
+        } @else {
+          Couldn't scan the source. Only pipes seen on the page are listed.
+        }
+      </span>
+      <button type="button" (click)="refresh()" [disabled]="loading()">Try again</button>
+    </div>
+  }
+  <div class="layout">
+    <div appPipeList class="list-wrap" (clear)="clearFilters()"></div>
+
+    <section
+      appPipeDetail
+      id="pipe-detail"
+      class="detail"
+      aria-labelledby="pipe-detail-title"
+    ></section>
+  </div>
+}
+
+@if (async().length > 0) {
+  <section appPipeAsync class="section" aria-labelledby="async-title"></section>
+}
+
+<section appPipeLint class="section" aria-labelledby="lint-title"></section>
diff --git a/app/src/pages/pipes-inspector.scss b/app/src/pages/pipes-inspector.scss
new file mode 100644
index 00000000..8119893e
--- /dev/null
+++ b/app/src/pages/pipes-inspector.scss
@@ -0,0 +1,173 @@
+@use 'mixins' as m;
+@use 'pipes';
+
+:host {
+  display: block;
+  color: var(--text);
+  font-size: 13px;
+}
+@include pipes.mono;
+.intro {
+  max-width: 720px;
+  margin: 0 0 12px;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.search {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+.search-icon {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+.search:focus-within .search-icon {
+  stroke: var(--accent);
+}
+input[type='search'] {
+  width: 100%;
+  height: var(--control-h);
+  padding: 0 12px 0 34px;
+  background: var(--bg);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 13px;
+  transition:
+    border-color 150ms var(--ease),
+    box-shadow 150ms var(--ease);
+}
+input[type='search']::placeholder {
+  color: var(--text-3);
+}
+input[type='search']:focus-visible {
+  @include m.field-focus;
+}
+.toolbar app-select {
+  width: 150px;
+}
+.total {
+  flex: none;
+  color: var(--text-2);
+  font-size: 12px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+@include pipes.buttons;
+.record[aria-busy='true'] {
+  cursor: progress;
+}
+.rec-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-3);
+}
+.record.on {
+  @include m.tint(accent);
+}
+.record.on .rec-dot {
+  background: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--accent-line);
+  border-radius: var(--radius-sm);
+  background: var(--accent-soft);
+  color: var(--text-2);
+  line-height: 1.5;
+  @include m.enter(0.2s);
+}
+.notice strong {
+  color: var(--text-strong);
+  font-weight: 600;
+}
+.notice svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.notice.error {
+  @include m.tint(danger);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.notice.error svg {
+  margin-top: 0;
+  stroke: currentColor;
+}
+.notice.error span {
+  flex: 1 1 200px;
+}
+.layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+@media (min-width: 880px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
+  }
+  .detail {
+    position: sticky;
+    top: 64px;
+    max-height: calc(100vh - 150px);
+    overflow: auto;
+  }
+}
+.list-wrap {
+  min-width: 0;
+}
+.detail {
+  min-width: 0;
+  @include m.panel;
+  @include m.enter;
+}
+.section {
+  margin-top: 20px;
+  @include m.enter;
+}
+@include pipes.states;
+@include pipes.state-text;
diff --git a/app/src/pages/pipes-inspector.ts b/app/src/pages/pipes-inspector.ts
index 4168b42d..b39b191e 100644
--- a/app/src/pages/pipes-inspector.ts
+++ b/app/src/pages/pipes-inspector.ts
@@ -1,1289 +1,40 @@
-import {
-  Component,
-  DestroyRef,
-  ElementRef,
-  Injector,
-  afterNextRender,
-  computed,
-  effect,
-  inject,
-  input,
-  output,
-  signal,
-  untracked,
-  viewChild,
-} from '@angular/core';
+import { Component, effect, inject, input, output, untracked, viewChild } from '@angular/core';
 import type { DevframeRpcClient } from 'devframe/client';
-import { hostPageId } from '../page-id';
-import { Select, type SelectOption } from '../ui/select';
-import { SourceLink } from '../ui/source-link';
 import { plural } from '../format';
-import { RovingList } from '../ui/roving-list';
 import { SearchField } from '../ui/search-field';
-
-interface UsageSite {
-  file: string;
-  line: number;
-}
-
-interface PipeInfo {
-  name: string;
-  className: string;
-  file: string;
-  line: number;
-  isStandalone: boolean;
-  isPure: boolean;
-  builtin?: boolean;
-  usageCount?: number;
-  usages?: UsageSite[];
-  /** Panel only: seen on the page but not found by the source scan, such as a pipe from a
-   * library. It has no source location, so `file` is empty and `line` is 0. */
-  runtime?: boolean;
-}
-
-interface PipeTarget {
-  pageId: string;
-  id: string;
-}
-
-interface PipeComponentUsage {
-  name: string;
-  count: number;
-  targets?: PipeTarget[];
-}
-
-interface PipeCallTiming {
-  totalMs?: number;
-  maxMs?: number;
-  lastMs?: number;
-  errorCount?: number;
-  lastError?: string;
-}
-
-interface PipeInstanceCall extends PipeCallTiming {
-  component: string;
-  callCount: number;
-  lastArgs?: unknown[];
-  lastResult?: unknown;
-  lastCaller?: string;
-  target?: PipeTarget;
-}
-
-interface PipeCallInfo extends PipeCallTiming {
-  callCount: number;
-  instances?: PipeInstanceCall[];
-  instanceTotal?: number;
-  lastArgs?: unknown[];
-  lastResult?: unknown;
-  lastCaller?: string;
-}
-
-interface StaleFinding {
-  detectedAt: number;
-}
-
-interface ChurnFinding {
-  streak: number;
-  detectedAt: number;
-}
-
-interface LivePipeInfo {
-  name: string;
-  className: string;
-  isPure: boolean;
-  instanceCount: number;
-  components: PipeComponentUsage[];
-  call?: PipeCallInfo;
-  stale?: StaleFinding;
-  churn?: ChurnFinding;
-  staleCheck?: 'unavailable';
-}
-
-interface AsyncUsageInfo {
-  component: string;
-  hasSource: boolean;
-  latestValue?: string;
-  duplicate: boolean;
-  resubscribing?: boolean;
-  target?: PipeTarget;
-}
-
-interface PipeLintFinding {
-  rule: string;
-  severity: 'error' | 'warning' | 'info';
-  pipe: string;
-  file: string;
-  line: number;
-  message: string;
-  fix: string;
-}
-
-interface PipesPageSnapshot {
-  pageId: string;
-  pipes: LivePipeInfo[];
-  async: AsyncUsageInfo[];
-  asyncTotal?: number;
-}
-
-interface PipesSnapshot {
-  pipes: LivePipeInfo[];
-  async: AsyncUsageInfo[];
-  asyncTotal?: number;
-  instrumented: string[];
-  pages?: PipesPageSnapshot[];
-}
-
-const RECORD_CONFIRM_MS = 5000;
-
-type PipeKind = 'all' | 'custom' | 'builtin' | 'runtime' | 'impure' | 'live' | 'called';
-
-const KIND_OPTIONS: readonly SelectOption<PipeKind>[] = [
-  { value: 'all', label: 'All pipes' },
-  { value: 'custom', label: 'Custom' },
-  { value: 'builtin', label: 'Built-in' },
-  { value: 'runtime', label: 'Runtime only' },
-  { value: 'impure', label: 'Impure' },
-  { value: 'live', label: 'On the page' },
-  { value: 'called', label: 'Called while recording' },
-];
-
-type PipeSort = 'source' | 'calls' | 'time';
-
-const SORT_OPTIONS: readonly SelectOption<PipeSort>[] = [
-  { value: 'source', label: 'Source order' },
-  { value: 'calls', label: 'Most calls' },
-  { value: 'time', label: 'Most time' },
-];
-
+import { Select } from '../ui/select';
+import { PipeAsync } from './pipes/pipe-async';
+import { PipeDetail } from './pipes/pipe-detail';
+import { PipeLint } from './pipes/pipe-lint';
+import { PipeList } from './pipes/pipe-list';
+import {
+  KIND_OPTIONS,
+  SORT_OPTIONS,
+  describe,
+  ms,
+  sourceLabel,
+  type LivePipeInfo,
+  type PipeInfo,
+  type PipeLintFinding,
+  type PipeTarget,
+} from './pipes/pipes-model';
+import { PipesState } from './pipes/pipes-state';
+
+/**
+ * The Pipes page: the toolbar, the load states and one section per part of the page. The
+ * sections live in `./pipes/` and share the page's {@link PipesState}; the page keeps the members
+ * its tests and the shell read on itself.
+ */
 @Component({
   selector: 'app-pipes-inspector',
-  imports: [RovingList, SearchField, Select, SourceLink],
-  template: `
-    <p class="intro">
-      Pipes declared in your source, the built-in pipes your templates use and library pipes seen on
-      the page. Live data shows which components use each pipe on the page; turn on recording to
-      capture calls and the last input and output.
-    </p>
-
-    <div class="toolbar">
-      <app-search-field
-        #filterInput
-        class="search"
-        placeholder="Filter by pipe, class or file"
-        saveKey="pipes"
-        [(value)]="filter"
-      />
-      <app-select ariaLabel="Show pipes" [options]="kindOptions" [(value)]="kind" />
-      <app-select ariaLabel="Sort pipes" [options]="sortOptions" [(value)]="sort" />
-      <span class="total" aria-live="polite"
-        >{{ filtered().length }} of {{ allPipes().length }}</span
-      >
-      <div class="actions">
-        <button type="button" (click)="refresh()" [disabled]="loading()">Refresh</button>
-        <button
-          type="button"
-          class="record"
-          [class.on]="instrumenting()"
-          [attr.aria-pressed]="instrumenting()"
-          [attr.aria-busy]="pendingRecord() !== null"
-          [attr.aria-disabled]="pendingRecord() !== null"
-          (click)="toggleInstrument()"
-        >
-          <span class="rec-dot" aria-hidden="true"></span>
-          {{ recordLabel() }}
-        </button>
-      </div>
-    </div>
-
-    @if (recordMessage(); as message) {
-      <p class="notice" role="status">
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <circle cx="12" cy="12" r="9" />
-          <path d="M12 11v5M12 8h.01" />
-        </svg>
-        <span>{{ message }}</span>
-      </p>
-    }
-
-    @if (instrumenting()) {
-      <p class="notice" role="status">
-        <svg viewBox="0 0 24 24" aria-hidden="true">
-          <circle cx="12" cy="12" r="9" />
-          <path d="M12 11v5M12 8h.01" />
-        </svg>
-        <span>
-          <strong>Recording on {{ plural(instrumentedPages().length, 'page') }}.</strong>
-          Pipe prototypes are patched in the inspected page to count calls and keep the last input
-          and output. Stop recording when you are done.
-        </span>
-      </p>
-    }
-
-    @if (loading() && allPipes().length === 0) {
-      <div class="state" role="status">
-        <span class="spinner" aria-hidden="true"></span>
-        <p class="state-title">Scanning pipes…</p>
-      </div>
-    } @else if (loadFailed() && allPipes().length === 0) {
-      <div class="state" role="alert">
-        <p class="state-title">Couldn't load pipes</p>
-        <p class="state-hint">The devtools server did not answer. Check that it is running.</p>
-        <button type="button" (click)="refresh()">Try again</button>
-      </div>
-    } @else if (allPipes().length === 0) {
-      <div class="state">
-        <p class="state-title">No pipes found</p>
-        <p class="state-hint">
-          No &#64;Pipe classes were found in the source, and no template uses a built-in pipe yet.
-        </p>
-      </div>
-    } @else {
-      @if (loadFailed()) {
-        <div class="notice error" role="alert">
-          <svg viewBox="0 0 24 24" aria-hidden="true">
-            <circle cx="12" cy="12" r="9" />
-            <path d="M12 8v5M12 16h.01" />
-          </svg>
-          <span>
-            @if (pipes().length) {
-              Couldn't scan the source again. The list keeps the last scan.
-            } @else {
-              Couldn't scan the source. Only pipes seen on the page are listed.
-            }
-          </span>
-          <button type="button" (click)="refresh()" [disabled]="loading()">Try again</button>
-        </div>
-      }
-      <div class="layout">
-        <div class="list-wrap">
-          @if (filtered().length) {
-            <ul class="pipe-list" aria-label="Pipes" appRovingList="[data-pipe-row]">
-              @for (p of filtered(); track p.file + p.name) {
-                @let live = liveFor(p.name);
-                <li>
-                  <button
-                    type="button"
-                    class="row"
-                    data-pipe-row
-                    aria-controls="pipe-detail"
-                    [attr.aria-current]="isSelected(p) || null"
-                    [class.selected]="isSelected(p)"
-                    (click)="select(p)"
-                    (mouseenter)="highlightPipe(live)"
-                    (mouseleave)="highlight(null)"
-                    (focus)="highlightPipe(live)"
-                    (blur)="highlight(null)"
-                  >
-                    <span class="row-main">
-                      <span class="name mono">{{ p.name }}</span>
-                      <span class="sub mono">{{ p.className }}</span>
-                    </span>
-                    <span class="row-meta">
-                      @if (live?.churn) {
-                        <span class="chip warn">churning</span>
-                      }
-                      @if (live?.stale) {
-                        <span class="chip warn">stale?</span>
-                      }
-                      @if (live?.call; as call) {
-                        <span class="chip hot">{{ plural(call.callCount, 'call') }}</span>
-                        @if (call.totalMs !== undefined) {
-                          <span class="chip hot">{{ ms(call.totalMs) }}</span>
-                        }
-                      }
-                      @if (live) {
-                        <span class="chip live">{{ live.instanceCount }} live</span>
-                      }
-                      @if (p.builtin) {
-                        <span class="chip">built-in</span>
-                      }
-                      @if (p.runtime) {
-                        <span class="chip">runtime only</span>
-                      }
-                      @if (!p.isStandalone) {
-                        <span class="chip">NgModule</span>
-                      }
-                      <span class="chip" [class.impure]="!p.isPure">{{
-                        p.isPure ? 'pure' : 'impure'
-                      }}</span>
-                    </span>
-                    <span class="row-file mono">
-                      @if (p.runtime) {
-                        <span class="no-source">No source location</span>
-                      } @else {
-                        {{ p.file }}:{{ p.line }}
-                      }
-                      @if (p.builtin && (p.usageCount ?? 0) > 1) {
-                        <span class="more">+{{ (p.usageCount ?? 1) - 1 }} more</span>
-                      } @else if (!p.builtin && p.usageCount) {
-                        <span class="more"
-                          >{{ p.usageCount }} {{ p.usageCount === 1 ? 'use' : 'uses' }}</span
-                        >
-                      }
-                    </span>
-                  </button>
-                </li>
-              }
-            </ul>
-          } @else {
-            <div class="state compact" role="status">
-              <p class="state-title">No pipes match</p>
-              <p class="state-hint">
-                @if (filter().trim()) {
-                  Nothing matches “{{ filter().trim() }}” in this view.
-                } @else {
-                  None of the pipes fit this filter.
-                }
-              </p>
-              <button type="button" (click)="clearFilters()">Clear filters</button>
-            </div>
-          }
-        </div>
-
-        <section id="pipe-detail" class="detail" aria-labelledby="pipe-detail-title">
-          @if (selected(); as p) {
-            <header class="detail-head">
-              <h2 id="pipe-detail-title" class="mono" tabindex="-1">{{ p.name }}</h2>
-              <span class="chip" [class.impure]="!p.isPure">{{
-                p.isPure ? 'pure' : 'impure'
-              }}</span>
-              @if (p.builtin) {
-                <span class="chip">built-in</span>
-              }
-              @if (p.runtime) {
-                <span class="chip">runtime only</span>
-              }
-            </header>
-
-            <div class="block">
-              <h3>Declaration</h3>
-              <dl>
-                <dt>Class</dt>
-                <dd class="mono">{{ p.className }}</dd>
-                <dt>Source</dt>
-                <dd>{{ sourceLabel(p) }}</dd>
-                @if (!p.builtin && !p.runtime) {
-                  <dt>File</dt>
-                  <dd class="mono"><app-source-link [file]="p.file" [line]="p.line" /></dd>
-                }
-                @if (!p.runtime) {
-                  <dt>Standalone</dt>
-                  <dd>{{ p.isStandalone ? 'Yes' : 'No, declared in an NgModule' }}</dd>
-                }
-                <dt>Pure</dt>
-                <dd>
-                  {{
-                    p.isPure
-                      ? 'Yes, reruns only when an input changes'
-                      : 'No, reruns on every check'
-                  }}
-                </dd>
-              </dl>
-            </div>
-
-            @if (p.usages?.length) {
-              <div class="block">
-                <h3>
-                  Used in templates <span class="pill">{{ p.usageCount }}</span>
-                </h3>
-                <ul class="sites">
-                  @for (u of p.usages; track u.file + ':' + u.line) {
-                    <li class="mono"><app-source-link [file]="u.file" [line]="u.line" /></li>
-                  }
-                </ul>
-              </div>
-            }
-
-            <div class="block">
-              <h3>Live on the page</h3>
-              @if (liveFor(p.name); as live) {
-                @if (live.churn; as churn) {
-                  <p class="warning" role="note">
-                    <span class="chip warn">churning</span>
-                    @if (live.isPure) {
-                      An instance ran {{ churn.streak }} times in a row and returned an equal result
-                      each time: its input changes reference while its contents stay the same. Keep
-                      the input stable, for example in a computed().
-                    } @else {
-                      An instance returned an equal object or array as a new reference
-                      {{ churn.streak }} times in a row, so the bindings that read it update for
-                      nothing. Return the previous result when it is equal, or use a computed().
-                    }
-                  </p>
-                }
-                @if (live.stale) {
-                  <p class="warning" role="note">
-                    <span class="chip warn">experimental</span>
-                    This pure pipe got an argument whose contents changed while its reference stayed
-                    the same, so it may be showing a stale value.
-                  </p>
-                }
-                <dl>
-                  <dt>Instances</dt>
-                  <dd>{{ live.instanceCount }}</dd>
-                  <dt>Used by</dt>
-                  <dd>
-                    <ul class="chips">
-                      @for (c of live.components; track c.name) {
-                        <li>
-                          @if (c.targets?.[0]; as target) {
-                            <button
-                              type="button"
-                              class="component"
-                              [attr.aria-label]="'Highlight ' + c.name + ' on the page'"
-                              (click)="highlight(target, true)"
-                              (mouseenter)="highlight(target)"
-                              (mouseleave)="highlight(null)"
-                              (focus)="highlight(target)"
-                              (blur)="highlight(null)"
-                            >
-                              <span class="mono">{{ c.name }}</span>
-                              <span class="count">{{ c.count }}</span>
-                            </button>
-                          } @else {
-                            <span class="component">
-                              <span class="mono">{{ c.name }}</span>
-                              <span class="count">{{ c.count }}</span>
-                            </span>
-                          }
-                        </li>
-                      }
-                    </ul>
-                  </dd>
-                  @if (live.call; as call) {
-                    <dt>Calls</dt>
-                    <dd>{{ call.callCount }}</dd>
-                    @if (call.totalMs !== undefined) {
-                      <dt>Time</dt>
-                      <dd>
-                        {{ ms(call.totalMs) }} total,
-                        {{ ms(call.totalMs / call.callCount) }} average,
-                        {{ ms(call.maxMs ?? 0) }} slowest
-                      </dd>
-                    }
-                    @if (call.errorCount) {
-                      <dt>Errors</dt>
-                      <dd>
-                        {{ call.errorCount }}
-                        @if (call.lastError) {
-                          <span class="mono value">{{ call.lastError }}</span>
-                        }
-                      </dd>
-                    }
-                    <dt>Last input</dt>
-                    <dd class="mono value">{{ describe(call.lastArgs) }}</dd>
-                    <dt>Last output</dt>
-                    <dd class="mono value">{{ describe(call.lastResult) }}</dd>
-                    @if (call.instances?.length) {
-                      <dt>Per instance</dt>
-                      <dd>
-                        <ul class="sites">
-                          @for (i of call.instances; track $index) {
-                            <li class="instance">
-                              @if (i.target; as target) {
-                                <button
-                                  type="button"
-                                  class="component"
-                                  [attr.aria-label]="'Highlight ' + i.component + ' on the page'"
-                                  (click)="highlight(target, true)"
-                                  (mouseenter)="highlight(target)"
-                                  (mouseleave)="highlight(null)"
-                                  (focus)="highlight(target)"
-                                  (blur)="highlight(null)"
-                                >
-                                  <span class="mono">{{ i.component }}</span>
-                                </button>
-                              } @else {
-                                <span class="component">
-                                  <span class="mono">{{ i.component }}</span>
-                                </span>
-                              }
-                              <span class="mono value">
-                                {{ describe(i.lastArgs) }} → {{ describe(i.lastResult) }}
-                                <span class="calls">{{ i.callCount }}×</span>
-                                @if (i.totalMs !== undefined) {
-                                  <span class="calls">{{ ms(i.totalMs) }}</span>
-                                }
-                              </span>
-                              @if (i.lastCaller) {
-                                <span class="mono value caller">{{ i.lastCaller }}</span>
-                              }
-                            </li>
-                          }
-                        </ul>
-                        @if (call.instanceTotal) {
-                          <p class="hint">
-                            Showing {{ call.instances.length }} of
-                            {{ call.instanceTotal }} instances.
-                          </p>
-                        }
-                      </dd>
-                    }
-                    @if (call.lastCaller) {
-                      <dt>Last caller</dt>
-                      <dd class="mono value">{{ call.lastCaller }}</dd>
-                    }
-                  } @else if (instrumenting()) {
-                    <dt>Calls</dt>
-                    <dd class="muted">None recorded yet.</dd>
-                  }
-                </dl>
-                @if (live.staleCheck === 'unavailable') {
-                  <p class="hint">
-                    The stale check is off for this pipe: it couldn't read the compiled template,
-                    which happens in minified builds.
-                  </p>
-                }
-                @if (!live.call && !instrumenting()) {
-                  <p class="hint">Turn on “Record calls” to see call counts and values.</p>
-                }
-              } @else {
-                <p class="empty-line">
-                  Not in use on the connected page. Open a view that uses it, or connect the app.
-                </p>
-              }
-            </div>
-          } @else {
-            <h2 id="pipe-detail-title" class="visually-hidden">Pipe details</h2>
-            <div class="state compact">
-              <p class="state-title">Pick a pipe</p>
-              <p class="state-hint">
-                See where it is declared, which components use it and what it last returned.
-              </p>
-            </div>
-          }
-        </section>
-      </div>
-    }
-
-    @if (async().length > 0) {
-      <section class="section" aria-labelledby="async-title">
-        <h2 id="async-title">
-          Async subscriptions <span class="pill">{{ async().length }}</span>
-        </h2>
-        <p class="hint">
-          Each <span class="mono">| async</span> subscribes on its own. Two on the same source mean
-          the work runs twice. A source that changes on every check, like
-          <span class="mono">getData() | async</span>, resubscribes each time.
-        </p>
-        @if (asyncTotal(); as total) {
-          <p class="hint">Showing {{ async().length }} of {{ total }} subscriptions.</p>
-        }
-        <ul class="async-list">
-          @for (a of async(); track $index) {
-            <li class="async-row" (mouseenter)="highlight(a.target)" (mouseleave)="highlight(null)">
-              @if (a.target; as target) {
-                <button
-                  type="button"
-                  class="component-name mono"
-                  [attr.aria-label]="'Highlight ' + a.component + ' on the page'"
-                  (click)="highlight(target)"
-                  (focus)="highlight(target)"
-                  (blur)="highlight(null)"
-                >
-                  {{ a.component }}
-                </button>
-              } @else {
-                <span class="mono component-name">{{ a.component }}</span>
-              }
-              @if (!a.hasSource) {
-                <span class="chip">no source</span>
-              }
-              @if (a.duplicate) {
-                <span class="chip warn">possible duplicate subscription</span>
-              }
-              @if (a.resubscribing) {
-                <span class="chip warn">resubscribing</span>
-              }
-              <span class="mono value latest">{{ a.latestValue ?? 'no value yet' }}</span>
-            </li>
-          }
-        </ul>
-      </section>
-    }
-
-    <section class="section" aria-labelledby="lint-title">
-      <h2 id="lint-title">
-        Lint
-        @if (lint(); as findings) {
-          <span class="pill">{{ findings.length }}</span>
-        }
-      </h2>
-      @if (lintFailed()) {
-        <p class="empty-line" role="alert">Couldn't run the lint check. Try Refresh.</p>
-      } @else if (lint() === null) {
-        <p class="empty-line" role="status">Checking…</p>
-      } @else if (!lint()!.length) {
-        <p class="empty-line ok">No problems found.</p>
-      } @else {
-        <ul class="findings">
-          @for (f of lint(); track $index) {
-            <li class="finding">
-              <div class="finding-head">
-                <span class="severity" [attr.data-tone]="f.severity">{{ f.severity }}</span>
-                <code class="mono rule">{{ f.rule }}</code>
-                @let target = pipeFor(f);
-                <span class="where mono">
-                  @if (target) {
-                    <button type="button" class="pipe-link" (click)="showPipe(target)">
-                      <span class="sr-only">Show pipe </span>{{ f.pipe }}
-                    </button>
-                  } @else {
-                    {{ f.pipe }}
-                  }
-                  · <app-source-link [file]="f.file" [line]="f.line" />
-                </span>
-              </div>
-              <p class="finding-message">{{ f.message }}</p>
-              <p class="finding-fix"><span class="fix-label">Fix</span> {{ f.fix }}</p>
-            </li>
-          }
-        </ul>
-      }
-    </section>
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: block;
-      color: var(--text);
-      font-size: 13px;
-    }
-    .mono {
-      font-family: var(--font-mono);
-    }
-    .intro {
-      max-width: 720px;
-      margin: 0 0 12px;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px 12px;
-      align-items: center;
-      margin: 0 0 12px;
-      padding: 8px;
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    .search {
-      position: relative;
-      flex: 1 1 220px;
-      min-width: 0;
-    }
-    .search-icon {
-      position: absolute;
-      top: 50%;
-      left: 12px;
-      width: 14px;
-      height: 14px;
-      transform: translateY(-50%);
-      fill: none;
-      stroke: var(--text-3);
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      pointer-events: none;
-    }
-    .search:focus-within .search-icon {
-      stroke: var(--accent);
-    }
-    input[type='search'] {
-      width: 100%;
-      height: var(--control-h);
-      padding: 0 12px 0 34px;
-      background: var(--bg);
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      color: var(--text);
-      font-size: 13px;
-      transition:
-        border-color 150ms var(--ease),
-        box-shadow 150ms var(--ease);
-    }
-    input[type='search']::placeholder {
-      color: var(--text-3);
-    }
-    input[type='search']:focus-visible {
-      @include m.field-focus;
-    }
-    .toolbar app-select {
-      width: 150px;
-    }
-    .total {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-      white-space: nowrap;
-      font-variant-numeric: tabular-nums;
-    }
-    .actions {
-      display: flex;
-      gap: 8px;
-      margin-left: auto;
-    }
-    button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      height: var(--control-h);
-      padding: 0 14px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font: inherit;
-      font-weight: 500;
-      white-space: nowrap;
-      cursor: pointer;
-      transition:
-        background-color 150ms var(--ease),
-        border-color 150ms var(--ease);
-    }
-    button:hover:not(:disabled) {
-      border-color: var(--accent-line);
-      background: var(--surface-3);
-    }
-    button:focus-visible {
-      @include m.focus-ring;
-    }
-    button:disabled {
-      cursor: default;
-      opacity: 0.6;
-    }
-    .record[aria-busy='true'] {
-      cursor: progress;
-    }
-    .rec-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--text-3);
-    }
-    .record.on {
-      @include m.tint(accent);
-    }
-    .record.on .rec-dot {
-      background: var(--accent);
-      box-shadow: 0 0 0 3px var(--accent-soft);
-    }
-    .notice {
-      display: flex;
-      align-items: flex-start;
-      gap: 8px;
-      margin: 0 0 12px;
-      padding: 10px 12px;
-      border: 1px solid var(--accent-line);
-      border-radius: var(--radius-sm);
-      background: var(--accent-soft);
-      color: var(--text-2);
-      line-height: 1.5;
-      @include m.enter(0.2s);
-    }
-    .notice strong {
-      color: var(--text-strong);
-      font-weight: 600;
-    }
-    .notice svg {
-      flex: none;
-      width: 16px;
-      height: 16px;
-      margin-top: 2px;
-      fill: none;
-      stroke: var(--accent);
-      stroke-width: 2;
-      stroke-linecap: round;
-    }
-    .notice.error {
-      @include m.tint(danger);
-      align-items: center;
-      flex-wrap: wrap;
-    }
-    .notice.error svg {
-      margin-top: 0;
-      stroke: currentColor;
-    }
-    .notice.error span {
-      flex: 1 1 200px;
-    }
-    .layout {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr);
-      gap: 12px;
-      align-items: start;
-    }
-    @media (min-width: 880px) {
-      .layout {
-        grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
-      }
-      .detail {
-        position: sticky;
-        top: 64px;
-        max-height: calc(100vh - 150px);
-        overflow: auto;
-      }
-    }
-    .list-wrap {
-      min-width: 0;
-    }
-    .pipe-list {
-      display: grid;
-      gap: 2px;
-      margin: 0;
-      padding: 6px;
-      list-style: none;
-      @include m.panel;
-      @include m.enter;
-    }
-    .row {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 2px 12px;
-      width: 100%;
-      height: auto;
-      padding: 8px 10px;
-      border: 0;
-      border-radius: var(--radius-sm);
-      background: none;
-      text-align: left;
-      font-weight: 400;
-      white-space: normal;
-    }
-    .row:hover:not(:disabled) {
-      border-color: transparent;
-      background: var(--surface-2);
-    }
-    .row:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .row.selected {
-      background: var(--accent-soft);
-      box-shadow: inset 2px 0 0 var(--accent);
-    }
-    .row-main {
-      display: flex;
-      align-items: baseline;
-      gap: 8px;
-      min-width: 0;
-    }
-    .name {
-      flex: none;
-      color: var(--text-strong);
-      font-size: 13px;
-      font-weight: 600;
-    }
-    .sub {
-      color: var(--text-3);
-      font-size: 12px;
-      @include m.truncate;
-    }
-    .row-meta {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      gap: 4px;
-    }
-    .row-file {
-      grid-column: 1 / -1;
-      color: var(--text-3);
-      font-size: 11px;
-      overflow-wrap: anywhere;
-    }
-    .no-source {
-      font-family: var(--font-sans);
-      font-style: italic;
-    }
-    .more {
-      margin-left: 6px;
-      color: var(--text-2);
-    }
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      height: 18px;
-      padding: 0 7px;
-      border: 1px solid var(--border-strong);
-      border-radius: 99px;
-      color: var(--text-2);
-      font-size: 10px;
-      font-weight: 600;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      white-space: nowrap;
-    }
-    .chip.impure,
-    .chip.warn {
-      @include m.tint(warn);
-    }
-    .chip.live {
-      @include m.tint(ok);
-    }
-    .chip.hot {
-      @include m.tint(accent);
-      text-transform: none;
-      font-variant-numeric: tabular-nums;
-    }
-    .pill {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 18px;
-      height: 16px;
-      padding: 0 5px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 10px;
-      font-weight: 600;
-      letter-spacing: 0;
-      font-variant-numeric: tabular-nums;
-    }
-    .detail {
-      min-width: 0;
-      @include m.panel;
-      @include m.enter;
-    }
-    .detail-head {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 10px;
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .detail-head h2 {
-      flex: 1 1 auto;
-      min-width: 0;
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 15px;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-      border-radius: 4px;
-    }
-    .detail-head h2:focus {
-      outline: none;
-    }
-    .detail-head h2:focus-visible {
-      @include m.focus-ring;
-    }
-    .block {
-      padding: 14px 16px;
-      border-bottom: 1px solid var(--border);
-    }
-    .block:last-child {
-      border-bottom: 0;
-    }
-    h3 {
-      @include m.label;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      margin: 0 0 10px;
-    }
-    dl {
-      display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
-      gap: 6px 14px;
-      margin: 0;
-    }
-    dt {
-      color: var(--text-3);
-    }
-    dd {
-      min-width: 0;
-      margin: 0;
-      color: var(--text);
-    }
-    .value {
-      font-size: 12px;
-      overflow-wrap: anywhere;
-    }
-    .muted {
-      color: var(--text-2);
-    }
-    .sites {
-      display: grid;
-      gap: 4px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      color: var(--text-2);
-      font-size: 12px;
-      overflow-wrap: anywhere;
-    }
-    .calls {
-      margin-left: 6px;
-      color: var(--text-3);
-    }
-    .instance {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px;
-    }
-    .instance .component {
-      padding-right: 10px;
-    }
-    .caller {
-      flex-basis: 100%;
-    }
-    .chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .component {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      height: 24px;
-      padding: 0 4px 0 10px;
-      border: 1px solid var(--control-border);
-      border-radius: 99px;
-      background: var(--bg);
-      font-size: 12px;
-      transition:
-        border-color 150ms var(--ease),
-        background-color 150ms var(--ease);
-    }
-    button.component {
-      height: 24px;
-      padding: 0 4px 0 10px;
-      border-radius: 99px;
-      background: var(--bg);
-      font-size: 12px;
-      font-weight: 400;
-    }
-    .count {
-      padding: 0 6px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 10px;
-      line-height: 16px;
-      font-variant-numeric: tabular-nums;
-    }
-    .warning {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
-      gap: 8px;
-      margin: 0 0 12px;
-      padding: 8px 10px;
-      border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
-      border-radius: var(--radius-sm);
-      background: color-mix(in srgb, var(--warn) 8%, transparent);
-      color: var(--text);
-      line-height: 1.5;
-    }
-    .hint {
-      margin: 8px 0 0;
-      color: var(--text-3);
-      font-size: 12px;
-    }
-    .empty-line {
-      margin: 0;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .empty-line.ok {
-      color: var(--ok);
-    }
-    .section {
-      margin-top: 20px;
-      @include m.enter;
-    }
-    .section h2 {
-      @include m.label;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin: 0 0 8px;
-    }
-    .section > .hint {
-      margin: -2px 0 10px;
-    }
-    .async-list,
-    .findings {
-      display: grid;
-      gap: 6px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-    .async-row {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px 8px;
-      min-width: 0;
-      padding: 8px 12px;
-      border-radius: var(--radius-sm);
-      @include m.panel;
-      transition:
-        background-color 150ms var(--ease),
-        border-color 150ms var(--ease);
-    }
-    .async-row:hover {
-      border-color: var(--border-strong);
-      background: var(--surface-2);
-    }
-    .component-name {
-      color: var(--text-strong);
-      font-weight: 600;
-    }
-    button.component-name {
-      height: 24px;
-      padding: 0 8px;
-      margin-left: -8px;
-      border-color: transparent;
-      background: none;
-      font-size: 13px;
-    }
-    .latest {
-      flex: 1 1 100%;
-      color: var(--text-2);
-    }
-    .finding {
-      padding: 10px 12px;
-      border-radius: var(--radius-sm);
-      @include m.panel;
-    }
-    .finding-head {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px 8px;
-    }
-    .severity {
-      padding: 0 7px;
-      border: 1px solid var(--border-strong);
-      border-radius: 99px;
-      color: var(--text-2);
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.06em;
-      line-height: 16px;
-      text-transform: uppercase;
-    }
-    .severity[data-tone='warning'] {
-      @include m.tint(warn);
-    }
-    .severity[data-tone='error'] {
-      @include m.tint(danger);
-    }
-    .rule {
-      color: var(--accent);
-      font-size: 12px;
-    }
-    .where {
-      color: var(--text-3);
-      font-size: 11px;
-      overflow-wrap: anywhere;
-    }
-    button.pipe-link {
-      display: inline;
-      height: auto;
-      padding: 0;
-      border: 0;
-      border-radius: 4px;
-      background: none;
-      color: var(--accent);
-      font: inherit;
-      text-decoration: underline;
-      text-underline-offset: 3px;
-      white-space: normal;
-    }
-    button.pipe-link:hover:not(:disabled) {
-      border-color: transparent;
-      background: none;
-      color: var(--accent-hover);
-    }
-    button.pipe-link:focus-visible {
-      @include m.focus-ring;
-    }
-    .finding-message {
-      margin: 6px 0 0;
-      color: var(--text);
-      line-height: 1.5;
-    }
-    .finding-fix {
-      margin: 4px 0 0;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .fix-label {
-      @include m.label;
-      margin-right: 4px;
-    }
-    .state {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      padding: 40px 16px;
-      text-align: center;
-      background: var(--surface);
-      border: 1px dashed var(--border-strong);
-      border-radius: var(--radius);
-      @include m.enter;
-    }
-    .state.compact {
-      padding: 28px 16px;
-      border: 0;
-      background: none;
-    }
-    .list-wrap .state.compact {
-      @include m.panel;
-    }
-    .state-title {
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .state-hint {
-      max-width: 440px;
-      margin: 0;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .state button {
-      margin-top: 8px;
-    }
-    .spinner {
-      width: 20px;
-      height: 20px;
-      border: 2px solid var(--border-strong);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .spinner {
-        animation: none;
-      }
-    }
-  `,
+  imports: [PipeAsync, PipeDetail, PipeLint, PipeList, SearchField, Select],
+  providers: [PipesState],
+  templateUrl: './pipes-inspector.html',
+  styleUrl: './pipes-inspector.scss',
 })
 export class PipesInspector {
+  private readonly state = inject(PipesState);
   protected readonly plural = plural;
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly injector = inject(Injector);
   private readonly filterInput = viewChild<SearchField>('filterInput');
 
   rpc = input<DevframeRpcClient | null>(null);
@@ -1297,87 +48,31 @@ export class PipesInspector {
   protected readonly kindOptions = KIND_OPTIONS;
   protected readonly sortOptions = SORT_OPTIONS;
 
-  pipes = signal<PipeInfo[]>([]);
-  filter = signal('');
-  kind = signal<PipeKind | null>('all');
-  sort = signal<PipeSort | null>('source');
-  loading = signal(false);
-  loadFailed = signal(false);
-  selected = signal<PipeInfo | null>(null);
-
-  private readonly snapshot = signal<PipesSnapshot | undefined>(undefined);
-  /** The live data of the page this tab shows, or every page merged. */
-  private readonly shown = computed(() => {
-    const snapshot = this.snapshot();
-    // With several tabs reporting, show the one asked for or the one this panel belongs to.
-    const pageId = this.livePageId();
-    const own = pageId ? snapshot?.pages?.find((page) => page.pageId === pageId) : undefined;
-    return own ?? snapshot;
-  });
-  readonly live = computed<LivePipeInfo[]>(() => this.shown()?.pipes ?? []);
-  readonly async = computed<AsyncUsageInfo[]>(() => this.shown()?.async ?? []);
+  readonly pipes = this.state.pipes;
+  readonly filter = this.state.filter;
+  readonly kind = this.state.kind;
+  readonly sort = this.state.sort;
+  readonly loading = this.state.loading;
+  readonly loadFailed = this.state.loadFailed;
+  readonly selected = this.state.selected;
+  readonly live = this.state.live;
+  readonly async = this.state.async;
   /** Every `| async` usage, set only when the list was cut short. */
-  readonly asyncTotal = computed(() => this.shown()?.asyncTotal);
-  lint = signal<PipeLintFinding[] | null>(null);
-  lintFailed = signal(false);
-  instrumentedPages = signal<string[]>([]);
-  instrumenting = computed(() => this.instrumentedPages().length > 0);
-  pendingRecord = signal<boolean | null>(null);
-  recordMessage = signal<string | null>(null);
-  recordLabel = computed(() => {
-    const pending = this.pendingRecord();
-    if (pending !== null) return pending ? 'Starting…' : 'Stopping…';
-    return this.instrumenting() ? 'Stop recording' : 'Record calls';
-  });
-  private pendingTimer?: ReturnType<typeof setTimeout>;
-
-  private readonly liveByName = computed(() => new Map(this.live().map((p) => [p.name, p])));
-
+  readonly asyncTotal = this.state.asyncTotal;
+  readonly lint = this.state.lint;
+  readonly lintFailed = this.state.lintFailed;
+  readonly instrumentedPages = this.state.instrumentedPages;
+  readonly instrumenting = this.state.instrumenting;
+  readonly pendingRecord = this.state.pendingRecord;
+  readonly recordMessage = this.state.recordMessage;
+  readonly recordLabel = this.state.recordLabel;
   /** The source scan plus the pipes seen only on the page, such as library pipes. */
-  readonly allPipes = computed<PipeInfo[]>(() => {
-    const pipes = this.pipes();
-    const scanned = new Set(pipes.map((p) => p.name));
-    const runtime: PipeInfo[] = this.live()
-      .filter((p) => !scanned.has(p.name))
-      .map((p) => ({
-        name: p.name,
-        className: p.className,
-        file: '',
-        line: 0,
-        isStandalone: true,
-        isPure: p.isPure,
-        runtime: true,
-      }));
-    return runtime.length ? [...pipes, ...runtime] : pipes;
-  });
-
-  filtered = computed(() => {
-    const q = this.filter();
-    const kind = this.kind() ?? 'all';
-    const shown = this.allPipes().filter((p) => this.fitsKind(p, kind) && this.fitsQuery(p, q));
-    const sort = this.sort() ?? 'source';
-    if (sort === 'source') return shown;
-    // Hottest first; pipes with no recorded calls keep source order at the end.
-    const weight = (p: PipeInfo) => {
-      const call = this.liveFor(p.name)?.call;
-      if (!call) return -1;
-      return sort === 'calls' ? call.callCount : (call.totalMs ?? 0);
-    };
-    return shown
-      .map((p, index) => ({ p, index, weight: weight(p) }))
-      .sort((a, b) => b.weight - a.weight || a.index - b.index)
-      .map(({ p }) => p);
-  });
-
-  private readonly pipesByName = computed(() => {
-    const byName = new Map<string, PipeInfo[]>();
-    for (const p of this.allPipes()) byName.set(p.name, [...(byName.get(p.name) ?? []), p]);
-    return byName;
-  });
-
-  private unsubscribe?: () => void;
+  readonly allPipes = this.state.allPipes;
+  readonly filtered = this.state.filtered;
 
   constructor() {
+    this.state.connect(this.rpc, this.pageId);
+
     effect(() => {
       const client = this.rpc();
       if (client) {
@@ -1390,195 +85,64 @@ export class PipesInspector {
     effect(() => {
       const name = this.focus();
       if (!name) return;
-      const pipe = this.pipesByName().get(name)?.[0];
+      const pipe = this.state.pipesByName().get(name)?.[0];
       if (!pipe) return;
       untracked(() => {
         this.showPipe(pipe);
         this.focusHandled.emit();
       });
     });
-
-    this.destroyRef.onDestroy(() => {
-      this.unsubscribe?.();
-      clearTimeout(this.pendingTimer);
-      this.highlight(null);
-    });
   }
 
-  async refresh() {
-    const client = this.rpc();
-    if (!client) return;
-    this.loading.set(true);
-    this.loadFailed.set(false);
-    try {
-      const my = client.scope('pangular');
-      const pipes = (await my.rpc.call('get-pipes')) as PipeInfo[];
-      this.pipes.set(pipes);
-      const sel = this.selected();
-      if (sel) {
-        const refreshed = this.allPipes().find((p) => p.name === sel.name && p.file === sel.file);
-        this.selected.set(refreshed ?? null);
-      }
-    } catch {
-      this.loadFailed.set(true);
-    } finally {
-      this.loading.set(false);
-    }
-    this.loadLint(client);
+  refresh() {
+    return this.state.refresh();
   }
 
-  async loadLint(client: DevframeRpcClient) {
-    this.lintFailed.set(false);
-    try {
-      const findings = (await client.scope('pangular').rpc.call('pipe-lint')) as PipeLintFinding[];
-      this.lint.set(findings);
-    } catch {
-      this.lintFailed.set(true);
-    }
+  loadLint(client: DevframeRpcClient) {
+    return this.state.loadLint(client);
   }
 
-  async loadLive(client: DevframeRpcClient) {
-    try {
-      const state = await client.scope('pangular').rpc.sharedState('pipe-usage');
-      if (this.destroyRef.destroyed) return;
-      const apply = (value: unknown) => {
-        const snapshot = value as PipesSnapshot | undefined;
-        this.snapshot.set(snapshot);
-        // A runtime-only pipe has nothing left to show once the page stops using it.
-        const sel = this.selected();
-        if (sel?.runtime && !this.liveByName().has(sel.name)) this.selected.set(null);
-        const pages = snapshot?.instrumented ?? [];
-        this.instrumentedPages.set(pages);
-        if (this.pendingRecord() === pages.length > 0) this.settleRecord(null);
-      };
-      apply(state.value());
-      this.unsubscribe?.();
-      this.unsubscribe = state.on('updated', apply);
-    } catch {
-      // RPC not available
-    }
+  loadLive(client: DevframeRpcClient) {
+    return this.state.loadLive(client);
   }
 
-  private livePageId(): string | null {
-    return this.pageId() ?? hostPageId();
-  }
-
-  async toggleInstrument() {
-    const client = this.rpc();
-    if (!client || this.pendingRecord() !== null) return;
-    const on = !this.instrumenting();
-    this.recordMessage.set(null);
-    this.pendingRecord.set(on);
-    let result: { pages?: number } | undefined;
-    try {
-      // Start on this panel's page (or the latest page); stop every page that records.
-      const request = on ? { pageId: this.livePageId() ?? undefined, on } : { on };
-      result = (await client.scope('pangular').rpc.call('request-instrument-pipes', request)) as
-        { pages?: number } | undefined;
-    } catch {
-      this.settleRecord("Couldn't reach the devtools server. Try again.");
-      return;
-    }
-    if (this.pendingRecord() !== on) return;
-    if (result?.pages === 0) {
-      this.settleRecord(
-        'No page is connected. Open your app in the browser with the devtools running, then record again.',
-      );
-      return;
-    }
-    clearTimeout(this.pendingTimer);
-    this.pendingTimer = setTimeout(() => {
-      if (this.pendingRecord() !== on) return;
-      this.settleRecord(
-        on
-          ? 'No page confirmed recording. Reload the app and try again.'
-          : 'No page confirmed it stopped recording. Reload the app to stop it.',
-      );
-    }, RECORD_CONFIRM_MS);
-  }
-
-  private settleRecord(message: string | null) {
-    clearTimeout(this.pendingTimer);
-    this.pendingRecord.set(null);
-    if (message !== null) this.recordMessage.set(message);
+  toggleInstrument() {
+    return this.state.toggleInstrument();
   }
 
   sourceLabel(p: PipeInfo): string {
-    if (p.builtin) return '@angular/common';
-    if (p.runtime) return 'Seen on the page only';
-    return 'This project';
+    return sourceLabel(p);
   }
 
   liveFor(name: string): LivePipeInfo | undefined {
-    return this.liveByName().get(name);
+    return this.state.liveFor(name);
   }
 
   ms(value: number): string {
-    return `${value < 10 ? value.toFixed(2) : Math.round(value)} ms`;
+    return ms(value);
   }
 
   describe(value: unknown): string {
-    if (Array.isArray(value)) return value.map((v) => this.describe(v)).join(', ');
-    if (typeof value === 'string') return value.length > 80 ? `${value.slice(0, 80)}…` : value;
-    try {
-      const json = JSON.stringify(value);
-      return json && json.length > 120 ? `${json.slice(0, 120)}…` : (json ?? String(value));
-    } catch {
-      return String(value);
-    }
+    return describe(value);
   }
 
   isSelected(pipe: PipeInfo): boolean {
-    const sel = this.selected();
-    return sel !== null && sel.name === pipe.name && sel.file === pipe.file;
+    return this.state.isSelected(pipe);
   }
 
   select(pipe: PipeInfo) {
-    this.selected.set(this.isSelected(pipe) ? null : pipe);
+    this.state.select(pipe);
   }
 
-  /** The listed pipe a lint finding is about: the one declared in the finding's file, or else
-   * the first pipe with that name. Null when the pipe is not in the list. */
+  /** The listed pipe a lint finding is about, or null when the pipe is not in the list. */
   pipeFor(finding: PipeLintFinding): PipeInfo | null {
-    const matches = this.pipesByName().get(finding.pipe);
-    if (!matches?.length) return null;
-    return matches.find((p) => p.file === finding.file) ?? matches[0];
+    return this.state.pipeFor(finding);
   }
 
-  /** Selects a pipe from a lint finding, clearing only the filters that hide it, then scrolls
-   * its row into view and moves focus to the detail heading. */
+  /** Selects a pipe, clearing only the filters that hide it, then scrolls its row into view and
+   * moves focus to the detail heading. */
   showPipe(pipe: PipeInfo) {
-    if (!this.fitsQuery(pipe, this.filter())) this.filter.set('');
-    if (!this.fitsKind(pipe, this.kind() ?? 'all')) this.kind.set('all');
-    this.selected.set(pipe);
-    afterNextRender(
-      () => {
-        const host = this.host.nativeElement;
-        host.querySelector<HTMLElement>('.row.selected')?.scrollIntoView?.({ block: 'nearest' });
-        host.querySelector<HTMLElement>('#pipe-detail-title')?.focus();
-      },
-      { injector: this.injector },
-    );
-  }
-
-  private fitsKind(p: PipeInfo, kind: PipeKind): boolean {
-    if (kind === 'custom') return !p.builtin && !p.runtime;
-    if (kind === 'builtin') return !!p.builtin;
-    if (kind === 'runtime') return !!p.runtime;
-    if (kind === 'impure') return !p.isPure;
-    if (kind === 'live') return this.liveByName().has(p.name);
-    if (kind === 'called') return !!this.liveByName().get(p.name)?.call;
-    return true;
-  }
-
-  private fitsQuery(p: PipeInfo, filter: string): boolean {
-    const q = filter.trim().toLowerCase();
-    return (
-      !q ||
-      p.name.toLowerCase().includes(q) ||
-      p.className.toLowerCase().includes(q) ||
-      p.file.toLowerCase().includes(q)
-    );
+    this.state.showPipe(pipe);
   }
 
   clearFilters() {
@@ -1588,18 +152,10 @@ export class PipesInspector {
   }
 
   highlightPipe(live: LivePipeInfo | undefined) {
-    this.highlight(live?.components.find((c) => c.targets?.length)?.targets?.[0]);
+    this.state.highlightPipe(live);
   }
 
   highlight(target: PipeTarget | null | undefined, reveal = false) {
-    const client = this.rpc();
-    if (!client) return;
-    void client
-      .scope('pangular')
-      .rpc.call(
-        'request-page-highlight',
-        target ? { ...target, ...(reveal ? { reveal } : {}) } : null,
-      )
-      .catch(() => {});
+    this.state.highlight(target, reveal);
   }
 }
diff --git a/app/src/pages/pipes/pipe-async.html b/app/src/pages/pipes/pipe-async.html
new file mode 100644
index 00000000..1a552dd1
--- /dev/null
+++ b/app/src/pages/pipes/pipe-async.html
@@ -0,0 +1,41 @@
+<h2 id="async-title">
+  Async subscriptions <span class="pill">{{ async().length }}</span>
+</h2>
+<p class="hint">
+  Each <span class="mono">| async</span> subscribes on its own. Two on the same source mean the work
+  runs twice. A source that changes on every check, like
+  <span class="mono">getData() | async</span>, resubscribes each time.
+</p>
+@if (asyncTotal(); as total) {
+  <p class="hint">Showing {{ async().length }} of {{ total }} subscriptions.</p>
+}
+<ul class="async-list">
+  @for (a of async(); track $index) {
+    <li class="async-row" (mouseenter)="highlight(a.target)" (mouseleave)="highlight(null)">
+      @if (a.target; as target) {
+        <button
+          type="button"
+          class="component-name mono"
+          [attr.aria-label]="'Highlight ' + a.component + ' on the page'"
+          (click)="highlight(target)"
+          (focus)="highlight(target)"
+          (blur)="highlight(null)"
+        >
+          {{ a.component }}
+        </button>
+      } @else {
+        <span class="mono component-name">{{ a.component }}</span>
+      }
+      @if (!a.hasSource) {
+        <span class="chip">no source</span>
+      }
+      @if (a.duplicate) {
+        <span class="chip warn">possible duplicate subscription</span>
+      }
+      @if (a.resubscribing) {
+        <span class="chip warn">resubscribing</span>
+      }
+      <span class="mono value latest">{{ a.latestValue ?? 'no value yet' }}</span>
+    </li>
+  }
+</ul>
diff --git a/app/src/pages/pipes/pipe-async.scss b/app/src/pages/pipes/pipe-async.scss
new file mode 100644
index 00000000..57ce3126
--- /dev/null
+++ b/app/src/pages/pipes/pipe-async.scss
@@ -0,0 +1,10 @@
+@use 'pipes';
+
+@include pipes.mono;
+@include pipes.buttons;
+@include pipes.chips;
+@include pipes.value;
+@include pipes.notes;
+@include pipes.section-head;
+@include pipes.stacks;
+@include pipes.async-list;
diff --git a/app/src/pages/pipes/pipe-async.ts b/app/src/pages/pipes/pipe-async.ts
new file mode 100644
index 00000000..ef9a3e4d
--- /dev/null
+++ b/app/src/pages/pipes/pipe-async.ts
@@ -0,0 +1,19 @@
+import { Component, inject } from '@angular/core';
+import { PipesState } from './pipes-state';
+
+/** The `| async` subscriptions on the page, with possible duplicates and resubscribing sources. */
+@Component({
+  selector: 'section[appPipeAsync]',
+  templateUrl: './pipe-async.html',
+  styleUrl: './pipe-async.scss',
+})
+export class PipeAsync {
+  private readonly state = inject(PipesState);
+
+  protected readonly async = this.state.async;
+  protected readonly asyncTotal = this.state.asyncTotal;
+
+  protected highlight(...args: Parameters<PipesState['highlight']>) {
+    this.state.highlight(...args);
+  }
+}
diff --git a/app/src/pages/pipes/pipe-detail.html b/app/src/pages/pipes/pipe-detail.html
new file mode 100644
index 00000000..046cb334
--- /dev/null
+++ b/app/src/pages/pipes/pipe-detail.html
@@ -0,0 +1,203 @@
+@if (selected(); as p) {
+  <header class="detail-head">
+    <h2 id="pipe-detail-title" class="mono" tabindex="-1">{{ p.name }}</h2>
+    <span class="chip" [class.impure]="!p.isPure">{{ p.isPure ? 'pure' : 'impure' }}</span>
+    @if (p.builtin) {
+      <span class="chip">built-in</span>
+    }
+    @if (p.runtime) {
+      <span class="chip">runtime only</span>
+    }
+  </header>
+
+  <div class="block">
+    <h3>Declaration</h3>
+    <dl>
+      <dt>Class</dt>
+      <dd class="mono">{{ p.className }}</dd>
+      <dt>Source</dt>
+      <dd>{{ sourceLabel(p) }}</dd>
+      @if (!p.builtin && !p.runtime) {
+        <dt>File</dt>
+        <dd class="mono"><app-source-link [file]="p.file" [line]="p.line" /></dd>
+      }
+      @if (!p.runtime) {
+        <dt>Standalone</dt>
+        <dd>{{ p.isStandalone ? 'Yes' : 'No, declared in an NgModule' }}</dd>
+      }
+      <dt>Pure</dt>
+      <dd>
+        {{ p.isPure ? 'Yes, reruns only when an input changes' : 'No, reruns on every check' }}
+      </dd>
+    </dl>
+  </div>
+
+  @if (p.usages?.length) {
+    <div class="block">
+      <h3>
+        Used in templates <span class="pill">{{ p.usageCount }}</span>
+      </h3>
+      <ul class="sites">
+        @for (u of p.usages; track u.file + ':' + u.line) {
+          <li class="mono"><app-source-link [file]="u.file" [line]="u.line" /></li>
+        }
+      </ul>
+    </div>
+  }
+
+  <div class="block">
+    <h3>Live on the page</h3>
+    @if (liveFor(p.name); as live) {
+      @if (live.churn; as churn) {
+        <p class="warning" role="note">
+          <span class="chip warn">churning</span>
+          @if (live.isPure) {
+            An instance ran {{ churn.streak }} times in a row and returned an equal result each
+            time: its input changes reference while its contents stay the same. Keep the input
+            stable, for example in a computed().
+          } @else {
+            An instance returned an equal object or array as a new reference
+            {{ churn.streak }} times in a row, so the bindings that read it update for nothing.
+            Return the previous result when it is equal, or use a computed().
+          }
+        </p>
+      }
+      @if (live.stale) {
+        <p class="warning" role="note">
+          <span class="chip warn">experimental</span>
+          This pure pipe got an argument whose contents changed while its reference stayed the same,
+          so it may be showing a stale value.
+        </p>
+      }
+      <dl>
+        <dt>Instances</dt>
+        <dd>{{ live.instanceCount }}</dd>
+        <dt>Used by</dt>
+        <dd>
+          <ul class="chips">
+            @for (c of live.components; track c.name) {
+              <li>
+                @if (c.targets?.[0]; as target) {
+                  <button
+                    type="button"
+                    class="component"
+                    [attr.aria-label]="'Highlight ' + c.name + ' on the page'"
+                    (click)="highlight(target, true)"
+                    (mouseenter)="highlight(target)"
+                    (mouseleave)="highlight(null)"
+                    (focus)="highlight(target)"
+                    (blur)="highlight(null)"
+                  >
+                    <span class="mono">{{ c.name }}</span>
+                    <span class="count">{{ c.count }}</span>
+                  </button>
+                } @else {
+                  <span class="component">
+                    <span class="mono">{{ c.name }}</span>
+                    <span class="count">{{ c.count }}</span>
+                  </span>
+                }
+              </li>
+            }
+          </ul>
+        </dd>
+        @if (live.call; as call) {
+          <dt>Calls</dt>
+          <dd>{{ call.callCount }}</dd>
+          @if (call.totalMs !== undefined) {
+            <dt>Time</dt>
+            <dd>
+              {{ ms(call.totalMs) }} total, {{ ms(call.totalMs / call.callCount) }} average,
+              {{ ms(call.maxMs ?? 0) }} slowest
+            </dd>
+          }
+          @if (call.errorCount) {
+            <dt>Errors</dt>
+            <dd>
+              {{ call.errorCount }}
+              @if (call.lastError) {
+                <span class="mono value">{{ call.lastError }}</span>
+              }
+            </dd>
+          }
+          <dt>Last input</dt>
+          <dd class="mono value">{{ describe(call.lastArgs) }}</dd>
+          <dt>Last output</dt>
+          <dd class="mono value">{{ describe(call.lastResult) }}</dd>
+          @if (call.instances?.length) {
+            <dt>Per instance</dt>
+            <dd>
+              <ul class="sites">
+                @for (i of call.instances; track $index) {
+                  <li class="instance">
+                    @if (i.target; as target) {
+                      <button
+                        type="button"
+                        class="component"
+                        [attr.aria-label]="'Highlight ' + i.component + ' on the page'"
+                        (click)="highlight(target, true)"
+                        (mouseenter)="highlight(target)"
+                        (mouseleave)="highlight(null)"
+                        (focus)="highlight(target)"
+                        (blur)="highlight(null)"
+                      >
+                        <span class="mono">{{ i.component }}</span>
+                      </button>
+                    } @else {
+                      <span class="component">
+                        <span class="mono">{{ i.component }}</span>
+                      </span>
+                    }
+                    <span class="mono value">
+                      {{ describe(i.lastArgs) }} → {{ describe(i.lastResult) }}
+                      <span class="calls">{{ i.callCount }}×</span>
+                      @if (i.totalMs !== undefined) {
+                        <span class="calls">{{ ms(i.totalMs) }}</span>
+                      }
+                    </span>
+                    @if (i.lastCaller) {
+                      <span class="mono value caller">{{ i.lastCaller }}</span>
+                    }
+                  </li>
+                }
+              </ul>
+              @if (call.instanceTotal) {
+                <p class="hint">
+                  Showing {{ call.instances.length }} of {{ call.instanceTotal }} instances.
+                </p>
+              }
+            </dd>
+          }
+          @if (call.lastCaller) {
+            <dt>Last caller</dt>
+            <dd class="mono value">{{ call.lastCaller }}</dd>
+          }
+        } @else if (instrumenting()) {
+          <dt>Calls</dt>
+          <dd class="muted">None recorded yet.</dd>
+        }
+      </dl>
+      @if (live.staleCheck === 'unavailable') {
+        <p class="hint">
+          The stale check is off for this pipe: it couldn't read the compiled template, which
+          happens in minified builds.
+        </p>
+      }
+      @if (!live.call && !instrumenting()) {
+        <p class="hint">Turn on “Record calls” to see call counts and values.</p>
+      }
+    } @else {
+      <p class="empty-line">
+        Not in use on the connected page. Open a view that uses it, or connect the app.
+      </p>
+    }
+  </div>
+} @else {
+  <h2 id="pipe-detail-title" class="visually-hidden">Pipe details</h2>
+  <div class="state compact">
+    <p class="state-title">Pick a pipe</p>
+    <p class="state-hint">
+      See where it is declared, which components use it and what it last returned.
+    </p>
+  </div>
+}
diff --git a/app/src/pages/pipes/pipe-detail.scss b/app/src/pages/pipes/pipe-detail.scss
new file mode 100644
index 00000000..d121651a
--- /dev/null
+++ b/app/src/pages/pipes/pipe-detail.scss
@@ -0,0 +1,11 @@
+@use 'pipes';
+
+@include pipes.mono;
+@include pipes.buttons;
+@include pipes.chips;
+@include pipes.detail;
+@include pipes.value;
+@include pipes.detail-body;
+@include pipes.notes;
+@include pipes.states;
+@include pipes.state-text;
diff --git a/app/src/pages/pipes/pipe-detail.ts b/app/src/pages/pipes/pipe-detail.ts
new file mode 100644
index 00000000..70982597
--- /dev/null
+++ b/app/src/pages/pipes/pipe-detail.ts
@@ -0,0 +1,29 @@
+import { Component, inject } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { describe, ms, sourceLabel } from './pipes-model';
+import { PipesState } from './pipes-state';
+
+/** The detail panel of the Pipes page: the selected pipe's declaration, template uses and live
+ * data, or a prompt to pick one. */
+@Component({
+  selector: 'section[appPipeDetail]',
+  imports: [SourceLink],
+  templateUrl: './pipe-detail.html',
+  styleUrl: './pipe-detail.scss',
+})
+export class PipeDetail {
+  private readonly state = inject(PipesState);
+
+  protected readonly ms = ms;
+  protected readonly describe = describe;
+  protected readonly sourceLabel = sourceLabel;
+  protected readonly selected = this.state.selected;
+  protected readonly instrumenting = this.state.instrumenting;
+
+  protected liveFor(name: string) {
+    return this.state.liveFor(name);
+  }
+  protected highlight(...args: Parameters<PipesState['highlight']>) {
+    this.state.highlight(...args);
+  }
+}
diff --git a/app/src/pages/pipes/pipe-lint.html b/app/src/pages/pipes/pipe-lint.html
new file mode 100644
index 00000000..e3d3508a
--- /dev/null
+++ b/app/src/pages/pipes/pipe-lint.html
@@ -0,0 +1,37 @@
+<h2 id="lint-title">
+  Lint
+  @if (lint(); as findings) {
+    <span class="pill">{{ findings.length }}</span>
+  }
+</h2>
+@if (lintFailed()) {
+  <p class="empty-line" role="alert">Couldn't run the lint check. Try Refresh.</p>
+} @else if (lint() === null) {
+  <p class="empty-line" role="status">Checking…</p>
+} @else if (!lint()!.length) {
+  <p class="empty-line ok">No problems found.</p>
+} @else {
+  <ul class="findings">
+    @for (f of lint(); track $index) {
+      <li class="finding">
+        <div class="finding-head">
+          <span class="severity" [attr.data-tone]="f.severity">{{ f.severity }}</span>
+          <code class="mono rule">{{ f.rule }}</code>
+          @let target = pipeFor(f);
+          <span class="where mono">
+            @if (target) {
+              <button type="button" class="pipe-link" (click)="showPipe(target)">
+                <span class="sr-only">Show pipe </span>{{ f.pipe }}
+              </button>
+            } @else {
+              {{ f.pipe }}
+            }
+            · <app-source-link [file]="f.file" [line]="f.line" />
+          </span>
+        </div>
+        <p class="finding-message">{{ f.message }}</p>
+        <p class="finding-fix"><span class="fix-label">Fix</span> {{ f.fix }}</p>
+      </li>
+    }
+  </ul>
+}
diff --git a/app/src/pages/pipes/pipe-lint.scss b/app/src/pages/pipes/pipe-lint.scss
new file mode 100644
index 00000000..919c8806
--- /dev/null
+++ b/app/src/pages/pipes/pipe-lint.scss
@@ -0,0 +1,9 @@
+@use 'pipes';
+
+@include pipes.mono;
+@include pipes.buttons;
+@include pipes.chips;
+@include pipes.notes;
+@include pipes.section-head;
+@include pipes.stacks;
+@include pipes.lint-list;
diff --git a/app/src/pages/pipes/pipe-lint.ts b/app/src/pages/pipes/pipe-lint.ts
new file mode 100644
index 00000000..15bcc383
--- /dev/null
+++ b/app/src/pages/pipes/pipe-lint.ts
@@ -0,0 +1,24 @@
+import { Component, inject } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { PipesState } from './pipes-state';
+
+/** The pipe lint findings, each with a link to the pipe it is about when the pipe is listed. */
+@Component({
+  selector: 'section[appPipeLint]',
+  imports: [SourceLink],
+  templateUrl: './pipe-lint.html',
+  styleUrl: './pipe-lint.scss',
+})
+export class PipeLint {
+  private readonly state = inject(PipesState);
+
+  protected readonly lint = this.state.lint;
+  protected readonly lintFailed = this.state.lintFailed;
+
+  protected pipeFor(...args: Parameters<PipesState['pipeFor']>) {
+    return this.state.pipeFor(...args);
+  }
+  protected showPipe(...args: Parameters<PipesState['showPipe']>) {
+    this.state.showPipe(...args);
+  }
+}
diff --git a/app/src/pages/pipes/pipe-list.html b/app/src/pages/pipes/pipe-list.html
new file mode 100644
index 00000000..6d1cec9c
--- /dev/null
+++ b/app/src/pages/pipes/pipe-list.html
@@ -0,0 +1,78 @@
+@if (filtered().length) {
+  <ul class="pipe-list" aria-label="Pipes" appRovingList="[data-pipe-row]">
+    @for (p of filtered(); track p.file + p.name) {
+      @let live = liveFor(p.name);
+      <li>
+        <button
+          type="button"
+          class="row"
+          data-pipe-row
+          aria-controls="pipe-detail"
+          [attr.aria-current]="isSelected(p) || null"
+          [class.selected]="isSelected(p)"
+          (click)="select(p)"
+          (mouseenter)="highlightPipe(live)"
+          (mouseleave)="highlight(null)"
+          (focus)="highlightPipe(live)"
+          (blur)="highlight(null)"
+        >
+          <span class="row-main">
+            <span class="name mono">{{ p.name }}</span>
+            <span class="sub mono">{{ p.className }}</span>
+          </span>
+          <span class="row-meta">
+            @if (live?.churn) {
+              <span class="chip warn">churning</span>
+            }
+            @if (live?.stale) {
+              <span class="chip warn">stale?</span>
+            }
+            @if (live?.call; as call) {
+              <span class="chip hot">{{ plural(call.callCount, 'call') }}</span>
+              @if (call.totalMs !== undefined) {
+                <span class="chip hot">{{ ms(call.totalMs) }}</span>
+              }
+            }
+            @if (live) {
+              <span class="chip live">{{ live.instanceCount }} live</span>
+            }
+            @if (p.builtin) {
+              <span class="chip">built-in</span>
+            }
+            @if (p.runtime) {
+              <span class="chip">runtime only</span>
+            }
+            @if (!p.isStandalone) {
+              <span class="chip">NgModule</span>
+            }
+            <span class="chip" [class.impure]="!p.isPure">{{ p.isPure ? 'pure' : 'impure' }}</span>
+          </span>
+          <span class="row-file mono">
+            @if (p.runtime) {
+              <span class="no-source">No source location</span>
+            } @else {
+              {{ p.file }}:{{ p.line }}
+            }
+            @if (p.builtin && (p.usageCount ?? 0) > 1) {
+              <span class="more">+{{ (p.usageCount ?? 1) - 1 }} more</span>
+            } @else if (!p.builtin && p.usageCount) {
+              <span class="more">{{ p.usageCount }} {{ p.usageCount === 1 ? 'use' : 'uses' }}</span>
+            }
+          </span>
+        </button>
+      </li>
+    }
+  </ul>
+} @else {
+  <div class="state compact" role="status">
+    <p class="state-title">No pipes match</p>
+    <p class="state-hint">
+      @if (filter().trim()) {
+        Nothing matches “{{ filter().trim() }}” in this view.
+      } @else {
+        None of the pipes fit this filter.
+      }
+    </p>
+    <button type="button" (click)="clearFilters()">Clear filters</button>
+  </div>
+}
diff --git a/app/src/pages/pipes/pipe-list.scss b/app/src/pages/pipes/pipe-list.scss
new file mode 100644
index 00000000..c6173d71
--- /dev/null
+++ b/app/src/pages/pipes/pipe-list.scss
@@ -0,0 +1,12 @@
+@use 'mixins' as m;
+@use 'pipes';
+
+@include pipes.mono;
+@include pipes.buttons;
+@include pipes.pipe-list;
+@include pipes.chips;
+@include pipes.states;
+:host(.list-wrap) .state.compact {
+  @include m.panel;
+}
+@include pipes.state-text;
diff --git a/app/src/pages/pipes/pipe-list.ts b/app/src/pages/pipes/pipe-list.ts
new file mode 100644
index 00000000..a0899bc6
--- /dev/null
+++ b/app/src/pages/pipes/pipe-list.ts
@@ -0,0 +1,42 @@
+import { Component, inject, output } from '@angular/core';
+import { plural } from '../../format';
+import { RovingList } from '../../ui/roving-list';
+import { ms } from './pipes-model';
+import { PipesState } from './pipes-state';
+
+/** The pipe list of the Pipes page, or the no-match state when the filters hide every pipe. */
+@Component({
+  selector: 'div[appPipeList]',
+  imports: [RovingList],
+  templateUrl: './pipe-list.html',
+  styleUrl: './pipe-list.scss',
+})
+export class PipeList {
+  private readonly state = inject(PipesState);
+  /** Asks the page to clear the filters and focus the filter field. */
+  readonly clear = output<void>();
+
+  protected readonly plural = plural;
+  protected readonly ms = ms;
+  protected readonly filtered = this.state.filtered;
+  protected readonly filter = this.state.filter;
+
+  protected liveFor(name: string) {
+    return this.state.liveFor(name);
+  }
+  protected isSelected(...args: Parameters<PipesState['isSelected']>) {
+    return this.state.isSelected(...args);
+  }
+  protected select(...args: Parameters<PipesState['select']>) {
+    this.state.select(...args);
+  }
+  protected highlightPipe(...args: Parameters<PipesState['highlightPipe']>) {
+    this.state.highlightPipe(...args);
+  }
+  protected highlight(...args: Parameters<PipesState['highlight']>) {
+    this.state.highlight(...args);
+  }
+  protected clearFilters() {
+    this.clear.emit();
+  }
+}
diff --git a/app/src/pages/pipes/pipes-model.ts b/app/src/pages/pipes/pipes-model.ts
new file mode 100644
index 00000000..0b282662
--- /dev/null
+++ b/app/src/pages/pipes/pipes-model.ts
@@ -0,0 +1,159 @@
+import type { SelectOption } from '../../ui/select';
+
+export interface UsageSite {
+  file: string;
+  line: number;
+}
+
+export interface PipeInfo {
+  name: string;
+  className: string;
+  file: string;
+  line: number;
+  isStandalone: boolean;
+  isPure: boolean;
+  builtin?: boolean;
+  usageCount?: number;
+  usages?: UsageSite[];
+  /** Panel only: seen on the page but not found by the source scan, such as a pipe from a
+   * library. It has no source location, so `file` is empty and `line` is 0. */
+  runtime?: boolean;
+}
+
+export interface PipeTarget {
+  pageId: string;
+  id: string;
+}
+
+export interface PipeComponentUsage {
+  name: string;
+  count: number;
+  targets?: PipeTarget[];
+}
+
+export interface PipeCallTiming {
+  totalMs?: number;
+  maxMs?: number;
+  lastMs?: number;
+  errorCount?: number;
+  lastError?: string;
+}
+
+export interface PipeInstanceCall extends PipeCallTiming {
+  component: string;
+  callCount: number;
+  lastArgs?: unknown[];
+  lastResult?: unknown;
+  lastCaller?: string;
+  target?: PipeTarget;
+}
+
+export interface PipeCallInfo extends PipeCallTiming {
+  callCount: number;
+  instances?: PipeInstanceCall[];
+  instanceTotal?: number;
+  lastArgs?: unknown[];
+  lastResult?: unknown;
+  lastCaller?: string;
+}
+
+export interface StaleFinding {
+  detectedAt: number;
+}
+
+export interface ChurnFinding {
+  streak: number;
+  detectedAt: number;
+}
+
+export interface LivePipeInfo {
+  name: string;
+  className: string;
+  isPure: boolean;
+  instanceCount: number;
+  components: PipeComponentUsage[];
+  call?: PipeCallInfo;
+  stale?: StaleFinding;
+  churn?: ChurnFinding;
+  staleCheck?: 'unavailable';
+}
+
+export interface AsyncUsageInfo {
+  component: string;
+  hasSource: boolean;
+  latestValue?: string;
+  duplicate: boolean;
+  resubscribing?: boolean;
+  target?: PipeTarget;
+}
+
+export interface PipeLintFinding {
+  rule: string;
+  severity: 'error' | 'warning' | 'info';
+  pipe: string;
+  file: string;
+  line: number;
+  message: string;
+  fix: string;
+}
+
+export interface PipesPageSnapshot {
+  pageId: string;
+  pipes: LivePipeInfo[];
+  async: AsyncUsageInfo[];
+  asyncTotal?: number;
+}
+
+export interface PipesSnapshot {
+  pipes: LivePipeInfo[];
+  async: AsyncUsageInfo[];
+  asyncTotal?: number;
+  instrumented: string[];
+  pages?: PipesPageSnapshot[];
+}
+
+export const RECORD_CONFIRM_MS = 5000;
+
+export type PipeKind = 'all' | 'custom' | 'builtin' | 'runtime' | 'impure' | 'live' | 'called';
+
+export const KIND_OPTIONS: readonly SelectOption<PipeKind>[] = [
+  { value: 'all', label: 'All pipes' },
+  { value: 'custom', label: 'Custom' },
+  { value: 'builtin', label: 'Built-in' },
+  { value: 'runtime', label: 'Runtime only' },
+  { value: 'impure', label: 'Impure' },
+  { value: 'live', label: 'On the page' },
+  { value: 'called', label: 'Called while recording' },
+];
+
+export type PipeSort = 'source' | 'calls' | 'time';
+
+export const SORT_OPTIONS: readonly SelectOption<PipeSort>[] = [
+  { value: 'source', label: 'Source order' },
+  { value: 'calls', label: 'Most calls' },
+  { value: 'time', label: 'Most time' },
+];
+
+/** Where a pipe comes from, for the detail panel. */
+export function sourceLabel(p: PipeInfo): string {
+  if (p.builtin) return '@angular/common';
+  if (p.runtime) return 'Seen on the page only';
+  return 'This project';
+}
+
+/** A duration in milliseconds, with two decimals under 10 ms. */
+export function ms(value: number): string {
+  return `${value < 10 ? value.toFixed(2) : Math.round(value)} ms`;
+}
+
+/** A short text form of a recorded pipe input or output. */
+export function describe(value: unknown): string {
+  if (Array.isArray(value)) return value.map((v) => describe(v)).join(', ');
+  if (typeof value === 'string') return value.length > 80 ? `${value.slice(0, 80)}…` : value;
+  try {
+    const json = JSON.stringify(value);
+    return json && json.length > 120 ? `${json.slice(0, 120)}…` : (json ?? String(value));
+  } catch {
+    return String(value);
+  }
+}
diff --git a/app/src/pages/pipes/pipes-state.ts b/app/src/pages/pipes/pipes-state.ts
new file mode 100644
index 00000000..25de394e
--- /dev/null
+++ b/app/src/pages/pipes/pipes-state.ts
@@ -0,0 +1,305 @@
+import {
+  DestroyRef,
+  ElementRef,
+  Injectable,
+  Injector,
+  afterNextRender,
+  computed,
+  inject,
+  signal,
+  type Signal,
+} from '@angular/core';
+import type { DevframeRpcClient } from 'devframe/client';
+import { hostPageId } from '../../page-id';
+import {
+  RECORD_CONFIRM_MS,
+  type AsyncUsageInfo,
+  type LivePipeInfo,
+  type PipeInfo,
+  type PipeKind,
+  type PipeLintFinding,
+  type PipeSort,
+  type PipeTarget,
+  type PipesSnapshot,
+} from './pipes-model';
+
+/**
+ * The state the Pipes page and its sections share: the source scan, the lint findings, the
+ * `pipe-usage` shared state, the filters, the selected pipe and call recording. Provided by the
+ * page, so every section of one page reads the same signals.
+ */
+@Injectable()
+export class PipesState {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly injector = inject(Injector);
+
+  private rpcSource: Signal<DevframeRpcClient | null> = signal(null);
+  readonly rpc = computed(() => this.rpcSource());
+  private pageIdSource: Signal<string | null> = signal(null);
+
+  readonly pipes = signal<PipeInfo[]>([]);
+  readonly filter = signal('');
+  readonly kind = signal<PipeKind | null>('all');
+  readonly sort = signal<PipeSort | null>('source');
+  readonly loading = signal(false);
+  readonly loadFailed = signal(false);
+  readonly selected = signal<PipeInfo | null>(null);
+
+  private readonly snapshot = signal<PipesSnapshot | undefined>(undefined);
+  /** The live data of the page this tab shows, or every page merged. */
+  private readonly shown = computed(() => {
+    const snapshot = this.snapshot();
+    // With several tabs reporting, show the one asked for or the one this panel belongs to.
+    const pageId = this.livePageId();
+    const own = pageId ? snapshot?.pages?.find((page) => page.pageId === pageId) : undefined;
+    return own ?? snapshot;
+  });
+  readonly live = computed<LivePipeInfo[]>(() => this.shown()?.pipes ?? []);
+  readonly async = computed<AsyncUsageInfo[]>(() => this.shown()?.async ?? []);
+  /** Every `| async` usage, set only when the list was cut short. */
+  readonly asyncTotal = computed(() => this.shown()?.asyncTotal);
+  readonly lint = signal<PipeLintFinding[] | null>(null);
+  readonly lintFailed = signal(false);
+  readonly instrumentedPages = signal<string[]>([]);
+  readonly instrumenting = computed(() => this.instrumentedPages().length > 0);
+  readonly pendingRecord = signal<boolean | null>(null);
+  readonly recordMessage = signal<string | null>(null);
+  readonly recordLabel = computed(() => {
+    const pending = this.pendingRecord();
+    if (pending !== null) return pending ? 'Starting…' : 'Stopping…';
+    return this.instrumenting() ? 'Stop recording' : 'Record calls';
+  });
+  private pendingTimer?: ReturnType<typeof setTimeout>;
+
+  private readonly liveByName = computed(() => new Map(this.live().map((p) => [p.name, p])));
+
+  /** The source scan plus the pipes seen only on the page, such as library pipes. */
+  readonly allPipes = computed<PipeInfo[]>(() => {
+    const pipes = this.pipes();
+    const scanned = new Set(pipes.map((p) => p.name));
+    const runtime: PipeInfo[] = this.live()
+      .filter((p) => !scanned.has(p.name))
+      .map((p) => ({
+        name: p.name,
+        className: p.className,
+        file: '',
+        line: 0,
+        isStandalone: true,
+        isPure: p.isPure,
+        runtime: true,
+      }));
+    return runtime.length ? [...pipes, ...runtime] : pipes;
+  });
+
+  readonly filtered = computed(() => {
+    const q = this.filter();
+    const kind = this.kind() ?? 'all';
+    const shown = this.allPipes().filter((p) => this.fitsKind(p, kind) && this.fitsQuery(p, q));
+    const sort = this.sort() ?? 'source';
+    if (sort === 'source') return shown;
+    // Hottest first; pipes with no recorded calls keep source order at the end.
+    const weight = (p: PipeInfo) => {
+      const call = this.liveFor(p.name)?.call;
+      if (!call) return -1;
+      return sort === 'calls' ? call.callCount : (call.totalMs ?? 0);
+    };
+    return shown
+      .map((p, index) => ({ p, index, weight: weight(p) }))
+      .sort((a, b) => b.weight - a.weight || a.index - b.index)
+      .map(({ p }) => p);
+  });
+
+  readonly pipesByName = computed(() => {
+    const byName = new Map<string, PipeInfo[]>();
+    for (const p of this.allPipes()) byName.set(p.name, [...(byName.get(p.name) ?? []), p]);
+    return byName;
+  });
+
+  private unsubscribe?: () => void;
+
+  constructor() {
+    this.destroyRef.onDestroy(() => {
+      this.unsubscribe?.();
+      clearTimeout(this.pendingTimer);
+      this.highlight(null);
+    });
+  }
+
+  /** Reads the client and the page to show from the page's inputs. */
+  connect(rpc: Signal<DevframeRpcClient | null>, pageId: Signal<string | null>) {
+    this.rpcSource = rpc;
+    this.pageIdSource = pageId;
+  }
+
+  async refresh() {
+    const client = this.rpc();
+    if (!client) return;
+    this.loading.set(true);
+    this.loadFailed.set(false);
+    try {
+      const my = client.scope('pangular');
+      const pipes = (await my.rpc.call('get-pipes')) as PipeInfo[];
+      this.pipes.set(pipes);
+      const sel = this.selected();
+      if (sel) {
+        const refreshed = this.allPipes().find((p) => p.name === sel.name && p.file === sel.file);
+        this.selected.set(refreshed ?? null);
+      }
+    } catch {
+      this.loadFailed.set(true);
+    } finally {
+      this.loading.set(false);
+    }
+    this.loadLint(client);
+  }
+
+  async loadLint(client: DevframeRpcClient) {
+    this.lintFailed.set(false);
+    try {
+      const findings = (await client.scope('pangular').rpc.call('pipe-lint')) as PipeLintFinding[];
+      this.lint.set(findings);
+    } catch {
+      this.lintFailed.set(true);
+    }
+  }
+
+  async loadLive(client: DevframeRpcClient) {
+    try {
+      const state = await client.scope('pangular').rpc.sharedState('pipe-usage');
+      if (this.destroyRef.destroyed) return;
+      const apply = (value: unknown) => {
+        const snapshot = value as PipesSnapshot | undefined;
+        this.snapshot.set(snapshot);
+        // A runtime-only pipe has nothing left to show once the page stops using it.
+        const sel = this.selected();
+        if (sel?.runtime && !this.liveByName().has(sel.name)) this.selected.set(null);
+        const pages = snapshot?.instrumented ?? [];
+        this.instrumentedPages.set(pages);
+        if (this.pendingRecord() === pages.length > 0) this.settleRecord(null);
+      };
+      apply(state.value());
+      this.unsubscribe?.();
+      this.unsubscribe = state.on('updated', apply);
+    } catch {
+      // RPC not available
+    }
+  }
+
+  private livePageId(): string | null {
+    return this.pageIdSource() ?? hostPageId();
+  }
+
+  async toggleInstrument() {
+    const client = this.rpc();
+    if (!client || this.pendingRecord() !== null) return;
+    const on = !this.instrumenting();
+    this.recordMessage.set(null);
+    this.pendingRecord.set(on);
+    let result: { pages?: number } | undefined;
+    try {
+      // Start on this panel's page (or the latest page); stop every page that records.
+      const request = on ? { pageId: this.livePageId() ?? undefined, on } : { on };
+      result = (await client.scope('pangular').rpc.call('request-instrument-pipes', request)) as
+        { pages?: number } | undefined;
+    } catch {
+      this.settleRecord("Couldn't reach the devtools server. Try again.");
+      return;
+    }
+    if (this.pendingRecord() !== on) return;
+    if (result?.pages === 0) {
+      this.settleRecord(
+        'No page is connected. Open your app in the browser with the devtools running, then record again.',
+      );
+      return;
+    }
+    clearTimeout(this.pendingTimer);
+    this.pendingTimer = setTimeout(() => {
+      if (this.pendingRecord() !== on) return;
+      this.settleRecord(
+        on
+          ? 'No page confirmed recording. Reload the app and try again.'
+          : 'No page confirmed it stopped recording. Reload the app to stop it.',
+      );
+    }, RECORD_CONFIRM_MS);
+  }
+
+  private settleRecord(message: string | null) {
+    clearTimeout(this.pendingTimer);
+    this.pendingRecord.set(null);
+    if (message !== null) this.recordMessage.set(message);
+  }
+
+  liveFor(name: string): LivePipeInfo | undefined {
+    return this.liveByName().get(name);
+  }
+
+  isSelected(pipe: PipeInfo): boolean {
+    const sel = this.selected();
+    return sel !== null && sel.name === pipe.name && sel.file === pipe.file;
+  }
+
+  select(pipe: PipeInfo) {
+    this.selected.set(this.isSelected(pipe) ? null : pipe);
+  }
+
+  /** The listed pipe a lint finding is about: the one declared in the finding's file, or else
+   * the first pipe with that name. Null when the pipe is not in the list. */
+  pipeFor(finding: PipeLintFinding): PipeInfo | null {
+    const matches = this.pipesByName().get(finding.pipe);
+    if (!matches?.length) return null;
+    return matches.find((p) => p.file === finding.file) ?? matches[0];
+  }
+
+  /** Selects a pipe from a lint finding, clearing only the filters that hide it, then scrolls
+   * its row into view and moves focus to the detail heading. */
+  showPipe(pipe: PipeInfo) {
+    if (!this.fitsQuery(pipe, this.filter())) this.filter.set('');
+    if (!this.fitsKind(pipe, this.kind() ?? 'all')) this.kind.set('all');
+    this.selected.set(pipe);
+    afterNextRender(
+      () => {
+        const host = this.host.nativeElement;
+        host.querySelector<HTMLElement>('.row.selected')?.scrollIntoView?.({ block: 'nearest' });
+        host.querySelector<HTMLElement>('#pipe-detail-title')?.focus();
+      },
+      { injector: this.injector },
+    );
+  }
+
+  private fitsKind(p: PipeInfo, kind: PipeKind): boolean {
+    if (kind === 'custom') return !p.builtin && !p.runtime;
+    if (kind === 'builtin') return !!p.builtin;
+    if (kind === 'runtime') return !!p.runtime;
+    if (kind === 'impure') return !p.isPure;
+    if (kind === 'live') return this.liveByName().has(p.name);
+    if (kind === 'called') return !!this.liveByName().get(p.name)?.call;
+    return true;
+  }
+
+  private fitsQuery(p: PipeInfo, filter: string): boolean {
+    const q = filter.trim().toLowerCase();
+    return (
+      !q ||
+      p.name.toLowerCase().includes(q) ||
+      p.className.toLowerCase().includes(q) ||
+      p.file.toLowerCase().includes(q)
+    );
+  }
+
+  highlightPipe(live: LivePipeInfo | undefined) {
+    this.highlight(live?.components.find((c) => c.targets?.length)?.targets?.[0]);
+  }
+
+  highlight(target: PipeTarget | null | undefined, reveal = false) {
+    const client = this.rpc();
+    if (!client) return;
+    void client
+      .scope('pangular')
+      .rpc.call(
+        'request-page-highlight',
+        target ? { ...target, ...(reveal ? { reveal } : {}) } : null,
+      )
+      .catch(() => {});
+  }
+}
diff --git a/app/src/pages/signal-inspector.html b/app/src/pages/signal-inspector.html
new file mode 100644
index 00000000..98b3afd7
--- /dev/null
+++ b/app/src/pages/signal-inspector.html
@@ -0,0 +1,176 @@
+<div class="toolbar">
+  <app-search-field
+    #filterInput
+    placeholder="Filter by name or kind"
+    saveKey="signals"
+    [(value)]="filter"
+  />
+  @if (pageOptions().length > 1) {
+    <div class="picker page-picker">
+      <span class="label-key" id="signals-page-label">Page</span>
+      <app-select
+        labelledBy="signals-page-label"
+        [options]="pageOptions()"
+        [value]="shownPageId()"
+        (valueChange)="selectPage($event)"
+      />
+    </div>
+  }
+  @if (componentOptions().length) {
+    <div class="picker">
+      <span class="label-key" id="signals-component-label">Graph of</span>
+      <app-select
+        labelledBy="signals-component-label"
+        [options]="componentOptions()"
+        [value]="pickerValue()"
+        (valueChange)="pickComponent($event)"
+      />
+    </div>
+  }
+</div>
+<p class="sr-only" role="status">{{ announcement() }}</p>
+
+@if (graph()?.component; as comp) {
+  <p class="showing">
+    <span class="showing-name">{{ comp.name }}</span>
+    <span class="mono">{{ comp.path }}</span>
+    @if (graph()!.source) {
+      <span class="source-note">{{ sourceNote(graph()!.source!) }}</span>
+    }
+  </p>
+} @else if (graph()?.injector; as injector) {
+  <p class="showing">
+    <span class="showing-name">{{ injectorLabel(injector) }}</span>
+    <span class="source-note">environment injector</span>
+  </p>
+} @else if (graph()?.element; as element) {
+  <p class="showing">
+    <span class="showing-name">{{ element.directives.join(', ') || '<' + element.tag + '>' }}</span>
+    <span class="mono">&lt;{{ element.tag }}&gt;</span>
+    <span class="source-note">directives, no component</span>
+  </p>
+}
+@if (graph() && picked() && graph()!.source !== 'selected') {
+  <p class="fallback" role="status">
+    The picked component or injector is gone or has no signal graph, so this shows another one.
+  </p>
+}
+
+<p class="intro">
+  @if (graph()?.injector) {
+    The effects registered on this injector and the signals they read. A signal that no effect reads
+    is not part of the graph. Pick a kind to filter.
+  } @else if (graph()) {
+    The live signal graph of one component. Only signals that its template or an effect has read
+    appear here; a signal nothing has read yet is not part of the graph. Pick a kind to filter.
+  } @else if (!graphKnown()) {
+    Loading the live signal graph…
+  } @else {
+    Every signal, computed and effect found in your source. Pick a kind to filter.
+  }
+</p>
+@if (!graph()) {
+  <app-angular-unavailable
+    [page]="angularPage()"
+    capability="signalGraph"
+    [missing]="unsupported()"
+    compact
+  >
+    This list comes from a source scan.
+  </app-angular-unavailable>
+}
+@if (graph()?.writeHook === false) {
+  <p class="fallback" role="status">
+    The signal write hook did not load. Value history shows sampled values only, with no exact set
+    entries.
+  </p>
+}
+@if (graph()?.nodeCount; as total) {
+  <p class="fallback" role="status">
+    Showing {{ graph()!.nodes.length }} of {{ total }} signals. The rest and their edges are left
+    out.
+  </p>
+}
+@if (kindChips().length) {
+  <div class="kinds" role="group" aria-label="Filter by kind">
+    <button
+      type="button"
+      class="kind-chip"
+      [class.active]="!kind()"
+      [attr.aria-pressed]="!kind()"
+      (click)="kind.set(null)"
+    >
+      All <span class="count">{{ kindTotal() }}</span>
+    </button>
+    @for (group of kindChips(); track group.kind) {
+      <button
+        type="button"
+        class="kind-chip"
+        [class.active]="kind() === group.kind"
+        [attr.aria-pressed]="kind() === group.kind"
+        (click)="kind.set(kind() === group.kind ? null : group.kind)"
+      >
+        <span class="dot" aria-hidden="true" [style.background]="kindColor(group.kind)"></span>
+        <span class="chip-text">{{ group.kind }}</span>
+        <span class="count">{{ group.count }}</span>
+      </button>
+    }
+  </div>
+}
+
+@if (!graph() && !sourceLoaded()) {
+  <div class="empty" role="status">
+    <span class="spinner" aria-hidden="true"></span>
+    <p class="empty-title">Scanning source for signals…</p>
+  </div>
+}
+
+@if (!graph() && sourceLoaded() && loadFailed()) {
+  <div class="empty" [class.compact]="sourceSignals().length > 0" role="alert">
+    <p class="empty-title">Couldn't load signals</p>
+    <p class="hint">
+      The devtools server did not answer. Check that it is still running, then retry.
+    </p>
+    <button type="button" class="reset" [attr.aria-disabled]="retrying() || null" (click)="retry()">
+      {{ retrying() ? 'Retrying…' : 'Retry' }}
+    </button>
+  </div>
+} @else if (!graph() && sourceLoaded() && sourceSignals().length === 0) {
+  <div class="empty">
+    <p class="empty-title">No signals found.</p>
+    <p class="hint">
+      No <code>signal()</code>, <code>computed()</code> or <code>effect()</code> calls were found in
+      your source. To see the live graph, run Angular 20.1 or later with the overlay connected and
+      select a component.
+    </p>
+  </div>
+}
+
+@if (!graph() && sourceSignals().length > 0) {
+  <p class="source-label">Signals from the source scan:</p>
+  <div class="nodes" appSourceSignals></div>
+}
+
+@if (graph() && (visibleNodes().length || frameworkCount())) {
+  <section
+    appSignalGraphSection
+    class="graph-section"
+    aria-labelledby="signal-graph-heading"
+  ></section>
+}
+
+@if (watchedNodes().length || watchedElsewhere()) {
+  <section appWatchedSignals class="watched" aria-labelledby="signal-watched-heading"></section>
+}
+
+<p class="jump-note" role="status">{{ jumpNote() }}</p>
+
+@if (graph() && filteredResources().length) {
+  <h2 class="list-heading">Resources</h2>
+  <ul class="nodes resources" role="list" appResourceList></ul>
+}
+
+@if (graph() && (visibleNodes().length || !filteredResources().length)) {
+  <h2 class="list-heading">Signals</h2>
+  <ul class="nodes" role="list" appRovingList="button.node-card" appSignalList></ul>
+}
diff --git a/app/src/pages/signal-inspector.scss b/app/src/pages/signal-inspector.scss
new file mode 100644
index 00000000..481b8f5c
--- /dev/null
+++ b/app/src/pages/signal-inspector.scss
@@ -0,0 +1,198 @@
+@use 'mixins' as m;
+@use 'signals' as sig;
+
+:host {
+  display: block;
+  min-width: 0;
+  color: var(--text);
+  font-size: 13px;
+}
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  background: color-mix(in srgb, var(--surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+input {
+  flex: 1 1 200px;
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  background: var(--bg);
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+  transition:
+    border-color 0.15s var(--ease),
+    box-shadow 0.15s var(--ease);
+}
+input::placeholder {
+  color: var(--text-3);
+}
+input:hover {
+  border-color: color-mix(in srgb, var(--text-3) 60%, var(--control-border));
+}
+input:focus-visible {
+  @include m.field-focus;
+}
+@include sig.states;
+.intro {
+  margin: 0 0 12px;
+  color: var(--text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.kinds {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+.kind-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--control-border);
+  border-radius: 99px;
+  background: var(--surface-2);
+  color: var(--text-2);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s var(--ease),
+    border-color 0.15s var(--ease),
+    color 0.15s var(--ease);
+}
+.kind-chip:hover {
+  border-color: var(--text-3);
+  background: var(--surface-3);
+  color: var(--text);
+}
+.kind-chip:active {
+  transform: translateY(0.5px);
+}
+.kind-chip.active {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+  color: var(--text-strong);
+}
+.kind-chip:focus-visible {
+  @include m.focus-ring;
+}
+.chip-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kind-chip .count {
+  flex: none;
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 11px;
+  line-height: 16px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.kind-chip.active .count {
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  color: var(--text-strong);
+}
+.dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.picker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 260px;
+  min-width: 0;
+}
+.picker app-select {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.page-picker {
+  flex: 0 1 240px;
+}
+.label-key {
+  flex: none;
+  color: var(--text-2);
+  font-size: 12px;
+}
+.showing {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--text-2);
+}
+.showing-name {
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 600;
+}
+.mono {
+  font-family: var(--font-mono);
+  overflow-wrap: anywhere;
+}
+.source-note {
+  padding: 0 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: 99px;
+  line-height: 18px;
+}
+.fallback {
+  margin: 0 0 8px;
+  color: var(--warn);
+  font-size: 12px;
+}
+.source-label {
+  @include m.label;
+  margin: 0 0 12px;
+}
+@include sig.list-heading;
+.jump-note {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-2);
+}
+.jump-note:not(:empty) {
+  margin-bottom: 8px;
+}
+@media (max-width: 480px) {
+  .toolbar {
+    padding: 8px;
+  }
+  .toolbar input,
+  .picker {
+    flex-basis: 100%;
+  }
+}
diff --git a/app/src/pages/signal-inspector.ts b/app/src/pages/signal-inspector.ts
index 926ae0c8..dc7621a7 100644
--- a/app/src/pages/signal-inspector.ts
+++ b/app/src/pages/signal-inspector.ts
@@ -1,2513 +1,149 @@
-import {
-  Component,
-  DestroyRef,
-  ElementRef,
-  Injector,
-  afterNextRender,
-  computed,
-  effect,
-  inject,
-  input,
-  linkedSignal,
-  signal,
-  untracked,
-  viewChild,
-} from '@angular/core';
-import { DatePipe, JsonPipe, NgTemplateOutlet } from '@angular/common';
+import { Component, DestroyRef, effect, inject, input, untracked, viewChild } from '@angular/core';
 import type { DevframeRpcClient } from 'devframe/client';
-import { pickPage, type ReportedPage } from '../live-pages';
-import { actionAllowed, actionBlockedMessage } from '../devtools-config';
-import { isNativePage } from '../native-page';
-import { isStaticReport } from '../rpc';
-import { hostPageId } from '../page-id';
-import { angularPageFor, injectAngularPages } from '../angular-pages';
 import { AngularUnavailable } from '../ui/angular-unavailable';
 import { RovingList } from '../ui/roving-list';
-import { Select, type SelectOption } from '../ui/select';
-import { SourceLink } from '../ui/source-link';
-import type { GraphLink } from './signal-graph-layout';
-import type { SignalFocus } from '../types/signal-focus.types';
-import { SignalGraphView } from './signal-graph-view';
+import { Select } from '../ui/select';
 import { SearchField } from '../ui/search-field';
-import { jsonDiff, type JsonDiffEntry } from './json-diff';
-import type { GraphInjector, SignalGraph, SignalResource } from '../types/signal-graph.types';
-import type { SignalChange, SignalGraphNode } from '@pangular-inspector/devtools/internal/types';
-
-type SignalNode = SignalGraphNode;
-
-interface RestoreResult {
-  ok?: boolean;
-  key?: string;
-  error?: string;
-}
-
-interface LiveNode {
-  id: string;
-  name: string;
-  tag: string;
-  /** `directive` for an element that hosts directives but no component. */
-  kind?: 'directive';
-  children: LiveNode[];
-}
-
-const FOLLOW = 'follow';
-
-// Older servers send only the newest graph, without the per-page map.
-function graphPagesOf(state: {
-  graph?: SignalGraph | null;
-  pages: Record<string, SignalGraph>;
-}): Record<string, SignalGraph> {
-  if (Object.keys(state.pages).length) return state.pages;
-  return state.graph ? { [state.graph.pageId ?? '']: state.graph } : {};
-}
-const ENV = 'env:';
-const MAX_HISTORY = 50;
-/** Kinds with a value, so the page can watch them. */
-const WATCHABLE = new Set(['signal', 'computed', 'linkedSignal']);
-/** Changes of watched signals the panel lists. */
-const WATCH_LOG = 20;
-
-const SOURCE_NOTES: Record<NonNullable<SignalGraph['source']>, string> = {
-  selected: 'picked',
-  routed: 'rendered by the router',
-  root: 'first component with signals',
-};
-
-const SOURCE_LABELS: Record<SignalChange['source'], string> = {
-  write: 'set',
-  sample: 'sampled',
-  initial: 'initial',
-};
-
-const RESOURCE_STATUS_TONES: Record<string, string> = {
-  resolved: 'ok',
-  local: 'ok',
-  loading: 'warn',
-  reloading: 'warn',
-  error: 'danger',
-};
-
-interface SourceSignal {
-  name: string;
-  kind: string;
-  file: string;
-  line: number;
-  component?: string;
-}
-
-/** Each kind's `--kind-*` token from `_palette.scss` (`$signal-kinds`). */
-const KIND_TOKENS: Record<string, string> = {
-  signal: 'signal',
-  computed: 'computed',
-  linkedSignal: 'linked',
-  effect: 'effect',
-  template: 'template',
-  afterRenderEffectPhase: 'after-render',
-  childSignalProp: 'child-prop',
-  'input (signal)': 'input',
-  'input.required (signal)': 'input',
-  'output (signal)': 'output',
-  'model (signal)': 'model',
-  'model.required (signal)': 'model',
-  'viewChild (signal)': 'view-query',
-  'viewChild.required (signal)': 'view-query',
-  'viewChildren (signal)': 'view-query',
-  'contentChild (signal)': 'content-query',
-  'contentChild.required (signal)': 'content-query',
-  'contentChildren (signal)': 'content-query',
-  resource: 'resource',
-};
-
+import type { SignalFocus } from '../types/signal-focus.types';
+import type { GraphInjector } from '../types/signal-graph.types';
+import { ResourceList } from './signals/resource-list';
+import { SignalDetailState } from './signals/signal-detail-state';
+import { SignalGraphSection } from './signals/signal-graph-section';
+import { SignalList } from './signals/signal-list';
+import { kindColor, sourceNote, type SignalNode } from './signals/signal-model';
+import { SignalState } from './signals/signal-state';
+import { SourceSignals } from './signals/source-signals';
+import { WatchedSignals } from './signals/watched-signals';
+
+/**
+ * The Signals page: the toolbar, the notes on what the graph shows, the kind chips and the load
+ * states, and one section per part of the graph. The sections live in `./signals/` and share the
+ * page's {@link SignalState} and {@link SignalDetailState}; the page keeps the members its tests
+ * and the shell read on itself.
+ */
 @Component({
   selector: 'app-signal-inspector',
   imports: [
-    SearchField,
     AngularUnavailable,
-    DatePipe,
-    JsonPipe,
-    NgTemplateOutlet,
+    ResourceList,
     RovingList,
+    SearchField,
     Select,
-    SignalGraphView,
-    SourceLink,
+    SignalGraphSection,
+    SignalList,
+    SourceSignals,
+    WatchedSignals,
   ],
-  template: `
-    <div class="toolbar">
-      <app-search-field
-        #filterInput
-        placeholder="Filter by name or kind"
-        saveKey="signals"
-        [(value)]="filter"
-      />
-      @if (pageOptions().length > 1) {
-        <div class="picker page-picker">
-          <span class="label-key" id="signals-page-label">Page</span>
-          <app-select
-            labelledBy="signals-page-label"
-            [options]="pageOptions()"
-            [value]="shownPageId()"
-            (valueChange)="selectPage($event)"
-          />
-        </div>
-      }
-      @if (componentOptions().length) {
-        <div class="picker">
-          <span class="label-key" id="signals-component-label">Graph of</span>
-          <app-select
-            labelledBy="signals-component-label"
-            [options]="componentOptions()"
-            [value]="pickerValue()"
-            (valueChange)="pickComponent($event)"
-          />
-        </div>
-      }
-    </div>
-    <p class="sr-only" role="status">{{ announcement() }}</p>
-
-    @if (graph()?.component; as comp) {
-      <p class="showing">
-        <span class="showing-name">{{ comp.name }}</span>
-        <span class="mono">{{ comp.path }}</span>
-        @if (graph()!.source) {
-          <span class="source-note">{{ sourceNote(graph()!.source!) }}</span>
-        }
-      </p>
-    } @else if (graph()?.injector; as injector) {
-      <p class="showing">
-        <span class="showing-name">{{ injectorLabel(injector) }}</span>
-        <span class="source-note">environment injector</span>
-      </p>
-    } @else if (graph()?.element; as element) {
-      <p class="showing">
-        <span class="showing-name">{{
-          element.directives.join(', ') || '<' + element.tag + '>'
-        }}</span>
-        <span class="mono">&lt;{{ element.tag }}&gt;</span>
-        <span class="source-note">directives, no component</span>
-      </p>
-    }
-    @if (graph() && picked() && graph()!.source !== 'selected') {
-      <p class="fallback" role="status">
-        The picked component or injector is gone or has no signal graph, so this shows another one.
-      </p>
-    }
-
-    <p class="intro">
-      @if (graph()?.injector) {
-        The effects registered on this injector and the signals they read. A signal that no effect
-        reads is not part of the graph. Pick a kind to filter.
-      } @else if (graph()) {
-        The live signal graph of one component. Only signals that its template or an effect has read
-        appear here; a signal nothing has read yet is not part of the graph. Pick a kind to filter.
-      } @else if (!graphKnown()) {
-        Loading the live signal graph…
-      } @else {
-        Every signal, computed and effect found in your source. Pick a kind to filter.
-      }
-    </p>
-    @if (!graph()) {
-      <app-angular-unavailable
-        [page]="angularPage()"
-        capability="signalGraph"
-        [missing]="unsupported()"
-        compact
-      >
-        This list comes from a source scan.
-      </app-angular-unavailable>
-    }
-    @if (graph()?.writeHook === false) {
-      <p class="fallback" role="status">
-        The signal write hook did not load. Value history shows sampled values only, with no exact
-        set entries.
-      </p>
-    }
-    @if (graph()?.nodeCount; as total) {
-      <p class="fallback" role="status">
-        Showing {{ graph()!.nodes.length }} of {{ total }} signals. The rest and their edges are
-        left out.
-      </p>
-    }
-    @if (kindChips().length) {
-      <div class="kinds" role="group" aria-label="Filter by kind">
-        <button
-          type="button"
-          class="kind-chip"
-          [class.active]="!kind()"
-          [attr.aria-pressed]="!kind()"
-          (click)="kind.set(null)"
-        >
-          All <span class="count">{{ kindTotal() }}</span>
-        </button>
-        @for (group of kindChips(); track group.kind) {
-          <button
-            type="button"
-            class="kind-chip"
-            [class.active]="kind() === group.kind"
-            [attr.aria-pressed]="kind() === group.kind"
-            (click)="kind.set(kind() === group.kind ? null : group.kind)"
-          >
-            <span class="dot" aria-hidden="true" [style.background]="kindColor(group.kind)"></span>
-            <span class="chip-text">{{ group.kind }}</span>
-            <span class="count">{{ group.count }}</span>
-          </button>
-        }
-      </div>
-    }
-
-    @if (!graph() && !sourceLoaded()) {
-      <div class="empty" role="status">
-        <span class="spinner" aria-hidden="true"></span>
-        <p class="empty-title">Scanning source for signals…</p>
-      </div>
-    }
-
-    @if (!graph() && sourceLoaded() && loadFailed()) {
-      <div class="empty" [class.compact]="sourceSignals().length > 0" role="alert">
-        <p class="empty-title">Couldn't load signals</p>
-        <p class="hint">
-          The devtools server did not answer. Check that it is still running, then retry.
-        </p>
-        <button
-          type="button"
-          class="reset"
-          [attr.aria-disabled]="retrying() || null"
-          (click)="retry()"
-        >
-          {{ retrying() ? 'Retrying…' : 'Retry' }}
-        </button>
-      </div>
-    } @else if (!graph() && sourceLoaded() && sourceSignals().length === 0) {
-      <div class="empty">
-        <p class="empty-title">No signals found.</p>
-        <p class="hint">
-          No <code>signal()</code>, <code>computed()</code> or <code>effect()</code> calls were
-          found in your source. To see the live graph, run Angular 20.1 or later with the overlay
-          connected and select a component.
-        </p>
-      </div>
-    }
-
-    @if (!graph() && sourceSignals().length > 0) {
-      <p class="source-label">Signals from the source scan:</p>
-      <div class="nodes">
-        @for (sig of filteredSourceSignals(); track sig.name + sig.file + sig.line) {
-          <div class="node-card">
-            <div class="node-header">
-              <span class="kind-badge" [style.background]="kindColor(sig.kind)">{{
-                sig.kind
-              }}</span>
-              <span class="node-label">{{ sig.name }}</span>
-            </div>
-            <div class="node-meta">
-              <app-source-link class="file" [file]="sig.file" [line]="sig.line" />
-              @if (sig.component) {
-                <span class="sep" aria-hidden="true">·</span>
-                <span>in &lt;{{ sig.component }}&gt;</span>
-              }
-            </div>
-          </div>
-        } @empty {
-          <div class="empty compact" role="status">
-            <p class="empty-title">No signals match.</p>
-            <p class="hint">Try a different name or kind.</p>
-            <button type="button" class="reset" (click)="clearFilters()">Clear filters</button>
-          </div>
-        }
-      </div>
-    }
-
-    <ng-template #historyTpl let-id="id" let-label="label">
-      @if (selectedHistory().length) {
-        <h4 [id]="'history-heading-' + id">{{ label }}</h4>
-        <p class="history-summary">{{ historySummary(id) }}</p>
-        @let restoreNode = restorable(id);
-        @if (restoreNode) {
-          @if (restoreBlocked(); as reason) {
-            <p class="hint">Restore is off. {{ reason }}</p>
-          }
-          <p
-            class="restore-result"
-            role="status"
-            [class.has-text]="restoreResult()?.id === id"
-            [class.restore-error]="restoreResult()?.id === id && restoreResult()?.error"
-          >
-            {{ restoreResult()?.id === id ? restoreResult()?.text : '' }}
-          </p>
-        }
-        <ol
-          class="history scroll-box"
-          tabindex="0"
-          [attr.aria-labelledby]="'history-heading-' + id"
-        >
-          @for (change of selectedHistory(); track change.epoch) {
-            <li>
-              <span class="history-meta">
-                <time>{{ change.at | date: 'HH:mm:ss.SSS' }}</time>
-                <span class="source-tag" [class]="'source-' + change.source">{{
-                  sourceLabel(change.source)
-                }}</span>
-                <span>epoch {{ change.epoch }}</span>
-                @if (change.missed) {
-                  <span class="missed">{{ change.missed }} earlier not captured</span>
-                }
-                @if (restoreNode && !restoreBlocked() && !$first) {
-                  @let time = change.at | date: 'HH:mm:ss.SSS';
-                  <button
-                    type="button"
-                    class="restore"
-                    [attr.aria-label]="'Restore value from ' + time"
-                    [attr.aria-disabled]="restoring() || null"
-                    (click)="restore(restoreNode, change, time ?? '')"
-                  >
-                    Restore
-                  </button>
-                }
-              </span>
-              <pre>{{ change.value | json }}</pre>
-              @if (diffs().get(change.epoch); as diff) {
-                <details class="diff">
-                  <summary>Changes from the entry before ({{ diff.length }})</summary>
-                  <ul class="diff-list">
-                    @for (d of diff; track d.path) {
-                      <li [class]="'diff-' + d.kind">
-                        <span class="diff-kind">{{ diffLabel(d.kind) }}</span
-                        ><span class="sr-only">: </span> <code class="diff-path">{{ d.path }}</code
-                        ><span class="sr-only">, </span>
-                        @if (d.kind !== 'added') {
-                          <code class="diff-old">{{ d.before | json }}</code>
-                        }
-                        @if (d.kind === 'changed') {
-                          <span class="sr-only">to</span><span aria-hidden="true">→</span>
-                        }
-                        @if (d.kind !== 'removed') {
-                          <code class="diff-new">{{ d.after | json }}</code>
-                        }
-                      </li>
-                    }
-                  </ul>
-                </details>
-              }
-              @if (change.stack?.length) {
-                <ol class="stack" aria-label="Written from">
-                  @for (frame of change.stack; track $index) {
-                    <li>{{ frame }}</li>
-                  }
-                </ol>
-              }
-            </li>
-          }
-        </ol>
-      }
-    </ng-template>
-
-    @if (graph() && (visibleNodes().length || frameworkCount())) {
-      <section class="graph-section" aria-labelledby="signal-graph-heading">
-        <div class="section-head">
-          <h2 id="signal-graph-heading" class="list-heading">Graph</h2>
-          <div class="section-actions">
-            @if (frameworkCount(); as hidden) {
-              <button
-                type="button"
-                class="toggle"
-                [attr.aria-pressed]="showFramework()"
-                (click)="showFramework.set(!showFramework())"
-              >
-                Show framework signals
-                <span class="count">{{ hidden }} {{ showFramework() ? 'shown' : 'hidden' }}</span>
-              </button>
-            }
-            <button
-              type="button"
-              class="toggle"
-              [attr.aria-pressed]="stacksOn()"
-              (click)="toggleStacks()"
-            >
-              Record write stacks
-            </button>
-            <button
-              type="button"
-              class="toggle"
-              aria-controls="signal-graph-body"
-              [attr.aria-expanded]="showGraph()"
-              (click)="showGraph.set(!showGraph())"
-            >
-              {{ showGraph() ? 'Hide graph' : 'Show graph' }}
-            </button>
-          </div>
-        </div>
-        @if (stacksOn()) {
-          <p class="hint graph-hint">
-            Write stacks are on for this page. Each set of a named signal keeps the first 3 app
-            frames of the code that wrote it, shown in its value history. Taking a stack slows every
-            write, so turn it off when you are done.
-          </p>
-        }
-        @if (showGraph()) {
-          <div id="signal-graph-body">
-            @if (graphNodes().length) {
-              <app-signal-graph-view
-                [nodes]="graphNodes()"
-                [links]="graphLinks()"
-                [selectedId]="selectedId()"
-                [watched]="watchedIds()"
-                [kindColor]="kindColorOf"
-                (selected)="selectFromGraph($event)"
-              />
-            } @else {
-              <p class="hint graph-hint">
-                Every signal in this graph was created by Angular. Show framework signals to see
-                them.
-              </p>
-            }
-            @if (selectedNode(); as node) {
-              <p class="graph-selection">
-                <span>Selected</span>
-                <span class="rel-label">{{ node.label ?? '(unnamed)' }}</span>
-                <span class="sep" aria-hidden="true">·</span>
-                <span>{{ plural(getDependencies(node).length, 'producer') }}</span>
-                <span class="sep" aria-hidden="true">·</span>
-                <span>{{ plural(getConsumers(node).length, 'consumer') }}</span>
-                <button type="button" class="link-button" (click)="jumpTo(node)">
-                  Show details
-                </button>
-              </p>
-            }
-          </div>
-        }
-      </section>
-    }
-
-    @if (watchedNodes().length || watchedElsewhere()) {
-      <section class="watched" aria-labelledby="signal-watched-heading">
-        <h2 id="signal-watched-heading" class="list-heading">Watched</h2>
-        @if (watchedElsewhere(); as other) {
-          <p class="hint">
-            {{ other }} watched {{ other === 1 ? 'signal is' : 'signals are' }} not in this graph.
-            Their changes still log to the page console.
-          </p>
-        }
-        <ul class="watched-list">
-          @for (node of watchedNodes(); track node.id) {
-            <li>
-              <span class="rel-label">{{ node.label ?? '(unnamed)' }}</span>
-              @if (node.value !== undefined) {
-                <span class="watched-value">{{ node.value | json }}</span>
-              }
-              @if (changeCount(node.id); as count) {
-                <span class="changed-badge"
-                  >{{ count }} {{ count === 1 ? 'change' : 'changes' }}</span
-                >
-              }
-              <button
-                type="button"
-                class="link-button"
-                [attr.aria-label]="'Stop watching ' + (node.label ?? 'the unnamed signal')"
-                (click)="toggleWatch(node)"
-              >
-                Stop watching
-              </button>
-            </li>
-          }
-        </ul>
-        @if (watchLog().length) {
-          <h3 class="sub-heading" id="signal-watch-log-heading">Recent changes</h3>
-          <div
-            class="watch-log scroll-box"
-            role="log"
-            tabindex="0"
-            aria-labelledby="signal-watch-log-heading"
-          >
-            <ol class="history">
-              @for (entry of watchLog(); track entry.id + ':' + entry.change.epoch) {
-                <li>
-                  <span class="history-meta">
-                    <time>{{ entry.change.at | date: 'HH:mm:ss.SSS' }}</time>
-                    <span class="rel-label">{{ entry.label }}</span>
-                    <span class="source-tag" [class]="'source-' + entry.change.source">{{
-                      sourceLabel(entry.change.source)
-                    }}</span>
-                  </span>
-                  <pre>{{ entry.change.value | json }}</pre>
-                  @if (entry.change.stack?.length) {
-                    <ol class="stack" aria-label="Written from">
-                      @for (frame of entry.change.stack; track $index) {
-                        <li>{{ frame }}</li>
-                      }
-                    </ol>
-                  }
-                </li>
-              }
-            </ol>
-          </div>
-        }
-      </section>
-    }
-
-    <p class="jump-note" role="status">{{ jumpNote() }}</p>
-
-    @if (graph() && filteredResources().length) {
-      <h2 class="list-heading">Resources</h2>
-      <ul class="nodes resources" role="list">
-        @for (res of filteredResources(); track res.id) {
-          <li>
-            <button
-              type="button"
-              class="node-card"
-              [class.selected]="selectedId() === res.id"
-              [attr.aria-expanded]="selectedId() === res.id"
-              [attr.aria-controls]="'signal-detail-' + res.id"
-              [attr.data-card]="res.id"
-              (click)="select(res.id)"
-            >
-              <span class="node-header">
-                <span class="kind-badge" [style.background]="kindColor('resource')">resource</span>
-                <span class="node-label">{{ res.name }}</span>
-                @if (res.status) {
-                  <span class="status-tag" [class]="'tone-' + statusTone(res.status)">{{
-                    res.status
-                  }}</span>
-                }
-                @if (res.changes; as count) {
-                  <span class="changed-badge"
-                    >{{ count }} {{ count === 1 ? 'change' : 'changes' }}</span
-                  >
-                }
-                <span class="chevron" aria-hidden="true"></span>
-              </span>
-              @if (res.error !== undefined) {
-                <span class="node-value">{{ res.error | json }}</span>
-              } @else if (res.value !== undefined) {
-                <span class="node-value">{{ res.value | json }}</span>
-              }
-            </button>
-            @if (selectedId() === res.id) {
-              <div class="detail-panel" [id]="'signal-detail-' + res.id">
-                <h3 class="detail-title">{{ res.name }}</h3>
-                @if (!res.named) {
-                  <p class="hint">
-                    This resource has no name. Pass <code>debugName</code> to
-                    <code>resource()</code> or <code>httpResource()</code> to name it here.
-                  </p>
-                }
-                <dl>
-                  <dt>Status</dt>
-                  <dd>{{ res.status ?? 'unknown' }}</dd>
-                  @if (res.isLoading !== undefined) {
-                    <dt>Loading</dt>
-                    <dd>{{ res.isLoading ? 'yes' : 'no' }}</dd>
-                  }
-                  @if (res.statusCode !== undefined) {
-                    <dt>HTTP status</dt>
-                    <dd>{{ res.statusCode }}</dd>
-                  }
-                  @if (res.params !== undefined) {
-                    <dt>Params</dt>
-                    <dd>
-                      <pre
-                        class="scroll-box"
-                        role="region"
-                        tabindex="0"
-                        [attr.aria-label]="'Params of ' + res.name"
-                        >{{ res.params | json }}</pre>
-                    </dd>
-                  }
-                  @if (res.value !== undefined) {
-                    <dt>Value</dt>
-                    <dd>
-                      <pre
-                        class="scroll-box"
-                        role="region"
-                        tabindex="0"
-                        [attr.aria-label]="'Value of ' + res.name"
-                        >{{ res.value | json }}</pre>
-                    </dd>
-                  }
-                  @if (res.error !== undefined) {
-                    <dt>Error</dt>
-                    <dd>
-                      <pre
-                        class="scroll-box"
-                        role="region"
-                        tabindex="0"
-                        [attr.aria-label]="'Error of ' + res.name"
-                        >{{ res.error | json }}</pre>
-                    </dd>
-                  }
-                </dl>
-                <ng-container
-                  [ngTemplateOutlet]="historyTpl"
-                  [ngTemplateOutletContext]="{ id: res.id, label: 'Status history' }"
-                />
-                <button
-                  type="button"
-                  class="reset internals-toggle"
-                  [attr.aria-expanded]="showInternals()"
-                  [attr.aria-controls]="'resource-internals-' + res.id"
-                  (click)="showInternals.set(!showInternals())"
-                >
-                  {{ showInternals() ? 'Hide' : 'Show' }} internal signals ({{
-                    res.nodeIds.length
-                  }})
-                </button>
-                @if (showInternals()) {
-                  <ul [id]="'resource-internals-' + res.id">
-                    @for (inner of internalsOf(res); track inner.id) {
-                      <li>
-                        <span class="kind-badge sm" [style.background]="kindColor(inner.kind)">{{
-                          inner.kind
-                        }}</span>
-                        <span class="rel-label">{{ inner.label ?? inner.id }}</span>
-                      </li>
-                    }
-                  </ul>
-                }
-              </div>
-            }
-          </li>
-        }
-      </ul>
-    }
-
-    @if (graph() && (visibleNodes().length || !filteredResources().length)) {
-      <h2 class="list-heading">Signals</h2>
-      <ul class="nodes" role="list" appRovingList="button.node-card">
-        @for (node of filteredNodes(); track node.id) {
-          <li>
-            <button
-              type="button"
-              class="node-card"
-              [class.selected]="selectedId() === node.id"
-              [attr.aria-expanded]="selectedId() === node.id"
-              [attr.aria-controls]="'signal-detail-' + node.id"
-              [attr.data-card]="node.id"
-              (click)="select(node.id)"
-            >
-              <span class="node-header">
-                <span class="kind-badge" [style.background]="kindColor(node.kind)">{{
-                  node.kind
-                }}</span>
-                <span class="node-label">{{ node.label ?? '(unnamed)' }}</span>
-                @if (watchedIds().has(node.id)) {
-                  <span class="watching-badge">watching</span>
-                }
-                @if (node.framework) {
-                  <span class="framework-badge">framework</span>
-                }
-                @if (changeCount(node.id); as count) {
-                  <span class="changed-badge"
-                    >{{ count }} {{ count === 1 ? 'change' : 'changes' }}</span
-                  >
-                }
-                <span class="chevron" aria-hidden="true"></span>
-              </span>
-              @if (node.value !== undefined) {
-                <span class="node-value">{{ node.value | json }}</span>
-              }
-              <span class="node-meta">
-                <span>Epoch: {{ node.epoch }}</span>
-                @if (getDependencies(node).length) {
-                  <span class="sep" aria-hidden="true">·</span>
-                  <span>Deps: {{ getDependencies(node).length }}</span>
-                }
-                @if (getConsumers(node).length) {
-                  <span class="sep" aria-hidden="true">·</span>
-                  <span>Consumers: {{ getConsumers(node).length }}</span>
-                }
-              </span>
-            </button>
-            @if (selectedId() === node.id && selectedNode()) {
-              <div class="detail-panel" [id]="'signal-detail-' + node.id">
-                <h3 class="detail-title">{{ selectedNode()!.label ?? selectedNode()!.id }}</h3>
-                <dl>
-                  <dt>Kind</dt>
-                  <dd>{{ selectedNode()!.kind }}</dd>
-                  <dt>Epoch</dt>
-                  <dd>{{ selectedNode()!.epoch }}</dd>
-                  @if (selectedNode()!.runs; as runs) {
-                    <dt>Runs</dt>
-                    <dd>
-                      {{ runs }}, {{ selectedNode()!.runMs ?? 0 }} ms in all, last
-                      {{ selectedNode()!.lastRunMs ?? 0 }} ms
-                    </dd>
-                  }
-                  @if (sourceMatch(); as match) {
-                    <dt>Source</dt>
-                    <dd class="source-matches">
-                      @if (match.exact) {
-                        <app-source-link [file]="match.exact.file" [line]="match.exact.line" />
-                      } @else {
-                        <span class="hint-inline"
-                          >{{ match.candidates.length }} declarations match this name:</span
-                        >
-                        <ul class="source-candidates">
-                          @for (c of match.candidates; track c.file + c.line) {
-                            <li>
-                              <app-source-link [file]="c.file" [line]="c.line" />
-                              @if (c.component) {
-                                <span class="hint-inline">in {{ c.component }}</span>
-                              }
-                            </li>
-                          }
-                        </ul>
-                      }
-                    </dd>
-                  }
-                  @if (selectedNode()!.value !== undefined) {
-                    <dt>Value</dt>
-                    <dd>
-                      <pre
-                        class="scroll-box"
-                        role="region"
-                        tabindex="0"
-                        [attr.aria-label]="'Value of ' + (selectedNode()!.label ?? 'signal')"
-                        >{{ selectedNode()!.value | json }}</pre>
-                    </dd>
-                  }
-                </dl>
-                @if (getDependencies(selectedNode()!).length) {
-                  <h4>Dependencies (producers)</h4>
-                  <ul>
-                    @for (dep of getDependencies(selectedNode()!); track dep.id) {
-                      <li>
-                        <button
-                          type="button"
-                          class="rel-link"
-                          [attr.aria-label]="'Go to ' + dep.kind + ' ' + (dep.label ?? dep.id)"
-                          (click)="jumpTo(dep)"
-                        >
-                          <span class="kind-badge sm" [style.background]="kindColor(dep.kind)">{{
-                            dep.kind
-                          }}</span>
-                          <span class="rel-label">{{ dep.label ?? dep.id }}</span>
-                        </button>
-                      </li>
-                    }
-                  </ul>
-                }
-                @if (getConsumers(selectedNode()!).length) {
-                  <h4>Consumers</h4>
-                  <ul>
-                    @for (con of getConsumers(selectedNode()!); track con.id) {
-                      <li>
-                        <button
-                          type="button"
-                          class="rel-link"
-                          [attr.aria-label]="'Go to ' + con.kind + ' ' + (con.label ?? con.id)"
-                          (click)="jumpTo(con)"
-                        >
-                          <span class="kind-badge sm" [style.background]="kindColor(con.kind)">{{
-                            con.kind
-                          }}</span>
-                          <span class="rel-label">{{ con.label ?? con.id }}</span>
-                        </button>
-                      </li>
-                    }
-                  </ul>
-                }
-                @if (isWatchable(selectedNode()!)) {
-                  <button
-                    type="button"
-                    class="reset watch-toggle"
-                    [attr.aria-pressed]="watchedIds().has(selectedNode()!.id)"
-                    (click)="toggleWatch(selectedNode()!)"
-                  >
-                    Watch
-                  </button>
-                  <p class="hint">
-                    A watched signal is listed under Watched and logs each change to the page
-                    console.
-                  </p>
-                }
-                @if (writeHint(); as hint) {
-                  <p class="hint">{{ hint }}</p>
-                }
-                <ng-container
-                  [ngTemplateOutlet]="historyTpl"
-                  [ngTemplateOutletContext]="{ id: node.id, label: 'Value history' }"
-                />
-              </div>
-            }
-          </li>
-        } @empty {
-          <li class="empty compact">
-            <p class="empty-title">
-              {{ hasAnySignals() ? 'No signals match.' : 'No signals in this graph.' }}
-            </p>
-            <p class="hint">
-              {{
-                hasAnySignals()
-                  ? 'Try a different name or kind.'
-                  : 'Select a component that reads signals, or interact with the page to create some.'
-              }}
-            </p>
-            @if (hasAnySignals() || filter() || kind()) {
-              <button type="button" class="reset" (click)="clearFilters()">Clear filters</button>
-            }
-          </li>
-        }
-      </ul>
-    }
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    :host {
-      display: block;
-      min-width: 0;
-      color: var(--text);
-      font-size: 13px;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px 12px;
-      align-items: center;
-      margin: 0 0 16px;
-      padding: 10px 12px;
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    input {
-      flex: 1 1 200px;
-      min-width: 0;
-      height: 34px;
-      padding: 0 12px;
-      background: var(--bg);
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      color: var(--text);
-      font: inherit;
-      font-size: 13px;
-      outline: none;
-      transition:
-        border-color 0.15s var(--ease),
-        box-shadow 0.15s var(--ease);
-    }
-    input::placeholder {
-      color: var(--text-3);
-    }
-    input:hover {
-      border-color: color-mix(in srgb, var(--text-3) 60%, var(--control-border));
-    }
-    input:focus-visible {
-      @include m.field-focus;
-    }
-    .empty {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      text-align: center;
-      padding: 40px 24px;
-      @include m.panel;
-      @include m.enter;
-    }
-    .empty.compact {
-      padding: 24px 16px;
-      border-style: dashed;
-      background: transparent;
-    }
-    .empty-title {
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .hint {
-      max-width: 460px;
-      margin: 0;
-      color: var(--text-2);
-      font-size: 13px;
-      line-height: 1.55;
-      overflow-wrap: anywhere;
-    }
-    .hint code {
-      padding: 1px 5px;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      color: var(--text);
-      background: var(--surface-3);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-    }
-    .reset {
-      height: 34px;
-      margin-top: 4px;
-      padding: 0 14px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font: inherit;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 0.15s var(--ease),
-        border-color 0.15s var(--ease);
-    }
-    .reset:hover {
-      background: var(--surface-3);
-    }
-    .reset:focus-visible {
-      @include m.focus-ring;
-    }
-    .spinner {
-      width: 18px;
-      height: 18px;
-      border: 2px solid var(--border-strong);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .spinner {
-        animation: none;
-        border-top-color: var(--border-strong);
-      }
-    }
-    .intro {
-      margin: 0 0 12px;
-      color: var(--text-2);
-      font-size: 13px;
-      line-height: 1.5;
-    }
-    .kinds {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      margin-bottom: 16px;
-    }
-    .kind-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      max-width: 100%;
-      height: 28px;
-      padding: 0 10px;
-      border: 1px solid var(--control-border);
-      border-radius: 99px;
-      background: var(--surface-2);
-      color: var(--text-2);
-      font: inherit;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 0.15s var(--ease),
-        border-color 0.15s var(--ease),
-        color 0.15s var(--ease);
-    }
-    .kind-chip:hover {
-      border-color: var(--text-3);
-      background: var(--surface-3);
-      color: var(--text);
-    }
-    .kind-chip:active {
-      transform: translateY(0.5px);
-    }
-    .kind-chip.active {
-      border-color: var(--accent-line);
-      background: var(--accent-soft);
-      color: var(--text-strong);
-    }
-    .kind-chip:focus-visible {
-      @include m.focus-ring;
-    }
-    .chip-text {
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .kind-chip .count {
-      flex: none;
-      min-width: 18px;
-      padding: 0 5px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-      line-height: 16px;
-      text-align: center;
-      font-variant-numeric: tabular-nums;
-    }
-    .kind-chip.active .count {
-      background: color-mix(in srgb, var(--accent) 22%, transparent);
-      color: var(--text-strong);
-    }
-    .dot {
-      flex: none;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-    }
-    .node-header {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 6px 8px;
-      min-width: 0;
-    }
-    .kind-badge {
-      flex: none;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 10.5px;
-      line-height: 18px;
-      padding: 0 8px;
-      border-radius: 99px;
-      color: var(--kind-ink);
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-    }
-    .node-label {
-      min-width: 0;
-      font-family: var(--font-mono);
-      font-size: 13px;
-      font-weight: 500;
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-    }
-    .node-meta {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 2px 6px;
-      min-width: 0;
-      margin-top: 6px;
-      font-size: 12px;
-      color: var(--text-3);
-      font-variant-numeric: tabular-nums;
-    }
-    .node-meta .file {
-      min-width: 0;
-      font-family: var(--font-mono);
-      font-size: 11.5px;
-      overflow-wrap: anywhere;
-    }
-    .sep {
-      color: var(--border-strong);
-    }
-    dl {
-      display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
-      gap: 8px 16px;
-      margin: 0;
-      font-size: 13px;
-    }
-    dt {
-      @include m.label;
-      padding-top: 2px;
-    }
-    dd {
-      min-width: 0;
-      margin: 0;
-      color: var(--text);
-      font-variant-numeric: tabular-nums;
-      overflow-wrap: anywhere;
-    }
-    pre {
-      font-family: var(--font-mono);
-      font-size: 12.5px;
-      line-height: 1.55;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-      margin: 0;
-      color: var(--text);
-    }
-    .nodes {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      @include m.enter;
-    }
-    .node-card {
-      display: block;
-      width: 100%;
-      min-width: 0;
-      text-align: left;
-      font: inherit;
-      color: inherit;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-      padding: 12px 16px;
-      transition:
-        background-color 0.15s var(--ease),
-        border-color 0.15s var(--ease),
-        box-shadow 0.15s var(--ease);
-    }
-    .node-card:hover {
-      background: var(--surface-2);
-      border-color: var(--border-strong);
-    }
-    .picker {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      flex: 1 1 260px;
-      min-width: 0;
-    }
-    .picker app-select {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-    .page-picker {
-      flex: 0 1 240px;
-    }
-    .label-key {
-      flex: none;
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .showing {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
-      gap: 4px 10px;
-      margin: 0 0 8px;
-      font-size: 12px;
-      color: var(--text-2);
-    }
-    .showing-name {
-      color: var(--text-strong);
-      font-family: var(--font-mono);
-      font-size: 13px;
-      font-weight: 600;
-    }
-    .mono {
-      font-family: var(--font-mono);
-      overflow-wrap: anywhere;
-    }
-    .source-note {
-      padding: 0 8px;
-      border: 1px solid var(--border-strong);
-      border-radius: 99px;
-      line-height: 18px;
-    }
-    .fallback {
-      margin: 0 0 8px;
-      color: var(--warn);
-      font-size: 12px;
-    }
-    .source-label {
-      @include m.label;
-      margin: 0 0 12px;
-    }
-    .nodes > li {
-      display: block;
-      min-width: 0;
-      padding: 0;
-    }
-    /* The empty card keeps its centred column inside the list. */
-    .nodes > li.empty {
-      display: flex;
-      padding: 24px 16px;
-    }
-    button.node-card {
-      cursor: pointer;
-    }
-    .node-card:focus-visible {
-      @include m.focus-ring;
-    }
-    .node-card.selected {
-      background: var(--accent-soft);
-      border-color: var(--accent-line);
-      box-shadow: inset 2px 0 0 var(--accent);
-    }
-    .chevron {
-      flex: none;
-      width: 7px;
-      height: 7px;
-      margin-left: auto;
-      border-right: 1.5px solid var(--text-3);
-      border-bottom: 1.5px solid var(--text-3);
-      transform: translateY(-2px) rotate(45deg);
-      transition:
-        transform 0.2s var(--ease),
-        border-color 0.15s var(--ease);
-    }
-    .node-card:hover .chevron {
-      border-color: var(--text);
-    }
-    .node-card.selected .chevron {
-      border-color: var(--accent);
-      transform: translateY(2px) rotate(-135deg);
-    }
-    .node-value {
-      display: block;
-      margin-top: 8px;
-      padding: 4px 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      color: var(--text-2);
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-    }
-    .node-card.selected .node-value {
-      background: color-mix(in srgb, var(--bg) 70%, transparent);
-    }
-    .kind-badge.sm {
-      font-size: 10px;
-      line-height: 16px;
-      padding: 0 6px;
-    }
-    .changed-badge {
-      flex: none;
-      font-size: 11px;
-      font-weight: 500;
-      line-height: 16px;
-      padding: 0 8px;
-      border: 1px solid;
-      border-radius: 99px;
-      font-variant-numeric: tabular-nums;
-    }
-    .changed-badge {
-      @include m.tint(warn);
-    }
-    .detail-panel {
-      margin-top: 8px;
-      padding: 16px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      @include m.enter(0.25s);
-    }
-    .detail-title {
-      margin: 0 0 16px;
-      font-family: var(--font-mono);
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--accent);
-      overflow-wrap: anywhere;
-    }
-    .detail-panel h4 {
-      @include m.label;
-      margin: 20px 0 8px;
-    }
-    .detail-panel dd pre {
-      max-height: 240px;
-      overflow: auto;
-      padding: 8px 12px;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-    }
-    .scroll-box:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .list-heading {
-      @include m.label;
-      margin: 16px 0 8px;
-    }
-    .resources {
-      margin-bottom: 8px;
-    }
-    .status-tag {
-      flex: none;
-      font-size: 11px;
-      font-weight: 500;
-      line-height: 16px;
-      padding: 0 8px;
-      border: 1px solid;
-      border-radius: 99px;
-    }
-    .tone-ok {
-      @include m.tint(ok);
-    }
-    .tone-warn {
-      @include m.tint(warn);
-    }
-    .tone-danger {
-      @include m.tint(danger);
-    }
-    .tone-neutral {
-      color: var(--text-2);
-      border-color: var(--border-strong);
-    }
-    .detail-panel .hint {
-      margin: 0 0 12px;
-    }
-    .internals-toggle {
-      margin-top: 16px;
-    }
-    .detail-panel .internals-toggle + ul {
-      margin-top: 8px;
-    }
-    .detail-panel ul {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      font-size: 13px;
-    }
-    .detail-panel ul li,
-    .rel-link {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-      min-height: 28px;
-      padding: 4px 8px;
-      color: var(--text-2);
-      border-radius: 6px;
-    }
-    .detail-panel ul li:has(> .rel-link) {
-      padding: 0;
-    }
-    .rel-link {
-      width: 100%;
-      font: inherit;
-      text-align: left;
-      background: none;
-      border: 0;
-      cursor: pointer;
-      transition:
-        background-color 0.15s var(--ease),
-        color 0.15s var(--ease);
-    }
-    .rel-link:hover {
-      background: var(--surface-2);
-      color: var(--text);
-    }
-    .rel-link:focus-visible {
-      @include m.focus-ring;
-    }
-    .jump-note {
-      margin: 0;
-      font-size: 12px;
-      color: var(--text-2);
-    }
-    .jump-note:not(:empty) {
-      margin-bottom: 8px;
-    }
-    .rel-label {
-      min-width: 0;
-      font-family: var(--font-mono);
-      font-size: 12.5px;
-      overflow-wrap: anywhere;
-    }
-    .history-summary {
-      margin: 0 0 8px;
-      font-size: 12px;
-      color: var(--text-2);
-      font-variant-numeric: tabular-nums;
-    }
-    .history {
-      list-style: none;
-      padding: 4px;
-      margin: 0;
-      max-height: 320px;
-      overflow: auto;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-    }
-    .history li {
-      display: block;
-      padding: 8px;
-      border-radius: 6px;
-      transition: background-color 0.15s var(--ease);
-    }
-    .history li + li {
-      border-top: 1px solid var(--border);
-    }
-    .history li:hover {
-      background: var(--surface-3);
-    }
-    .history-meta {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px 8px;
-      align-items: center;
-      margin-bottom: 4px;
-      font-size: 11px;
-      color: var(--text-2);
-      font-variant-numeric: tabular-nums;
-    }
-    .history-meta time {
-      font-family: var(--font-mono);
-      color: var(--text);
-    }
-    .source-tag {
-      line-height: 16px;
-      padding: 0 8px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      border: 1px solid var(--border-strong);
-      color: var(--text);
-    }
-    .source-write {
-      color: var(--hue-info-text);
-      background: color-mix(in srgb, var(--hue-info) 12%, transparent);
-      border-color: color-mix(in srgb, var(--hue-info) 30%, transparent);
-    }
-    .missed {
-      color: var(--warn);
-    }
-    .restore {
-      margin-left: auto;
-      height: 22px;
-      padding: 0 8px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font: inherit;
-      font-size: 11px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 150ms var(--ease),
-        border-color 150ms var(--ease);
-    }
-    .restore:hover:not([aria-disabled='true']) {
-      background: var(--surface-3);
-      border-color: var(--accent-line);
-    }
-    .restore[aria-disabled='true'] {
-      opacity: 0.6;
-      cursor: progress;
-    }
-    .restore:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .diff {
-      margin-top: 6px;
-      font-size: 12px;
-    }
-    .diff summary {
-      color: var(--text-2);
-      cursor: pointer;
-    }
-    .diff summary:focus-visible {
-      @include m.focus-ring;
-    }
-    .diff-list {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      margin: 6px 0 0;
-      padding: 0;
-      list-style: none;
-    }
-    .diff-list li {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
-      gap: 4px 8px;
-      min-width: 0;
-      font-family: var(--font-mono);
-      font-size: 11px;
-      overflow-wrap: anywhere;
-    }
-    .diff-kind {
-      padding: 0 6px;
-      border-radius: 5px;
-      font-size: 10px;
-      line-height: 16px;
-    }
-    .diff-added .diff-kind {
-      @include m.tint(ok);
-    }
-    .diff-removed .diff-kind {
-      @include m.tint(danger);
-    }
-    .diff-changed .diff-kind {
-      @include m.tint(accent);
-    }
-    .diff-path {
-      color: var(--text-strong);
-    }
-    .diff-old {
-      color: var(--text-2);
-      text-decoration: line-through;
-    }
-    .diff-new {
-      color: var(--text);
-    }
-    .source-matches {
-      min-width: 0;
-    }
-    .source-candidates {
-      margin: 4px 0 0;
-      padding: 0;
-      list-style: none;
-    }
-    .hint-inline {
-      color: var(--text-2);
-      font-size: 12px;
-    }
-    .restore-result {
-      margin: 0;
-      font-size: 12px;
-      color: var(--text-2);
-    }
-    .restore-result.has-text {
-      margin-bottom: 8px;
-    }
-    .restore-result.restore-error {
-      color: var(--danger-text);
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .restore {
-        transition: none;
-      }
-    }
-    .graph-section,
-    .watched {
-      margin-bottom: 16px;
-    }
-    .section-head {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px 12px;
-      margin: 16px 0 8px;
-    }
-    .section-head .list-heading {
-      margin: 0;
-    }
-    .section-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-    .toggle {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      height: var(--control-h);
-      padding: 0 12px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font: inherit;
-      font-size: 12.5px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 0.15s var(--ease),
-        border-color 0.15s var(--ease);
-    }
-    .toggle:hover {
-      background: var(--surface-3);
-    }
-    .toggle[aria-pressed='true'] {
-      border-color: var(--accent-line);
-      background: var(--accent-soft);
-      color: var(--text-strong);
-    }
-    .toggle:focus-visible {
-      @include m.focus-ring;
-    }
-    .toggle .count {
-      padding: 0 6px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-      line-height: 16px;
-      font-variant-numeric: tabular-nums;
-    }
-    .graph-hint {
-      margin: 0 0 8px;
-      max-width: none;
-    }
-    .graph-selection {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 4px 8px;
-      margin: 8px 0 0;
-      font-size: 12px;
-      color: var(--text-2);
-    }
-    .link-button {
-      min-height: 28px;
-      padding: 0 8px;
-      border: 0;
-      border-radius: 6px;
-      background: none;
-      color: var(--accent-text);
-      font: inherit;
-      font-size: 12px;
-      font-weight: 500;
-      text-decoration: underline;
-      text-underline-offset: 2px;
-      cursor: pointer;
-    }
-    .link-button:hover {
-      background: var(--surface-2);
-    }
-    .link-button:focus-visible {
-      @include m.focus-ring;
-    }
-    .watched-list {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      margin: 0 0 8px;
-      padding: 0;
-      list-style: none;
-    }
-    .watched-list li {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 4px 8px;
-      min-width: 0;
-      padding: 6px 10px;
-      background: var(--surface);
-      border: 1px solid var(--accent-line);
-      border-radius: var(--radius-sm);
-    }
-    .watched-value {
-      @include m.truncate;
-      flex: 1 1 120px;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      color: var(--text-2);
-    }
-    .sub-heading {
-      @include m.label;
-      margin: 12px 0 8px;
-    }
-    .watch-log {
-      max-height: 320px;
-      overflow: auto;
-      border-radius: var(--radius-sm);
-    }
-    .watch-log .history {
-      max-height: none;
-      overflow: visible;
-    }
-    .stack {
-      margin: 6px 0 0;
-      padding: 0 0 0 18px;
-      font-family: var(--font-mono);
-      font-size: 11.5px;
-      color: var(--text-2);
-      overflow-wrap: anywhere;
-    }
-    .history li .stack li {
-      padding: 0;
-      border: 0;
-    }
-    .watching-badge,
-    .framework-badge {
-      flex: none;
-      font-size: 11px;
-      font-weight: 500;
-      line-height: 16px;
-      padding: 0 8px;
-      border: 1px solid;
-      border-radius: 99px;
-    }
-    .watching-badge {
-      @include m.tint(accent);
-    }
-    .framework-badge {
-      color: var(--text-2);
-      border-color: var(--border-strong);
-    }
-    .watch-toggle {
-      margin: 16px 0 8px;
-    }
-    .watch-toggle[aria-pressed='true'] {
-      border-color: var(--accent-line);
-      background: var(--accent-soft);
-      color: var(--text-strong);
-    }
-    @media (max-width: 480px) {
-      .toolbar {
-        padding: 8px;
-      }
-      .toolbar input,
-      .picker {
-        flex-basis: 100%;
-      }
-      .node-card,
-      .detail-panel {
-        padding: 12px;
-      }
-      dl {
-        grid-template-columns: minmax(0, 1fr);
-        gap: 4px;
-      }
-      dd + dt {
-        margin-top: 8px;
-      }
-    }
-  `,
+  providers: [SignalState, SignalDetailState],
+  templateUrl: './signal-inspector.html',
+  styleUrl: './signal-inspector.scss',
 })
 export class SignalInspector {
-  rpc = input<DevframeRpcClient | null>(null);
+  readonly rpc = input<DevframeRpcClient | null>(null);
   /** A component to show, from a deep link or the Components tab's "Show in Signals". */
   readonly focus = input<SignalFocus | null>(null);
-  /** The signal to select once the focused component's graph arrives. */
-  private readonly focusedSignal = signal<{ componentId: string; key: string } | null>(null);
-  /** The page a focus asked for before it reported a graph; chosen once it does. */
-  private pendingPageId: string | null = null;
 
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly state = inject(SignalState);
+  private readonly detail = inject(SignalDetailState);
   private readonly filterInput = viewChild<SearchField>('filterInput');
-  private readonly injector = inject(Injector);
-  private readonly pageId = hostPageId();
-  private readonly angularPages = injectAngularPages(() => this.rpc());
-  /** The shown page's Angular version and debug API parts, for the unavailable note. */
-  readonly angularPage = computed(() =>
-    angularPageFor(this.angularPages(), this.shownPageId() ?? this.pageId),
-  );
-  private readonly cleanups: (() => void)[] = [];
-  /** Counts graph loads, so only the newest one applies its result. */
-  private graphLoad = 0;
-  private readonly treePages = signal<
-    Record<
-      string,
-      { roots?: LiveNode[]; reportedAt?: number; title?: string; url?: string; platform?: string }
-    >
-  >({});
-  private readonly graphState = signal<{
-    graph: SignalGraph | null;
-    pages: Record<string, SignalGraph>;
-  }>({ graph: null, pages: {} });
-  readonly chosenPageId = signal<string | null>(null);
-  readonly announcement = signal('');
 
-  private readonly graphPages = computed(() => graphPagesOf(this.graphState()));
-
-  // The newest graph comes as `graph`; a page that reports later never takes over.
-  readonly shownPageId = linkedSignal<
-    { pages: Record<string, SignalGraph>; newest: string | null; chosen: string | null },
-    string | null
-  >({
-    source: () => ({
-      pages: this.graphPages(),
-      newest: this.graphState().graph?.pageId ?? null,
-      chosen: this.chosenPageId(),
-    }),
-    computation: ({ pages, newest, chosen }, previous) => {
-      const reported: Record<string, ReportedPage> = {};
-      for (const pageId of Object.keys(pages)) {
-        reported[pageId] = { pageId, reportedAt: pageId === newest ? 1 : 0 };
-      }
-      return pickPage(reported, { chosen, host: this.pageId, previous: previous?.value ?? null });
-    },
-  });
-
-  private readonly reported = computed<SignalGraph | null>(() => {
-    const pageId = this.shownPageId();
-    return pageId === null ? null : (this.graphPages()[pageId] ?? null);
-  });
-  readonly unsupported = computed(() => !!this.reported()?.unsupported);
+  readonly angularPage = this.state.angularPage;
+  readonly chosenPageId = this.state.chosenPageId;
+  readonly announcement = this.state.announcement;
+  readonly shownPageId = this.state.shownPageId;
+  readonly unsupported = this.state.unsupported;
   /** Whether the live graph state arrived, so the intro doesn't call it a source scan first. */
-  protected readonly graphKnown = signal(false);
-  readonly graph = computed<SignalGraph | null>(() => {
-    const reported = this.reported();
-    return reported?.unsupported ? null : reported;
-  });
-  private readonly graphOwner = computed(() => {
-    const g = this.graph();
-    return g
-      ? `${g.pageId ?? ''}|${g.component?.id ?? g.injector?.id ?? g.element?.id ?? ''}`
-      : null;
-  });
-
-  // Component and injector ids belong to one page, so each page keeps its own pick.
-  private readonly pickedByPage = signal<Record<string, string>>({});
-  readonly picked = computed(() => this.pickedByPage()[this.targetPageId() ?? ''] ?? null);
-
-  readonly pageOptions = computed<SelectOption[]>(() => {
-    if (this.pageId) return [];
-    const tree = this.treePages();
-    return Object.keys(this.graphPages()).map((pageId) => {
-      const page = tree[pageId];
-      return {
-        value: pageId,
-        label: page?.title || page?.url || `Page ${pageId}`,
-        hint: page?.url,
-      };
-    });
-  });
-
-  readonly showInternals = signal(false);
-  sourceSignals = signal<SourceSignal[]>([]);
-  sourceLoaded = signal(false);
-  /** The source scan or the live graph state could not be read from the server. */
-  private readonly sourceFailed = signal(false);
-  private readonly graphFailed = signal(false);
-  readonly loadFailed = computed(() => this.sourceFailed() || this.graphFailed());
-  readonly retrying = signal(false);
-  filter = signal('');
-  readonly resources = computed(() => this.graph()?.resources ?? []);
-  private readonly internalIds = computed(
-    () => new Set(this.resources().flatMap((r) => r.nodeIds)),
-  );
-  /** Shows the nodes Angular itself created, which are hidden by default. */
-  readonly showFramework = signal(false);
-  readonly frameworkCount = computed(() => {
-    const internal = this.internalIds();
-    return (this.graph()?.nodes ?? []).filter((n) => n.framework && !internal.has(n.id)).length;
-  });
-  readonly visibleNodes = computed(() => {
-    const internal = this.internalIds();
-    const framework = this.showFramework();
-    return (this.graph()?.nodes ?? []).filter(
-      (n) => !internal.has(n.id) && (framework || !n.framework),
-    );
-  });
-  readonly showGraph = signal(true);
-  /** Links between the nodes the page shows, by node id. */
-  readonly graphLinks = computed<GraphLink[]>(() => {
-    const g = this.graph();
-    if (!g) return [];
-    const shown = new Set(this.visibleNodes().map((n) => n.id));
-    const links: GraphLink[] = [];
-    for (const edge of g.edges) {
-      const producer = g.nodes[edge.producer]?.id;
-      const consumer = g.nodes[edge.consumer]?.id;
-      if (producer && consumer && shown.has(producer) && shown.has(consumer)) {
-        links.push({ producer, consumer });
-      }
-    }
-    return links;
-  });
-  readonly graphNodes = computed(() =>
-    [...this.visibleNodes()].sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true })),
-  );
-  readonly kindColorOf = (kind: string) => this.kindColor(kind);
-
-  readonly watchedIds = computed(() => new Set(this.graph()?.watch?.ids ?? []));
-  readonly stacksOn = computed(() => !!this.graph()?.watch?.stacks);
-  readonly watchedNodes = computed(() => {
-    const ids = this.watchedIds();
-    return (this.graph()?.nodes ?? []).filter((n) => ids.has(n.id));
-  });
-  /** Watched ids the page reports that are not in the graph shown now. */
-  readonly watchedElsewhere = computed(() => this.watchedIds().size - this.watchedNodes().length);
-  /** The newest changes of every watched signal in this graph, newest first. */
-  readonly watchLog = computed(() => {
-    const history = this.graph()?.history ?? {};
-    const entries = this.watchedNodes().flatMap((node) =>
-      (history[node.id] ?? [])
-        .filter((change) => change.source !== 'initial')
-        .map((change) => ({ id: node.id, label: node.label ?? node.id, change })),
-    );
-    return entries.sort((a, b) => b.change.at - a.change.at).slice(0, WATCH_LOG);
-  });
-  readonly hasAnySignals = computed(() => this.visibleNodes().length + this.resources().length > 0);
-  kindCounts = computed(() => {
-    const kinds: string[] = this.graph()
-      ? [...this.visibleNodes().map((n) => n.kind), ...this.resources().map(() => 'resource')]
-      : this.sourceSignals().map((s) => s.kind);
-    const counts = new Map<string, number>();
-    for (const k of kinds) counts.set(k, (counts.get(k) ?? 0) + 1);
-    return [...counts].map(([kind, count]) => ({ kind, count }));
-  });
-  // A kind picked on another graph stays only when this graph has it too.
-  kind = linkedSignal<string | null, string | null>({
-    source: this.graphOwner,
-    computation: (_owner, previous) => {
-      const kind = previous?.value ?? null;
-      return kind && untracked(this.kindCounts).some((g) => g.kind === kind) ? kind : null;
-    },
-  });
-  // An active kind with no matches still gets a pressed chip, so the filter stays visible.
-  kindChips = computed(() => {
-    const counts = this.kindCounts();
-    const kind = this.kind();
-    return kind && !counts.some((g) => g.kind === kind) ? [...counts, { kind, count: 0 }] : counts;
-  });
-  kindTotal = computed(() => this.kindCounts().reduce((sum, g) => sum + g.count, 0));
-  selectedId = linkedSignal<string | null, string | null>({
-    source: this.graphOwner,
-    computation: () => null,
-  });
-  selectedNode = computed(
-    () => this.graph()?.nodes.find((n) => n.id === this.selectedId()) ?? null,
-  );
-  private readonly jumpedPast = signal<{ id: string; label: string } | null>(null);
-  readonly jumpNote = computed(() => {
-    const jumped = this.jumpedPast();
-    if (!jumped || this.filter() || this.kind() || this.selectedId() !== jumped.id) return '';
-    return `Cleared the filters to show ${jumped.label}.`;
-  });
-  selectedHistory = computed(() => {
-    const id = this.selectedId();
-    return id ? [...(this.graph()?.history?.[id] ?? [])].reverse() : [];
-  });
-
-  /**
-   * Why history entries cannot be restored on the shown page, or '' when they
-   * can: the same gate as component edits (a live browser page with
-   * `actions.components` on).
-   */
-  readonly restoreBlocked = computed(() => {
-    const client = this.rpc();
-    if (isStaticReport(client)) return 'A saved report cannot write to the app.';
-    const pageId = this.graph()?.pageId;
-    if (isNativePage(pageId ? this.treePages()[pageId] : null)) {
-      return 'It needs the app open in a browser.';
-    }
-    if (!actionAllowed(client, 'components')) return actionBlockedMessage('components');
-    return '';
-  });
-  readonly restoring = signal(false);
-  readonly restoreResult = signal<{ id: string; text: string; error: boolean } | null>(null);
-
-  /** The node with this id when its history can be restored: a writable field of the shown component. */
-  restorable(id: string): SignalNode | null {
-    const g = this.graph();
-    const node = g?.nodes.find((n) => n.id === id);
-    if (!node?.locator) return null;
-    if (node.locator.owner === 'service') {
-      return g?.injector && node.locator.id === g.injector.id ? node : null;
-    }
-    return g?.component && node.locator.id === g.component.id ? node : null;
-  }
-
-  /** Writes the value the page kept for this entry back to the signal. */
-  async restore(node: SignalNode, change: SignalChange, time: string) {
-    const client = this.rpc();
-    const pageId = this.graph()?.pageId;
-    const locator = node.locator;
-    if (!client || !pageId || !locator || this.restoring() || this.restoreBlocked()) return;
-    this.restoring.set(true);
-    let result: RestoreResult;
-    try {
-      result = ((await client.scope('pangular').rpc.call('request-signal-restore', {
-        pageId,
-        request: {
-          component: locator.id,
-          ...(locator.owner === 'service' ? { owner: 'service' } : {}),
-          node: node.id,
-          epoch: change.epoch,
-        },
-      })) ?? {}) as RestoreResult;
-    } catch {
-      result = { error: 'The devtools server did not answer. Try again.' };
-    }
-    this.restoring.set(false);
-    this.restoreResult.set(
-      result.ok
-        ? {
-            id: node.id,
-            text: `Restored ${result.key ?? locator.key} to the value from ${time}.`,
-            error: false,
-          }
-        : { id: node.id, text: result.error ?? 'The page did not restore it.', error: true },
-    );
-  }
-
-  /**
-   * What changed in each history entry of the selected node against the
-   * entry before it, by epoch. Only for entries whose values are both
-   * objects or arrays; a plain value already shows whole.
-   */
-  readonly diffs = computed(() => {
-    const id = this.selectedId();
-    const entries = id ? (this.graph()?.history?.[id] ?? []) : [];
-    const out = new Map<number, JsonDiffEntry[]>();
-    for (let i = 1; i < entries.length; i++) {
-      const before = entries[i - 1]!.value;
-      const after = entries[i]!.value;
-      if (!before || !after || typeof before !== 'object' || typeof after !== 'object') continue;
-      const diff = jsonDiff(before, after);
-      if (diff.length) out.set(entries[i]!.epoch, diff);
-    }
-    return out;
-  });
-
-  diffLabel(kind: JsonDiffEntry['kind']): string {
-    return kind === 'added' ? 'added' : kind === 'removed' ? 'removed' : 'changed';
-  }
-
-  /**
-   * The source declaration of the selected live node, from the source scan:
-   * declarations with the node's name and a matching kind, narrowed to the
-   * shown component's selector when some are in it. One left is `exact`;
-   * several are listed as `candidates`, since the name alone can't tell them
-   * apart.
-   */
-  readonly sourceMatch = computed<{
-    exact: SourceSignal | null;
-    candidates: SourceSignal[];
-  } | null>(() => {
-    const node = this.selectedNode();
-    const label = node?.label;
-    if (!node || !label) return null;
-    const kindMatches = (source: string) =>
-      source === node.kind ||
-      source.startsWith(`${node.kind} `) ||
-      source.startsWith(`${node.kind}.`) ||
-      (node.kind === 'signal' && source.startsWith('model')) ||
-      (node.kind === 'computed' && source === 'toSignal');
-    let found = this.sourceSignals().filter((s) => s.name === label && kindMatches(s.kind));
-    const g = this.graph();
-    const owner = g?.component?.tag ?? g?.element?.tag;
-    const own = owner ? found.filter((s) => s.component === owner) : [];
-    if (own.length) found = own;
-    if (!found.length) return null;
-    return found.length === 1
-      ? { exact: found[0]!, candidates: [] }
-      : { exact: null, candidates: found.slice(0, 5) };
-  });
-
-  /** Why a writable signal has no exact set entries, when the panel can tell. */
-  readonly writeHint = computed(() => {
-    const node = this.selectedNode();
-    const g = this.graph();
-    if (!node || !g || g.writeHook === false) return '';
-    if (node.kind !== 'signal' && node.kind !== 'linkedSignal') return '';
-    if (!node.label) {
-      return "This signal has no name, so its history holds sampled values only. From Angular 20.1 the compiler names a signal that initializes a field or variable, so this one was likely made in a factory or helper. Pass a debugName in its options, for example signal(0, { debugName: 'count' }).";
-    }
-    const history = g.history?.[node.id] ?? [];
-    if (history.some((c) => c.source === 'write') || !history.some((c) => c.source === 'sample')) {
-      return '';
-    }
-    return 'Every change here was sampled. Writes are matched by name, kind, version and value, so another live signal with the same name and value can hide them.';
-  });
-
-  filteredResources = computed(() => {
-    const q = this.filter().toLowerCase();
-    const kind = this.kind();
-    if (kind && kind !== 'resource') return [];
-    return this.resources().filter(
-      (r) =>
-        !q ||
-        r.name.toLowerCase().includes(q) ||
-        // A short query such as `e` would match every resource through its kind.
-        (q.length >= 3 && 'resource'.startsWith(q)),
-    );
-  });
-
-  filteredNodes = computed(() => {
-    const q = this.filter().toLowerCase();
-    const kind = this.kind();
-    const nodes = this.visibleNodes().filter(
-      (n) =>
-        (!kind || n.kind === kind) &&
-        (!q || (n.label ?? '').toLowerCase().includes(q) || n.kind.toLowerCase().includes(q)),
-    );
-    // Angular orders nodes by last read order, which changes between polls; ids are stable.
-    return nodes.sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }));
-  });
-
-  filteredSourceSignals = computed(() => {
-    const q = this.filter().toLowerCase();
-    const kind = this.kind();
-    return this.sourceSignals().filter(
-      (s) =>
-        (!kind || s.kind === kind) &&
-        (!q ||
-          s.name.toLowerCase().includes(q) ||
-          s.kind.toLowerCase().includes(q) ||
-          s.file.toLowerCase().includes(q)),
-    );
-  });
-
-  private readonly targetPageId = computed(
-    () =>
-      this.pageId ??
-      (this.shownPageId() || null) ??
-      this.graph()?.pageId ??
-      this.latestTreePage()?.pageId ??
-      null,
-  );
-
-  private readonly latestTreePage = computed(() => {
-    let latest: { pageId: string; reportedAt: number } | null = null;
-    for (const [pageId, page] of Object.entries(this.treePages())) {
-      const at = page.reportedAt ?? 0;
-      if (!latest || at > latest.reportedAt) latest = { pageId, reportedAt: at };
-    }
-    return latest;
-  });
-
-  readonly componentOptions = computed<SelectOption[]>(() => {
-    const pageId = this.targetPageId();
-    const roots = (pageId ? this.treePages()[pageId]?.roots : undefined) ?? [];
-    const flat: LiveNode[] = [];
-    const walk = (nodes: LiveNode[]) => {
-      for (const node of nodes) {
-        flat.push(node);
-        walk(node.children);
-      }
-    };
-    walk(roots);
-    const environments = this.graph()?.environments ?? [];
-    if (!flat.length && !environments.length) return [];
-    const totals = new Map<string, number>();
-    for (const node of flat) totals.set(node.name, (totals.get(node.name) ?? 0) + 1);
-    const seen = new Map<string, number>();
-    const options: SelectOption[] = [
-      { value: FOLLOW, label: 'Follow the routed component', hint: 'automatic' },
-      ...environments.map((env) => ({
-        value: ENV + env.id,
-        label: this.injectorLabel(env),
-        hint: 'injector',
-      })),
-    ];
-    for (const node of flat) {
-      const n = (seen.get(node.name) ?? 0) + 1;
-      seen.set(node.name, n);
-      options.push({
-        value: node.id,
-        label: (totals.get(node.name) ?? 0) > 1 ? `${node.name} #${n}` : node.name,
-        hint: node.kind === 'directive' ? `<${node.tag}> directive` : `<${node.tag}>`,
-      });
-    }
-    return options;
-  });
-
-  readonly pickerValue = computed(() => {
-    const picked = this.picked();
-    return picked && this.componentOptions().some((o) => o.value === picked) ? picked : FOLLOW;
-  });
+  protected readonly graphKnown = this.state.graphKnown;
+  readonly graph = this.state.graph;
+  readonly picked = this.state.picked;
+  readonly pageOptions = this.state.pageOptions;
+  readonly showInternals = this.state.showInternals;
+  readonly sourceSignals = this.state.sourceSignals;
+  readonly sourceLoaded = this.state.sourceLoaded;
+  readonly loadFailed = this.state.loadFailed;
+  readonly retrying = this.state.retrying;
+  readonly filter = this.state.filter;
+  readonly resources = this.state.resources;
+  readonly showFramework = this.state.showFramework;
+  readonly frameworkCount = this.state.frameworkCount;
+  readonly visibleNodes = this.state.visibleNodes;
+  readonly watchedNodes = this.state.watchedNodes;
+  readonly watchedElsewhere = this.state.watchedElsewhere;
+  readonly kindCounts = this.state.kindCounts;
+  readonly kind = this.state.kind;
+  readonly kindChips = this.state.kindChips;
+  readonly kindTotal = this.state.kindTotal;
+  readonly selectedId = this.state.selectedId;
+  readonly selectedNode = this.state.selectedNode;
+  readonly jumpNote = this.state.jumpNote;
+  readonly writeHint = this.detail.writeHint;
+  readonly filteredResources = this.state.filteredResources;
+  readonly filteredNodes = this.state.filteredNodes;
+  readonly filteredSourceSignals = this.state.filteredSourceSignals;
+  readonly componentOptions = this.state.componentOptions;
+  readonly pickerValue = this.state.pickerValue;
+  readonly sourceNote = sourceNote;
+  readonly kindColor = kindColor;
 
   constructor() {
+    this.state.connect(this.rpc, () => this.filterInput());
     effect(() => {
       const client = this.rpc();
       if (!client) return;
-      void this.loadSignalGraph(client);
-      void this.loadSourceSignals(client);
+      void this.state.loadSignalGraph(client);
+      void this.state.loadSourceSignals(client);
     });
     effect(() => {
       const focus = this.focus();
-      if (focus) untracked(() => this.showComponent(focus));
+      if (focus) untracked(() => this.state.showComponent(focus));
     });
     // Selects the focused signal once the graph of its component is in.
     effect(() => {
-      const wanted = this.focusedSignal();
+      const wanted = this.state.focusedSignal();
       const graph = this.graph();
       if (!wanted || graph?.component?.id !== wanted.componentId) return;
       const node = graph.nodes.find(
         (n) => n.locator?.id === wanted.componentId && n.locator.key === wanted.key,
       );
       untracked(() => {
-        this.focusedSignal.set(null);
-        if (node) this.jumpTo(node);
+        this.state.focusedSignal.set(null);
+        if (node) this.state.jumpTo(node);
       });
     });
-    this.destroyRef.onDestroy(() => {
-      for (const cleanup of this.cleanups.splice(0)) cleanup();
+    inject(DestroyRef).onDestroy(() => {
+      for (const cleanup of this.state.cleanups.splice(0)) cleanup();
     });
   }
 
-  async loadSignalGraph(client: DevframeRpcClient) {
-    for (const cleanup of this.cleanups.splice(0)) cleanup();
-    const load = ++this.graphLoad;
-    /** A newer load (Retry, or a new client) started, so this one's outcome is dropped. */
-    const stale = () => this.destroyRef.destroyed || load !== this.graphLoad;
-    const my = client.scope('pangular');
-    try {
-      const state = await my.rpc.sharedState('signal-graph');
-      if (stale()) return;
-      this.graphFailed.set(false);
-      const apply = (value: unknown) => {
-        const next = value as {
-          graph?: SignalGraph | null;
-          pages?: Record<string, SignalGraph>;
-        } | null;
-        const pages = next?.pages && typeof next.pages === 'object' ? next.pages : {};
-        const state = { graph: next?.graph ?? null, pages };
-        this.notePageGone(graphPagesOf(state));
-        this.graphState.set(state);
-        const pending = this.pendingPageId;
-        if (pending && this.graphPages()[pending]) {
-          this.pendingPageId = null;
-          this.chosenPageId.set(pending);
-        }
-        // A state the client hasn't loaded from the server yet says nothing.
-        if (value !== undefined) this.graphKnown.set(true);
-      };
-      apply(state.value());
-      this.cleanups.push(state.on('updated', apply));
-    } catch {
-      if (stale()) return;
-      this.graphState.set({ graph: null, pages: {} });
-      this.graphKnown.set(true);
-      this.graphFailed.set(true);
-    }
-    try {
-      const tree = await my.rpc.sharedState('component-tree');
-      if (stale()) return;
-      const applyTree = (value: unknown) => {
-        const pages = (value as { pages?: Record<string, { roots?: LiveNode[] }> } | null)?.pages;
-        this.treePages.set(pages && typeof pages === 'object' ? pages : {});
-      };
-      applyTree(tree.value());
-      this.cleanups.push(tree.on('updated', applyTree));
-    } catch {
-      if (!stale()) this.treePages.set({});
-    }
-  }
-
-  private notePageGone(pages: Record<string, SignalGraph>) {
-    const gone = Object.keys(this.graphPages()).filter((pageId) => !pages[pageId]);
-    if (gone.length) {
-      this.pickedByPage.update((all) => {
-        const next = { ...all };
-        for (const pageId of gone) delete next[pageId];
-        return next;
-      });
-    }
-    const chosen = this.chosenPageId();
-    if (!chosen || pages[chosen]) return;
-    const label = this.pageOptions().find((o) => o.value === chosen)?.label ?? 'The chosen page';
-    this.chosenPageId.set(null);
-    this.announcement.set(`${label} closed, so this shows another page.`);
-  }
-
   selectPage(pageId: string | null) {
-    if (!pageId || pageId === this.shownPageId()) return;
-    this.pendingPageId = null;
-    this.chosenPageId.set(pageId);
-    const label = this.pageOptions().find((o) => o.value === pageId)?.label ?? pageId;
-    this.announcement.set(`Showing the signal graph of ${label}.`);
-  }
-
-  /** Shows the graph of the component a focus names, on its page when it names one. */
-  private showComponent(focus: SignalFocus) {
-    this.pendingPageId = null;
-    if (focus.pageId && !this.pageId) {
-      // A page that has not reported its graph yet is chosen when it does.
-      if (this.graphPages()[focus.pageId]) this.chosenPageId.set(focus.pageId);
-      else this.pendingPageId = focus.pageId;
-    }
-    this.focusedSignal.set(focus.key ? { componentId: focus.componentId, key: focus.key } : null);
-    this.pickComponent(focus.componentId, this.pageId ?? focus.pageId);
+    this.state.selectPage(pageId);
   }
 
   pickComponent(value: string | null, forPage?: string) {
-    const picked = value && value !== FOLLOW ? value : null;
-    // Another component replaces a focus that still waits for its signal.
-    if (this.focusedSignal()?.componentId !== picked) this.focusedSignal.set(null);
-    const pageId = forPage ?? this.targetPageId() ?? undefined;
-    this.pickedByPage.update((all) => {
-      const next = { ...all };
-      if (picked) next[pageId ?? ''] = picked;
-      else delete next[pageId ?? ''];
-      return next;
-    });
-    const client = this.rpc();
-    if (!client) return;
-    const target = picked?.startsWith(ENV)
-      ? { pageId, env: picked.slice(ENV.length) }
-      : { pageId, id: picked };
-    void client
-      .scope('pangular')
-      .rpc.call('select-signal-target', target)
-      .catch(() => {});
+    this.state.pickComponent(value, forPage);
   }
 
   injectorLabel(injector: GraphInjector) {
-    return injector.name === 'Root' ? 'Root services' : injector.name;
-  }
-
-  sourceNote(source: NonNullable<SignalGraph['source']>) {
-    return SOURCE_NOTES[source];
-  }
-
-  async loadSourceSignals(client: DevframeRpcClient) {
-    const my = client.scope('pangular');
-    try {
-      const result = (await my.rpc.call('get-signals')) as SourceSignal[];
-      this.sourceSignals.set(result);
-      this.sourceFailed.set(false);
-    } catch {
-      this.sourceFailed.set(true);
-    } finally {
-      this.sourceLoaded.set(true);
-    }
+    return this.state.injectorLabel(injector);
   }
 
-  /** Loads the graph and the source scan again. The alert stays until they answer, so focus
-   * stays on Retry while it is shown and moves to the filter box when the alert goes, which
-   * also happens when the graph comes back but the source scan still fails. */
-  async retry() {
-    const client = this.rpc();
-    if (!client || this.retrying()) return;
-    const trigger = document.activeElement;
-    this.retrying.set(true);
-    try {
-      await Promise.all([this.loadSignalGraph(client), this.loadSourceSignals(client)]);
-    } finally {
-      this.retrying.set(false);
-    }
-    if (this.destroyRef.destroyed) return;
-    afterNextRender(
-      () => {
-        const lost = !trigger?.isConnected || document.activeElement === document.body;
-        if (lost) this.filterInput()?.focus();
-      },
-      { injector: this.injector },
-    );
+  retry() {
+    return this.state.retry();
   }
 
-  /** Clears the filters from a no-match state and keeps focus on the filter box. */
   clearFilters() {
-    this.resetFilters();
-    this.filterInput()?.focus();
-  }
-
-  private resetFilters() {
-    this.filter.set('');
-    this.kind.set(null);
+    this.state.clearFilters();
   }
 
   select(id: string) {
-    this.selectedId.set(this.selectedId() === id ? null : id);
-    this.showInternals.set(false);
-  }
-
-  /** Selects a node from the drawn graph; its detail opens in the list below. */
-  selectFromGraph(id: string) {
-    this.selectedId.set(id);
-    this.showInternals.set(false);
-  }
-
-  plural(count: number, word: string): string {
-    return `${count} ${word}${count === 1 ? '' : 's'}`;
-  }
-
-  isWatchable(node: SignalNode): boolean {
-    return WATCHABLE.has(node.kind);
-  }
-
-  /** Asks the page to watch or stop watching a signal; the page's next report shows it. */
-  toggleWatch(node: SignalNode) {
-    const watch = !this.watchedIds().has(node.id);
-    const label = node.label ?? 'the unnamed signal';
-    this.sendWatch({ id: node.id, watch });
-    this.announcement.set(
-      watch
-        ? `Watching ${label}. Its changes also log to the page console.`
-        : `Stopped watching ${label}.`,
-    );
-  }
-
-  /** Turns write stacks on or off for the page that reported the graph. */
-  toggleStacks() {
-    const stacks = !this.stacksOn();
-    this.sendWatch({ stacks });
-    this.announcement.set(stacks ? 'Recording write stacks.' : 'Stopped recording write stacks.');
-  }
-
-  private sendWatch(request: { id?: string; watch?: boolean; stacks?: boolean }) {
-    const client = this.rpc();
-    const pageId = this.graph()?.pageId ?? this.targetPageId() ?? undefined;
-    if (!client) return;
-    void client
-      .scope('pangular')
-      .rpc.call('set-signal-watch', { ...request, pageId })
-      .catch(() => {});
-  }
-
-  jumpTo(node: SignalNode) {
-    const resource = this.resources().find((r) => r.nodeIds.includes(node.id));
-    const id = resource?.id ?? node.id;
-    const hidden = resource
-      ? !this.filteredResources().some((r) => r.id === id)
-      : !this.filteredNodes().some((n) => n.id === id);
-    if (hidden) this.resetFilters();
-    this.jumpedPast.set(hidden ? { id, label: resource?.name ?? node.label ?? node.id } : null);
-    this.selectedId.set(id);
-    this.showInternals.set(!!resource);
-    afterNextRender(
-      () => {
-        const card = [
-          ...this.host.nativeElement.querySelectorAll<HTMLElement>('.node-card[data-card]'),
-        ].find((el) => el.dataset['card'] === id);
-        card?.scrollIntoView?.({ block: 'nearest' });
-        card?.focus({ preventScroll: true });
-      },
-      { injector: this.injector },
-    );
-  }
-
-  // The page counts past the kept history; older pages only send the list.
-  changeCount(id: string): number {
-    const g = this.graph();
-    const counted =
-      g?.nodes.find((n) => n.id === id)?.changes ?? g?.resources?.find((r) => r.id === id)?.changes;
-    if (counted !== undefined) return counted;
-    const list = g?.history?.[id] ?? [];
-    return list.reduce((n, c) => n + (c.source === 'initial' ? 0 : 1 + (c.missed ?? 0)), 0);
-  }
-
-  historySummary(id: string): string {
-    const count = this.changeCount(id);
-    const kept = this.graph()?.history?.[id]?.length ?? 0;
-    if (!count) return 'No changes recorded yet. The entry below is the value seen first.';
-    const changes = `${count} ${count === 1 ? 'change' : 'changes'} recorded`;
-    const shown = kept >= MAX_HISTORY && count >= kept ? `, showing the last ${kept}` : '';
-    return `${changes}${shown}, newest first.`;
-  }
-
-  statusTone(status: string) {
-    return RESOURCE_STATUS_TONES[status] ?? 'neutral';
-  }
-
-  internalsOf(resource: SignalResource): SignalNode[] {
-    const ids = new Set(resource.nodeIds);
-    return (this.graph()?.nodes ?? []).filter((n) => ids.has(n.id));
-  }
-
-  sourceLabel(source: SignalChange['source']) {
-    return SOURCE_LABELS[source];
+    this.state.select(id);
   }
 
-  kindColor(kind: string) {
-    return `var(--kind-${KIND_TOKENS[kind] ?? 'unknown'})`;
-  }
-
-  /** Producers and consumers of every node, built once per graph. */
-  private readonly relations = computed(() => {
-    const map = new Map<string, { deps: SignalNode[]; consumers: SignalNode[] }>();
-    const g = this.graph();
-    if (!g) return map;
-    for (const node of g.nodes) map.set(node.id, { deps: [], consumers: [] });
-    for (const edge of g.edges) {
-      const producer = g.nodes[edge.producer];
-      const consumer = g.nodes[edge.consumer];
-      if (!producer || !consumer) continue;
-      map.get(consumer.id)?.deps.push(producer);
-      map.get(producer.id)?.consumers.push(consumer);
-    }
-    return map;
-  });
-
   getDependencies(node: SignalNode): SignalNode[] {
-    return this.relations().get(node.id)?.deps ?? [];
+    return this.state.getDependencies(node);
   }
 
   getConsumers(node: SignalNode): SignalNode[] {
-    return this.relations().get(node.id)?.consumers ?? [];
+    return this.state.getConsumers(node);
   }
 }
diff --git a/app/src/pages/signals/resource-list.html b/app/src/pages/signals/resource-list.html
new file mode 100644
index 00000000..535b2697
--- /dev/null
+++ b/app/src/pages/signals/resource-list.html
@@ -0,0 +1,40 @@
+@for (res of filteredResources(); track res.id) {
+  <li>
+    <button
+      type="button"
+      class="node-card"
+      [class.selected]="selectedId() === res.id"
+      [attr.aria-expanded]="selectedId() === res.id"
+      [attr.aria-controls]="'signal-detail-' + res.id"
+      [attr.data-card]="res.id"
+      (click)="select(res.id)"
+    >
+      <span class="node-header">
+        <span class="kind-badge" [style.background]="kindColor('resource')">resource</span>
+        <span class="node-label">{{ res.name }}</span>
+        @if (res.status) {
+          <span class="status-tag" [class]="'tone-' + statusTone(res.status)">{{
+            res.status
+          }}</span>
+        }
+        @if (res.changes; as count) {
+          <span class="changed-badge">{{ count }} {{ count === 1 ? 'change' : 'changes' }}</span>
+        }
+        <span class="chevron" aria-hidden="true"></span>
+      </span>
+      @if (res.error !== undefined) {
+        <span class="node-value">{{ res.error | json }}</span>
+      } @else if (res.value !== undefined) {
+        <span class="node-value">{{ res.value | json }}</span>
+      }
+    </button>
+    @if (selectedId() === res.id) {
+      <div
+        class="detail-panel"
+        appSignalDetail
+        [resource]="res"
+        [id]="'signal-detail-' + res.id"
+      ></div>
+    }
+  </li>
+}
diff --git a/app/src/pages/signals/resource-list.scss b/app/src/pages/signals/resource-list.scss
new file mode 100644
index 00000000..9ab1ae2d
--- /dev/null
+++ b/app/src/pages/signals/resource-list.scss
@@ -0,0 +1,37 @@
+@use 'mixins' as m;
+@use 'signals' as sig;
+
+@include sig.cards;
+@include sig.node-list;
+@include sig.node-cards;
+@include sig.changed-badge;
+:host(.resources) {
+  margin-bottom: 8px;
+}
+.status-tag {
+  flex: none;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 99px;
+}
+.tone-ok {
+  @include m.tint(ok);
+}
+.tone-warn {
+  @include m.tint(warn);
+}
+.tone-danger {
+  @include m.tint(danger);
+}
+.tone-neutral {
+  color: var(--text-2);
+  border-color: var(--border-strong);
+}
+@media (max-width: 480px) {
+  .node-card {
+    padding: 12px;
+  }
+}
diff --git a/app/src/pages/signals/resource-list.ts b/app/src/pages/signals/resource-list.ts
new file mode 100644
index 00000000..ba53c0c3
--- /dev/null
+++ b/app/src/pages/signals/resource-list.ts
@@ -0,0 +1,25 @@
+import { Component, inject } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { SignalDetail } from './signal-detail';
+import { kindColor, statusTone } from './signal-model';
+import { SignalState } from './signal-state';
+
+/** The resources of the shown graph, each a card that opens its detail. */
+@Component({
+  selector: 'ul[appResourceList]',
+  imports: [JsonPipe, SignalDetail],
+  templateUrl: './resource-list.html',
+  styleUrl: './resource-list.scss',
+})
+export class ResourceList {
+  private readonly state = inject(SignalState);
+
+  readonly filteredResources = this.state.filteredResources;
+  readonly selectedId = this.state.selectedId;
+  readonly kindColor = kindColor;
+  readonly statusTone = statusTone;
+
+  select(id: string) {
+    this.state.select(id);
+  }
+}
diff --git a/app/src/pages/signals/signal-detail-state.ts b/app/src/pages/signals/signal-detail-state.ts
new file mode 100644
index 00000000..dd2782a7
--- /dev/null
+++ b/app/src/pages/signals/signal-detail-state.ts
@@ -0,0 +1,169 @@
+import { Injectable, computed, inject, signal } from '@angular/core';
+import type { SignalChange } from '@pangular-inspector/devtools/internal/types';
+import { actionAllowed, actionBlockedMessage } from '../../devtools-config';
+import { isNativePage } from '../../native-page';
+import { isStaticReport } from '../../rpc';
+import { jsonDiff, type JsonDiffEntry } from '../json-diff';
+import {
+  MAX_HISTORY,
+  type RestoreResult,
+  type SignalNode,
+  type SourceSignal,
+} from './signal-model';
+import { SignalState } from './signal-state';
+
+/**
+ * The detail of the selected signal or resource: its value history with diffs and restore, the
+ * source declaration it matches and why it may have no exact writes. Provided by the page next to
+ * {@link SignalState}.
+ */
+@Injectable()
+export class SignalDetailState {
+  private readonly state = inject(SignalState);
+
+  readonly selectedHistory = computed(() => {
+    const id = this.state.selectedId();
+    return id ? [...(this.state.graph()?.history?.[id] ?? [])].reverse() : [];
+  });
+
+  /**
+   * Why history entries cannot be restored on the shown page, or '' when they
+   * can: the same gate as component edits (a live browser page with
+   * `actions.components` on).
+   */
+  readonly restoreBlocked = computed(() => {
+    const client = this.state.rpc();
+    if (isStaticReport(client)) return 'A saved report cannot write to the app.';
+    const pageId = this.state.graph()?.pageId;
+    if (isNativePage(pageId ? this.state.treePages()[pageId] : null)) {
+      return 'It needs the app open in a browser.';
+    }
+    if (!actionAllowed(client, 'components')) return actionBlockedMessage('components');
+    return '';
+  });
+  readonly restoring = signal(false);
+  readonly restoreResult = signal<{ id: string; text: string; error: boolean } | null>(null);
+
+  /** The node with this id when its history can be restored: a writable field of the shown component. */
+  restorable(id: string): SignalNode | null {
+    const g = this.state.graph();
+    const node = g?.nodes.find((n) => n.id === id);
+    if (!node?.locator) return null;
+    if (node.locator.owner === 'service') {
+      return g?.injector && node.locator.id === g.injector.id ? node : null;
+    }
+    return g?.component && node.locator.id === g.component.id ? node : null;
+  }
+
+  /** Writes the value the page kept for this entry back to the signal. */
+  async restore(node: SignalNode, change: SignalChange, time: string) {
+    const client = this.state.rpc();
+    const pageId = this.state.graph()?.pageId;
+    const locator = node.locator;
+    if (!client || !pageId || !locator || this.restoring() || this.restoreBlocked()) return;
+    this.restoring.set(true);
+    let result: RestoreResult;
+    try {
+      result = ((await client.scope('pangular').rpc.call('request-signal-restore', {
+        pageId,
+        request: {
+          component: locator.id,
+          ...(locator.owner === 'service' ? { owner: 'service' } : {}),
+          node: node.id,
+          epoch: change.epoch,
+        },
+      })) ?? {}) as RestoreResult;
+    } catch {
+      result = { error: 'The devtools server did not answer. Try again.' };
+    }
+    this.restoring.set(false);
+    this.restoreResult.set(
+      result.ok
+        ? {
+            id: node.id,
+            text: `Restored ${result.key ?? locator.key} to the value from ${time}.`,
+            error: false,
+          }
+        : { id: node.id, text: result.error ?? 'The page did not restore it.', error: true },
+    );
+  }
+
+  /**
+   * What changed in each history entry of the selected node against the
+   * entry before it, by epoch. Only for entries whose values are both
+   * objects or arrays; a plain value already shows whole.
+   */
+  readonly diffs = computed(() => {
+    const id = this.state.selectedId();
+    const entries = id ? (this.state.graph()?.history?.[id] ?? []) : [];
+    const out = new Map<number, JsonDiffEntry[]>();
+    for (let i = 1; i < entries.length; i++) {
+      const before = entries[i - 1]!.value;
+      const after = entries[i]!.value;
+      if (!before || !after || typeof before !== 'object' || typeof after !== 'object') continue;
+      const diff = jsonDiff(before, after);
+      if (diff.length) out.set(entries[i]!.epoch, diff);
+    }
+    return out;
+  });
+
+  diffLabel(kind: JsonDiffEntry['kind']): string {
+    return kind === 'added' ? 'added' : kind === 'removed' ? 'removed' : 'changed';
+  }
+
+  /**
+   * The source declaration of the selected live node, from the source scan:
+   * declarations with the node's name and a matching kind, narrowed to the
+   * shown component's selector when some are in it. One left is `exact`;
+   * several are listed as `candidates`, since the name alone can't tell them
+   * apart.
+   */
+  readonly sourceMatch = computed<{
+    exact: SourceSignal | null;
+    candidates: SourceSignal[];
+  } | null>(() => {
+    const node = this.state.selectedNode();
+    const label = node?.label;
+    if (!node || !label) return null;
+    const kindMatches = (source: string) =>
+      source === node.kind ||
+      source.startsWith(`${node.kind} `) ||
+      source.startsWith(`${node.kind}.`) ||
+      (node.kind === 'signal' && source.startsWith('model')) ||
+      (node.kind === 'computed' && source === 'toSignal');
+    let found = this.state.sourceSignals().filter((s) => s.name === label && kindMatches(s.kind));
+    const g = this.state.graph();
+    const owner = g?.component?.tag ?? g?.element?.tag;
+    const own = owner ? found.filter((s) => s.component === owner) : [];
+    if (own.length) found = own;
+    if (!found.length) return null;
+    return found.length === 1
+      ? { exact: found[0]!, candidates: [] }
+      : { exact: null, candidates: found.slice(0, 5) };
+  });
+
+  /** Why a writable signal has no exact set entries, when the panel can tell. */
+  readonly writeHint = computed(() => {
+    const node = this.state.selectedNode();
+    const g = this.state.graph();
+    if (!node || !g || g.writeHook === false) return '';
+    if (node.kind !== 'signal' && node.kind !== 'linkedSignal') return '';
+    if (!node.label) {
+      return "This signal has no name, so its history holds sampled values only. From Angular 20.1 the compiler names a signal that initializes a field or variable, so this one was likely made in a factory or helper. Pass a debugName in its options, for example signal(0, { debugName: 'count' }).";
+    }
+    const history = g.history?.[node.id] ?? [];
+    if (history.some((c) => c.source === 'write') || !history.some((c) => c.source === 'sample')) {
+      return '';
+    }
+    return 'Every change here was sampled. Writes are matched by name, kind, version and value, so another live signal with the same name and value can hide them.';
+  });
+
+  historySummary(id: string): string {
+    const count = this.state.changeCount(id);
+    const kept = this.state.graph()?.history?.[id]?.length ?? 0;
+    if (!count) return 'No changes recorded yet. The entry below is the value seen first.';
+    const changes = `${count} ${count === 1 ? 'change' : 'changes'} recorded`;
+    const shown = kept >= MAX_HISTORY && count >= kept ? `, showing the last ${kept}` : '';
+    return `${changes}${shown}, newest first.`;
+  }
+}
diff --git a/app/src/pages/signals/signal-detail.html b/app/src/pages/signals/signal-detail.html
new file mode 100644
index 00000000..0b24931f
--- /dev/null
+++ b/app/src/pages/signals/signal-detail.html
@@ -0,0 +1,267 @@
+<ng-template #historyTpl let-id="id" let-label="label">
+  @if (selectedHistory().length) {
+    <h4 [id]="'history-heading-' + id">{{ label }}</h4>
+    <p class="history-summary">{{ historySummary(id) }}</p>
+    @let restoreNode = restorable(id);
+    @if (restoreNode) {
+      @if (restoreBlocked(); as reason) {
+        <p class="hint">Restore is off. {{ reason }}</p>
+      }
+      <p
+        class="restore-result"
+        role="status"
+        [class.has-text]="restoreResult()?.id === id"
+        [class.restore-error]="restoreResult()?.id === id && restoreResult()?.error"
+      >
+        {{ restoreResult()?.id === id ? restoreResult()?.text : '' }}
+      </p>
+    }
+    <ol class="history scroll-box" tabindex="0" [attr.aria-labelledby]="'history-heading-' + id">
+      @for (change of selectedHistory(); track change.epoch) {
+        <li>
+          <span class="history-meta">
+            <time>{{ change.at | date: 'HH:mm:ss.SSS' }}</time>
+            <span class="source-tag" [class]="'source-' + change.source">{{
+              sourceLabel(change.source)
+            }}</span>
+            <span>epoch {{ change.epoch }}</span>
+            @if (change.missed) {
+              <span class="missed">{{ change.missed }} earlier not captured</span>
+            }
+            @if (restoreNode && !restoreBlocked() && !$first) {
+              @let time = change.at | date: 'HH:mm:ss.SSS';
+              <button
+                type="button"
+                class="restore"
+                [attr.aria-label]="'Restore value from ' + time"
+                [attr.aria-disabled]="restoring() || null"
+                (click)="restore(restoreNode, change, time ?? '')"
+              >
+                Restore
+              </button>
+            }
+          </span>
+          <pre>{{ change.value | json }}</pre>
+          @if (diffs().get(change.epoch); as diff) {
+            <details class="diff">
+              <summary>Changes from the entry before ({{ diff.length }})</summary>
+              <ul class="diff-list">
+                @for (d of diff; track d.path) {
+                  <li [class]="'diff-' + d.kind">
+                    <span class="diff-kind">{{ diffLabel(d.kind) }}</span
+                    ><span class="sr-only">: </span> <code class="diff-path">{{ d.path }}</code
+                    ><span class="sr-only">, </span>
+                    @if (d.kind !== 'added') {
+                      <code class="diff-old">{{ d.before | json }}</code>
+                    }
+                    @if (d.kind === 'changed') {
+                      <span class="sr-only">to</span><span aria-hidden="true">→</span>
+                    }
+                    @if (d.kind !== 'removed') {
+                      <code class="diff-new">{{ d.after | json }}</code>
+                    }
+                  </li>
+                }
+              </ul>
+            </details>
+          }
+          @if (change.stack?.length) {
+            <ol class="stack" aria-label="Written from">
+              @for (frame of change.stack; track $index) {
+                <li>{{ frame }}</li>
+              }
+            </ol>
+          }
+        </li>
+      }
+    </ol>
+  }
+</ng-template>
+
+@if (resource(); as res) {
+  <h3 class="detail-title">{{ res.name }}</h3>
+  @if (!res.named) {
+    <p class="hint">
+      This resource has no name. Pass <code>debugName</code> to <code>resource()</code> or
+      <code>httpResource()</code> to name it here.
+    </p>
+  }
+  <dl>
+    <dt>Status</dt>
+    <dd>{{ res.status ?? 'unknown' }}</dd>
+    @if (res.isLoading !== undefined) {
+      <dt>Loading</dt>
+      <dd>{{ res.isLoading ? 'yes' : 'no' }}</dd>
+    }
+    @if (res.statusCode !== undefined) {
+      <dt>HTTP status</dt>
+      <dd>{{ res.statusCode }}</dd>
+    }
+    @if (res.params !== undefined) {
+      <dt>Params</dt>
+      <dd>
+        <pre
+          class="scroll-box"
+          role="region"
+          tabindex="0"
+          [attr.aria-label]="'Params of ' + res.name"
+          >{{ res.params | json }}</pre>
+      </dd>
+    }
+    @if (res.value !== undefined) {
+      <dt>Value</dt>
+      <dd>
+        <pre
+          class="scroll-box"
+          role="region"
+          tabindex="0"
+          [attr.aria-label]="'Value of ' + res.name"
+          >{{ res.value | json }}</pre>
+      </dd>
+    }
+    @if (res.error !== undefined) {
+      <dt>Error</dt>
+      <dd>
+        <pre
+          class="scroll-box"
+          role="region"
+          tabindex="0"
+          [attr.aria-label]="'Error of ' + res.name"
+          >{{ res.error | json }}</pre>
+      </dd>
+    }
+  </dl>
+  <ng-container
+    [ngTemplateOutlet]="historyTpl"
+    [ngTemplateOutletContext]="{ id: res.id, label: 'Status history' }"
+  />
+  <button
+    type="button"
+    class="reset internals-toggle"
+    [attr.aria-expanded]="showInternals()"
+    [attr.aria-controls]="'resource-internals-' + res.id"
+    (click)="showInternals.set(!showInternals())"
+  >
+    {{ showInternals() ? 'Hide' : 'Show' }} internal signals ({{ res.nodeIds.length }})
+  </button>
+  @if (showInternals()) {
+    <ul [id]="'resource-internals-' + res.id">
+      @for (inner of internalsOf(res); track inner.id) {
+        <li>
+          <span class="kind-badge sm" [style.background]="kindColor(inner.kind)">{{
+            inner.kind
+          }}</span>
+          <span class="rel-label">{{ inner.label ?? inner.id }}</span>
+        </li>
+      }
+    </ul>
+  }
+} @else if (selectedNode(); as node) {
+  <h3 class="detail-title">{{ selectedNode()!.label ?? selectedNode()!.id }}</h3>
+  <dl>
+    <dt>Kind</dt>
+    <dd>{{ selectedNode()!.kind }}</dd>
+    <dt>Epoch</dt>
+    <dd>{{ selectedNode()!.epoch }}</dd>
+    @if (selectedNode()!.runs; as runs) {
+      <dt>Runs</dt>
+      <dd>
+        {{ runs }}, {{ selectedNode()!.runMs ?? 0 }} ms in all, last
+        {{ selectedNode()!.lastRunMs ?? 0 }} ms
+      </dd>
+    }
+    @if (sourceMatch(); as match) {
+      <dt>Source</dt>
+      <dd class="source-matches">
+        @if (match.exact) {
+          <app-source-link [file]="match.exact.file" [line]="match.exact.line" />
+        } @else {
+          <span class="hint-inline"
+            >{{ match.candidates.length }} declarations match this name:</span
+          >
+          <ul class="source-candidates">
+            @for (c of match.candidates; track c.file + c.line) {
+              <li>
+                <app-source-link [file]="c.file" [line]="c.line" />
+                @if (c.component) {
+                  <span class="hint-inline">in {{ c.component }}</span>
+                }
+              </li>
+            }
+          </ul>
+        }
+      </dd>
+    }
+    @if (selectedNode()!.value !== undefined) {
+      <dt>Value</dt>
+      <dd>
+        <pre
+          class="scroll-box"
+          role="region"
+          tabindex="0"
+          [attr.aria-label]="'Value of ' + (selectedNode()!.label ?? 'signal')"
+          >{{ selectedNode()!.value | json }}</pre>
+      </dd>
+    }
+  </dl>
+  @if (getDependencies(selectedNode()!).length) {
+    <h4>Dependencies (producers)</h4>
+    <ul>
+      @for (dep of getDependencies(selectedNode()!); track dep.id) {
+        <li>
+          <button
+            type="button"
+            class="rel-link"
+            [attr.aria-label]="'Go to ' + dep.kind + ' ' + (dep.label ?? dep.id)"
+            (click)="jumpTo(dep)"
+          >
+            <span class="kind-badge sm" [style.background]="kindColor(dep.kind)">{{
+              dep.kind
+            }}</span>
+            <span class="rel-label">{{ dep.label ?? dep.id }}</span>
+          </button>
+        </li>
+      }
+    </ul>
+  }
+  @if (getConsumers(selectedNode()!).length) {
+    <h4>Consumers</h4>
+    <ul>
+      @for (con of getConsumers(selectedNode()!); track con.id) {
+        <li>
+          <button
+            type="button"
+            class="rel-link"
+            [attr.aria-label]="'Go to ' + con.kind + ' ' + (con.label ?? con.id)"
+            (click)="jumpTo(con)"
+          >
+            <span class="kind-badge sm" [style.background]="kindColor(con.kind)">{{
+              con.kind
+            }}</span>
+            <span class="rel-label">{{ con.label ?? con.id }}</span>
+          </button>
+        </li>
+      }
+    </ul>
+  }
+  @if (isWatchable(selectedNode()!)) {
+    <button
+      type="button"
+      class="reset watch-toggle"
+      [attr.aria-pressed]="watchedIds().has(selectedNode()!.id)"
+      (click)="toggleWatch(selectedNode()!)"
+    >
+      Watch
+    </button>
+    <p class="hint">
+      A watched signal is listed under Watched and logs each change to the page console.
+    </p>
+  }
+  @if (writeHint(); as hint) {
+    <p class="hint">{{ hint }}</p>
+  }
+  <ng-container
+    [ngTemplateOutlet]="historyTpl"
+    [ngTemplateOutletContext]="{ id: node.id, label: 'Value history' }"
+  />
+}
diff --git a/app/src/pages/signals/signal-detail.scss b/app/src/pages/signals/signal-detail.scss
new file mode 100644
index 00000000..969471b9
--- /dev/null
+++ b/app/src/pages/signals/signal-detail.scss
@@ -0,0 +1,229 @@
+@use 'mixins' as m;
+@use 'signals' as sig;
+
+@include sig.states;
+@include sig.cards;
+@include sig.fields;
+@include sig.pre;
+@include sig.badge-sm;
+:host(.detail-panel) {
+  margin-top: 8px;
+  padding: 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  @include m.enter(0.25s);
+}
+.detail-title {
+  margin: 0 0 16px;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent);
+  overflow-wrap: anywhere;
+}
+:host(.detail-panel) h4 {
+  @include m.label;
+  margin: 20px 0 8px;
+}
+:host(.detail-panel) dd pre {
+  max-height: 240px;
+  overflow: auto;
+  padding: 8px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+@include sig.scroll-box;
+:host(.detail-panel) .hint {
+  margin: 0 0 12px;
+}
+.internals-toggle {
+  margin-top: 16px;
+}
+:host(.detail-panel) .internals-toggle + ul {
+  margin-top: 8px;
+}
+:host(.detail-panel) ul {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 13px;
+}
+:host(.detail-panel) ul li,
+.rel-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 28px;
+  padding: 4px 8px;
+  color: var(--text-2);
+  border-radius: 6px;
+}
+:host(.detail-panel) ul li:has(> .rel-link) {
+  padding: 0;
+}
+.rel-link {
+  width: 100%;
+  font: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition:
+    background-color 0.15s var(--ease),
+    color 0.15s var(--ease);
+}
+.rel-link:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.rel-link:focus-visible {
+  @include m.focus-ring;
+}
+@include sig.rel-label;
+.history-summary {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--text-2);
+  font-variant-numeric: tabular-nums;
+}
+@include sig.history;
+.missed {
+  color: var(--warn);
+}
+.restore {
+  margin-left: auto;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  color: var(--text);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 150ms var(--ease),
+    border-color 150ms var(--ease);
+}
+.restore:hover:not([aria-disabled='true']) {
+  background: var(--surface-3);
+  border-color: var(--accent-line);
+}
+.restore[aria-disabled='true'] {
+  opacity: 0.6;
+  cursor: progress;
+}
+.restore:focus-visible {
+  @include m.focus-ring(-2px);
+}
+.diff {
+  margin-top: 6px;
+  font-size: 12px;
+}
+.diff summary {
+  color: var(--text-2);
+  cursor: pointer;
+}
+.diff summary:focus-visible {
+  @include m.focus-ring;
+}
+.diff-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.diff-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.diff-kind {
+  padding: 0 6px;
+  border-radius: 5px;
+  font-size: 10px;
+  line-height: 16px;
+}
+.diff-added .diff-kind {
+  @include m.tint(ok);
+}
+.diff-removed .diff-kind {
+  @include m.tint(danger);
+}
+.diff-changed .diff-kind {
+  @include m.tint(accent);
+}
+.diff-path {
+  color: var(--text-strong);
+}
+.diff-old {
+  color: var(--text-2);
+  text-decoration: line-through;
+}
+.diff-new {
+  color: var(--text);
+}
+.source-matches {
+  min-width: 0;
+}
+.source-candidates {
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.hint-inline {
+  color: var(--text-2);
+  font-size: 12px;
+}
+.restore-result {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-2);
+}
+.restore-result.has-text {
+  margin-bottom: 8px;
+}
+.restore-result.restore-error {
+  color: var(--danger-text);
+}
+@media (prefers-reduced-motion: reduce) {
+  .restore {
+    transition: none;
+  }
+}
+@include sig.stack;
+.watch-toggle {
+  margin: 16px 0 8px;
+}
+.watch-toggle[aria-pressed='true'] {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+  color: var(--text-strong);
+}
+@media (max-width: 480px) {
+  :host(.detail-panel) {
+    padding: 12px;
+  }
+  dl {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+  }
+  dd + dt {
+    margin-top: 8px;
+  }
+}
diff --git a/app/src/pages/signals/signal-detail.ts b/app/src/pages/signals/signal-detail.ts
new file mode 100644
index 00000000..3458ce68
--- /dev/null
+++ b/app/src/pages/signals/signal-detail.ts
@@ -0,0 +1,80 @@
+import { Component, inject, input } from '@angular/core';
+import { DatePipe, JsonPipe, NgTemplateOutlet } from '@angular/common';
+import type { SignalChange } from '@pangular-inspector/devtools/internal/types';
+import { SourceLink } from '../../ui/source-link';
+import type { SignalResource } from '../../types/signal-graph.types';
+import type { JsonDiffEntry } from '../json-diff';
+import { SignalDetailState } from './signal-detail-state';
+import { kindColor, sourceLabel, type SignalNode } from './signal-model';
+import { SignalState } from './signal-state';
+
+/**
+ * The detail panel under a selected card: a resource's fields and internal signals, or a
+ * signal's fields, producers, consumers and watch toggle, each with its value history.
+ */
+@Component({
+  selector: 'div[appSignalDetail]',
+  imports: [DatePipe, JsonPipe, NgTemplateOutlet, SourceLink],
+  templateUrl: './signal-detail.html',
+  styleUrl: './signal-detail.scss',
+})
+export class SignalDetail {
+  /** The resource to show; without one the panel shows the selected signal. */
+  readonly resource = input<SignalResource | null>(null);
+
+  private readonly state = inject(SignalState);
+  private readonly detail = inject(SignalDetailState);
+
+  readonly selectedNode = this.state.selectedNode;
+  readonly showInternals = this.state.showInternals;
+  readonly watchedIds = this.state.watchedIds;
+  readonly selectedHistory = this.detail.selectedHistory;
+  readonly restoreBlocked = this.detail.restoreBlocked;
+  readonly restoring = this.detail.restoring;
+  readonly restoreResult = this.detail.restoreResult;
+  readonly diffs = this.detail.diffs;
+  readonly sourceMatch = this.detail.sourceMatch;
+  readonly writeHint = this.detail.writeHint;
+  readonly kindColor = kindColor;
+  readonly sourceLabel = sourceLabel;
+
+  getDependencies(node: SignalNode): SignalNode[] {
+    return this.state.getDependencies(node);
+  }
+
+  getConsumers(node: SignalNode): SignalNode[] {
+    return this.state.getConsumers(node);
+  }
+
+  jumpTo(node: SignalNode) {
+    this.state.jumpTo(node);
+  }
+
+  isWatchable(node: SignalNode): boolean {
+    return this.state.isWatchable(node);
+  }
+
+  toggleWatch(node: SignalNode) {
+    this.state.toggleWatch(node);
+  }
+
+  internalsOf(resource: SignalResource): SignalNode[] {
+    return this.state.internalsOf(resource);
+  }
+
+  historySummary(id: string): string {
+    return this.detail.historySummary(id);
+  }
+
+  restorable(id: string): SignalNode | null {
+    return this.detail.restorable(id);
+  }
+
+  restore(node: SignalNode, change: SignalChange, time: string) {
+    return this.detail.restore(node, change, time);
+  }
+
+  diffLabel(kind: JsonDiffEntry['kind']): string {
+    return this.detail.diffLabel(kind);
+  }
+}
diff --git a/app/src/pages/signals/signal-graph-section.html b/app/src/pages/signals/signal-graph-section.html
new file mode 100644
index 00000000..2a665dc9
--- /dev/null
+++ b/app/src/pages/signals/signal-graph-section.html
@@ -0,0 +1,64 @@
+<div class="section-head">
+  <h2 id="signal-graph-heading" class="list-heading">Graph</h2>
+  <div class="section-actions">
+    @if (frameworkCount(); as hidden) {
+      <button
+        type="button"
+        class="toggle"
+        [attr.aria-pressed]="showFramework()"
+        (click)="showFramework.set(!showFramework())"
+      >
+        Show framework signals
+        <span class="count">{{ hidden }} {{ showFramework() ? 'shown' : 'hidden' }}</span>
+      </button>
+    }
+    <button type="button" class="toggle" [attr.aria-pressed]="stacksOn()" (click)="toggleStacks()">
+      Record write stacks
+    </button>
+    <button
+      type="button"
+      class="toggle"
+      aria-controls="signal-graph-body"
+      [attr.aria-expanded]="showGraph()"
+      (click)="showGraph.set(!showGraph())"
+    >
+      {{ showGraph() ? 'Hide graph' : 'Show graph' }}
+    </button>
+  </div>
+</div>
+@if (stacksOn()) {
+  <p class="hint graph-hint">
+    Write stacks are on for this page. Each set of a named signal keeps the first 3 app frames of
+    the code that wrote it, shown in its value history. Taking a stack slows every write, so turn it
+    off when you are done.
+  </p>
+}
+@if (showGraph()) {
+  <div id="signal-graph-body">
+    @if (graphNodes().length) {
+      <app-signal-graph-view
+        [nodes]="graphNodes()"
+        [links]="graphLinks()"
+        [selectedId]="selectedId()"
+        [watched]="watchedIds()"
+        [kindColor]="kindColorOf"
+        (selected)="selectFromGraph($event)"
+      />
+    } @else {
+      <p class="hint graph-hint">
+        Every signal in this graph was created by Angular. Show framework signals to see them.
+      </p>
+    }
+    @if (selectedNode(); as node) {
+      <p class="graph-selection">
+        <span>Selected</span>
+        <span class="rel-label">{{ node.label ?? '(unnamed)' }}</span>
+        <span class="sep" aria-hidden="true">·</span>
+        <span>{{ plural(getDependencies(node).length, 'producer') }}</span>
+        <span class="sep" aria-hidden="true">·</span>
+        <span>{{ plural(getConsumers(node).length, 'consumer') }}</span>
+        <button type="button" class="link-button" (click)="jumpTo(node)">Show details</button>
+      </p>
+    }
+  </div>
+}
diff --git a/app/src/pages/signals/signal-graph-section.scss b/app/src/pages/signals/signal-graph-section.scss
new file mode 100644
index 00000000..7bb15653
--- /dev/null
+++ b/app/src/pages/signals/signal-graph-section.scss
@@ -0,0 +1,78 @@
+@use 'mixins' as m;
+@use 'signals' as sig;
+
+@include sig.states;
+@include sig.sep;
+@include sig.list-heading;
+@include sig.rel-label;
+:host(.graph-section) {
+  margin-bottom: 16px;
+}
+.section-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 12px;
+  margin: 16px 0 8px;
+}
+.section-head .list-heading {
+  margin: 0;
+}
+.section-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--control-h);
+  padding: 0 12px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  color: var(--text);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s var(--ease),
+    border-color 0.15s var(--ease);
+}
+.toggle:hover {
+  background: var(--surface-3);
+}
+.toggle[aria-pressed='true'] {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+  color: var(--text-strong);
+}
+.toggle:focus-visible {
+  @include m.focus-ring;
+}
+.toggle .count {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--surface-3);
+  color: var(--text-2);
+  font-size: 11px;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+.graph-hint {
+  margin: 0 0 8px;
+  max-width: none;
+}
+.graph-selection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--text-2);
+}
+@include sig.link-button;
diff --git a/app/src/pages/signals/signal-graph-section.ts b/app/src/pages/signals/signal-graph-section.ts
new file mode 100644
index 00000000..70395213
--- /dev/null
+++ b/app/src/pages/signals/signal-graph-section.ts
@@ -0,0 +1,50 @@
+import { Component, inject } from '@angular/core';
+import { SignalGraphView } from '../signal-graph-view';
+import { kindColor, plural, type SignalNode } from './signal-model';
+import { SignalState } from './signal-state';
+
+/**
+ * The drawn signal graph of the Signals page, with the framework, write stack and show or hide
+ * toggles, and a line about the node selected in it.
+ */
+@Component({
+  selector: 'section[appSignalGraphSection]',
+  imports: [SignalGraphView],
+  templateUrl: './signal-graph-section.html',
+  styleUrl: './signal-graph-section.scss',
+})
+export class SignalGraphSection {
+  private readonly state = inject(SignalState);
+
+  readonly frameworkCount = this.state.frameworkCount;
+  readonly showFramework = this.state.showFramework;
+  readonly stacksOn = this.state.stacksOn;
+  readonly showGraph = this.state.showGraph;
+  readonly graphNodes = this.state.graphNodes;
+  readonly graphLinks = this.state.graphLinks;
+  readonly selectedId = this.state.selectedId;
+  readonly selectedNode = this.state.selectedNode;
+  readonly watchedIds = this.state.watchedIds;
+  readonly kindColorOf = (kind: string) => kindColor(kind);
+  readonly plural = plural;
+
+  toggleStacks() {
+    this.state.toggleStacks();
+  }
+
+  selectFromGraph(id: string) {
+    this.state.selectFromGraph(id);
+  }
+
+  getDependencies(node: SignalNode): SignalNode[] {
+    return this.state.getDependencies(node);
+  }
+
+  getConsumers(node: SignalNode): SignalNode[] {
+    return this.state.getConsumers(node);
+  }
+
+  jumpTo(node: SignalNode) {
+    this.state.jumpTo(node);
+  }
+}
diff --git a/app/src/pages/signals/signal-list.html b/app/src/pages/signals/signal-list.html
new file mode 100644
index 00000000..95c37496
--- /dev/null
+++ b/app/src/pages/signals/signal-list.html
@@ -0,0 +1,61 @@
+@for (node of filteredNodes(); track node.id) {
+  <li>
+    <button
+      type="button"
+      class="node-card"
+      [class.selected]="selectedId() === node.id"
+      [attr.aria-expanded]="selectedId() === node.id"
+      [attr.aria-controls]="'signal-detail-' + node.id"
+      [attr.data-card]="node.id"
+      (click)="select(node.id)"
+    >
+      <span class="node-header">
+        <span class="kind-badge" [style.background]="kindColor(node.kind)">{{ node.kind }}</span>
+        <span class="node-label">{{ node.label ?? '(unnamed)' }}</span>
+        @if (watchedIds().has(node.id)) {
+          <span class="watching-badge">watching</span>
+        }
+        @if (node.framework) {
+          <span class="framework-badge">framework</span>
+        }
+        @if (changeCount(node.id); as count) {
+          <span class="changed-badge">{{ count }} {{ count === 1 ? 'change' : 'changes' }}</span>
+        }
+        <span class="chevron" aria-hidden="true"></span>
+      </span>
+      @if (node.value !== undefined) {
+        <span class="node-value">{{ node.value | json }}</span>
+      }
+      <span class="node-meta">
+        <span>Epoch: {{ node.epoch }}</span>
+        @if (getDependencies(node).length) {
+          <span class="sep" aria-hidden="true">·</span>
+          <span>Deps: {{ getDependencies(node).length }}</span>
+        }
+        @if (getConsumers(node).length) {
+          <span class="sep" aria-hidden="true">·</span>
+          <span>Consumers: {{ getConsumers(node).length }}</span>
+        }
+      </span>
+    </button>
+    @if (selectedId() === node.id && selectedNode()) {
+      <div class="detail-panel" appSignalDetail [id]="'signal-detail-' + node.id"></div>
+    }
+  </li>
+} @empty {
+  <li class="empty compact">
+    <p class="empty-title">
+      {{ hasAnySignals() ? 'No signals match.' : 'No signals in this graph.' }}
+    </p>
+    <p class="hint">
+      {{
+        hasAnySignals()
+          ? 'Try a different name or kind.'
+          : 'Select a component that reads signals, or interact with the page to create some.'
+      }}
+    </p>
+    @if (hasAnySignals() || filter() || kind()) {
+      <button type="button" class="reset" (click)="clearFilters()">Clear filters</button>
+    }
+  </li>
+}
diff --git a/app/src/pages/signals/signal-list.scss b/app/src/pages/signals/signal-list.scss
new file mode 100644
index 00000000..844719ca
--- /dev/null
+++ b/app/src/pages/signals/signal-list.scss
@@ -0,0 +1,30 @@
+@use 'mixins' as m;
+@use 'signals' as sig;
+
+@include sig.states;
+@include sig.cards;
+@include sig.node-list;
+@include sig.node-cards;
+@include sig.changed-badge;
+.watching-badge,
+.framework-badge {
+  flex: none;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 99px;
+}
+.watching-badge {
+  @include m.tint(accent);
+}
+.framework-badge {
+  color: var(--text-2);
+  border-color: var(--border-strong);
+}
+@media (max-width: 480px) {
+  .node-card {
+    padding: 12px;
+  }
+}
diff --git a/app/src/pages/signals/signal-list.ts b/app/src/pages/signals/signal-list.ts
new file mode 100644
index 00000000..b49f237b
--- /dev/null
+++ b/app/src/pages/signals/signal-list.ts
@@ -0,0 +1,45 @@
+import { Component, inject } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { SignalDetail } from './signal-detail';
+import { kindColor, type SignalNode } from './signal-model';
+import { SignalState } from './signal-state';
+
+/** The signals of the shown graph, each a card that opens its detail, or the no-match state. */
+@Component({
+  selector: 'ul[appSignalList]',
+  imports: [JsonPipe, SignalDetail],
+  templateUrl: './signal-list.html',
+  styleUrl: './signal-list.scss',
+})
+export class SignalList {
+  private readonly state = inject(SignalState);
+
+  readonly filteredNodes = this.state.filteredNodes;
+  readonly selectedId = this.state.selectedId;
+  readonly selectedNode = this.state.selectedNode;
+  readonly watchedIds = this.state.watchedIds;
+  readonly hasAnySignals = this.state.hasAnySignals;
+  readonly filter = this.state.filter;
+  readonly kind = this.state.kind;
+  readonly kindColor = kindColor;
+
+  select(id: string) {
+    this.state.select(id);
+  }
+
+  changeCount(id: string): number {
+    return this.state.changeCount(id);
+  }
+
+  getDependencies(node: SignalNode): SignalNode[] {
+    return this.state.getDependencies(node);
+  }
+
+  getConsumers(node: SignalNode): SignalNode[] {
+    return this.state.getConsumers(node);
+  }
+
+  clearFilters() {
+    this.state.clearFilters();
+  }
+}
diff --git a/app/src/pages/signals/signal-model.ts b/app/src/pages/signals/signal-model.ts
new file mode 100644
index 00000000..ec1203c7
--- /dev/null
+++ b/app/src/pages/signals/signal-model.ts
@@ -0,0 +1,107 @@
+import type { SignalChange, SignalGraphNode } from '@pangular-inspector/devtools/internal/types';
+import type { SignalGraph } from '../../types/signal-graph.types';
+
+export type SignalNode = SignalGraphNode;
+
+export interface RestoreResult {
+  ok?: boolean;
+  key?: string;
+  error?: string;
+}
+
+export interface LiveNode {
+  id: string;
+  name: string;
+  tag: string;
+  /** `directive` for an element that hosts directives but no component. */
+  kind?: 'directive';
+  children: LiveNode[];
+}
+
+export interface SourceSignal {
+  name: string;
+  kind: string;
+  file: string;
+  line: number;
+  component?: string;
+}
+
+export const FOLLOW = 'follow';
+
+// Older servers send only the newest graph, without the per-page map.
+export function graphPagesOf(state: {
+  graph?: SignalGraph | null;
+  pages: Record<string, SignalGraph>;
+}): Record<string, SignalGraph> {
+  if (Object.keys(state.pages).length) return state.pages;
+  return state.graph ? { [state.graph.pageId ?? '']: state.graph } : {};
+}
+export const ENV = 'env:';
+export const MAX_HISTORY = 50;
+/** Kinds with a value, so the page can watch them. */
+export const WATCHABLE = new Set(['signal', 'computed', 'linkedSignal']);
+/** Changes of watched signals the panel lists. */
+export const WATCH_LOG = 20;
+
+const SOURCE_NOTES: Record<NonNullable<SignalGraph['source']>, string> = {
+  selected: 'picked',
+  routed: 'rendered by the router',
+  root: 'first component with signals',
+};
+
+const SOURCE_LABELS: Record<SignalChange['source'], string> = {
+  write: 'set',
+  sample: 'sampled',
+  initial: 'initial',
+};
+
+const RESOURCE_STATUS_TONES: Record<string, string> = {
+  resolved: 'ok',
+  local: 'ok',
+  loading: 'warn',
+  reloading: 'warn',
+  error: 'danger',
+};
+
+/** Each kind's `--kind-*` token from `_palette.scss` (`$signal-kinds`). */
+const KIND_TOKENS: Record<string, string> = {
+  signal: 'signal',
+  computed: 'computed',
+  linkedSignal: 'linked',
+  effect: 'effect',
+  template: 'template',
+  afterRenderEffectPhase: 'after-render',
+  childSignalProp: 'child-prop',
+  'input (signal)': 'input',
+  'input.required (signal)': 'input',
+  'output (signal)': 'output',
+  'model (signal)': 'model',
+  'model.required (signal)': 'model',
+  'viewChild (signal)': 'view-query',
+  'viewChild.required (signal)': 'view-query',
+  'viewChildren (signal)': 'view-query',
+  'contentChild (signal)': 'content-query',
+  'contentChild.required (signal)': 'content-query',
+  'contentChildren (signal)': 'content-query',
+  resource: 'resource',
+};
+
+export function sourceNote(source: NonNullable<SignalGraph['source']>) {
+  return SOURCE_NOTES[source];
+}
+
+export function sourceLabel(source: SignalChange['source']) {
+  return SOURCE_LABELS[source];
+}
+
+export function statusTone(status: string) {
+  return RESOURCE_STATUS_TONES[status] ?? 'neutral';
+}
+
+export function kindColor(kind: string) {
+  return `var(--kind-${KIND_TOKENS[kind] ?? 'unknown'})`;
+}
+
+export function plural(count: number, word: string): string {
+  return `${count} ${word}${count === 1 ? '' : 's'}`;
+}
diff --git a/app/src/pages/signals/signal-state.ts b/app/src/pages/signals/signal-state.ts
new file mode 100644
index 00000000..3a5a3477
--- /dev/null
+++ b/app/src/pages/signals/signal-state.ts
@@ -0,0 +1,598 @@
+import {
+  DestroyRef,
+  ElementRef,
+  Injectable,
+  Injector,
+  afterNextRender,
+  computed,
+  inject,
+  linkedSignal,
+  signal,
+  untracked,
+  type Signal,
+} from '@angular/core';
+import type { DevframeRpcClient } from 'devframe/client';
+import { pickPage, type ReportedPage } from '../../live-pages';
+import { hostPageId } from '../../page-id';
+import { angularPageFor, injectAngularPages } from '../../angular-pages';
+import type { SelectOption } from '../../ui/select';
+import type { SearchField } from '../../ui/search-field';
+import type { GraphLink } from '../signal-graph-layout';
+import type { SignalFocus } from '../../types/signal-focus.types';
+import type { GraphInjector, SignalGraph, SignalResource } from '../../types/signal-graph.types';
+import {
+  ENV,
+  FOLLOW,
+  WATCHABLE,
+  WATCH_LOG,
+  graphPagesOf,
+  type LiveNode,
+  type SignalNode,
+  type SourceSignal,
+} from './signal-model';
+
+/**
+ * The state the Signals page and its sections share: the `signal-graph` and `component-tree`
+ * shared states, the source scan, the shown page and component, the filters, the selection and
+ * the watched signals. Provided by the page, so every section of one page reads the same signals.
+ */
+@Injectable()
+export class SignalState {
+  private rpcSource: Signal<DevframeRpcClient | null> = signal(null);
+  readonly rpc = computed(() => this.rpcSource());
+  private filterField: () => SearchField | undefined = () => undefined;
+
+  /** The signal to select once the focused component's graph arrives. */
+  readonly focusedSignal = signal<{ componentId: string; key: string } | null>(null);
+  /** The page a focus asked for before it reported a graph; chosen once it does. */
+  private pendingPageId: string | null = null;
+
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly injector = inject(Injector);
+  readonly pageId = hostPageId();
+  private readonly angularPages = injectAngularPages(() => this.rpc());
+  /** The shown page's Angular version and debug API parts, for the unavailable note. */
+  readonly angularPage = computed(() =>
+    angularPageFor(this.angularPages(), this.shownPageId() ?? this.pageId),
+  );
+  readonly cleanups: (() => void)[] = [];
+  /** Counts graph loads, so only the newest one applies its result. */
+  private graphLoad = 0;
+  readonly treePages = signal<
+    Record<
+      string,
+      { roots?: LiveNode[]; reportedAt?: number; title?: string; url?: string; platform?: string }
+    >
+  >({});
+  private readonly graphState = signal<{
+    graph: SignalGraph | null;
+    pages: Record<string, SignalGraph>;
+  }>({ graph: null, pages: {} });
+  readonly chosenPageId = signal<string | null>(null);
+  readonly announcement = signal('');
+
+  private readonly graphPages = computed(() => graphPagesOf(this.graphState()));
+
+  // The newest graph comes as `graph`; a page that reports later never takes over.
+  readonly shownPageId = linkedSignal<
+    { pages: Record<string, SignalGraph>; newest: string | null; chosen: string | null },
+    string | null
+  >({
+    source: () => ({
+      pages: this.graphPages(),
+      newest: this.graphState().graph?.pageId ?? null,
+      chosen: this.chosenPageId(),
+    }),
+    computation: ({ pages, newest, chosen }, previous) => {
+      const reported: Record<string, ReportedPage> = {};
+      for (const pageId of Object.keys(pages)) {
+        reported[pageId] = { pageId, reportedAt: pageId === newest ? 1 : 0 };
+      }
+      return pickPage(reported, { chosen, host: this.pageId, previous: previous?.value ?? null });
+    },
+  });
+
+  private readonly reported = computed<SignalGraph | null>(() => {
+    const pageId = this.shownPageId();
+    return pageId === null ? null : (this.graphPages()[pageId] ?? null);
+  });
+  readonly unsupported = computed(() => !!this.reported()?.unsupported);
+  /** Whether the live graph state arrived, so the intro doesn't call it a source scan first. */
+  readonly graphKnown = signal(false);
+  readonly graph = computed<SignalGraph | null>(() => {
+    const reported = this.reported();
+    return reported?.unsupported ? null : reported;
+  });
+  private readonly graphOwner = computed(() => {
+    const g = this.graph();
+    return g
+      ? `${g.pageId ?? ''}|${g.component?.id ?? g.injector?.id ?? g.element?.id ?? ''}`
+      : null;
+  });
+
+  // Component and injector ids belong to one page, so each page keeps its own pick.
+  private readonly pickedByPage = signal<Record<string, string>>({});
+  readonly picked = computed(() => this.pickedByPage()[this.targetPageId() ?? ''] ?? null);
+
+  readonly pageOptions = computed<SelectOption[]>(() => {
+    if (this.pageId) return [];
+    const tree = this.treePages();
+    return Object.keys(this.graphPages()).map((pageId) => {
+      const page = tree[pageId];
+      return {
+        value: pageId,
+        label: page?.title || page?.url || `Page ${pageId}`,
+        hint: page?.url,
+      };
+    });
+  });
+
+  readonly showInternals = signal(false);
+  readonly sourceSignals = signal<SourceSignal[]>([]);
+  readonly sourceLoaded = signal(false);
+  /** The source scan or the live graph state could not be read from the server. */
+  private readonly sourceFailed = signal(false);
+  private readonly graphFailed = signal(false);
+  readonly loadFailed = computed(() => this.sourceFailed() || this.graphFailed());
+  readonly retrying = signal(false);
+  readonly filter = signal('');
+  readonly resources = computed(() => this.graph()?.resources ?? []);
+  private readonly internalIds = computed(
+    () => new Set(this.resources().flatMap((r) => r.nodeIds)),
+  );
+  /** Shows the nodes Angular itself created, which are hidden by default. */
+  readonly showFramework = signal(false);
+  readonly frameworkCount = computed(() => {
+    const internal = this.internalIds();
+    return (this.graph()?.nodes ?? []).filter((n) => n.framework && !internal.has(n.id)).length;
+  });
+  readonly visibleNodes = computed(() => {
+    const internal = this.internalIds();
+    const framework = this.showFramework();
+    return (this.graph()?.nodes ?? []).filter(
+      (n) => !internal.has(n.id) && (framework || !n.framework),
+    );
+  });
+  readonly showGraph = signal(true);
+  /** Links between the nodes the page shows, by node id. */
+  readonly graphLinks = computed<GraphLink[]>(() => {
+    const g = this.graph();
+    if (!g) return [];
+    const shown = new Set(this.visibleNodes().map((n) => n.id));
+    const links: GraphLink[] = [];
+    for (const edge of g.edges) {
+      const producer = g.nodes[edge.producer]?.id;
+      const consumer = g.nodes[edge.consumer]?.id;
+      if (producer && consumer && shown.has(producer) && shown.has(consumer)) {
+        links.push({ producer, consumer });
+      }
+    }
+    return links;
+  });
+  readonly graphNodes = computed(() =>
+    [...this.visibleNodes()].sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true })),
+  );
+
+  readonly watchedIds = computed(() => new Set(this.graph()?.watch?.ids ?? []));
+  readonly stacksOn = computed(() => !!this.graph()?.watch?.stacks);
+  readonly watchedNodes = computed(() => {
+    const ids = this.watchedIds();
+    return (this.graph()?.nodes ?? []).filter((n) => ids.has(n.id));
+  });
+  /** Watched ids the page reports that are not in the graph shown now. */
+  readonly watchedElsewhere = computed(() => this.watchedIds().size - this.watchedNodes().length);
+  /** The newest changes of every watched signal in this graph, newest first. */
+  readonly watchLog = computed(() => {
+    const history = this.graph()?.history ?? {};
+    const entries = this.watchedNodes().flatMap((node) =>
+      (history[node.id] ?? [])
+        .filter((change) => change.source !== 'initial')
+        .map((change) => ({ id: node.id, label: node.label ?? node.id, change })),
+    );
+    return entries.sort((a, b) => b.change.at - a.change.at).slice(0, WATCH_LOG);
+  });
+  readonly hasAnySignals = computed(() => this.visibleNodes().length + this.resources().length > 0);
+  readonly kindCounts = computed(() => {
+    const kinds: string[] = this.graph()
+      ? [...this.visibleNodes().map((n) => n.kind), ...this.resources().map(() => 'resource')]
+      : this.sourceSignals().map((s) => s.kind);
+    const counts = new Map<string, number>();
+    for (const k of kinds) counts.set(k, (counts.get(k) ?? 0) + 1);
+    return [...counts].map(([kind, count]) => ({ kind, count }));
+  });
+  // A kind picked on another graph stays only when this graph has it too.
+  readonly kind = linkedSignal<string | null, string | null>({
+    source: this.graphOwner,
+    computation: (_owner, previous) => {
+      const kind = previous?.value ?? null;
+      return kind && untracked(this.kindCounts).some((g) => g.kind === kind) ? kind : null;
+    },
+  });
+  // An active kind with no matches still gets a pressed chip, so the filter stays visible.
+  readonly kindChips = computed(() => {
+    const counts = this.kindCounts();
+    const kind = this.kind();
+    return kind && !counts.some((g) => g.kind === kind) ? [...counts, { kind, count: 0 }] : counts;
+  });
+  readonly kindTotal = computed(() => this.kindCounts().reduce((sum, g) => sum + g.count, 0));
+  readonly selectedId = linkedSignal<string | null, string | null>({
+    source: this.graphOwner,
+    computation: () => null,
+  });
+  readonly selectedNode = computed(
+    () => this.graph()?.nodes.find((n) => n.id === this.selectedId()) ?? null,
+  );
+  private readonly jumpedPast = signal<{ id: string; label: string } | null>(null);
+  readonly jumpNote = computed(() => {
+    const jumped = this.jumpedPast();
+    if (!jumped || this.filter() || this.kind() || this.selectedId() !== jumped.id) return '';
+    return `Cleared the filters to show ${jumped.label}.`;
+  });
+
+  readonly filteredResources = computed(() => {
+    const q = this.filter().toLowerCase();
+    const kind = this.kind();
+    if (kind && kind !== 'resource') return [];
+    return this.resources().filter(
+      (r) =>
+        !q ||
+        r.name.toLowerCase().includes(q) ||
+        // A short query such as `e` would match every resource through its kind.
+        (q.length >= 3 && 'resource'.startsWith(q)),
+    );
+  });
+
+  readonly filteredNodes = computed(() => {
+    const q = this.filter().toLowerCase();
+    const kind = this.kind();
+    const nodes = this.visibleNodes().filter(
+      (n) =>
+        (!kind || n.kind === kind) &&
+        (!q || (n.label ?? '').toLowerCase().includes(q) || n.kind.toLowerCase().includes(q)),
+    );
+    // Angular orders nodes by last read order, which changes between polls; ids are stable.
+    return nodes.sort((a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }));
+  });
+
+  readonly filteredSourceSignals = computed(() => {
+    const q = this.filter().toLowerCase();
+    const kind = this.kind();
+    return this.sourceSignals().filter(
+      (s) =>
+        (!kind || s.kind === kind) &&
+        (!q ||
+          s.name.toLowerCase().includes(q) ||
+          s.kind.toLowerCase().includes(q) ||
+          s.file.toLowerCase().includes(q)),
+    );
+  });
+
+  readonly targetPageId = computed(
+    () =>
+      this.pageId ??
+      (this.shownPageId() || null) ??
+      this.graph()?.pageId ??
+      this.latestTreePage()?.pageId ??
+      null,
+  );
+
+  private readonly latestTreePage = computed(() => {
+    let latest: { pageId: string; reportedAt: number } | null = null;
+    for (const [pageId, page] of Object.entries(this.treePages())) {
+      const at = page.reportedAt ?? 0;
+      if (!latest || at > latest.reportedAt) latest = { pageId, reportedAt: at };
+    }
+    return latest;
+  });
+
+  readonly componentOptions = computed<SelectOption[]>(() => {
+    const pageId = this.targetPageId();
+    const roots = (pageId ? this.treePages()[pageId]?.roots : undefined) ?? [];
+    const flat: LiveNode[] = [];
+    const walk = (nodes: LiveNode[]) => {
+      for (const node of nodes) {
+        flat.push(node);
+        walk(node.children);
+      }
+    };
+    walk(roots);
+    const environments = this.graph()?.environments ?? [];
+    if (!flat.length && !environments.length) return [];
+    const totals = new Map<string, number>();
+    for (const node of flat) totals.set(node.name, (totals.get(node.name) ?? 0) + 1);
+    const seen = new Map<string, number>();
+    const options: SelectOption[] = [
+      { value: FOLLOW, label: 'Follow the routed component', hint: 'automatic' },
+      ...environments.map((env) => ({
+        value: ENV + env.id,
+        label: this.injectorLabel(env),
+        hint: 'injector',
+      })),
+    ];
+    for (const node of flat) {
+      const n = (seen.get(node.name) ?? 0) + 1;
+      seen.set(node.name, n);
+      options.push({
+        value: node.id,
+        label: (totals.get(node.name) ?? 0) > 1 ? `${node.name} #${n}` : node.name,
+        hint: node.kind === 'directive' ? `<${node.tag}> directive` : `<${node.tag}>`,
+      });
+    }
+    return options;
+  });
+
+  readonly pickerValue = computed(() => {
+    const picked = this.picked();
+    return picked && this.componentOptions().some((o) => o.value === picked) ? picked : FOLLOW;
+  });
+
+  /** Takes the page's `rpc` input and its filter box, which the sections read through here. */
+  connect(rpc: Signal<DevframeRpcClient | null>, filterField: () => SearchField | undefined) {
+    this.rpcSource = rpc;
+    this.filterField = filterField;
+  }
+
+  async loadSignalGraph(client: DevframeRpcClient) {
+    for (const cleanup of this.cleanups.splice(0)) cleanup();
+    const load = ++this.graphLoad;
+    /** A newer load (Retry, or a new client) started, so this one's outcome is dropped. */
+    const stale = () => this.destroyRef.destroyed || load !== this.graphLoad;
+    const my = client.scope('pangular');
+    try {
+      const state = await my.rpc.sharedState('signal-graph');
+      if (stale()) return;
+      this.graphFailed.set(false);
+      const apply = (value: unknown) => {
+        const next = value as {
+          graph?: SignalGraph | null;
+          pages?: Record<string, SignalGraph>;
+        } | null;
+        const pages = next?.pages && typeof next.pages === 'object' ? next.pages : {};
+        const state = { graph: next?.graph ?? null, pages };
+        this.notePageGone(graphPagesOf(state));
+        this.graphState.set(state);
+        const pending = this.pendingPageId;
+        if (pending && this.graphPages()[pending]) {
+          this.pendingPageId = null;
+          this.chosenPageId.set(pending);
+        }
+        // A state the client hasn't loaded from the server yet says nothing.
+        if (value !== undefined) this.graphKnown.set(true);
+      };
+      apply(state.value());
+      this.cleanups.push(state.on('updated', apply));
+    } catch {
+      if (stale()) return;
+      this.graphState.set({ graph: null, pages: {} });
+      this.graphKnown.set(true);
+      this.graphFailed.set(true);
+    }
+    try {
+      const tree = await my.rpc.sharedState('component-tree');
+      if (stale()) return;
+      const applyTree = (value: unknown) => {
+        const pages = (value as { pages?: Record<string, { roots?: LiveNode[] }> } | null)?.pages;
+        this.treePages.set(pages && typeof pages === 'object' ? pages : {});
+      };
+      applyTree(tree.value());
+      this.cleanups.push(tree.on('updated', applyTree));
+    } catch {
+      if (!stale()) this.treePages.set({});
+    }
+  }
+
+  private notePageGone(pages: Record<string, SignalGraph>) {
+    const gone = Object.keys(this.graphPages()).filter((pageId) => !pages[pageId]);
+    if (gone.length) {
+      this.pickedByPage.update((all) => {
+        const next = { ...all };
+        for (const pageId of gone) delete next[pageId];
+        return next;
+      });
+    }
+    const chosen = this.chosenPageId();
+    if (!chosen || pages[chosen]) return;
+    const label = this.pageOptions().find((o) => o.value === chosen)?.label ?? 'The chosen page';
+    this.chosenPageId.set(null);
+    this.announcement.set(`${label} closed, so this shows another page.`);
+  }
+
+  selectPage(pageId: string | null) {
+    if (!pageId || pageId === this.shownPageId()) return;
+    this.pendingPageId = null;
+    this.chosenPageId.set(pageId);
+    const label = this.pageOptions().find((o) => o.value === pageId)?.label ?? pageId;
+    this.announcement.set(`Showing the signal graph of ${label}.`);
+  }
+
+  /** Shows the graph of the component a focus names, on its page when it names one. */
+  showComponent(focus: SignalFocus) {
+    this.pendingPageId = null;
+    if (focus.pageId && !this.pageId) {
+      // A page that has not reported its graph yet is chosen when it does.
+      if (this.graphPages()[focus.pageId]) this.chosenPageId.set(focus.pageId);
+      else this.pendingPageId = focus.pageId;
+    }
+    this.focusedSignal.set(focus.key ? { componentId: focus.componentId, key: focus.key } : null);
+    this.pickComponent(focus.componentId, this.pageId ?? focus.pageId);
+  }
+
+  pickComponent(value: string | null, forPage?: string) {
+    const picked = value && value !== FOLLOW ? value : null;
+    // Another component replaces a focus that still waits for its signal.
+    if (this.focusedSignal()?.componentId !== picked) this.focusedSignal.set(null);
+    const pageId = forPage ?? this.targetPageId() ?? undefined;
+    this.pickedByPage.update((all) => {
+      const next = { ...all };
+      if (picked) next[pageId ?? ''] = picked;
+      else delete next[pageId ?? ''];
+      return next;
+    });
+    const client = this.rpc();
+    if (!client) return;
+    const target = picked?.startsWith(ENV)
+      ? { pageId, env: picked.slice(ENV.length) }
+      : { pageId, id: picked };
+    void client
+      .scope('pangular')
+      .rpc.call('select-signal-target', target)
+      .catch(() => {});
+  }
+
+  injectorLabel(injector: GraphInjector) {
+    return injector.name === 'Root' ? 'Root services' : injector.name;
+  }
+
+  async loadSourceSignals(client: DevframeRpcClient) {
+    const my = client.scope('pangular');
+    try {
+      const result = (await my.rpc.call('get-signals')) as SourceSignal[];
+      this.sourceSignals.set(result);
+      this.sourceFailed.set(false);
+    } catch {
+      this.sourceFailed.set(true);
+    } finally {
+      this.sourceLoaded.set(true);
+    }
+  }
+
+  /** Loads the graph and the source scan again. The alert stays until they answer, so focus
+   * stays on Retry while it is shown and moves to the filter box when the alert goes, which
+   * also happens when the graph comes back but the source scan still fails. */
+  async retry() {
+    const client = this.rpc();
+    if (!client || this.retrying()) return;
+    const trigger = document.activeElement;
+    this.retrying.set(true);
+    try {
+      await Promise.all([this.loadSignalGraph(client), this.loadSourceSignals(client)]);
+    } finally {
+      this.retrying.set(false);
+    }
+    if (this.destroyRef.destroyed) return;
+    afterNextRender(
+      () => {
+        const lost = !trigger?.isConnected || document.activeElement === document.body;
+        if (lost) this.filterField()?.focus();
+      },
+      { injector: this.injector },
+    );
+  }
+
+  /** Clears the filters from a no-match state and keeps focus on the filter box. */
+  clearFilters() {
+    this.resetFilters();
+    this.filterField()?.focus();
+  }
+
+  private resetFilters() {
+    this.filter.set('');
+    this.kind.set(null);
+  }
+
+  select(id: string) {
+    this.selectedId.set(this.selectedId() === id ? null : id);
+    this.showInternals.set(false);
+  }
+
+  /** Selects a node from the drawn graph; its detail opens in the list below. */
+  selectFromGraph(id: string) {
+    this.selectedId.set(id);
+    this.showInternals.set(false);
+  }
+
+  isWatchable(node: SignalNode): boolean {
+    return WATCHABLE.has(node.kind);
+  }
+
+  /** Asks the page to watch or stop watching a signal; the page's next report shows it. */
+  toggleWatch(node: SignalNode) {
+    const watch = !this.watchedIds().has(node.id);
+    const label = node.label ?? 'the unnamed signal';
+    this.sendWatch({ id: node.id, watch });
+    this.announcement.set(
+      watch
+        ? `Watching ${label}. Its changes also log to the page console.`
+        : `Stopped watching ${label}.`,
+    );
+  }
+
+  /** Turns write stacks on or off for the page that reported the graph. */
+  toggleStacks() {
+    const stacks = !this.stacksOn();
+    this.sendWatch({ stacks });
+    this.announcement.set(stacks ? 'Recording write stacks.' : 'Stopped recording write stacks.');
+  }
+
+  private sendWatch(request: { id?: string; watch?: boolean; stacks?: boolean }) {
+    const client = this.rpc();
+    const pageId = this.graph()?.pageId ?? this.targetPageId() ?? undefined;
+    if (!client) return;
+    void client
+      .scope('pangular')
+      .rpc.call('set-signal-watch', { ...request, pageId })
+      .catch(() => {});
+  }
+
+  jumpTo(node: SignalNode) {
+    const resource = this.resources().find((r) => r.nodeIds.includes(node.id));
+    const id = resource?.id ?? node.id;
+    const hidden = resource
+      ? !this.filteredResources().some((r) => r.id === id)
+      : !this.filteredNodes().some((n) => n.id === id);
+    if (hidden) this.resetFilters();
+    this.jumpedPast.set(hidden ? { id, label: resource?.name ?? node.label ?? node.id } : null);
+    this.selectedId.set(id);
+    this.showInternals.set(!!resource);
+    afterNextRender(
+      () => {
+        const card = [
+          ...this.host.nativeElement.querySelectorAll<HTMLElement>('.node-card[data-card]'),
+        ].find((el) => el.dataset['card'] === id);
+        card?.scrollIntoView?.({ block: 'nearest' });
+        card?.focus({ preventScroll: true });
+      },
+      { injector: this.injector },
+    );
+  }
+
+  // The page counts past the kept history; older pages only send the list.
+  changeCount(id: string): number {
+    const g = this.graph();
+    const counted =
+      g?.nodes.find((n) => n.id === id)?.changes ?? g?.resources?.find((r) => r.id === id)?.changes;
+    if (counted !== undefined) return counted;
+    const list = g?.history?.[id] ?? [];
+    return list.reduce((n, c) => n + (c.source === 'initial' ? 0 : 1 + (c.missed ?? 0)), 0);
+  }
+
+  internalsOf(resource: SignalResource): SignalNode[] {
+    const ids = new Set(resource.nodeIds);
+    return (this.graph()?.nodes ?? []).filter((n) => ids.has(n.id));
+  }
+
+  /** Producers and consumers of every node, built once per graph. */
+  private readonly relations = computed(() => {
+    const map = new Map<string, { deps: SignalNode[]; consumers: SignalNode[] }>();
+    const g = this.graph();
+    if (!g) return map;
+    for (const node of g.nodes) map.set(node.id, { deps: [], consumers: [] });
+    for (const edge of g.edges) {
+      const producer = g.nodes[edge.producer];
+      const consumer = g.nodes[edge.consumer];
+      if (!producer || !consumer) continue;
+      map.get(consumer.id)?.deps.push(producer);
+      map.get(producer.id)?.consumers.push(consumer);
+    }
+    return map;
+  });
+
+  getDependencies(node: SignalNode): SignalNode[] {
+    return this.relations().get(node.id)?.deps ?? [];
+  }
+
+  getConsumers(node: SignalNode): SignalNode[] {
+    return this.relations().get(node.id)?.consumers ?? [];
+  }
+}
diff --git a/app/src/pages/signals/source-signals.html b/app/src/pages/signals/source-signals.html
new file mode 100644
index 00000000..10658ef9
--- /dev/null
+++ b/app/src/pages/signals/source-signals.html
@@ -0,0 +1,21 @@
+@for (sig of filteredSourceSignals(); track sig.name + sig.file + sig.line) {
+  <div class="node-card">
+    <div class="node-header">
+      <span class="kind-badge" [style.background]="kindColor(sig.kind)">{{ sig.kind }}</span>
+      <span class="node-label">{{ sig.name }}</span>
+    </div>
+    <div class="node-meta">
+      <app-source-link class="file" [file]="sig.file" [line]="sig.line" />
+      @if (sig.component) {
+        <span class="sep" aria-hidden="true">·</span>
+        <span>in &lt;{{ sig.component }}&gt;</span>
+      }
+    </div>
+  </div>
+} @empty {
+  <div class="empty compact" role="status">
+    <p class="empty-title">No signals match.</p>
+    <p class="hint">Try a different name or kind.</p>
+    <button type="button" class="reset" (click)="clearFilters()">Clear filters</button>
+  </div>
+}
diff --git a/app/src/pages/signals/source-signals.scss b/app/src/pages/signals/source-signals.scss
new file mode 100644
index 00000000..e82c49f8
--- /dev/null
+++ b/app/src/pages/signals/source-signals.scss
@@ -0,0 +1,10 @@
+@use 'signals' as sig;
+
+@include sig.states;
+@include sig.cards;
+@include sig.node-list;
+@media (max-width: 480px) {
+  .node-card {
+    padding: 12px;
+  }
+}
diff --git a/app/src/pages/signals/source-signals.ts b/app/src/pages/signals/source-signals.ts
new file mode 100644
index 00000000..a3333ca0
--- /dev/null
+++ b/app/src/pages/signals/source-signals.ts
@@ -0,0 +1,22 @@
+import { Component, inject } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { kindColor } from './signal-model';
+import { SignalState } from './signal-state';
+
+/** The signals the source scan found, shown while no live graph is in. */
+@Component({
+  selector: 'div[appSourceSignals]',
+  imports: [SourceLink],
+  templateUrl: './source-signals.html',
+  styleUrl: './source-signals.scss',
+})
+export class SourceSignals {
+  private readonly state = inject(SignalState);
+
+  readonly filteredSourceSignals = this.state.filteredSourceSignals;
+  readonly kindColor = kindColor;
+
+  clearFilters() {
+    this.state.clearFilters();
+  }
+}
diff --git a/app/src/pages/signals/watched-signals.html b/app/src/pages/signals/watched-signals.html
new file mode 100644
index 00000000..2dcc2932
--- /dev/null
+++ b/app/src/pages/signals/watched-signals.html
@@ -0,0 +1,59 @@
+<h2 id="signal-watched-heading" class="list-heading">Watched</h2>
+@if (watchedElsewhere(); as other) {
+  <p class="hint">
+    {{ other }} watched {{ other === 1 ? 'signal is' : 'signals are' }} not in this graph. Their
+    changes still log to the page console.
+  </p>
+}
+<ul class="watched-list">
+  @for (node of watchedNodes(); track node.id) {
+    <li>
+      <span class="rel-label">{{ node.label ?? '(unnamed)' }}</span>
+      @if (node.value !== undefined) {
+        <span class="watched-value">{{ node.value | json }}</span>
+      }
+      @if (changeCount(node.id); as count) {
+        <span class="changed-badge">{{ count }} {{ count === 1 ? 'change' : 'changes' }}</span>
+      }
+      <button
+        type="button"
+        class="link-button"
+        [attr.aria-label]="'Stop watching ' + (node.label ?? 'the unnamed signal')"
+        (click)="toggleWatch(node)"
+      >
+        Stop watching
+      </button>
+    </li>
+  }
+</ul>
+@if (watchLog().length) {
+  <h3 class="sub-heading" id="signal-watch-log-heading">Recent changes</h3>
+  <div
+    class="watch-log scroll-box"
+    role="log"
+    tabindex="0"
+    aria-labelledby="signal-watch-log-heading"
+  >
+    <ol class="history">
+      @for (entry of watchLog(); track entry.id + ':' + entry.change.epoch) {
+        <li>
+          <span class="history-meta">
+            <time>{{ entry.change.at | date: 'HH:mm:ss.SSS' }}</time>
+            <span class="rel-label">{{ entry.label }}</span>
+            <span class="source-tag" [class]="'source-' + entry.change.source">{{
+              sourceLabel(entry.change.source)
+            }}</span>
+          </span>
+          <pre>{{ entry.change.value | json }}</pre>
+          @if (entry.change.stack?.length) {
+            <ol class="stack" aria-label="Written from">
+              @for (frame of entry.change.stack; track $index) {
+                <li>{{ frame }}</li>
+              }
+            </ol>
+          }
+        </li>
+      }
+    </ol>
+  </div>
+}
diff --git a/app/src/pages/signals/watched-signals.scss b/app/src/pages/signals/watched-signals.scss
new file mode 100644
index 00000000..32172641
--- /dev/null
+++ b/app/src/pages/signals/watched-signals.scss
@@ -0,0 +1,54 @@
+@use 'mixins' as m;
+@use 'signals' as sig;
+
+@include sig.states;
+@include sig.pre;
+@include sig.changed-badge;
+@include sig.scroll-box;
+@include sig.list-heading;
+@include sig.rel-label;
+@include sig.history;
+:host(.watched) {
+  margin-bottom: 16px;
+}
+@include sig.link-button;
+.watched-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+}
+.watched-list li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  padding: 6px 10px;
+  background: var(--surface);
+  border: 1px solid var(--accent-line);
+  border-radius: var(--radius-sm);
+}
+.watched-value {
+  @include m.truncate;
+  flex: 1 1 120px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-2);
+}
+.sub-heading {
+  @include m.label;
+  margin: 12px 0 8px;
+}
+.watch-log {
+  max-height: 320px;
+  overflow: auto;
+  border-radius: var(--radius-sm);
+}
+.watch-log .history {
+  max-height: none;
+  overflow: visible;
+}
+@include sig.stack;
diff --git a/app/src/pages/signals/watched-signals.ts b/app/src/pages/signals/watched-signals.ts
new file mode 100644
index 00000000..655a571b
--- /dev/null
+++ b/app/src/pages/signals/watched-signals.ts
@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { DatePipe, JsonPipe } from '@angular/common';
+import { sourceLabel, type SignalNode } from './signal-model';
+import { SignalState } from './signal-state';
+
+/** The watched signals of the Signals page and the newest changes they logged. */
+@Component({
+  selector: 'section[appWatchedSignals]',
+  imports: [DatePipe, JsonPipe],
+  templateUrl: './watched-signals.html',
+  styleUrl: './watched-signals.scss',
+})
+export class WatchedSignals {
+  private readonly state = inject(SignalState);
+
+  readonly watchedNodes = this.state.watchedNodes;
+  readonly watchedElsewhere = this.state.watchedElsewhere;
+  readonly watchLog = this.state.watchLog;
+  readonly sourceLabel = sourceLabel;
+
+  changeCount(id: string): number {
+    return this.state.changeCount(id);
+  }
+
+  toggleWatch(node: SignalNode) {
+    this.state.toggleWatch(node);
+  }
+}
diff --git a/app/src/pages/store-inspector.html b/app/src/pages/store-inspector.html
new file mode 100644
index 00000000..757462a7
--- /dev/null
+++ b/app/src/pages/store-inspector.html
@@ -0,0 +1,35 @@
+<p class="page-intro">
+  NgRx signal stores and &#64;ngrx/store state from the live page, with every change, plus NGXS, Elf
+  and MiniRx stores. Source declarations lists the stores your files declare.
+</p>
+<div class="toolbar">
+  <app-search-field
+    #filterInput
+    class="search"
+    placeholder="Filter stores, changes and declarations"
+    saveKey="store"
+    [(value)]="filter"
+  />
+  @if (allPages().length > 1) {
+    <span class="visually-hidden" id="ngrx-page-label">Page</span>
+    <app-select
+      class="page-select"
+      labelledBy="ngrx-page-label"
+      [options]="pageOptions()"
+      [value]="page()?.pageId ?? null"
+      (valueChange)="selectPage($event)"
+    />
+  }
+  <span class="status" [class.on]="pageConnected()">
+    <span class="live-dot" aria-hidden="true"></span>
+    {{ !stateLoaded() ? 'Loading…' : pageConnected() ? 'Live' : 'No page connected' }}
+  </span>
+</div>
+
+<section appStoreLive class="block" aria-labelledby="ngrx-live-heading"></section>
+
+@if (hasEvents()) {
+  <section appStoreEvents class="block" aria-labelledby="ngrx-events-heading"></section>
+}
+
+<section appStoreSource class="block" aria-labelledby="ngrx-source-heading"></section>
diff --git a/app/src/pages/store-inspector.scss b/app/src/pages/store-inspector.scss
new file mode 100644
index 00000000..e89e716b
--- /dev/null
+++ b/app/src/pages/store-inspector.scss
@@ -0,0 +1,105 @@
+@use 'mixins' as m;
+
+.page-intro {
+  margin: 0 0 12px;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.search {
+  position: relative;
+  display: flex;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+.search > input {
+  flex: 1 1 auto;
+  width: 100%;
+  padding-left: 34px;
+}
+.search-icon {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+.search:focus-within .search-icon {
+  stroke: var(--accent);
+}
+
+:host {
+  display: grid;
+  gap: 24px;
+  min-width: 0;
+  color: var(--text);
+  font-size: 13px;
+}
+.toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  padding: 10px 12px;
+  background: color-mix(in srgb, var(--surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.page-select {
+  flex: 0 1 220px;
+  min-width: 0;
+}
+.status {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+.live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-3);
+}
+.status.on .live-dot {
+  background: var(--ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.4;
+  }
+}
+.block {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .status.on .live-dot {
+    animation: none;
+  }
+}
+@media (max-width: 480px) {
+  .toolbar {
+    padding: 8px;
+  }
+  .toolbar input,
+  .page-select {
+    flex-basis: 100%;
+  }
+}
diff --git a/app/src/pages/store-inspector.ts b/app/src/pages/store-inspector.ts
index b054ce89..78bf173e 100644
--- a/app/src/pages/store-inspector.ts
+++ b/app/src/pages/store-inspector.ts
@@ -1,2869 +1,185 @@
-import { NgTemplateOutlet } from '@angular/common';
-import {
-  afterRenderEffect,
-  Component,
-  DestroyRef,
-  ElementRef,
-  computed,
-  effect,
-  inject,
-  input,
-  linkedSignal,
-  signal,
-  viewChild,
-} from '@angular/core';
+import { Component, effect, inject, input, viewChild } from '@angular/core';
 import type { DevframeRpcClient } from 'devframe/client';
-import { time } from '../format';
-import { hostPageId } from '../page-id';
-import { angularPageFor, injectAngularPages } from '../angular-pages';
-import { AngularUnavailable } from '../ui/angular-unavailable';
-import { rpcCall as call } from '../rpc';
-import { actionAllowed, actionBlockedMessage, panelConfig } from '../devtools-config';
-import { LimitNote } from '../ui/limit-note';
-import { RovingList } from '../ui/roving-list';
-import { Select, type SelectOption } from '../ui/select';
-import { VirtualWindow } from '../ui/virtual-window';
-import { EntryTabs, type EntryDetailAnswer } from './store-entry-tabs';
-import { StoreSession } from './store-session';
-import {
-  changeCountText,
-  moreChangesText,
-  pretty,
-  sameNgrxLog,
-  short,
-  traceFrame,
-  type LiveStore,
-  type NgrxActionStat,
-  type NgrxActionOrigin,
-  type NgrxLogEntry,
-  type NgrxLogKey,
-  type NgrxPage,
-  type NgrxState,
-  type NgrxStoreEntry,
-} from './store-types';
-import { SourceLink } from '../ui/source-link';
-import { StoreStateTree } from './store-state-tree';
-import { StoreGlobal } from '../ui/store-global';
-import { reduxLiveStores, reduxLog, reduxPagesOf, type ReduxStoresPage } from './redux-stores';
 import { SearchField } from '../ui/search-field';
-import { Splitter, storedPaneSize } from '../ui/splitter';
+import { Select } from '../ui/select';
 import { rememberSelection } from '../view-memory';
-import { AppState } from '../ui/app-state';
-import { LiveControls, LiveFeed, followNewest } from '../ui/live-feed';
-
-const KIND_COLORS: Record<string, string> = {
-  action: '#f59e0b',
-  reducer: '#a78bfa',
-  effect: '#fb923c',
-  selector: '#60a5fa',
-  feature: '#34d399',
-  'store-setup': '#94a3b8',
-  'signal-store': '#e879f9',
-  'signal-state': '#22d3ee',
-  'signal-method': '#fb7185',
-  store: '#a78bfa',
-  event: 'var(--warn)',
-  redux: '#38bdf8',
-};
-
-const KIND_LABELS: Record<string, string> = {
-  'signal-store': 'signalStore',
-  'signal-state': 'signalState',
-  'signal-method': 'signalMethod',
-  'store-setup': 'store setup',
-  store: '@ngrx/store',
-  event: 'event',
-  redux: 'Redux DevTools',
-};
-
-const ORIGIN_TEXT: Record<NgrxActionOrigin, string> = {
-  dispatch: 'store.dispatch(action)',
-  effect: 'NgRx effect (Store.next)',
-  reactive: 'store.dispatch(() => action)',
-};
-
-function parsePayload(text: string): { payload?: Record<string, unknown>; error?: string } {
-  if (!text.trim()) return {};
-  let value: unknown;
-  try {
-    value = JSON.parse(text);
-  } catch {
-    return { error: 'The payload is not valid JSON.' };
-  }
-  if (!value || typeof value !== 'object' || Array.isArray(value)) {
-    return { error: 'The payload must be a JSON object, like {"id": 7}.' };
-  }
-  if (Object.prototype.hasOwnProperty.call(value, 'type')) {
-    return {
-      error: 'The payload cannot have a "type" key. Put the action type in the Type field.',
-    };
-  }
-  return { payload: value as Record<string, unknown> };
-}
-
-const CLASSIC_KINDS = new Set([
-  'action',
-  'reducer',
-  'effect',
-  'selector',
-  'feature',
-  'store-setup',
-]);
-
+import { StoreActions } from './store/store-actions';
+import { StoreEvents } from './store/store-events';
+import { StoreLive } from './store/store-live';
+import { StoreSource } from './store/store-source';
+import { StoreState } from './store/store-state';
+import type { NgrxLogEntry } from './store-types';
+
+/**
+ * The Store page: the toolbar, and one section each for the live stores, the
+ * `@ngrx/signals/events` events and the source declarations. The sections live in `./store/` and
+ * share the page's {@link StoreState} and {@link StoreActions}; the page keeps the members its
+ * tests and the shell read on itself.
+ */
 @Component({
   selector: 'app-store-inspector',
-  imports: [
-    SearchField,
-    Splitter,
-    AngularUnavailable,
-    LimitNote,
-    RovingList,
-    Select,
-    NgTemplateOutlet,
-    SourceLink,
-    StoreGlobal,
-    EntryTabs,
-    StoreSession,
-    StoreStateTree,
-    AppState,
-    LiveControls,
-  ],
-  template: `
-    <p class="page-intro">
-      NgRx signal stores and &#64;ngrx/store state from the live page, with every change, plus NGXS,
-      Elf and MiniRx stores. Source declarations lists the stores your files declare.
-    </p>
-    <div class="toolbar">
-      <app-search-field
-        #filterInput
-        class="search"
-        placeholder="Filter stores, changes and declarations"
-        saveKey="store"
-        [(value)]="filter"
-      />
-      @if (allPages().length > 1) {
-        <span class="visually-hidden" id="ngrx-page-label">Page</span>
-        <app-select
-          class="page-select"
-          labelledBy="ngrx-page-label"
-          [options]="pageOptions()"
-          [value]="page()?.pageId ?? null"
-          (valueChange)="selectPage($event)"
-        />
-      }
-      <span class="status" [class.on]="pageConnected()">
-        <span class="live-dot" aria-hidden="true"></span>
-        {{ !stateLoaded() ? 'Loading…' : pageConnected() ? 'Live' : 'No page connected' }}
-      </span>
-    </div>
-
-    <section class="block" aria-labelledby="ngrx-live-heading">
-      <div class="section-head">
-        <h2 id="ngrx-live-heading">Live stores</h2>
-        @if (liveStores().length) {
-          <span class="pill">{{ liveStores().length }}</span>
-        }
-      </div>
-
-      @if (failed()) {
-        <app-state kind="error" (retry)="retry()">
-          Could not load the live store state.
-          <p detail>Check that the dev server with Pangular Inspector is still running.</p>
-        </app-state>
-      } @else if (!stateLoaded()) {
-        <app-state kind="loading">Loading the live stores…</app-state>
-      } @else if (!page()) {
-        <app-state kind="empty">
-          No page is reporting store state yet.
-          <p detail>
-            Open the app in a browser. Stores show up here as soon as the page creates them.
-          </p>
-        </app-state>
-      } @else if (!liveStores().length) {
-        <app-angular-unavailable [page]="angularPage()" capability="injectorProviders" compact>
-          The overlay finds stores through the injectors, so stores it can't reach from a component
-          are not listed.
-        </app-angular-unavailable>
-        <div class="empty">
-          @if (usesSignals()) {
-            <p class="empty-title">No signal store instance on this page yet.</p>
-            <p class="hint">
-              A <code>signalStore</code> is created the first time something injects it. Navigate to
-              a page that uses the store and it appears here.
-            </p>
-          } @else if (usesClassic()) {
-            <p class="empty-title">The &#64;ngrx/store Store was not found on this page.</p>
-            <p class="hint">
-              Check that <code>provideStore()</code> or <code>StoreModule.forRoot()</code> is part
-              of the providers of the running app.
-            </p>
-          } @else {
-            <p class="empty-title">This page has no store.</p>
-            <p class="hint">
-              Stores from <code>&#64;ngrx/signals</code> (<code>signalStore</code>,
-              <code>signalState</code>) and <code>&#64;ngrx/store</code> are listed here once the
-              app creates them. NGXS, Elf and MiniRx stores show up through their Redux DevTools
-              integration when the app loads
-              <code>&#64;pangular-inspector/devtools/store-hook</code>
-              first.
-            </p>
-          }
-        </div>
-      } @else {
-        <div class="live-layout">
-          <ul class="store-list" aria-label="Stores on this page">
-            @for (item of filteredStores(); track item.id) {
-              <li>
-                <button
-                  type="button"
-                  class="store-item"
-                  [class.selected]="item.id === store()?.id"
-                  [attr.aria-pressed]="item.id === store()?.id"
-                  (click)="selectStore(item.id)"
-                >
-                  <span class="store-top">
-                    <span
-                      class="dot"
-                      aria-hidden="true"
-                      [style.background]="kindColor(item.kind)"
-                    ></span>
-                    <span class="store-name">{{ item.label }}</span>
-                  </span>
-                  <span class="store-meta">
-                    {{ kindLabel(item.kind) }} · {{ item.scope }} · {{ countText(item) }}
-                  </span>
-                </button>
-              </li>
-            } @empty {
-              <li class="muted pad">No stores match this filter.</li>
-            }
-          </ul>
-
-          @if (store(); as current) {
-            <div class="store-detail">
-              <div class="detail-head">
-                <h3>{{ current.label }}</h3>
-                <div class="chips">
-                  <span class="chip">{{ kindLabel(current.kind) }}</span>
-                  @if (current.redux; as other) {
-                    <span class="chip">{{ other.library }}</span>
-                  } @else {
-                    <span class="chip">scope: {{ current.scope }}</span>
-                  }
-                  @if (current.signal?.declaredIn; as file) {
-                    <app-source-link class="chip mono" [file]="file" />
-                  }
-                  @if (current.classic) {
-                    <span class="chip">{{
-                      current.classic.devtools ? 'Store DevTools on' : 'Store DevTools off'
-                    }}</span>
-                  }
-                  @if (current.signal?.watchOnly) {
-                    <span class="chip">withDevtools: watched only</span>
-                  }
-                </div>
-                @if (current.signal?.watchOnly) {
-                  <p class="hint small">
-                    This store uses <code>withDevtools()</code>, so the inspector does not wrap its
-                    methods or signals. Changes are logged as <code>patchState</code> entries, and
-                    method calls are not counted.
-                  </p>
-                }
-                @if (current.signal?.references?.length) {
-                  <p class="refs">
-                    Referenced by
-                    @for (ref of current.signal!.references; track ref; let last = $last) {
-                      <code>{{ ref }}</code
-                      >{{ last ? '' : ', ' }}
-                    }
-                  </p>
-                }
-              </div>
-
-              @if (current.classic?.paused) {
-                <div class="paused">
-                  <p>
-                    <strong>Viewing a past state.</strong> New actions are logged but do not change
-                    the state until you go back to the latest state.
-                  </p>
-                  <button
-                    type="button"
-                    class="btn primary"
-                    [disabled]="busy() || !canRestore()"
-                    [attr.aria-describedby]="canRestore() ? null : 'store-latest-off'"
-                    (click)="backToLatest()"
-                    #latestButton
-                  >
-                    Back to latest
-                  </button>
-                  @if (!canRestore()) {
-                    <p id="store-latest-off" class="hint small">{{ restoreOff }}</p>
-                  }
-                </div>
-              }
-
-              <div class="facts">
-                <section class="fact" aria-labelledby="ngrx-state-heading">
-                  <div class="fact-head">
-                    <h4 id="ngrx-state-heading">State</h4>
-                    <div class="state-actions">
-                      @if (!current.redux) {
-                        <app-store-global
-                          [rpc]="rpc()"
-                          [pageId]="page()?.pageId"
-                          [target]="{ kind: 'ngrx', storeId: current.id }"
-                          [label]="current.label + ' state'"
-                        />
-                      }
-                      <button
-                        type="button"
-                        class="btn copy"
-                        aria-label="Copy state"
-                        (click)="copyState()"
-                      >
-                        Copy
-                      </button>
-                    </div>
-                  </div>
-                  <app-state-tree
-                    [value]="stateValue()"
-                    [changed]="changedPaths()"
-                    [label]="current.label + ' state'"
-                    (copied)="copyPath($event)"
-                  />
-                </section>
-                @if (current.signal; as info) {
-                  <section class="fact" aria-labelledby="ngrx-computed-heading">
-                    <h4 id="ngrx-computed-heading">Computed</h4>
-                    @if (computedEntries().length) {
-                      <dl class="kv">
-                        @for (entry of computedEntries(); track entry.key) {
-                          <dt>{{ entry.key }}</dt>
-                          <dd>
-                            <code [title]="entry.full">{{ entry.value }}</code>
-                          </dd>
-                        }
-                      </dl>
-                    } @else {
-                      <p class="muted">No computed signals.</p>
-                    }
-                    <h4 id="ngrx-methods-heading" class="spaced">Methods</h4>
-                    @if (info.methods.length) {
-                      <ul class="methods" aria-labelledby="ngrx-methods-heading">
-                        @for (method of info.methods; track method.name) {
-                          <li class="chip mono">
-                            {{ method.name }}
-                            @if (method.signalMethod) {
-                              <span class="tag">signalMethod</span>
-                            } @else if (method.rx) {
-                              <span class="tag">rxMethod</span>
-                            }
-                            <span class="calls"
-                              >{{ method.calls }} {{ method.calls === 1 ? 'call' : 'calls'
-                              }}{{ methodDuration(method) }}</span
-                            >
-                          </li>
-                        }
-                      </ul>
-                    } @else {
-                      <p class="muted">No methods.</p>
-                    }
-                  </section>
-                  @if (info.entities?.length) {
-                    <section class="fact" aria-labelledby="ngrx-entities-heading">
-                      <h4 id="ngrx-entities-heading">Entities</h4>
-                      <div class="entities">
-                        @for (col of info.entities!; track col.idsKey) {
-                          <div class="entity-group">
-                            <div class="entity-head">
-                              <span class="chip mono">{{ col.collection ?? 'entities' }}</span>
-                              <span class="entity-count"
-                                >{{ col.count }} {{ col.count === 1 ? 'entity' : 'entities' }}</span
-                              >
-                            </div>
-                            <ul
-                              class="chips entity-ids"
-                              [attr.aria-label]="(col.collection ?? 'entities') + ' ids'"
-                            >
-                              @for (id of entityIds(col.ids); track id) {
-                                <li class="chip mono">{{ id }}</li>
-                              }
-                              @if (col.count > 30) {
-                                <li
-                                  class="chip more"
-                                  [title]="entityOverflowTitle(col.ids, col.count)"
-                                >
-                                  +{{ col.count - 30 }} more
-                                </li>
-                              }
-                            </ul>
-                            @if (col.selectedId !== undefined) {
-                              <dl class="kv">
-                                <dt>Selected</dt>
-                                <dd>
-                                  @if (col.selected !== undefined) {
-                                    <code [title]="prettyText(col.selected)">{{
-                                      shortText(col.selected)
-                                    }}</code>
-                                  } @else {
-                                    <span class="muted">None selected</span>
-                                  }
-                                </dd>
-                              </dl>
-                            }
-                          </div>
-                        }
-                      </div>
-                    </section>
-                  }
-                }
-              </div>
-
-              @if (current.classic?.devtools) {
-                <section class="history" aria-labelledby="ngrx-devtools-heading">
-                  <h4 id="ngrx-devtools-heading">Store DevTools history</h4>
-                  <p class="hint small">
-                    {{
-                      current.classic!.recordingPaused
-                        ? 'Recording is paused: new actions change the state but are not recorded.'
-                        : 'Recording new actions.'
-                    }}
-                    @if (current.classic!.skipped?.length; as skippedCount) {
-                      {{ skippedCount }} skipped
-                      {{ skippedCount === 1 ? 'action is' : 'actions are' }} left out of the state.
-                    }
-                  </p>
-                  @if (confirmReset()) {
-                    <div
-                      class="confirm"
-                      role="group"
-                      aria-labelledby="ngrx-reset-text"
-                      (keydown.escape)="cancelReset($event)"
-                    >
-                      <p id="ngrx-reset-text">
-                        Reset puts the store back on its initial state and empties the Store
-                        DevTools history. Entries logged so far can no longer be restored.
-                      </p>
-                      <div class="actions">
-                        <button
-                          type="button"
-                          class="btn primary"
-                          [disabled]="busy()"
-                          (click)="devtoolsOp({ op: 'reset' })"
-                        >
-                          Reset history
-                        </button>
-                        <button type="button" class="btn" (click)="cancelReset()" #resetCancel>
-                          Cancel
-                        </button>
-                      </div>
-                    </div>
-                  } @else {
-                    <div class="actions">
-                      <button
-                        type="button"
-                        class="btn"
-                        [disabled]="busy() || !canRestore()"
-                        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
-                        (click)="
-                          devtoolsOp({ op: 'pause', paused: !current.classic!.recordingPaused })
-                        "
-                      >
-                        {{
-                          current.classic!.recordingPaused ? 'Resume recording' : 'Pause recording'
-                        }}
-                      </button>
-                      <button
-                        type="button"
-                        class="btn"
-                        [disabled]="busy() || !canRestore()"
-                        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
-                        (click)="devtoolsOp({ op: 'jump', index: 0 })"
-                      >
-                        Jump to committed state
-                      </button>
-                      <button
-                        type="button"
-                        class="btn"
-                        [disabled]="busy() || !canRestore()"
-                        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
-                        (click)="devtoolsOp({ op: 'commit' })"
-                      >
-                        Commit
-                      </button>
-                      <button
-                        type="button"
-                        class="btn"
-                        [disabled]="busy() || !canRestore()"
-                        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
-                        (click)="askReset()"
-                        #resetButton
-                      >
-                        Reset…
-                      </button>
-                    </div>
-                  }
-                  @if (!canRestore()) {
-                    <p id="store-history-off" class="hint small">{{ restoreOff }}</p>
-                  }
-                </section>
-              }
-
-              <section class="log" aria-labelledby="ngrx-log-heading">
-                <h4 id="ngrx-log-heading">
-                  {{ current.classic || current.redux ? 'Action log' : 'Change log' }}
-                  <span class="pill">{{ storeLog().length }}</span>
-                </h4>
-                <div class="live-row">
-                  <app-live-controls
-                    [feed]="logFeed"
-                    [what]="current.classic || current.redux ? 'actions' : 'changes'"
-                  />
-                </div>
-                <app-limit-note
-                  [dropped]="(current.redux ? reduxPage()?.dropped : page()?.dropped) ?? 0"
-                  [max]="maxLog()"
-                  what="changes on this page"
-                  limit="changeLog"
-                />
-                <div class="log-layout" [style.--log-list-size.px]="logListSize()">
-                  <ul
-                    #logList
-                    class="log-list"
-                    appRovingList="button.log-item"
-                    [rovingWindow]="logWindow"
-                    [style.padding-top.px]="logWindow.enabled() ? 2 + logWindow.padTop() : null"
-                    [style.padding-bottom.px]="
-                      logWindow.enabled() ? 2 + logWindow.padBottom() : null
-                    "
-                    [attr.aria-label]="current.classic || current.redux ? 'Actions' : 'Changes'"
-                  >
-                    @for (shown of shownLog(); track shown.entry.seq) {
-                      @let entry = shown.entry;
-                      <li
-                        [attr.data-vindex]="shown.index"
-                        [attr.aria-setsize]="logWindow.enabled() ? storeLog().length : null"
-                        [attr.aria-posinset]="logWindow.enabled() ? shown.index + 1 : null"
-                      >
-                        <button
-                          type="button"
-                          class="log-item"
-                          [class.selected]="entry.seq === selectedChangeSeq()"
-                          [attr.aria-pressed]="entry.seq === selectedChangeSeq()"
-                          [attr.aria-controls]="
-                            entry.seq === selectedChangeSeq() ? 'ngrx-change-detail' : null
-                          "
-                          (click)="selectChange(entry.seq)"
-                        >
-                          <span class="seq">#{{ entry.seq }}</span>
-                          <span class="log-type-row">
-                            <span class="log-type" [title]="entry.type">{{ entry.type }}</span>
-                            @if (entry.causedByEvent; as caused) {
-                              <span
-                                class="tag"
-                                [title]="'Caused by ' + kindLabel('event') + ': ' + caused.type"
-                                >{{ caused.type }}</span
-                              >
-                            }
-                          </span>
-                          <span class="log-meta">
-                            @if (isSkipped(entry.seq)) {
-                              <span class="tag">skipped</span>
-                            }
-                            @if (entry.origin) {
-                              <span class="tag">{{ entry.origin }}</span>
-                            }
-                            {{ changesLabel(entry) }}
-                            ·
-                            {{ formatTime(entry.timestamp) }}
-                            @if (entry.durationMs !== undefined) {
-                              · {{ formatDuration(entry.durationMs) }}
-                            }
-                          </span>
-                        </button>
-                      </li>
-                    } @empty {
-                      <li class="muted pad">
-                        @if (filter()) {
-                          No entries match this filter.
-                        } @else if (current.classic || current.redux) {
-                          No actions dispatched since the page connected.
-                        } @else {
-                          No state changes yet. Method calls and patchState writes that change the
-                          state are recorded here.
-                        }
-                      </li>
-                    }
-                  </ul>
-                  <app-splitter
-                    view="store-log"
-                    pane="before"
-                    label="Resize the change list"
-                    [min]="200"
-                    [max]="640"
-                    [defaultSize]="300"
-                    [(size)]="logListSize"
-                  />
-
-                  @if (changeEntry(); as selected) {
-                    <div id="ngrx-change-detail">
-                      <ng-container
-                        [ngTemplateOutlet]="entryDetailTpl"
-                        [ngTemplateOutletContext]="{
-                          selected: selected,
-                          headingLevel: 5,
-                          idPrefix: 'ngrx-change',
-                        }"
-                      />
-                    </div>
-                  }
-                </div>
-              </section>
-
-              @if (storeStats().length) {
-                <div class="stats">
-                  <h4 id="ngrx-stats-heading">Action frequency</h4>
-                  <p class="hint small">
-                    How often each {{ current.classic ? 'action' : 'change' }} ran since the page
-                    loaded, including entries the log no longer keeps.
-                  </p>
-                  <div
-                    class="table-wrap"
-                    tabindex="0"
-                    role="region"
-                    aria-labelledby="ngrx-stats-heading"
-                  >
-                    <table>
-                      <thead>
-                        <tr>
-                          <th scope="col">{{ current.classic ? 'Action' : 'Method or write' }}</th>
-                          <th scope="col" class="num">Count</th>
-                          <th scope="col" class="num">Avg</th>
-                          <th scope="col" class="num">Longest</th>
-                          <th scope="col" class="num">Peak per second</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        @for (stat of storeStats(); track stat.type) {
-                          <tr>
-                            <th scope="row" class="mono">
-                              {{ stat.type }}
-                              @if (stat.loop) {
-                                <span class="loop">Possible effect loop</span>
-                              }
-                            </th>
-                            <td class="num">{{ stat.count }}</td>
-                            <td class="num">
-                              {{ stat.avgMs !== undefined ? formatDuration(stat.avgMs) : 'n/a' }}
-                            </td>
-                            <td class="num">
-                              {{ stat.maxMs !== undefined ? formatDuration(stat.maxMs) : 'n/a' }}
-                            </td>
-                            <td class="num">{{ stat.burst }}</td>
-                          </tr>
-                        }
-                      </tbody>
-                    </table>
-                  </div>
-                  @if (hasLoop()) {
-                    <p class="hint small">
-                      A possible effect loop is an action an NgRx effect dispatched
-                      {{ loopBurst }} or more times within one second. Check the effect that
-                      dispatches it for a missing filter or a dispatch of its own trigger.
-                    </p>
-                  }
-                </div>
-              }
-
-              @if (!current.redux) {
-                <app-store-session
-                  [rpc]="rpc()"
-                  [pageId]="page()?.pageId ?? null"
-                  [storeId]="current.id"
-                  [entries]="sessionEntries()"
-                />
-              }
-
-              @if (current.classic) {
-                <section class="dispatch" aria-labelledby="ngrx-dispatch-heading">
-                  <h4 id="ngrx-dispatch-heading">Dispatch an action</h4>
-                  <form class="dispatch-form" (submit)="dispatchAction($event)">
-                    <label>
-                      <span>Type</span>
-                      <input
-                        required
-                        spellcheck="false"
-                        autocomplete="off"
-                        list="ngrx-action-types"
-                        placeholder="e.g. [Cart] Add Item"
-                        [value]="dispatchType()"
-                        (input)="dispatchType.set($any($event.target).value)"
-                      />
-                    </label>
-                    <datalist id="ngrx-action-types">
-                      @for (type of actionTypes(); track type) {
-                        <option [value]="type"></option>
-                      }
-                    </datalist>
-                    <label>
-                      <span>Payload <span class="optional">(JSON object, optional)</span></span>
-                      <textarea
-                        rows="3"
-                        spellcheck="false"
-                        placeholder='e.g. {"id": 7}'
-                        [value]="dispatchPayload()"
-                        (input)="dispatchPayload.set($any($event.target).value)"
-                        [attr.aria-invalid]="payloadError() ? 'true' : null"
-                        aria-describedby="ngrx-payload-error"
-                      ></textarea>
-                    </label>
-                    <p id="ngrx-payload-error" class="field-error">{{ payloadError() }}</p>
-                    <div class="actions">
-                      <button
-                        type="submit"
-                        class="btn primary"
-                        [disabled]="busy() || !canRestore() || !dispatchRequest()"
-                        [attr.aria-describedby]="canRestore() ? null : 'store-dispatch-off'"
-                      >
-                        Dispatch
-                      </button>
-                    </div>
-                    @if (!canRestore()) {
-                      <p id="store-dispatch-off" class="hint small">{{ restoreOff }}</p>
-                    }
-                  </form>
-                </section>
-              }
-            </div>
-          }
-        </div>
-      }
-      <p class="message" role="status">{{ message() }}</p>
-    </section>
-
-    @if (hasEvents()) {
-      <section class="block" aria-labelledby="ngrx-events-heading">
-        <div class="section-head">
-          <h2 id="ngrx-events-heading">Events</h2>
-          <span class="pill">{{ pageEvents().length }}</span>
-        </div>
-        <p class="intro">
-          Events dispatched through &#64;ngrx/signals/events, across every store on this page.
-        </p>
-        <ul
-          #eventsList
-          class="events-list"
-          appRovingList="button.event-item"
-          aria-label="Dispatched events"
-          [rovingWindow]="eventWindow"
-          [style.padding-top.px]="eventWindow.enabled() ? 6 + eventWindow.padTop() : null"
-          [style.padding-bottom.px]="eventWindow.enabled() ? 6 + eventWindow.padBottom() : null"
-        >
-          @for (shown of shownEvents(); track shown.entry.seq) {
-            @let evt = shown.entry;
-            <li
-              [attr.data-vindex]="shown.index"
-              [attr.aria-setsize]="eventWindow.enabled() ? pageEvents().length : null"
-              [attr.aria-posinset]="eventWindow.enabled() ? shown.index + 1 : null"
-            >
-              <button
-                type="button"
-                class="event-item"
-                [class.selected]="evt.seq === selectedEventSeq()"
-                [attr.aria-pressed]="evt.seq === selectedEventSeq()"
-                [attr.aria-controls]="evt.seq === selectedEventSeq() ? 'ngrx-event-detail' : null"
-                (click)="selectEvent(evt.seq)"
-              >
-                <span class="dot" aria-hidden="true" [style.background]="kindColor('event')"></span>
-                <span class="event-type mono" [title]="evt.eventType ?? evt.type">{{
-                  evt.eventType ?? evt.type
-                }}</span>
-                @if (evt.payload !== undefined) {
-                  <code class="event-payload" [title]="prettyText(evt.payload)">{{
-                    shortText(evt.payload)
-                  }}</code>
-                }
-                <span class="event-time">{{ formatTime(evt.timestamp) }}</span>
-              </button>
-            </li>
-          } @empty {
-            <li class="muted pad">No events match this filter.</li>
-          }
-        </ul>
-        @if (eventEntry(); as selected) {
-          <div id="ngrx-event-detail" tabindex="-1" class="event-detail-focus" #eventDetailHeading>
-            <ng-container
-              [ngTemplateOutlet]="entryDetailTpl"
-              [ngTemplateOutletContext]="{
-                selected: selected,
-                headingLevel: 3,
-                idPrefix: 'ngrx-event',
-              }"
-            />
-          </div>
-        }
-      </section>
-    }
-
-    <!--
-      Shared by both usages above: the per-store log (inside the store() guard) and the
-      page-level Events section (reachable with no live store at all, since a page can
-      dispatch @ngrx/signals/events without any signalStore/signalState instance). Only
-      "selected" is passed through context; everything else (store(), canRestore(), etc.)
-      is read directly since an embedded view still sees the component instance.
-    -->
-    <ng-template
-      #entryDetailTpl
-      let-selected="selected"
-      let-headingLevel="headingLevel"
-      let-idPrefix="idPrefix"
-    >
-      <section class="entry" [attr.aria-labelledby]="idPrefix + '-entry-heading'">
-        <div
-          class="entry-heading"
-          role="heading"
-          [attr.aria-level]="headingLevel"
-          [id]="idPrefix + '-entry-heading'"
-        >
-          #{{ selected.seq }} {{ selected.type }}
-        </div>
-        <dl class="kv">
-          <dt>Time</dt>
-          <dd>{{ formatTime(selected.timestamp) }}</dd>
-          @if (selected.origin) {
-            <dt>Origin</dt>
-            <dd>{{ originText(selected.origin) }}</dd>
-          }
-          @if (selected.durationMs !== undefined) {
-            <dt>Duration</dt>
-            <dd>{{ formatDuration(selected.durationMs) }}</dd>
-          }
-          @if (selected.trace?.length) {
-            <dt>Called from</dt>
-            <dd>
-              <ol class="trace">
-                @for (frame of traceFrames(selected.trace); track $index) {
-                  <li>
-                    @if (frame.file) {
-                      <app-source-link [file]="frame.file" [line]="frame.line"
-                        >{{ frame.name ? frame.name + ' ' : '' }}({{ frame.file }}:{{
-                          frame.line
-                        }})</app-source-link
-                      >
-                    } @else {
-                      <code>{{ frame.name }}</code>
-                    }
-                  </li>
-                }
-              </ol>
-            </dd>
-          }
-          @if (selected.source === 'event') {
-            <ng-container
-              [ngTemplateOutlet]="actionRowsTpl"
-              [ngTemplateOutletContext]="{ selected }"
-            />
-          }
-        </dl>
-        <ng-template #actionRowsTpl let-selected="selected">
-          @if (selected.action !== undefined) {
-            <dt>Action</dt>
-            <dd>
-              <pre class="code">{{ prettyText(selected.action) }}</pre>
-            </dd>
-          }
-          @if (selected.args?.length) {
-            <dt>Arguments</dt>
-            <dd>
-              <pre class="code">{{ prettyText(selected.args) }}</pre>
-            </dd>
-          }
-          @if (selected.source === 'event' && selected.payload !== undefined) {
-            <dt>Payload</dt>
-            <dd>
-              <pre class="code">{{ prettyText(selected.payload) }}</pre>
-            </dd>
-          }
-          @if (selected.causedByEvent; as caused) {
-            <dt>Caused by event</dt>
-            <dd>
-              <code class="mono">{{ caused.type }}</code>
-              @if (caused.payload !== undefined) {
-                <pre class="code">{{ prettyText(caused.payload) }}</pre>
-              }
-            </dd>
-          }
-        </ng-template>
-        <ng-template #diffTpl let-selected="selected">
-          <div class="sub-head">
-            <div class="sub" role="heading" [attr.aria-level]="headingLevel + 1">State diff</div>
-            @if (selected.diff.length) {
-              <button
-                type="button"
-                class="btn copy"
-                [attr.aria-label]="'Copy the state diff of #' + selected.seq"
-                (click)="copyDiff(selected)"
-              >
-                Copy
-              </button>
-            }
-          </div>
-          @if (selected.diff.length) {
-            <ul class="diff">
-              @for (change of selected.diff; track change.path) {
-                <li [class]="'diff-row ' + change.op">
-                  <span class="op">{{ opLabel(change.op) }}</span>
-                  <code class="path">{{ change.path }}</code>
-                  <span class="values">
-                    @if (change.op !== 'add') {
-                      <code class="before">{{ shortText(change.before) }}</code>
-                    }
-                    @if (change.op === 'change') {
-                      <span class="arrow" aria-hidden="true">→</span
-                      ><span class="visually-hidden">became</span>
-                    }
-                    @if (change.op !== 'remove') {
-                      <code class="after">{{ shortText(change.after) }}</code>
-                    }
-                  </span>
-                </li>
-              }
-            </ul>
-            @if (selected.diffTruncated) {
-              <p class="muted">{{ moreChanges(selected.diffTruncated) }}</p>
-            }
-          } @else {
-            <p class="muted">The state did not change.</p>
-          }
-        </ng-template>
-        @if (selected.source === 'redux') {
-          @if (selected.action !== undefined) {
-            <dl class="kv redux-action">
-              <ng-container
-                [ngTemplateOutlet]="actionRowsTpl"
-                [ngTemplateOutletContext]="{ selected }"
-              />
-            </dl>
-          }
-          <ng-container [ngTemplateOutlet]="diffTpl" [ngTemplateOutletContext]="{ selected }" />
-        } @else if (selected.source !== 'event') {
-          <app-entry-tabs
-            [idPrefix]="idPrefix + '-' + selected.seq"
-            [seq]="selected.seq"
-            [diffTruncated]="selected.diffTruncated"
-            [loader]="loadEntry"
-          >
-            <div tab-action>
-              @if (
-                selected.action !== undefined || selected.args?.length || selected.causedByEvent
-              ) {
-                <dl class="kv">
-                  <ng-container
-                    [ngTemplateOutlet]="actionRowsTpl"
-                    [ngTemplateOutletContext]="{ selected }"
-                  />
-                </dl>
-              } @else {
-                <p class="muted">
-                  No action or arguments: a restore, or a patchState write outside a method.
-                </p>
-              }
-            </div>
-            <div tab-diff>
-              <ng-container [ngTemplateOutlet]="diffTpl" [ngTemplateOutletContext]="{ selected }" />
-            </div>
-          </app-entry-tabs>
-        }
-
-        @if (selected.restorable && confirmSeq() === selected.seq) {
-          <div
-            class="confirm"
-            role="group"
-            [attr.aria-labelledby]="idPrefix + '-confirm-text'"
-            (keydown.escape)="cancelRestore($event)"
-          >
-            <p [id]="idPrefix + '-confirm-text'">
-              @if (selected.source === 'store') {
-                Store DevTools jumps the app state to the state right after action #{{
-                  selected.seq
-                }}. Until you go back to the latest state, new actions are logged but do not change
-                the state.
-              } @else {
-                @if (store(); as current) {
-                  This sets every state key of {{ current.label }} back to its value right after
-                  change #{{ selected.seq }}. Components that read the store update at once, and a
-                  new "Restore" entry is added to the log.
-                } @else {
-                  This sets every state key of the store back to its value right after change #{{
-                    selected.seq
-                  }}. Components that read the store update at once, and a new "Restore" entry is
-                  added to the log.
-                }
-              }
-            </p>
-            <div class="actions">
-              <button
-                type="button"
-                class="btn primary"
-                [disabled]="busy()"
-                (click)="restore(selected.seq, selected.source === 'store')"
-              >
-                Restore
-              </button>
-              <button type="button" class="btn" (click)="cancelRestore()" #cancelButton>
-                Cancel
-              </button>
-            </div>
-          </div>
-        }
-        @if (
-          confirmSeq() !== selected.seq &&
-          (selected.restorable || canAgain(selected) || canToggle(selected))
-        ) {
-          <div class="entry-actions">
-            @if (canToggle(selected)) {
-              <button
-                type="button"
-                class="btn"
-                [disabled]="busy() || !canRestore()"
-                [attr.aria-describedby]="canRestore() ? null : idPrefix + '-writes-off'"
-                (click)="devtoolsOp({ op: 'toggle', seq: selected.seq })"
-              >
-                {{ isSkipped(selected.seq) ? 'Include this action' : 'Skip this action' }}
-              </button>
-            }
-            @if (selected.restorable) {
-              <button
-                type="button"
-                class="btn restore"
-                [disabled]="!canRestore()"
-                [attr.aria-describedby]="canRestore() ? null : idPrefix + '-writes-off'"
-                (click)="askRestore(selected.seq)"
-                #restoreButton
-              >
-                Restore this state
-              </button>
-            }
-            @if (canAgain(selected)) {
-              <button
-                type="button"
-                class="btn"
-                [disabled]="busy() || !canRestore()"
-                [attr.aria-describedby]="canRestore() ? null : idPrefix + '-writes-off'"
-                (click)="dispatchAgain(selected.seq)"
-              >
-                Dispatch again
-              </button>
-            }
-          </div>
-          @if (!canRestore()) {
-            <p [id]="idPrefix + '-writes-off'" class="hint small">{{ restoreOff }}</p>
-          }
-        }
-        @if (selected.source === 'redux') {
-          <p class="hint small">
-            This store reports through its Redux DevTools integration, which the panel reads but
-            does not write to, so its state cannot be restored from here.
-          </p>
-        }
-        @if (!selected.restorable && selected.source === 'store') {
-          <p class="hint small">
-            @if (selected.unrestorable === 'dropped') {
-              Store DevTools no longer holds this action, so this state cannot be restored. It was
-              dropped past <code>maxAge</code>, or the Store DevTools history was committed, reset
-              or imported.
-            } @else if (selected.unrestorable === 'not-recorded') {
-              Store DevTools never recorded this action, so this state cannot be restored. An
-              <code>actionsBlocklist</code>, <code>actionsSafelist</code> or
-              <code>predicate</code> option filtered it out, or recording was paused.
-            } @else {
-              Time travel for &#64;ngrx/store needs <code>provideStoreDevtools()</code>. Without it,
-              entries cannot be restored.
-            }
-          </p>
-        }
-      </section>
-    </ng-template>
-
-    <section class="block" aria-labelledby="ngrx-source-heading">
-      <div class="section-head">
-        <h2 id="ngrx-source-heading">Source declarations</h2>
-        @if (sourceEntries().length) {
-          <span class="pill">{{ sourceEntries().length }}</span>
-        }
-      </div>
-      @if (!sourceLoaded()) {
-        <div class="empty compact" role="status">
-          <span class="spinner" aria-hidden="true"></span>
-          <p class="empty-title">Scanning source for NgRx declarations…</p>
-        </div>
-      } @else if (sourceEntries().length === 0) {
-        <div class="empty compact">
-          <p class="empty-title">No NgRx declarations found in source.</p>
-          <p class="hint">
-            The scan looks for <code>signalStore</code>, <code>signalState</code>,
-            <code>signalMethod</code>, <code>createAction</code>, <code>createReducer</code>,
-            <code>createEffect</code>, <code>createSelector</code> and <code>createFeature</code>.
-          </p>
-        </div>
-      } @else {
-        <div class="kinds" role="group" aria-label="Filter declarations by kind">
-          <button
-            type="button"
-            class="kind-chip"
-            [class.active]="!kind()"
-            [attr.aria-pressed]="!kind()"
-            (click)="kind.set(null)"
-          >
-            All <span class="count">{{ sourceEntries().length }}</span>
-          </button>
-          @for (group of groupedEntries(); track group.kind) {
-            <button
-              type="button"
-              class="kind-chip"
-              [class.active]="kind() === group.kind"
-              [attr.aria-pressed]="kind() === group.kind"
-              (click)="kind.set(kind() === group.kind ? null : group.kind)"
-            >
-              <span
-                class="dot"
-                aria-hidden="true"
-                [style.background]="kindColor(group.kind)"
-              ></span>
-              <span class="chip-text">{{ kindLabel(group.kind) }}</span>
-              <span class="count">{{ group.count }}</span>
-            </button>
-          }
-        </div>
-
-        <ul class="nodes">
-          @for (entry of filteredEntries(); track entry.name + entry.file + entry.line) {
-            <li class="node-card">
-              <div class="node-header">
-                <span
-                  class="dot"
-                  aria-hidden="true"
-                  [style.background]="kindColor(entry.kind)"
-                ></span>
-                <span class="node-label">{{ entry.name }}</span>
-                <span class="chip">{{ kindLabel(entry.kind) }}</span>
-              </div>
-              <div class="node-meta">
-                <app-source-link class="file" [file]="entry.file" [line]="entry.line" />
-              </div>
-              @if (entry.detail) {
-                <p class="detail">{{ entry.detail }}</p>
-              }
-            </li>
-          } @empty {
-            <li>
-              <div class="empty compact" role="status">
-                <p class="empty-title">No declarations match.</p>
-                <button type="button" class="btn" (click)="clearFilters()">Clear filters</button>
-              </div>
-            </li>
-          }
-        </ul>
-      }
-    </section>
-  `,
-  styles: `
-    @use 'mixins' as m;
-
-    .page-intro {
-      margin: 0 0 12px;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .search {
-      position: relative;
-      display: flex;
-      flex: 1 1 220px;
-      min-width: 0;
-    }
-    .search > input {
-      flex: 1 1 auto;
-      width: 100%;
-      padding-left: 34px;
-    }
-    .search-icon {
-      position: absolute;
-      top: 50%;
-      left: 12px;
-      width: 14px;
-      height: 14px;
-      transform: translateY(-50%);
-      fill: none;
-      stroke: var(--text-3);
-      stroke-width: 2.2;
-      stroke-linecap: round;
-      pointer-events: none;
-    }
-    .search:focus-within .search-icon {
-      stroke: var(--accent);
-    }
-
-    :host {
-      display: grid;
-      gap: 24px;
-      min-width: 0;
-      color: var(--text);
-      font-size: 13px;
-    }
-    .intro {
-      max-width: 720px;
-      margin: 0;
-      color: var(--text-2);
-      line-height: 1.5;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px 12px;
-      align-items: center;
-      padding: 10px 12px;
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    input {
-      flex: 1 1 220px;
-      min-width: 0;
-      height: 34px;
-      padding: 0 12px;
-      background: var(--bg);
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      color: var(--text);
-      font: inherit;
-      font-size: 13px;
-      outline: none;
-      transition:
-        border-color 0.15s var(--ease),
-        box-shadow 0.15s var(--ease);
-    }
-    input::placeholder {
-      color: var(--text-3);
-    }
-    input:focus-visible {
-      @include m.field-focus;
-    }
-    .page-select {
-      flex: 0 1 220px;
-      min-width: 0;
-    }
-    .status {
-      display: inline-flex;
-      flex: none;
-      align-items: center;
-      gap: 6px;
-      color: var(--text-2);
-      font-size: 12px;
-      font-weight: 500;
-    }
-    .live-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: var(--text-3);
-    }
-    .status.on .live-dot {
-      background: var(--ok);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent);
-      animation: pulse 2s infinite;
-    }
-    @keyframes pulse {
-      50% {
-        opacity: 0.4;
-      }
-    }
-    .block {
-      display: grid;
-      gap: 12px;
-      min-width: 0;
-    }
-    .section-head {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-height: 24px;
-    }
-    h2,
-    h4,
-    .sub {
-      @include m.label;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin: 0;
-    }
-    h4 {
-      margin-bottom: 10px;
-    }
-    .spaced {
-      margin-top: 16px;
-    }
-    .sub {
-      margin: 14px 0 8px;
-    }
-    .fact-head,
-    .sub-head {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      min-width: 0;
-    }
-    .fact-head {
-      margin-bottom: 10px;
-    }
-    .state-actions {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-    }
-    .fact-head h4 {
-      margin: 0;
-    }
-    .sub-head {
-      margin: 14px 0 8px;
-    }
-    .sub-head .sub {
-      margin: 0;
-    }
-    .btn.copy {
-      flex: none;
-      height: var(--control-h);
-      padding: 0 10px;
-      font-size: 12px;
-    }
-    .pill {
-      min-width: 20px;
-      padding: 0 7px;
-      border-radius: 99px;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      color: var(--text-2);
-      font-size: 11px;
-      font-weight: 500;
-      letter-spacing: 0;
-      line-height: 18px;
-      text-align: center;
-      font-variant-numeric: tabular-nums;
-    }
-    .empty {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-      text-align: center;
-      padding: 36px 24px;
-      @include m.panel;
-      @include m.enter;
-    }
-    .empty.compact {
-      padding: 24px 16px;
-      border-style: dashed;
-      background: transparent;
-    }
-    .empty-title {
-      margin: 0;
-      color: var(--text-strong);
-      font-size: 14px;
-      font-weight: 600;
-    }
-    .hint {
-      max-width: 520px;
-      margin: 0;
-      color: var(--text-2);
-      line-height: 1.55;
-      overflow-wrap: anywhere;
-    }
-    .hint.small {
-      margin-top: 12px;
-      font-size: 12px;
-    }
-    code {
-      font-family: var(--font-mono);
-      font-size: 12px;
-    }
-    .hint code,
-    .refs code {
-      padding: 1px 5px;
-      color: var(--text);
-      background: var(--surface-3);
-      border: 1px solid var(--border);
-      border-radius: 5px;
-    }
-    .muted {
-      margin: 0;
-      color: var(--text-2);
-    }
-    .pad {
-      padding: 20px 12px;
-      text-align: center;
-      line-height: 1.5;
-    }
-    .btn {
-      height: var(--control-h);
-      padding: 0 14px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--surface-2);
-      color: var(--text);
-      font: inherit;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 0.15s var(--ease),
-        border-color 0.15s var(--ease);
-    }
-    .btn:hover {
-      background: var(--surface-3);
-    }
-    .btn:focus-visible {
-      @include m.focus-ring;
-    }
-    .btn:disabled {
-      opacity: 0.6;
-      cursor: default;
-    }
-    .btn.primary,
-    .btn.restore {
-      border-color: var(--accent-line);
-      background: var(--accent-soft);
-      color: var(--text-strong);
-    }
-    .btn.restore {
-      margin-top: 14px;
-    }
-    .live-layout {
-      display: grid;
-      grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
-      min-width: 0;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      overflow: hidden;
-      @include m.enter;
-    }
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-    .store-list {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      padding: 8px;
-      border-right: 1px solid var(--border);
-      background: var(--surface-2);
-    }
-    .store-item,
-    .log-item {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 3px;
-      width: 100%;
-      padding: 8px 10px;
-      border: none;
-      border-radius: var(--radius-sm);
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      text-align: left;
-      cursor: pointer;
-      transition: background-color 0.15s var(--ease);
-    }
-    .store-item:hover,
-    .log-item:hover,
-    .event-item:hover {
-      background: var(--surface-3);
-    }
-    .store-item:focus-visible,
-    .log-item:focus-visible,
-    .event-item:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .store-item.selected,
-    .log-item.selected,
-    .event-item.selected {
-      background: var(--accent-soft);
-      box-shadow: inset 2px 0 0 var(--accent);
-    }
-    .store-top {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-      max-width: 100%;
-    }
-    .store-name {
-      @include m.truncate;
-      font-family: var(--font-mono);
-      font-weight: 600;
-      color: var(--text-strong);
-    }
-    .store-meta,
-    .log-meta {
-      color: var(--text-2);
-      font-size: 11.5px;
-      font-variant-numeric: tabular-nums;
-    }
-    .dot {
-      flex: none;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-    }
-    .store-detail {
-      display: grid;
-      gap: 16px;
-      min-width: 0;
-      padding: 16px;
-    }
-    .detail-head h3 {
-      margin: 0 0 8px;
-      color: var(--accent);
-      font-family: var(--font-mono);
-      font-size: 15px;
-      font-weight: 600;
-      overflow-wrap: anywhere;
-    }
-    .chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      max-width: 100%;
-      padding: 1px 8px;
-      border: 1px solid var(--border);
-      border-radius: 99px;
-      background: var(--surface-2);
-      color: var(--text-2);
-      font-size: 11.5px;
-      line-height: 18px;
-      overflow-wrap: anywhere;
-    }
-    .chip.mono {
-      font-family: var(--font-mono);
-    }
-    .refs {
-      margin: 10px 0 0;
-      color: var(--text-2);
-      line-height: 1.8;
-    }
-    .facts {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-      gap: 16px;
-      min-width: 0;
-    }
-    .fact {
-      min-width: 0;
-    }
-    pre {
-      margin: 0;
-      font-family: var(--font-mono);
-      font-size: 12px;
-      line-height: 1.55;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-      color: var(--text);
-    }
-    .tree,
-    .code {
-      max-height: 360px;
-      overflow: auto;
-      padding: 10px 12px;
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-    }
-    .code {
-      max-height: 220px;
-    }
-    .tree:focus-visible {
-      @include m.focus-ring;
-    }
-    .kv {
-      display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
-      gap: 6px 14px;
-      margin: 0;
-    }
-    /* The same gap the NgRx entry tabs keep below Time. */
-    .kv.redux-action {
-      margin-top: 10px;
-    }
-    .kv dt {
-      font-family: var(--font-mono);
-      font-size: 12px;
-      color: var(--text-2);
-    }
-    .kv dd {
-      min-width: 0;
-      margin: 0;
-      overflow-wrap: anywhere;
-    }
-    .methods {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-    .methods li {
-      flex-wrap: wrap;
-      row-gap: 2px;
-    }
-    .tag {
-      padding: 0 5px;
-      border-radius: 4px;
-      background: var(--accent-soft);
-      color: var(--text-strong);
-      font-size: 10.5px;
-    }
-    .calls {
-      color: var(--text-3);
-      font-family: var(--font-sans, inherit);
-      font-size: 11px;
-    }
-    .entities {
-      display: grid;
-      gap: 14px;
-    }
-    .entity-group {
-      display: grid;
-      gap: 8px;
-    }
-    .entity-head {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .entity-count {
-      color: var(--text-2);
-      font-size: 11.5px;
-      font-variant-numeric: tabular-nums;
-    }
-    .entity-ids {
-      margin: 0;
-    }
-    .chip.more {
-      border-style: dashed;
-      color: var(--text-3);
-    }
-    .events-list {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      max-height: 260px;
-      overflow: auto;
-      padding: 6px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      @include m.enter;
-    }
-    .event-item {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 8px 10px;
-      width: 100%;
-      min-width: 0;
-      padding: 7px 10px;
-      border: none;
-      border-radius: var(--radius-sm);
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      text-align: left;
-      cursor: pointer;
-      transition: background-color 0.15s var(--ease);
-    }
-    .event-type {
-      flex: none;
-      font-weight: 600;
-      color: var(--text-strong);
-      font-size: 12.5px;
-    }
-    .event-payload {
-      flex: 1 1 160px;
-      min-width: 0;
-      @include m.truncate;
-      color: var(--text-2);
-    }
-    .event-time {
-      flex: none;
-      margin-left: auto;
-      color: var(--text-3);
-      font-size: 11.5px;
-      font-variant-numeric: tabular-nums;
-    }
-    .log {
-      min-width: 0;
-      padding-top: 16px;
-      border-top: 1px solid var(--border);
-    }
-    .live-row {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 8px 12px;
-      margin: 0 0 8px;
-    }
-    .log-layout {
-      display: grid;
-      grid-template-columns: min(var(--log-list-size, 300px), 60%) auto minmax(0, 1fr);
-      gap: 16px;
-      min-width: 0;
-    }
-    .log-list {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      max-height: 420px;
-      overflow: auto;
-      padding: 2px;
-    }
-    .log-item {
-      display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
-      column-gap: 8px;
-      row-gap: 2px;
-    }
-    .seq {
-      color: var(--text-3);
-      font-size: 11.5px;
-      font-variant-numeric: tabular-nums;
-    }
-    .log-type-row {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      min-width: 0;
-    }
-    .log-type {
-      @include m.truncate;
-      min-width: 0;
-      font-family: var(--font-mono);
-      font-size: 12.5px;
-      color: var(--text);
-    }
-    .log-meta {
-      grid-column: 2;
-    }
-    .entry {
-      min-width: 0;
-      padding: 14px;
-      border: 1px solid var(--accent-line);
-      border-radius: var(--radius-sm);
-      @include m.enter(0.25s);
-    }
-    .entry .entry-heading {
-      margin: 0 0 12px;
-      font-family: var(--font-mono);
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-    }
-    .diff {
-      display: grid;
-      gap: 4px;
-    }
-    .diff-row {
-      display: grid;
-      grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
-      gap: 8px;
-      align-items: baseline;
-      padding: 5px 8px;
-      border-radius: 6px;
-      background: var(--surface-2);
-    }
-    .op {
-      font-size: 10.5px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
-      color: var(--text-2);
-    }
-    .diff-row.add .op {
-      color: var(--ok);
-    }
-    .diff-row.remove .op {
-      color: var(--danger);
-    }
-    .path {
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-    }
-    .values {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px 6px;
-      min-width: 0;
-      overflow-wrap: anywhere;
-    }
-    .before {
-      color: var(--text-2);
-      text-decoration: line-through;
-    }
-    .after {
-      color: var(--text);
-    }
-    .arrow {
-      color: var(--text-3);
-    }
-    .confirm {
-      margin-top: 14px;
-      padding: 12px;
-      border: 1px solid var(--accent-line);
-      border-radius: var(--radius-sm);
-      background: var(--accent-soft);
-    }
-    .confirm p {
-      margin: 0 0 10px;
-      line-height: 1.5;
-    }
-    .actions,
-    .entry-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-    .entry-actions {
-      margin-top: 14px;
-    }
-    .entry-actions .btn.restore {
-      margin-top: 0;
-    }
-    .dispatch {
-      min-width: 0;
-      margin-top: 16px;
-      padding-top: 16px;
-      border-top: 1px solid var(--border);
-    }
-    .dispatch-form {
-      display: grid;
-      gap: 10px;
-      max-width: 560px;
-    }
-    .dispatch-form label {
-      display: grid;
-      gap: 6px;
-      color: var(--text-2);
-      font-size: 12px;
-      font-weight: 500;
-    }
-    .optional {
-      color: var(--text-3);
-      font-weight: 400;
-    }
-    .dispatch-form input {
-      width: 100%;
-      font-family: var(--font-mono);
-      font-size: 12.5px;
-    }
-    textarea {
-      width: 100%;
-      min-width: 0;
-      padding: 8px 10px;
-      border: 1px solid var(--control-border);
-      border-radius: var(--radius-sm);
-      background: var(--bg);
-      color: var(--text);
-      font-family: var(--font-mono);
-      font-size: 12px;
-      resize: vertical;
-      transition:
-        border-color 0.15s var(--ease),
-        box-shadow 0.15s var(--ease);
-    }
-    textarea::placeholder {
-      color: var(--text-3);
-    }
-    textarea:focus-visible {
-      @include m.field-focus;
-    }
-    textarea[aria-invalid='true'] {
-      border-color: color-mix(in srgb, var(--danger) 60%, transparent);
-    }
-    .field-error {
-      margin: -4px 0 0;
-      color: var(--danger);
-      font-size: 12px;
-    }
-    .field-error:empty {
-      display: none;
-    }
-    .history,
-    .stats {
-      min-width: 0;
-      margin-top: 16px;
-    }
-    .history h4,
-    .stats h4 {
-      margin: 0 0 6px;
-    }
-    .history .actions {
-      margin-top: 8px;
-    }
-    .table-wrap {
-      max-height: 280px;
-      overflow: auto;
-      margin-top: 8px;
-      border: 1px solid var(--border);
-      border-radius: var(--radius-sm);
-    }
-    .table-wrap:focus-visible {
-      @include m.focus-ring(-2px);
-    }
-    .stats table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 12px;
-    }
-    .stats th,
-    .stats td {
-      padding: 5px 8px;
-      border-bottom: 1px solid var(--border);
-      text-align: left;
-      vertical-align: baseline;
-    }
-    .stats thead th {
-      position: sticky;
-      top: 0;
-      background: var(--surface-2);
-      color: var(--text-2);
-      font-weight: 600;
-    }
-    .stats tbody th {
-      font-weight: 400;
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-    }
-    .stats .num {
-      text-align: right;
-      white-space: nowrap;
-    }
-    .mono {
-      font-family: var(--font-mono);
-    }
-    .loop {
-      display: inline-block;
-      margin-left: 6px;
-      padding: 0 5px;
-      border: 1px solid;
-      border-radius: 4px;
-      font-family: var(--font-sans, inherit);
-      font-size: 10.5px;
-      @include m.tint(warn);
-    }
-    .trace {
-      display: grid;
-      gap: 2px;
-      margin: 0;
-      padding-left: 18px;
-      font-family: var(--font-mono);
-      font-size: 12px;
-    }
-    .paused {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 10px 14px;
-      margin-bottom: 14px;
-      padding: 10px 12px;
-      border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
-      border-radius: var(--radius-sm);
-      background: color-mix(in srgb, var(--warn) 10%, transparent);
-    }
-    .paused p {
-      flex: 1 1 240px;
-      margin: 0;
-      line-height: 1.5;
-    }
-    .paused .hint.small {
-      flex-basis: 100%;
-      margin-top: 0;
-    }
-    .message:empty {
-      display: none;
-    }
-    .message {
-      margin: 0;
-      color: var(--text-2);
-    }
-    .kinds {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-    .kind-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      max-width: 100%;
-      height: 28px;
-      padding: 0 10px;
-      border: 1px solid var(--control-border);
-      border-radius: 99px;
-      background: var(--surface-2);
-      color: var(--text-2);
-      font: inherit;
-      font-size: 12px;
-      font-weight: 500;
-      cursor: pointer;
-      transition:
-        background-color 0.15s var(--ease),
-        border-color 0.15s var(--ease),
-        color 0.15s var(--ease);
-    }
-    .kind-chip:hover {
-      border-color: var(--text-3);
-      background: var(--surface-3);
-      color: var(--text);
-    }
-    .kind-chip.active {
-      border-color: var(--accent-line);
-      background: var(--accent-soft);
-      color: var(--text-strong);
-    }
-    .kind-chip:focus-visible {
-      @include m.focus-ring;
-    }
-    .chip-text {
-      @include m.truncate;
-    }
-    .kind-chip .count {
-      flex: none;
-      min-width: 18px;
-      padding: 0 5px;
-      border-radius: 99px;
-      background: var(--surface-3);
-      color: var(--text-2);
-      font-size: 11px;
-      line-height: 16px;
-      text-align: center;
-      font-variant-numeric: tabular-nums;
-    }
-    .nodes {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      @include m.enter;
-    }
-    .node-card {
-      min-width: 0;
-      padding: 12px 16px;
-      @include m.panel;
-      border-radius: var(--radius-sm);
-    }
-    .node-header {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 6px 8px;
-      min-width: 0;
-    }
-    .node-label {
-      min-width: 0;
-      font-family: var(--font-mono);
-      font-weight: 500;
-      color: var(--text-strong);
-      overflow-wrap: anywhere;
-    }
-    .node-meta {
-      margin-top: 6px;
-      color: var(--text-3);
-      font-size: 12px;
-    }
-    .file {
-      font-family: var(--font-mono);
-      font-size: 11.5px;
-      overflow-wrap: anywhere;
-    }
-    .detail {
-      margin: 6px 0 0;
-      color: var(--text-2);
-      font-size: 12px;
-      line-height: 1.5;
-      overflow-wrap: anywhere;
-    }
-    .spinner {
-      width: 18px;
-      height: 18px;
-      border: 2px solid var(--border-strong);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .spinner,
-      .status.on .live-dot {
-        animation: none;
-      }
-    }
-    @media (max-width: 760px) {
-      .live-layout,
-      .log-layout {
-        grid-template-columns: minmax(0, 1fr);
-      }
-      .log-layout > app-splitter {
-        display: none;
-      }
-      .store-list {
-        border-right: none;
-        border-bottom: 1px solid var(--border);
-      }
-    }
-    @media (max-width: 480px) {
-      .toolbar {
-        padding: 8px;
-      }
-      .toolbar input,
-      .page-select {
-        flex-basis: 100%;
-      }
-      .store-detail {
-        padding: 12px;
-      }
-      .kv {
-        grid-template-columns: minmax(0, 1fr);
-      }
-    }
-  `,
+  imports: [SearchField, Select, StoreEvents, StoreLive, StoreSource],
+  providers: [StoreState, StoreActions],
+  templateUrl: './store-inspector.html',
+  styleUrl: './store-inspector.scss',
 })
 export class StoreInspector {
   readonly rpc = input<DevframeRpcClient | null>(null);
-  readonly canRestore = computed(() => actionAllowed(this.rpc(), 'ngrx'));
-  protected readonly restoreOff = actionBlockedMessage('ngrx');
 
-  readonly filter = signal('');
-  /** The change list width on wide panels, set by the splitter and saved. */
-  readonly logListSize = signal(storedPaneSize('store-log', 300));
-  readonly kind = signal<string | null>(null);
-  readonly sourceEntries = signal<NgrxStoreEntry[]>([]);
-  readonly sourceLoaded = signal(false);
-  readonly pages = signal<NgrxPage[]>([]);
-  /** Pages with stores that report through the Redux DevTools API (`redux-stores` shared state). */
-  readonly reduxPages = signal<ReduxStoresPage[]>([]);
-  /** The NgRx pages, plus pages that only report other stores. */
-  readonly allPages = computed<NgrxPage[]>(() => {
-    const ngrx = this.pages();
-    const known = new Set(ngrx.map((p) => p.pageId));
-    const others = this.reduxPages()
-      .filter((p) => !known.has(p.pageId))
-      .map((p) => ({
-        pageId: p.pageId,
-        url: p.url,
-        title: p.title,
-        stores: [],
-        classic: null,
-        log: [],
-        reportedAt: p.reportedAt,
-      }));
-    return [...ngrx, ...others];
-  });
-  readonly failed = signal(false);
-  /** Whether the shared state has arrived, so the empty message doesn't show first. */
-  readonly stateLoaded = signal(false);
-  readonly selectedPageId = signal<string | null>(null);
-  private readonly hostPageId = hostPageId();
-  private readonly angularPages = injectAngularPages(() => this.rpc());
-  /** The shown page's Angular version and debug API parts, for the unavailable note. */
-  readonly angularPage = computed(() =>
-    angularPageFor(this.angularPages(), this.page()?.pageId ?? this.hostPageId),
-  );
-  readonly maxLog = computed(() => panelConfig(this.rpc()).limits.changeLog);
-  readonly selectedStoreId = signal<string | null>(null);
-  private readonly focusEventSeq = signal<number | null>(null);
-  private readonly eventDetailHeading = viewChild<ElementRef<HTMLElement>>('eventDetailHeading');
-  readonly busy = signal(false);
-  private readonly focusLatest = signal(false);
-  private readonly focusConfirm = signal<'cancel' | 'restore' | null>(null);
-  private readonly cancelButton = viewChild<ElementRef<HTMLButtonElement>>('cancelButton');
-  private readonly restoreButton = viewChild<ElementRef<HTMLButtonElement>>('restoreButton');
-  private readonly stateTree = viewChild(StoreStateTree);
-  private readonly resetButton = viewChild<ElementRef<HTMLButtonElement>>('resetButton');
-  private readonly resetCancel = viewChild<ElementRef<HTMLButtonElement>>('resetCancel');
-  /** The reset confirm is open; it closes when another store is shown. */
-  readonly confirmReset = linkedSignal<string | undefined, boolean>({
-    source: () => this.store()?.id,
-    computation: () => false,
-  });
-  private readonly focusReset = signal<'cancel' | 'reset' | null>(null);
-  /** How many effect dispatches within a second flag a loop (`NGRX_LOOP_BURST`). */
-  protected readonly loopBurst = 20;
+  private readonly state = inject(StoreState);
+  private readonly actions = inject(StoreActions);
   private readonly filterInput = viewChild<SearchField>('filterInput');
-  private readonly latestButton = viewChild<ElementRef<HTMLButtonElement>>('latestButton');
-  readonly message = signal('');
-
-  private readonly destroyRef = inject(DestroyRef);
-  private unsubscribe: (() => void) | null = null;
-  private unsubscribeOthers: (() => void) | null = null;
-
-  readonly page = computed<NgrxPage | null>(() => {
-    const pages = this.allPages();
-    return (
-      pages.find((p) => p.pageId === this.selectedPageId()) ??
-      pages.find((p) => p.pageId === this.hostPageId) ??
-      pages[0] ??
-      null
-    );
-  });
-
-  /** A page is connected, with stores or without: every page reports its Angular version. */
-  readonly pageConnected = computed(() => !!this.page() || !!this.angularPage());
-
-  /** The other stores of the shown page. */
-  readonly reduxPage = computed(
-    () => this.reduxPages().find((p) => p.pageId === this.page()?.pageId) ?? null,
-  );
-
-  private readonly logKey = computed<NgrxLogKey>(() => {
-    const page = this.page();
-    const store = this.store();
-    // Another store's log has its own seq, so it is its own session.
-    if (store?.redux) {
-      return { pageId: `${page?.pageId}/${store.id}`, log: reduxLog(this.reduxPage(), store.id) };
-    }
-    return { pageId: page?.pageId ?? null, log: page?.log ?? [] };
-  });
-
-  /**
-   * Counts the change logs this view has shown. It moves on when `page()` switches to another
-   * page (including the fallback when the chosen page closes) and when the app reloads, which
-   * keeps the `pageId` but restarts `seq` at 1, so a seq picked before means another entry now.
-   */
-  private readonly logSession = linkedSignal<NgrxLogKey, number>({
-    source: this.logKey,
-    computation: (key, previous) =>
-      !previous ? 0 : sameNgrxLog(previous.source, key) ? previous.value : previous.value + 1,
-  });
-
-  // Two selection cursors so clicking an event never swaps out the per-store
-  // change-log detail: the change log keeps its own highlighted row, the
-  // Events section keeps its own, and each shows its detail in-place.
-  // All three are seqs, so they reset whenever the change log is another one.
-  readonly selectedChangeSeq = linkedSignal<number, number | null>({
-    source: this.logSession,
-    computation: () => null,
-  });
-  readonly selectedEventSeq = linkedSignal<number, number | null>({
-    source: this.logSession,
-    computation: () => null,
-  });
-  readonly confirmSeq = linkedSignal<number, number | null>({
-    source: this.logSession,
-    computation: () => null,
-  });
-
-  readonly pageOptions = computed<SelectOption[]>(() =>
-    this.allPages().map((p) => ({ value: p.pageId, label: p.title || p.url, hint: p.url })),
-  );
-
-  readonly liveStores = computed<LiveStore[]>(() => {
-    const page = this.page();
-    if (!page) return [];
-    const stores: LiveStore[] = page.stores.map((info) => ({
-      id: info.id,
-      label: info.name ?? info.references[0] ?? info.className,
-      kind: info.kind,
-      scope: info.scope,
-      signal: info,
-    }));
-    if (page.classic) {
-      stores.push({
-        id: 'store',
-        label: 'Store',
-        kind: 'store',
-        scope: page.classic.scope,
-        classic: page.classic,
-      });
-    }
-    stores.push(...reduxLiveStores(this.reduxPage()));
-    return stores;
-  });
-
-  readonly filteredStores = computed(() => {
-    const f = this.filter().trim().toLowerCase();
-    if (!f) return this.liveStores();
-    return this.liveStores().filter(
-      (s) =>
-        s.label.toLowerCase().includes(f) ||
-        s.kind.includes(f) ||
-        (s.signal?.stateKeys ?? []).some((k) => k.toLowerCase().includes(f)) ||
-        this.logOf(s).some((e) => e.type.toLowerCase().includes(f)),
-    );
-  });
-
-  readonly store = computed<LiveStore | null>(() => {
-    const stores = this.liveStores();
-    return stores.find((s) => s.id === this.selectedStoreId()) ?? stores[0] ?? null;
-  });
-
-  readonly stateText = computed(() => {
-    const store = this.store();
-    if (!store) return '';
-    return pretty(
-      store.signal ? store.signal.state : store.redux ? store.redux.state : store.classic?.state,
-    );
-  });
-
-  /** The serialized state of the selected store, for the state tree. */
-  readonly stateValue = computed<unknown>(() => {
-    const store = this.store();
-    if (!store) return undefined;
-    return store.signal
-      ? store.signal.state
-      : store.redux
-        ? store.redux.state
-        : store.classic?.state;
-  });
-
-  /** The paths the newest change of the selected store wrote, marked in the state tree. */
-  readonly changedPaths = computed<string[]>(() => {
-    const store = this.store();
-    const log = store ? this.logOf(store) : [];
-    let newest: NgrxLogEntry | undefined;
-    for (let i = log.length - 1; i >= 0 && !newest; i--) if (log[i].diff.length) newest = log[i];
-    return (newest?.diff ?? []).map((d) => d.path);
-  });
-
-  /** The selected store's action stats, most frequent first. */
-  readonly storeStats = computed<NgrxActionStat[]>(() => {
-    const store = this.store();
-    if (!store || store.redux) return [];
-    const stats = this.page()?.stats;
-    return Array.isArray(stats) ? stats.filter((s) => s.storeId === store.id) : [];
-  });
-  readonly hasLoop = computed(() => this.storeStats().some((s) => s.loop));
-
-  private readonly skippedSeqs = computed(
-    () =>
-      new Set(Array.isArray(this.page()?.classic?.skipped) ? this.page()!.classic!.skipped : []),
-  );
-
-  readonly computedEntries = computed(() =>
-    Object.entries(this.store()?.signal?.computed ?? {}).map(([key, value]) => ({
-      key,
-      value: short(value, 160),
-      full: pretty(value),
-    })),
-  );
-
-  /** Pause holds the selected store's log as it is while the app keeps changing it. */
-  readonly logFeed = new LiveFeed<NgrxLogEntry>({
-    name: 'store-log',
-    source: () => {
-      const store = this.store();
-      return store ? this.logOf(store) : [];
-    },
-    key: (entry) => entry.seq,
-    newest: 'last',
-    scope: () => `${this.store()?.id ?? ''}:${this.logSession()}`,
-  });
-
-  readonly storeLog = computed<NgrxLogEntry[]>(() => {
-    const f = this.filter().trim().toLowerCase();
-    return this.logFeed
-      .items()
-      .filter((e) => !f || e.type.toLowerCase().includes(f) || this.storeMatches(f))
-      .slice()
-      .reverse();
-  });
-
-  /** The selected store's state changes, oldest first, for the session tools. */
-  readonly sessionEntries = computed<NgrxLogEntry[]>(() => {
-    const store = this.store();
-    // Sessions and generated tests are NgRx only: other stores have no past states to read.
-    if (!store || store.redux) return [];
-    return (this.page()?.log ?? []).filter((e) => e.storeId === store.id && e.source !== 'event');
-  });
-
-  /** Reads the State and full Diff of a past entry from the shown page. */
-  protected readonly loadEntry = async (seq: number): Promise<EntryDetailAnswer> => {
-    const pageId = this.page()?.pageId;
-    if (!pageId) return { error: 'No live page to read from.' };
-    return ((await call(this.rpc(), 'request-ngrx-history', {
-      pageId,
-      request: { type: 'entry', seq },
-    })) ?? { error: 'The devtools server is not connected.' }) as EntryDetailAnswer;
-  };
-
-  /** A store's log entries, oldest first. */
-  private logOf(store: LiveStore): NgrxLogEntry[] {
-    if (store.redux) return reduxLog(this.reduxPage(), store.id);
-    return (this.page()?.log ?? []).filter((e) => e.storeId === store.id);
-  }
-
-  readonly hasEvents = computed(() => (this.page()?.log ?? []).some((e) => e.source === 'event'));
-
-  readonly pageEvents = computed<NgrxLogEntry[]>(() => {
-    const f = this.filter().trim().toLowerCase();
-    return (this.page()?.log ?? [])
-      .filter((e) => e.source === 'event' && (!f || e.type.toLowerCase().includes(f)))
-      .slice()
-      .reverse();
-  });
-
-  /** Long logs render only the entries near view in their scroll box. */
-  readonly logWindow = new VirtualWindow({
-    count: computed(() => this.storeLog().length),
-    estimate: 56,
-  });
-  readonly shownLog = computed(() => slice(this.storeLog(), this.logWindow));
-  readonly eventWindow = new VirtualWindow({
-    count: computed(() => this.pageEvents().length),
-    estimate: 36,
-  });
-  readonly shownEvents = computed(() => slice(this.pageEvents(), this.eventWindow));
-  private readonly logList = viewChild<ElementRef<HTMLElement>>('logList');
-  private readonly eventsList = viewChild<ElementRef<HTMLElement>>('eventsList');
-
-  readonly changeEntry = computed<NgrxLogEntry | null>(() => {
-    const seq = this.selectedChangeSeq();
-    if (seq === null) return null;
-    return this.storeLog().find((e) => e.seq === seq) ?? null;
-  });
-
-  readonly eventEntry = computed<NgrxLogEntry | null>(() => {
-    const seq = this.selectedEventSeq();
-    if (seq === null) return null;
-    return this.pageEvents().find((e) => e.seq === seq) ?? null;
-  });
-
-  readonly dispatchType = signal('');
-  readonly dispatchPayload = signal('');
-
-  readonly actionTypes = computed(() => {
-    const types = new Set<string>();
-    for (const entry of this.sourceEntries()) for (const type of entry.types ?? []) types.add(type);
-    for (const entry of this.page()?.log ?? []) {
-      if (entry.source === 'store' && entry.action !== undefined) types.add(entry.type);
-    }
-    return [...types].sort().slice(0, 200);
-  });
 
-  readonly payloadError = computed(() => parsePayload(this.dispatchPayload()).error ?? '');
-
-  readonly dispatchRequest = computed(() => {
-    const type = this.dispatchType().trim();
-    const { payload, error } = parsePayload(this.dispatchPayload());
-    if (!type || error) return null;
-    return { type: 'dispatch' as const, action: type, ...(payload ? { payload } : {}) };
-  });
-
-  readonly usesSignals = computed(() =>
-    this.sourceEntries().some((e) => e.kind === 'signal-store' || e.kind === 'signal-state'),
-  );
-  readonly usesClassic = computed(() =>
-    this.sourceEntries().some((e) => CLASSIC_KINDS.has(e.kind)),
-  );
-
-  readonly filteredEntries = computed(() => {
-    const f = this.filter().trim().toLowerCase();
-    const kind = this.kind();
-    return this.sourceEntries().filter(
-      (e) =>
-        (!kind || e.kind === kind) &&
-        (!f ||
-          e.name.toLowerCase().includes(f) ||
-          e.kind.includes(f) ||
-          (e.detail ?? '').toLowerCase().includes(f)),
-    );
-  });
-
-  readonly groupedEntries = computed(() => {
-    const groups = new Map<string, number>();
-    for (const e of this.sourceEntries()) groups.set(e.kind, (groups.get(e.kind) ?? 0) + 1);
-    return [...groups.entries()].map(([kind, count]) => ({ kind, count }));
-  });
+  readonly canRestore = this.state.canRestore;
+  readonly filter = this.state.filter;
+  readonly kind = this.state.kind;
+  readonly sourceEntries = this.state.sourceEntries;
+  readonly sourceLoaded = this.state.sourceLoaded;
+  readonly pages = this.state.pages;
+  readonly reduxPages = this.state.reduxPages;
+  readonly allPages = this.state.allPages;
+  readonly failed = this.state.failed;
+  readonly stateLoaded = this.state.stateLoaded;
+  readonly selectedPageId = this.state.selectedPageId;
+  readonly angularPage = this.state.angularPage;
+  readonly maxLog = this.state.maxLog;
+  readonly selectedStoreId = this.state.selectedStoreId;
+  readonly message = this.state.message;
+  readonly page = this.state.page;
+  readonly pageConnected = this.state.pageConnected;
+  readonly reduxPage = this.state.reduxPage;
+  readonly selectedChangeSeq = this.state.selectedChangeSeq;
+  readonly selectedEventSeq = this.state.selectedEventSeq;
+  readonly confirmSeq = this.state.confirmSeq;
+  readonly pageOptions = this.state.pageOptions;
+  readonly liveStores = this.state.liveStores;
+  readonly filteredStores = this.state.filteredStores;
+  readonly store = this.state.store;
+  readonly stateText = this.state.stateText;
+  readonly stateValue = this.state.stateValue;
+  readonly changedPaths = this.state.changedPaths;
+  readonly storeStats = this.state.storeStats;
+  readonly hasLoop = this.state.hasLoop;
+  readonly computedEntries = this.state.computedEntries;
+  readonly logFeed = this.state.logFeed;
+  readonly storeLog = this.state.storeLog;
+  readonly sessionEntries = this.state.sessionEntries;
+  readonly hasEvents = this.state.hasEvents;
+  readonly pageEvents = this.state.pageEvents;
+  readonly changeEntry = this.state.changeEntry;
+  readonly eventEntry = this.state.eventEntry;
+  readonly actionTypes = this.state.actionTypes;
+  readonly usesSignals = this.state.usesSignals;
+  readonly usesClassic = this.state.usesClassic;
+  readonly filteredEntries = this.state.filteredEntries;
+  readonly groupedEntries = this.state.groupedEntries;
+
+  readonly busy = this.actions.busy;
+  readonly confirmReset = this.actions.confirmReset;
+  readonly dispatchType = this.actions.dispatchType;
+  readonly dispatchPayload = this.actions.dispatchPayload;
+  readonly payloadError = this.actions.payloadError;
+  readonly dispatchRequest = this.actions.dispatchRequest;
 
   constructor() {
+    this.state.connect(this.rpc);
+    this.state.focusFilter = () => this.filterInput()?.focus();
     rememberSelection('store', this.selectedStoreId);
-    // Newest first, so following the newest change keeps the log scrolled to the top.
-    followNewest(this.logFeed, () => {
-      const list = this.logList()?.nativeElement;
-      if (list) list.scrollTop = 0;
-    });
-    effect(() => {
-      const log = this.logList()?.nativeElement;
-      if (log) this.logWindow.attach(log);
-    });
-    effect(() => {
-      const events = this.eventsList()?.nativeElement;
-      if (events) this.eventWindow.attach(events);
-    });
     effect(() => {
       const client = this.rpc();
-      if (client) void this.load(client);
-    });
-    afterRenderEffect(() => {
-      const button = this.latestButton();
-      if (!button || !this.focusLatest() || this.busy()) return;
-      this.focusLatest.set(false);
-      button.nativeElement.focus();
-    });
-    effect(() => {
-      const target = this.focusConfirm();
-      const button = target === 'cancel' ? this.cancelButton() : this.restoreButton();
-      if (!target || !button) return;
-      this.focusConfirm.set(null);
-      button.nativeElement.focus();
-    });
-    afterRenderEffect(() => {
-      const target = this.focusReset();
-      const button = target === 'cancel' ? this.resetCancel() : this.resetButton();
-      if (!target || !button) return;
-      this.focusReset.set(null);
-      button.nativeElement.focus();
-    });
-    afterRenderEffect(() => {
-      const seq = this.focusEventSeq();
-      const detail = this.eventDetailHeading();
-      if (seq === null || !detail) return;
-      this.focusEventSeq.set(null);
-      detail.nativeElement.focus();
-    });
-    this.destroyRef.onDestroy(() => {
-      this.unsubscribe?.();
-      this.unsubscribeOthers?.();
+      if (client) void this.state.load(client);
     });
   }
 
-  private storeMatches(f: string): boolean {
-    const store = this.store();
-    return !!store && store.label.toLowerCase().includes(f);
-  }
-
-  async load(client: DevframeRpcClient) {
-    this.failed.set(false);
-    call(client, 'get-ngrx-store')
-      .then((entries) => this.sourceEntries.set(Array.isArray(entries) ? entries : []))
-      .catch(() => this.sourceEntries.set([]))
-      .finally(() => this.sourceLoaded.set(true));
-    try {
-      const state = await client.scope('pangular').rpc.sharedState('ngrx-store');
-      if (this.destroyRef.destroyed) return;
-      const apply = (value: unknown) => {
-        const next = value as Partial<NgrxState> | undefined;
-        this.pages.set(Array.isArray(next?.pages) ? next.pages : []);
-        // A state the client hasn't loaded from the server yet says nothing.
-        if (value !== undefined) this.stateLoaded.set(true);
-      };
-      apply(state.value());
-      this.unsubscribe?.();
-      this.unsubscribe = state.on('updated', apply);
-    } catch {
-      this.failed.set(true);
-    }
-    // Other stores are an addition: a server without them leaves the NgRx view as it is.
-    try {
-      const others = await client.scope('pangular').rpc.sharedState('redux-stores');
-      if (this.destroyRef.destroyed) return;
-      const applyOthers = (value: unknown) => this.reduxPages.set(reduxPagesOf(value));
-      applyOthers(others.value());
-      this.unsubscribeOthers?.();
-      this.unsubscribeOthers = others.on('updated', applyOthers);
-    } catch {
-      this.reduxPages.set([]);
-    }
+  load(client: DevframeRpcClient) {
+    return this.state.load(client);
   }
 
   retry() {
-    const client = this.rpc();
-    if (client) void this.load(client);
+    this.state.retry();
   }
 
   selectPage(pageId: string | null) {
-    this.selectedPageId.set(pageId);
-    this.selectedStoreId.set(null);
-    this.selectedChangeSeq.set(null);
-    this.selectedEventSeq.set(null);
-    this.confirmSeq.set(null);
-    this.message.set('');
+    this.state.selectPage(pageId);
   }
 
   selectStore(id: string) {
-    this.selectedStoreId.set(id);
-    this.selectedChangeSeq.set(null);
-    this.confirmSeq.set(null);
-    this.message.set('');
+    this.state.selectStore(id);
   }
 
   selectChange(seq: number) {
-    this.selectedChangeSeq.set(this.selectedChangeSeq() === seq ? null : seq);
-    this.confirmSeq.set(null);
-    this.message.set('');
+    this.state.selectChange(seq);
+  }
+
+  selectEvent(seq: number) {
+    this.actions.selectEvent(seq);
   }
 
   copyState() {
-    return this.copyText(this.stateText());
+    return this.state.copyState();
   }
 
   copyPath(path: string) {
-    return this.copyText(path, `Copied the path ${path}.`);
+    return this.state.copyPath(path);
   }
 
   copyDiff(entry: NgrxLogEntry) {
-    return this.copyText(pretty(entry.diff));
-  }
-
-  private async copyText(text: string, done = 'Copied.') {
-    try {
-      await navigator.clipboard.writeText(text);
-      this.message.set(done);
-    } catch {
-      this.message.set('The clipboard is not available here.');
-    }
+    return this.state.copyDiff(entry);
   }
 
   askRestore(seq: number) {
-    this.confirmSeq.set(seq);
-    this.focusConfirm.set('cancel');
+    this.actions.askRestore(seq);
   }
 
   cancelRestore(event?: Event) {
-    event?.preventDefault();
-    this.confirmSeq.set(null);
-    this.focusConfirm.set('restore');
+    this.actions.cancelRestore(event);
   }
 
-  async restore(seq: number, pauses: boolean) {
-    const page = this.page();
-    if (!page) return;
-    this.busy.set(true);
-    this.focusLatest.set(false);
-    let paused = false;
-    try {
-      const result = (await call(this.rpc(), 'request-ngrx-action', {
-        pageId: page.pageId,
-        request: { type: 'restore', seq },
-      })) as { ok?: boolean; message?: string; error?: string; paused?: boolean } | null;
-      this.message.set(result?.error ?? result?.message ?? 'Restored.');
-      paused = pauses && !result?.error && !!result?.paused;
-    } catch {
-      this.message.set('Could not reach the page to restore the state.');
-    } finally {
-      this.busy.set(false);
-      this.confirmSeq.set(null);
-      this.focusLatest.set(paused);
-      if (!paused) this.stateTree()?.focus();
-    }
+  restore(seq: number, pauses: boolean) {
+    return this.actions.restore(seq, pauses);
   }
 
-  selectEvent(seq: number) {
-    const newSeq = this.selectedEventSeq() === seq ? null : seq;
-    this.selectedEventSeq.set(newSeq);
-    if (newSeq !== null) this.focusEventSeq.set(newSeq);
-  }
-
-  async backToLatest() {
-    const page = this.page();
-    if (!page) return;
-    this.busy.set(true);
-    try {
-      const result = (await call(this.rpc(), 'request-ngrx-action', {
-        pageId: page.pageId,
-        request: { type: 'latest' },
-      })) as { ok?: boolean; message?: string; error?: string } | null;
-      this.focusLatest.set(false);
-      this.stateTree()?.focus();
-      this.message.set(result?.error ?? result?.message ?? 'Back on the latest state.');
-    } catch {
-      this.message.set('Could not reach the page to go back to the latest state.');
-    } finally {
-      this.busy.set(false);
-    }
+  backToLatest() {
+    return this.actions.backToLatest();
   }
 
   isSkipped(seq: number): boolean {
-    return this.skippedSeqs().has(seq);
+    return this.state.isSkipped(seq);
   }
 
-  /** An @ngrx/store action Store DevTools still holds, or one it skips, can be skipped or included. */
   canToggle(entry: NgrxLogEntry): boolean {
-    return (
-      entry.source === 'store' &&
-      entry.action !== undefined &&
-      !!this.page()?.classic?.devtools &&
-      (entry.restorable || this.isSkipped(entry.seq))
-    );
+    return this.state.canToggle(entry);
   }
 
-  traceFrames(trace: string[]) {
-    return trace.map(traceFrame);
+  canAgain(entry: NgrxLogEntry): boolean {
+    return this.state.canAgain(entry);
   }
 
   askReset() {
-    this.confirmReset.set(true);
-    this.focusReset.set('cancel');
+    this.actions.askReset();
   }
 
   cancelReset(event?: Event) {
-    event?.preventDefault();
-    this.confirmReset.set(false);
-    this.focusReset.set('reset');
+    this.actions.cancelReset(event);
   }
 
-  /** Runs a Store DevTools history operation on the shown page. */
-  async devtoolsOp(request: { op: string; seq?: number; index?: number; paused?: boolean }) {
-    const page = this.page();
-    if (!page || this.busy()) return;
-    const resetting = request.op === 'reset';
-    this.busy.set(true);
-    try {
-      const result = (await call(this.rpc(), 'request-ngrx-action', {
-        pageId: page.pageId,
-        request: { type: 'devtools', ...request },
-      })) as { ok?: boolean; message?: string; error?: string } | null;
-      this.message.set(result?.error ?? result?.message ?? 'Done.');
-    } catch {
-      this.message.set('Could not reach the page to change the Store DevTools history.');
-    } finally {
-      this.busy.set(false);
-      if (resetting) {
-        this.confirmReset.set(false);
-        this.focusReset.set('reset');
-      }
-    }
-  }
-
-  canAgain(entry: NgrxLogEntry): boolean {
-    return entry.source === 'store' && entry.action !== undefined;
+  devtoolsOp(request: { op: string; seq?: number; index?: number; paused?: boolean }) {
+    return this.actions.devtoolsOp(request);
   }
 
-  async dispatchAction(event: Event) {
-    event.preventDefault();
-    const request = this.dispatchRequest();
-    if (request) await this.send(request, 'Could not reach the page to dispatch the action.');
+  dispatchAction(event: Event) {
+    return this.actions.dispatchAction(event);
   }
 
   dispatchAgain(seq: number) {
-    return this.send(
-      { type: 'dispatch-again', seq },
-      'Could not reach the page to dispatch the action again.',
-    );
+    return this.actions.dispatchAgain(seq);
   }
 
-  private async send(request: Record<string, unknown>, offline: string) {
-    const page = this.page();
-    if (!page || this.busy()) return;
-    const session = this.logSession();
-    this.busy.set(true);
-    try {
-      const result = (await call(this.rpc(), 'request-ngrx-action', {
-        pageId: page.pageId,
-        request,
-      })) as { ok?: boolean; message?: string; error?: string; entry?: NgrxLogEntry } | null;
-      this.message.set(result?.error ?? result?.message ?? 'Dispatched.');
-      if (result?.entry && this.logSession() === session) {
-        this.selectedStoreId.set('store');
-        this.selectedChangeSeq.set(result.entry.seq);
-      }
-    } catch {
-      this.message.set(offline);
-    } finally {
-      this.busy.set(false);
-    }
-  }
-
-  /** Clears the filters from a no-match state and keeps focus on the filter box. */
   clearFilters() {
-    this.filter.set('');
-    this.kind.set(null);
-    this.filterInput()?.focus();
-  }
-
-  /**
-   * The row's log count. A Redux DevTools store logs what its library sent,
-   * `@@INIT` included, so its entries are actions, not changes.
-   */
-  countText(item: LiveStore): string {
-    const n = this.changeCount(item.id);
-    const noun = item.redux ? (n === 1 ? 'action' : 'actions') : n === 1 ? 'change' : 'changes';
-    return `${n} ${noun}`;
+    this.state.clearFilters();
   }
 
   changeCount(id: string): number {
-    const store = this.liveStores().find((s) => s.id === id);
-    return store ? this.logOf(store).length : 0;
-  }
-
-  entityIds(ids: (string | number)[]): (string | number)[] {
-    return ids.slice(0, 30);
-  }
-
-  entityOverflowTitle(ids: (string | number)[], count: number): string {
-    const overflow = ids.slice(30).join(', ');
-    return count > ids.length ? `${overflow} (first ${ids.length} of ${count} shown)` : overflow;
+    return this.state.changeCount(id);
   }
-
-  kindColor(kind: string) {
-    return KIND_COLORS[kind] ?? 'var(--text-3)';
-  }
-
-  kindLabel(kind: string) {
-    return KIND_LABELS[kind] ?? kind;
-  }
-
-  originText(origin: NgrxActionOrigin) {
-    return ORIGIN_TEXT[origin] ?? origin;
-  }
-
-  readonly changesLabel = changeCountText;
-
-  readonly moreChanges = moreChangesText;
-
-  opLabel(op: string) {
-    return op === 'add' ? 'added' : op === 'remove' ? 'removed' : 'changed';
-  }
-
-  prettyText(value: unknown) {
-    return pretty(value);
-  }
-
-  shortText(value: unknown) {
-    return short(value);
-  }
-
-  readonly formatTime = time;
-
-  formatDuration(ms: number): string {
-    return ms <= 0 ? '<1ms' : `${Math.round(ms)}ms`;
-  }
-
-  methodDuration(method: { lastDurationMs?: number; avgDurationMs?: number }): string {
-    const parts: string[] = [];
-    if (method.avgDurationMs !== undefined)
-      parts.push(`avg ${this.formatDuration(method.avgDurationMs)}`);
-    if (method.lastDurationMs !== undefined)
-      parts.push(`last ${this.formatDuration(method.lastDurationMs)}`);
-    return parts.length ? ` · ${parts.join(' · ')}` : '';
-  }
-}
-
-/** The entries of `list` the window renders, with their index in the whole list. */
-function slice<T>(list: T[], window: VirtualWindow) {
-  const { start, end } = window.range();
-  return list.slice(start, end).map((entry, i) => ({ entry, index: start + i }));
 }
diff --git a/app/src/pages/store/store-actions.ts b/app/src/pages/store/store-actions.ts
new file mode 100644
index 00000000..30db0b06
--- /dev/null
+++ b/app/src/pages/store/store-actions.ts
@@ -0,0 +1,170 @@
+import { Injectable, computed, inject, linkedSignal, signal } from '@angular/core';
+import { rpcCall as call } from '../../rpc';
+import type { NgrxLogEntry } from '../store-types';
+import { parsePayload } from './store-format';
+import { StoreState } from './store-state';
+
+/**
+ * The writes the Store page sends to the live page (restore, back to latest, the Store DevTools
+ * history and dispatch), with the busy flag and the focus moves they ask of the sections.
+ * Provided by the page next to {@link StoreState}.
+ */
+@Injectable()
+export class StoreActions {
+  private readonly state = inject(StoreState);
+
+  readonly busy = signal(false);
+  /** Focus requests the sections carry out once the element they name is rendered. */
+  readonly focusLatest = signal(false);
+  readonly focusConfirm = signal<'cancel' | 'restore' | null>(null);
+  readonly focusReset = signal<'cancel' | 'reset' | null>(null);
+  readonly focusEventSeq = signal<number | null>(null);
+  /** Focuses the state tree of the shown store; the store detail sets it. */
+  focusStateTree: () => void = () => {};
+
+  /** The reset confirm is open; it closes when another store is shown. */
+  readonly confirmReset = linkedSignal<string | undefined, boolean>({
+    source: () => this.state.store()?.id,
+    computation: () => false,
+  });
+
+  readonly dispatchType = signal('');
+  readonly dispatchPayload = signal('');
+
+  readonly payloadError = computed(() => parsePayload(this.dispatchPayload()).error ?? '');
+
+  readonly dispatchRequest = computed(() => {
+    const type = this.dispatchType().trim();
+    const { payload, error } = parsePayload(this.dispatchPayload());
+    if (!type || error) return null;
+    return { type: 'dispatch' as const, action: type, ...(payload ? { payload } : {}) };
+  });
+
+  askRestore(seq: number) {
+    this.state.confirmSeq.set(seq);
+    this.focusConfirm.set('cancel');
+  }
+
+  cancelRestore(event?: Event) {
+    event?.preventDefault();
+    this.state.confirmSeq.set(null);
+    this.focusConfirm.set('restore');
+  }
+
+  async restore(seq: number, pauses: boolean) {
+    const page = this.state.page();
+    if (!page) return;
+    this.busy.set(true);
+    this.focusLatest.set(false);
+    let paused = false;
+    try {
+      const result = (await call(this.state.rpc(), 'request-ngrx-action', {
+        pageId: page.pageId,
+        request: { type: 'restore', seq },
+      })) as { ok?: boolean; message?: string; error?: string; paused?: boolean } | null;
+      this.state.message.set(result?.error ?? result?.message ?? 'Restored.');
+      paused = pauses && !result?.error && !!result?.paused;
+    } catch {
+      this.state.message.set('Could not reach the page to restore the state.');
+    } finally {
+      this.busy.set(false);
+      this.state.confirmSeq.set(null);
+      this.focusLatest.set(paused);
+      if (!paused) this.focusStateTree();
+    }
+  }
+
+  selectEvent(seq: number) {
+    const newSeq = this.state.selectedEventSeq() === seq ? null : seq;
+    this.state.selectedEventSeq.set(newSeq);
+    if (newSeq !== null) this.focusEventSeq.set(newSeq);
+  }
+
+  async backToLatest() {
+    const page = this.state.page();
+    if (!page) return;
+    this.busy.set(true);
+    try {
+      const result = (await call(this.state.rpc(), 'request-ngrx-action', {
+        pageId: page.pageId,
+        request: { type: 'latest' },
+      })) as { ok?: boolean; message?: string; error?: string } | null;
+      this.focusLatest.set(false);
+      this.focusStateTree();
+      this.state.message.set(result?.error ?? result?.message ?? 'Back on the latest state.');
+    } catch {
+      this.state.message.set('Could not reach the page to go back to the latest state.');
+    } finally {
+      this.busy.set(false);
+    }
+  }
+
+  askReset() {
+    this.confirmReset.set(true);
+    this.focusReset.set('cancel');
+  }
+
+  cancelReset(event?: Event) {
+    event?.preventDefault();
+    this.confirmReset.set(false);
+    this.focusReset.set('reset');
+  }
+
+  /** Runs a Store DevTools history operation on the shown page. */
+  async devtoolsOp(request: { op: string; seq?: number; index?: number; paused?: boolean }) {
+    const page = this.state.page();
+    if (!page || this.busy()) return;
+    const resetting = request.op === 'reset';
+    this.busy.set(true);
+    try {
+      const result = (await call(this.state.rpc(), 'request-ngrx-action', {
+        pageId: page.pageId,
+        request: { type: 'devtools', ...request },
+      })) as { ok?: boolean; message?: string; error?: string } | null;
+      this.state.message.set(result?.error ?? result?.message ?? 'Done.');
+    } catch {
+      this.state.message.set('Could not reach the page to change the Store DevTools history.');
+    } finally {
+      this.busy.set(false);
+      if (resetting) {
+        this.confirmReset.set(false);
+        this.focusReset.set('reset');
+      }
+    }
+  }
+
+  async dispatchAction(event: Event) {
+    event.preventDefault();
+    const request = this.dispatchRequest();
+    if (request) await this.send(request, 'Could not reach the page to dispatch the action.');
+  }
+
+  dispatchAgain(seq: number) {
+    return this.send(
+      { type: 'dispatch-again', seq },
+      'Could not reach the page to dispatch the action again.',
+    );
+  }
+
+  private async send(request: Record<string, unknown>, offline: string) {
+    const page = this.state.page();
+    if (!page || this.busy()) return;
+    const session = this.state.logSession();
+    this.busy.set(true);
+    try {
+      const result = (await call(this.state.rpc(), 'request-ngrx-action', {
+        pageId: page.pageId,
+        request,
+      })) as { ok?: boolean; message?: string; error?: string; entry?: NgrxLogEntry } | null;
+      this.state.message.set(result?.error ?? result?.message ?? 'Dispatched.');
+      if (result?.entry && this.state.logSession() === session) {
+        this.state.selectedStoreId.set('store');
+        this.state.selectedChangeSeq.set(result.entry.seq);
+      }
+    } catch {
+      this.state.message.set(offline);
+    } finally {
+      this.busy.set(false);
+    }
+  }
+}
diff --git a/app/src/pages/store/store-detail.html b/app/src/pages/store/store-detail.html
new file mode 100644
index 00000000..89d370ba
--- /dev/null
+++ b/app/src/pages/store/store-detail.html
@@ -0,0 +1,194 @@
+@if (store(); as current) {
+  <div class="detail-head">
+    <h3>{{ current.label }}</h3>
+    <div class="chips">
+      <span class="chip">{{ kindLabel(current.kind) }}</span>
+      @if (current.redux; as other) {
+        <span class="chip">{{ other.library }}</span>
+      } @else {
+        <span class="chip">scope: {{ current.scope }}</span>
+      }
+      @if (current.signal?.declaredIn; as file) {
+        <app-source-link class="chip mono" [file]="file" />
+      }
+      @if (current.classic) {
+        <span class="chip">{{
+          current.classic.devtools ? 'Store DevTools on' : 'Store DevTools off'
+        }}</span>
+      }
+      @if (current.signal?.watchOnly) {
+        <span class="chip">withDevtools: watched only</span>
+      }
+    </div>
+    @if (current.signal?.watchOnly) {
+      <p class="hint small">
+        This store uses <code>withDevtools()</code>, so the inspector does not wrap its methods or
+        signals. Changes are logged as <code>patchState</code> entries, and method calls are not
+        counted.
+      </p>
+    }
+    @if (current.signal?.references?.length) {
+      <p class="refs">
+        Referenced by
+        @for (ref of current.signal!.references; track ref; let last = $last) {
+          <code>{{ ref }}</code
+          >{{ last ? '' : ', ' }}
+        }
+      </p>
+    }
+  </div>
+
+  @if (current.classic?.paused) {
+    <div class="paused">
+      <p>
+        <strong>Viewing a past state.</strong> New actions are logged but do not change the state
+        until you go back to the latest state.
+      </p>
+      <button
+        type="button"
+        class="btn primary"
+        [disabled]="busy() || !canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : 'store-latest-off'"
+        (click)="backToLatest()"
+        #latestButton
+      >
+        Back to latest
+      </button>
+      @if (!canRestore()) {
+        <p id="store-latest-off" class="hint small">{{ restoreOff }}</p>
+      }
+    </div>
+  }
+
+  <div class="facts">
+    <section class="fact" aria-labelledby="ngrx-state-heading">
+      <div class="fact-head">
+        <h4 id="ngrx-state-heading">State</h4>
+        <div class="state-actions">
+          @if (!current.redux) {
+            <app-store-global
+              [rpc]="rpc()"
+              [pageId]="page()?.pageId"
+              [target]="{ kind: 'ngrx', storeId: current.id }"
+              [label]="current.label + ' state'"
+            />
+          }
+          <button type="button" class="btn copy" aria-label="Copy state" (click)="copyState()">
+            Copy
+          </button>
+        </div>
+      </div>
+      <app-state-tree
+        [value]="stateValue()"
+        [changed]="changedPaths()"
+        [label]="current.label + ' state'"
+        (copied)="copyPath($event)"
+      />
+    </section>
+    @if (current.signal; as info) {
+      <section class="fact" aria-labelledby="ngrx-computed-heading">
+        <h4 id="ngrx-computed-heading">Computed</h4>
+        @if (computedEntries().length) {
+          <dl class="kv">
+            @for (entry of computedEntries(); track entry.key) {
+              <dt>{{ entry.key }}</dt>
+              <dd>
+                <code [title]="entry.full">{{ entry.value }}</code>
+              </dd>
+            }
+          </dl>
+        } @else {
+          <p class="muted">No computed signals.</p>
+        }
+        <h4 id="ngrx-methods-heading" class="spaced">Methods</h4>
+        @if (info.methods.length) {
+          <ul class="methods" aria-labelledby="ngrx-methods-heading">
+            @for (method of info.methods; track method.name) {
+              <li class="chip mono">
+                {{ method.name }}
+                @if (method.signalMethod) {
+                  <span class="tag">signalMethod</span>
+                } @else if (method.rx) {
+                  <span class="tag">rxMethod</span>
+                }
+                <span class="calls"
+                  >{{ method.calls }} {{ method.calls === 1 ? 'call' : 'calls'
+                  }}{{ methodDuration(method) }}</span
+                >
+              </li>
+            }
+          </ul>
+        } @else {
+          <p class="muted">No methods.</p>
+        }
+      </section>
+      @if (info.entities?.length) {
+        <section class="fact" aria-labelledby="ngrx-entities-heading">
+          <h4 id="ngrx-entities-heading">Entities</h4>
+          <div class="entities">
+            @for (col of info.entities!; track col.idsKey) {
+              <div class="entity-group">
+                <div class="entity-head">
+                  <span class="chip mono">{{ col.collection ?? 'entities' }}</span>
+                  <span class="entity-count"
+                    >{{ col.count }} {{ col.count === 1 ? 'entity' : 'entities' }}</span
+                  >
+                </div>
+                <ul
+                  class="chips entity-ids"
+                  [attr.aria-label]="(col.collection ?? 'entities') + ' ids'"
+                >
+                  @for (id of entityIds(col.ids); track id) {
+                    <li class="chip mono">{{ id }}</li>
+                  }
+                  @if (col.count > 30) {
+                    <li class="chip more" [title]="entityOverflowTitle(col.ids, col.count)">
+                      +{{ col.count - 30 }} more
+                    </li>
+                  }
+                </ul>
+                @if (col.selectedId !== undefined) {
+                  <dl class="kv">
+                    <dt>Selected</dt>
+                    <dd>
+                      @if (col.selected !== undefined) {
+                        <code [title]="prettyText(col.selected)">{{
+                          shortText(col.selected)
+                        }}</code>
+                      } @else {
+                        <span class="muted">None selected</span>
+                      }
+                    </dd>
+                  </dl>
+                }
+              </div>
+            }
+          </div>
+        </section>
+      }
+    }
+  </div>
+
+  @if (current.classic?.devtools) {
+    <section appStoreHistory class="history" aria-labelledby="ngrx-devtools-heading"></section>
+  }
+
+  <section appStoreLog class="log" aria-labelledby="ngrx-log-heading"></section>
+
+  @if (storeStats().length) {
+    <div appStoreStats class="stats"></div>
+  }
+
+  @if (!current.redux) {
+    <app-store-session
+      [rpc]="rpc()"
+      [pageId]="page()?.pageId ?? null"
+      [storeId]="current.id"
+      [entries]="sessionEntries()"
+    />
+  }
+
+  @if (current.classic) {
+    <section appStoreDispatch class="dispatch" aria-labelledby="ngrx-dispatch-heading"></section>
+  }
+}
diff --git a/app/src/pages/store/store-detail.scss b/app/src/pages/store/store-detail.scss
new file mode 100644
index 00000000..225eebdb
--- /dev/null
+++ b/app/src/pages/store/store-detail.scss
@@ -0,0 +1,16 @@
+@use 'store';
+
+@include store.base;
+@include store.lists;
+@include store.detail;
+@include store.code;
+@include store.methods;
+@include store.log;
+@include store.dispatch;
+@include store.history-stats;
+@include store.paused;
+@media (max-width: 480px) {
+  .kv {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/app/src/pages/store/store-detail.ts b/app/src/pages/store/store-detail.ts
new file mode 100644
index 00000000..cf82d6ae
--- /dev/null
+++ b/app/src/pages/store/store-detail.ts
@@ -0,0 +1,92 @@
+import { Component, ElementRef, afterRenderEffect, inject, viewChild } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { StoreGlobal } from '../../ui/store-global';
+import { StoreSession } from '../store-session';
+import { StoreStateTree } from '../store-state-tree';
+import { pretty, short } from '../store-types';
+import { StoreActions } from './store-actions';
+import { StoreDispatch } from './store-dispatch';
+import { kindLabel, methodDuration } from './store-format';
+import { StoreHistory } from './store-history';
+import { StoreLog } from './store-log';
+import { StoreState } from './store-state';
+import { StoreStats } from './store-stats';
+
+/**
+ * The shown store of the Store page: its head, the paused note, State, Computed, Methods and
+ * Entities, then the history, log, stats, session and dispatch sections.
+ */
+@Component({
+  selector: 'div[appStoreDetail]',
+  imports: [
+    SourceLink,
+    StoreDispatch,
+    StoreGlobal,
+    StoreHistory,
+    StoreLog,
+    StoreSession,
+    StoreStateTree,
+    StoreStats,
+  ],
+  templateUrl: './store-detail.html',
+  styleUrl: './store-detail.scss',
+})
+export class StoreDetail {
+  private readonly state = inject(StoreState);
+  private readonly actions = inject(StoreActions);
+  private readonly latestButton = viewChild<ElementRef<HTMLButtonElement>>('latestButton');
+  private readonly stateTree = viewChild(StoreStateTree);
+
+  protected readonly rpc = this.state.rpc;
+  protected readonly page = this.state.page;
+  protected readonly store = this.state.store;
+  protected readonly canRestore = this.state.canRestore;
+  protected readonly restoreOff = this.state.restoreOff;
+  protected readonly stateValue = this.state.stateValue;
+  protected readonly changedPaths = this.state.changedPaths;
+  protected readonly computedEntries = this.state.computedEntries;
+  protected readonly storeStats = this.state.storeStats;
+  protected readonly sessionEntries = this.state.sessionEntries;
+  protected readonly busy = this.actions.busy;
+  protected readonly kindLabel = kindLabel;
+  protected readonly methodDuration = methodDuration;
+
+  constructor() {
+    this.actions.focusStateTree = () => this.stateTree()?.focus();
+    afterRenderEffect(() => {
+      const button = this.latestButton();
+      if (!button || !this.actions.focusLatest() || this.busy()) return;
+      this.actions.focusLatest.set(false);
+      button.nativeElement.focus();
+    });
+  }
+
+  protected backToLatest() {
+    return this.actions.backToLatest();
+  }
+
+  protected copyState() {
+    return this.state.copyState();
+  }
+
+  protected copyPath(path: string) {
+    return this.state.copyPath(path);
+  }
+
+  protected entityIds(ids: (string | number)[]): (string | number)[] {
+    return ids.slice(0, 30);
+  }
+
+  protected entityOverflowTitle(ids: (string | number)[], count: number): string {
+    const overflow = ids.slice(30).join(', ');
+    return count > ids.length ? `${overflow} (first ${ids.length} of ${count} shown)` : overflow;
+  }
+
+  protected prettyText(value: unknown) {
+    return pretty(value);
+  }
+
+  protected shortText(value: unknown) {
+    return short(value);
+  }
+}
diff --git a/app/src/pages/store/store-dispatch.html b/app/src/pages/store/store-dispatch.html
new file mode 100644
index 00000000..de8f15b9
--- /dev/null
+++ b/app/src/pages/store/store-dispatch.html
@@ -0,0 +1,46 @@
+<h4 id="ngrx-dispatch-heading">Dispatch an action</h4>
+<form class="dispatch-form" (submit)="dispatchAction($event)">
+  <label>
+    <span>Type</span>
+    <input
+      required
+      spellcheck="false"
+      autocomplete="off"
+      list="ngrx-action-types"
+      placeholder="e.g. [Cart] Add Item"
+      [value]="dispatchType()"
+      (input)="dispatchType.set($any($event.target).value)"
+    />
+  </label>
+  <datalist id="ngrx-action-types">
+    @for (type of actionTypes(); track type) {
+      <option [value]="type"></option>
+    }
+  </datalist>
+  <label>
+    <span>Payload <span class="optional">(JSON object, optional)</span></span>
+    <textarea
+      rows="3"
+      spellcheck="false"
+      placeholder='e.g. {"id": 7}'
+      [value]="dispatchPayload()"
+      (input)="dispatchPayload.set($any($event.target).value)"
+      [attr.aria-invalid]="payloadError() ? 'true' : null"
+      aria-describedby="ngrx-payload-error"
+    ></textarea>
+  </label>
+  <p id="ngrx-payload-error" class="field-error">{{ payloadError() }}</p>
+  <div class="actions">
+    <button
+      type="submit"
+      class="btn primary"
+      [disabled]="busy() || !canRestore() || !dispatchRequest()"
+      [attr.aria-describedby]="canRestore() ? null : 'store-dispatch-off'"
+    >
+      Dispatch
+    </button>
+  </div>
+  @if (!canRestore()) {
+    <p id="store-dispatch-off" class="hint small">{{ restoreOff }}</p>
+  }
+</form>
diff --git a/app/src/pages/store/store-dispatch.scss b/app/src/pages/store/store-dispatch.scss
new file mode 100644
index 00000000..eb651488
--- /dev/null
+++ b/app/src/pages/store/store-dispatch.scss
@@ -0,0 +1,6 @@
+@use 'store';
+
+@include store.field;
+@include store.base;
+@include store.actions;
+@include store.dispatch;
diff --git a/app/src/pages/store/store-dispatch.ts b/app/src/pages/store/store-dispatch.ts
new file mode 100644
index 00000000..5d0329ce
--- /dev/null
+++ b/app/src/pages/store/store-dispatch.ts
@@ -0,0 +1,27 @@
+import { Component, inject } from '@angular/core';
+import { StoreActions } from './store-actions';
+import { StoreState } from './store-state';
+
+/** The Dispatch an action form of the shown `@ngrx/store` Store. */
+@Component({
+  selector: 'section[appStoreDispatch]',
+  templateUrl: './store-dispatch.html',
+  styleUrl: './store-dispatch.scss',
+})
+export class StoreDispatch {
+  private readonly state = inject(StoreState);
+  private readonly actions = inject(StoreActions);
+
+  protected readonly canRestore = this.state.canRestore;
+  protected readonly restoreOff = this.state.restoreOff;
+  protected readonly actionTypes = this.state.actionTypes;
+  protected readonly busy = this.actions.busy;
+  protected readonly dispatchType = this.actions.dispatchType;
+  protected readonly dispatchPayload = this.actions.dispatchPayload;
+  protected readonly payloadError = this.actions.payloadError;
+  protected readonly dispatchRequest = this.actions.dispatchRequest;
+
+  protected dispatchAction(event: Event) {
+    return this.actions.dispatchAction(event);
+  }
+}
diff --git a/app/src/pages/store/store-entry.html b/app/src/pages/store/store-entry.html
new file mode 100644
index 00000000..cb1146a1
--- /dev/null
+++ b/app/src/pages/store/store-entry.html
@@ -0,0 +1,254 @@
+@let selected = entry();
+@let headingLevel = level();
+@let idPrefix = prefix();
+<div
+  class="entry-heading"
+  role="heading"
+  [attr.aria-level]="headingLevel"
+  [id]="idPrefix + '-entry-heading'"
+>
+  #{{ selected.seq }} {{ selected.type }}
+</div>
+<dl class="kv">
+  <dt>Time</dt>
+  <dd>{{ formatTime(selected.timestamp) }}</dd>
+  @if (selected.origin) {
+    <dt>Origin</dt>
+    <dd>{{ originText(selected.origin) }}</dd>
+  }
+  @if (selected.durationMs !== undefined) {
+    <dt>Duration</dt>
+    <dd>{{ formatDuration(selected.durationMs) }}</dd>
+  }
+  @if (selected.trace?.length) {
+    <dt>Called from</dt>
+    <dd>
+      <ol class="trace">
+        @for (frame of traceFrames(selected.trace); track $index) {
+          <li>
+            @if (frame.file) {
+              <app-source-link [file]="frame.file" [line]="frame.line"
+                >{{ frame.name ? frame.name + ' ' : '' }}({{ frame.file }}:{{
+                  frame.line
+                }})</app-source-link
+              >
+            } @else {
+              <code>{{ frame.name }}</code>
+            }
+          </li>
+        }
+      </ol>
+    </dd>
+  }
+  @if (selected.source === 'event') {
+    <ng-container [ngTemplateOutlet]="actionRowsTpl" [ngTemplateOutletContext]="{ selected }" />
+  }
+</dl>
+<ng-template #actionRowsTpl let-selected="selected">
+  @if (selected.action !== undefined) {
+    <dt>Action</dt>
+    <dd>
+      <pre class="code">{{ prettyText(selected.action) }}</pre>
+    </dd>
+  }
+  @if (selected.args?.length) {
+    <dt>Arguments</dt>
+    <dd>
+      <pre class="code">{{ prettyText(selected.args) }}</pre>
+    </dd>
+  }
+  @if (selected.source === 'event' && selected.payload !== undefined) {
+    <dt>Payload</dt>
+    <dd>
+      <pre class="code">{{ prettyText(selected.payload) }}</pre>
+    </dd>
+  }
+  @if (selected.causedByEvent; as caused) {
+    <dt>Caused by event</dt>
+    <dd>
+      <code class="mono">{{ caused.type }}</code>
+      @if (caused.payload !== undefined) {
+        <pre class="code">{{ prettyText(caused.payload) }}</pre>
+      }
+    </dd>
+  }
+</ng-template>
+<ng-template #diffTpl let-selected="selected">
+  <div class="sub-head">
+    <div class="sub" role="heading" [attr.aria-level]="headingLevel + 1">State diff</div>
+    @if (selected.diff.length) {
+      <button
+        type="button"
+        class="btn copy"
+        [attr.aria-label]="'Copy the state diff of #' + selected.seq"
+        (click)="copyDiff(selected)"
+      >
+        Copy
+      </button>
+    }
+  </div>
+  @if (selected.diff.length) {
+    <ul class="diff">
+      @for (change of selected.diff; track change.path) {
+        <li [class]="'diff-row ' + change.op">
+          <span class="op">{{ opLabel(change.op) }}</span>
+          <code class="path">{{ change.path }}</code>
+          <span class="values">
+            @if (change.op !== 'add') {
+              <code class="before">{{ shortText(change.before) }}</code>
+            }
+            @if (change.op === 'change') {
+              <span class="arrow" aria-hidden="true">→</span
+              ><span class="visually-hidden">became</span>
+            }
+            @if (change.op !== 'remove') {
+              <code class="after">{{ shortText(change.after) }}</code>
+            }
+          </span>
+        </li>
+      }
+    </ul>
+    @if (selected.diffTruncated) {
+      <p class="muted">{{ moreChanges(selected.diffTruncated) }}</p>
+    }
+  } @else {
+    <p class="muted">The state did not change.</p>
+  }
+</ng-template>
+@if (selected.source === 'redux') {
+  @if (selected.action !== undefined) {
+    <dl class="kv redux-action">
+      <ng-container [ngTemplateOutlet]="actionRowsTpl" [ngTemplateOutletContext]="{ selected }" />
+    </dl>
+  }
+  <ng-container [ngTemplateOutlet]="diffTpl" [ngTemplateOutletContext]="{ selected }" />
+} @else if (selected.source !== 'event') {
+  <app-entry-tabs
+    [idPrefix]="idPrefix + '-' + selected.seq"
+    [seq]="selected.seq"
+    [diffTruncated]="selected.diffTruncated"
+    [loader]="loadEntry"
+  >
+    <div tab-action>
+      @if (selected.action !== undefined || selected.args?.length || selected.causedByEvent) {
+        <dl class="kv">
+          <ng-container
+            [ngTemplateOutlet]="actionRowsTpl"
+            [ngTemplateOutletContext]="{ selected }"
+          />
+        </dl>
+      } @else {
+        <p class="muted">
+          No action or arguments: a restore, or a patchState write outside a method.
+        </p>
+      }
+    </div>
+    <div tab-diff>
+      <ng-container [ngTemplateOutlet]="diffTpl" [ngTemplateOutletContext]="{ selected }" />
+    </div>
+  </app-entry-tabs>
+}
+
+@if (selected.restorable && confirmSeq() === selected.seq) {
+  <div
+    class="confirm"
+    role="group"
+    [attr.aria-labelledby]="idPrefix + '-confirm-text'"
+    (keydown.escape)="cancelRestore($event)"
+  >
+    <p [id]="idPrefix + '-confirm-text'">
+      @if (selected.source === 'store') {
+        Store DevTools jumps the app state to the state right after action #{{ selected.seq }}.
+        Until you go back to the latest state, new actions are logged but do not change the state.
+      } @else {
+        @if (store(); as current) {
+          This sets every state key of {{ current.label }} back to its value right after change #{{
+            selected.seq
+          }}. Components that read the store update at once, and a new "Restore" entry is added to
+          the log.
+        } @else {
+          This sets every state key of the store back to its value right after change #{{
+            selected.seq
+          }}. Components that read the store update at once, and a new "Restore" entry is added to
+          the log.
+        }
+      }
+    </p>
+    <div class="actions">
+      <button
+        type="button"
+        class="btn primary"
+        [disabled]="busy()"
+        (click)="restore(selected.seq, selected.source === 'store')"
+      >
+        Restore
+      </button>
+      <button type="button" class="btn" (click)="cancelRestore()" #cancelButton>Cancel</button>
+    </div>
+  </div>
+}
+@if (
+  confirmSeq() !== selected.seq &&
+  (selected.restorable || canAgain(selected) || canToggle(selected))
+) {
+  <div class="entry-actions">
+    @if (canToggle(selected)) {
+      <button
+        type="button"
+        class="btn"
+        [disabled]="busy() || !canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : idPrefix + '-writes-off'"
+        (click)="devtoolsOp({ op: 'toggle', seq: selected.seq })"
+      >
+        {{ isSkipped(selected.seq) ? 'Include this action' : 'Skip this action' }}
+      </button>
+    }
+    @if (selected.restorable) {
+      <button
+        type="button"
+        class="btn restore"
+        [disabled]="!canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : idPrefix + '-writes-off'"
+        (click)="askRestore(selected.seq)"
+        #restoreButton
+      >
+        Restore this state
+      </button>
+    }
+    @if (canAgain(selected)) {
+      <button
+        type="button"
+        class="btn"
+        [disabled]="busy() || !canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : idPrefix + '-writes-off'"
+        (click)="dispatchAgain(selected.seq)"
+      >
+        Dispatch again
+      </button>
+    }
+  </div>
+  @if (!canRestore()) {
+    <p [id]="idPrefix + '-writes-off'" class="hint small">{{ restoreOff }}</p>
+  }
+}
+@if (selected.source === 'redux') {
+  <p class="hint small">
+    This store reports through its Redux DevTools integration, which the panel reads but does not
+    write to, so its state cannot be restored from here.
+  </p>
+}
+@if (!selected.restorable && selected.source === 'store') {
+  <p class="hint small">
+    @if (selected.unrestorable === 'dropped') {
+      Store DevTools no longer holds this action, so this state cannot be restored. It was dropped
+      past <code>maxAge</code>, or the Store DevTools history was committed, reset or imported.
+    } @else if (selected.unrestorable === 'not-recorded') {
+      Store DevTools never recorded this action, so this state cannot be restored. An
+      <code>actionsBlocklist</code>, <code>actionsSafelist</code> or <code>predicate</code> option
+      filtered it out, or recording was paused.
+    } @else {
+      Time travel for &#64;ngrx/store needs <code>provideStoreDevtools()</code>. Without it, entries
+      cannot be restored.
+    }
+  </p>
+}
diff --git a/app/src/pages/store/store-entry.scss b/app/src/pages/store/store-entry.scss
new file mode 100644
index 00000000..61e91461
--- /dev/null
+++ b/app/src/pages/store/store-entry.scss
@@ -0,0 +1,14 @@
+@use 'store';
+
+@include store.base;
+@include store.lists;
+@include store.code;
+@include store.entry($entry: ':host');
+@include store.actions;
+@include store.history-stats;
+@include store.trace;
+@media (max-width: 480px) {
+  .kv {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/app/src/pages/store/store-entry.ts b/app/src/pages/store/store-entry.ts
new file mode 100644
index 00000000..c0afe6bb
--- /dev/null
+++ b/app/src/pages/store/store-entry.ts
@@ -0,0 +1,103 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, ElementRef, effect, inject, input, viewChild } from '@angular/core';
+import { time } from '../../format';
+import { SourceLink } from '../../ui/source-link';
+import { EntryTabs } from '../store-entry-tabs';
+import { moreChangesText, pretty, short, traceFrame, type NgrxLogEntry } from '../store-types';
+import { StoreActions } from './store-actions';
+import { formatDuration, opLabel, originText } from './store-format';
+import { StoreState } from './store-state';
+
+/**
+ * The detail of one log entry, shared by the store's change log and the page-level Events
+ * section (reachable with no live store at all, since a page can dispatch
+ * `@ngrx/signals/events` without any signalStore/signalState instance).
+ */
+@Component({
+  selector: 'section[appStoreEntry]',
+  imports: [EntryTabs, NgTemplateOutlet, SourceLink],
+  host: { '[attr.aria-labelledby]': "prefix() + '-entry-heading'" },
+  templateUrl: './store-entry.html',
+  styleUrl: './store-entry.scss',
+})
+export class StoreEntry {
+  private readonly state = inject(StoreState);
+  private readonly actions = inject(StoreActions);
+  private readonly cancelButton = viewChild<ElementRef<HTMLButtonElement>>('cancelButton');
+  private readonly restoreButton = viewChild<ElementRef<HTMLButtonElement>>('restoreButton');
+
+  /** Read in the template as `selected`, `headingLevel` and `idPrefix`, as before the split. */
+  readonly entry = input.required<NgrxLogEntry>({ alias: 'selected' });
+  readonly level = input.required<number>({ alias: 'headingLevel' });
+  readonly prefix = input.required<string>({ alias: 'idPrefix' });
+
+  protected readonly store = this.state.store;
+  protected readonly confirmSeq = this.state.confirmSeq;
+  protected readonly canRestore = this.state.canRestore;
+  protected readonly restoreOff = this.state.restoreOff;
+  protected readonly loadEntry = this.state.loadEntry;
+  protected readonly busy = this.actions.busy;
+  protected readonly formatTime = time;
+  protected readonly formatDuration = formatDuration;
+  protected readonly originText = originText;
+  protected readonly opLabel = opLabel;
+  protected readonly moreChanges = moreChangesText;
+
+  constructor() {
+    effect(() => {
+      const target = this.actions.focusConfirm();
+      const button = target === 'cancel' ? this.cancelButton() : this.restoreButton();
+      if (!target || !button) return;
+      this.actions.focusConfirm.set(null);
+      button.nativeElement.focus();
+    });
+  }
+
+  protected traceFrames(trace: string[]) {
+    return trace.map(traceFrame);
+  }
+
+  protected prettyText(value: unknown) {
+    return pretty(value);
+  }
+
+  protected shortText(value: unknown) {
+    return short(value);
+  }
+
+  protected copyDiff(entry: NgrxLogEntry) {
+    return this.state.copyDiff(entry);
+  }
+
+  protected isSkipped(seq: number): boolean {
+    return this.state.isSkipped(seq);
+  }
+
+  protected canToggle(entry: NgrxLogEntry): boolean {
+    return this.state.canToggle(entry);
+  }
+
+  protected canAgain(entry: NgrxLogEntry): boolean {
+    return this.state.canAgain(entry);
+  }
+
+  protected askRestore(seq: number) {
+    this.actions.askRestore(seq);
+  }
+
+  protected cancelRestore(event?: Event) {
+    this.actions.cancelRestore(event);
+  }
+
+  protected restore(seq: number, pauses: boolean) {
+    return this.actions.restore(seq, pauses);
+  }
+
+  protected devtoolsOp(request: { op: string; seq?: number; index?: number; paused?: boolean }) {
+    return this.actions.devtoolsOp(request);
+  }
+
+  protected dispatchAgain(seq: number) {
+    return this.actions.dispatchAgain(seq);
+  }
+}
diff --git a/app/src/pages/store/store-events.html b/app/src/pages/store/store-events.html
new file mode 100644
index 00000000..073ac5ff
--- /dev/null
+++ b/app/src/pages/store/store-events.html
@@ -0,0 +1,58 @@
+<div class="section-head">
+  <h2 id="ngrx-events-heading">Events</h2>
+  <span class="pill">{{ pageEvents().length }}</span>
+</div>
+<p class="intro">
+  Events dispatched through &#64;ngrx/signals/events, across every store on this page.
+</p>
+<ul
+  #eventsList
+  class="events-list"
+  appRovingList="button.event-item"
+  aria-label="Dispatched events"
+  [rovingWindow]="eventWindow"
+  [style.padding-top.px]="eventWindow.enabled() ? 6 + eventWindow.padTop() : null"
+  [style.padding-bottom.px]="eventWindow.enabled() ? 6 + eventWindow.padBottom() : null"
+>
+  @for (shown of shownEvents(); track shown.entry.seq) {
+    @let evt = shown.entry;
+    <li
+      [attr.data-vindex]="shown.index"
+      [attr.aria-setsize]="eventWindow.enabled() ? pageEvents().length : null"
+      [attr.aria-posinset]="eventWindow.enabled() ? shown.index + 1 : null"
+    >
+      <button
+        type="button"
+        class="event-item"
+        [class.selected]="evt.seq === selectedEventSeq()"
+        [attr.aria-pressed]="evt.seq === selectedEventSeq()"
+        [attr.aria-controls]="evt.seq === selectedEventSeq() ? 'ngrx-event-detail' : null"
+        (click)="selectEvent(evt.seq)"
+      >
+        <span class="dot" aria-hidden="true" [style.background]="kindColor('event')"></span>
+        <span class="event-type mono" [title]="evt.eventType ?? evt.type">{{
+          evt.eventType ?? evt.type
+        }}</span>
+        @if (evt.payload !== undefined) {
+          <code class="event-payload" [title]="prettyText(evt.payload)">{{
+            shortText(evt.payload)
+          }}</code>
+        }
+        <span class="event-time">{{ formatTime(evt.timestamp) }}</span>
+      </button>
+    </li>
+  } @empty {
+    <li class="muted pad">No events match this filter.</li>
+  }
+</ul>
+@if (eventEntry(); as selected) {
+  <div id="ngrx-event-detail" tabindex="-1" class="event-detail-focus" #eventDetailHeading>
+    <section
+      appStoreEntry
+      class="entry"
+      [selected]="selected"
+      [headingLevel]="3"
+      [idPrefix]="'ngrx-event'"
+    ></section>
+  </div>
+}
diff --git a/app/src/pages/store/store-events.scss b/app/src/pages/store/store-events.scss
new file mode 100644
index 00000000..b6120256
--- /dev/null
+++ b/app/src/pages/store/store-events.scss
@@ -0,0 +1,8 @@
+@use 'store';
+
+@include store.intro;
+@include store.base;
+@include store.lists;
+@include store.events;
+@include store.entry;
+@include store.history-stats;
diff --git a/app/src/pages/store/store-events.ts b/app/src/pages/store/store-events.ts
new file mode 100644
index 00000000..79790e48
--- /dev/null
+++ b/app/src/pages/store/store-events.ts
@@ -0,0 +1,69 @@
+import {
+  Component,
+  ElementRef,
+  afterRenderEffect,
+  computed,
+  effect,
+  inject,
+  viewChild,
+} from '@angular/core';
+import { time } from '../../format';
+import { RovingList } from '../../ui/roving-list';
+import { VirtualWindow } from '../../ui/virtual-window';
+import { pretty, short } from '../store-types';
+import { StoreActions } from './store-actions';
+import { StoreEntry } from './store-entry';
+import { kindColor, slice } from './store-format';
+import { StoreState } from './store-state';
+
+/** The Events section: events dispatched through `@ngrx/signals/events` on the shown page. */
+@Component({
+  selector: 'section[appStoreEvents]',
+  imports: [RovingList, StoreEntry],
+  templateUrl: './store-events.html',
+  styleUrl: './store-events.scss',
+})
+export class StoreEvents {
+  private readonly state = inject(StoreState);
+  private readonly actions = inject(StoreActions);
+  private readonly eventsList = viewChild<ElementRef<HTMLElement>>('eventsList');
+  private readonly eventDetailHeading = viewChild<ElementRef<HTMLElement>>('eventDetailHeading');
+
+  protected readonly pageEvents = this.state.pageEvents;
+  protected readonly selectedEventSeq = this.state.selectedEventSeq;
+  protected readonly eventEntry = this.state.eventEntry;
+  protected readonly kindColor = kindColor;
+  protected readonly formatTime = time;
+
+  protected readonly eventWindow = new VirtualWindow({
+    count: computed(() => this.pageEvents().length),
+    estimate: 36,
+  });
+  protected readonly shownEvents = computed(() => slice(this.pageEvents(), this.eventWindow));
+
+  constructor() {
+    effect(() => {
+      const events = this.eventsList()?.nativeElement;
+      if (events) this.eventWindow.attach(events);
+    });
+    afterRenderEffect(() => {
+      const seq = this.actions.focusEventSeq();
+      const detail = this.eventDetailHeading();
+      if (seq === null || !detail) return;
+      this.actions.focusEventSeq.set(null);
+      detail.nativeElement.focus();
+    });
+  }
+
+  protected selectEvent(seq: number) {
+    this.actions.selectEvent(seq);
+  }
+
+  protected prettyText(value: unknown) {
+    return pretty(value);
+  }
+
+  protected shortText(value: unknown) {
+    return short(value);
+  }
+}
diff --git a/app/src/pages/store/store-format.ts b/app/src/pages/store/store-format.ts
new file mode 100644
index 00000000..903f02e3
--- /dev/null
+++ b/app/src/pages/store/store-format.ts
@@ -0,0 +1,98 @@
+import type { VirtualWindow } from '../../ui/virtual-window';
+import type { NgrxActionOrigin } from '../store-types';
+
+const KIND_COLORS: Record<string, string> = {
+  action: '#f59e0b',
+  reducer: '#a78bfa',
+  effect: '#fb923c',
+  selector: '#60a5fa',
+  feature: '#34d399',
+  'store-setup': '#94a3b8',
+  'signal-store': '#e879f9',
+  'signal-state': '#22d3ee',
+  'signal-method': '#fb7185',
+  store: '#a78bfa',
+  event: 'var(--warn)',
+  redux: '#38bdf8',
+};
+
+const KIND_LABELS: Record<string, string> = {
+  'signal-store': 'signalStore',
+  'signal-state': 'signalState',
+  'signal-method': 'signalMethod',
+  'store-setup': 'store setup',
+  store: '@ngrx/store',
+  event: 'event',
+  redux: 'Redux DevTools',
+};
+
+const ORIGIN_TEXT: Record<NgrxActionOrigin, string> = {
+  dispatch: 'store.dispatch(action)',
+  effect: 'NgRx effect (Store.next)',
+  reactive: 'store.dispatch(() => action)',
+};
+
+export const CLASSIC_KINDS = new Set([
+  'action',
+  'reducer',
+  'effect',
+  'selector',
+  'feature',
+  'store-setup',
+]);
+
+export function parsePayload(text: string): { payload?: Record<string, unknown>; error?: string } {
+  if (!text.trim()) return {};
+  let value: unknown;
+  try {
+    value = JSON.parse(text);
+  } catch {
+    return { error: 'The payload is not valid JSON.' };
+  }
+  if (!value || typeof value !== 'object' || Array.isArray(value)) {
+    return { error: 'The payload must be a JSON object, like {"id": 7}.' };
+  }
+  if (Object.prototype.hasOwnProperty.call(value, 'type')) {
+    return {
+      error: 'The payload cannot have a "type" key. Put the action type in the Type field.',
+    };
+  }
+  return { payload: value as Record<string, unknown> };
+}
+
+export function kindColor(kind: string) {
+  return KIND_COLORS[kind] ?? 'var(--text-3)';
+}
+
+export function kindLabel(kind: string) {
+  return KIND_LABELS[kind] ?? kind;
+}
+
+export function originText(origin: NgrxActionOrigin) {
+  return ORIGIN_TEXT[origin] ?? origin;
+}
+
+export function opLabel(op: string) {
+  return op === 'add' ? 'added' : op === 'remove' ? 'removed' : 'changed';
+}
+
+export function formatDuration(ms: number): string {
+  return ms <= 0 ? '<1ms' : `${Math.round(ms)}ms`;
+}
+
+export function methodDuration(method: {
+  lastDurationMs?: number;
+  avgDurationMs?: number;
+}): string {
+  const parts: string[] = [];
+  if (method.avgDurationMs !== undefined) parts.push(`avg ${formatDuration(method.avgDurationMs)}`);
+  if (method.lastDurationMs !== undefined)
+    parts.push(`last ${formatDuration(method.lastDurationMs)}`);
+  return parts.length ? ` · ${parts.join(' · ')}` : '';
+}
+
+/** The entries of `list` the window renders, with their index in the whole list. */
+export function slice<T>(list: T[], window: VirtualWindow) {
+  const { start, end } = window.range();
+  return list.slice(start, end).map((entry, i) => ({ entry, index: start + i }));
+}
diff --git a/app/src/pages/store/store-history.html b/app/src/pages/store/store-history.html
new file mode 100644
index 00000000..b02b7e4e
--- /dev/null
+++ b/app/src/pages/store/store-history.html
@@ -0,0 +1,81 @@
+@if (store(); as current) {
+  <h4 id="ngrx-devtools-heading">Store DevTools history</h4>
+  <p class="hint small">
+    {{
+      current.classic!.recordingPaused
+        ? 'Recording is paused: new actions change the state but are not recorded.'
+        : 'Recording new actions.'
+    }}
+    @if (current.classic!.skipped?.length; as skippedCount) {
+      {{ skippedCount }} skipped {{ skippedCount === 1 ? 'action is' : 'actions are' }} left out of
+      the state.
+    }
+  </p>
+  @if (confirmReset()) {
+    <div
+      class="confirm"
+      role="group"
+      aria-labelledby="ngrx-reset-text"
+      (keydown.escape)="cancelReset($event)"
+    >
+      <p id="ngrx-reset-text">
+        Reset puts the store back on its initial state and empties the Store DevTools history.
+        Entries logged so far can no longer be restored.
+      </p>
+      <div class="actions">
+        <button
+          type="button"
+          class="btn primary"
+          [disabled]="busy()"
+          (click)="devtoolsOp({ op: 'reset' })"
+        >
+          Reset history
+        </button>
+        <button type="button" class="btn" (click)="cancelReset()" #resetCancel>Cancel</button>
+      </div>
+    </div>
+  } @else {
+    <div class="actions">
+      <button
+        type="button"
+        class="btn"
+        [disabled]="busy() || !canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
+        (click)="devtoolsOp({ op: 'pause', paused: !current.classic!.recordingPaused })"
+      >
+        {{ current.classic!.recordingPaused ? 'Resume recording' : 'Pause recording' }}
+      </button>
+      <button
+        type="button"
+        class="btn"
+        [disabled]="busy() || !canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
+        (click)="devtoolsOp({ op: 'jump', index: 0 })"
+      >
+        Jump to committed state
+      </button>
+      <button
+        type="button"
+        class="btn"
+        [disabled]="busy() || !canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
+        (click)="devtoolsOp({ op: 'commit' })"
+      >
+        Commit
+      </button>
+      <button
+        type="button"
+        class="btn"
+        [disabled]="busy() || !canRestore()"
+        [attr.aria-describedby]="canRestore() ? null : 'store-history-off'"
+        (click)="askReset()"
+        #resetButton
+      >
+        Reset…
+      </button>
+    </div>
+  }
+  @if (!canRestore()) {
+    <p id="store-history-off" class="hint small">{{ restoreOff }}</p>
+  }
+}
diff --git a/app/src/pages/store/store-history.scss b/app/src/pages/store/store-history.scss
new file mode 100644
index 00000000..71dcc88b
--- /dev/null
+++ b/app/src/pages/store/store-history.scss
@@ -0,0 +1,5 @@
+@use 'store';
+
+@include store.base;
+@include store.actions;
+@include store.history-stats($history: ':host');
diff --git a/app/src/pages/store/store-history.ts b/app/src/pages/store/store-history.ts
new file mode 100644
index 00000000..c0bec133
--- /dev/null
+++ b/app/src/pages/store/store-history.ts
@@ -0,0 +1,44 @@
+import { Component, ElementRef, afterRenderEffect, inject, viewChild } from '@angular/core';
+import { StoreActions } from './store-actions';
+import { StoreState } from './store-state';
+
+/** The Store DevTools history controls of the shown `@ngrx/store` Store. */
+@Component({
+  selector: 'section[appStoreHistory]',
+  templateUrl: './store-history.html',
+  styleUrl: './store-history.scss',
+})
+export class StoreHistory {
+  private readonly state = inject(StoreState);
+  private readonly actions = inject(StoreActions);
+  private readonly resetButton = viewChild<ElementRef<HTMLButtonElement>>('resetButton');
+  private readonly resetCancel = viewChild<ElementRef<HTMLButtonElement>>('resetCancel');
+
+  protected readonly store = this.state.store;
+  protected readonly canRestore = this.state.canRestore;
+  protected readonly restoreOff = this.state.restoreOff;
+  protected readonly busy = this.actions.busy;
+  protected readonly confirmReset = this.actions.confirmReset;
+
+  constructor() {
+    afterRenderEffect(() => {
+      const target = this.actions.focusReset();
+      const button = target === 'cancel' ? this.resetCancel() : this.resetButton();
+      if (!target || !button) return;
+      this.actions.focusReset.set(null);
+      button.nativeElement.focus();
+    });
+  }
+
+  protected askReset() {
+    this.actions.askReset();
+  }
+
+  protected cancelReset(event?: Event) {
+    this.actions.cancelReset(event);
+  }
+
+  protected devtoolsOp(request: { op: string; seq?: number; index?: number; paused?: boolean }) {
+    return this.actions.devtoolsOp(request);
+  }
+}
diff --git a/app/src/pages/store/store-live.html b/app/src/pages/store/store-live.html
new file mode 100644
index 00000000..7ec720af
--- /dev/null
+++ b/app/src/pages/store/store-live.html
@@ -0,0 +1,81 @@
+<div class="section-head">
+  <h2 id="ngrx-live-heading">Live stores</h2>
+  @if (liveStores().length) {
+    <span class="pill">{{ liveStores().length }}</span>
+  }
+</div>
+
+@if (failed()) {
+  <app-state kind="error" (retry)="retry()">
+    Could not load the live store state.
+    <p detail>Check that the dev server with Pangular Inspector is still running.</p>
+  </app-state>
+} @else if (!stateLoaded()) {
+  <app-state kind="loading">Loading the live stores…</app-state>
+} @else if (!page()) {
+  <app-state kind="empty">
+    No page is reporting store state yet.
+    <p detail>Open the app in a browser. Stores show up here as soon as the page creates them.</p>
+  </app-state>
+} @else if (!liveStores().length) {
+  <app-angular-unavailable [page]="angularPage()" capability="injectorProviders" compact>
+    The overlay finds stores through the injectors, so stores it can't reach from a component are
+    not listed.
+  </app-angular-unavailable>
+  <div class="empty">
+    @if (usesSignals()) {
+      <p class="empty-title">No signal store instance on this page yet.</p>
+      <p class="hint">
+        A <code>signalStore</code> is created the first time something injects it. Navigate to a
+        page that uses the store and it appears here.
+      </p>
+    } @else if (usesClassic()) {
+      <p class="empty-title">The &#64;ngrx/store Store was not found on this page.</p>
+      <p class="hint">
+        Check that <code>provideStore()</code> or <code>StoreModule.forRoot()</code> is part of the
+        providers of the running app.
+      </p>
+    } @else {
+      <p class="empty-title">This page has no store.</p>
+      <p class="hint">
+        Stores from <code>&#64;ngrx/signals</code> (<code>signalStore</code>,
+        <code>signalState</code>) and <code>&#64;ngrx/store</code> are listed here once the app
+        creates them. NGXS, Elf and MiniRx stores show up through their Redux DevTools integration
+        when the app loads
+        <code>&#64;pangular-inspector/devtools/store-hook</code>
+        first.
+      </p>
+    }
+  </div>
+} @else {
+  <div class="live-layout">
+    <ul class="store-list" aria-label="Stores on this page">
+      @for (item of filteredStores(); track item.id) {
+        <li>
+          <button
+            type="button"
+            class="store-item"
+            [class.selected]="item.id === store()?.id"
+            [attr.aria-pressed]="item.id === store()?.id"
+            (click)="selectStore(item.id)"
+          >
+            <span class="store-top">
+              <span class="dot" aria-hidden="true" [style.background]="kindColor(item.kind)"></span>
+              <span class="store-name">{{ item.label }}</span>
+            </span>
+            <span class="store-meta">
+              {{ kindLabel(item.kind) }} · {{ item.scope }} · {{ countText(item) }}
+            </span>
+          </button>
+        </li>
+      } @empty {
+        <li class="muted pad">No stores match this filter.</li>
+      }
+    </ul>
+
+    @if (store()) {
+      <div appStoreDetail class="store-detail"></div>
+    }
+  </div>
+}
+<p class="message" role="status">{{ message() }}</p>
diff --git a/app/src/pages/store/store-live.scss b/app/src/pages/store/store-live.scss
new file mode 100644
index 00000000..251cad6e
--- /dev/null
+++ b/app/src/pages/store/store-live.scss
@@ -0,0 +1,20 @@
+@use 'store';
+
+@include store.base;
+@include store.lists;
+@include store.detail;
+@include store.message;
+@media (max-width: 760px) {
+  .live-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .store-list {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+@media (max-width: 480px) {
+  .store-detail {
+    padding: 12px;
+  }
+}
diff --git a/app/src/pages/store/store-live.ts b/app/src/pages/store/store-live.ts
new file mode 100644
index 00000000..c2f00453
--- /dev/null
+++ b/app/src/pages/store/store-live.ts
@@ -0,0 +1,42 @@
+import { Component, inject } from '@angular/core';
+import { AngularUnavailable } from '../../ui/angular-unavailable';
+import { AppState } from '../../ui/app-state';
+import { StoreDetail } from './store-detail';
+import { kindColor, kindLabel } from './store-format';
+import { StoreState } from './store-state';
+
+/** The Live stores section of the Store page: its states, the store list and the shown store. */
+@Component({
+  selector: 'section[appStoreLive]',
+  imports: [AngularUnavailable, AppState, StoreDetail],
+  templateUrl: './store-live.html',
+  styleUrl: './store-live.scss',
+})
+export class StoreLive {
+  private readonly state = inject(StoreState);
+
+  protected readonly failed = this.state.failed;
+  protected readonly stateLoaded = this.state.stateLoaded;
+  protected readonly page = this.state.page;
+  protected readonly angularPage = this.state.angularPage;
+  protected readonly liveStores = this.state.liveStores;
+  protected readonly filteredStores = this.state.filteredStores;
+  protected readonly store = this.state.store;
+  protected readonly usesSignals = this.state.usesSignals;
+  protected readonly usesClassic = this.state.usesClassic;
+  protected readonly message = this.state.message;
+  protected readonly kindColor = kindColor;
+  protected readonly kindLabel = kindLabel;
+
+  protected retry() {
+    this.state.retry();
+  }
+
+  protected selectStore(id: string) {
+    this.state.selectStore(id);
+  }
+
+  protected countText(item: Parameters<StoreState['countText']>[0]) {
+    return this.state.countText(item);
+  }
+}
diff --git a/app/src/pages/store/store-log.html b/app/src/pages/store/store-log.html
new file mode 100644
index 00000000..20fce8b1
--- /dev/null
+++ b/app/src/pages/store/store-log.html
@@ -0,0 +1,105 @@
+@if (store(); as current) {
+  <h4 id="ngrx-log-heading">
+    {{ current.classic || current.redux ? 'Action log' : 'Change log' }}
+    <span class="pill">{{ storeLog().length }}</span>
+  </h4>
+  <div class="live-row">
+    <app-live-controls
+      [feed]="logFeed"
+      [what]="current.classic || current.redux ? 'actions' : 'changes'"
+    />
+  </div>
+  <app-limit-note
+    [dropped]="(current.redux ? reduxPage()?.dropped : page()?.dropped) ?? 0"
+    [max]="maxLog()"
+    what="changes on this page"
+    limit="changeLog"
+  />
+  <div class="log-layout" [style.--log-list-size.px]="logListSize()">
+    <ul
+      #logList
+      class="log-list"
+      appRovingList="button.log-item"
+      [rovingWindow]="logWindow"
+      [style.padding-top.px]="logWindow.enabled() ? 2 + logWindow.padTop() : null"
+      [style.padding-bottom.px]="logWindow.enabled() ? 2 + logWindow.padBottom() : null"
+      [attr.aria-label]="current.classic || current.redux ? 'Actions' : 'Changes'"
+    >
+      @for (shown of shownLog(); track shown.entry.seq) {
+        @let entry = shown.entry;
+        <li
+          [attr.data-vindex]="shown.index"
+          [attr.aria-setsize]="logWindow.enabled() ? storeLog().length : null"
+          [attr.aria-posinset]="logWindow.enabled() ? shown.index + 1 : null"
+        >
+          <button
+            type="button"
+            class="log-item"
+            [class.selected]="entry.seq === selectedChangeSeq()"
+            [attr.aria-pressed]="entry.seq === selectedChangeSeq()"
+            [attr.aria-controls]="entry.seq === selectedChangeSeq() ? 'ngrx-change-detail' : null"
+            (click)="selectChange(entry.seq)"
+          >
+            <span class="seq">#{{ entry.seq }}</span>
+            <span class="log-type-row">
+              <span class="log-type" [title]="entry.type">{{ entry.type }}</span>
+              @if (entry.causedByEvent; as caused) {
+                <span
+                  class="tag"
+                  [title]="'Caused by ' + kindLabel('event') + ': ' + caused.type"
+                  >{{ caused.type }}</span
+                >
+              }
+            </span>
+            <span class="log-meta">
+              @if (isSkipped(entry.seq)) {
+                <span class="tag">skipped</span>
+              }
+              @if (entry.origin) {
+                <span class="tag">{{ entry.origin }}</span>
+              }
+              {{ changesLabel(entry) }}
+              ·
+              {{ formatTime(entry.timestamp) }}
+              @if (entry.durationMs !== undefined) {
+                · {{ formatDuration(entry.durationMs) }}
+              }
+            </span>
+          </button>
+        </li>
+      } @empty {
+        <li class="muted pad">
+          @if (filter()) {
+            No entries match this filter.
+          } @else if (current.classic || current.redux) {
+            No actions dispatched since the page connected.
+          } @else {
+            No state changes yet. Method calls and patchState writes that change the state are
+            recorded here.
+          }
+        </li>
+      }
+    </ul>
+    <app-splitter
+      view="store-log"
+      pane="before"
+      label="Resize the change list"
+      [min]="200"
+      [max]="640"
+      [defaultSize]="300"
+      [(size)]="logListSize"
+    />
+
+    @if (changeEntry(); as selected) {
+      <div id="ngrx-change-detail">
+        <section
+          appStoreEntry
+          class="entry"
+          [selected]="selected"
+          [headingLevel]="5"
+          [idPrefix]="'ngrx-change'"
+        ></section>
+      </div>
+    }
+  </div>
+}
diff --git a/app/src/pages/store/store-log.scss b/app/src/pages/store/store-log.scss
new file mode 100644
index 00000000..0d33a609
--- /dev/null
+++ b/app/src/pages/store/store-log.scss
@@ -0,0 +1,15 @@
+@use 'store';
+
+@include store.base;
+@include store.lists;
+@include store.methods;
+@include store.log;
+@include store.entry;
+@media (max-width: 760px) {
+  .log-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .log-layout > app-splitter {
+    display: none;
+  }
+}
diff --git a/app/src/pages/store/store-log.ts b/app/src/pages/store/store-log.ts
new file mode 100644
index 00000000..d6c45a7f
--- /dev/null
+++ b/app/src/pages/store/store-log.ts
@@ -0,0 +1,65 @@
+import { Component, ElementRef, computed, effect, inject, signal, viewChild } from '@angular/core';
+import { time } from '../../format';
+import { LimitNote } from '../../ui/limit-note';
+import { LiveControls, followNewest } from '../../ui/live-feed';
+import { RovingList } from '../../ui/roving-list';
+import { Splitter, storedPaneSize } from '../../ui/splitter';
+import { VirtualWindow } from '../../ui/virtual-window';
+import { StoreEntry } from './store-entry';
+import { formatDuration, kindLabel, slice } from './store-format';
+import { StoreState } from './store-state';
+
+/** The change or action log of the shown store, with the detail of the picked entry. */
+@Component({
+  selector: 'section[appStoreLog]',
+  imports: [LimitNote, LiveControls, RovingList, Splitter, StoreEntry],
+  templateUrl: './store-log.html',
+  styleUrl: './store-log.scss',
+})
+export class StoreLog {
+  private readonly state = inject(StoreState);
+
+  /** The change list width on wide panels, set by the splitter and saved. */
+  protected readonly logListSize = signal(storedPaneSize('store-log', 300));
+  protected readonly store = this.state.store;
+  protected readonly page = this.state.page;
+  protected readonly reduxPage = this.state.reduxPage;
+  protected readonly maxLog = this.state.maxLog;
+  protected readonly filter = this.state.filter;
+  protected readonly logFeed = this.state.logFeed;
+  protected readonly storeLog = this.state.storeLog;
+  protected readonly selectedChangeSeq = this.state.selectedChangeSeq;
+  protected readonly changeEntry = this.state.changeEntry;
+  protected readonly changesLabel = this.state.changesLabel;
+  protected readonly kindLabel = kindLabel;
+  protected readonly formatTime = time;
+  protected readonly formatDuration = formatDuration;
+
+  /** Long logs render only the entries near view in their scroll box. */
+  protected readonly logWindow = new VirtualWindow({
+    count: computed(() => this.storeLog().length),
+    estimate: 56,
+  });
+  protected readonly shownLog = computed(() => slice(this.storeLog(), this.logWindow));
+  private readonly logList = viewChild<ElementRef<HTMLElement>>('logList');
+
+  constructor() {
+    // Newest first, so following the newest change keeps the log scrolled to the top.
+    followNewest(this.logFeed, () => {
+      const list = this.logList()?.nativeElement;
+      if (list) list.scrollTop = 0;
+    });
+    effect(() => {
+      const log = this.logList()?.nativeElement;
+      if (log) this.logWindow.attach(log);
+    });
+  }
+
+  protected selectChange(seq: number) {
+    this.state.selectChange(seq);
+  }
+
+  protected isSkipped(seq: number): boolean {
+    return this.state.isSkipped(seq);
+  }
+}
diff --git a/app/src/pages/store/store-source.html b/app/src/pages/store/store-source.html
new file mode 100644
index 00000000..742b0983
--- /dev/null
+++ b/app/src/pages/store/store-source.html
@@ -0,0 +1,71 @@
+<div class="section-head">
+  <h2 id="ngrx-source-heading">Source declarations</h2>
+  @if (sourceEntries().length) {
+    <span class="pill">{{ sourceEntries().length }}</span>
+  }
+</div>
+@if (!sourceLoaded()) {
+  <div class="empty compact" role="status">
+    <span class="spinner" aria-hidden="true"></span>
+    <p class="empty-title">Scanning source for NgRx declarations…</p>
+  </div>
+} @else if (sourceEntries().length === 0) {
+  <div class="empty compact">
+    <p class="empty-title">No NgRx declarations found in source.</p>
+    <p class="hint">
+      The scan looks for <code>signalStore</code>, <code>signalState</code>,
+      <code>signalMethod</code>, <code>createAction</code>, <code>createReducer</code>,
+      <code>createEffect</code>, <code>createSelector</code> and <code>createFeature</code>.
+    </p>
+  </div>
+} @else {
+  <div class="kinds" role="group" aria-label="Filter declarations by kind">
+    <button
+      type="button"
+      class="kind-chip"
+      [class.active]="!kind()"
+      [attr.aria-pressed]="!kind()"
+      (click)="kind.set(null)"
+    >
+      All <span class="count">{{ sourceEntries().length }}</span>
+    </button>
+    @for (group of groupedEntries(); track group.kind) {
+      <button
+        type="button"
+        class="kind-chip"
+        [class.active]="kind() === group.kind"
+        [attr.aria-pressed]="kind() === group.kind"
+        (click)="kind.set(kind() === group.kind ? null : group.kind)"
+      >
+        <span class="dot" aria-hidden="true" [style.background]="kindColor(group.kind)"></span>
+        <span class="chip-text">{{ kindLabel(group.kind) }}</span>
+        <span class="count">{{ group.count }}</span>
+      </button>
+    }
+  </div>
+
+  <ul class="nodes">
+    @for (entry of filteredEntries(); track entry.name + entry.file + entry.line) {
+      <li class="node-card">
+        <div class="node-header">
+          <span class="dot" aria-hidden="true" [style.background]="kindColor(entry.kind)"></span>
+          <span class="node-label">{{ entry.name }}</span>
+          <span class="chip">{{ kindLabel(entry.kind) }}</span>
+        </div>
+        <div class="node-meta">
+          <app-source-link class="file" [file]="entry.file" [line]="entry.line" />
+        </div>
+        @if (entry.detail) {
+          <p class="detail">{{ entry.detail }}</p>
+        }
+      </li>
+    } @empty {
+      <li>
+        <div class="empty compact" role="status">
+          <p class="empty-title">No declarations match.</p>
+          <button type="button" class="btn" (click)="clearFilters()">Clear filters</button>
+        </div>
+      </li>
+    }
+  </ul>
+}
diff --git a/app/src/pages/store/store-source.scss b/app/src/pages/store/store-source.scss
new file mode 100644
index 00000000..a51e440e
--- /dev/null
+++ b/app/src/pages/store/store-source.scss
@@ -0,0 +1,12 @@
+@use 'store';
+
+@include store.base;
+@include store.lists;
+@include store.detail;
+@include store.source;
+@include store.spinner;
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+}
diff --git a/app/src/pages/store/store-source.ts b/app/src/pages/store/store-source.ts
new file mode 100644
index 00000000..cd3d9b9e
--- /dev/null
+++ b/app/src/pages/store/store-source.ts
@@ -0,0 +1,27 @@
+import { Component, inject } from '@angular/core';
+import { SourceLink } from '../../ui/source-link';
+import { kindColor, kindLabel } from './store-format';
+import { StoreState } from './store-state';
+
+/** The Source declarations section: the NgRx declarations the source scan found. */
+@Component({
+  selector: 'section[appStoreSource]',
+  imports: [SourceLink],
+  templateUrl: './store-source.html',
+  styleUrl: './store-source.scss',
+})
+export class StoreSource {
+  private readonly state = inject(StoreState);
+
+  protected readonly sourceEntries = this.state.sourceEntries;
+  protected readonly sourceLoaded = this.state.sourceLoaded;
+  protected readonly kind = this.state.kind;
+  protected readonly groupedEntries = this.state.groupedEntries;
+  protected readonly filteredEntries = this.state.filteredEntries;
+  protected readonly kindColor = kindColor;
+  protected readonly kindLabel = kindLabel;
+
+  protected clearFilters() {
+    this.state.clearFilters();
+  }
+}
diff --git a/app/src/pages/store/store-state.ts b/app/src/pages/store/store-state.ts
new file mode 100644
index 00000000..a38e751e
--- /dev/null
+++ b/app/src/pages/store/store-state.ts
@@ -0,0 +1,482 @@
+import {
+  DestroyRef,
+  Injectable,
+  computed,
+  inject,
+  linkedSignal,
+  signal,
+  type Signal,
+} from '@angular/core';
+import type { DevframeRpcClient } from 'devframe/client';
+import { angularPageFor, injectAngularPages } from '../../angular-pages';
+import { actionAllowed, actionBlockedMessage, panelConfig } from '../../devtools-config';
+import { hostPageId } from '../../page-id';
+import { rpcCall as call } from '../../rpc';
+import { LiveFeed } from '../../ui/live-feed';
+import type { SelectOption } from '../../ui/select';
+import { reduxLiveStores, reduxLog, reduxPagesOf, type ReduxStoresPage } from '../redux-stores';
+import type { EntryDetailAnswer } from '../store-entry-tabs';
+import {
+  changeCountText,
+  pretty,
+  sameNgrxLog,
+  short,
+  type LiveStore,
+  type NgrxActionStat,
+  type NgrxLogEntry,
+  type NgrxLogKey,
+  type NgrxPage,
+  type NgrxState,
+  type NgrxStoreEntry,
+} from '../store-types';
+import { CLASSIC_KINDS } from './store-format';
+
+/**
+ * The state the Store page and its sections share: the `ngrx-store` and `redux-stores` shared
+ * states, the source scan, the selected page, store and log entries, the filter and the result
+ * message. Provided by the page, so every section of one page reads the same signals.
+ */
+@Injectable()
+export class StoreState {
+  private rpcSource: Signal<DevframeRpcClient | null> = signal(null);
+  readonly rpc = computed(() => this.rpcSource());
+  readonly canRestore = computed(() => actionAllowed(this.rpc(), 'ngrx'));
+  readonly restoreOff = actionBlockedMessage('ngrx');
+
+  readonly filter = signal('');
+  readonly kind = signal<string | null>(null);
+  readonly sourceEntries = signal<NgrxStoreEntry[]>([]);
+  readonly sourceLoaded = signal(false);
+  readonly pages = signal<NgrxPage[]>([]);
+  /** Pages with stores that report through the Redux DevTools API (`redux-stores` shared state). */
+  readonly reduxPages = signal<ReduxStoresPage[]>([]);
+  /** The NgRx pages, plus pages that only report other stores. */
+  readonly allPages = computed<NgrxPage[]>(() => {
+    const ngrx = this.pages();
+    const known = new Set(ngrx.map((p) => p.pageId));
+    const others = this.reduxPages()
+      .filter((p) => !known.has(p.pageId))
+      .map((p) => ({
+        pageId: p.pageId,
+        url: p.url,
+        title: p.title,
+        stores: [],
+        classic: null,
+        log: [],
+        reportedAt: p.reportedAt,
+      }));
+    return [...ngrx, ...others];
+  });
+  readonly failed = signal(false);
+  /** Whether the shared state has arrived, so the empty message doesn't show first. */
+  readonly stateLoaded = signal(false);
+  readonly selectedPageId = signal<string | null>(null);
+  private readonly hostPageId = hostPageId();
+  private readonly angularPages = injectAngularPages(() => this.rpc());
+  /** The shown page's Angular version and debug API parts, for the unavailable note. */
+  readonly angularPage = computed(() =>
+    angularPageFor(this.angularPages(), this.page()?.pageId ?? this.hostPageId),
+  );
+  readonly maxLog = computed(() => panelConfig(this.rpc()).limits.changeLog);
+  readonly selectedStoreId = signal<string | null>(null);
+  readonly message = signal('');
+
+  private readonly destroyRef = inject(DestroyRef);
+  private unsubscribe: (() => void) | null = null;
+  private unsubscribeOthers: (() => void) | null = null;
+  /** Focuses the toolbar filter; the page sets it. */
+  focusFilter: () => void = () => {};
+
+  readonly page = computed<NgrxPage | null>(() => {
+    const pages = this.allPages();
+    return (
+      pages.find((p) => p.pageId === this.selectedPageId()) ??
+      pages.find((p) => p.pageId === this.hostPageId) ??
+      pages[0] ??
+      null
+    );
+  });
+
+  /** A page is connected, with stores or without: every page reports its Angular version. */
+  readonly pageConnected = computed(() => !!this.page() || !!this.angularPage());
+
+  /** The other stores of the shown page. */
+  readonly reduxPage = computed(
+    () => this.reduxPages().find((p) => p.pageId === this.page()?.pageId) ?? null,
+  );
+
+  private readonly logKey = computed<NgrxLogKey>(() => {
+    const page = this.page();
+    const store = this.store();
+    // Another store's log has its own seq, so it is its own session.
+    if (store?.redux) {
+      return { pageId: `${page?.pageId}/${store.id}`, log: reduxLog(this.reduxPage(), store.id) };
+    }
+    return { pageId: page?.pageId ?? null, log: page?.log ?? [] };
+  });
+
+  /**
+   * Counts the change logs this view has shown. It moves on when `page()` switches to another
+   * page (including the fallback when the chosen page closes) and when the app reloads, which
+   * keeps the `pageId` but restarts `seq` at 1, so a seq picked before means another entry now.
+   */
+  readonly logSession = linkedSignal<NgrxLogKey, number>({
+    source: this.logKey,
+    computation: (key, previous) =>
+      !previous ? 0 : sameNgrxLog(previous.source, key) ? previous.value : previous.value + 1,
+  });
+
+  // Two selection cursors so clicking an event never swaps out the per-store
+  // change-log detail: the change log keeps its own highlighted row, the
+  // Events section keeps its own, and each shows its detail in-place.
+  // All three are seqs, so they reset whenever the change log is another one.
+  readonly selectedChangeSeq = linkedSignal<number, number | null>({
+    source: this.logSession,
+    computation: () => null,
+  });
+  readonly selectedEventSeq = linkedSignal<number, number | null>({
+    source: this.logSession,
+    computation: () => null,
+  });
+  readonly confirmSeq = linkedSignal<number, number | null>({
+    source: this.logSession,
+    computation: () => null,
+  });
+
+  readonly pageOptions = computed<SelectOption[]>(() =>
+    this.allPages().map((p) => ({ value: p.pageId, label: p.title || p.url, hint: p.url })),
+  );
+
+  readonly liveStores = computed<LiveStore[]>(() => {
+    const page = this.page();
+    if (!page) return [];
+    const stores: LiveStore[] = page.stores.map((info) => ({
+      id: info.id,
+      label: info.name ?? info.references[0] ?? info.className,
+      kind: info.kind,
+      scope: info.scope,
+      signal: info,
+    }));
+    if (page.classic) {
+      stores.push({
+        id: 'store',
+        label: 'Store',
+        kind: 'store',
+        scope: page.classic.scope,
+        classic: page.classic,
+      });
+    }
+    stores.push(...reduxLiveStores(this.reduxPage()));
+    return stores;
+  });
+
+  readonly filteredStores = computed(() => {
+    const f = this.filter().trim().toLowerCase();
+    if (!f) return this.liveStores();
+    return this.liveStores().filter(
+      (s) =>
+        s.label.toLowerCase().includes(f) ||
+        s.kind.includes(f) ||
+        (s.signal?.stateKeys ?? []).some((k) => k.toLowerCase().includes(f)) ||
+        this.logOf(s).some((e) => e.type.toLowerCase().includes(f)),
+    );
+  });
+
+  readonly store = computed<LiveStore | null>(() => {
+    const stores = this.liveStores();
+    return stores.find((s) => s.id === this.selectedStoreId()) ?? stores[0] ?? null;
+  });
+
+  readonly stateText = computed(() => {
+    const store = this.store();
+    if (!store) return '';
+    return pretty(
+      store.signal ? store.signal.state : store.redux ? store.redux.state : store.classic?.state,
+    );
+  });
+
+  /** The serialized state of the selected store, for the state tree. */
+  readonly stateValue = computed<unknown>(() => {
+    const store = this.store();
+    if (!store) return undefined;
+    return store.signal
+      ? store.signal.state
+      : store.redux
+        ? store.redux.state
+        : store.classic?.state;
+  });
+
+  /** The paths the newest change of the selected store wrote, marked in the state tree. */
+  readonly changedPaths = computed<string[]>(() => {
+    const store = this.store();
+    const log = store ? this.logOf(store) : [];
+    let newest: NgrxLogEntry | undefined;
+    for (let i = log.length - 1; i >= 0 && !newest; i--) if (log[i].diff.length) newest = log[i];
+    return (newest?.diff ?? []).map((d) => d.path);
+  });
+
+  /** The selected store's action stats, most frequent first. */
+  readonly storeStats = computed<NgrxActionStat[]>(() => {
+    const store = this.store();
+    if (!store || store.redux) return [];
+    const stats = this.page()?.stats;
+    return Array.isArray(stats) ? stats.filter((s) => s.storeId === store.id) : [];
+  });
+  readonly hasLoop = computed(() => this.storeStats().some((s) => s.loop));
+
+  private readonly skippedSeqs = computed(
+    () =>
+      new Set(Array.isArray(this.page()?.classic?.skipped) ? this.page()!.classic!.skipped : []),
+  );
+
+  readonly computedEntries = computed(() =>
+    Object.entries(this.store()?.signal?.computed ?? {}).map(([key, value]) => ({
+      key,
+      value: short(value, 160),
+      full: pretty(value),
+    })),
+  );
+
+  /** Pause holds the selected store's log as it is while the app keeps changing it. */
+  readonly logFeed = new LiveFeed<NgrxLogEntry>({
+    name: 'store-log',
+    source: () => {
+      const store = this.store();
+      return store ? this.logOf(store) : [];
+    },
+    key: (entry) => entry.seq,
+    newest: 'last',
+    scope: () => `${this.store()?.id ?? ''}:${this.logSession()}`,
+  });
+
+  readonly storeLog = computed<NgrxLogEntry[]>(() => {
+    const f = this.filter().trim().toLowerCase();
+    return this.logFeed
+      .items()
+      .filter((e) => !f || e.type.toLowerCase().includes(f) || this.storeMatches(f))
+      .slice()
+      .reverse();
+  });
+
+  /** The selected store's state changes, oldest first, for the session tools. */
+  readonly sessionEntries = computed<NgrxLogEntry[]>(() => {
+    const store = this.store();
+    // Sessions and generated tests are NgRx only: other stores have no past states to read.
+    if (!store || store.redux) return [];
+    return (this.page()?.log ?? []).filter((e) => e.storeId === store.id && e.source !== 'event');
+  });
+
+  /** Reads the State and full Diff of a past entry from the shown page. */
+  readonly loadEntry = async (seq: number): Promise<EntryDetailAnswer> => {
+    const pageId = this.page()?.pageId;
+    if (!pageId) return { error: 'No live page to read from.' };
+    return ((await call(this.rpc(), 'request-ngrx-history', {
+      pageId,
+      request: { type: 'entry', seq },
+    })) ?? { error: 'The devtools server is not connected.' }) as EntryDetailAnswer;
+  };
+
+  /** A store's log entries, oldest first. */
+  private logOf(store: LiveStore): NgrxLogEntry[] {
+    if (store.redux) return reduxLog(this.reduxPage(), store.id);
+    return (this.page()?.log ?? []).filter((e) => e.storeId === store.id);
+  }
+
+  readonly hasEvents = computed(() => (this.page()?.log ?? []).some((e) => e.source === 'event'));
+
+  readonly pageEvents = computed<NgrxLogEntry[]>(() => {
+    const f = this.filter().trim().toLowerCase();
+    return (this.page()?.log ?? [])
+      .filter((e) => e.source === 'event' && (!f || e.type.toLowerCase().includes(f)))
+      .slice()
+      .reverse();
+  });
+
+  readonly changeEntry = computed<NgrxLogEntry | null>(() => {
+    const seq = this.selectedChangeSeq();
+    if (seq === null) return null;
+    return this.storeLog().find((e) => e.seq === seq) ?? null;
+  });
+
+  readonly eventEntry = computed<NgrxLogEntry | null>(() => {
+    const seq = this.selectedEventSeq();
+    if (seq === null) return null;
+    return this.pageEvents().find((e) => e.seq === seq) ?? null;
+  });
+
+  readonly actionTypes = computed(() => {
+    const types = new Set<string>();
+    for (const entry of this.sourceEntries()) for (const type of entry.types ?? []) types.add(type);
+    for (const entry of this.page()?.log ?? []) {
+      if (entry.source === 'store' && entry.action !== undefined) types.add(entry.type);
+    }
+    return [...types].sort().slice(0, 200);
+  });
+
+  readonly usesSignals = computed(() =>
+    this.sourceEntries().some((e) => e.kind === 'signal-store' || e.kind === 'signal-state'),
+  );
+  readonly usesClassic = computed(() =>
+    this.sourceEntries().some((e) => CLASSIC_KINDS.has(e.kind)),
+  );
+
+  readonly filteredEntries = computed(() => {
+    const f = this.filter().trim().toLowerCase();
+    const kind = this.kind();
+    return this.sourceEntries().filter(
+      (e) =>
+        (!kind || e.kind === kind) &&
+        (!f ||
+          e.name.toLowerCase().includes(f) ||
+          e.kind.includes(f) ||
+          (e.detail ?? '').toLowerCase().includes(f)),
+    );
+  });
+
+  readonly groupedEntries = computed(() => {
+    const groups = new Map<string, number>();
+    for (const e of this.sourceEntries()) groups.set(e.kind, (groups.get(e.kind) ?? 0) + 1);
+    return [...groups.entries()].map(([kind, count]) => ({ kind, count }));
+  });
+
+  constructor() {
+    this.destroyRef.onDestroy(() => {
+      this.unsubscribe?.();
+      this.unsubscribeOthers?.();
+    });
+  }
+
+  /** Reads the page's `rpc` input. */
+  connect(rpc: Signal<DevframeRpcClient | null>) {
+    this.rpcSource = rpc;
+  }
+
+  private storeMatches(f: string): boolean {
+    const store = this.store();
+    return !!store && store.label.toLowerCase().includes(f);
+  }
+
+  async load(client: DevframeRpcClient) {
+    this.failed.set(false);
+    call(client, 'get-ngrx-store')
+      .then((entries) => this.sourceEntries.set(Array.isArray(entries) ? entries : []))
+      .catch(() => this.sourceEntries.set([]))
+      .finally(() => this.sourceLoaded.set(true));
+    try {
+      const state = await client.scope('pangular').rpc.sharedState('ngrx-store');
+      if (this.destroyRef.destroyed) return;
+      const apply = (value: unknown) => {
+        const next = value as Partial<NgrxState> | undefined;
+        this.pages.set(Array.isArray(next?.pages) ? next.pages : []);
+        // A state the client hasn't loaded from the server yet says nothing.
+        if (value !== undefined) this.stateLoaded.set(true);
+      };
+      apply(state.value());
+      this.unsubscribe?.();
+      this.unsubscribe = state.on('updated', apply);
+    } catch {
+      this.failed.set(true);
+    }
+    // Other stores are an addition: a server without them leaves the NgRx view as it is.
+    try {
+      const others = await client.scope('pangular').rpc.sharedState('redux-stores');
+      if (this.destroyRef.destroyed) return;
+      const applyOthers = (value: unknown) => this.reduxPages.set(reduxPagesOf(value));
+      applyOthers(others.value());
+      this.unsubscribeOthers?.();
+      this.unsubscribeOthers = others.on('updated', applyOthers);
+    } catch {
+      this.reduxPages.set([]);
+    }
+  }
+
+  retry() {
+    const client = this.rpc();
+    if (client) void this.load(client);
+  }
+
+  selectPage(pageId: string | null) {
+    this.selectedPageId.set(pageId);
+    this.selectedStoreId.set(null);
+    this.selectedChangeSeq.set(null);
+    this.selectedEventSeq.set(null);
+    this.confirmSeq.set(null);
+    this.message.set('');
+  }
+
+  selectStore(id: string) {
+    this.selectedStoreId.set(id);
+    this.selectedChangeSeq.set(null);
+    this.confirmSeq.set(null);
+    this.message.set('');
+  }
+
+  selectChange(seq: number) {
+    this.selectedChangeSeq.set(this.selectedChangeSeq() === seq ? null : seq);
+    this.confirmSeq.set(null);
+    this.message.set('');
+  }
+
+  copyState() {
+    return this.copyText(this.stateText());
+  }
+
+  copyPath(path: string) {
+    return this.copyText(path, `Copied the path ${path}.`);
+  }
+
+  copyDiff(entry: NgrxLogEntry) {
+    return this.copyText(pretty(entry.diff));
+  }
+
+  private async copyText(text: string, done = 'Copied.') {
+    try {
+      await navigator.clipboard.writeText(text);
+      this.message.set(done);
+    } catch {
+      this.message.set('The clipboard is not available here.');
+    }
+  }
+
+  isSkipped(seq: number): boolean {
+    return this.skippedSeqs().has(seq);
+  }
+
+  /** An @ngrx/store action Store DevTools still holds, or one it skips, can be skipped or included. */
+  canToggle(entry: NgrxLogEntry): boolean {
+    return (
+      entry.source === 'store' &&
+      entry.action !== undefined &&
+      !!this.page()?.classic?.devtools &&
+      (entry.restorable || this.isSkipped(entry.seq))
+    );
+  }
+
+  canAgain(entry: NgrxLogEntry): boolean {
+    return entry.source === 'store' && entry.action !== undefined;
+  }
+
+  /** Clears the filters from a no-match state and keeps focus on the filter box. */
+  clearFilters() {
+    this.filter.set('');
+    this.kind.set(null);
+    this.focusFilter();
+  }
+
+  /**
+   * The row's log count. A Redux DevTools store logs what its library sent,
+   * `@@INIT` included, so its entries are actions, not changes.
+   */
+  countText(item: LiveStore): string {
+    const n = this.changeCount(item.id);
+    const noun = item.redux ? (n === 1 ? 'action' : 'actions') : n === 1 ? 'change' : 'changes';
+    return `${n} ${noun}`;
+  }
+
+  changeCount(id: string): number {
+    const store = this.liveStores().find((s) => s.id === id);
+    return store ? this.logOf(store).length : 0;
+  }
+
+  readonly changesLabel = changeCountText;
+}
diff --git a/app/src/pages/store/store-stats.html b/app/src/pages/store/store-stats.html
new file mode 100644
index 00000000..96fe794b
--- /dev/null
+++ b/app/src/pages/store/store-stats.html
@@ -0,0 +1,47 @@
+@if (store(); as current) {
+  <h4 id="ngrx-stats-heading">Action frequency</h4>
+  <p class="hint small">
+    How often each {{ current.classic ? 'action' : 'change' }} ran since the page loaded, including
+    entries the log no longer keeps.
+  </p>
+  <div class="table-wrap" tabindex="0" role="region" aria-labelledby="ngrx-stats-heading">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">{{ current.classic ? 'Action' : 'Method or write' }}</th>
+          <th scope="col" class="num">Count</th>
+          <th scope="col" class="num">Avg</th>
+          <th scope="col" class="num">Longest</th>
+          <th scope="col" class="num">Peak per second</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (stat of storeStats(); track stat.type) {
+          <tr>
+            <th scope="row" class="mono">
+              {{ stat.type }}
+              @if (stat.loop) {
+                <span class="loop">Possible effect loop</span>
+              }
+            </th>
+            <td class="num">{{ stat.count }}</td>
+            <td class="num">
+              {{ stat.avgMs !== undefined ? formatDuration(stat.avgMs) : 'n/a' }}
+            </td>
+            <td class="num">
+              {{ stat.maxMs !== undefined ? formatDuration(stat.maxMs) : 'n/a' }}
+            </td>
+            <td class="num">{{ stat.burst }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
+  @if (hasLoop()) {
+    <p class="hint small">
+      A possible effect loop is an action an NgRx effect dispatched
+      {{ loopBurst }} or more times within one second. Check the effect that dispatches it for a
+      missing filter or a dispatch of its own trigger.
+    </p>
+  }
+}
diff --git a/app/src/pages/store/store-stats.scss b/app/src/pages/store/store-stats.scss
new file mode 100644
index 00000000..94055b46
--- /dev/null
+++ b/app/src/pages/store/store-stats.scss
@@ -0,0 +1,4 @@
+@use 'store';
+
+@include store.base;
+@include store.history-stats($stats: ':host');
diff --git a/app/src/pages/store/store-stats.ts b/app/src/pages/store/store-stats.ts
new file mode 100644
index 00000000..dce0af41
--- /dev/null
+++ b/app/src/pages/store/store-stats.ts
@@ -0,0 +1,20 @@
+import { Component, inject } from '@angular/core';
+import { formatDuration } from './store-format';
+import { StoreState } from './store-state';
+
+/** The action frequency table of the shown store. */
+@Component({
+  selector: 'div[appStoreStats]',
+  templateUrl: './store-stats.html',
+  styleUrl: './store-stats.scss',
+})
+export class StoreStats {
+  private readonly state = inject(StoreState);
+
+  protected readonly store = this.state.store;
+  protected readonly storeStats = this.state.storeStats;
+  protected readonly hasLoop = this.state.hasLoop;
+  protected readonly formatDuration = formatDuration;
+  /** How many effect dispatches within a second flag a loop (`NGRX_LOOP_BURST`). */
+  protected readonly loopBurst = 20;
+}
diff --git a/app/src/styles/_analog.scss b/app/src/styles/_analog.scss
index eed2dc3f..a871a3ea 100644
--- a/app/src/styles/_analog.scss
+++ b/app/src/styles/_analog.scss
@@ -292,3 +292,859 @@
     }
   }
 }
+
+// The Analog page's own styles, shared by the page (`app/src/pages/analog-inspector.scss`) and
+// its views (`app/src/pages/analog/`), in the order the page had them as one component, so each
+// view looks as it did. Include the groups a view uses, in this order: base, count, form,
+// callout, table, calls, cards, findings.
+
+// Shared text styles: numbers, metadata rows, empty rows and boxes, mono and muted text, code.
+@mixin base {
+  .tnum {
+    font-variant-numeric: tabular-nums;
+  }
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 8px;
+    align-items: center;
+    min-width: 0;
+  }
+  .empty-row {
+    padding: 24px 16px;
+    color: var(--text-2);
+    text-align: center;
+  }
+  tbody tr:hover td.empty-row {
+    background: transparent;
+  }
+  .empty-box {
+    display: grid;
+    gap: 4px;
+    padding: 24px 16px;
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius);
+    text-align: center;
+  }
+  .empty-box p {
+    margin: 0;
+    line-height: 1.55;
+  }
+  .empty-lead {
+    color: var(--text-strong);
+    font-weight: 600;
+  }
+  .mono {
+    font-family: var(--mono);
+    font-size: 12.5px;
+  }
+  .muted {
+    color: var(--text-2);
+  }
+  .small {
+    font-size: 12px;
+  }
+  .nowrap {
+    white-space: nowrap;
+  }
+  code {
+    padding: 1px 6px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--surface-2);
+    color: var(--text-strong);
+    font-family: var(--mono);
+    font-size: 12.5px;
+  }
+}
+
+// The count badge, on the view tabs and on a lint card.
+@mixin count {
+  .count {
+    min-width: 20px;
+    padding: 0 6px;
+    border-radius: 99px;
+    background: var(--surface-3);
+    color: var(--text-2);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 18px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  [role='tab'][aria-selected='true'] .count {
+    background: var(--border-strong);
+    color: var(--text);
+  }
+  .count[data-tone='warn'],
+  [role='tab'][aria-selected='true'] .count[data-tone='warn'] {
+    background: color-mix(in srgb, var(--warn) 12%, transparent);
+    color: var(--warn-text);
+  }
+  .count[data-tone='bad'],
+  [role='tab'][aria-selected='true'] .count[data-tone='bad'] {
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+    color: var(--danger-text);
+  }
+}
+
+// The toolbar, inline forms, fields and buttons, with their focus rings.
+@mixin form {
+  .toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--surface) 85%, transparent);
+    backdrop-filter: blur(10px);
+  }
+  .explain {
+    flex: 1 1 320px;
+    min-width: 0;
+  }
+  .filter {
+    flex: 0 1 240px;
+    min-width: 0;
+  }
+  @media (max-width: 560px) {
+    .filter {
+      flex: 1 1 100%;
+    }
+  }
+  .inline,
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+  .inline > label,
+  .playground > label:not(.check) {
+    color: var(--text-3);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .field {
+    box-sizing: border-box;
+    height: 34px;
+    padding: 0 12px;
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    background-color: var(--bg);
+    color: var(--text);
+    font: inherit;
+    font-size: 13px;
+    transition:
+      border-color 180ms var(--ease),
+      box-shadow 180ms var(--ease);
+  }
+  .field.mono {
+    font-family: var(--mono);
+    font-size: 13px;
+  }
+  .field::placeholder {
+    color: var(--text-3);
+  }
+  .field:focus,
+  .field:focus-visible {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+    outline: none;
+  }
+  .method-select {
+    width: 112px;
+    font-family: var(--mono);
+  }
+  textarea.field {
+    height: auto;
+    padding: 8px 12px;
+  }
+  .grow {
+    flex: 1 1 180px;
+    min-width: 0;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: 34px;
+    padding: 0 14px;
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    color: var(--text);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background-color 160ms var(--ease),
+      border-color 160ms var(--ease),
+      color 160ms var(--ease);
+  }
+  .btn:hover {
+    background: var(--surface-3);
+    border-color: var(--control-border);
+  }
+  .btn:active {
+    transform: translateY(1px);
+  }
+  .btn.primary {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: var(--accent-ink);
+    font-weight: 600;
+  }
+  .btn.primary:hover {
+    border-color: var(--accent-hover);
+    background: var(--accent-hover);
+  }
+  .btn.ghost {
+    height: 28px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+  .btn.ghost:hover {
+    border-color: var(--accent-line);
+    color: var(--text-strong);
+  }
+  td.actions {
+    width: 1%;
+    text-align: right;
+    vertical-align: middle;
+  }
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  [role='tab']:focus-visible,
+  .btn:focus-visible,
+  .table-wrap:focus-visible,
+  summary:focus-visible,
+  .segmented label:focus-within {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+// Callouts, the route chain of an explained URL, and plain lists.
+@mixin callout {
+  .callout {
+    padding: 12px 16px;
+    border: 1px solid color-mix(in srgb, var(--hue-info) 30%, transparent);
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--hue-info) 8%, var(--surface));
+    line-height: 1.6;
+    animation: enter 0.35s var(--ease) both;
+  }
+  .callout[data-tone='good'] {
+    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
+    background: color-mix(in srgb, var(--ok) 12%, transparent);
+  }
+  .callout[data-tone='warn'] {
+    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
+    background: color-mix(in srgb, var(--warn) 12%, transparent);
+  }
+  .callout[data-tone='bad'] {
+    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
+    background: color-mix(in srgb, var(--danger) 12%, transparent);
+  }
+  .callout strong {
+    color: var(--text-strong);
+  }
+  .callout strong.mono {
+    overflow-wrap: anywhere;
+  }
+  .chain {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 8px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+  .chain li {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .chain li:not(:last-child)::after {
+    content: '›';
+    margin-left: 2px;
+    color: var(--text-3);
+  }
+  .callout .chips {
+    margin-top: 8px;
+  }
+  .plain {
+    margin: 8px 0 0;
+    padding-left: 18px;
+  }
+  .plain li {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}
+
+// Tables, file links, pills, chips, status codes, methods and response previews.
+@mixin table {
+  .table-wrap {
+    overflow-x: auto;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    box-shadow: var(--shadow);
+    animation: enter 0.35s var(--ease) both;
+  }
+  table {
+    width: 100%;
+    min-width: 560px;
+    border-collapse: collapse;
+  }
+  th,
+  td {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+    text-align: left;
+    vertical-align: top;
+  }
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+  th {
+    position: sticky;
+    top: 0;
+    background: var(--surface);
+    color: var(--text-3);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    white-space: nowrap;
+  }
+  .num {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+  td.nowrap {
+    font-variant-numeric: tabular-nums;
+  }
+  tbody td {
+    transition: background-color 160ms var(--ease);
+  }
+  tbody tr:hover td {
+    background: var(--surface-2);
+  }
+  tr.open td {
+    background: var(--accent-soft);
+    color: var(--text-strong);
+  }
+  tr.open:hover td {
+    background: color-mix(in srgb, var(--accent) 16%, transparent);
+  }
+  tr.open td:first-child {
+    box-shadow: inset 2px 0 0 var(--accent);
+  }
+  tr.dim .path {
+    color: var(--text-2);
+  }
+  .route {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+  .guide {
+    color: var(--text-3);
+    font-family: var(--mono);
+  }
+  .path {
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+  .file {
+    font-family: var(--mono);
+    font-size: 12.5px;
+    color: var(--text);
+    overflow-wrap: anywhere;
+  }
+  .dir {
+    color: var(--text-3);
+  }
+
+  .pill,
+  .chip,
+  .status,
+  .method {
+    display: inline-block;
+    padding: 1px 8px;
+    border-radius: 99px;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 18px;
+    white-space: nowrap;
+  }
+  .pill {
+    border: 1px solid var(--border-strong);
+    background: var(--surface-2);
+    color: var(--text-2);
+  }
+  .chip {
+    margin: 0 4px 4px 0;
+    padding: 3px 10px;
+    border: 1px solid var(--border);
+    background: var(--surface-2);
+    color: var(--text);
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .chip.mono {
+    font-size: 12px;
+  }
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .chips .pill {
+    padding: 3px 10px;
+    font-size: 12px;
+  }
+  .pill.live {
+    border-color: var(--accent-line);
+    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
+    color: var(--accent-text);
+  }
+  .pill[data-kind='layout'],
+  .pill[data-mode='redirect'] {
+    border-color: var(--hue-slate);
+    color: var(--hue-slate-text);
+  }
+  .pill[data-kind='markdown'] {
+    border-color: var(--hue-sky);
+    color: var(--hue-sky-text);
+  }
+  .pill[data-kind='load'],
+  .pill[data-call='load'],
+  .pill[data-call='fn'] {
+    border-color: var(--hue-teal);
+    color: var(--hue-teal-text);
+  }
+  .pill[data-mode='ssr'],
+  .pill[data-call='page'] {
+    border-color: var(--hue-blue);
+    color: var(--hue-blue-text);
+  }
+  .pill[data-mode='ssg'] {
+    border-color: var(--hue-green);
+    color: var(--hue-green-text);
+  }
+  .pill[data-mode='client'] {
+    border-color: var(--hue-yellow);
+    color: var(--hue-yellow-text);
+  }
+  .pill[data-mode='cached'] {
+    border-color: var(--hue-purple);
+    color: var(--hue-purple-text);
+  }
+  .pill[data-call='api'] {
+    border-color: var(--hue-orange);
+    color: var(--hue-orange-text);
+  }
+  .pill[data-call='action'] {
+    border-color: var(--hue-pink);
+    color: var(--hue-pink-text);
+  }
+  [data-tone='good'].pill {
+    @include m.tint(ok);
+  }
+  [data-tone='warn'].pill,
+  [data-tone='warn'].chip {
+    @include m.tint(warn);
+  }
+  [data-tone='bad'].pill,
+  [data-tone='bad'].chip {
+    @include m.tint(danger);
+  }
+  [data-tone='info'].pill {
+    @include m.tint(hue-info);
+  }
+
+  .status {
+    border: 1px solid var(--border-strong);
+    font-family: var(--mono);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+  .status[data-status='good'] {
+    @include m.tint(ok);
+  }
+  .status[data-status='warn'] {
+    @include m.tint(warn);
+  }
+  .status[data-status='bad'] {
+    @include m.tint(danger);
+  }
+  .method {
+    min-width: 52px;
+    border: 1px solid var(--border-strong);
+    border-radius: 6px;
+    background: var(--surface-2);
+    color: var(--text);
+    font-family: var(--mono);
+    font-weight: 600;
+    text-align: center;
+  }
+  .method[data-method='GET'] {
+    @include m.tint(hue-sky);
+  }
+  .method[data-method='POST'] {
+    @include m.tint(ok);
+  }
+  .method[data-method='PUT'],
+  .method[data-method='PATCH'] {
+    @include m.tint(warn);
+  }
+  .method[data-method='DELETE'] {
+    @include m.tint(danger);
+  }
+  .request {
+    min-width: 260px;
+  }
+  .request .url {
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+  details {
+    margin-top: 8px;
+  }
+  summary {
+    width: fit-content;
+    border-radius: 6px;
+    color: var(--text-2);
+    font-size: 12px;
+    cursor: pointer;
+    transition: color 160ms var(--ease);
+  }
+  summary:hover {
+    color: var(--text);
+  }
+  .code {
+    margin: 8px 0 0;
+    padding: 10px 12px;
+    max-height: 220px;
+    overflow: auto;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--mono);
+    font-size: 12.5px;
+    line-height: 1.55;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+}
+
+// The Server view call filters, notes, empty actions and the kind switch.
+@mixin calls {
+  .calls-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  .calls-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: center;
+  }
+  .calls-message {
+    color: var(--text-2);
+    font-size: 12.5px;
+  }
+  .call-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: center;
+  }
+  .search {
+    position: relative;
+    flex: 1 1 220px;
+    min-width: 0;
+  }
+  .search .field {
+    width: 100%;
+    padding-left: 34px;
+  }
+  .search-icon {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    width: 14px;
+    height: 14px;
+    transform: translateY(-50%);
+    fill: none;
+    stroke: var(--text-3);
+    stroke-width: 2.2;
+    stroke-linecap: round;
+    pointer-events: none;
+  }
+  .search:focus-within .search-icon {
+    stroke: var(--accent);
+  }
+  .call-filters .check {
+    flex: none;
+    font-size: 13px;
+    font-weight: 500;
+  }
+  .total {
+    flex: none;
+    color: var(--text-2);
+    font-size: 12px;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+  .note {
+    margin: 0;
+    padding: 8px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--surface);
+    color: var(--text-2);
+    line-height: 1.5;
+  }
+  .empty-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 8px;
+  }
+  .segmented {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    justify-self: start;
+    margin: 0;
+    padding: 3px;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--bg);
+  }
+  .segmented label {
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    padding: 5px 12px;
+    border-radius: 7px;
+    background: transparent;
+    color: var(--text-2);
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background-color 180ms var(--ease),
+      color 180ms var(--ease),
+      box-shadow 180ms var(--ease);
+  }
+  .segmented label:hover {
+    color: var(--text);
+  }
+  .segmented label .muted {
+    color: var(--text-3);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+  }
+  .segmented label.on {
+    background: var(--surface-3);
+    color: var(--text-strong);
+    box-shadow: inset 0 0 0 1px var(--border-strong);
+  }
+  .segmented label.on .muted {
+    color: var(--text-2);
+  }
+}
+
+// Section headings, cards, checkboxes, responses and fact lists.
+@mixin cards {
+  h2 {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin: 8px 0 0;
+    color: var(--text-3);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  .card {
+    display: grid;
+    gap: 12px;
+    padding: 16px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    box-shadow: var(--shadow);
+    animation: enter 0.35s var(--ease) both;
+  }
+  .card h2 {
+    margin: 0;
+  }
+  .check {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    color: var(--text-2);
+    cursor: pointer;
+  }
+  .check input {
+    width: 15px;
+    height: 15px;
+    margin: 0;
+    accent-color: var(--accent);
+  }
+  .check input:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+  .response {
+    display: grid;
+    gap: 8px;
+    padding: 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+  }
+  .response .code {
+    margin: 0;
+  }
+  .facts {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 10px 16px;
+    margin: 0;
+  }
+  .facts dt {
+    padding-top: 3px;
+    color: var(--text-3);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  .facts dd {
+    margin: 0;
+  }
+}
+
+// Lint finding cards.
+@mixin findings {
+  .findings {
+    display: grid;
+    gap: 12px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    animation: enter 0.35s var(--ease) both;
+  }
+  .findings > li {
+    position: relative;
+    padding: 16px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    box-shadow:
+      inset 3px 0 0 var(--hue-info),
+      var(--shadow);
+    transition: border-color 180ms var(--ease);
+  }
+  .findings > li:hover {
+    border-color: var(--border-strong);
+  }
+  .findings > li[data-tone='bad'] {
+    box-shadow:
+      inset 3px 0 0 var(--danger),
+      var(--shadow);
+  }
+  .findings > li[data-tone='warn'] {
+    box-shadow:
+      inset 3px 0 0 var(--warn),
+      var(--shadow);
+  }
+  .findings p {
+    margin: 8px 0 0;
+    line-height: 1.55;
+  }
+  .findings > li > p {
+    color: var(--text-2);
+  }
+  .finding-head {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+  .finding-title {
+    color: var(--text-strong);
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .where {
+    display: grid;
+    gap: 6px;
+    margin: 12px 0 0;
+    padding: 10px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    list-style: none;
+  }
+  .where li {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+  }
+  .where .detail {
+    flex-basis: 100%;
+    margin: 0;
+    color: var(--text-2);
+    overflow-wrap: anywhere;
+  }
+  .fix {
+    margin-top: 12px;
+    color: var(--text);
+    line-height: 1.55;
+  }
+  .fix strong {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--ok);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  .rule {
+    display: block;
+    margin-top: 12px;
+    color: var(--text-3);
+    font-size: 12px;
+  }
+}
diff --git a/app/src/styles/_components.scss b/app/src/styles/_components.scss
new file mode 100644
index 00000000..911a1773
--- /dev/null
+++ b/app/src/styles/_components.scss
@@ -0,0 +1,475 @@
+// Styles shared by the Components page's sections (`app/src/pages/components/`), in the order the
+// page had them as one component, so each section looks as it did. Include the groups a section
+// uses, in this order: base, search, buttons, narrow, detail, facts, values, states.
+@use 'mixins' as m;
+
+// Monospace and muted text.
+@mixin base {
+  .mono {
+    font-family: var(--font-mono);
+  }
+  .muted {
+    color: var(--text-2);
+  }
+}
+
+// The search fields and the count beside them.
+@mixin search {
+  .search {
+    position: relative;
+    flex: 1 1 220px;
+    min-width: 0;
+  }
+  .search-icon {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    width: 14px;
+    height: 14px;
+    transform: translateY(-50%);
+    fill: none;
+    stroke: var(--text-3);
+    stroke-width: 2.2;
+    stroke-linecap: round;
+    pointer-events: none;
+  }
+  .search:focus-within .search-icon {
+    stroke: var(--accent);
+  }
+  input[type='search'] {
+    width: 100%;
+    height: 34px;
+    padding: 0 12px 0 34px;
+    background: var(--bg);
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font: inherit;
+    font-size: 13px;
+  }
+  input[type='search']::placeholder {
+    color: var(--text-3);
+  }
+  input[type='search']:focus-visible {
+    @include m.field-focus;
+  }
+  .count {
+    flex: none;
+    color: var(--text-2);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+}
+
+// Every button of the page.
+@mixin buttons {
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: 34px;
+    padding: 0 14px;
+    background: var(--surface-2);
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    transition:
+      background-color 150ms var(--ease),
+      border-color 150ms var(--ease);
+  }
+  button:hover {
+    background: var(--surface-3);
+    border-color: var(--accent-line);
+  }
+  button:focus-visible {
+    @include m.focus-ring;
+  }
+  button svg {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
+
+// The toolbar actions, and the search and count on a narrow panel.
+@mixin narrow {
+  .tree-action[aria-pressed='true'] {
+    background: var(--accent-soft);
+    border-color: var(--accent-line);
+    color: var(--text-strong);
+  }
+  /* A narrow panel keeps the search and count on one row and the tree
+     actions on a second one, as icons named by their hidden labels. */
+  .tree-actions {
+    display: contents;
+  }
+  @media (max-width: 600px) {
+    .toolbar {
+      gap: 8px;
+    }
+    .search {
+      flex-basis: 100%;
+    }
+    .toolbar:has(.page-select) .search {
+      flex-basis: 160px;
+    }
+    .page-select {
+      flex: 1 1 120px;
+    }
+    .count {
+      flex: 1 1 80px;
+      min-width: 0;
+      white-space: normal;
+      line-height: 1.3;
+    }
+    .tree-actions {
+      display: flex;
+      flex: none;
+      gap: 8px;
+      margin-left: auto;
+    }
+    .tree-action,
+    .pick {
+      flex: none;
+      width: var(--control-h);
+      padding: 0;
+    }
+    .tree-action .label,
+    .pick .label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+}
+
+// The detail header, the source location guesses and the action rows.
+@mixin detail {
+  .detail-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 10px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+  .detail-head h2 {
+    min-width: 0;
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 15px;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+  .where {
+    width: 100%;
+    margin: 0;
+    color: var(--text-2);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+  .directive-where {
+    margin: -4px 0 8px;
+    font-size: 12px;
+  }
+  .directive-where:empty {
+    display: none;
+  }
+  .directive-guess {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-sans);
+  }
+  .likely {
+    display: inline-block;
+    margin-right: 6px;
+    padding: 0 6px;
+    border: 1px solid;
+    border-radius: 99px;
+    @include m.tint(warn);
+    font-family: var(--font-sans);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    line-height: 16px;
+    text-transform: uppercase;
+    vertical-align: 1px;
+  }
+  .guess-text {
+    margin: 0;
+  }
+  .guess-list {
+    margin: 4px 0 0;
+    padding-left: 18px;
+  }
+  .badge {
+    padding: 2px 8px;
+    border-radius: 99px;
+    @include m.tint(accent);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    width: 100%;
+  }
+}
+
+// The Show in Forms button and the facts list.
+@mixin facts {
+  .show-form {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--accent-ink);
+    font-weight: 600;
+  }
+  .show-form:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+  }
+  .facts {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 8px 16px;
+    margin: 0;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+  .facts dt {
+    @include m.label;
+    align-self: center;
+  }
+  .facts dd {
+    min-width: 0;
+    margin: 0;
+    color: var(--text);
+    overflow-wrap: anywhere;
+  }
+}
+
+// The detail blocks: values, chips, flags and injected services.
+@mixin values {
+  .block {
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+  .block:last-child {
+    border-bottom: 0;
+  }
+  h3 {
+    @include m.label;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 0 8px;
+  }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 16px;
+    padding: 0 5px;
+    border-radius: 99px;
+    background: var(--surface-3);
+    color: var(--text-2);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0;
+  }
+  .props,
+  .deps,
+  .chips {
+    display: grid;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .prop,
+  .dep {
+    min-width: 0;
+    padding: 8px 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg);
+  }
+  .prop.changed {
+    outline: 2px solid var(--accent);
+    outline-offset: -1px;
+    animation: value-flash 1s var(--ease) forwards;
+  }
+  @keyframes value-flash {
+    from {
+      outline-color: var(--accent);
+    }
+    to {
+      outline-color: transparent;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .prop.changed {
+      animation: none;
+    }
+  }
+  .signal-link {
+    height: auto;
+    min-height: 0;
+    margin-left: 6px;
+    padding: 0 6px;
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 18px;
+  }
+  .signal-link:focus-visible {
+    @include m.focus-ring(-2px);
+  }
+  .prop-name {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--text-strong);
+    font-size: 12px;
+    font-weight: 600;
+  }
+  pre {
+    max-height: 200px;
+    margin: 0;
+    overflow: auto;
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 10px;
+    border: 1px solid var(--border-strong);
+    border-radius: 99px;
+    color: var(--text);
+    font-size: 12px;
+  }
+  .chip.on {
+    @include m.tint(ok);
+  }
+  .chip-note {
+    color: var(--text-2);
+    font-size: 11px;
+  }
+  .chip.on .chip-note {
+    color: inherit;
+  }
+  .dep {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+  }
+  .token {
+    min-width: 0;
+    color: var(--text-strong);
+    font-size: 12px;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+  .flag {
+    padding: 0 6px;
+    border: 1px solid var(--border-strong);
+    border-radius: 5px;
+    color: var(--text-2);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 400;
+    letter-spacing: 0;
+    line-height: 16px;
+    text-transform: none;
+  }
+  .from {
+    margin-left: auto;
+    color: var(--text-2);
+    font-size: 12px;
+  }
+  .from .mono {
+    color: var(--text);
+  }
+  .from.missing {
+    color: var(--warn);
+  }
+  .empty-line {
+    margin: 0;
+    color: var(--text-2);
+  }
+}
+
+// The loading, empty and no-match states.
+@mixin states {
+  .state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 40px 16px;
+    text-align: center;
+    background: var(--surface);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius);
+  }
+  .state.compact {
+    padding: 24px 12px;
+    border: 0;
+    background: none;
+  }
+  .state-title {
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 14px;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+  .state-hint {
+    max-width: 440px;
+    margin: 0 auto;
+    color: var(--text-2);
+    line-height: 1.5;
+  }
+  .spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--border-strong);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .spinner,
+    .refresh.spinning svg {
+      animation: none;
+    }
+  }
+}
diff --git a/app/src/styles/_injectors.scss b/app/src/styles/_injectors.scss
new file mode 100644
index 00000000..89d85800
--- /dev/null
+++ b/app/src/styles/_injectors.scss
@@ -0,0 +1,379 @@
+// Styles shared by the Injectors page's sections (`app/src/pages/injectors/`), in the order the
+// page had them as one component, so each section looks as it did. Include the groups a section
+// uses in this order: mono, pill, chips, link, dot, detail-head, heading, hint, path, dep-list,
+// dep-main, token, flag, dep-meta, empty-line, state, buttons, state-buttons, state-button-focus,
+// chevron, toggle, hidden.
+@use 'mixins' as m;
+
+@mixin mono {
+  .mono {
+    font-family: var(--font-mono);
+  }
+}
+
+@mixin pill {
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    min-width: 18px;
+    height: 16px;
+    padding: 0 5px;
+    justify-content: center;
+    border-radius: 99px;
+    background: var(--surface-3);
+    color: var(--text-2);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@mixin chips {
+  .chip,
+  .from,
+  .step {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    max-width: 100%;
+    height: 26px;
+    padding: 0 10px;
+    border: 1px solid var(--control-border);
+    border-radius: 99px;
+    background: var(--surface);
+    color: var(--text);
+    font-size: 12px;
+    cursor: pointer;
+    transition:
+      border-color 150ms var(--ease),
+      background-color 150ms var(--ease);
+  }
+  .chip:hover,
+  .from:hover,
+  .step:hover {
+    border-color: var(--accent-line);
+    background: var(--surface-2);
+  }
+  .chip:focus-visible,
+  .from:focus-visible,
+  .step:focus-visible,
+  .link:focus-visible {
+    @include m.focus-ring;
+  }
+}
+
+@mixin link {
+  .link {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--accent);
+    font-size: 13px;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+}
+
+@mixin dot {
+  .dot {
+    flex: none;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+  }
+}
+
+@mixin detail-head {
+  .detail-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 10px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+  .detail-head h2 {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 15px;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin heading {
+  h3 {
+    @include m.label;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 0 8px;
+  }
+}
+
+@mixin hint {
+  .hint {
+    margin: -4px 0 10px;
+    color: var(--text-3);
+    font-size: 12px;
+  }
+}
+
+@mixin path {
+  .path {
+    position: relative;
+    display: grid;
+    gap: 6px;
+    margin: 0;
+    padding: 0 0 0 18px;
+    list-style: none;
+  }
+  .path::before {
+    content: '';
+    position: absolute;
+    top: 13px;
+    bottom: 13px;
+    left: 5px;
+    width: 1px;
+    background: var(--border-strong);
+  }
+  .path li {
+    position: relative;
+    min-width: 0;
+  }
+  .path li::before {
+    content: '';
+    position: absolute;
+    top: 12px;
+    left: -16px;
+    width: 9px;
+    height: 1px;
+    background: var(--border-strong);
+  }
+  .path li.current .step {
+    border-color: var(--accent);
+    background: var(--accent-soft);
+  }
+  .step.null {
+    cursor: default;
+    color: var(--text-2);
+  }
+  .step.null:hover {
+    border-color: var(--border-strong);
+    background: var(--surface);
+  }
+  .hint-inline {
+    color: var(--text-3);
+  }
+  .step-count {
+    color: var(--text-3);
+    font-size: 11px;
+  }
+}
+
+@mixin dep-list {
+  .deps,
+  .providers {
+    display: grid;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .dep,
+  .provider {
+    min-width: 0;
+    padding: 8px 10px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg);
+  }
+  .dep.hit,
+  .provider.hit {
+    border-color: var(--accent-line);
+    box-shadow: 0 0 0 3px var(--accent-soft);
+  }
+}
+
+@mixin dep-main {
+  .dep-main {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+}
+
+@mixin token {
+  .token {
+    min-width: 0;
+    color: var(--text-strong);
+    font-size: 12px;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin flag {
+  .flag {
+    padding: 0 6px;
+    border: 1px solid var(--border-strong);
+    border-radius: 5px;
+    color: var(--text-2);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    line-height: 16px;
+  }
+}
+
+@mixin dep-meta {
+  .dep-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 10px;
+    margin-top: 6px;
+    color: var(--text-3);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin empty-line {
+  .empty-line {
+    margin: 0;
+    color: var(--text-2);
+  }
+}
+
+@mixin state {
+  .state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 40px 16px;
+    text-align: center;
+    background: var(--surface);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius);
+    @include m.enter;
+  }
+  .state.compact {
+    padding: 24px 12px;
+    border: 0;
+  }
+  .state-title {
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .state-hint {
+    max-width: 440px;
+    margin: 0;
+    color: var(--text-2);
+    line-height: 1.5;
+  }
+}
+
+@mixin buttons {
+  button {
+    font: inherit;
+  }
+}
+
+@mixin state-buttons {
+  .state button,
+  .provider-group button {
+    height: 34px;
+    padding: 0 14px;
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    color: var(--text);
+    cursor: pointer;
+  }
+}
+
+@mixin state-button-focus {
+  .state button:focus-visible {
+    @include m.focus-ring;
+  }
+}
+
+@mixin chevron {
+  .refresh svg,
+  .chevron {
+    flex: none;
+    width: 14px;
+    height: 14px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .chevron {
+    transition: transform 150ms var(--ease);
+  }
+  .chevron.open {
+    transform: rotate(90deg);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .chevron {
+      transition: none;
+    }
+  }
+}
+
+@mixin toggle {
+  .orphans-toggle,
+  .provider-group .group-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: var(--control-h);
+    padding: 0 12px;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: var(--text-2);
+    font-size: 12px;
+    text-align: left;
+    cursor: pointer;
+  }
+  .provider-group .group-toggle {
+    width: auto;
+    height: auto;
+    min-height: 0;
+    padding: 2px 4px;
+    margin-left: -4px;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+  }
+  .orphans-toggle:hover,
+  .provider-group .group-toggle:hover {
+    color: var(--text);
+  }
+  .orphans-toggle:focus-visible,
+  .provider-group .group-toggle:focus-visible {
+    @include m.focus-ring(-2px);
+  }
+}
+
+@mixin hidden {
+  .provider-list[hidden],
+  .orphans-body[hidden],
+  .helper-hint[hidden] {
+    display: none;
+  }
+}
diff --git a/app/src/styles/_pipes.scss b/app/src/styles/_pipes.scss
new file mode 100644
index 00000000..4820b7c6
--- /dev/null
+++ b/app/src/styles/_pipes.scss
@@ -0,0 +1,510 @@
+// Styles shared by the Pipes page and its sections (`app/src/pages/pipes/`), in the order the page
+// had them as one component, so each part looks as it did. Include the groups a part uses, in
+// this order: mono, buttons, pipe-list, chips, detail, value, detail-body, notes, section-head,
+// stacks, async-list, lint-list, states, state-text.
+@use 'mixins' as m;
+
+@mixin mono {
+  .mono {
+    font-family: var(--font-mono);
+  }
+}
+
+@mixin buttons {
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: var(--control-h);
+    padding: 0 14px;
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    color: var(--text);
+    font: inherit;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background-color 150ms var(--ease),
+      border-color 150ms var(--ease);
+  }
+  button:hover:not(:disabled) {
+    border-color: var(--accent-line);
+    background: var(--surface-3);
+  }
+  button:focus-visible {
+    @include m.focus-ring;
+  }
+  button:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+}
+
+@mixin pipe-list {
+  .pipe-list {
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding: 6px;
+    list-style: none;
+    @include m.panel;
+    @include m.enter;
+  }
+  .row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 2px 12px;
+    width: 100%;
+    height: auto;
+    padding: 8px 10px;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: none;
+    text-align: left;
+    font-weight: 400;
+    white-space: normal;
+  }
+  .row:hover:not(:disabled) {
+    border-color: transparent;
+    background: var(--surface-2);
+  }
+  .row:focus-visible {
+    @include m.focus-ring(-2px);
+  }
+  .row.selected {
+    background: var(--accent-soft);
+    box-shadow: inset 2px 0 0 var(--accent);
+  }
+  .row-main {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+  }
+  .name {
+    flex: none;
+    color: var(--text-strong);
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .sub {
+    color: var(--text-3);
+    font-size: 12px;
+    @include m.truncate;
+  }
+  .row-meta {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 4px;
+  }
+  .row-file {
+    grid-column: 1 / -1;
+    color: var(--text-3);
+    font-size: 11px;
+    overflow-wrap: anywhere;
+  }
+  .no-source {
+    font-family: var(--font-sans);
+    font-style: italic;
+  }
+  .more {
+    margin-left: 6px;
+    color: var(--text-2);
+  }
+}
+
+@mixin chips {
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 7px;
+    border: 1px solid var(--border-strong);
+    border-radius: 99px;
+    color: var(--text-2);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .chip.impure,
+  .chip.warn {
+    @include m.tint(warn);
+  }
+  .chip.live {
+    @include m.tint(ok);
+  }
+  .chip.hot {
+    @include m.tint(accent);
+    text-transform: none;
+    font-variant-numeric: tabular-nums;
+  }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 16px;
+    padding: 0 5px;
+    border-radius: 99px;
+    background: var(--surface-3);
+    color: var(--text-2);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@mixin detail {
+  .detail-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 10px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+  .detail-head h2 {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 15px;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+    border-radius: 4px;
+  }
+  .detail-head h2:focus {
+    outline: none;
+  }
+  .detail-head h2:focus-visible {
+    @include m.focus-ring;
+  }
+  .block {
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+  .block:last-child {
+    border-bottom: 0;
+  }
+  h3 {
+    @include m.label;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 0 10px;
+  }
+  dl {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 6px 14px;
+    margin: 0;
+  }
+  dt {
+    color: var(--text-3);
+  }
+  dd {
+    min-width: 0;
+    margin: 0;
+    color: var(--text);
+  }
+}
+
+@mixin value {
+  .value {
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin detail-body {
+  .muted {
+    color: var(--text-2);
+  }
+  .sites {
+    display: grid;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--text-2);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+  .calls {
+    margin-left: 6px;
+    color: var(--text-3);
+  }
+  .instance {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+  .instance .component {
+    padding-right: 10px;
+  }
+  .caller {
+    flex-basis: 100%;
+  }
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .component {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 24px;
+    padding: 0 4px 0 10px;
+    border: 1px solid var(--control-border);
+    border-radius: 99px;
+    background: var(--bg);
+    font-size: 12px;
+    transition:
+      border-color 150ms var(--ease),
+      background-color 150ms var(--ease);
+  }
+  button.component {
+    height: 24px;
+    padding: 0 4px 0 10px;
+    border-radius: 99px;
+    background: var(--bg);
+    font-size: 12px;
+    font-weight: 400;
+  }
+  .count {
+    padding: 0 6px;
+    border-radius: 99px;
+    background: var(--surface-3);
+    color: var(--text-2);
+    font-size: 10px;
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+  }
+  .warning {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 8px;
+    margin: 0 0 12px;
+    padding: 8px 10px;
+    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
+    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--warn) 8%, transparent);
+    color: var(--text);
+    line-height: 1.5;
+  }
+}
+
+@mixin notes {
+  .hint {
+    margin: 8px 0 0;
+    color: var(--text-3);
+    font-size: 12px;
+  }
+  .empty-line {
+    margin: 0;
+    color: var(--text-2);
+    line-height: 1.5;
+  }
+  .empty-line.ok {
+    color: var(--ok);
+  }
+}
+
+@mixin section-head {
+  :host(.section) h2 {
+    @include m.label;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 8px;
+  }
+  :host(.section) > .hint {
+    margin: -2px 0 10px;
+  }
+}
+
+@mixin stacks {
+  .async-list,
+  .findings {
+    display: grid;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+@mixin async-list {
+  .async-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+    min-width: 0;
+    padding: 8px 12px;
+    border-radius: var(--radius-sm);
+    @include m.panel;
+    transition:
+      background-color 150ms var(--ease),
+      border-color 150ms var(--ease);
+  }
+  .async-row:hover {
+    border-color: var(--border-strong);
+    background: var(--surface-2);
+  }
+  .component-name {
+    color: var(--text-strong);
+    font-weight: 600;
+  }
+  button.component-name {
+    height: 24px;
+    padding: 0 8px;
+    margin-left: -8px;
+    border-color: transparent;
+    background: none;
+    font-size: 13px;
+  }
+  .latest {
+    flex: 1 1 100%;
+    color: var(--text-2);
+  }
+}
+
+@mixin lint-list {
+  .finding {
+    padding: 10px 12px;
+    border-radius: var(--radius-sm);
+    @include m.panel;
+  }
+  .finding-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+  }
+  .severity {
+    padding: 0 7px;
+    border: 1px solid var(--border-strong);
+    border-radius: 99px;
+    color: var(--text-2);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    line-height: 16px;
+    text-transform: uppercase;
+  }
+  .severity[data-tone='warning'] {
+    @include m.tint(warn);
+  }
+  .severity[data-tone='error'] {
+    @include m.tint(danger);
+  }
+  .rule {
+    color: var(--accent);
+    font-size: 12px;
+  }
+  .where {
+    color: var(--text-3);
+    font-size: 11px;
+    overflow-wrap: anywhere;
+  }
+  button.pipe-link {
+    display: inline;
+    height: auto;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    color: var(--accent);
+    font: inherit;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    white-space: normal;
+  }
+  button.pipe-link:hover:not(:disabled) {
+    border-color: transparent;
+    background: none;
+    color: var(--accent-hover);
+  }
+  button.pipe-link:focus-visible {
+    @include m.focus-ring;
+  }
+  .finding-message {
+    margin: 6px 0 0;
+    color: var(--text);
+    line-height: 1.5;
+  }
+  .finding-fix {
+    margin: 4px 0 0;
+    color: var(--text-2);
+    line-height: 1.5;
+  }
+  .fix-label {
+    @include m.label;
+    margin-right: 4px;
+  }
+}
+
+@mixin states {
+  .state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 40px 16px;
+    text-align: center;
+    background: var(--surface);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius);
+    @include m.enter;
+  }
+  .state.compact {
+    padding: 28px 16px;
+    border: 0;
+    background: none;
+  }
+}
+
+@mixin state-text {
+  .state-title {
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .state-hint {
+    max-width: 440px;
+    margin: 0;
+    color: var(--text-2);
+    line-height: 1.5;
+  }
+  .state button {
+    margin-top: 8px;
+  }
+  .spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--border-strong);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
+}
diff --git a/app/src/styles/_signals.scss b/app/src/styles/_signals.scss
new file mode 100644
index 00000000..dcea5904
--- /dev/null
+++ b/app/src/styles/_signals.scss
@@ -0,0 +1,402 @@
+// Styles shared by the Signals page's sections (`app/src/pages/signals/`), in the order the page
+// had them as one component, so each section looks as it did. Include the groups a section uses,
+// in this order: states, cards (or sep alone), fields, pre, node-list, node-cards, badge-sm, changed-badge,
+// scroll-box, list-heading, rel-label, history, link-button, stack.
+// A rule on a list's own element is written `:host(.nodes)`, which keeps the specificity the
+// `.nodes` rule had on the page.
+@use 'mixins' as m;
+
+@mixin states {
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    text-align: center;
+    padding: 40px 24px;
+    @include m.panel;
+    @include m.enter;
+  }
+  .empty.compact {
+    padding: 24px 16px;
+    border-style: dashed;
+    background: transparent;
+  }
+  .empty-title {
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .hint {
+    max-width: 460px;
+    margin: 0;
+    color: var(--text-2);
+    font-size: 13px;
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+  }
+  .hint code {
+    padding: 1px 5px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text);
+    background: var(--surface-3);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+  }
+  .reset {
+    height: 34px;
+    margin-top: 4px;
+    padding: 0 14px;
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    color: var(--text);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background-color 0.15s var(--ease),
+      border-color 0.15s var(--ease);
+  }
+  .reset:hover {
+    background: var(--surface-3);
+  }
+  .reset:focus-visible {
+    @include m.focus-ring;
+  }
+  .spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--border-strong);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+      border-top-color: var(--border-strong);
+    }
+  }
+}
+
+@mixin sep {
+  .sep {
+    color: var(--border-strong);
+  }
+}
+
+@mixin cards {
+  .node-header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px 8px;
+    min-width: 0;
+  }
+  .kind-badge {
+    flex: none;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10.5px;
+    line-height: 18px;
+    padding: 0 8px;
+    border-radius: 99px;
+    color: var(--kind-ink);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .node-label {
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+  .node-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 6px;
+    min-width: 0;
+    margin-top: 6px;
+    font-size: 12px;
+    color: var(--text-3);
+    font-variant-numeric: tabular-nums;
+  }
+  .node-meta .file {
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    overflow-wrap: anywhere;
+  }
+  @include sep;
+}
+
+@mixin fields {
+  dl {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 8px 16px;
+    margin: 0;
+    font-size: 13px;
+  }
+  dt {
+    @include m.label;
+    padding-top: 2px;
+  }
+  dd {
+    min-width: 0;
+    margin: 0;
+    color: var(--text);
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin pre {
+  pre {
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    line-height: 1.55;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    margin: 0;
+    color: var(--text);
+  }
+}
+
+@mixin node-list {
+  :host(.nodes) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    @include m.enter;
+  }
+  .node-card {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    text-align: left;
+    font: inherit;
+    color: inherit;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 12px 16px;
+    transition:
+      background-color 0.15s var(--ease),
+      border-color 0.15s var(--ease),
+      box-shadow 0.15s var(--ease);
+  }
+  .node-card:hover {
+    background: var(--surface-2);
+    border-color: var(--border-strong);
+  }
+}
+
+@mixin node-cards {
+  :host(.nodes) > li {
+    display: block;
+    min-width: 0;
+    padding: 0;
+  }
+  /* The empty card keeps its centred column inside the list. */
+  :host(.nodes) > li.empty {
+    display: flex;
+    padding: 24px 16px;
+  }
+  button.node-card {
+    cursor: pointer;
+  }
+  .node-card:focus-visible {
+    @include m.focus-ring;
+  }
+  .node-card.selected {
+    background: var(--accent-soft);
+    border-color: var(--accent-line);
+    box-shadow: inset 2px 0 0 var(--accent);
+  }
+  .chevron {
+    flex: none;
+    width: 7px;
+    height: 7px;
+    margin-left: auto;
+    border-right: 1.5px solid var(--text-3);
+    border-bottom: 1.5px solid var(--text-3);
+    transform: translateY(-2px) rotate(45deg);
+    transition:
+      transform 0.2s var(--ease),
+      border-color 0.15s var(--ease);
+  }
+  .node-card:hover .chevron {
+    border-color: var(--text);
+  }
+  .node-card.selected .chevron {
+    border-color: var(--accent);
+    transform: translateY(2px) rotate(-135deg);
+  }
+  .node-value {
+    display: block;
+    margin-top: 8px;
+    padding: 4px 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-2);
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+  }
+  .node-card.selected .node-value {
+    background: color-mix(in srgb, var(--bg) 70%, transparent);
+  }
+}
+
+@mixin badge-sm {
+  .kind-badge.sm {
+    font-size: 10px;
+    line-height: 16px;
+    padding: 0 6px;
+  }
+}
+
+@mixin changed-badge {
+  .changed-badge {
+    flex: none;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 16px;
+    padding: 0 8px;
+    border: 1px solid;
+    border-radius: 99px;
+    font-variant-numeric: tabular-nums;
+  }
+  .changed-badge {
+    @include m.tint(warn);
+  }
+}
+
+@mixin scroll-box {
+  .scroll-box:focus-visible {
+    @include m.focus-ring(-2px);
+  }
+}
+
+@mixin list-heading {
+  .list-heading {
+    @include m.label;
+    margin: 16px 0 8px;
+  }
+}
+
+@mixin rel-label {
+  .rel-label {
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin history {
+  .history {
+    list-style: none;
+    padding: 4px;
+    margin: 0;
+    max-height: 320px;
+    overflow: auto;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+  }
+  .history li {
+    display: block;
+    padding: 8px;
+    border-radius: 6px;
+    transition: background-color 0.15s var(--ease);
+  }
+  .history li + li {
+    border-top: 1px solid var(--border);
+  }
+  .history li:hover {
+    background: var(--surface-3);
+  }
+  .history-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 8px;
+    align-items: center;
+    margin-bottom: 4px;
+    font-size: 11px;
+    color: var(--text-2);
+    font-variant-numeric: tabular-nums;
+  }
+  .history-meta time {
+    font-family: var(--font-mono);
+    color: var(--text);
+  }
+  .source-tag {
+    line-height: 16px;
+    padding: 0 8px;
+    border-radius: 99px;
+    background: var(--surface-3);
+    border: 1px solid var(--border-strong);
+    color: var(--text);
+  }
+  .source-write {
+    color: var(--hue-info-text);
+    background: color-mix(in srgb, var(--hue-info) 12%, transparent);
+    border-color: color-mix(in srgb, var(--hue-info) 30%, transparent);
+  }
+}
+
+@mixin link-button {
+  .link-button {
+    min-height: 28px;
+    padding: 0 8px;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    color: var(--accent-text);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+  }
+  .link-button:hover {
+    background: var(--surface-2);
+  }
+  .link-button:focus-visible {
+    @include m.focus-ring;
+  }
+}
+
+@mixin stack {
+  .stack {
+    margin: 6px 0 0;
+    padding: 0 0 0 18px;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    color: var(--text-2);
+    overflow-wrap: anywhere;
+  }
+  .history li .stack li {
+    padding: 0;
+    border: 0;
+  }
+}
diff --git a/app/src/styles/_store.scss b/app/src/styles/_store.scss
new file mode 100644
index 00000000..0bce9628
--- /dev/null
+++ b/app/src/styles/_store.scss
@@ -0,0 +1,915 @@
+// Styles shared by the Store page's sections (`app/src/pages/store/`), cut from the page's one
+// stylesheet in its order, so each section looks as it did. Include the groups a section uses, in
+// the order of this file. A parameter names an ancestor that is the section's own element, so the
+// section passes `:host` for it.
+@use 'mixins' as m;
+
+@mixin intro {
+  .intro {
+    max-width: 720px;
+    margin: 0;
+    color: var(--text-2);
+    line-height: 1.5;
+  }
+}
+
+@mixin field {
+  input {
+    flex: 1 1 220px;
+    min-width: 0;
+    height: 34px;
+    padding: 0 12px;
+    background: var(--bg);
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font: inherit;
+    font-size: 13px;
+    outline: none;
+    transition:
+      border-color 0.15s var(--ease),
+      box-shadow 0.15s var(--ease);
+  }
+  input::placeholder {
+    color: var(--text-3);
+  }
+  input:focus-visible {
+    @include m.field-focus;
+  }
+}
+
+@mixin base {
+  .section-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 24px;
+  }
+  h2,
+  h4,
+  .sub {
+    @include m.label;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0;
+  }
+  h4 {
+    margin-bottom: 10px;
+  }
+  .spaced {
+    margin-top: 16px;
+  }
+  .sub {
+    margin: 14px 0 8px;
+  }
+  .fact-head,
+  .sub-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+  }
+  .fact-head {
+    margin-bottom: 10px;
+  }
+  .state-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+  .fact-head h4 {
+    margin: 0;
+  }
+  .sub-head {
+    margin: 14px 0 8px;
+  }
+  .sub-head .sub {
+    margin: 0;
+  }
+  .btn.copy {
+    flex: none;
+    height: var(--control-h);
+    padding: 0 10px;
+    font-size: 12px;
+  }
+  .pill {
+    min-width: 20px;
+    padding: 0 7px;
+    border-radius: 99px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    color: var(--text-2);
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0;
+    line-height: 18px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  .empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    text-align: center;
+    padding: 36px 24px;
+    @include m.panel;
+    @include m.enter;
+  }
+  .empty.compact {
+    padding: 24px 16px;
+    border-style: dashed;
+    background: transparent;
+  }
+  .empty-title {
+    margin: 0;
+    color: var(--text-strong);
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .hint {
+    max-width: 520px;
+    margin: 0;
+    color: var(--text-2);
+    line-height: 1.55;
+    overflow-wrap: anywhere;
+  }
+  .hint.small {
+    margin-top: 12px;
+    font-size: 12px;
+  }
+  code {
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .hint code,
+  .refs code {
+    padding: 1px 5px;
+    color: var(--text);
+    background: var(--surface-3);
+    border: 1px solid var(--border);
+    border-radius: 5px;
+  }
+  .muted {
+    margin: 0;
+    color: var(--text-2);
+  }
+  .pad {
+    padding: 20px 12px;
+    text-align: center;
+    line-height: 1.5;
+  }
+  .btn {
+    height: var(--control-h);
+    padding: 0 14px;
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    background: var(--surface-2);
+    color: var(--text);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background-color 0.15s var(--ease),
+      border-color 0.15s var(--ease);
+  }
+  .btn:hover {
+    background: var(--surface-3);
+  }
+  .btn:focus-visible {
+    @include m.focus-ring;
+  }
+  .btn:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+  .btn.primary,
+  .btn.restore {
+    border-color: var(--accent-line);
+    background: var(--accent-soft);
+    color: var(--text-strong);
+  }
+  .btn.restore {
+    margin-top: 14px;
+  }
+}
+
+@mixin lists {
+  .live-layout {
+    display: grid;
+    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+    min-width: 0;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+    @include m.enter;
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .store-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px;
+    border-right: 1px solid var(--border);
+    background: var(--surface-2);
+  }
+  .store-item,
+  .log-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 3px;
+    width: 100%;
+    padding: 8px 10px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s var(--ease);
+  }
+  .store-item:hover,
+  .log-item:hover,
+  .event-item:hover {
+    background: var(--surface-3);
+  }
+  .store-item:focus-visible,
+  .log-item:focus-visible,
+  .event-item:focus-visible {
+    @include m.focus-ring(-2px);
+  }
+  .store-item.selected,
+  .log-item.selected,
+  .event-item.selected {
+    background: var(--accent-soft);
+    box-shadow: inset 2px 0 0 var(--accent);
+  }
+  .store-top {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    max-width: 100%;
+  }
+  .store-name {
+    @include m.truncate;
+    font-family: var(--font-mono);
+    font-weight: 600;
+    color: var(--text-strong);
+  }
+  .store-meta,
+  .log-meta {
+    color: var(--text-2);
+    font-size: 11.5px;
+    font-variant-numeric: tabular-nums;
+  }
+  .dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+}
+
+@mixin detail {
+  .store-detail {
+    display: grid;
+    gap: 16px;
+    min-width: 0;
+    padding: 16px;
+  }
+  .detail-head h3 {
+    margin: 0 0 8px;
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 15px;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    padding: 1px 8px;
+    border: 1px solid var(--border);
+    border-radius: 99px;
+    background: var(--surface-2);
+    color: var(--text-2);
+    font-size: 11.5px;
+    line-height: 18px;
+    overflow-wrap: anywhere;
+  }
+  .chip.mono {
+    font-family: var(--font-mono);
+  }
+  .refs {
+    margin: 10px 0 0;
+    color: var(--text-2);
+    line-height: 1.8;
+  }
+  .facts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 16px;
+    min-width: 0;
+  }
+  .fact {
+    min-width: 0;
+  }
+}
+
+@mixin code {
+  pre {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.55;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    color: var(--text);
+  }
+  .tree,
+  .code {
+    max-height: 360px;
+    overflow: auto;
+    padding: 10px 12px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+  }
+  .code {
+    max-height: 220px;
+  }
+  .tree:focus-visible {
+    @include m.focus-ring;
+  }
+  .kv {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    gap: 6px 14px;
+    margin: 0;
+  }
+  /* The same gap the NgRx entry tabs keep below Time. */
+  .kv.redux-action {
+    margin-top: 10px;
+  }
+  .kv dt {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text-2);
+  }
+  .kv dd {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin methods {
+  .methods {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .methods li {
+    flex-wrap: wrap;
+    row-gap: 2px;
+  }
+  .tag {
+    padding: 0 5px;
+    border-radius: 4px;
+    background: var(--accent-soft);
+    color: var(--text-strong);
+    font-size: 10.5px;
+  }
+  .calls {
+    color: var(--text-3);
+    font-family: var(--font-sans, inherit);
+    font-size: 11px;
+  }
+  .entities {
+    display: grid;
+    gap: 14px;
+  }
+  .entity-group {
+    display: grid;
+    gap: 8px;
+  }
+  .entity-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .entity-count {
+    color: var(--text-2);
+    font-size: 11.5px;
+    font-variant-numeric: tabular-nums;
+  }
+  .entity-ids {
+    margin: 0;
+  }
+  .chip.more {
+    border-style: dashed;
+    color: var(--text-3);
+  }
+}
+
+@mixin events {
+  .events-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-height: 260px;
+    overflow: auto;
+    padding: 6px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    @include m.enter;
+  }
+  .event-item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px 10px;
+    width: 100%;
+    min-width: 0;
+    padding: 7px 10px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s var(--ease);
+  }
+  .event-type {
+    flex: none;
+    font-weight: 600;
+    color: var(--text-strong);
+    font-size: 12.5px;
+  }
+  .event-payload {
+    flex: 1 1 160px;
+    min-width: 0;
+    @include m.truncate;
+    color: var(--text-2);
+  }
+  .event-time {
+    flex: none;
+    margin-left: auto;
+    color: var(--text-3);
+    font-size: 11.5px;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@mixin log {
+  .log {
+    min-width: 0;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+  }
+  .live-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 12px;
+    margin: 0 0 8px;
+  }
+  .log-layout {
+    display: grid;
+    grid-template-columns: min(var(--log-list-size, 300px), 60%) auto minmax(0, 1fr);
+    gap: 16px;
+    min-width: 0;
+  }
+  .log-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-height: 420px;
+    overflow: auto;
+    padding: 2px;
+  }
+  .log-item {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 8px;
+    row-gap: 2px;
+  }
+  .seq {
+    color: var(--text-3);
+    font-size: 11.5px;
+    font-variant-numeric: tabular-nums;
+  }
+  .log-type-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+  .log-type {
+    @include m.truncate;
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    color: var(--text);
+  }
+  .log-meta {
+    grid-column: 2;
+  }
+}
+
+@mixin entry($entry: '.entry') {
+  .entry {
+    min-width: 0;
+    padding: 14px;
+    border: 1px solid var(--accent-line);
+    border-radius: var(--radius-sm);
+    @include m.enter(0.25s);
+  }
+  #{$entry} .entry-heading {
+    margin: 0 0 12px;
+    font-family: var(--font-mono);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+  .diff {
+    display: grid;
+    gap: 4px;
+  }
+  .diff-row {
+    display: grid;
+    grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
+    gap: 8px;
+    align-items: baseline;
+    padding: 5px 8px;
+    border-radius: 6px;
+    background: var(--surface-2);
+  }
+  .op {
+    font-size: 10.5px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-2);
+  }
+  .diff-row.add .op {
+    color: var(--ok);
+  }
+  .diff-row.remove .op {
+    color: var(--danger);
+  }
+  .path {
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+  .values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 6px;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .before {
+    color: var(--text-2);
+    text-decoration: line-through;
+  }
+  .after {
+    color: var(--text);
+  }
+  .arrow {
+    color: var(--text-3);
+  }
+}
+
+@mixin actions {
+  .confirm {
+    margin-top: 14px;
+    padding: 12px;
+    border: 1px solid var(--accent-line);
+    border-radius: var(--radius-sm);
+    background: var(--accent-soft);
+  }
+  .confirm p {
+    margin: 0 0 10px;
+    line-height: 1.5;
+  }
+  .actions,
+  .entry-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .entry-actions {
+    margin-top: 14px;
+  }
+  .entry-actions .btn.restore {
+    margin-top: 0;
+  }
+}
+
+@mixin dispatch {
+  .dispatch {
+    min-width: 0;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border);
+  }
+  .dispatch-form {
+    display: grid;
+    gap: 10px;
+    max-width: 560px;
+  }
+  .dispatch-form label {
+    display: grid;
+    gap: 6px;
+    color: var(--text-2);
+    font-size: 12px;
+    font-weight: 500;
+  }
+  .optional {
+    color: var(--text-3);
+    font-weight: 400;
+  }
+  .dispatch-form input {
+    width: 100%;
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+  }
+  textarea {
+    width: 100%;
+    min-width: 0;
+    padding: 8px 10px;
+    border: 1px solid var(--control-border);
+    border-radius: var(--radius-sm);
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    resize: vertical;
+    transition:
+      border-color 0.15s var(--ease),
+      box-shadow 0.15s var(--ease);
+  }
+  textarea::placeholder {
+    color: var(--text-3);
+  }
+  textarea:focus-visible {
+    @include m.field-focus;
+  }
+  textarea[aria-invalid='true'] {
+    border-color: color-mix(in srgb, var(--danger) 60%, transparent);
+  }
+  .field-error {
+    margin: -4px 0 0;
+    color: var(--danger);
+    font-size: 12px;
+  }
+  .field-error:empty {
+    display: none;
+  }
+}
+
+@mixin history-stats($history: '.history', $stats: '.stats') {
+  .history,
+  .stats {
+    min-width: 0;
+    margin-top: 16px;
+  }
+  #{$history} h4,
+  #{$stats} h4 {
+    margin: 0 0 6px;
+  }
+  #{$history} .actions {
+    margin-top: 8px;
+  }
+  .table-wrap {
+    max-height: 280px;
+    overflow: auto;
+    margin-top: 8px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+  }
+  .table-wrap:focus-visible {
+    @include m.focus-ring(-2px);
+  }
+  #{$stats} table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+  }
+  #{$stats} th,
+  #{$stats} td {
+    padding: 5px 8px;
+    border-bottom: 1px solid var(--border);
+    text-align: left;
+    vertical-align: baseline;
+  }
+  #{$stats} thead th {
+    position: sticky;
+    top: 0;
+    background: var(--surface-2);
+    color: var(--text-2);
+    font-weight: 600;
+  }
+  #{$stats} tbody th {
+    font-weight: 400;
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+  #{$stats} .num {
+    text-align: right;
+    white-space: nowrap;
+  }
+  .mono {
+    font-family: var(--font-mono);
+  }
+  .loop {
+    display: inline-block;
+    margin-left: 6px;
+    padding: 0 5px;
+    border: 1px solid;
+    border-radius: 4px;
+    font-family: var(--font-sans, inherit);
+    font-size: 10.5px;
+    @include m.tint(warn);
+  }
+}
+
+@mixin trace {
+  .trace {
+    display: grid;
+    gap: 2px;
+    margin: 0;
+    padding-left: 18px;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+}
+
+@mixin paused {
+  .paused {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px 14px;
+    margin-bottom: 14px;
+    padding: 10px 12px;
+    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
+    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--warn) 10%, transparent);
+  }
+  .paused p {
+    flex: 1 1 240px;
+    margin: 0;
+    line-height: 1.5;
+  }
+  .paused .hint.small {
+    flex-basis: 100%;
+    margin-top: 0;
+  }
+}
+
+@mixin message {
+  .message:empty {
+    display: none;
+  }
+  .message {
+    margin: 0;
+    color: var(--text-2);
+  }
+}
+
+@mixin source {
+  .kinds {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .kind-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    height: 28px;
+    padding: 0 10px;
+    border: 1px solid var(--control-border);
+    border-radius: 99px;
+    background: var(--surface-2);
+    color: var(--text-2);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      background-color 0.15s var(--ease),
+      border-color 0.15s var(--ease),
+      color 0.15s var(--ease);
+  }
+  .kind-chip:hover {
+    border-color: var(--text-3);
+    background: var(--surface-3);
+    color: var(--text);
+  }
+  .kind-chip.active {
+    border-color: var(--accent-line);
+    background: var(--accent-soft);
+    color: var(--text-strong);
+  }
+  .kind-chip:focus-visible {
+    @include m.focus-ring;
+  }
+  .chip-text {
+    @include m.truncate;
+  }
+  .kind-chip .count {
+    flex: none;
+    min-width: 18px;
+    padding: 0 5px;
+    border-radius: 99px;
+    background: var(--surface-3);
+    color: var(--text-2);
+    font-size: 11px;
+    line-height: 16px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  .nodes {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    @include m.enter;
+  }
+  .node-card {
+    min-width: 0;
+    padding: 12px 16px;
+    @include m.panel;
+    border-radius: var(--radius-sm);
+  }
+  .node-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+    min-width: 0;
+  }
+  .node-label {
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-weight: 500;
+    color: var(--text-strong);
+    overflow-wrap: anywhere;
+  }
+  .node-meta {
+    margin-top: 6px;
+    color: var(--text-3);
+    font-size: 12px;
+  }
+  .file {
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    overflow-wrap: anywhere;
+  }
+  .detail {
+    margin: 6px 0 0;
+    color: var(--text-2);
+    font-size: 12px;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+}
+
+@mixin spinner {
+  .spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--border-strong);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+}
diff --git a/apps/docs/src/content/contributing/development.md b/apps/docs/src/content/contributing/development.md
index 45756c33..2a3935a1 100644
--- a/apps/docs/src/content/contributing/development.md
+++ b/apps/docs/src/content/contributing/development.md
@@ -282,7 +282,7 @@ The panel's devframe client caches the functions listed in `PANEL_CACHED_RPC` in
 2. Import and add it to `app/src/app.ts` (imports array, tabs array, template switch).
 3. Add a card to `app/src/pages/dashboard.ts`.
 
-`pnpm lint` keeps the TypeScript sources in `app/src` and `packages/devtools/src` short with a ratchet (tests are left out): a new file can't go over 1,500 lines, and a file already over it in `lint-baseline.json` can't grow. Split a large page into a folder next to it, as `app/src/pages/network/` does for the SSR & HTTP tab. Each section is a component that attaches to the page's existing `<section>` element, so the DOM stays the same. State the sections share lives in services the page provides, and shared styles are SCSS mixins in `app/src/styles/`, such as `_network.scss`.
+`pnpm lint` keeps the TypeScript sources in `app/src` and `packages/devtools/src` short with a ratchet (tests are left out): a new file can't go over 1,500 lines, and a file already over it in `lint-baseline.json` can't grow. Split a large page into a folder next to it, as `app/src/pages/network/` does for the SSR & HTTP tab. Each section is a component that attaches to the page's existing `<section>` element, so the DOM stays the same. State the sections share lives in services the page provides, and shared styles are SCSS mixins in `app/src/styles/`, such as `_network.scss`. Each component keeps its template and styles in its own files, `templateUrl: './x.html'` and `styleUrl: './x.scss'` next to `x.ts`, not inline.
 
 ### Add an agent tool
 
diff --git a/extension/ui/assets/browser-agent-rpc-KH4HHvHf-DF8dhgzY.js b/extension/ui/assets/browser-agent-rpc-KH4HHvHf-uq6ycX2u.js
similarity index 95%
rename from extension/ui/assets/browser-agent-rpc-KH4HHvHf-DF8dhgzY.js
rename to extension/ui/assets/browser-agent-rpc-KH4HHvHf-uq6ycX2u.js
index 02088227..05714ed2 100644
--- a/extension/ui/assets/browser-agent-rpc-KH4HHvHf-DF8dhgzY.js
+++ b/extension/ui/assets/browser-agent-rpc-KH4HHvHf-uq6ycX2u.js
@@ -1 +1 @@
-import{t as e}from"./index-fAMsQf9b.js";var t=Symbol.for(`devframe:browser-agent-registry`),{tools:n,listeners:r}=globalThis[t]??={tools:new Map,listeners:new Set};function i(){return[...n.values()]}function a(e){return r.add(e),()=>r.delete(e)}var o=`devframe:client-id`,s;function c(t=globalThis.window){try{let n=t?.sessionStorage;if(n){let t=n.getItem(o);return t||(t=e(),n.setItem(o,t)),t}}catch{}return s??=e(),s}function l(){let e=typeof document>`u`?void 0:document;return{url:e?.location?.href??``,title:e?.title??``,visible:!e||e.visibilityState===`visible`,focused:e?.hasFocus()??!0}}function u(e){e.client.register({name:`devframe:agent:invoke-client-tool`,type:`action`,jsonSerializable:!0,handler:async(e,t)=>{let n=i().find(t=>t.id===e);if(!n)throw Error(`[devframe/agent] browser tool "${e}" not found`);return await n.invoke(t)}});let t=!1,n=!1,r=0,o=()=>{t||n||(t=!0,queueMicrotask(async()=>{if(t=!1,n)return;let a=i().map(({invoke:e,...t})=>t);(a.length!==0||r!==0)&&(r=a.length,await e.callOptional(`devframe:agent:sync-client-tools`,c(),a,l()).catch(()=>{}))}))},s=a(o),u=e.events.on(`connection:status`,e=>{e===`connected`&&o()}),d=typeof window>`u`?void 0:window;return d?.addEventListener(`focus`,o),d?.addEventListener(`blur`,o),d?.document.addEventListener(`visibilitychange`,o),o(),()=>{n=!0,s(),u(),d?.removeEventListener(`focus`,o),d?.removeEventListener(`blur`,o),d?.document.removeEventListener(`visibilitychange`,o)}}export{u as setupBrowserAgentRpcBridge};
\ No newline at end of file
+import{t as e}from"./index-xQ_9JX3C.js";var t=Symbol.for(`devframe:browser-agent-registry`),{tools:n,listeners:r}=globalThis[t]??={tools:new Map,listeners:new Set};function i(){return[...n.values()]}function a(e){return r.add(e),()=>r.delete(e)}var o=`devframe:client-id`,s;function c(t=globalThis.window){try{let n=t?.sessionStorage;if(n){let t=n.getItem(o);return t||(t=e(),n.setItem(o,t)),t}}catch{}return s??=e(),s}function l(){let e=typeof document>`u`?void 0:document;return{url:e?.location?.href??``,title:e?.title??``,visible:!e||e.visibilityState===`visible`,focused:e?.hasFocus()??!0}}function u(e){e.client.register({name:`devframe:agent:invoke-client-tool`,type:`action`,jsonSerializable:!0,handler:async(e,t)=>{let n=i().find(t=>t.id===e);if(!n)throw Error(`[devframe/agent] browser tool "${e}" not found`);return await n.invoke(t)}});let t=!1,n=!1,r=0,o=()=>{t||n||(t=!0,queueMicrotask(async()=>{if(t=!1,n)return;let a=i().map(({invoke:e,...t})=>t);(a.length!==0||r!==0)&&(r=a.length,await e.callOptional(`devframe:agent:sync-client-tools`,c(),a,l()).catch(()=>{}))}))},s=a(o),u=e.events.on(`connection:status`,e=>{e===`connected`&&o()}),d=typeof window>`u`?void 0:window;return d?.addEventListener(`focus`,o),d?.addEventListener(`blur`,o),d?.document.addEventListener(`visibilitychange`,o),o(),()=>{n=!0,s(),u(),d?.removeEventListener(`focus`,o),d?.removeEventListener(`blur`,o),d?.document.removeEventListener(`visibilitychange`,o)}}export{u as setupBrowserAgentRpcBridge};
\ No newline at end of file
diff --git a/extension/ui/assets/index-fAMsQf9b.js b/extension/ui/assets/index-fAMsQf9b.js
deleted file mode 100644
index 5ade7d63..00000000
--- a/extension/ui/assets/index-fAMsQf9b.js
+++ /dev/null
@@ -1,30660 +0,0 @@
-(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),t.credentials=e.crossOrigin===`use-credentials`?`include`:e.crossOrigin===`anonymous`?`omit`:`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,i=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,a=(e,a)=>{for(var o in a||={})n.call(a,o)&&i(e,o,a[o]);if(t)for(var o of t(a))r.call(a,o)&&i(e,o,a[o]);return e},o=(e,t,n)=>(i(e,typeof t==`symbol`?t:t+``,n),n),s=globalThis;function c(e){let t=s.__Zone_symbol_prefix;return(typeof t==`string`?t:`__zone_symbol__`)+e}function l(){let e=s.performance;function t(t){e&&e.mark&&e.mark(t)}function n(t,n){e&&e.measure&&e.measure(t,n)}t(`Zone`);let r=class e{constructor(e,t){o(this,`_parent`),o(this,`_name`),o(this,`_properties`),o(this,`_zoneDelegate`),this._parent=e,this._name=t?t.name||`unnamed`:`<root>`,this._properties=t&&t.properties||{},this._zoneDelegate=new l(this,this._parent&&this._parent._zoneDelegate,t)}static assertZonePatched(){if(s.Promise!==me.ZoneAwarePromise)throw Error("Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.\nMost likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)")}static get root(){let t=e.current;for(;t.parent;)t=t.parent;return t}static get current(){return ge.zone}static get currentTask(){return _e}static __load_patch(r,i,a=!1){if(Object.hasOwn(me,r)){let e=s[c(`forceDuplicateZoneCheck`)]===!0;if(!a&&e)throw Error(`Already loaded patch: `+r)}else if(!s[`__Zone_disable_`+r]){let a=`Zone:`+r;t(a),me[r]=i(s,e,he),n(a,a)}}get parent(){return this._parent}get name(){return this._name}get(e){let t=this.getZoneWith(e);if(t)return t._properties[e]}getZoneWith(e){let t=this;for(;t;){if(Object.hasOwn(t._properties,e))return t;t=t._parent}return null}fork(e){if(!e)throw Error(`ZoneSpec required!`);return this._zoneDelegate.fork(this,e)}wrap(e,t){if(typeof e!=`function`)throw Error(`Expecting function got: `+e);let n=this._zoneDelegate.intercept(this,e,t),r=this;return function(){return r.runGuarded(n,this,arguments,t)}}run(e,t,n,r){ge={parent:ge,zone:this};try{return this._zoneDelegate.invoke(this,e,t,n,r)}finally{ge=ge.parent}}runGuarded(e,t=null,n,r){ge={parent:ge,zone:this};try{try{return this._zoneDelegate.invoke(this,e,t,n,r)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{ge=ge.parent}}runTask(e,t,n){if(e.zone!=this)throw Error(`A task can only be run in the zone of creation! (Creation: `+(e.zone||ie).name+`; Execution: `+this.name+`)`);let r=e,{type:i,data:{isPeriodic:a=!1,isRefreshable:o=!1}={}}=e;if(e.state===ae&&(i===pe||i===fe))return;let s=e.state!=ce;s&&r._transitionTo(ce,se);let c=_e;_e=r,ge={parent:ge,zone:this};try{i==fe&&e.data&&!a&&!o&&(e.cancelFn=void 0);try{return this._zoneDelegate.invokeTask(this,r,t,n)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{let t=e.state;if(t!==ae&&t!==ue){if(i==pe||a||o&&t===oe)s&&r._transitionTo(se,ce,oe);else{let e=r._zoneDelegates;this._updateTaskCount(r,-1),s&&r._transitionTo(ae,ce,ae),o&&(r._zoneDelegates=e)}}ge=ge.parent,_e=c}}scheduleTask(e){if(e.zone&&e.zone!==this){let t=this;for(;t;){if(t===e.zone)throw Error(`can not reschedule task to ${this.name} which is descendants of the original zone ${e.zone.name}`);t=t.parent}}e._transitionTo(oe,ae);let t=[];e._zoneDelegates=t,e._zone=this;try{e=this._zoneDelegate.scheduleTask(this,e)}catch(t){throw e._transitionTo(ue,oe,ae),this._zoneDelegate.handleError(this,t),t}return e._zoneDelegates===t&&this._updateTaskCount(e,1),e.state==oe&&e._transitionTo(se,oe),e}scheduleMicroTask(e,t,n,r){return this.scheduleTask(new u(de,e,t,n,r,void 0))}scheduleMacroTask(e,t,n,r,i){return this.scheduleTask(new u(fe,e,t,n,r,i))}scheduleEventTask(e,t,n,r,i){return this.scheduleTask(new u(pe,e,t,n,r,i))}cancelTask(e){if(e.zone!=this)throw Error(`A task can only be cancelled in the zone of creation! (Creation: `+(e.zone||ie).name+`; Execution: `+this.name+`)`);if(e.state===se||e.state===ce){e._transitionTo(le,se,ce);try{this._zoneDelegate.cancelTask(this,e)}catch(t){throw e._transitionTo(ue,le),this._zoneDelegate.handleError(this,t),t}return this._updateTaskCount(e,-1),e._transitionTo(ae,le),e.runCount=-1,e}}_updateTaskCount(e,t){let n=e._zoneDelegates;t==-1&&(e._zoneDelegates=null);for(let r=0;r<n.length;r++)n[r]._updateTaskCount(e.type,t)}};o(r,`__symbol__`,c);let i=r,a={name:``,onHasTask:(e,t,n,r)=>e.hasTask(n,r),onScheduleTask:(e,t,n,r)=>e.scheduleTask(n,r),onInvokeTask:(e,t,n,r,i,a)=>e.invokeTask(n,r,i,a),onCancelTask:(e,t,n,r)=>e.cancelTask(n,r)};class l{constructor(e,t,n){o(this,`_zone`),o(this,`_taskCounts`,{microTask:0,macroTask:0,eventTask:0}),o(this,`_forkDlgt`),o(this,`_forkZS`),o(this,`_forkCurrZone`),o(this,`_interceptDlgt`),o(this,`_interceptZS`),o(this,`_interceptCurrZone`),o(this,`_invokeDlgt`),o(this,`_invokeZS`),o(this,`_invokeCurrZone`),o(this,`_handleErrorDlgt`),o(this,`_handleErrorZS`),o(this,`_handleErrorCurrZone`),o(this,`_scheduleTaskDlgt`),o(this,`_scheduleTaskZS`),o(this,`_scheduleTaskCurrZone`),o(this,`_invokeTaskDlgt`),o(this,`_invokeTaskZS`),o(this,`_invokeTaskCurrZone`),o(this,`_cancelTaskDlgt`),o(this,`_cancelTaskZS`),o(this,`_cancelTaskCurrZone`),o(this,`_hasTaskDlgt`),o(this,`_hasTaskDlgtOwner`),o(this,`_hasTaskZS`),o(this,`_hasTaskCurrZone`),this._zone=e,this._forkZS=n&&(n&&n.onFork?n:t._forkZS),this._forkDlgt=n&&(n.onFork?t:t._forkDlgt),this._forkCurrZone=n&&(n.onFork?this._zone:t._forkCurrZone),this._interceptZS=n&&(n.onIntercept?n:t._interceptZS),this._interceptDlgt=n&&(n.onIntercept?t:t._interceptDlgt),this._interceptCurrZone=n&&(n.onIntercept?this._zone:t._interceptCurrZone),this._invokeZS=n&&(n.onInvoke?n:t._invokeZS),this._invokeDlgt=n&&(n.onInvoke?t:t._invokeDlgt),this._invokeCurrZone=n&&(n.onInvoke?this._zone:t._invokeCurrZone),this._handleErrorZS=n&&(n.onHandleError?n:t._handleErrorZS),this._handleErrorDlgt=n&&(n.onHandleError?t:t._handleErrorDlgt),this._handleErrorCurrZone=n&&(n.onHandleError?this._zone:t._handleErrorCurrZone),this._scheduleTaskZS=n&&(n.onScheduleTask?n:t._scheduleTaskZS),this._scheduleTaskDlgt=n&&(n.onScheduleTask?t:t._scheduleTaskDlgt),this._scheduleTaskCurrZone=n&&(n.onScheduleTask?this._zone:t._scheduleTaskCurrZone),this._invokeTaskZS=n&&(n.onInvokeTask?n:t._invokeTaskZS),this._invokeTaskDlgt=n&&(n.onInvokeTask?t:t._invokeTaskDlgt),this._invokeTaskCurrZone=n&&(n.onInvokeTask?this._zone:t._invokeTaskCurrZone),this._cancelTaskZS=n&&(n.onCancelTask?n:t._cancelTaskZS),this._cancelTaskDlgt=n&&(n.onCancelTask?t:t._cancelTaskDlgt),this._cancelTaskCurrZone=n&&(n.onCancelTask?this._zone:t._cancelTaskCurrZone),this._hasTaskZS=null,this._hasTaskDlgt=null,this._hasTaskDlgtOwner=null,this._hasTaskCurrZone=null;let r=n&&n.onHasTask,i=t&&t._hasTaskZS;(r||i)&&(this._hasTaskZS=r?n:a,this._hasTaskDlgt=t,this._hasTaskDlgtOwner=this,this._hasTaskCurrZone=this._zone,n.onScheduleTask||(this._scheduleTaskZS=a,this._scheduleTaskDlgt=t,this._scheduleTaskCurrZone=this._zone),n.onInvokeTask||(this._invokeTaskZS=a,this._invokeTaskDlgt=t,this._invokeTaskCurrZone=this._zone),n.onCancelTask||(this._cancelTaskZS=a,this._cancelTaskDlgt=t,this._cancelTaskCurrZone=this._zone))}get zone(){return this._zone}fork(e,t){return this._forkZS?this._forkZS.onFork(this._forkDlgt,this.zone,e,t):new i(e,t)}intercept(e,t,n){return this._interceptZS?this._interceptZS.onIntercept(this._interceptDlgt,this._interceptCurrZone,e,t,n):t}invoke(e,t,n,r,i){return this._invokeZS?this._invokeZS.onInvoke(this._invokeDlgt,this._invokeCurrZone,e,t,n,r,i):t.apply(n,r)}handleError(e,t){return!this._handleErrorZS||this._handleErrorZS.onHandleError(this._handleErrorDlgt,this._handleErrorCurrZone,e,t)}scheduleTask(e,t){let n=t;if(this._scheduleTaskZS)this._hasTaskZS&&n._zoneDelegates.push(this._hasTaskDlgtOwner),n=this._scheduleTaskZS.onScheduleTask(this._scheduleTaskDlgt,this._scheduleTaskCurrZone,e,t),n||=t;else if(t.scheduleFn)t.scheduleFn(t);else if(t.type==de)ne(t);else throw Error(`Task is missing scheduleFn.`);return n}invokeTask(e,t,n,r){return this._invokeTaskZS?this._invokeTaskZS.onInvokeTask(this._invokeTaskDlgt,this._invokeTaskCurrZone,e,t,n,r):t.callback.apply(n,r)}cancelTask(e,t){let n;if(this._cancelTaskZS)n=this._cancelTaskZS.onCancelTask(this._cancelTaskDlgt,this._cancelTaskCurrZone,e,t);else{if(!t.cancelFn)throw Error(`Task is not cancelable`);n=t.cancelFn(t)}return n}hasTask(e,t){try{this._hasTaskZS&&this._hasTaskZS.onHasTask(this._hasTaskDlgt,this._hasTaskCurrZone,e,t)}catch(t){this.handleError(e,t)}}_updateTaskCount(e,t){let n=this._taskCounts,r=n[e],i=n[e]=r+t;if(i<0)throw Error(`More tasks executed then were scheduled.`);if(r==0||i==0){let t={microTask:n.microTask>0,macroTask:n.macroTask>0,eventTask:n.eventTask>0,change:e};this.hasTask(this._zone,t)}}}class u{constructor(e,t,n,r,i,a){if(o(this,`type`),o(this,`source`),o(this,`invoke`),o(this,`callback`),o(this,`data`),o(this,`scheduleFn`),o(this,`cancelFn`),o(this,`_zone`,null),o(this,`runCount`,0),o(this,`_zoneDelegates`,null),o(this,`_state`,`notScheduled`),this.type=e,this.source=t,this.data=r,this.scheduleFn=i,this.cancelFn=a,!n)throw Error(`callback is not defined`);this.callback=n;let c=this;this.invoke=e===pe&&r&&r.useG?u.invokeTask:function(){return u.invokeTask.call(s,c,this,arguments)}}static invokeTask(e,t,n){e||=this,ve++;try{return e.runCount++,e.zone.runTask(e,t,n)}finally{try{ve===1&&!s[m]&&re()}finally{ve--}}}get zone(){return this._zone}get state(){return this._state}cancelScheduleRequest(){this._transitionTo(ae,oe)}_transitionTo(e,t,n){if(this._state===t||this._state===n)this._state=e,e==ae&&(this._zoneDelegates=null);else throw Error(`${this.type} '${this.source}': can not transition to '${e}', expecting state '${t}'${n?` or '`+n+`'`:``}, was '${this._state}'.`)}toString(){return this.data&&this.data.handleId!==void 0?this.data.handleId.toString():Object.prototype.toString.call(this)}toJSON(){return{type:this.type,state:this.state,source:this.source,zone:this.zone.name,runCount:this.runCount}}}let d=c(`setTimeout`),f=c(`Promise`),p=c(`then`),m=c(`enable_native_microtask_draining`),ee=[],h=!1,g;function te(e){!g&&s[f]&&(g=s[f].resolve(0)),g?(g[p]??g.then).call(g,e):s[d](e,0)}function ne(e){let t=s[m],n=t&&ee.length===0&&!h,r=!t&&ve===0&&ee.length===0;(n||r)&&te(re),e&&ee.push(e)}function re(){if(!h){h=!0;try{for(;ee.length;){let e=ee;ee=[];for(let t of e)try{t.zone.runTask(t,null,null)}catch(e){he.onUnhandledError(e)}}}finally{if(s[m])h=!1,he.microtaskDrainDone();else try{he.microtaskDrainDone()}finally{h=!1}}}}let ie={name:`NO ZONE`},ae=`notScheduled`,oe=`scheduling`,se=`scheduled`,ce=`running`,le=`canceling`,ue=`unknown`,de=`microTask`,fe=`macroTask`,pe=`eventTask`,me=Object.create(null),he={symbol:c,currentZoneFrame:()=>ge,onUnhandledError:ye,microtaskDrainDone:ye,scheduleMicroTask:ne,showUncaughtError:()=>!i[c(`ignoreConsoleErrorUncaughtError`)],patchEventTarget:()=>[],patchOnProperties:ye,patchMethod:()=>ye,bindArguments:()=>[],patchThen:()=>ye,patchMacroTask:()=>ye,patchEventPrototype:()=>ye,getGlobalObjects:()=>void 0,ObjectDefineProperty:()=>ye,ObjectGetOwnPropertyDescriptor:()=>void 0,ObjectCreate:()=>void 0,ArraySlice:()=>[],patchClass:()=>ye,wrapWithCurrentZone:()=>ye,filterProperties:()=>[],attachOriginToPatched:()=>ye,_redefineProperty:()=>ye,patchCallbacks:()=>ye,nativeScheduleMicroTask:te},ge={parent:null,zone:new i(null,null)},_e=null,ve=0;function ye(){}return n(`Zone`,`Zone`),i}function u(){let e=globalThis,t=e[c(`forceDuplicateZoneCheck`)]===!0;if(e.Zone&&(t||typeof e.Zone.__symbol__!=`function`))throw Error(`Zone already loaded.`);return e.Zone??=l(),e.Zone}var d=Object.getOwnPropertyDescriptor,f=Object.defineProperty,p=Object.getPrototypeOf,m=Object.create,ee=Array.prototype.slice,h=`addEventListener`,g=`removeEventListener`,te=c(h),ne=c(g),re=`true`,ie=`false`,ae=c(``);function oe(e,t){return Zone.current.wrap(e,t)}function se(e,t,n,r,i){return Zone.current.scheduleMacroTask(e,t,n,r,i)}var ce=c,le=typeof window<`u`,ue=le?window:void 0,de=le&&ue||globalThis,fe=`removeAttribute`;function pe(e,t){for(let n=e.length-1;n>=0;n--)typeof e[n]==`function`&&(e[n]=oe(e[n],t+`_`+n));return e}function me(e,t){let n=e.constructor.name;for(let r=0;r<t.length;r++){let i=t[r],a=e[i];if(a){if(!he(d(e,i)))continue;e[i]=(e=>{let t=function(){return e.apply(this,pe(arguments,n+`.`+i))};return ke(t,e),t})(a)}}}function he(e){return e?e.writable===!1?!1:typeof e.get!=`function`||e.set!==void 0:!0}var ge=typeof WorkerGlobalScope<`u`&&self instanceof WorkerGlobalScope,_e=!(`nw`in de)&&de.process!==void 0&&de.process.toString()===`[object process]`,ve=!_e&&!ge&&!!(le&&ue.HTMLElement),ye=de.process!==void 0&&de.process.toString()===`[object process]`&&!ge&&!!(le&&ue.HTMLElement),be=Object.create(null),xe=ce(`enable_beforeunload`),Se=function(e){if(e||=de.event,!e)return;let t=be[e.type];t||=be[e.type]=ce(`ON_PROPERTY`+e.type);let n=this||e.target||de,r=n[t],i;if(ve&&n===ue&&e.type===`error`){let t=e;i=r&&r.call(this,t.message,t.filename,t.lineno,t.colno,t.error),i===!0&&e.preventDefault()}else i=r&&r.apply(this,arguments),e.type===`beforeunload`&&de[xe]&&typeof i==`string`?e.returnValue=i:i!=null&&!i&&e.preventDefault();return i};function Ce(e,t,n){let r=d(e,t);if(!r&&n&&d(n,t)&&(r={enumerable:!0,configurable:!0}),!r||!r.configurable)return;let i=ce(`on`+t+`patched`);if(Object.hasOwn(e,i)&&e[i])return;delete r.writable,delete r.value;let a=r.get,o=r.set,s=t.slice(2),c=be[s];c||=be[s]=ce(`ON_PROPERTY`+s),r.set=function(t){let n=this;!n&&e===de&&(n=de),n&&(typeof n[c]==`function`&&n.removeEventListener(s,Se),o?.call(n,null),n[c]=t,typeof t==`function`&&n.addEventListener(s,Se,!1))},r.get=function(){let n=this;if(!n&&e===de&&(n=de),!n)return null;let i=n[c];if(i)return i;if(a){let e=a.call(this);if(e)return r.set.call(this,e),typeof n[fe]==`function`&&n.removeAttribute(t),e}return null},f(e,t,r),e[i]=!0}function we(e,t,n){if(t)for(let r=0;r<t.length;r++)Ce(e,`on`+t[r],n);else{let t=[];for(let n in e)n.slice(0,2)==`on`&&t.push(n);for(let r=0;r<t.length;r++)Ce(e,t[r],n)}}var Te=ce(`originalInstance`);function Ee(e){let t=de[e];if(!t)return;de[ce(e)]=t,de[e]=function(){let n=pe(arguments,e);switch(n.length){case 0:this[Te]=new t;break;case 1:this[Te]=new t(n[0]);break;case 2:this[Te]=new t(n[0],n[1]);break;case 3:this[Te]=new t(n[0],n[1],n[2]);break;case 4:this[Te]=new t(n[0],n[1],n[2],n[3]);break;default:throw Error(`Arg list too long.`)}},ke(de[e],t);let n=new t(function(){}),r;for(r in n)(e!==`XMLHttpRequest`||r!==`responseBlob`)&&(function(t){typeof n[t]==`function`?de[e].prototype[t]=function(){return this[Te][t].apply(this[Te],arguments)}:f(de[e].prototype,t,{set:function(n){typeof n==`function`?(this[Te][t]=oe(n,e+`.`+t),ke(this[Te][t],n)):this[Te][t]=n},get:function(){return this[Te][t]}})})(r);for(r in t)r!==`prototype`&&Object.hasOwn(t,r)&&(de[e][r]=t[r])}function De(e,t,n){let r=e;for(;r&&!Object.hasOwn(r,t);)r=p(r);!r&&e[t]&&(r=e);let i=ce(t),a=null;if(r&&(!(a=r[i])||!Object.hasOwn(r,i))&&(a=r[i]=r[t],he(r&&d(r,t)))){let e=n(a,i,t);r[t]=function(){return e(this,arguments)},ke(r[t],a)}return a}function Oe(e,t,n){let r=null;function i(e){let t=e.data;return t.args[t.cbIdx]=function(){e.invoke.apply(this,arguments)},r.apply(t.target,t.args),e}r=De(e,t,e=>function(t,r){let a=n(t,r);return a.cbIdx>=0&&typeof r[a.cbIdx]==`function`?se(a.name,r[a.cbIdx],a,i):e.apply(t,r)})}function ke(e,t){e[ce(`OriginalDelegate`)]=t}function Ae(e){return typeof e==`function`}function je(e){return typeof e==`number`}var Me={useG:!0},Ne=Object.create(null),Pe={},Fe=RegExp(`^`+ae+`(\\w+)(true|false)$`),Ie=ce(`propagationStopped`),Le=[`capture`,`once`,`passive`,`signal`];function Re(e,t){let n=(t?t(e):e)+ie,r=(t?t(e):e)+re,i=ae+n,a=ae+r;Ne[e]={[ie]:i,[re]:a}}function ze(e,t,n,r){let i=r&&r.add||h,o=r&&r.rm||g,s=r&&r.listeners||`eventListeners`,c=r&&r.rmAll||`removeAllListeners`,l=ce(i),u=`.`+i+`:`,d=function(e,t,n){if(e.isRemoved)return;let r=e.callback;typeof r==`object`&&r.handleEvent&&(e.callback=e=>r.handleEvent(e),e.originalDelegate=r);let i;try{e.invoke(e,t,[n])}catch(e){i=e}let a=e.options;if(a&&typeof a==`object`&&a.once){let r=e.originalDelegate?e.originalDelegate:e.callback;t[o].call(t,n.type,r,a)}return i};function f(n,r,i){if(r||=e.event,!r)return;let a=n||r.target||e,o=a[Ne[r.type][i?re:ie]];if(o){let e=[];if(o.length===1){let t=d(o[0],a,r);t&&e.push(t)}else{let t=o.slice();for(let n=0;n<t.length&&!(r&&r[Ie]===!0);n++){let i=d(t[n],a,r);i&&e.push(i)}}if(e.length===1)throw e[0];for(let n=0;n<e.length;n++){let r=e[n];t.nativeScheduleMicroTask(()=>{throw r})}}}let m=function(e){return f(this,e,!1)},ee=function(e){return f(this,e,!0)};function te(t,n){if(!t)return!1;let r=!0;n&&n.useG!==void 0&&(r=n.useG);let d=n&&n.vh,f=!0;n&&n.chkDup!==void 0&&(f=n.chkDup);let h=!1;n&&n.rt!==void 0&&(h=n.rt);let g=t;for(;g&&!Object.hasOwn(g,i);)g=p(g);if(!g&&t[i]&&(g=t),!g||g[l])return!1;let te=n&&n.eventNameToString,ne={},oe=g[l]=g[i],se=g[ce(o)]=g[o],le=g[ce(s)]=g[s],ue=g[ce(c)]=g[c],de;n&&n.prepend&&(de=g[ce(n.prepend)]=g[n.prepend]);function fe(e,t){return t?typeof e==`boolean`?{capture:e,passive:!0}:e?(typeof e==`object`&&e.passive!==!1&&(e.passive=!0),e):{passive:!0}:e}let pe=function(e){if(!ne.isExisting)return oe.call(ne.target,ne.eventName,ne.capture?ee:m,ne.options)},me=function(e){if(!e.isRemoved){let t=Ne[e.eventName],n;t&&(n=t[e.capture?re:ie]);let r=n&&e.target[n];if(r){for(let t=0;t<r.length;t++)if(r[t]===e){r.splice(t,1),e.isRemoved=!0,e.removeAbortListener&&=(e.removeAbortListener(),null),r.length===0&&(e.allRemoved=!0,e.target[n]=null);break}}}if(e.allRemoved)return se.call(e.target,e.eventName,e.capture?ee:m,e.options)},he=function(e){return oe.call(ne.target,ne.eventName,e.invoke,ne.options)},ge=function(e){return de.call(ne.target,ne.eventName,e.invoke,ne.options)},ve=function(e){return se.call(e.target,e.eventName,e.invoke,e.options)},ye=r?pe:he,be=r?me:ve,xe=n?.diff||function(e,t){let n=typeof t;return n===`function`&&e.callback===t||n===`object`&&e.originalDelegate===t},Se=Zone[ce(`UNPATCHED_EVENTS`)],Ce=e[ce(`PASSIVE_EVENTS`)];function we(e){if(typeof e!=`object`||!e)return e;let t=a({},e);for(let n of Le)!Object.hasOwn(t,n)&&n in e&&(t[n]=e[n]);return t}let Te=function(t,i,a,o,s=!1,c=!1){return function(){let l=this||e,u=arguments[0];n&&n.transferEventName&&(u=n.transferEventName(u));let p=arguments[1];if(!p||_e&&u===`uncaughtException`)return t.apply(this,arguments);let m=!1;if(typeof p!=`function`){if(!p.handleEvent)return t.apply(this,arguments);m=!0}if(d&&!d(t,p,l,arguments))return;let ee=!!Ce&&Ce.indexOf(u)!==-1,h=fe(we(arguments[2]),ee),g=h?.signal;if(g?.aborted)return;if(Se){for(let e=0;e<Se.length;e++)if(u===Se[e])return ee?t.call(l,u,p,h):t.apply(this,arguments)}let ae=h?typeof h==`boolean`||h.capture:!1,oe=h&&typeof h==`object`?h.once:!1,se=Zone.current,ce=Ne[u];ce||=(Re(u,te),Ne[u]);let le=ce[ae?re:ie],ue=l[le],de=!1;if(ue){if(de=!0,f){for(let e=0;e<ue.length;e++)if(xe(ue[e],p))return}}else ue=l[le]=[];let pe,me=l.constructor.name,he=Pe[me];he&&(pe=he[u]),pe||=me+i+(te?te(u):u),ne.options=h,oe&&(ne.options.once=!1),ne.target=l,ne.capture=ae,ne.eventName=u,ne.isExisting=de;let ge=r?Me:void 0;ge&&(ge.taskData=ne),g&&(ne.options.signal=void 0);let ve=se.scheduleEventTask(pe,p,ge,a,o);if(g){ne.options.signal=g;let e=()=>ve.zone.cancelTask(ve);t.call(g,`abort`,e,{once:!0}),ve.removeAbortListener=()=>g.removeEventListener(`abort`,e)}if(ne.target=null,ge&&(ge.taskData=null),oe&&(ne.options.once=!0),typeof ve.options!=`boolean`&&(ve.options=h),ve.target=l,ve.capture=ae,ve.eventName=u,m&&(ve.originalDelegate=p),c?ue.unshift(ve):ue.push(ve),s)return l}};return g[i]=Te(oe,u,ye,be,h),de&&(g.prependListener=Te(de,`.prependListener:`,ge,be,h,!0)),g[o]=function(){let t=this||e,r=arguments[0];n&&n.transferEventName&&(r=n.transferEventName(r));let i=arguments[2],a=i?typeof i==`boolean`||i.capture:!1,o=arguments[1];if(!o)return se.apply(this,arguments);if(d&&!d(se,o,t,arguments))return;let s=Ne[r],c;s&&(c=s[a?re:ie]);let l=c&&t[c];if(l)for(let e=0;e<l.length;e++){let n=l[e];if(xe(n,o)){if(l.splice(e,1),n.isRemoved=!0,l.length===0&&(n.allRemoved=!0,t[c]=null,!a&&typeof r==`string`)){let e=ae+`ON_PROPERTY`+r;t[e]=null}return n.zone.cancelTask(n),h?t:void 0}}return se.apply(this,arguments)},g[s]=function(){let t=this||e,r=arguments[0];n&&n.transferEventName&&(r=n.transferEventName(r));let i=[],a=Be(t,te?te(r):r);for(let e=0;e<a.length;e++){let t=a[e],n=t.originalDelegate?t.originalDelegate:t.callback;i.push(n)}return i},g[c]=function(){let t=this||e,r=arguments[0];if(r){n&&n.transferEventName&&(r=n.transferEventName(r));let e=Ne[r];if(e){let n=e[ie],i=e[re],a=t[n],s=t[i];if(a){let e=a.slice();for(let t=0;t<e.length;t++){let n=e[t],i=n.originalDelegate?n.originalDelegate:n.callback;this[o].call(this,r,i,n.options)}}if(s){let e=s.slice();for(let t=0;t<e.length;t++){let n=e[t],i=n.originalDelegate?n.originalDelegate:n.callback;this[o].call(this,r,i,n.options)}}}}else{let e=Object.keys(t);for(let t=0;t<e.length;t++){let n=e[t],r=Fe.exec(n),i=r&&r[1];i&&i!==`removeListener`&&this[c].call(this,i)}this[c].call(this,`removeListener`)}if(h)return this},ke(g[i],oe),ke(g[o],se),ue&&ke(g[c],ue),le&&ke(g[s],le),!0}let ne=[];for(let e=0;e<n.length;e++)ne[e]=te(n[e],r);return ne}function Be(e,t){if(!t){let n=[];for(let r in e){let i=Fe.exec(r),a=i&&i[1];if(a&&(!t||a===t)){let t=e[r];if(t)for(let e=0;e<t.length;e++)n.push(t[e])}}return n}let n=Ne[t];n||=(Re(t),Ne[t]);let r=e[n[ie]],i=e[n[re]];return r?i?r.concat(i):r.slice():i?i.slice():[]}function Ve(e,t){let n=e.Event;n&&n.prototype&&t.patchMethod(n.prototype,`stopImmediatePropagation`,e=>function(t,n){t[Ie]=!0,e&&e.apply(t,n)})}function He(e,t){t.patchMethod(e,`queueMicrotask`,e=>function(e,t){Zone.current.scheduleMicroTask(`queueMicrotask`,t[0])})}var Ue=ce(`zoneTask`);function We(e,t,n,r){let i=null,a=null;t+=r,n+=r;let o={};function s(t){let n=t.data;n.args[0]=function(){return t.invoke.apply(this,arguments)};let r=i.apply(e,n.args);return je(r)?n.handleId=r:(n.handle=r,n.isRefreshable=Ae(r?.refresh)),t}function c(t){let{handle:n,handleId:r}=t.data;return a.call(e,n??r)}i=De(e,t,n=>function(i,a){if(Ae(a[0])){let e={isRefreshable:!1,isPeriodic:r===`Interval`,delay:r===`Timeout`||r===`Interval`?a[1]||0:void 0,args:a},n=a[0];a[0]=function(){try{return n.apply(this,arguments)}finally{let{handle:t,handleId:n,isPeriodic:r,isRefreshable:i}=e;!r&&!i&&(n?delete o[n]:t&&(t[Ue]=null))}};let i=se(t,a[0],e,s,c);if(!i)return i;let{handleId:l,handle:u,isRefreshable:d,isPeriodic:f}=i.data;if(l)o[l]=i;else if(u&&(u[Ue]=i,d&&!f)){let e=u.refresh;u.refresh=function(){let{zone:t,state:n}=i;return n===`notScheduled`?(i._state=`scheduled`,t._updateTaskCount(i,1)):n===`running`&&(i._state=`scheduling`),e.call(this)}}return u??l??i}return n.apply(e,a)}),a=De(e,n,t=>function(n,r){let i=r[0],a;je(i)?(a=o[i],delete o[i]):(a=i?.[Ue],a?i[Ue]=null:a=i),a?.type?a.cancelFn&&a.zone.cancelTask(a):t.apply(e,r)})}function Ge(e,t){let{isBrowser:n,isMix:r}=t.getGlobalObjects();(n||r)&&e.customElements&&`customElements`in e&&t.patchCallbacks(t,e.customElements,`customElements`,`define`,[`connectedCallback`,`disconnectedCallback`,`adoptedCallback`,`attributeChangedCallback`,`formAssociatedCallback`,`formDisabledCallback`,`formResetCallback`,`formStateRestoreCallback`])}function Ke(e,t){if(Zone[t.symbol(`patchEventTarget`)])return;let{eventNames:n,zoneSymbolEventNames:r,TRUE_STR:i,FALSE_STR:a,ZONE_SYMBOL_PREFIX:o}=t.getGlobalObjects();for(let e=0;e<n.length;e++){let t=n[e],s=t+a,c=t+i,l=o+s,u=o+c;r[t]={},r[t][a]=l,r[t][i]=u}let s=e.EventTarget;if(s&&s.prototype)return t.patchEventTarget(e,t,[s&&s.prototype]),!0}function qe(e,t){t.patchEventPrototype(e,t)}function Je(e,t,n){if(!n||n.length===0)return t;let r=n.filter(t=>t.target===e);if(r.length===0)return t;let i=r[0].ignoreProperties;return t.filter(e=>i.indexOf(e)===-1)}function Ye(e,t,n,r){e&&we(e,Je(e,t,n),r)}function Xe(e){return Object.getOwnPropertyNames(e).filter(e=>e.startsWith(`on`)&&e.length>2).map(e=>e.substring(2))}function eee(e,t){if(_e&&!ye||Zone[e.symbol(`patchEvents`)])return;let n=t.__Zone_ignore_on_properties,r=[];if(ve){let e=window;r=r.concat([`Document`,`SVGElement`,`Element`,`HTMLElement`,`HTMLBodyElement`,`HTMLMediaElement`,`HTMLFrameSetElement`,`HTMLFrameElement`,`HTMLIFrameElement`,`HTMLMarqueeElement`,`Worker`]),Ye(e,Xe(e),n,p(e))}r=r.concat([`XMLHttpRequest`,`XMLHttpRequestEventTarget`,`IDBIndex`,`IDBRequest`,`IDBOpenDBRequest`,`IDBDatabase`,`IDBTransaction`,`IDBCursor`,`WebSocket`]);for(let e=0;e<r.length;e++){let i=t[r[e]];i!=null&&i.prototype&&Ye(i.prototype,Xe(i.prototype),n)}}function tee(e){e.__load_patch(`timers`,e=>{let t=`clear`;We(e,`set`,t,`Timeout`),We(e,`set`,t,`Interval`),We(e,`set`,t,`Immediate`)}),e.__load_patch(`requestAnimationFrame`,e=>{We(e,`request`,`cancel`,`AnimationFrame`),We(e,`mozRequest`,`mozCancel`,`AnimationFrame`),We(e,`webkitRequest`,`webkitCancel`,`AnimationFrame`)}),e.__load_patch(`blocking`,(e,t)=>{let n=[`alert`,`prompt`,`confirm`];for(let r=0;r<n.length;r++){let i=n[r];De(e,i,(n,r,i)=>function(r,a){return t.current.run(n,e,a,i)})}}),e.__load_patch(`EventTarget`,(e,t,n)=>{qe(e,n),Ke(e,n);let r=e.XMLHttpRequestEventTarget;r&&r.prototype&&n.patchEventTarget(e,n,[r.prototype])}),e.__load_patch(`MutationObserver`,(e,t,n)=>{Ee(`MutationObserver`),Ee(`WebKitMutationObserver`)}),e.__load_patch(`IntersectionObserver`,(e,t,n)=>{Ee(`IntersectionObserver`)}),e.__load_patch(`FileReader`,(e,t,n)=>{Ee(`FileReader`)}),e.__load_patch(`on_property`,(e,t,n)=>{eee(n,e)}),e.__load_patch(`customElements`,(e,t,n)=>{Ge(e,n)}),e.__load_patch(`XHR`,(e,t)=>{c(e);let n=ce(`xhrTask`),r=ce(`xhrSync`),i=ce(`xhrListener`),a=ce(`xhrScheduled`),o=ce(`xhrURL`),s=ce(`xhrErrorBeforeScheduled`);function c(e){let c=e.XMLHttpRequest;if(!c)return;let l=c.prototype;function u(e){return e[n]}let d=l[te],f=l[ne];if(!d){let t=e.XMLHttpRequestEventTarget;if(t){let e=t.prototype;d=e[te],f=e[ne]}}let p=`readystatechange`,m=`scheduled`;function ee(e){let r=e.data,o=r.target;o[a]=!1,o[s]=!1;let c=o[i];d||(d=o[te],f=o[ne]),c&&f.call(o,p,c);let l=o[i]=()=>{if(o.readyState===o.DONE){if(!r.aborted&&o[a]&&e.state===m){let n=o[t.__symbol__(`loadfalse`)];if(o.status!==0&&n&&n.length>0){let i=e.invoke;e.invoke=function(){let n=o[t.__symbol__(`loadfalse`)];for(let t=0;t<n.length;t++)n[t]===e&&n.splice(t,1);!r.aborted&&e.state===m&&i.call(e)},n.push(e)}else e.invoke()}else!r.aborted&&o[a]===!1&&(o[s]=!0)}};return d.call(o,p,l),o[n]||(o[n]=e),oe.apply(o,r.args),o[a]=!0,e}function h(){}function g(e){let t=e.data;return t.aborted=!0,le.apply(t.target,t.args)}let re=De(l,`open`,()=>function(e,t){return e[r]=t[2]==0,e[o]=t[1],re.apply(e,t)}),ie=ce(`fetchTaskAborting`),ae=ce(`fetchTaskScheduling`),oe=De(l,`send`,()=>function(e,n){if(t.current[ae]===!0||e[r])return oe.apply(e,n);{let t={target:e,url:e[o],isPeriodic:!1,args:n,aborted:!1},r=se(`XMLHttpRequest.send`,h,t,ee,g);e&&e[s]===!0&&!t.aborted&&r.state===m&&r.invoke()}}),le=De(l,`abort`,()=>function(e,n){let r=u(e);if(r&&typeof r.type==`string`){if(r.cancelFn==null||r.data&&r.data.aborted)return;r.zone.cancelTask(r)}else if(t.current[ie]===!0)return le.apply(e,n)})}}),e.__load_patch(`geolocation`,e=>{e.navigator&&e.navigator.geolocation&&me(e.navigator.geolocation,[`getCurrentPosition`,`watchPosition`])}),e.__load_patch(`PromiseRejectionEvent`,(e,t)=>{function n(t){return function(n){Be(e,t).forEach(r=>{let i=e.PromiseRejectionEvent;if(i){let e=new i(t,{promise:n.promise,reason:n.rejection});r.invoke(e)}})}}e.PromiseRejectionEvent&&(t[ce(`unhandledPromiseRejectionHandler`)]=n(`unhandledrejection`),t[ce(`rejectionHandledHandler`)]=n(`rejectionhandled`))}),e.__load_patch(`queueMicrotask`,(e,t,n)=>{He(e,n)})}function nee(e){e.__load_patch(`ZoneAwarePromise`,(e,t,n)=>{let r=Object.getOwnPropertyDescriptor,i=Object.defineProperty;function a(e){return e&&e.toString===Object.prototype.toString?(e.constructor&&e.constructor.name||``)+`: `+JSON.stringify(e):e?e.toString():Object.prototype.toString.call(e)}let o=n.symbol,s=[],c=e[o(`DISABLE_WRAPPING_UNCAUGHT_PROMISE_REJECTION`)]!==!1,l=o(`Promise`),u=o(`then`);n.onUnhandledError=e=>{if(n.showUncaughtError()){let t=e&&e.rejection;t&&e.zone&&e.task?console.error(`Unhandled Promise rejection:`,t instanceof Error?t.message:t,`; Zone:`,e.zone.name,`; Task:`,e.task&&e.task.source,`; Value:`,t,t instanceof Error?t.stack:void 0):console.error(e)}},n.microtaskDrainDone=()=>{for(;s.length;){let e=s.shift();try{e.zone.runGuarded(()=>{throw e.throwOriginal?e.rejection:e})}catch(e){f(e)}}};let d=o(`unhandledPromiseRejectionHandler`);function f(e){n.onUnhandledError(e);try{let n=t[d];typeof n==`function`&&n.call(this,e)}catch{}}function p(e){return e&&typeof e.then==`function`}function m(e){return e}function ee(e){return pe.reject(e)}let h=o(`state`),g=o(`value`),te=o(`finally`),ne=o(`parentPromiseValue`),re=o(`parentPromiseState`);function ie(e,t){return n=>{try{se(e,t,n)}catch(t){se(e,!1,t)}}}let ae=function(){let e=!1;return function(t){return function(){e||(e=!0,t.apply(null,arguments))}}},oe=o(`currentTaskTrace`);function se(e,r,o){let l=ae();if(e===o)throw TypeError(`Promise resolved with itself`);if(e[h]===null){let u=null;try{(typeof o==`object`||typeof o==`function`)&&(u=o&&o.then)}catch(t){return l(()=>{se(e,!1,t)})(),e}if(r!==!1&&o instanceof pe&&Object.hasOwn(o,h)&&Object.hasOwn(o,g)&&o[h]!==null)le(o),se(e,o[h],o[g]);else if(r!==!1&&typeof u==`function`)try{u.call(o,l(ie(e,r)),l(ie(e,!1)))}catch(t){l(()=>{se(e,!1,t)})()}else{e[h]=r;let l=e[g];if(e[g]=o,e[te]===te&&r===!0&&(e[h]=e[re],e[g]=e[ne]),r===!1&&o instanceof Error){let e=t.currentTask&&t.currentTask.data&&t.currentTask.data.__creationTrace__;e&&i(o,oe,{configurable:!0,enumerable:!1,writable:!0,value:e})}for(let t=0;t<l.length;)ue(e,l[t++],l[t++],l[t++],l[t++]);if(l.length==0&&r==0){e[h]=0;let r=o;try{throw Error(`Uncaught (in promise): `+a(o)+(o&&o.stack?`
-`+o.stack:``))}catch(e){r=e}c&&(r.throwOriginal=!0),r.rejection=o,r.promise=e,r.zone=t.current,r.task=t.currentTask,s.push(r),n.scheduleMicroTask()}}}return e}let ce=o(`rejectionHandledHandler`);function le(e){if(e[h]===0){try{let n=t[ce];n&&typeof n==`function`&&n.call(this,{rejection:e[g],promise:e})}catch{}e[h]=!1;for(let t=0;t<s.length;t++)e===s[t].promise&&s.splice(t,1)}}function ue(e,t,n,r,i){le(e);let a=e[h],o=a?typeof r==`function`?r:m:typeof i==`function`?i:ee;t.scheduleMicroTask(`Promise.then`,()=>{try{let r=e[g],i=!!n&&te===n[te];i&&(n[ne]=r,n[re]=a),se(n,!0,t.run(o,void 0,i&&o!==ee&&o!==m?[]:[r]))}catch(e){se(n,!1,e)}},n)}let de=function(){},fe=e.AggregateError;class pe{static toString(){return`function ZoneAwarePromise() { [native code] }`}static resolve(e){return e instanceof pe?e:se(new this(null),!0,e)}static reject(e){return se(new this(null),!1,e)}static withResolvers(){let e={};return e.promise=new pe((t,n)=>{e.resolve=t,e.reject=n}),e}static any(e){if(!e||typeof e[Symbol.iterator]!=`function`)return Promise.reject(new fe([],`All promises were rejected`));let t=[],n=0;try{for(let r of e)n++,t.push(pe.resolve(r))}catch{return Promise.reject(new fe([],`All promises were rejected`))}if(n===0)return Promise.reject(new fe([],`All promises were rejected`));let r=!1,i=[];return new pe((e,a)=>{for(let o=0;o<t.length;o++)t[o].then(t=>{r||(r=!0,e(t))},e=>{i.push(e),n--,n===0&&(r=!0,a(new fe(i,`All promises were rejected`)))})})}static race(e){let t,n,r=new this((e,r)=>{t=e,n=r});function i(e){t(e)}function a(e){n(e)}for(let t of e)p(t)||(t=this.resolve(t)),t.then(i,a);return r}static all(e){return pe.allWithCallback(e)}static allSettled(e){return(this&&this.prototype instanceof pe?this:pe).allWithCallback(e,{thenCallback:e=>({status:`fulfilled`,value:e}),errorCallback:e=>({status:`rejected`,reason:e})})}static allWithCallback(e,t){let n,r,i=new this((e,t)=>{n=e,r=t}),a=2,o=0,s=[];for(let i of e){p(i)||(i=this.resolve(i));let e=o;try{i.then(r=>{s[e]=t?t.thenCallback(r):r,a--,a===0&&n(s)},i=>{t?(s[e]=t.errorCallback(i),a--,a===0&&n(s)):r(i)})}catch(e){r(e)}a++,o++}return a-=2,a===0&&n(s),i}constructor(e){let t=this;if(!(t instanceof pe))throw Error(`Must be an instanceof Promise.`);t[h]=null,t[g]=[];try{let n=ae();e&&e(n(ie(t,!0)),n(ie(t,!1)))}catch(e){se(t,!1,e)}}get[Symbol.toStringTag](){return`Promise`}get[Symbol.species](){return pe}then(e,n){let r=this.constructor?.[Symbol.species];(!r||typeof r!=`function`)&&(r=this.constructor||pe);let i=new r(de),a=t.current;return this[h]==null?this[g].push(a,i,e,n):ue(this,a,i,e,n),i}catch(e){return this.then(null,e)}finally(e){let n=this.constructor?.[Symbol.species];(!n||typeof n!=`function`)&&(n=pe);let r=new n(de);r[te]=te;let i=t.current;return this[h]==null?this[g].push(i,r,e,e):ue(this,i,r,e,e),r}}pe.resolve=pe.resolve,pe.reject=pe.reject,pe.race=pe.race,pe.all=pe.all;let me=e[l]=e.Promise;e.Promise=pe;let he=o(`thenPatched`);function ge(e){let t=e.prototype,n=r(t,`then`);if(n&&(n.writable===!1||!n.configurable))return;let i=t.then;t[u]=i,e.prototype.then=function(e,t){return new pe((e,t)=>{i.call(this,e,t)}).then(e,t)},e[he]=!0}n.patchThen=ge;function _e(e){return function(t,n){let r=e.apply(t,n);if(r instanceof pe)return r;let i=r.constructor;return i[he]||ge(i),r}}if(me){ge(me);let t=me.try;t&&typeof t==`function`&&(pe.try=t),De(e,`fetch`,e=>_e(e))}return Promise[t.__symbol__(`uncaughtPromiseErrors`)]=s,pe})}function Ze(e){e.__load_patch(`toString`,e=>{let t=Function.prototype.toString,n=ce(`OriginalDelegate`),r=ce(`Promise`),i=ce(`Error`),a=function(){if(typeof this==`function`){let a=this[n];if(a)return typeof a==`function`?t.call(a):Object.prototype.toString.call(a);if(this===Promise){let n=e[r];if(n)return t.call(n)}if(this===Error){let n=e[i];if(n)return t.call(n)}}return t.call(this)};a[n]=t,Function.prototype.toString=a;let o=Object.prototype.toString;Object.prototype.toString=function(){return typeof Promise==`function`&&this instanceof Promise?`[object Promise]`:o.call(this)}})}function Qe(e,t,n,r,i){let a=Zone.__symbol__(r);if(t[a])return;let o=t[a]=t[r];t[r]=function(a,s,c){return s&&s.prototype&&i.forEach(function(t){let i=`${n}.${r}::`+t,a=s.prototype;try{if(Object.hasOwn(a,t)){let n=e.ObjectGetOwnPropertyDescriptor(a,t);n&&n.value?(n.value=e.wrapWithCurrentZone(n.value,i),e._redefineProperty(s.prototype,t,n)):a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}else a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}catch{}}),o.call(t,a,s,c)},e.attachOriginToPatched(t[r],o)}function $e(e){e.__load_patch(`util`,(e,t,n)=>{let r=Xe(e);n.patchOnProperties=we,n.patchMethod=De,n.bindArguments=pe,n.patchMacroTask=Oe;let i=t.__symbol__(`BLACK_LISTED_EVENTS`),a=t.__symbol__(`UNPATCHED_EVENTS`);e[a]&&(e[i]=e[a]),e[i]&&(t[i]=t[a]=e[i]),n.patchEventPrototype=Ve,n.patchEventTarget=ze,n.ObjectDefineProperty=f,n.ObjectGetOwnPropertyDescriptor=d,n.ObjectCreate=m,n.ArraySlice=ee,n.patchClass=Ee,n.wrapWithCurrentZone=oe,n.filterProperties=Je,n.attachOriginToPatched=ke,n._redefineProperty=Object.defineProperty,n.patchCallbacks=Qe,n.getGlobalObjects=()=>({globalSources:Pe,zoneSymbolEventNames:Ne,eventNames:r,isBrowser:ve,isMix:ye,isNode:_e,TRUE_STR:re,FALSE_STR:ie,ZONE_SYMBOL_PREFIX:ae,ADD_EVENT_LISTENER_STR:h,REMOVE_EVENT_LISTENER_STR:g})})}function et(e){nee(e),Ze(e),$e(e)}var tt=u();et(tt),tee(tt);var nt=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})(nt||{}),rt=(function(e){return e[e.None=0]=`None`,e[e.Const=1]=`Const`,e})(rt||{}),it=class{modifiers;constructor(e=rt.None){this.modifiers=e}hasModifier(e){return(this.modifiers&e)!==0}},at=(function(e){return e[e.Dynamic=0]=`Dynamic`,e[e.Bool=1]=`Bool`,e[e.String=2]=`String`,e[e.Int=3]=`Int`,e[e.Number=4]=`Number`,e[e.Function=5]=`Function`,e[e.Inferred=6]=`Inferred`,e[e.None=7]=`None`,e})(at||{}),ot=class extends it{name;constructor(e,t){super(t),this.name=e}visitType(e,t){return e.visitBuiltinType(this,t)}};at.Dynamic;var st=new ot(at.Inferred);at.Bool,at.Int,at.Number,at.String,at.Function,at.None;var _=(function(e){return e[e.Equals=0]=`Equals`,e[e.NotEquals=1]=`NotEquals`,e[e.Assign=2]=`Assign`,e[e.Identical=3]=`Identical`,e[e.NotIdentical=4]=`NotIdentical`,e[e.Minus=5]=`Minus`,e[e.Plus=6]=`Plus`,e[e.Divide=7]=`Divide`,e[e.Multiply=8]=`Multiply`,e[e.Modulo=9]=`Modulo`,e[e.And=10]=`And`,e[e.Or=11]=`Or`,e[e.BitwiseOr=12]=`BitwiseOr`,e[e.BitwiseAnd=13]=`BitwiseAnd`,e[e.Lower=14]=`Lower`,e[e.LowerEquals=15]=`LowerEquals`,e[e.Bigger=16]=`Bigger`,e[e.BiggerEquals=17]=`BiggerEquals`,e[e.NullishCoalesce=18]=`NullishCoalesce`,e[e.Exponentiation=19]=`Exponentiation`,e[e.In=20]=`In`,e[e.InstanceOf=21]=`InstanceOf`,e[e.AdditionAssignment=22]=`AdditionAssignment`,e[e.SubtractionAssignment=23]=`SubtractionAssignment`,e[e.MultiplicationAssignment=24]=`MultiplicationAssignment`,e[e.DivisionAssignment=25]=`DivisionAssignment`,e[e.RemainderAssignment=26]=`RemainderAssignment`,e[e.ExponentiationAssignment=27]=`ExponentiationAssignment`,e[e.AndAssignment=28]=`AndAssignment`,e[e.OrAssignment=29]=`OrAssignment`,e[e.NullishCoalesceAssignment=30]=`NullishCoalesceAssignment`,e})(_||{});function ct(e,t){return e==null||t==null?e==t:e.isEquivalent(t)}function lt(e,t,n){let r=e.length;if(r!==t.length)return!1;for(let i=0;i<r;i++)if(!n(e[i],t[i]))return!1;return!0}function ut(e,t){return lt(e,t,(e,t)=>e.isEquivalent(t))}var dt=class{leadingComments;type;sourceSpan;constructor(e,t,n){this.leadingComments=n,this.type=e||null,this.sourceSpan=t||null}prop(e,t){return new xt(this,e,null,t)}key(e,t,n){return new ree(this,e,t,n)}callFn(e,t,n,r){return new mt(this,e,null,t,n,r)}instantiate(e,t,n,r){return new ht(this,e,t,n)}conditional(e,t=null,n,r){return new yt(this,e,t,null,n)}equals(e,t){return new bt(_.Equals,this,e,null,t)}notEquals(e,t){return new bt(_.NotEquals,this,e,null,t)}identical(e,t){return new bt(_.Identical,this,e,null,t)}notIdentical(e,t){return new bt(_.NotIdentical,this,e,null,t)}minus(e,t){return new bt(_.Minus,this,e,null,t)}plus(e,t){return new bt(_.Plus,this,e,null,t)}divide(e,t){return new bt(_.Divide,this,e,null,t)}multiply(e,t){return new bt(_.Multiply,this,e,null,t)}modulo(e,t){return new bt(_.Modulo,this,e,null,t)}power(e,t){return new bt(_.Exponentiation,this,e,null,t)}and(e,t){return new bt(_.And,this,e,null,t)}bitwiseOr(e,t){return new bt(_.BitwiseOr,this,e,null,t)}bitwiseAnd(e,t){return new bt(_.BitwiseAnd,this,e,null,t)}or(e,t){return new bt(_.Or,this,e,null,t)}lower(e,t){return new bt(_.Lower,this,e,null,t)}lowerEquals(e,t){return new bt(_.LowerEquals,this,e,null,t)}bigger(e,t){return new bt(_.Bigger,this,e,null,t)}biggerEquals(e,t){return new bt(_.BiggerEquals,this,e,null,t)}isBlank(e){return this.equals(cee,e)}nullishCoalesce(e,t){return new bt(_.NullishCoalesce,this,e,null,t)}toStmt(e){return new uee(this,null,e)}},ft=class e extends dt{name;constructor(e,t,n,r){super(t,n,r),this.name=e}isEquivalent(t){return t instanceof e&&this.name===t.name}isConstant(){return!1}visitExpression(e,t){return e.visitReadVarExpr(this,t)}clone(){return new e(this.name,this.type,this.sourceSpan)}set(e){return new bt(_.Assign,this,e,null,this.sourceSpan)}},pt=class e extends dt{expr;constructor(e,t,n,r){super(t,n,r),this.expr=e}visitExpression(e,t){return e.visitTypeofExpr(this,t)}isEquivalent(t){return t instanceof e&&t.expr.isEquivalent(this.expr)}isConstant(){return this.expr.isConstant()}clone(){return new e(this.expr.clone())}},mt=class e extends dt{fn;args;pure;isOptional;constructor(e,t,n,r,i=!1,a,o=!1){super(n,r,a),this.fn=e,this.args=t,this.pure=i,this.isOptional=o}get receiver(){return this.fn}isEquivalent(t){return t instanceof e&&this.fn.isEquivalent(t.fn)&&ut(this.args,t.args)&&this.pure===t.pure}isConstant(){return!1}visitExpression(e,t){return e.visitInvokeFunctionExpr(this,t)}clone(){return new e(this.fn.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan,this.pure,[],this.isOptional)}},ht=class e extends dt{classExpr;args;constructor(e,t,n,r,i){super(n,r,i),this.classExpr=e,this.args=t}isEquivalent(t){return t instanceof e&&this.classExpr.isEquivalent(t.classExpr)&&ut(this.args,t.args)}isConstant(){return!1}visitExpression(e,t){return e.visitInstantiateExpr(this,t)}clone(){return new e(this.classExpr.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan)}},gt=class e extends dt{body;flags;constructor(e,t,n,r){super(null,n,r),this.body=e,this.flags=t}isEquivalent(t){return t instanceof e&&this.body===t.body&&this.flags===t.flags}isConstant(){return!0}visitExpression(e,t){return e.visitRegularExpressionLiteral(this,t)}clone(){return new e(this.body,this.flags,this.sourceSpan)}},_t=class e extends dt{value;constructor(e,t,n,r){super(t,n,r),this.value=e}isEquivalent(t){return t instanceof e&&this.value===t.value}isConstant(){return!0}visitExpression(e,t){return e.visitLiteralExpr(this,t)}clone(){return new e(this.value,this.type,this.sourceSpan)}},vt=class e extends dt{value;typeParams;constructor(e,t,n=null,r,i){super(t,r,i),this.value=e,this.typeParams=n}isEquivalent(t){return t instanceof e&&this.value.name===t.value.name&&this.value.moduleName===t.value.moduleName}isConstant(){return!1}visitExpression(e,t){return e.visitExternalExpr(this,t)}clone(){return new e(this.value,this.type,this.typeParams,this.sourceSpan)}},yt=class e extends dt{condition;falseCase;trueCase;constructor(e,t,n=null,r,i,a){super(r||t.type,i,a),this.condition=e,this.falseCase=n,this.trueCase=t}isEquivalent(t){return t instanceof e&&this.condition.isEquivalent(t.condition)&&this.trueCase.isEquivalent(t.trueCase)&&ct(this.falseCase,t.falseCase)}isConstant(){return!1}visitExpression(e,t){return e.visitConditionalExpr(this,t)}clone(){return new e(this.condition.clone(),this.trueCase.clone(),this.falseCase?.clone(),this.type,this.sourceSpan)}},bt=class e extends dt{operator;rhs;lhs;constructor(e,t,n,r,i,a){super(r||t.type,i,a),this.operator=e,this.rhs=n,this.lhs=t}isEquivalent(t){return t instanceof e&&this.operator===t.operator&&this.lhs.isEquivalent(t.lhs)&&this.rhs.isEquivalent(t.rhs)}isConstant(){return!1}visitExpression(e,t){return e.visitBinaryOperatorExpr(this,t)}clone(){return new e(this.operator,this.lhs.clone(),this.rhs.clone(),this.type,this.sourceSpan)}isAssignment(){let e=this.operator;return e===_.Assign||e===_.AdditionAssignment||e===_.SubtractionAssignment||e===_.MultiplicationAssignment||e===_.DivisionAssignment||e===_.RemainderAssignment||e===_.ExponentiationAssignment||e===_.AndAssignment||e===_.OrAssignment||e===_.NullishCoalesceAssignment}},xt=class e extends dt{receiver;name;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.name=t,this.isOptional=a}get index(){return this.name}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.name===t.name&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadPropExpr(this,t)}set(e){return new bt(_.Assign,this.receiver.prop(this.name),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.name,this.type,this.sourceSpan,[],this.isOptional)}},ree=class e extends dt{receiver;index;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.index=t,this.isOptional=a}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.index.isEquivalent(t.index)&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadKeyExpr(this,t)}set(e){return new bt(_.Assign,this.receiver.key(this.index),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.index.clone(),this.type,this.sourceSpan,[],this.isOptional)}},iee=class e extends dt{entries;constructor(e,t,n,r){super(t,n,r),this.entries=e}isConstant(){return this.entries.every(e=>e.isConstant())}isEquivalent(t){return t instanceof e&&ut(this.entries,t.entries)}visitExpression(e,t){return e.visitLiteralArrayExpr(this,t)}clone(){return new e(this.entries.map(e=>e.clone()),this.type,this.sourceSpan)}},aee=class e{expression;constructor(e){this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}clone(){return new e(this.expression.clone())}isConstant(){return this.expression.isConstant()}},oee=class e extends dt{entries;valueType=null;constructor(e,t,n,r){super(t,n,r),this.entries=e,t&&(this.valueType=t.valueType)}isEquivalent(t){return t instanceof e&&ut(this.entries,t.entries)}isConstant(){return this.entries.every(e=>e.isConstant())}visitExpression(e,t){return e.visitLiteralMapExpr(this,t)}clone(){let t=this.entries.map(e=>e.clone());return new e(t,this.type,this.sourceSpan)}},see=class e extends dt{expression;constructor(e,t,n){super(null,t,n),this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}isConstant(){return this.expression.isConstant()}visitExpression(e,t){return e.visitSpreadElementExpr(this,t)}clone(){return new e(this.expression.clone(),this.sourceSpan)}},cee=new _t(null,st,null),St=(function(e){return e[e.None=0]=`None`,e[e.Final=1]=`Final`,e[e.Private=2]=`Private`,e[e.Exported=4]=`Exported`,e[e.Static=8]=`Static`,e})(St||{}),lee=class{modifiers;sourceSpan;leadingComments;constructor(e=St.None,t=null,n){this.modifiers=e,this.sourceSpan=t,this.leadingComments=n}hasModifier(e){return(this.modifiers&e)!==0}addLeadingComment(e){this.leadingComments=this.leadingComments??[],this.leadingComments.push(e)}},uee=class e extends lee{expr;constructor(e,t,n){super(St.None,t,n),this.expr=e}isEquivalent(t){return t instanceof e&&this.expr.isEquivalent(t.expr)}visitStatement(e,t){return e.visitExpressionStmt(this,t)}};(class e{static INSTANCE=new e;keyOf(e){if(e instanceof _t&&typeof e.value==`string`)return`"${e.value}"`;if(e instanceof _t)return String(e.value);if(e instanceof gt)return`/${e.body}/${e.flags??``}`;if(e instanceof iee){let t=[];for(let n of e.entries)t.push(this.keyOf(n));return`[${t.join(`,`)}]`}if(e instanceof oee){let t=[];for(let n of e.entries)if(n instanceof aee)t.push(`...`+this.keyOf(n.expression));else{let e=n.key;n.quoted&&(e=`"${e}"`),t.push(e+`:`+this.keyOf(n.value))}return`{${t.join(`,`)}}`}if(e instanceof vt)return`import("${e.value.moduleName}", ${e.value.name})`;if(e instanceof ft)return`read(${e.name})`;if(e instanceof pt)return`typeof(${this.keyOf(e.expr)})`;if(e instanceof see)return`...${this.keyOf(e.expression)}`;throw Error(`${this.constructor.name} does not handle expressions of type ${e.constructor.name}`)}});var v=`@angular/core`,y=(()=>{class e{static core={name:null,moduleName:v};static namespaceHTML={name:`ɵɵnamespaceHTML`,moduleName:v};static namespaceMathML={name:`ɵɵnamespaceMathML`,moduleName:v};static namespaceSVG={name:`ɵɵnamespaceSVG`,moduleName:v};static element={name:`ɵɵelement`,moduleName:v};static elementStart={name:`ɵɵelementStart`,moduleName:v};static elementEnd={name:`ɵɵelementEnd`,moduleName:v};static foreignComponent={name:`ɵɵforeignComponent`,moduleName:v};static foreignContent={name:`ɵɵforeignContent`,moduleName:v};static foreignContentFn={name:`ɵɵforeignContentFn`,moduleName:v};static domElement={name:`ɵɵdomElement`,moduleName:v};static domElementStart={name:`ɵɵdomElementStart`,moduleName:v};static domElementEnd={name:`ɵɵdomElementEnd`,moduleName:v};static domElementContainer={name:`ɵɵdomElementContainer`,moduleName:v};static domElementContainerStart={name:`ɵɵdomElementContainerStart`,moduleName:v};static domElementContainerEnd={name:`ɵɵdomElementContainerEnd`,moduleName:v};static domTemplate={name:`ɵɵdomTemplate`,moduleName:v};static domListener={name:`ɵɵdomListener`,moduleName:v};static advance={name:`ɵɵadvance`,moduleName:v};static syntheticHostProperty={name:`ɵɵsyntheticHostProperty`,moduleName:v};static syntheticHostListener={name:`ɵɵsyntheticHostListener`,moduleName:v};static attribute={name:`ɵɵattribute`,moduleName:v};static classProp={name:`ɵɵclassProp`,moduleName:v};static elementContainerStart={name:`ɵɵelementContainerStart`,moduleName:v};static elementContainerEnd={name:`ɵɵelementContainerEnd`,moduleName:v};static elementContainer={name:`ɵɵelementContainer`,moduleName:v};static styleMap={name:`ɵɵstyleMap`,moduleName:v};static classMap={name:`ɵɵclassMap`,moduleName:v};static styleProp={name:`ɵɵstyleProp`,moduleName:v};static interpolate={name:`ɵɵinterpolate`,moduleName:v};static interpolate1={name:`ɵɵinterpolate1`,moduleName:v};static interpolate2={name:`ɵɵinterpolate2`,moduleName:v};static interpolate3={name:`ɵɵinterpolate3`,moduleName:v};static interpolate4={name:`ɵɵinterpolate4`,moduleName:v};static interpolate5={name:`ɵɵinterpolate5`,moduleName:v};static interpolate6={name:`ɵɵinterpolate6`,moduleName:v};static interpolate7={name:`ɵɵinterpolate7`,moduleName:v};static interpolate8={name:`ɵɵinterpolate8`,moduleName:v};static interpolateV={name:`ɵɵinterpolateV`,moduleName:v};static nextContext={name:`ɵɵnextContext`,moduleName:v};static resetView={name:`ɵɵresetView`,moduleName:v};static templateCreate={name:`ɵɵtemplate`,moduleName:v};static defer={name:`ɵɵdefer`,moduleName:v};static deferWhen={name:`ɵɵdeferWhen`,moduleName:v};static deferOnIdle={name:`ɵɵdeferOnIdle`,moduleName:v};static deferOnImmediate={name:`ɵɵdeferOnImmediate`,moduleName:v};static deferOnTimer={name:`ɵɵdeferOnTimer`,moduleName:v};static deferOnHover={name:`ɵɵdeferOnHover`,moduleName:v};static deferOnInteraction={name:`ɵɵdeferOnInteraction`,moduleName:v};static deferOnViewport={name:`ɵɵdeferOnViewport`,moduleName:v};static deferPrefetchWhen={name:`ɵɵdeferPrefetchWhen`,moduleName:v};static deferPrefetchOnIdle={name:`ɵɵdeferPrefetchOnIdle`,moduleName:v};static deferPrefetchOnImmediate={name:`ɵɵdeferPrefetchOnImmediate`,moduleName:v};static deferPrefetchOnTimer={name:`ɵɵdeferPrefetchOnTimer`,moduleName:v};static deferPrefetchOnHover={name:`ɵɵdeferPrefetchOnHover`,moduleName:v};static deferPrefetchOnInteraction={name:`ɵɵdeferPrefetchOnInteraction`,moduleName:v};static deferPrefetchOnViewport={name:`ɵɵdeferPrefetchOnViewport`,moduleName:v};static deferHydrateWhen={name:`ɵɵdeferHydrateWhen`,moduleName:v};static deferHydrateNever={name:`ɵɵdeferHydrateNever`,moduleName:v};static deferHydrateOnIdle={name:`ɵɵdeferHydrateOnIdle`,moduleName:v};static deferHydrateOnImmediate={name:`ɵɵdeferHydrateOnImmediate`,moduleName:v};static deferHydrateOnTimer={name:`ɵɵdeferHydrateOnTimer`,moduleName:v};static deferHydrateOnHover={name:`ɵɵdeferHydrateOnHover`,moduleName:v};static deferHydrateOnInteraction={name:`ɵɵdeferHydrateOnInteraction`,moduleName:v};static deferHydrateOnViewport={name:`ɵɵdeferHydrateOnViewport`,moduleName:v};static deferEnableTimerScheduling={name:`ɵɵdeferEnableTimerScheduling`,moduleName:v};static enableIncrementalHydrationRuntime={name:`ɵɵenableIncrementalHydrationRuntime`,moduleName:v};static conditionalCreate={name:`ɵɵconditionalCreate`,moduleName:v};static conditionalBranchCreate={name:`ɵɵconditionalBranchCreate`,moduleName:v};static conditional={name:`ɵɵconditional`,moduleName:v};static repeater={name:`ɵɵrepeater`,moduleName:v};static repeaterCreate={name:`ɵɵrepeaterCreate`,moduleName:v};static repeaterTrackByIndex={name:`ɵɵrepeaterTrackByIndex`,moduleName:v};static repeaterTrackByIdentity={name:`ɵɵrepeaterTrackByIdentity`,moduleName:v};static componentInstance={name:`ɵɵcomponentInstance`,moduleName:v};static text={name:`ɵɵtext`,moduleName:v};static enableBindings={name:`ɵɵenableBindings`,moduleName:v};static disableBindings={name:`ɵɵdisableBindings`,moduleName:v};static getCurrentView={name:`ɵɵgetCurrentView`,moduleName:v};static textInterpolate={name:`ɵɵtextInterpolate`,moduleName:v};static textInterpolate1={name:`ɵɵtextInterpolate1`,moduleName:v};static textInterpolate2={name:`ɵɵtextInterpolate2`,moduleName:v};static textInterpolate3={name:`ɵɵtextInterpolate3`,moduleName:v};static textInterpolate4={name:`ɵɵtextInterpolate4`,moduleName:v};static textInterpolate5={name:`ɵɵtextInterpolate5`,moduleName:v};static textInterpolate6={name:`ɵɵtextInterpolate6`,moduleName:v};static textInterpolate7={name:`ɵɵtextInterpolate7`,moduleName:v};static textInterpolate8={name:`ɵɵtextInterpolate8`,moduleName:v};static textInterpolateV={name:`ɵɵtextInterpolateV`,moduleName:v};static restoreView={name:`ɵɵrestoreView`,moduleName:v};static pureFunction0={name:`ɵɵpureFunction0`,moduleName:v};static pureFunction1={name:`ɵɵpureFunction1`,moduleName:v};static pureFunction2={name:`ɵɵpureFunction2`,moduleName:v};static pureFunction3={name:`ɵɵpureFunction3`,moduleName:v};static pureFunction4={name:`ɵɵpureFunction4`,moduleName:v};static pureFunction5={name:`ɵɵpureFunction5`,moduleName:v};static pureFunction6={name:`ɵɵpureFunction6`,moduleName:v};static pureFunction7={name:`ɵɵpureFunction7`,moduleName:v};static pureFunction8={name:`ɵɵpureFunction8`,moduleName:v};static pureFunctionV={name:`ɵɵpureFunctionV`,moduleName:v};static pipeBind1={name:`ɵɵpipeBind1`,moduleName:v};static pipeBind2={name:`ɵɵpipeBind2`,moduleName:v};static pipeBind3={name:`ɵɵpipeBind3`,moduleName:v};static pipeBind4={name:`ɵɵpipeBind4`,moduleName:v};static pipeBindV={name:`ɵɵpipeBindV`,moduleName:v};static domProperty={name:`ɵɵdomProperty`,moduleName:v};static ariaProperty={name:`ɵɵariaProperty`,moduleName:v};static property={name:`ɵɵproperty`,moduleName:v};static control={name:`ɵɵcontrol`,moduleName:v};static controlCreate={name:`ɵɵcontrolCreate`,moduleName:v};static animationEnterListener={name:`ɵɵanimateEnterListener`,moduleName:v};static animationLeaveListener={name:`ɵɵanimateLeaveListener`,moduleName:v};static animationEnter={name:`ɵɵanimateEnter`,moduleName:v};static animationLeave={name:`ɵɵanimateLeave`,moduleName:v};static i18n={name:`ɵɵi18n`,moduleName:v};static i18nAttributes={name:`ɵɵi18nAttributes`,moduleName:v};static i18nExp={name:`ɵɵi18nExp`,moduleName:v};static i18nStart={name:`ɵɵi18nStart`,moduleName:v};static i18nEnd={name:`ɵɵi18nEnd`,moduleName:v};static i18nApply={name:`ɵɵi18nApply`,moduleName:v};static i18nPostprocess={name:`ɵɵi18nPostprocess`,moduleName:v};static pipe={name:`ɵɵpipe`,moduleName:v};static projection={name:`ɵɵprojection`,moduleName:v};static projectionDef={name:`ɵɵprojectionDef`,moduleName:v};static reference={name:`ɵɵreference`,moduleName:v};static inject={name:`ɵɵinject`,moduleName:v};static injectAttribute={name:`ɵɵinjectAttribute`,moduleName:v};static directiveInject={name:`ɵɵdirectiveInject`,moduleName:v};static invalidFactory={name:`ɵɵinvalidFactory`,moduleName:v};static invalidFactoryDep={name:`ɵɵinvalidFactoryDep`,moduleName:v};static templateRefExtractor={name:`ɵɵtemplateRefExtractor`,moduleName:v};static forwardRef={name:`forwardRef`,moduleName:v};static resolveForwardRef={name:`resolveForwardRef`,moduleName:v};static replaceMetadata={name:`ɵɵreplaceMetadata`,moduleName:v};static getReplaceMetadataURL={name:`ɵɵgetReplaceMetadataURL`,moduleName:v};static ɵɵdefineInjectable={name:`ɵɵdefineInjectable`,moduleName:v};static declareInjectable={name:`ɵɵngDeclareInjectable`,moduleName:v};static InjectableDeclaration={name:`ɵɵInjectableDeclaration`,moduleName:v};static defineService={name:`ɵɵdefineService`,moduleName:v};static declareService={name:`ɵɵngDeclareService`,moduleName:v};static resolveWindow={name:`ɵɵresolveWindow`,moduleName:v};static resolveDocument={name:`ɵɵresolveDocument`,moduleName:v};static resolveBody={name:`ɵɵresolveBody`,moduleName:v};static getComponentDepsFactory={name:`ɵɵgetComponentDepsFactory`,moduleName:v};static defineComponent={name:`ɵɵdefineComponent`,moduleName:v};static declareComponent={name:`ɵɵngDeclareComponent`,moduleName:v};static setComponentScope={name:`ɵɵsetComponentScope`,moduleName:v};static ChangeDetectionStrategy={name:`ChangeDetectionStrategy`,moduleName:v};static ViewEncapsulation={name:`ViewEncapsulation`,moduleName:v};static ComponentDeclaration={name:`ɵɵComponentDeclaration`,moduleName:v};static FactoryDeclaration={name:`ɵɵFactoryDeclaration`,moduleName:v};static declareFactory={name:`ɵɵngDeclareFactory`,moduleName:v};static FactoryTarget={name:`ɵɵFactoryTarget`,moduleName:v};static defineDirective={name:`ɵɵdefineDirective`,moduleName:v};static declareDirective={name:`ɵɵngDeclareDirective`,moduleName:v};static DirectiveDeclaration={name:`ɵɵDirectiveDeclaration`,moduleName:v};static InjectorDef={name:`ɵɵInjectorDef`,moduleName:v};static InjectorDeclaration={name:`ɵɵInjectorDeclaration`,moduleName:v};static defineInjector={name:`ɵɵdefineInjector`,moduleName:v};static declareInjector={name:`ɵɵngDeclareInjector`,moduleName:v};static NgModuleDeclaration={name:`ɵɵNgModuleDeclaration`,moduleName:v};static ModuleWithProviders={name:`ModuleWithProviders`,moduleName:v};static defineNgModule={name:`ɵɵdefineNgModule`,moduleName:v};static declareNgModule={name:`ɵɵngDeclareNgModule`,moduleName:v};static setNgModuleScope={name:`ɵɵsetNgModuleScope`,moduleName:v};static registerNgModuleType={name:`ɵɵregisterNgModuleType`,moduleName:v};static PipeDeclaration={name:`ɵɵPipeDeclaration`,moduleName:v};static definePipe={name:`ɵɵdefinePipe`,moduleName:v};static declarePipe={name:`ɵɵngDeclarePipe`,moduleName:v};static declareClassMetadata={name:`ɵɵngDeclareClassMetadata`,moduleName:v};static declareClassMetadataAsync={name:`ɵɵngDeclareClassMetadataAsync`,moduleName:v};static setClassMetadata={name:`ɵsetClassMetadata`,moduleName:v};static setClassMetadataAsync={name:`ɵsetClassMetadataAsync`,moduleName:v};static setClassDebugInfo={name:`ɵsetClassDebugInfo`,moduleName:v};static queryRefresh={name:`ɵɵqueryRefresh`,moduleName:v};static viewQuery={name:`ɵɵviewQuery`,moduleName:v};static loadQuery={name:`ɵɵloadQuery`,moduleName:v};static contentQuery={name:`ɵɵcontentQuery`,moduleName:v};static viewQuerySignal={name:`ɵɵviewQuerySignal`,moduleName:v};static contentQuerySignal={name:`ɵɵcontentQuerySignal`,moduleName:v};static queryAdvance={name:`ɵɵqueryAdvance`,moduleName:v};static twoWayProperty={name:`ɵɵtwoWayProperty`,moduleName:v};static twoWayBindingSet={name:`ɵɵtwoWayBindingSet`,moduleName:v};static twoWayListener={name:`ɵɵtwoWayListener`,moduleName:v};static declareLet={name:`ɵɵdeclareLet`,moduleName:v};static storeLet={name:`ɵɵstoreLet`,moduleName:v};static readContextLet={name:`ɵɵreadContextLet`,moduleName:v};static arrowFunction={name:`ɵɵarrowFunction`,moduleName:v};static attachSourceLocations={name:`ɵɵattachSourceLocations`,moduleName:v};static NgOnChangesFeature={name:`ɵɵNgOnChangesFeature`,moduleName:v};static ControlFeature={name:`ɵɵControlFeature`,moduleName:v};static InheritDefinitionFeature={name:`ɵɵInheritDefinitionFeature`,moduleName:v};static ProvidersFeature={name:`ɵɵProvidersFeature`,moduleName:v};static HostDirectivesFeature={name:`ɵɵHostDirectivesFeature`,moduleName:v};static ExternalStylesFeature={name:`ɵɵExternalStylesFeature`,moduleName:v};static listener={name:`ɵɵlistener`,moduleName:v};static getInheritedFactory={name:`ɵɵgetInheritedFactory`,moduleName:v};static sanitizeHtml={name:`ɵɵsanitizeHtml`,moduleName:v};static sanitizeStyle={name:`ɵɵsanitizeStyle`,moduleName:v};static validateAttribute={name:`ɵɵvalidateAttribute`,moduleName:v};static sanitizeResourceUrl={name:`ɵɵsanitizeResourceUrl`,moduleName:v};static sanitizeScript={name:`ɵɵsanitizeScript`,moduleName:v};static sanitizeUrl={name:`ɵɵsanitizeUrl`,moduleName:v};static sanitizeUrlOrResourceUrl={name:`ɵɵsanitizeUrlOrResourceUrl`,moduleName:v};static trustConstantHtml={name:`ɵɵtrustConstantHtml`,moduleName:v};static trustConstantResourceUrl={name:`ɵɵtrustConstantResourceUrl`,moduleName:v};static inputDecorator={name:`Input`,moduleName:v};static outputDecorator={name:`Output`,moduleName:v};static viewChildDecorator={name:`ViewChild`,moduleName:v};static viewChildrenDecorator={name:`ViewChildren`,moduleName:v};static contentChildDecorator={name:`ContentChild`,moduleName:v};static contentChildrenDecorator={name:`ContentChildren`,moduleName:v};static InputSignalBrandWriteType={name:`ɵINPUT_SIGNAL_BRAND_WRITE_TYPE`,moduleName:v};static UnwrapDirectiveSignalInputs={name:`ɵUnwrapDirectiveSignalInputs`,moduleName:v};static unwrapWritableSignal={name:`ɵunwrapWritableSignal`,moduleName:v};static assertType={name:`ɵassertType`,moduleName:v}}return e})();_.And,_.Bigger,_.BiggerEquals,_.BitwiseOr,_.BitwiseAnd,_.Divide,_.Assign,_.Equals,_.Identical,_.Lower,_.LowerEquals,_.Minus,_.Modulo,_.Exponentiation,_.Multiply,_.NotEquals,_.NotIdentical,_.NullishCoalesce,_.Or,_.Plus,_.In,_.InstanceOf,_.AdditionAssignment,_.SubtractionAssignment,_.MultiplicationAssignment,_.DivisionAssignment,_.RemainderAssignment,_.ExponentiationAssignment,_.AndAssignment,_.OrAssignment,_.NullishCoalesceAssignment;var Ct=class{span;sourceSpan;constructor(e,t){this.span=e,this.sourceSpan=t}toString(){return`AST`}},wt=class extends Ct{receiver;args;argumentSpan;constructor(e,t,n,r,i){super(e,t),this.receiver=n,this.args=r,this.argumentSpan=i}visit(e,t=null){return e.visitCall(this,t)}},Tt=(function(e){return e[e.Property=0]=`Property`,e[e.Attribute=1]=`Attribute`,e[e.Class=2]=`Class`,e[e.Style=3]=`Style`,e[e.LegacyAnimation=4]=`LegacyAnimation`,e[e.TwoWay=5]=`TwoWay`,e[e.Animation=6]=`Animation`,e})(Tt||{}),Et=`(:(where|is)\\()?`,Dt=`-shadowcsshost`,Ot=`-shadowcsscontext`,kt=`[^)(]*`,At=String.raw`(?:\(${kt}\)|${kt})+?`,jt=String.raw`(?:\(${At}\)|${kt})+?`,Mt=String.raw`(?:\((${jt})\))`;String.raw`(:nth-[-\w]+)`+Mt,Dt+Mt+``,`${Et}`,Ot+Mt+``;var Nt=(function(e){return e[e.ListEnd=0]=`ListEnd`,e[e.Statement=1]=`Statement`,e[e.Variable=2]=`Variable`,e[e.ElementStart=3]=`ElementStart`,e[e.Element=4]=`Element`,e[e.ForeignComponent=5]=`ForeignComponent`,e[e.Template=6]=`Template`,e[e.ElementEnd=7]=`ElementEnd`,e[e.ContainerStart=8]=`ContainerStart`,e[e.Container=9]=`Container`,e[e.ContainerEnd=10]=`ContainerEnd`,e[e.DisableBindings=11]=`DisableBindings`,e[e.ConditionalCreate=12]=`ConditionalCreate`,e[e.ConditionalBranchCreate=13]=`ConditionalBranchCreate`,e[e.Conditional=14]=`Conditional`,e[e.EnableBindings=15]=`EnableBindings`,e[e.Text=16]=`Text`,e[e.Listener=17]=`Listener`,e[e.InterpolateText=18]=`InterpolateText`,e[e.Binding=19]=`Binding`,e[e.Property=20]=`Property`,e[e.StyleProp=21]=`StyleProp`,e[e.ClassProp=22]=`ClassProp`,e[e.StyleMap=23]=`StyleMap`,e[e.ClassMap=24]=`ClassMap`,e[e.Advance=25]=`Advance`,e[e.Pipe=26]=`Pipe`,e[e.Attribute=27]=`Attribute`,e[e.ExtractedAttribute=28]=`ExtractedAttribute`,e[e.Defer=29]=`Defer`,e[e.DeferOn=30]=`DeferOn`,e[e.DeferWhen=31]=`DeferWhen`,e[e.I18nMessage=32]=`I18nMessage`,e[e.DomProperty=33]=`DomProperty`,e[e.Namespace=34]=`Namespace`,e[e.ProjectionDef=35]=`ProjectionDef`,e[e.EnableIncrementalHydrationRuntime=36]=`EnableIncrementalHydrationRuntime`,e[e.Projection=37]=`Projection`,e[e.Content=38]=`Content`,e[e.RepeaterCreate=39]=`RepeaterCreate`,e[e.Repeater=40]=`Repeater`,e[e.TwoWayProperty=41]=`TwoWayProperty`,e[e.TwoWayListener=42]=`TwoWayListener`,e[e.DeclareLet=43]=`DeclareLet`,e[e.StoreLet=44]=`StoreLet`,e[e.I18nStart=45]=`I18nStart`,e[e.I18n=46]=`I18n`,e[e.I18nEnd=47]=`I18nEnd`,e[e.I18nExpression=48]=`I18nExpression`,e[e.I18nApply=49]=`I18nApply`,e[e.IcuStart=50]=`IcuStart`,e[e.IcuEnd=51]=`IcuEnd`,e[e.IcuPlaceholder=52]=`IcuPlaceholder`,e[e.I18nContext=53]=`I18nContext`,e[e.I18nAttributes=54]=`I18nAttributes`,e[e.SourceLocation=55]=`SourceLocation`,e[e.Animation=56]=`Animation`,e[e.AnimationString=57]=`AnimationString`,e[e.AnimationBinding=58]=`AnimationBinding`,e[e.AnimationListener=59]=`AnimationListener`,e[e.Control=60]=`Control`,e[e.ControlCreate=61]=`ControlCreate`,e})(Nt||{}),Pt=(function(e){return e[e.LexicalRead=0]=`LexicalRead`,e[e.Context=1]=`Context`,e[e.TrackContext=2]=`TrackContext`,e[e.ReadVariable=3]=`ReadVariable`,e[e.NextContext=4]=`NextContext`,e[e.Reference=5]=`Reference`,e[e.StoreLet=6]=`StoreLet`,e[e.ContextLetReference=7]=`ContextLetReference`,e[e.GetCurrentView=8]=`GetCurrentView`,e[e.RestoreView=9]=`RestoreView`,e[e.ResetView=10]=`ResetView`,e[e.PureFunctionExpr=11]=`PureFunctionExpr`,e[e.PureFunctionParameterExpr=12]=`PureFunctionParameterExpr`,e[e.PipeBinding=13]=`PipeBinding`,e[e.PipeBindingVariadic=14]=`PipeBindingVariadic`,e[e.SafePropertyRead=15]=`SafePropertyRead`,e[e.SafeKeyedRead=16]=`SafeKeyedRead`,e[e.SafeNavigationMigration=17]=`SafeNavigationMigration`,e[e.SafeTernaryExpr=18]=`SafeTernaryExpr`,e[e.EmptyExpr=19]=`EmptyExpr`,e[e.AssignTemporaryExpr=20]=`AssignTemporaryExpr`,e[e.ReadTemporaryExpr=21]=`ReadTemporaryExpr`,e[e.SlotLiteralExpr=22]=`SlotLiteralExpr`,e[e.ConditionalCase=23]=`ConditionalCase`,e[e.ConstCollected=24]=`ConstCollected`,e[e.TwoWayBindingSet=25]=`TwoWayBindingSet`,e[e.ForeignContent=26]=`ForeignContent`,e[e.ArrowFunction=27]=`ArrowFunction`,e})(Pt||{}),Ft=(function(e){return e[e.None=0]=`None`,e[e.AlwaysInline=1]=`AlwaysInline`,e})(Ft||{}),It=(function(e){return e[e.Context=0]=`Context`,e[e.Identifier=1]=`Identifier`,e[e.SavedView=2]=`SavedView`,e[e.Alias=3]=`Alias`,e})(It||{}),Lt=(function(e){return e[e.Attribute=0]=`Attribute`,e[e.ClassName=1]=`ClassName`,e[e.StyleProperty=2]=`StyleProperty`,e[e.Property=3]=`Property`,e[e.Template=4]=`Template`,e[e.I18n=5]=`I18n`,e[e.LegacyAnimation=6]=`LegacyAnimation`,e[e.TwoWayProperty=7]=`TwoWayProperty`,e[e.Animation=8]=`Animation`,e})(Lt||{}),Rt=(function(e){return e[e.Creation=0]=`Creation`,e[e.Postproccessing=1]=`Postproccessing`,e})(Rt||{}),zt=(function(e){return e[e.I18nText=0]=`I18nText`,e[e.I18nAttribute=1]=`I18nAttribute`,e})(zt||{}),Bt=(function(e){return e[e.None=0]=`None`,e[e.ElementTag=1]=`ElementTag`,e[e.TemplateTag=2]=`TemplateTag`,e[e.OpenTag=4]=`OpenTag`,e[e.CloseTag=8]=`CloseTag`,e[e.ExpressionIndex=16]=`ExpressionIndex`,e})(Bt||{}),Vt=(function(e){return e[e.HTML=0]=`HTML`,e[e.SVG=1]=`SVG`,e[e.Math=2]=`Math`,e})(Vt||{}),Ht=(function(e){return e[e.Idle=0]=`Idle`,e[e.Immediate=1]=`Immediate`,e[e.Timer=2]=`Timer`,e[e.Hover=3]=`Hover`,e[e.Interaction=4]=`Interaction`,e[e.Viewport=5]=`Viewport`,e[e.Never=6]=`Never`,e})(Ht||{}),Ut=(function(e){return e[e.RootI18n=0]=`RootI18n`,e[e.Icu=1]=`Icu`,e[e.Attr=2]=`Attr`,e})(Ut||{}),Wt=(function(e){return e[e.NgTemplate=0]=`NgTemplate`,e[e.Structural=1]=`Structural`,e[e.Block=2]=`Block`,e})(Wt||{}),Gt=(function(e){return e[e.None=0]=`None`,e[e.InChildOperation=1]=`InChildOperation`,e[e.InArrowFunctionOperation=2]=`InArrowFunctionOperation`,e[e.InSafeNavigationMigration=4]=`InSafeNavigationMigration`,e})(Gt||{});Nt.Element,Nt.ElementStart,Nt.Container,Nt.ContainerStart,Nt.Template,Nt.RepeaterCreate,Nt.ConditionalCreate,Nt.ConditionalBranchCreate;var b=(function(e){return e[e.Tmpl=0]=`Tmpl`,e[e.Host=1]=`Host`,e[e.Both=2]=`Both`,e})(b||{}),Kt=(function(e){return e[e.Full=0]=`Full`,e[e.DomOnly=1]=`DomOnly`,e})(Kt||{});y.ariaProperty,y.ariaProperty,y.attribute,y.attribute,y.classProp,y.classProp,y.element,y.element,y.elementContainer,y.elementContainer,y.elementContainerEnd,y.elementContainerEnd,y.elementContainerStart,y.elementContainerStart,y.elementEnd,y.elementEnd,y.elementStart,y.elementStart,y.domProperty,y.domProperty,y.i18nExp,y.i18nExp,y.listener,y.listener,y.listener,y.listener,y.property,y.property,y.styleProp,y.styleProp,y.syntheticHostListener,y.syntheticHostListener,y.syntheticHostProperty,y.syntheticHostProperty,y.templateCreate,y.templateCreate,y.twoWayProperty,y.twoWayProperty,y.twoWayListener,y.twoWayListener,y.declareLet,y.declareLet,y.conditionalCreate,y.conditionalBranchCreate,y.conditionalBranchCreate,y.conditionalBranchCreate,y.domElement,y.domElement,y.domElementStart,y.domElementStart,y.domElementEnd,y.domElementEnd,y.domElementContainer,y.domElementContainer,y.domElementContainerStart,y.domElementContainerStart,y.domElementContainerEnd,y.domElementContainerEnd,y.domListener,y.domListener,y.domTemplate,y.domTemplate,y.animationEnter,y.animationEnter,y.animationLeave,y.animationLeave,y.animationEnterListener,y.animationEnterListener,y.animationLeaveListener,y.animationLeaveListener,_.And,_.Bigger,_.BiggerEquals,_.BitwiseOr,_.BitwiseAnd,_.Divide,_.Assign,_.Equals,_.Identical,_.Lower,_.LowerEquals,_.Minus,_.Modulo,_.Exponentiation,_.Multiply,_.NotEquals,_.NotIdentical,_.NullishCoalesce,_.Or,_.Plus,_.In,_.InstanceOf,_.AdditionAssignment,_.SubtractionAssignment,_.MultiplicationAssignment,_.DivisionAssignment,_.RemainderAssignment,_.ExponentiationAssignment,_.AndAssignment,_.OrAssignment,_.NullishCoalesceAssignment,Nt.Property,Nt.Property,Nt.Property,Nt.Attribute,Nt.Attribute,Nt.Property,Nt.TwoWayProperty,Nt.Container,Nt.ContainerStart,Nt.ContainerEnd,Nt.Element,Nt.ElementStart,Nt.ElementEnd,Nt.Template,Nt.ElementEnd,Nt.ElementStart,Nt.Element,Nt.ContainerEnd,Nt.ContainerStart,Nt.Container,Nt.I18nEnd,Nt.I18nStart,Nt.I18n,Nt.Pipe;var qt=` \f
-\r	\v ᠎ - \u2028\u2029  　`;`${qt}`,`${qt}`;var Jt=(function(e){return e[e.Character=0]=`Character`,e[e.Identifier=1]=`Identifier`,e[e.PrivateIdentifier=2]=`PrivateIdentifier`,e[e.Keyword=3]=`Keyword`,e[e.String=4]=`String`,e[e.Operator=5]=`Operator`,e[e.Number=6]=`Number`,e[e.RegExpBody=7]=`RegExpBody`,e[e.RegExpFlags=8]=`RegExpFlags`,e[e.Error=9]=`Error`,e})(Jt||{}),Yt=(function(e){return e[e.Plain=0]=`Plain`,e[e.TemplateLiteralPart=1]=`TemplateLiteralPart`,e[e.TemplateLiteralEnd=2]=`TemplateLiteralEnd`,e})(Yt||{});Jt.Character,Nt.StyleMap,Nt.ClassMap,Nt.StyleProp,Nt.ClassProp,Nt.Attribute,Nt.Property,Nt.Attribute,Nt.Control,Nt.DomProperty,Nt.DomProperty,Nt.Attribute,Nt.StyleMap,Nt.ClassMap,Nt.StyleProp,Nt.ClassProp,Nt.Listener,Nt.TwoWayListener,Nt.AnimationListener,Nt.StyleMap,Nt.ClassMap,Nt.StyleProp,Nt.ClassProp,Nt.Property,Nt.TwoWayProperty,Nt.DomProperty,Nt.Attribute,Nt.Animation,Nt.Control,Ht.Idle,y.deferOnIdle,y.deferPrefetchOnIdle,y.deferHydrateOnIdle,Ht.Immediate,y.deferOnImmediate,y.deferPrefetchOnImmediate,y.deferHydrateOnImmediate,Ht.Timer,y.deferOnTimer,y.deferPrefetchOnTimer,y.deferHydrateOnTimer,Ht.Hover,y.deferOnHover,y.deferPrefetchOnHover,y.deferHydrateOnHover,Ht.Interaction,y.deferOnInteraction,y.deferPrefetchOnInteraction,y.deferHydrateOnInteraction,Ht.Viewport,y.deferOnViewport,y.deferPrefetchOnViewport,y.deferHydrateOnViewport,Ht.Never,y.deferHydrateNever,y.deferHydrateNever,y.deferHydrateNever,y.pipeBind1,y.pipeBind2,y.pipeBind3,y.pipeBind4,y.textInterpolate,y.textInterpolate1,y.textInterpolate2,y.textInterpolate3,y.textInterpolate4,y.textInterpolate5,y.textInterpolate6,y.textInterpolate7,y.textInterpolate8,y.textInterpolateV,y.interpolate,y.interpolate1,y.interpolate2,y.interpolate3,y.interpolate4,y.interpolate5,y.interpolate6,y.interpolate7,y.interpolate8,y.interpolateV,y.pureFunction0,y.pureFunction1,y.pureFunction2,y.pureFunction3,y.pureFunction4,y.pureFunction5,y.pureFunction6,y.pureFunction7,y.pureFunction8,y.pureFunctionV,y.resolveWindow,y.resolveDocument,y.resolveBody,nt.HTML,y.sanitizeHtml,nt.RESOURCE_URL,y.sanitizeResourceUrl,nt.SCRIPT,y.sanitizeScript,nt.STYLE,y.sanitizeStyle,nt.URL,y.sanitizeUrl,nt.ATTRIBUTE_NO_BINDING,y.validateAttribute,nt.HTML,y.trustConstantHtml,nt.RESOURCE_URL,y.trustConstantResourceUrl;var Xt=(function(e){return e[e.None=0]=`None`,e[e.ViewContextRead=1]=`ViewContextRead`,e[e.ViewContextWrite=2]=`ViewContextWrite`,e[e.SideEffectful=4]=`SideEffectful`,e})(Xt||{});b.Tmpl,b.Tmpl,b.Both,b.Host,b.Tmpl,b.Tmpl,b.Tmpl,b.Both,b.Both,b.Both,b.Tmpl,b.Both,b.Both,b.Tmpl,b.Both,b.Tmpl,b.Both,b.Both,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Both,b.Both,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Both,b.Both,b.Both,b.Tmpl,b.Tmpl,b.Both,b.Tmpl,b.Tmpl,b.Tmpl,b.Both,b.Both,b.Tmpl,b.Both,b.Both,b.Both,b.Both,b.Both,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Both,b.Tmpl,b.Both,b.Tmpl,b.Both,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Tmpl,b.Both,b.Both,b.Both,Tt.Property,Lt.Property,Tt.TwoWay,Lt.TwoWayProperty,Tt.Attribute,Lt.Attribute,Tt.Class,Lt.ClassName,Tt.Style,Lt.StyleProperty,Tt.LegacyAnimation,Lt.LegacyAnimation,Tt.Animation,Lt.Animation;var Zt=`%COMP%`;`${Zt}`,`${Zt}`,class e{static SINGLETON=new e;static veWillInferAnyFor(t){let n=e.SINGLETON;return t instanceof wt?t.visit(n):t.receiver.visit(n)}visitUnary(e){return e.expr.visit(this)}visitBinary(e){return e.left.visit(this)||e.right.visit(this)}visitChain(){return!1}visitConditional(e){return e.condition.visit(this)||e.trueExp.visit(this)||e.falseExp.visit(this)}visitCall(){return!0}visitSafeCall(){return!1}visitImplicitReceiver(){return!1}visitThisReceiver(){return!1}visitInterpolation(e){return e.expressions.some(e=>e.visit(this))}visitKeyedRead(){return!1}visitLiteralArray(){return!0}visitLiteralMap(){return!0}visitLiteralPrimitive(){return!1}visitPipe(){return!0}visitPrefixNot(e){return e.expression.visit(this)}visitTypeofExpression(e){return e.expression.visit(this)}visitVoidExpression(e){return e.expression.visit(this)}visitNonNullAssert(e){return e.expression.visit(this)}visitPropertyRead(){return!1}visitSafePropertyRead(){return!1}visitSafeKeyedRead(){return!1}visitTemplateLiteral(){return!1}visitTemplateLiteralElement(){return!1}visitTaggedTemplateLiteral(){return!1}visitParenthesizedExpression(e){return e.expression.visit(this)}visitRegularExpressionLiteral(){return!1}visitSpreadElement(e){return e.expression.visit(this)}visitArrowFunction(e,t){return!1}};var Qt=null,$t=!1,en=1,tn=null,nn=Symbol(`SIGNAL`);function rn(e){let t=Qt;return Qt=e,t}function an(){return Qt}var on={version:0,lastCleanEpoch:0,dirty:!1,producers:void 0,producersTail:void 0,consumers:void 0,consumersTail:void 0,recomputing:!1,consumerAllowSignalWrites:!1,consumerIsAlwaysLive:!1,kind:`unknown`,producerMustRecompute:()=>!1,producerRecomputeValue:()=>{},consumerMarkedDirty:()=>{},consumerOnSignalRead:()=>{}};function sn(e){if($t)throw Error(``);if(Qt===null)return;Qt.consumerOnSignalRead(e);let t=Qt.producersTail;if(t!==void 0&&t.producer===e)return;let n,r=Qt.recomputing;if(r&&(n=t===void 0?Qt.producers:t.nextProducer,n!==void 0&&n.producer===e)){Qt.producersTail=n,n.lastReadVersion=e.version,n.knownValidAtEpoch=en;return}let i=e.consumersTail;if(i!==void 0&&i.consumer===Qt&&(!r||i.knownValidAtEpoch===en))return;let a=Sn(Qt),o={producer:e,consumer:Qt,nextProducer:n,prevConsumer:void 0,knownValidAtEpoch:en,lastReadVersion:e.version,nextConsumer:void 0};Qt.producersTail=o,t===void 0?Qt.producers=o:t.nextProducer=o,a&&bn(e,o)}function cn(){en++}function ln(e){if((!Sn(e)||e.dirty)&&(e.dirty||e.lastCleanEpoch!==en)){if(!e.producerMustRecompute(e)&&!vn(e)){pn(e);return}e.producerRecomputeValue(e),pn(e)}}function un(e){if(e.consumers===void 0)return;let t=$t;$t=!0;try{for(let t=e.consumers;t!==void 0;t=t.nextConsumer){let e=t.consumer;e.dirty||fn(e)}}finally{$t=t}}function dn(){return Qt?.consumerAllowSignalWrites!==!1}function fn(e){e.dirty=!0,un(e),e.consumerMarkedDirty?.(e)}function pn(e){e.dirty=!1,e.lastCleanEpoch=en}function mn(e){return e&&hn(e),rn(e)}function hn(e){if(e.producersTail?.knownValidAtEpoch===en){let t=e.producers;for(;t!==void 0;)t.knownValidAtEpoch=null,t=t.nextProducer}e.producersTail=void 0,e.recomputing=!0}function gn(e,t){rn(t),e&&_n(e)}function _n(e){e.recomputing=!1;let t=e.producersTail,n=t===void 0?e.producers:t.nextProducer;if(n!==void 0){if(Sn(e))do n=xn(n);while(n!==void 0);t===void 0?e.producers=void 0:t.nextProducer=void 0}}function vn(e){for(let t=e.producers;t!==void 0;t=t.nextProducer){let e=t.producer,n=t.lastReadVersion;if(n!==e.version||(ln(e),n!==e.version))return!0}return!1}function yn(e){if(Sn(e)){let t=e.producers;for(;t!==void 0;)t=xn(t)}e.producers=void 0,e.producersTail=void 0,e.consumers=void 0,e.consumersTail=void 0}function bn(e,t){let n=e.consumersTail,r=Sn(e);if(n===void 0?(t.nextConsumer=void 0,e.consumers=t):(t.nextConsumer=n.nextConsumer,n.nextConsumer=t),t.prevConsumer=n,e.consumersTail=t,!r)for(let t=e.producers;t!==void 0;t=t.nextProducer)bn(t.producer,t)}function xn(e){let t=e.producer,n=e.nextProducer,r=e.nextConsumer,i=e.prevConsumer;if(e.nextConsumer=void 0,e.prevConsumer=void 0,r===void 0?t.consumersTail=i:r.prevConsumer=i,i!==void 0)i.nextConsumer=r;else if(t.consumers=r,!Sn(t)){let e=t.producers;for(;e!==void 0;)e=xn(e)}return n}function Sn(e){return e.consumerIsAlwaysLive||e.consumers!==void 0}function Cn(e){tn?.(e)}function wn(e,t){return Object.is(e,t)}function Tn(e,t){let n=Object.create(dee);n.computation=e,t!==void 0&&(n.equal=t);let r=()=>{if(ln(n),sn(n),n.value===On)throw n.error;return n.value};return r[nn]=n,Cn(n),r}var En=Symbol(`UNSET`),Dn=Symbol(`COMPUTING`),On=Symbol(`ERRORED`),dee={...on,value:En,dirty:!0,error:null,equal:wn,kind:`computed`,producerMustRecompute(e){return e.value===En||e.value===Dn},producerRecomputeValue(e){if(e.value===Dn)throw Error(``);let t=e.value;e.value=Dn;let n=mn(e),r,i=!1;try{r=e.computation(),rn(null),i=t!==En&&t!==On&&r!==On&&e.equal(t,r)}catch(t){r=On,e.error=t}finally{gn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function fee(){throw Error()}var kn=fee;function An(e){kn(e)}function pee(e){kn=e}var mee=null;function hee(e,t){let n=Object.create(Nn);n.value=e,t!==void 0&&(n.equal=t);let r=()=>gee(n);return r[nn]=n,Cn(n),[r,e=>jn(n,e),e=>Mn(n,e)]}function gee(e){return sn(e),e.value}function jn(e,t){dn()||An(e),e.equal(e.value,t)||(e.value=t,Pn(e))}function Mn(e,t){dn()||An(e),jn(e,t(e.value))}var Nn={...on,equal:wn,value:void 0,kind:`signal`};function Pn(e){e.version++,cn(),un(e),mee?.(e)}var Fn={...on,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,dirty:!0,kind:`effect`};function In(e){if(e.dirty=!1,e.version>0&&!vn(e))return;e.version++;let t=mn(e);try{e.cleanup(),e.fn()}finally{gn(e,t)}}var Ln=void 0;function Rn(){return Ln}function zn(e){let t=Ln;return Ln=e,t}var Bn=Symbol(`NotFound`);function Vn(e){return e===Bn||e?.name===`ɵNotFound`}function Hn(e,t,n){let r=Object.create(Gn);r.source=e,r.computation=t,n!=null&&(r.equal=n);let i=()=>{if(ln(r),sn(r),r.value===On)throw r.error;return r.value};return i[nn]=r,Cn(r),i}function Un(e,t){ln(e),jn(e,t),pn(e)}function Wn(e,t){if(ln(e),e.value===On)throw e.error;Mn(e,t),pn(e)}var Gn={...on,value:En,dirty:!0,error:null,equal:wn,kind:`linkedSignal`,producerMustRecompute(e){return e.value===En||e.value===Dn},producerRecomputeValue(e){if(e.value===Dn)throw Error(``);let t=e.value;e.value=Dn;let n=mn(e),r,i=!1;try{let n=e.source(),a=t!==En&&t!==On,o=a?{source:e.sourceValue,value:t}:void 0;r=e.computation(n,o),e.sourceValue=n,rn(null),i=a&&r!==On&&e.equal(t,r)}catch(t){r=On,e.error=t}finally{gn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function Kn(e){let t=rn(null);try{return e()}finally{rn(t)}}var qn=function(e,t){return qn=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},qn(e,t)};function Jn(e,t){if(typeof t!=`function`&&t!==null)throw TypeError(`Class extends value `+String(t)+` is not a constructor or null`);qn(e,t);function n(){this.constructor=e}e.prototype=t===null?Object.create(t):(n.prototype=t.prototype,new n)}function Yn(e,t,n,r){function i(e){return e instanceof n?e:new n(function(t){t(e)})}return new(n||=Promise)(function(n,a){function o(e){try{c(r.next(e))}catch(e){a(e)}}function s(e){try{c(r.throw(e))}catch(e){a(e)}}function c(e){e.done?n(e.value):i(e.value).then(o,s)}c((r=r.apply(e,t||[])).next())})}function Xn(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,o=Object.create((typeof Iterator==`function`?Iterator:Object).prototype);return o.next=s(0),o.throw=s(1),o.return=s(2),typeof Symbol==`function`&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(t){return c([e,t])}}function c(s){if(r)throw TypeError(`Generator is already executing.`);for(;o&&(o=0,s[0]&&(n=0)),n;)try{if(r=1,i&&(a=s[0]&2?i.return:s[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,s[1])).done)return a;switch(i=0,a&&(s=[s[0]&2,a.value]),s[0]){case 0:case 1:a=s;break;case 4:return n.label++,{value:s[1],done:!1};case 5:n.label++,i=s[1],s=[0];continue;case 7:s=n.ops.pop(),n.trys.pop();continue;default:if(a=n.trys,!(a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){n.label=s[1];break}if(s[0]===6&&n.label<a[1]){n.label=a[1],a=s;break}if(a&&n.label<a[2]){n.label=a[2],n.ops.push(s);break}a[2]&&n.ops.pop(),n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e],i=0}finally{r=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}}function Zn(e){var t=typeof Symbol==`function`&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&typeof e.length==`number`)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw TypeError(t?`Object is not iterable.`:`Symbol.iterator is not defined.`)}function Qn(e,t){var n=typeof Symbol==`function`&&e[Symbol.iterator];if(!n)return e;var r=n.call(e),i,a=[],o;try{for(;(t===void 0||t-->0)&&!(i=r.next()).done;)a.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return a}function $n(e,t,n){if(n||arguments.length===2)for(var r=0,i=t.length,a;r<i;r++)(a||!(r in t))&&(a||=Array.prototype.slice.call(t,0,r),a[r]=t[r]);return e.concat(a||Array.prototype.slice.call(t))}function er(e){return this instanceof er?(this.v=e,this):new er(e)}function tr(e,t,n){if(!Symbol.asyncIterator)throw TypeError(`Symbol.asyncIterator is not defined.`);var r=n.apply(e,t||[]),i,a=[];return i=Object.create((typeof AsyncIterator==`function`?AsyncIterator:Object).prototype),s(`next`),s(`throw`),s(`return`,o),i[Symbol.asyncIterator]=function(){return this},i;function o(e){return function(t){return Promise.resolve(t).then(e,d)}}function s(e,t){r[e]&&(i[e]=function(t){return new Promise(function(n,r){a.push([e,t,n,r])>1||c(e,t)})},t&&(i[e]=t(i[e])))}function c(e,t){try{l(r[e](t))}catch(e){f(a[0][3],e)}}function l(e){e.value instanceof er?Promise.resolve(e.value.v).then(u,d):f(a[0][2],e)}function u(e){c(`next`,e)}function d(e){c(`throw`,e)}function f(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function nr(e){if(!Symbol.asyncIterator)throw TypeError(`Symbol.asyncIterator is not defined.`);var t=e[Symbol.asyncIterator],n;return t?t.call(e):(e=typeof Zn==`function`?Zn(e):e[Symbol.iterator](),n={},r(`next`),r(`throw`),r(`return`),n[Symbol.asyncIterator]=function(){return this},n);function r(t){n[t]=e[t]&&function(n){return new Promise(function(r,a){n=e[t](n),i(r,a,n.done,n.value)})}}function i(e,t,n,r){Promise.resolve(r).then(function(t){e({value:t,done:n})},t)}}function rr(e){return typeof e==`function`}function ir(e){var t=e(function(e){Error.call(e),e.stack=Error().stack});return t.prototype=Object.create(Error.prototype),t.prototype.constructor=t,t}var ar=ir(function(e){return function(t){e(this),this.message=t?t.length+` errors occurred during unsubscription:
-`+t.map(function(e,t){return t+1+`) `+e.toString()}).join(`
-  `):``,this.name=`UnsubscriptionError`,this.errors=t}});function or(e,t){if(e){var n=e.indexOf(t);0<=n&&e.splice(n,1)}}var sr=function(){function e(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}return e.prototype.unsubscribe=function(){var e,t,n,r,i;if(!this.closed){this.closed=!0;var a=this._parentage;if(a){if(this._parentage=null,Array.isArray(a))try{for(var o=Zn(a),s=o.next();!s.done;s=o.next())s.value.remove(this)}catch(t){e={error:t}}finally{try{s&&!s.done&&(t=o.return)&&t.call(o)}finally{if(e)throw e.error}}else a.remove(this)}var c=this.initialTeardown;if(rr(c))try{c()}catch(e){i=e instanceof ar?e.errors:[e]}var l=this._finalizers;if(l){this._finalizers=null;try{for(var u=Zn(l),d=u.next();!d.done;d=u.next()){var f=d.value;try{ur(f)}catch(e){i??=[],e instanceof ar?i=$n($n([],Qn(i)),Qn(e.errors)):i.push(e)}}}catch(e){n={error:e}}finally{try{d&&!d.done&&(r=u.return)&&r.call(u)}finally{if(n)throw n.error}}}if(i)throw new ar(i)}},e.prototype.add=function(t){if(t&&t!==this){if(this.closed)ur(t);else{if(t instanceof e){if(t.closed||t._hasParent(this))return;t._addParent(this)}(this._finalizers=this._finalizers??[]).push(t)}}},e.prototype._hasParent=function(e){var t=this._parentage;return t===e||Array.isArray(t)&&t.includes(e)},e.prototype._addParent=function(e){var t=this._parentage;this._parentage=Array.isArray(t)?(t.push(e),t):t?[t,e]:e},e.prototype._removeParent=function(e){var t=this._parentage;t===e?this._parentage=null:Array.isArray(t)&&or(t,e)},e.prototype.remove=function(t){var n=this._finalizers;n&&or(n,t),t instanceof e&&t._removeParent(this)},e.EMPTY=(function(){var t=new e;return t.closed=!0,t})(),e}(),cr=sr.EMPTY;function lr(e){return e instanceof sr||e&&`closed`in e&&rr(e.remove)&&rr(e.add)&&rr(e.unsubscribe)}function ur(e){rr(e)?e():e.unsubscribe()}var dr={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},fr={setTimeout:function(e,t){var n=[...arguments].slice(2),r=fr.delegate;return r?.setTimeout?r.setTimeout.apply(r,$n([e,t],Qn(n))):setTimeout.apply(void 0,$n([e,t],Qn(n)))},clearTimeout:function(e){return(fr.delegate?.clearTimeout||clearTimeout)(e)},delegate:void 0};function pr(e){fr.setTimeout(function(){var t=dr.onUnhandledError;if(t)t(e);else throw e})}function mr(){}var hr=(function(){return vr(`C`,void 0,void 0)})();function gr(e){return vr(`E`,void 0,e)}function _r(e){return vr(`N`,e,void 0)}function vr(e,t,n){return{kind:e,value:t,error:n}}var yr=null;function br(e){if(dr.useDeprecatedSynchronousErrorHandling){var t=!yr;if(t&&(yr={errorThrown:!1,error:null}),e(),t){var n=yr,r=n.errorThrown,i=n.error;if(yr=null,r)throw i}}else e()}function xr(e){dr.useDeprecatedSynchronousErrorHandling&&yr&&(yr.errorThrown=!0,yr.error=e)}var Sr=function(e){Jn(t,e);function t(t){var n=e.call(this)||this;return n.isStopped=!1,t?(n.destination=t,lr(t)&&t.add(n)):n.destination=Ar,n}return t.create=function(e,t,n){return new Er(e,t,n)},t.prototype.next=function(e){this.isStopped?kr(_r(e),this):this._next(e)},t.prototype.error=function(e){this.isStopped?kr(gr(e),this):(this.isStopped=!0,this._error(e))},t.prototype.complete=function(){this.isStopped?kr(hr,this):(this.isStopped=!0,this._complete())},t.prototype.unsubscribe=function(){this.closed||(this.isStopped=!0,e.prototype.unsubscribe.call(this),this.destination=null)},t.prototype._next=function(e){this.destination.next(e)},t.prototype._error=function(e){try{this.destination.error(e)}finally{this.unsubscribe()}},t.prototype._complete=function(){try{this.destination.complete()}finally{this.unsubscribe()}},t}(sr),Cr=Function.prototype.bind;function wr(e,t){return Cr.call(e,t)}var Tr=function(){function e(e){this.partialObserver=e}return e.prototype.next=function(e){var t=this.partialObserver;if(t.next)try{t.next(e)}catch(e){Dr(e)}},e.prototype.error=function(e){var t=this.partialObserver;if(t.error)try{t.error(e)}catch(e){Dr(e)}else Dr(e)},e.prototype.complete=function(){var e=this.partialObserver;if(e.complete)try{e.complete()}catch(e){Dr(e)}},e}(),Er=function(e){Jn(t,e);function t(t,n,r){var i=e.call(this)||this,a;if(rr(t)||!t)a={next:t??void 0,error:n??void 0,complete:r??void 0};else{var o;i&&dr.useDeprecatedNextContext?(o=Object.create(t),o.unsubscribe=function(){return i.unsubscribe()},a={next:t.next&&wr(t.next,o),error:t.error&&wr(t.error,o),complete:t.complete&&wr(t.complete,o)}):a=t}return i.destination=new Tr(a),i}return t}(Sr);function Dr(e){dr.useDeprecatedSynchronousErrorHandling?xr(e):pr(e)}function Or(e){throw e}function kr(e,t){var n=dr.onStoppedNotification;n&&fr.setTimeout(function(){return n(e,t)})}var Ar={closed:!0,next:mr,error:Or,complete:mr},jr=(function(){return typeof Symbol==`function`&&Symbol.observable||`@@observable`})();function Mr(e){return e}function Nr(e){return e.length===0?Mr:e.length===1?e[0]:function(t){return e.reduce(function(e,t){return t(e)},t)}}var Pr=function(){function e(e){e&&(this._subscribe=e)}return e.prototype.lift=function(t){var n=new e;return n.source=this,n.operator=t,n},e.prototype.subscribe=function(e,t,n){var r=this,i=Lr(e)?e:new Er(e,t,n);return br(function(){var e=r,t=e.operator,n=e.source;i.add(t?t.call(i,n):n?r._subscribe(i):r._trySubscribe(i))}),i},e.prototype._trySubscribe=function(e){try{return this._subscribe(e)}catch(t){e.error(t)}},e.prototype.forEach=function(e,t){var n=this;return t=Fr(t),new t(function(t,r){var i=new Er({next:function(t){try{e(t)}catch(e){r(e),i.unsubscribe()}},error:r,complete:t});n.subscribe(i)})},e.prototype._subscribe=function(e){return this.source?.subscribe(e)},e.prototype[jr]=function(){return this},e.prototype.pipe=function(){return Nr([...arguments])(this)},e.prototype.toPromise=function(e){var t=this;return e=Fr(e),new e(function(e,n){var r;t.subscribe(function(e){return r=e},function(e){return n(e)},function(){return e(r)})})},e.create=function(t){return new e(t)},e}();function Fr(e){return e??dr.Promise??Promise}function Ir(e){return e&&rr(e.next)&&rr(e.error)&&rr(e.complete)}function Lr(e){return e&&e instanceof Sr||Ir(e)&&lr(e)}function Rr(e){return rr(e?.lift)}function zr(e){return function(t){if(Rr(t))return t.lift(function(t){try{return e(t,this)}catch(e){this.error(e)}});throw TypeError(`Unable to lift unknown Observable type`)}}function Br(e,t,n,r,i){return new Vr(e,t,n,r,i)}var Vr=function(e){Jn(t,e);function t(t,n,r,i,a,o){var s=e.call(this,t)||this;return s.onFinalize=a,s.shouldUnsubscribe=o,s._next=n?function(e){try{n(e)}catch(e){t.error(e)}}:e.prototype._next,s._error=i?function(e){try{i(e)}catch(e){t.error(e)}finally{this.unsubscribe()}}:e.prototype._error,s._complete=r?function(){try{r()}catch(e){t.error(e)}finally{this.unsubscribe()}}:e.prototype._complete,s}return t.prototype.unsubscribe=function(){var t;if(!this.shouldUnsubscribe||this.shouldUnsubscribe()){var n=this.closed;e.prototype.unsubscribe.call(this),!n&&((t=this.onFinalize)==null||t.call(this))}},t}(Sr),Hr=ir(function(e){return function(){e(this),this.name=`ObjectUnsubscribedError`,this.message=`object unsubscribed`}}),Ur=function(e){Jn(t,e);function t(){var t=e.call(this)||this;return t.closed=!1,t.currentObservers=null,t.observers=[],t.isStopped=!1,t.hasError=!1,t.thrownError=null,t}return t.prototype.lift=function(e){var t=new Wr(this,this);return t.operator=e,t},t.prototype._throwIfClosed=function(){if(this.closed)throw new Hr},t.prototype.next=function(e){var t=this;br(function(){var n,r;if(t._throwIfClosed(),!t.isStopped){t.currentObservers||=Array.from(t.observers);try{for(var i=Zn(t.currentObservers),a=i.next();!a.done;a=i.next())a.value.next(e)}catch(e){n={error:e}}finally{try{a&&!a.done&&(r=i.return)&&r.call(i)}finally{if(n)throw n.error}}}})},t.prototype.error=function(e){var t=this;br(function(){if(t._throwIfClosed(),!t.isStopped){t.hasError=t.isStopped=!0,t.thrownError=e;for(var n=t.observers;n.length;)n.shift().error(e)}})},t.prototype.complete=function(){var e=this;br(function(){if(e._throwIfClosed(),!e.isStopped){e.isStopped=!0;for(var t=e.observers;t.length;)t.shift().complete()}})},t.prototype.unsubscribe=function(){this.isStopped=this.closed=!0,this.observers=this.currentObservers=null},Object.defineProperty(t.prototype,"observed",{get:function(){return this.observers?.length>0},enumerable:!1,configurable:!0}),t.prototype._trySubscribe=function(t){return this._throwIfClosed(),e.prototype._trySubscribe.call(this,t)},t.prototype._subscribe=function(e){return this._throwIfClosed(),this._checkFinalizedStatuses(e),this._innerSubscribe(e)},t.prototype._innerSubscribe=function(e){var t=this,n=this,r=n.hasError,i=n.isStopped,a=n.observers;return r||i?cr:(this.currentObservers=null,a.push(e),new sr(function(){t.currentObservers=null,or(a,e)}))},t.prototype._checkFinalizedStatuses=function(e){var t=this,n=t.hasError,r=t.thrownError,i=t.isStopped;n?e.error(r):i&&e.complete()},t.prototype.asObservable=function(){var e=new Pr;return e.source=this,e},t.create=function(e,t){return new Wr(e,t)},t}(Pr),Wr=function(e){Jn(t,e);function t(t,n){var r=e.call(this)||this;return r.destination=t,r.source=n,r}return t.prototype.next=function(e){var t,n;(n=(t=this.destination)?.next)==null||n.call(t,e)},t.prototype.error=function(e){var t,n;(n=(t=this.destination)?.error)==null||n.call(t,e)},t.prototype.complete=function(){var e,t;(t=(e=this.destination)?.complete)==null||t.call(e)},t.prototype._subscribe=function(e){return this.source?.subscribe(e)??cr},t}(Ur),Gr=function(e){Jn(t,e);function t(t){var n=e.call(this)||this;return n._value=t,n}return Object.defineProperty(t.prototype,"value",{get:function(){return this.getValue()},enumerable:!1,configurable:!0}),t.prototype._subscribe=function(t){var n=e.prototype._subscribe.call(this,t);return!n.closed&&t.next(this._value),n},t.prototype.getValue=function(){var e=this,t=e.hasError,n=e.thrownError,r=e._value;if(t)throw n;return this._throwIfClosed(),r},t.prototype.next=function(t){e.prototype.next.call(this,this._value=t)},t}(Ur);function Kr(e){return e[e.length-1]}function qr(e){return rr(Kr(e))?e.pop():void 0}var Jr=(function(e){return e&&typeof e.length==`number`&&typeof e!=`function`});function Yr(e){return rr(e?.then)}function Xr(e){return rr(e[jr])}function Zr(e){return Symbol.asyncIterator&&rr(e?.[Symbol.asyncIterator])}function Qr(e){return TypeError(`You provided `+(typeof e==`object`&&e?`an invalid object`:`'`+e+`'`)+` where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.`)}function $r(){return typeof Symbol!=`function`||!Symbol.iterator?`@@iterator`:Symbol.iterator}var ei=$r();function ti(e){return rr(e?.[ei])}function ni(e){return tr(this,arguments,function(){var t,n,r,i;return Xn(this,function(a){switch(a.label){case 0:t=e.getReader(),a.label=1;case 1:a.trys.push([1,,9,10]),a.label=2;case 2:return[4,er(t.read())];case 3:return n=a.sent(),r=n.value,i=n.done,i?[4,er(void 0)]:[3,5];case 4:return[2,a.sent()];case 5:return[4,er(r)];case 6:return[4,a.sent()];case 7:return a.sent(),[3,2];case 8:return[3,10];case 9:return t.releaseLock(),[7];case 10:return[2]}})})}function ri(e){return rr(e?.getReader)}function ii(e){if(e instanceof Pr)return e;if(e!=null){if(Xr(e))return _ee(e);if(Jr(e))return vee(e);if(Yr(e))return yee(e);if(Zr(e))return ai(e);if(ti(e))return bee(e);if(ri(e))return xee(e)}throw Qr(e)}function _ee(e){return new Pr(function(t){var n=e[jr]();if(rr(n.subscribe))return n.subscribe(t);throw TypeError(`Provided object does not correctly implement Symbol.observable`)})}function vee(e){return new Pr(function(t){for(var n=0;n<e.length&&!t.closed;n++)t.next(e[n]);t.complete()})}function yee(e){return new Pr(function(t){e.then(function(e){t.closed||(t.next(e),t.complete())},function(e){return t.error(e)}).then(null,pr)})}function bee(e){return new Pr(function(t){var n,r;try{for(var i=Zn(e),a=i.next();!a.done;a=i.next()){var o=a.value;if(t.next(o),t.closed)return}}catch(e){n={error:e}}finally{try{a&&!a.done&&(r=i.return)&&r.call(i)}finally{if(n)throw n.error}}t.complete()})}function ai(e){return new Pr(function(t){See(e,t).catch(function(e){return t.error(e)})})}function xee(e){return ai(ni(e))}function See(e,t){var n,r,i,a;return Yn(this,void 0,void 0,function(){var o,s;return Xn(this,function(c){switch(c.label){case 0:c.trys.push([0,5,6,11]),n=nr(e),c.label=1;case 1:return[4,n.next()];case 2:if(r=c.sent(),r.done)return[3,4];if(o=r.value,t.next(o),t.closed)return[2];c.label=3;case 3:return[3,1];case 4:return[3,11];case 5:return s=c.sent(),i={error:s},[3,11];case 6:return c.trys.push([6,,9,10]),r&&!r.done&&(a=n.return)?[4,a.call(n)]:[3,8];case 7:c.sent(),c.label=8;case 8:return[3,10];case 9:if(i)throw i.error;return[7];case 10:return[7];case 11:return t.complete(),[2]}})})}function oi(e,t,n,r,i){r===void 0&&(r=0),i===void 0&&(i=!1);var a=t.schedule(function(){n(),i?e.add(this.schedule(null,r)):this.unsubscribe()},r);if(e.add(a),!i)return a}function si(e,t){return t===void 0&&(t=0),zr(function(n,r){n.subscribe(Br(r,function(n){return oi(r,e,function(){return r.next(n)},t)},function(){return oi(r,e,function(){return r.complete()},t)},function(n){return oi(r,e,function(){return r.error(n)},t)}))})}function ci(e,t){return t===void 0&&(t=0),zr(function(n,r){r.add(e.schedule(function(){return n.subscribe(r)},t))})}function Cee(e,t){return ii(e).pipe(ci(t),si(t))}function wee(e,t){return ii(e).pipe(ci(t),si(t))}function Tee(e,t){return new Pr(function(n){var r=0;return t.schedule(function(){r===e.length?n.complete():(n.next(e[r++]),n.closed||this.schedule())})})}function Eee(e,t){return new Pr(function(n){var r;return oi(n,t,function(){r=e[ei](),oi(n,t,function(){var e,t,i;try{e=r.next(),t=e.value,i=e.done}catch(e){n.error(e);return}i?n.complete():n.next(t)},0,!0)}),function(){return rr(r?.return)&&r.return()}})}function li(e,t){if(!e)throw Error(`Iterable cannot be null`);return new Pr(function(n){oi(n,t,function(){var r=e[Symbol.asyncIterator]();oi(n,t,function(){r.next().then(function(e){e.done?n.complete():n.next(e.value)})},0,!0)})})}function Dee(e,t){return li(ni(e),t)}function Oee(e,t){if(e!=null){if(Xr(e))return Cee(e,t);if(Jr(e))return Tee(e,t);if(Yr(e))return wee(e,t);if(Zr(e))return li(e,t);if(ti(e))return Eee(e,t);if(ri(e))return Dee(e,t)}throw Qr(e)}function kee(e,t){return t?Oee(e,t):ii(e)}function ui(e,t){return zr(function(n,r){var i=0;n.subscribe(Br(r,function(n){r.next(e.call(t,n,i++))}))})}var Aee=Array.isArray;function jee(e,t){return Aee(t)?e.apply(void 0,$n([],Qn(t))):e(t)}function Mee(e){return ui(function(t){return jee(e,t)})}var Nee=Array.isArray,Pee=Object.getPrototypeOf,Fee=Object.prototype,Iee=Object.keys;function Lee(e){if(e.length===1){var t=e[0];if(Nee(t))return{args:t,keys:null};if(Ree(t)){var n=Iee(t);return{args:n.map(function(e){return t[e]}),keys:n}}}return{args:e,keys:null}}function Ree(e){return e&&typeof e==`object`&&Pee(e)===Fee}function zee(e,t){return e.reduce(function(e,n,r){return e[n]=t[r],e},{})}function Bee(){var e=[...arguments],t=qr(e),n=Lee(e),r=n.args,i=n.keys,a=new Pr(function(e){var t=r.length;if(!t){e.complete();return}for(var n=Array(t),a=t,o=t,s=function(t){var s=!1;ii(r[t]).subscribe(Br(e,function(e){s||(s=!0,o--),n[t]=e},function(){return a--},void 0,function(){(!a||!s)&&(o||e.next(i?zee(i,n):n),e.complete())}))},c=0;c<t;c++)s(c)});return t?a.pipe(Mee(t)):a}var di=`https://angular.dev/best-practices/security#preventing-cross-site-scripting-xss`,fi=class extends Error{code;constructor(e,t){super(pi(e,t)),this.code=e}};function Vee(e){return`NG0${Math.abs(e)}`}function pi(e,t){return`${Vee(e)}${t?`: `+t:``}`}function mi(e){for(let t in e)if(e[t]===mi)return t;throw Error(``)}function Hee(e,t){for(let n in t)Object.hasOwn(t,n)&&!Object.hasOwn(e,n)&&(e[n]=t[n])}function hi(e){if(typeof e==`string`)return e;if(Array.isArray(e))return`[${e.map(hi).join(`, `)}]`;if(e==null)return``+e;let t=e.overriddenName||e.name;if(t)return`${t}`;let n=e.toString();if(n==null)return``+n;let r=n.indexOf(`
-`);return r>=0?n.slice(0,r):n}function gi(e,t){return e?t?`${e} ${t}`:e:t||``}var Uee=mi({__forward_ref__:mi});function _i(e){return e.__forward_ref__=_i,e}function vi(e){return yi(e)?e():e}function yi(e){return typeof e==`function`&&Object.hasOwn(e,Uee)&&e.__forward_ref__===_i}function bi(e){return{token:e.token,providedIn:e.providedIn||null,factory:e.factory,value:void 0}}function xi(e){return Si(e,Ti)}function Si(e,t){return Object.hasOwn(e,t)&&e[t]||null}function Ci(e){return(e?.[Ti]??null)||null}function wi(e){return e&&Object.hasOwn(e,Ei)?e[Ei]:null}var Ti=mi({ɵprov:mi}),Ei=mi({ɵinj:mi}),Di=class{_desc;ngMetadataName=`InjectionToken`;ɵprov;constructor(e,t){this._desc=e,this.ɵprov=void 0,typeof t==`number`?this.__NG_ELEMENT_ID__=t:t!==void 0&&(this.ɵprov=bi({token:this,providedIn:t.providedIn||`root`,factory:t.factory}))}get multi(){return this}toString(){return`InjectionToken ${this._desc}`}};function Oi(e){return e&&!!e.ɵproviders}var ki=mi({ɵcmp:mi}),Ai=mi({ɵdir:mi}),ji=mi({ɵpipe:mi}),Mi=mi({ɵfac:mi}),Ni=mi({__NG_ELEMENT_ID__:mi}),Pi=mi({__NG_ENV_ID__:mi});function Fi(e){return Ri(e,`@Component`),e[ki]||null}function Ii(e){return Ri(e,`@Directive`),e[Ai]||null}function Li(e){return Ri(e,`@Pipe`),e[ji]||null}function Ri(e,t){if(e==null)throw new fi(-919,!1)}function zi(e){return typeof e==`string`?e:e==null?``:String(e)}var Bi=mi({ngErrorCode:mi}),Vi=mi({ngErrorMessage:mi}),Hi=mi({ngTokenPath:mi});function Ui(e,t){return Gi(``,-200,t)}function Wi(e,t){throw new fi(-201,!1)}function Gi(e,t,n){let r=new fi(t,e);return r[Bi]=t,r[Vi]=e,n&&(r[Hi]=n),r}function Ki(e){return e[Bi]}var qi;function Ji(){return qi}function Yi(e){let t=qi;return qi=e,t}function Xi(e,t,n){let r=xi(e);if(r&&r.providedIn==`root`)return r.value===void 0?r.value=r.factory():r.value;if(n&8)return null;if(t!==void 0)return t;Wi(e,``)}var Zi=globalThis,Qi={},$i=`__NG_DI_FLAG__`,ea=class{injector;constructor(e){this.injector=e}retrieve(e,t){let n=ra(t)||0;try{return this.injector.get(e,n&8?null:Qi,n)}catch(e){if(Vn(e))return e;throw e}}};function ta(e,t=0){let n=Rn();if(n===void 0)throw new fi(-203,!1);if(n===null)return Xi(e,void 0,t);{let r=ia(t),i=n.retrieve(e,r);if(Vn(i)){if(r.optional)return null;throw i}return i}}function na(e,t=0){return(Ji()||ta)(vi(e),t)}function x(e,t){return na(e,ra(t))}function ra(e){return e===void 0||typeof e==`number`?e:0|(e.optional&&8)|(e.host&&1)|(e.self&&2)|(e.skipSelf&&4)}function ia(e){return{optional:!!(e&8),host:!!(e&1),self:!!(e&2),skipSelf:!!(e&4)}}function aa(e){let t=[];for(let n=0;n<e.length;n++){let r=vi(e[n]);if(Array.isArray(r)){if(r.length===0)throw new fi(900,!1);let e,n=0;for(let t=0;t<r.length;t++){let i=r[t],a=oa(i);typeof a==`number`?a===-1?e=i.token:n|=a:e=i}t.push(na(e,n))}else t.push(na(r))}return t}function oa(e){return e[$i]}function sa(e,t){return Object.hasOwn(e,Mi)?e[Mi]:null}function ca(e,t,n){if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++){let i=e[r],a=t[r];if(n&&(i=n(i),a=n(a)),a!==i)return!1}return!0}function la(e){return e.flat(1/0)}function ua(e,t){e.forEach(e=>Array.isArray(e)?ua(e,t):t(e))}function da(e,t,n){t>=e.length?e.push(n):e.splice(t,0,n)}function fa(e,t){return t>=e.length-1?e.pop():e.splice(t,1)[0]}function pa(e,t){let n=[];for(let r=0;r<e;r++)n.push(t);return n}function ma(e,t,n,r){let i=e.length;if(i==t)e.push(n,r);else if(i===1)e.push(r,e[0]),e[0]=n;else{for(i--,e.push(e[i-1],e[i]);i>t;){let t=i-2;e[i]=e[t],i--}e[t]=n,e[t+1]=r}}function ha(e,t,n){let r=_a(e,t);return r>=0?e[r|1]=n:(r=~r,ma(e,r,t,n)),r}function ga(e,t){let n=_a(e,t);if(n>=0)return e[n|1]}function _a(e,t){return va(e,t,1)}function va(e,t,n){let r=0,i=e.length>>n;for(;i!==r;){let a=r+(i-r>>1),o=e[a<<n];if(t===o)return a<<n;o>t?i=a:r=a+1}return~(i<<n)}var ya={},ba=[],xa=new Di(``),Sa=new Di(``,-1),Ca=new Di(``),wa=class{get(e,t=Qi){if(t===Qi){let e=Gi(``,-201);throw e.name=`ɵNotFound`,e}return t}};function Ta(...e){return{ɵproviders:Ea(!0,e),ɵfromNgModule:!0}}function Ea(e,...t){let n=[],r=new Set,i,a=e=>{n.push(e)};return ua(t,e=>{let t=e;Oa(t,a,[],r)&&(i||=[],i.push(t))}),i!==void 0&&Da(i,a),n}function Da(e,t){for(let n=0;n<e.length;n++){let{ngModule:r,providers:i}=e[n];ka(i,e=>{t(e,r)})}}function Oa(e,t,n,r){if(e=vi(e),!e)return!1;let i=null,a=wi(e),o=!a&&Fi(e);if(!a&&!o){let t=e.ngModule;if(a=wi(t),a)i=t;else return!1}else if(o&&!o.standalone)return!1;else i=e;let s=r.has(i);if(o){if(s)return!1;if(r.add(i),o.dependencies){let e=typeof o.dependencies==`function`?o.dependencies():o.dependencies;for(let i of e)Oa(i,t,n,r)}}else if(a){if(a.imports!=null&&!s){r.add(i);let e;try{ua(a.imports,i=>{Oa(i,t,n,r)&&(e||=[],e.push(i))})}finally{}e!==void 0&&Da(e,t)}if(!s){let e=sa(i)||(()=>new i);t({provide:i,useFactory:e,deps:ba},i),t({provide:Ca,useValue:i,multi:!0},i),t({provide:xa,useValue:()=>na(i),multi:!0},i)}let o=a.providers;if(o!=null&&!s){let n=e;ka(o,e=>{t(e,n)})}}else return!1;return i!==e&&e.providers!==void 0}function ka(e,t){for(let n of e)Oi(n)&&(n=n.ɵproviders),Array.isArray(n)?ka(n,t):t(n)}var Aa=mi({provide:String,useValue:mi});function ja(e){return typeof e==`object`&&!!e&&Aa in e}function Ma(e){return!!(e&&e.useExisting)}function Na(e){return!!(e&&e.useFactory)}function Pa(e){return typeof e==`function`}function Fa(e){return!!e.useClass}var Ia=new Di(``),La={},Ra={},za=void 0;function Ba(){return za===void 0&&(za=new wa),za}var Va=class{},Ha=class extends Va{parent;source;scopes;records=new Map;_ngOnDestroyHooks=new Set;_onDestroyHooks=[];get destroyed(){return this._destroyed}_destroyed=!1;injectorDefTypes;constructor(e,t,n,r){super(),this.parent=t,this.source=n,this.scopes=r,Qa(e,e=>this.processProvider(e)),this.records.set(Sa,Ja(void 0,this)),r.has(`environment`)&&this.records.set(Va,Ja(void 0,this));let i=this.records.get(Ia);i!=null&&typeof i.value==`string`&&this.scopes.add(i.value),this.injectorDefTypes=new Set(this.get(Ca,ba,{self:!0}))}retrieve(e,t){let n=ra(t)||0;try{return this.get(e,Qi,n)}catch(e){if(Vn(e))return e;throw e}}destroy(){qa(this),this._destroyed=!0;let e=rn(null);try{for(let e of this._ngOnDestroyHooks)e.ngOnDestroy();let e=this._onDestroyHooks;this._onDestroyHooks=[];for(let t of e)t()}finally{this.records.clear(),this._ngOnDestroyHooks.clear(),this.injectorDefTypes.clear(),rn(e)}}onDestroy(e){return qa(this),this._onDestroyHooks.push(e),()=>this.removeOnDestroy(e)}runInContext(e){qa(this);let t=zn(this),n=Yi(void 0);try{return e()}finally{zn(t),Yi(n)}}get(e,t=Qi,n){if(qa(this),Object.hasOwn(e,Pi))return e[Pi](this);let r=ra(n),i=zn(this),a=Yi(void 0);try{if(!(r&4)){let t=this.records.get(e);if(t===void 0){let n=Za(e)&&xi(e);t=n&&this.injectableDefInScope(n)?Ja(Ua(e),La):null,this.records.set(e,t)}if(t!=null)return this.hydrate(e,t,r)}let n=r&2?Ba():this.parent;return t=r&8&&t===Qi?null:t,n.get(e,t)}catch(e){let t=Ki(e);throw t===-200||t===-201?new fi(t,null):e}finally{Yi(a),zn(i)}}resolveInjectorInitializers(){let e=rn(null),t=zn(this),n=Yi(void 0);try{let e=this.get(xa,ba,{self:!0});for(let t of e)t()}finally{zn(t),Yi(n),rn(e)}}toString(){return`R3Injector[...]`}processProvider(e){e=vi(e);let t=Pa(e)?e:vi(e&&e.provide),n=Ga(e);if(!Pa(e)&&e.multi===!0){let n=this.records.get(t);n||(n=Ja(void 0,La,!0),n.factory=()=>aa(n.multi),this.records.set(t,n)),t=e,n.multi.push(e)}this.records.set(t,n)}hydrate(e,t,n){let r=rn(null);try{if(t.value===Ra)throw Ui(``);return t.value===La&&(t.value=Ra,t.value=t.factory(void 0,n)),typeof t.value==`object`&&t.value&&Xa(t.value)&&this._ngOnDestroyHooks.add(t.value),t.value}finally{rn(r)}}injectableDefInScope(e){if(!e.providedIn)return!1;let t=vi(e.providedIn);return typeof t==`string`?t===`any`||this.scopes.has(t):this.injectorDefTypes.has(t)}removeOnDestroy(e){let t=this._onDestroyHooks.indexOf(e);t!==-1&&this._onDestroyHooks.splice(t,1)}};function Ua(e){let t=xi(e),n=t===null?sa(e):t.factory;if(n!==null)return n;if(e instanceof Di)throw new fi(-204,!1);if(e instanceof Function)return Wa(e);throw new fi(-204,!1)}function Wa(e){if(e.length>0)throw new fi(-204,!1);let t=Ci(e);return t===null?()=>new e:()=>t.factory(e)}function Ga(e){return ja(e)?Ja(void 0,e.useValue):Ja(Ka(e),La)}function Ka(e,t,n){let r;if(Pa(e)){let t=vi(e);return sa(t)||Ua(t)}if(ja(e))r=()=>vi(e.useValue);else if(Na(e))r=()=>e.useFactory(...aa(e.deps||[]));else if(Ma(e))r=(t,n)=>na(vi(e.useExisting),n!==void 0&&n&8?8:void 0);else{let t=vi(e&&(e.useClass||e.provide));if(Ya(e))r=()=>new t(...aa(e.deps));else return sa(t)||Ua(t)}return r}function qa(e){if(e.destroyed)throw new fi(-205,!1)}function Ja(e,t,n=!1){return{factory:e,value:t,multi:n?[]:void 0}}function Ya(e){return!!e.deps}function Xa(e){return typeof e==`object`&&!!e&&typeof e.ngOnDestroy==`function`}function Za(e){return typeof e==`function`||typeof e==`object`&&e.ngMetadataName===`InjectionToken`}function Qa(e,t){for(let n of e)Array.isArray(n)?Qa(n,t):n&&Oi(n)?Qa(n.ɵproviders,t):t(n)}function $a(e,t){let n;e instanceof Ha?(qa(e),n=e):n=new ea(e);let r=zn(n),i=Yi(void 0);try{return t()}finally{zn(r),Yi(i)}}function eo(){return Ji()!==void 0||Rn()!=null}var to=1;function no(e){return Array.isArray(e)&&typeof e[to]==`object`}function ro(e){return Array.isArray(e)&&e[to]===!0}function io(e){return!!(e.flags&4)}function ao(e){return e.componentOffset>-1}function oo(e){return(e.flags&1)==1}function so(e){return!!e.template}function co(e){return!!(e[2]&512)}function lo(e){return(e[2]&256)==256}var uo=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})(uo||{}),fo=`math`;function po(e){for(;Array.isArray(e);)e=e[0];return e}function mo(e,t){return po(t[e])}function ho(e,t){return po(t[e.index])}function go(e,t){return e.data[t]}function _o(e,t){return e[t]}function vo(e,t,n,r){n>=e.data.length&&(e.data[n]=null,e.blueprint[n]=null),t[n]=r}function yo(e,t){let n=t[e];return no(n)?n:n[0]}function bo(e){return(e[2]&128)==128}function xo(e){return ro(e[3])}function So(e,t){return t==null?null:e[t]}function Co(e){e[17]=0}function wo(e){e[2]&1024||(e[2]|=1024,bo(e)&&Oo(e))}function To(e,t){for(;e>0;)t=t[14],e--;return t}function Eo(e){return!!(e[2]&9216||e[24]?.dirty)}function Do(e){e[10].changeDetectionScheduler?.notify(8),e[2]&64&&(e[2]|=1024),Eo(e)&&Oo(e)}function Oo(e){e[10].changeDetectionScheduler?.notify(0);let t=Ao(e);for(;t!==null&&!(t[2]&8192||(t[2]|=8192,!bo(t)));)t=Ao(t)}function ko(e,t){if(lo(e))throw new fi(911,!1);e[21]===null&&(e[21]=[]),e[21].push(t)}function Wee(e,t){if(e[21]===null)return;let n=e[21].indexOf(t);n!==-1&&e[21].splice(n,1)}function Ao(e){let t=e[3];return ro(t)?t[3]:t}function jo(e){return e[7]??=[]}function Mo(e){return e.cleanup??=[]}function Gee(e,t,n,r){let i=jo(t);i.push(n),e.firstCreatePass&&Mo(e).push(r,i.length-1)}var No={lFrame:as(null),bindingsEnabled:!0,skipHydrationRootTNode:null},Po=!1;function Kee(){return No.lFrame.elementDepthCount}function qee(){No.lFrame.elementDepthCount++}function Fo(){No.lFrame.elementDepthCount--}function Io(){return No.bindingsEnabled}function Lo(){return No.skipHydrationRootTNode!==null}function Ro(e){return No.skipHydrationRootTNode===e}function zo(){No.skipHydrationRootTNode=null}function Bo(){return No.lFrame.lView}function Vo(){return No.lFrame.tView}function S(e){return No.lFrame.contextLView=e,e[8]}function C(e){return No.lFrame.contextLView=null,e}function Ho(){let e=Uo();for(;e!==null&&e.type===64;)e=e.parent;return e}function Uo(){return No.lFrame.currentTNode}function Jee(){let e=No.lFrame,t=e.currentTNode;return e.isParent?t:t.parent}function Wo(e,t){let n=No.lFrame;n.currentTNode=e,n.isParent=t}function Go(){return No.lFrame.isParent}function Ko(){No.lFrame.isParent=!1}function qo(){return No.lFrame.contextLView}function Jo(){return Po}function Yo(e){let t=Po;return Po=e,t}function Xo(){let e=No.lFrame,t=e.bindingRootIndex;return t===-1&&(t=e.bindingRootIndex=e.tView.bindingStartIndex),t}function Zo(){return No.lFrame.bindingIndex}function Yee(e){return No.lFrame.bindingIndex=e}function Qo(){return No.lFrame.bindingIndex++}function $o(e){let t=No.lFrame,n=t.bindingIndex;return t.bindingIndex+=e,n}function Xee(){return No.lFrame.inI18n}function Zee(e,t){let n=No.lFrame;n.bindingIndex=n.bindingRootIndex=e,es(t)}function Qee(){return No.lFrame.currentDirectiveIndex}function es(e){No.lFrame.currentDirectiveIndex=e}function $ee(e){let t=No.lFrame.currentDirectiveIndex;return t===-1?null:e[t]}function ete(){return No.lFrame.currentQueryIndex}function ts(e){No.lFrame.currentQueryIndex=e}function tte(e){let t=e[1];return t.type===2?t.declTNode:t.type===1?e[5]:null}function ns(e,t,n){if(n&4){let r=t,i=e;for(;r=r.parent,r===null&&!(n&1)&&(r=tte(i),!(r===null||(i=i[14],r.type&10))););if(r===null)return!1;t=r,e=i}let r=No.lFrame=is();return r.currentTNode=t,r.lView=e,!0}function rs(e){let t=is(),n=e[1];No.lFrame=t,t.currentTNode=n.firstChild,t.lView=e,t.tView=n,t.contextLView=e,t.bindingIndex=n.bindingStartIndex,t.inI18n=!1}function is(){let e=No.lFrame,t=e===null?null:e.child;return t===null?as(e):t}function as(e){let t={currentTNode:null,isParent:!0,lView:null,tView:null,selectedIndex:-1,contextLView:null,elementDepthCount:0,currentNamespace:null,currentDirectiveIndex:-1,bindingRootIndex:-1,bindingIndex:-1,currentQueryIndex:0,parent:e,child:null,inI18n:!1};return e!==null&&(e.child=t),t}function os(){let e=No.lFrame;return No.lFrame=e.parent,e.currentTNode=null,e.lView=null,e}var ss=os;function cs(){let e=os();e.isParent=!0,e.tView=null,e.selectedIndex=-1,e.contextLView=null,e.elementDepthCount=0,e.currentDirectiveIndex=-1,e.currentNamespace=null,e.bindingRootIndex=-1,e.bindingIndex=-1,e.currentQueryIndex=0}function nte(e){return(No.lFrame.contextLView=To(e,No.lFrame.contextLView))[8]}function ls(){return No.lFrame.selectedIndex}function us(e){No.lFrame.selectedIndex=e}function ds(){let e=No.lFrame;return go(e.tView,e.selectedIndex)}function w(){No.lFrame.currentNamespace=`svg`}function fs(){ps()}function ps(){No.lFrame.currentNamespace=null}function ms(){return No.lFrame.currentNamespace}var hs=!0;function gs(){return hs}function _s(e){hs=e}function vs(e,t=null,n=null,r){let i=ys(e,t,n,r);return i.resolveInjectorInitializers(),i}function ys(e,t=null,n=null,r,i=new Set){return new Ha([n||ba,Ta(e)],t||Ba(),null,i)}var bs=class e{static THROW_IF_NOT_FOUND=Qi;static NULL=new wa;static create(e,t){if(Array.isArray(e))return vs({name:``},t,e,``);{let t=e.name??``;return vs({name:t},e.parent,e.providers,t)}}static ɵprov=bi({token:e,providedIn:`any`,factory:()=>na(Sa)});static __NG_ELEMENT_ID__=-1},xs=new Di(``),Ss=class{static __NG_ELEMENT_ID__=ws;static __NG_ENV_ID__=e=>e},Cs=class extends Ss{_lView;constructor(e){super(),this._lView=e}get destroyed(){return lo(this._lView)}onDestroy(e){let t=this._lView;return ko(t,e),()=>Wee(t,e)}};function ws(){return new Cs(Bo())}var Ts=new Di(``),Es=(()=>{class e{taskId=0;pendingTasks=new Set;destroyed=!1;pendingTask=new Gr(!1);debugTaskTracker=x(Ts,{optional:!0});get hasPendingTasks(){return!this.destroyed&&this.pendingTask.value}get hasPendingTasksObservable(){return this.destroyed?new Pr(e=>{e.next(!1),e.complete()}):this.pendingTask}add(){!this.hasPendingTasks&&!this.destroyed&&this.pendingTask.next(!0);let e=this.taskId++;return this.pendingTasks.add(e),this.debugTaskTracker?.add(e),e}has(e){return this.pendingTasks.has(e)}remove(e){this.pendingTasks.delete(e),this.debugTaskTracker?.remove(e),this.pendingTasks.size===0&&this.hasPendingTasks&&this.pendingTask.next(!1)}ngOnDestroy(){this.pendingTasks.clear(),this.hasPendingTasks&&this.pendingTask.next(!1),this.destroyed=!0,this.pendingTask.unsubscribe()}static ɵprov=bi({token:e,providedIn:`root`,factory:()=>new e})}return e})(),Ds=class extends Ur{__isAsync;destroyRef=void 0;pendingTasks=void 0;constructor(e=!1){super(),this.__isAsync=e,eo()&&(this.destroyRef=x(Ss,{optional:!0})??void 0,this.pendingTasks=x(Es,{optional:!0})??void 0)}emit(e){let t=rn(null);try{super.next(e)}finally{rn(t)}}subscribe(e,t,n){let r=e,i=t||(()=>null),a=n;if(e&&typeof e==`object`){let t=e;r=t.next?.bind(t),i=t.error?.bind(t),a=t.complete?.bind(t)}this.__isAsync&&(i=this.wrapInTimeout(i),r&&=this.wrapInTimeout(r),a&&=this.wrapInTimeout(a));let o=super.subscribe({next:r,error:i,complete:a});return e instanceof sr&&e.add(o),o}wrapInTimeout(e){return t=>{let n=this.pendingTasks?.add();setTimeout(()=>{try{e(t)}finally{n!==void 0&&this.pendingTasks?.remove(n)}})}}};function Os(...e){}function ks(e){let t,n;function r(){e=Os;try{n!==void 0&&typeof cancelAnimationFrame==`function`&&cancelAnimationFrame(n),t!==void 0&&clearTimeout(t)}catch{}}return t=setTimeout(()=>{e(),r()}),typeof requestAnimationFrame==`function`&&(n=requestAnimationFrame(()=>{e(),r()})),()=>r()}function As(e){return queueMicrotask(()=>e()),()=>{e=Os}}var js=`isAngularZone`,Ms=`isAngularZone_ID`,Ns=0,Ps=class e{hasPendingMacrotasks=!1;hasPendingMicrotasks=!1;isStable=!0;onUnstable=new Ds(!1);onMicrotaskEmpty=new Ds(!1);onStable=new Ds(!1);onError=new Ds(!1);constructor(e){let{enableLongStackTrace:t=!1,shouldCoalesceEventChangeDetection:n=!1,shouldCoalesceRunChangeDetection:r=!1,scheduleInRootZone:i=!1}=e;if(typeof Zone>`u`)throw new fi(908,!1);Zone.assertZonePatched();let a=this;a._nesting=0,a._outer=a._inner=Zone.current,Zone.TaskTrackingZoneSpec&&(a._inner=a._inner.fork(new Zone.TaskTrackingZoneSpec)),t&&Zone.longStackTraceZoneSpec&&(a._inner=a._inner.fork(Zone.longStackTraceZoneSpec)),a.shouldCoalesceEventChangeDetection=!r&&n,a.shouldCoalesceRunChangeDetection=r,a.callbackScheduled=!1,a.scheduleInRootZone=i,Rs(a)}static isInAngularZone(){return typeof Zone<`u`&&Zone.current.get(js)===!0}static assertInAngularZone(){if(!e.isInAngularZone())throw new fi(909,!1)}static assertNotInAngularZone(){if(e.isInAngularZone())throw new fi(909,!1)}run(e,t,n){return this._inner.run(e,t,n)}runTask(e,t,n,r){let i=this._inner,a=i.scheduleEventTask(`NgZoneEvent: `+r,e,Fs,Os,Os);try{return i.runTask(a,t,n)}finally{i.cancelTask(a)}}runGuarded(e,t,n){return this._inner.runGuarded(e,t,n)}runOutsideAngular(e){return this._outer.run(e)}},Fs={};function Is(e){if(e._nesting==0&&!e.hasPendingMicrotasks&&!e.isStable)try{e._nesting++,e.onMicrotaskEmpty.emit(null)}finally{if(e._nesting--,!e.hasPendingMicrotasks)try{e.runOutsideAngular(()=>e.onStable.emit(null))}finally{e.isStable=!0}}}function Ls(e){if(e.isCheckStableRunning||e.callbackScheduled)return;e.callbackScheduled=!0;function t(){ks(()=>{e.callbackScheduled=!1,zs(e),e.isCheckStableRunning=!0,Is(e),e.isCheckStableRunning=!1})}e.scheduleInRootZone?Zone.root.run(()=>{t()}):e._outer.run(()=>{t()}),zs(e)}function Rs(e){let t=()=>{Ls(e)},n=Ns++;e._inner=e._inner.fork({name:`angular`,properties:{[js]:!0,[Ms]:n,[Ms+n]:!0},onInvokeTask:(n,r,i,a,o,s)=>{if(Us(s))return n.invokeTask(i,a,o,s);try{return Bs(e),n.invokeTask(i,a,o,s)}finally{(e.shouldCoalesceEventChangeDetection&&a.type===`eventTask`||e.shouldCoalesceRunChangeDetection)&&t(),Vs(e)}},onInvoke:(n,r,i,a,o,s,c)=>{try{return Bs(e),n.invoke(i,a,o,s,c)}finally{e.shouldCoalesceRunChangeDetection&&!e.callbackScheduled&&!Ws(s)&&t(),Vs(e)}},onHasTask:(t,n,r,i)=>{t.hasTask(r,i),n===r&&(i.change==`microTask`?(e._hasPendingMicrotasks=i.microTask,zs(e),Is(e)):i.change==`macroTask`&&(e.hasPendingMacrotasks=i.macroTask))},onHandleError:(t,n,r,i)=>(t.handleError(r,i),e.runOutsideAngular(()=>e.onError.emit(i)),!1)})}function zs(e){e.hasPendingMicrotasks=!!(e._hasPendingMicrotasks||(e.shouldCoalesceEventChangeDetection||e.shouldCoalesceRunChangeDetection)&&e.callbackScheduled===!0)}function Bs(e){e._nesting++,e.isStable&&(e.isStable=!1,e.onUnstable.emit(null))}function Vs(e){e._nesting--,Is(e)}var Hs=class{hasPendingMicrotasks=!1;hasPendingMacrotasks=!1;isStable=!0;onUnstable=new Ds;onMicrotaskEmpty=new Ds;onStable=new Ds;onError=new Ds;run(e,t,n){return e.apply(t,n)}runGuarded(e,t,n){return e.apply(t,n)}runOutsideAngular(e){return e()}runTask(e,t,n,r){return e.apply(t,n)}};function Us(e){return Gs(e,`__ignore_ng_zone__`)}function Ws(e){return Gs(e,`__scheduler_tick__`)}function Gs(e,t){return!Array.isArray(e)||e.length!==1?!1:e[0]?.data?.[t]===!0}var Ks=class{_console=console;handleError(e){this._console.error(`ERROR`,e)}},qs=new Di(``,{factory:()=>{let e=x(Ps),t=x(Va),n;return r=>{e.runOutsideAngular(()=>{t.destroyed&&!n?setTimeout(()=>{throw r}):(n??=t.get(Ks),n.handleError(r))})}}}),Js={provide:xa,useValue:()=>{x(Ks,{optional:!0})},multi:!0};function T(e,t){let[n,r,i]=hee(e,t?.equal),a=n;return a[nn],a.set=r,a.update=i,a.asReadonly=Ys.bind(a),a}function Ys(){let e=this[nn];if(e.readonlyFn===void 0){let t=()=>this();t[nn]=e,e.readonlyFn=t}return e.readonlyFn}var Xs=new Di(``,{factory:()=>Zs}),Zs=`ng`,Qs=new Di(``),$s=new Di(``,{providedIn:`platform`,factory:()=>`unknown`}),ec=new Di(``,{factory:()=>x(xs).body?.querySelector(`[ngCspNonce]`)?.getAttribute(`ngCspNonce`)||null}),tc=(()=>{class e{view;node;constructor(e,t){this.view=e,this.node=t}static __NG_ELEMENT_ID__=nc}return e})();function nc(){return new tc(Bo(),Ho())}var rc=class{},ic=new Di(``,{factory:()=>!0}),ac=new Di(``),oc=(()=>{class e{static ɵprov=bi({token:e,providedIn:`root`,factory:()=>new sc})}return e})(),sc=class{dirtyEffectCount=0;queues=new Map;add(e){this.enqueue(e),this.schedule(e)}schedule(e){e.dirty&&this.dirtyEffectCount++}remove(e){let t=e.zone,n=this.queues.get(t);n.has(e)&&(n.delete(e),e.dirty&&this.dirtyEffectCount--)}enqueue(e){let t=e.zone;this.queues.has(t)||this.queues.set(t,new Set);let n=this.queues.get(t);n.has(e)||n.add(e)}flush(){for(;this.dirtyEffectCount>0;){let e=!1;for(let[t,n]of this.queues)e||=t===null?this.flushQueue(n):t.run(()=>this.flushQueue(n));e||(this.dirtyEffectCount=0)}}flushQueue(e){let t=!1;for(let n of e)n.dirty&&(this.dirtyEffectCount--,t=!0,n.run());return t}},cc=class{[nn];constructor(e){this[nn]=e}destroy(){this[nn].destroy()}};function E(e,t){let n=t?.injector??x(bs),r=t?.manualCleanup===!0?null:n.get(Ss),i,a=n.get(tc,null,{optional:!0}),o=n.get(rc);return a===null?i=pc(e,n.get(oc),o):(i=fc(a.view,o,e),r instanceof Cs&&r._lView===a.view&&(r=null)),i.injector=n,r!==null&&(i.onDestroyFns=[r.onDestroy(()=>i.destroy())]),new cc(i)}var lc={...Fn,cleanupFns:void 0,zone:null,onDestroyFns:null,run(){let e=Yo(!1);try{In(this)}finally{Yo(e)}},cleanup(){if(!this.cleanupFns?.length)return;let e=rn(null);try{for(;this.cleanupFns.length;)this.cleanupFns.pop()()}finally{this.cleanupFns=[],rn(e)}}},uc={...lc,consumerMarkedDirty(){this.scheduler.schedule(this),this.notifier.notify(12)},destroy(){if(yn(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.scheduler.remove(this)}},dc={...lc,consumerMarkedDirty(){this.view[2]|=8192,Oo(this.view),this.notifier.notify(13)},destroy(){if(yn(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.view[23]?.delete(this)}};function fc(e,t,n){let r=Object.create(dc);return r.view=e,r.zone=typeof Zone<`u`?Zone.current:null,r.notifier=t,r.fn=mc(r,n),e[23]??=new Set,e[23].add(r),r.consumerMarkedDirty(r),r}function pc(e,t,n){let r=Object.create(uc);return r.fn=mc(r,e),r.scheduler=t,r.notifier=n,r.zone=typeof Zone<`u`?Zone.current:null,r.scheduler.add(r),r.notifier.notify(12),r}function mc(e,t){return()=>{t(t=>(e.cleanupFns??=[]).push(t))}}function hc(e){return typeof e==`function`&&e[nn]!==void 0}function gc(e){return hc(e)&&typeof e.set==`function`}var _c=Symbol(`InputSignalNode#UNSET`),vc={...Nn,transformFn:void 0,applyValueToInputSignal(e,t){jn(e,t)}};function yc(e){return{toString:e}.toString()}var bc=(function(e){return e[e.TemplateCreateStart=0]=`TemplateCreateStart`,e[e.TemplateCreateEnd=1]=`TemplateCreateEnd`,e[e.TemplateUpdateStart=2]=`TemplateUpdateStart`,e[e.TemplateUpdateEnd=3]=`TemplateUpdateEnd`,e[e.LifecycleHookStart=4]=`LifecycleHookStart`,e[e.LifecycleHookEnd=5]=`LifecycleHookEnd`,e[e.OutputStart=6]=`OutputStart`,e[e.OutputEnd=7]=`OutputEnd`,e[e.BootstrapApplicationStart=8]=`BootstrapApplicationStart`,e[e.BootstrapApplicationEnd=9]=`BootstrapApplicationEnd`,e[e.BootstrapComponentStart=10]=`BootstrapComponentStart`,e[e.BootstrapComponentEnd=11]=`BootstrapComponentEnd`,e[e.ChangeDetectionStart=12]=`ChangeDetectionStart`,e[e.ChangeDetectionEnd=13]=`ChangeDetectionEnd`,e[e.ChangeDetectionSyncStart=14]=`ChangeDetectionSyncStart`,e[e.ChangeDetectionSyncEnd=15]=`ChangeDetectionSyncEnd`,e[e.AfterRenderHooksStart=16]=`AfterRenderHooksStart`,e[e.AfterRenderHooksEnd=17]=`AfterRenderHooksEnd`,e[e.ComponentStart=18]=`ComponentStart`,e[e.ComponentEnd=19]=`ComponentEnd`,e[e.DeferBlockStateStart=20]=`DeferBlockStateStart`,e[e.DeferBlockStateEnd=21]=`DeferBlockStateEnd`,e[e.DynamicComponentStart=22]=`DynamicComponentStart`,e[e.DynamicComponentEnd=23]=`DynamicComponentEnd`,e[e.HostBindingsUpdateStart=24]=`HostBindingsUpdateStart`,e[e.HostBindingsUpdateEnd=25]=`HostBindingsUpdateEnd`,e})(bc||{}),xc=class{previousValue;currentValue;firstChange;constructor(e,t,n){this.previousValue=e,this.currentValue=t,this.firstChange=n}isFirstChange(){return this.firstChange}};function Sc(e,t,n,r){t===null?e[n]=r:t.applyValueToInputSignal(t,r)}var Cc=null,wc=(()=>{Cc=Ec;let e=()=>Ec;return e.ngInherit=!0,e})();function Tc(){return Cc}function Ec(e){return e.type.prototype.ngOnChanges&&(e.setInput=Oc),Dc}function Dc(){let e=Ac(this),t=e?.current;if(t){let n=e.previous;if(n===ya)e.previous=t;else for(let e in t)n[e]=t[e];e.current=null,this.ngOnChanges(t)}}function Oc(e,t,n,r,i){let a=this.declaredInputs[r],o=Ac(e)||jc(e,{previous:ya,current:null}),s=o.current||={},c=o.previous,l=c[a];s[a]=new xc(l&&l.currentValue,n,c===ya),Sc(e,t,i,n)}var kc=`__ngSimpleChanges__`;function Ac(e){return Object.hasOwn(e,kc)&&e[kc]||null}function jc(e,t){return e[kc]=t}var Mc=[],Nc=function(e,t=null,n){for(let r=0;r<Mc.length;r++){let i=Mc[r];i(e,t,n)}};function Pc(e,t,n){let{ngOnChanges:r,ngOnInit:i,ngDoCheck:a}=t.type.prototype;if(r){let r=Tc()(t);(n.preOrderHooks??=[]).push(e,r),(n.preOrderCheckHooks??=[]).push(e,r)}i&&(n.preOrderHooks??=[]).push(0-e,i),a&&((n.preOrderHooks??=[]).push(e,a),(n.preOrderCheckHooks??=[]).push(e,a))}function Fc(e,t){for(let n=t.directiveStart,r=t.directiveEnd;n<r;n++){let{ngAfterContentInit:t,ngAfterContentChecked:r,ngAfterViewInit:i,ngAfterViewChecked:a,ngOnDestroy:o}=e.data[n].type.prototype;t&&(e.contentHooks??=[]).push(-n,t),r&&((e.contentHooks??=[]).push(n,r),(e.contentCheckHooks??=[]).push(n,r)),i&&(e.viewHooks??=[]).push(-n,i),a&&((e.viewHooks??=[]).push(n,a),(e.viewCheckHooks??=[]).push(n,a)),o!=null&&(e.destroyHooks??=[]).push(n,o)}}function Ic(e,t,n){zc(e,t,3,n)}function Lc(e,t,n,r){(e[2]&3)===n&&zc(e,t,n,r)}function Rc(e,t){let n=e[2];(n&3)===t&&(n&=16383,n+=1,e[2]=n)}function zc(e,t,n,r){let i=r===void 0?0:e[17]&65535,a=r??-1,o=t.length-1,s=0;for(let c=i;c<o;c++)if(typeof t[c+1]==`number`){if(s=t[c],r!=null&&s>=r)break}else t[c]<0&&(e[17]+=65536),(s<a||a==-1)&&(Vc(e,n,t,c),e[17]=(e[17]&4294901760)+c+2),c++}function Bc(e,t){Nc(bc.LifecycleHookStart,e,t);let n=rn(null);try{t.call(e)}finally{rn(n),Nc(bc.LifecycleHookEnd,e,t)}}function Vc(e,t,n,r){let i=n[r]<0,a=n[r+1],o=e[i?-n[r]:n[r]];i?e[2]>>14<e[17]>>16&&(e[2]&3)===t&&(e[2]+=16384,Bc(o,a)):Bc(o,a)}var Hc=-1,Uc=class{factory;name;injectImpl;resolving=!1;canSeeViewProviders;multi;componentProviders;index;providerFactory;constructor(e,t,n,r){this.factory=e,this.name=r,this.canSeeViewProviders=t,this.injectImpl=n}};function Wc(e){return!!(e.flags&8)}function Gc(e){return!!(e.flags&16)}function Kc(e,t,n){let r=0;for(;r<n.length;){let i=n[r];if(typeof i==`number`){if(i!==0)break;r++;let a=n[r++],o=n[r++],s=n[r++];e.setAttribute(t,o,s,a)}else{let a=i,o=n[++r];Jc(a)?e.setProperty(t,a,o):e.setAttribute(t,a,o),r++}}return r}function qc(e){return e===3||e===4||e===6}function Jc(e){return e.charCodeAt(0)===64}function Yc(e,t){if(t!==null&&t.length!==0){if(e===null||e.length===0)e=t.slice();else{let n=-1;for(let r=0;r<t.length;r++){let i=t[r];typeof i==`number`?n=i:n===0||(n===-1||n===2?Xc(e,n,i,null,t[++r]):Xc(e,n,i,null,null))}}}return e}function Xc(e,t,n,r,i){let a=0,o=e.length;if(t===-1)o=-1;else for(;a<e.length;){let n=e[a++];if(typeof n==`number`){if(n===t){o=-1;break}if(n>t){o=a-1;break}}}for(;a<e.length;){let t=e[a];if(typeof t==`number`)break;if(t===n){i!==null&&(e[a+1]=i);return}a++,i!==null&&a++}o!==-1&&(e.splice(o,0,t),a=o+1),e.splice(a++,0,n),i!==null&&e.splice(a++,0,i)}function Zc(e){return e!==Hc}function Qc(e){return e&32767}function $c(e){return e>>16}function el(e,t){let n=$c(e),r=t;for(;n>0;)r=r[14],n--;return r}var tl=!0;function nl(e){let t=tl;return tl=e,t}var rl=255,il=5,al=0,ol={};function sl(e,t,n){let r;typeof n==`string`?r=n.charCodeAt(0)||0:Object.hasOwn(n,Ni)&&(r=n[Ni]),r??=n[Ni]=al++;let i=r&rl,a=1<<i;t.data[e+(i>>il)]|=a}function cl(e,t){let n=ul(e,t);if(n!==-1)return n;let r=t[1];r.firstCreatePass&&(e.injectorIndex=t.length,ll(r.data,e),ll(t,null),ll(r.blueprint,null));let i=dl(e,t),a=e.injectorIndex;if(Zc(i)){let e=Qc(i),n=el(i,t),r=n[1].data;for(let i=0;i<8;i++)t[a+i]=n[e+i]|r[e+i]}return t[a+8]=i,a}function ll(e,t){e.push(0,0,0,0,0,0,0,0,t)}function ul(e,t){return e.injectorIndex===-1||e.parent&&e.parent.injectorIndex===e.injectorIndex||t[e.injectorIndex+8]===null?-1:e.injectorIndex}function dl(e,t){if(e.parent&&e.parent.injectorIndex!==-1)return e.parent.injectorIndex;let n=0,r=null,i=t;for(;i!==null;){if(r=Ol(i),r===null)return Hc;if(n++,i=i[14],r.injectorIndex!==-1)return r.injectorIndex|n<<16}return Hc}function fl(e,t,n){sl(e,t,n)}function pl(e,t,n){if(n&8||e!==void 0)return e;Wi(t,`NodeInjector`)}function ml(e,t,n,r){if(n&8&&r===void 0&&(r=null),!(n&3)){let i=e[9],a=Yi(void 0);try{return i?i.get(t,r,n&8):Xi(t,r,n&8)}finally{Yi(a)}}return pl(r,t,n)}function hl(e,t,n,r=0,i){if(e!==null){if(t[2]&2048&&!(r&2)){let i=Dl(e,t,n,r,ol);if(i!==ol)return i}let i=gl(e,t,n,r,ol);if(i!==ol)return i}return ml(t,n,r,i)}function gl(e,t,n,r,i){let a=bl(n);if(typeof a==`function`){if(!ns(t,e,r))return r&1?pl(i,n,r):ml(t,n,r,i);try{let e;if(e=a(r),e==null&&!(r&8))Wi(n);else return e}finally{ss()}}else if(typeof a==`number`){let i=null,o=ul(e,t),s=Hc,c=r&1?t[15][5]:null;for((o===-1||r&4)&&(s=o===-1?dl(e,t):t[o+8],s===Hc||!Sl(r,!1)?o=-1:(i=t[1],o=Qc(s),t=el(s,t)));o!==-1;){let e=t[1];if(xl(a,o,e.data)){let e=_l(o,t,n,i,r,c);if(e!==ol)return e}s=t[o+8],s!==Hc&&Sl(r,t[1].data[o+8]===c)&&xl(a,o,t)?(i=e,o=Qc(s),t=el(s,t)):o=-1}}return i}function _l(e,t,n,r,i,a){let o=t[1],s=o.data[e+8],c=vl(s,o,n,r==null?ao(s)&&tl:r!=o&&!!(s.type&3),i&1&&a===s);return c===null?ol:yl(t,o,c,s,i)}function vl(e,t,n,r,i){let a=e.providerIndexes,o=t.data,s=a&1048575,c=e.directiveStart,l=e.directiveEnd,u=a>>20,d=r?s:s+u,f=i?s+u:l;for(let e=d;e<f;e++){let t=o[e];if(e<c&&n===t||e>=c&&t.type===n)return e}if(i){let e=o[c];if(e&&so(e)&&e.type===n)return c}return null}function yl(e,t,n,r,i){let a=e[n],o=t.data;if(a instanceof Uc){let s=a;if(s.resolving)throw Ui(``);let c=nl(s.canSeeViewProviders);s.resolving=!0,o[n].type||o[n];let l=s.injectImpl?Yi(s.injectImpl):null;ns(e,r,0);try{a=e[n]=s.factory(void 0,i,o,e,r),t.firstCreatePass&&n>=r.directiveStart&&Pc(n,o[n],t)}finally{l!==null&&Yi(l),nl(c),s.resolving=!1,ss()}}return a}function bl(e){if(typeof e==`string`)return e.charCodeAt(0)||0;let t=Object.hasOwn(e,Ni)?e[Ni]:void 0;return typeof t==`number`?t>=0?t&rl:wl:t}function xl(e,t,n){let r=1<<e;return!!(n[t+(e>>il)]&r)}function Sl(e,t){return!(e&2)&&!(e&1&&t)}var Cl=class{_tNode;_lView;constructor(e,t){this._tNode=e,this._lView=t}get(e,t,n){return hl(this._tNode,this._lView,e,ra(n),t)}};function wl(){return new Cl(Ho(),Bo())}function Tl(e){return yc(()=>{let t=e.prototype.constructor,n=t[Mi]||El(t),r=Object.prototype,i=Object.getPrototypeOf(e.prototype).constructor;for(;i&&i!==r;){let e=i[Mi]||El(i);if(e&&e!==n)return e;i=Object.getPrototypeOf(i)}return e=>new e})}function El(e){return yi(e)?()=>{let t=El(vi(e));return t&&t()}:sa(e)}function Dl(e,t,n,r,i){let a=e,o=t;for(;a!==null&&o!==null&&o[2]&2048&&!co(o);){let e=gl(a,o,n,r|2,ol);if(e!==ol)return e;r&=-5;let t=a.parent;if(!t){let e=o[20];if(e){let t=e.get(n,ol,r);if(t!==ol)return t}t=Ol(o),o=o[14]}a=t}return i}function Ol(e){let t=e[1],n=t.type;return n===2?t.declTNode:n===1?e[5]:null}function kl(e){return{token:e.token,providedIn:e.autoProvided===!1?null:`root`,factory:e.factory,value:void 0}}function Al(){return jl(Ho(),Bo())}function jl(e,t){return new Ml(ho(e,t))}var Ml=(()=>{class e{nativeElement;constructor(e){this.nativeElement=e}static __NG_ELEMENT_ID__=Al}return e})();function Nl(e){return e instanceof Ml?e.nativeElement:e}function Pl(){return this._results[Symbol.iterator]()}var Fl=class{_emitDistinctChangesOnly;dirty=!0;_onDirty=void 0;_results=[];_changesDetected=!1;_changes=void 0;length=0;first=void 0;last=void 0;get changes(){return this._changes??=new Ur}constructor(e=!1){this._emitDistinctChangesOnly=e}get(e){return this._results[e]}map(e){return this._results.map(e)}filter(e){return this._results.filter(e)}find(e){return this._results.find(e)}reduce(e,t){return this._results.reduce(e,t)}forEach(e){this._results.forEach(e)}some(e){return this._results.some(e)}toArray(){return this._results.slice()}toString(){return this._results.toString()}reset(e,t){this.dirty=!1;let n=la(e);(this._changesDetected=!ca(this._results,n,t))&&(this._results=n,this.length=n.length,this.last=n[this.length-1],this.first=n[0])}notifyOnChanges(){this._changes!==void 0&&(this._changesDetected||!this._emitDistinctChangesOnly)&&this._changes.next(this)}onDirty(e){this._onDirty=e}setDirty(){this.dirty=!0,this._onDirty?.()}destroy(){this._changes!==void 0&&(this._changes.complete(),this._changes.unsubscribe())}[Symbol.iterator]=Pl};function Il(e){return(e.flags&128)==128}var Ll=(function(e){return e[e.OnPush=0]=`OnPush`,e[e.Eager=1]=`Eager`,e[e.Default=1]=`Default`,e})(Ll||{}),Rl=new Map,zl=0;function Bl(){return zl++}function Vl(e){Rl.set(e[19],e)}function Hl(e){Rl.delete(e[19])}var Ul=`__ngContext__`;function Wl(e,t){no(t)?(e[Ul]=t[19],Vl(t)):e[Ul]=t}function Gl(e){return ql(e[12])}function Kl(e){return ql(e[4])}function ql(e){for(;e!==null&&!ro(e);)e=e[4];return e}var Jl=void 0;function Yl(e){Jl=e}function Xl(){if(Jl!==void 0)return Jl;if(typeof document<`u`)return document;throw new fi(210,!1)}var Zl=!1,Ql=new Di(``,{factory:()=>Zl}),$l=new WeakMap;function eu(e,t){if(typeof e!=`object`||!e)return;let n=$l.get(e);n||(n=new WeakSet,$l.set(e,n)),n.add(t)}function tu(e){return(e.flags&32)==32}var nu=()=>null;function ru(e,t,n=!1){return nu(e,t,n)}function iu(e,t){let n=e.contentQueries;if(n!==null){let r=rn(null);try{for(let r=0;r<n.length;r+=2){let i=n[r],a=n[r+1];if(a!==-1){let n=e.data[a];ts(i),n.contentQueries(2,t[a],a)}}}finally{rn(r)}}}function au(e,t,n){ts(0);let r=rn(null);try{t(e,n)}finally{rn(r)}}function ou(e,t,n){if(io(t)){let r=rn(null);try{let r=t.directiveStart,i=t.directiveEnd;for(let t=r;t<i;t++){let r=e.data[t];if(r.contentQueries){let e=n[t];r.contentQueries(1,e,t)}}}finally{rn(r)}}}var su=(function(e){return e[e.Emulated=0]=`Emulated`,e[e.None=2]=`None`,e[e.ShadowDom=3]=`ShadowDom`,e[e.ExperimentalIsolatedShadowDom=4]=`ExperimentalIsolatedShadowDom`,e})(su||{}),cu=class{changingThisBreaksApplicationSecurity;constructor(e){this.changingThisBreaksApplicationSecurity=e}toString(){return`SafeValue must use [property]=binding: ${this.changingThisBreaksApplicationSecurity} (see ${di})`}};function lu(e){return e instanceof cu?e.changingThisBreaksApplicationSecurity:e}function uu(e,t){let n=du(e);if(n!=null&&n!==t){if(n===`ResourceURL`&&t===`URL`)return!0;throw Error(`Required a safe ${t}, got a ${n} (see ${di})`)}return n===t}function du(e){return e instanceof cu&&e.getTypeName()||null}var fu=/^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:\/?#]*(?:[\/?#]|$))/i;function pu(e){return e=String(e),e.match(fu)?e:`unsafe:`+e}var mu=/^>|^->|<!--|-->|--!>|<!-$/g,hu=/(<|>)/g,gu=`​$1​`;function _u(e){return e.replace(mu,e=>e.replace(hu,gu))}function vu(e,t){return e.createText(t)}function yu(e,t,n){e.setValue(t,n)}function bu(e,t){return e.createComment(_u(t))}function xu(e,t,n){return e.createElement(t,n)}function Su(e,t,n,r,i){e.insertBefore(t,n,r,i)}function Cu(e,t,n){e.appendChild(t,n)}function wu(e,t,n,r,i){r===null?Cu(e,t,n):Su(e,t,n,r,i)}function Tu(e,t,n,r){e.removeChild(null,t,n,r)}function rte(e,t,n){e.setAttribute(t,`style`,n)}function ite(e,t,n){n===``?e.removeAttribute(t,`class`):e.setAttribute(t,`class`,n)}function Eu(e,t,n){let{mergedAttrs:r,classes:i,styles:a}=n;r!==null&&Kc(e,t,r),i!==null&&ite(e,t,i),a!==null&&rte(e,t,a)}function Du(e){let t=ate();return t?t.sanitize(uo.URL,e)||``:uu(e,`URL`)?lu(e):pu(zi(e))}function ate(){let e=Bo();return e&&e[10].sanitizer}function Ou(e){return e.ownerDocument.defaultView}function ku(e){return e.ownerDocument}function ote(e,t,n){let r=e.length;for(;;){let i=e.indexOf(t,n);if(i===-1)return i;if(i===0||e.charCodeAt(i-1)<=32){let n=t.length;if(i+n===r||e.charCodeAt(i+n)<=32)return i}n=i+1}}var Au=`ng-template`;function ste(e,t,n,r){let i=0;if(r){for(;i<t.length&&typeof t[i]==`string`;i+=2)if(t[i]===`class`&&ote(t[i+1].toLowerCase(),n,0)!==-1)return!0}else if(ju(e))return!1;if(i=t.indexOf(1,i),i>-1){let e;for(;++i<t.length&&typeof(e=t[i])==`string`;)if(e.toLowerCase()===n)return!0}return!1}function ju(e){return e.type===4&&e.value!==Au}function cte(e,t,n){return t===(e.type===4&&!n?Au:e.value)}function lte(e,t,n){let r=4,i=e.attrs,a=i===null?0:fte(i),o=!1;for(let s=0;s<t.length;s++){let c=t[s];if(typeof c==`number`){if(!o&&!Mu(r)&&!Mu(c))return!1;if(o&&Mu(c))continue;o=!1,r=c|r&1;continue}if(!o){if(r&4){if(r=2|r&1,c!==``&&!cte(e,c,n)||c===``&&t.length===1){if(Mu(r))return!1;o=!0}}else if(r&8){if(i===null||!ste(e,i,c,n)){if(Mu(r))return!1;o=!0}}else{let l=t[++s],u=ute(c,i,ju(e),n);if(u===-1){if(Mu(r))return!1;o=!0;continue}if(l!==``){let e;if(e=u>a?``:i[u+1].toLowerCase(),r&2&&l!==e){if(Mu(r))return!1;o=!0}}}}}return Mu(r)||o}function Mu(e){return!(e&1)}function ute(e,t,n,r){if(t===null)return-1;let i=0;if(r||!n){let n=!1;for(;i<t.length;){let r=t[i];if(r===e)return i;if(r===3||r===6)n=!0;else if(r===1||r===2){let e=t[++i];for(;typeof e==`string`;)e=t[++i];continue}else if(r===4)break;else if(r===0){i+=4;continue}i+=n?1:2}return-1}return pte(t,e)}function Nu(e,t,n=!1){for(let r=0;r<t.length;r++)if(lte(e,t[r],n))return!0;return!1}function dte(e){let t=e.attrs;if(t!=null){let e=t.indexOf(5);if(!(e&1))return t[e+1]}return null}function fte(e){for(let t=0;t<e.length;t++){let n=e[t];if(qc(n))return t}return e.length}function pte(e,t){let n=e.indexOf(4);if(n>-1)for(n++;n<e.length;){let r=e[n];if(typeof r==`number`)return-1;if(r===t)return n;n++}return-1}function mte(e,t){selectorListLoop:for(let n=0;n<t.length;n++){let r=t[n];if(e.length===r.length){for(let t=0;t<e.length;t++)if(e[t]!==r[t])continue selectorListLoop;return!0}}return!1}function Pu(e,t){return e?`:not(`+t.trim()+`)`:t}function hte(e){let t=e[0],n=1,r=2,i=``,a=!1;for(;n<e.length;){let o=e[n];if(typeof o==`string`){if(r&2){let t=e[++n];i+=`[`+o+(t.length>0?`="`+t+`"`:``)+`]`}else r&8?i+=`.`+o:r&4&&(i+=` `+o)}else i!==``&&!Mu(o)&&(t+=Pu(a,i),i=``),r=o,a||=!Mu(r);n++}return i!==``&&(t+=Pu(a,i)),t}function gte(e){return e.map(hte).join(`,`)}function _te(e){let t=[],n=[],r=1,i=2;for(;r<e.length;){let a=e[r];if(typeof a==`string`)i===2?a!==``&&t.push(a,e[++r]):i===8&&n.push(a);else{if(!Mu(i))break;i=a}r++}return n.length&&t.push(1,...n),t}var Fu={},Iu=(function(e){return e[e.Important=1]=`Important`,e[e.DashCase=2]=`DashCase`,e})(Iu||{}),vte;function Lu(e,t){return vte(e,t)}var yte=new Di(``,{factory:()=>!1});function Ru(e){if(!e)return 0;let t=e.toLowerCase().indexOf(`ms`)>-1?1:1e3;return parseFloat(e)*t}function zu(e,t){return e.getPropertyValue(t).split(`,`).map(e=>e.trim())}function bte(e){let t=zu(e,`transition-property`),n=zu(e,`transition-duration`),r=zu(e,`transition-delay`),i={propertyName:``,duration:0,animationName:void 0};for(let e=0;e<t.length;e++){let a=Ru(r[e])+Ru(n[e]);a>i.duration&&(i.propertyName=t[e],i.duration=a)}return i}function xte(e){let t=zu(e,`animation-name`),n=zu(e,`animation-delay`),r=zu(e,`animation-duration`),i=zu(e,`animation-iteration-count`),a={animationName:``,propertyName:void 0,duration:0};for(let e=0;e<t.length;e++){let o=Ru(n[e])+Ru(r[e]),s=i[e];o>a.duration&&s!==`infinite`&&(a.animationName=t[e],a.duration=o)}return a}function Bu(e,t){return e!==void 0&&e.duration>t.duration}function Vu(e){return(e.animationName!=null||e.propertyName!=null)&&e.duration>0}function Hu(e){let t=e.effect?.getTiming();if(t===void 0)return;let n=typeof t.duration==`number`?t.duration:0,r=(t.delay??0)+n,i=e.playbackRate;return i!==void 0&&i!==0&&i!==1&&(r/=Math.abs(i)),r}function Ste(e,t){let n=getComputedStyle(e),r=xte(n),i=bte(n),a=r.duration>i.duration?r:i;Bu(t.get(e),a)||Vu(a)&&t.set(e,a)}function Cte(e,t,n){if(!n)return;let r=e.getAnimations();return r.length===0?Ste(e,t):wte(e,t,r)}function wte(e,t,n){let r={animationName:void 0,propertyName:void 0,duration:0};for(let e of n){if(e.effect?.getTiming()?.iterations===1/0)continue;let t=Hu(e)??0,n,i;e.animationName?i=e.animationName:n=e.transitionProperty,t>=r.duration&&(r={animationName:i,propertyName:n,duration:t})}Bu(t.get(e),r)||Vu(r)&&t.set(e,r)}var Uu=new Set,Tte=!1,Ete=1,Wu=typeof document<`u`&&typeof document?.documentElement?.getAnimations==`function`;function Dte(e){return e[9].get(yte,Tte)}function Ote(e,t,n){let r=Ku.get(e);if(r){for(let e of t)r.classList.push(e);for(let e of n)r.cleanupFns.push(e)}else Ku.set(e,{classList:t,cleanupFns:n})}function Gu(e){let t=Ku.get(e);if(t){for(let e of t.cleanupFns)e();Ku.delete(e)}qu.delete(e)}var Ku=new WeakMap,qu=new WeakMap,Ju=new WeakMap;function Yu(e){return e?e[14]??e:null}var Xu=new WeakSet;function kte(e,t,n){let r=Ju.get(e);if(!r||r.length===0)return;let i=t.parentNode,a=t.previousSibling,o=Yu(n);for(let e=r.length-1;e>=0;e--){let{el:n,declarationView:s}=r[e],c=n.parentNode;n===t?(r.splice(e,1),Xu.add(n),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}}))):(a&&n===a||c&&i&&c!==i&&(o===null||s===null||o===s))&&(r.splice(e,1),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}})),n.parentNode?.removeChild(n))}}function Ate(e,t,n){let r=Yu(n),i=Ju.get(e);i?i.some(e=>e.el===t)||i.push({el:t,declarationView:r}):Ju.set(e,[{el:t,declarationView:r}])}function Zu(e){let t=e[26]??={};return t.enter??=new Map}function jte(e){let t=typeof e==`function`?e():e,n=Array.isArray(t)?t:null;return typeof t==`string`&&(n=t.trim().split(/\s+/).filter(e=>e)),n}function Qu(e){return e.composedPath?e.composedPath()[0]:e.target}function $u(e,t){let n=qu.get(t);if(n===void 0)return!0;if(t!==Qu(e))return!1;let r=e.animation;if(r){let e=Hu(r);if(e!==void 0&&e+Ete<n.duration)return!1}return n.animationName===void 0?n.propertyName===void 0?!1:n.propertyName===`all`||e.propertyName===n.propertyName:e.animationName===n.animationName}function Mte(e,t,n){let r=e.get(t.index)??{animateFns:[]};r.animateFns.push(n),e.set(t.index,r)}var ed=(function(e){return e[e.CHANGE_DETECTION=0]=`CHANGE_DETECTION`,e[e.AFTER_NEXT_RENDER=1]=`AFTER_NEXT_RENDER`,e})(ed||{}),td=new Di(``),nd=new Set;function rd(e){nd.has(e)||(nd.add(e),performance?.mark?.(`mark_feature_usage`,{detail:{feature:e}}))}var id=(()=>{class e{impl=null;execute(){this.impl?.execute()}static ɵprov=bi({token:e,providedIn:`root`,factory:()=>new e})}return e})(),ad=[0,1,2,3],od=(()=>{class e{ngZone=x(Ps);scheduler=x(rc);errorHandler=x(Ks,{optional:!0});sequences=new Set;deferredRegistrations=new Set;executing=!1;constructor(){x(td,{optional:!0})}execute(){let e=this.sequences.size>0;e&&Nc(bc.AfterRenderHooksStart),this.executing=!0;for(let e of ad)for(let t of this.sequences)if(!t.erroredOrDestroyed&&t.hooks[e])try{t.pipelinedValue=this.ngZone.runOutsideAngular(()=>this.maybeTrace(()=>{let n=t.hooks[e];return n(t.pipelinedValue)},t.snapshot))}catch(e){t.erroredOrDestroyed=!0,this.errorHandler?.handleError(e)}this.executing=!1;for(let e of this.sequences)e.afterRun(),e.once&&(this.sequences.delete(e),e.destroy());for(let e of this.deferredRegistrations)this.sequences.add(e);this.deferredRegistrations.size>0&&this.scheduler.notify(7),this.deferredRegistrations.clear(),e&&Nc(bc.AfterRenderHooksEnd)}register(e){let{view:t}=e;t===void 0?this.executing?this.deferredRegistrations.add(e):this.addSequence(e):((t[25]??=[]).push(e),Oo(t),t[2]|=8192)}addSequence(e){this.sequences.add(e),this.scheduler.notify(7)}unregister(e){this.executing&&this.sequences.has(e)?(e.erroredOrDestroyed=!0,e.pipelinedValue=void 0,e.once=!0):(this.sequences.delete(e),this.deferredRegistrations.delete(e))}maybeTrace(e,t){return t?t.run(ed.AFTER_NEXT_RENDER,e):e()}static ɵprov=bi({token:e,providedIn:`root`,factory:()=>new e})}return e})(),sd=class{impl;hooks;view;once;snapshot;erroredOrDestroyed=!1;pipelinedValue=void 0;unregisterOnDestroy;constructor(e,t,n,r,i,a=null){this.impl=e,this.hooks=t,this.view=n,this.once=r,this.snapshot=a,this.unregisterOnDestroy=i?.onDestroy(()=>this.destroy())}afterRun(){this.erroredOrDestroyed=!1,this.pipelinedValue=void 0,this.snapshot?.dispose(),this.snapshot=null}destroy(){this.impl.unregister(this),this.unregisterOnDestroy?.();let e=this.view?.[25];e&&(this.view[25]=e.filter(e=>e!==this))}};function cd(e,t){let n=t?.injector??x(bs);return rd(`NgAfterNextRender`),Pte(e,n,t,!0)}function Nte(e){return e instanceof Function?[void 0,void 0,e,void 0]:[e.earlyRead,e.write,e.mixedReadWrite,e.read]}function Pte(e,t,n,r){let i=t.get(id);i.impl??=t.get(od);let a=t.get(td,null,{optional:!0}),o=n?.manualCleanup===!0?null:t.get(Ss),s=t.get(tc,null,{optional:!0}),c=new sd(i.impl,Nte(e),s?.view,r,o,a?.snapshot(null));return i.impl.register(c),c}var ld=new Di(``,{factory:()=>{let e=x(Va),t=new Set;return e.onDestroy(()=>t.clear()),{queue:t,isScheduled:!1,scheduler:null,injector:e}}});function ud(e,t,n){let r=e.get(ld);if(Array.isArray(t))for(let e of t)r.queue.add(e),n?.detachedLeaveAnimationFns?.push(e);else r.queue.add(t),n?.detachedLeaveAnimationFns?.push(t);r.scheduler&&r.scheduler(e)}function Fte(e,t){let n=e.get(ld);if(Array.isArray(t))for(let e of t)n.queue.delete(e);else n.queue.delete(t)}function Ite(e,t){let n=e.get(ld);if(t.detachedLeaveAnimationFns){for(let e of t.detachedLeaveAnimationFns)n.queue.delete(e);t.detachedLeaveAnimationFns=void 0}}function Lte(e){let t=e.get(ld);t.isScheduled||=(cd(()=>{t.isScheduled=!1;for(let e of t.queue)e();t.queue.clear()},{injector:t.injector}),!0)}function Rte(e){let t=e.get(ld);t.scheduler=Lte,t.scheduler(e)}function dd(e,t){for(let[n,r]of t)ud(e,r.animateFns)}function fd(e,t,n,r){let i=e?.[26]?.enter;t!==null&&i&&i.has(n.index)&&dd(r,i)}function pd(e,t,n,r){try{n.get(Sa)}catch{return r(!1)}let i=e?.[26];i?.enter?.has(t.index)&&Fte(n,i.enter.get(t.index).animateFns);let a=zte(e,t,i);if(a.size===0){let n=!1;if(e){let r=[];md(e,t,r),n=r.length>0}if(!n)return r(!1)}e&&Uu.add(e[19]),ud(n,()=>Bte(e,t,i||void 0,a,r),i||void 0)}function zte(e,t,n){let r=new Map,i=n?.leave;if(i&&i.has(t.index)&&r.set(t.index,i.get(t.index)),e&&i)for(let[n,a]of i){if(r.has(n))continue;let i=e[1].data[n].parent;for(;i;){if(i===t){r.set(n,a);break}i=i.parent}}return r}function Bte(e,t,n,r,i){let a=[];if(n&&n.leave)for(let[e]of r){if(!n.leave.has(e))continue;let t=n.leave.get(e);for(let e of t.animateFns){let{promise:t}=e();a.push(t)}n.detachedLeaveAnimationFns=void 0}if(e&&md(e,t,a),a.length>0){let t=n||e?.[26];if(t){let n=t.running;n&&a.push(n),t.running=Promise.allSettled(a),Hte(e,t.running,i)}else Promise.allSettled(a).then(()=>{e&&Uu.delete(e[19]),i(!0)})}else e&&Uu.delete(e[19]),i(!1)}function md(e,t,n){if(t.type&12){let r=e[t.index];if(ro(r))for(let e=10;e<r.length;e++){let t=r[e];t[1].type===2&&Vte(t,n)}}let r=t.child;for(;r;)md(e,r,n),r=r.next}function Vte(e,t){let n=e[26];if(n&&n.leave)for(let e of n.leave.values())for(let n of e.animateFns){let{promise:e}=n();t.push(e)}let r=e[1].firstChild;for(;r;)md(e,r,t),r=r.next}function Hte(e,t,n){t.then(()=>{e[26]?.running===t&&(e[26].running=void 0,Uu.delete(e[19])),n(!0)})}function hd(e,t,n,r,i,a,o,s){if(i!=null){let c,l=!1;ro(i)?c=i:no(i)&&(l=!0,i=i[0]);let u=po(i);e===0&&r!==null?(fd(s,r,a,n),o==null?Cu(t,r,u):Su(t,r,u,o||null,!0)):e===1&&r!==null?(fd(s,r,a,n),Su(t,r,u,o||null,!0),kte(a,u,s)):e===2?(s?.[26]?.leave?.has(a.index)&&Ate(a,u,s),Xu.delete(u),pd(s,a,n,e=>{if(Xu.has(u)){Xu.delete(u);return}Tu(t,u,l,e)})):e===3&&(Xu.delete(u),pd(s,a,n,()=>{t.destroyNode(u)})),c!=null&&$te(t,e,n,c,a,r,o)}}function Ute(e,t){gd(e,t),t[0]=null,t[5]=null}function Wte(e,t,n,r,i,a){r[0]=i,r[5]=t,Dd(e,r,n,1,i,a)}function gd(e,t){t[10].changeDetectionScheduler?.notify(9),Dd(e,t,t[11],2,null,null)}function Gte(e){let t=e[12];if(!t)return yd(e[1],e);for(;t;){let n=null;if(no(t))n=t[12];else{let e=t[10];e&&(n=e)}if(!n){for(;t&&!t[4]&&t!==e;)no(t)&&yd(t[1],t),t=t[3];t===null&&(t=e),no(t)&&yd(t[1],t),n=t&&t[4]}t=n}}function _d(e,t){let n=e[9],r=n.indexOf(t);n.splice(r,1)}function vd(e,t){if(lo(t))return;let n=t[11];n.destroyNode&&Dd(e,t,n,3,null,null),Gte(t)}function yd(e,t){if(lo(t))return;let n=rn(null);try{t[2]&=-129,t[2]|=256,t[24]&&yn(t[24]),qte(e,t),Kte(e,t),t[1].type===1&&t[11].destroy();let n=t[16];if(n!==null&&ro(t[3])){n!==t[3]&&_d(n,t);let r=t[18];r!==null&&r.detachView(e)}Hl(t)}finally{rn(n)}}function Kte(e,t){let n=e.cleanup,r=t[7];if(n!==null)for(let e=0;e<n.length-1;e+=2)if(typeof n[e]==`string`){let t=n[e+3];t>=0?r[t]():r[-t].unsubscribe(),e+=2}else{let t=r[n[e+1]];n[e].call(t)}r!==null&&(t[7]=null);let i=t[21];if(i!==null){t[21]=null;for(let e=0;e<i.length;e++){let t=i[e];t()}}let a=t[23];if(a!==null){t[23]=null;for(let e of a)e.destroy()}}function qte(e,t){let n;if(e!=null&&(n=e.destroyHooks)!=null)for(let e=0;e<n.length;e+=2){let r=t[n[e]];if(!(r instanceof Uc)){let t=n[e+1];if(Array.isArray(t))for(let e=0;e<t.length;e+=2){let n=r[t[e]],i=t[e+1];Nc(bc.LifecycleHookStart,n,i);try{i.call(n)}finally{Nc(bc.LifecycleHookEnd,n,i)}}else{Nc(bc.LifecycleHookStart,r,t);try{t.call(r)}finally{Nc(bc.LifecycleHookEnd,r,t)}}}}}function bd(e,t,n){if(t===null)throw new fi(510,!1);return Jte(e,t.parent,n)}function Jte(e,t,n){let r=t;for(;r!==null&&r.type&168;)t=r,r=t.parent;if(r===null)return n[0];if(ao(r)){let{encapsulation:t}=e.data[r.directiveStart+r.componentOffset];if(t===su.None||t===su.Emulated)return null}return ho(r,n)}function xd(e,t,n){return Xte(e,t,n)}function Yte(e,t,n){return e.type&40?ho(e,n):null}var Xte=Yte;function Sd(e,t,n,r){let i=bd(e,r,t),a=t[11],o=xd(r.parent||t[5],r,t);if(i!=null){if(Array.isArray(n))for(let e=0;e<n.length;e++)wu(a,i,n[e],o,!1);else wu(a,i,n,o,!1)}}function Cd(e,t){if(t!==null){let n=t.type;if(n&3)return ho(t,e);if(n&4)return Td(-1,e[t.index]);if(n&8){let n=t.child;if(n!==null)return Cd(e,n);{let n=e[t.index];return ro(n)?Td(-1,n):po(n)}}if(n&128)return Cd(e,t.next);if(n&32)return Lu(t,e)()||po(e[t.index]);{let n=wd(e,t);return n===null?Cd(e,t.next):Array.isArray(n)?n[0]:Cd(Ao(e[15]),n)}}return null}function wd(e,t){if(t!==null){let n=e[15][5],r=t.projection;return n.projection[r]}return null}function Td(e,t){let n=10+e+1;if(n<t.length){let e=t[n],r=e[1].firstChild;if(r!==null)return Cd(e,r)}return t[7]}function Ed(e,t,n,r,i,a,o){for(;n!=null;){let s=r[9];if(n.type===128){n=n.next;continue}let c=r[n.index],l=n.type;if(o&&t===0&&(c&&Wl(po(c),r),n.flags|=2),!tu(n)){if(l&8)Ed(e,t,n.child,r,i,a,!1),hd(t,e,s,i,c,n,a,r);else if(l&32){let o=Lu(n,r),l;for(;l=o();)hd(t,e,s,i,l,n,a,r);hd(t,e,s,i,c,n,a,r)}else l&16?Od(e,t,r,n,i,a):hd(t,e,s,i,c,n,a,r)}n=o?n.projectionNext:n.next}}function Dd(e,t,n,r,i,a){e.type===3?Zte(n,r,t,i,a):Ed(n,r,e.firstChild,t,i,a,!1)}function Zte(e,t,n,r,i){let a=n[1].firstChild,o=a.next,s=po(n[a.index]),c=po(n[o.index]),l=o.index+1,u=n[l];if(t===1||t===0)r!==null&&(u&&u.hasChildNodes()?Su(e,r,u,i,!0):(Su(e,r,s,i,!0),Su(e,r,c,i,!0)));else if(t===2){if(u||(u=document.createDocumentFragment(),n[l]=u),s&&s.parentNode===u)return;let e=s;for(;e!==null;){let t=e.nextSibling;if(u.appendChild(e),e===c)break;e=t}}}function Qte(e,t,n){let r=t[11];Od(r,0,t,n,bd(e,n,t),xd(n.parent||t[5],n,t))}function Od(e,t,n,r,i,a){let o=n[15],s=o[5].projection[r.projection];if(Array.isArray(s))for(let o=0;o<s.length;o++){let c=s[o];hd(t,e,n[9],i,c,r,a,n)}else{let n=s,c=o[3];Il(r)&&(n.flags|=128),Ed(e,t,n,c,i,a,!0)}}function $te(e,t,n,r,i,a,o){let s=r[7];if(s!==po(r)&&hd(t,e,n,a,s,i,o),!(r[2]&4))for(let n=10;n<r.length;n++){let i=r[n];Dd(i[1],i,e,t,a,s)}}function kd(e,t,n,r,i){if(t)i?e.addClass(n,r):e.removeClass(n,r);else{let t=r.indexOf(`-`)===-1?void 0:Iu.DashCase;i==null?e.removeStyle(n,r,t):(typeof i==`string`&&i.endsWith(`!important`)&&(i=i.slice(0,-10),t|=Iu.Important),e.setStyle(n,r,i,t))}}function Ad(e,t,n,r,i,a,o,s,c,l,u){let d=27+r,f=d+i,p=jd(d,f),m=typeof l==`function`?l():l;return p[1]={type:e,blueprint:p,template:n,queries:null,viewQuery:s,declTNode:t,data:p.slice().fill(null,d),bindingStartIndex:d,expandoStartIndex:f,hostBindingOpCodes:null,firstCreatePass:!0,firstUpdatePass:!0,staticViewQueries:!1,staticContentQueries:!1,preOrderHooks:null,preOrderCheckHooks:null,contentHooks:null,contentCheckHooks:null,viewHooks:null,viewCheckHooks:null,destroyHooks:null,cleanup:null,contentQueries:null,components:null,directiveRegistry:typeof a==`function`?a():a,pipeRegistry:typeof o==`function`?o():o,firstChild:null,schemas:c,consts:m,incompleteFirstPass:!1,ssrId:u}}function jd(e,t){let n=[];for(let r=0;r<t;r++)n.push(r<e?null:Fu);return n}function Md(e){let t=e.tView;return t===null||t.incompleteFirstPass?e.tView=Ad(1,null,e.template,e.decls,e.vars,e.directiveDefs,e.pipeDefs,e.viewQuery,e.schemas,e.consts,e.id):t}function Nd(e,t,n,r,i,a,o,s,c,l,u){let d=t.blueprint.slice();return d[0]=i,d[2]=r|1228,(l!==null||e&&e[2]&2048)&&(d[2]|=2048),Co(d),d[3]=d[14]=e,d[8]=n,d[10]=o||e&&e[10],d[11]=s||e&&e[11],d[9]=c||e&&e[9]||null,d[5]=a,d[19]=Bl(),d[6]=u,d[20]=l,d[15]=t.type==2?e[15]:d,d}function Pd(e,t,n){let r=ho(t,e),i=Md(n),a=e[10].rendererFactory,o=Ld(e,Nd(e,i,null,Fd(n),r,t,null,a.createRenderer(r,n),null,null,null));return e[t.index]=o}function Fd(e){let t=16;return e.signals?t=4096:e.onPush&&(t=64),t}function Id(e,t,n,r){if(n===0)return-1;let i=t.length;for(let i=0;i<n;i++)t.push(r),e.blueprint.push(r),e.data.push(null);return i}function Ld(e,t){return e[12]?e[13][4]=t:e[12]=t,e[13]=t,t}function D(e=1){Rd(Vo(),Bo(),ls()+e,!1)}function Rd(e,t,n,r){if(!r){if((t[2]&3)==3){let r=e.preOrderCheckHooks;r!==null&&Ic(t,r,n)}else{let r=e.preOrderHooks;r!==null&&Lc(t,r,0,n)}}us(n)}var zd=(function(e){return e[e.None=0]=`None`,e[e.SignalBased=1]=`SignalBased`,e[e.HasDecoratorInputTransform=2]=`HasDecoratorInputTransform`,e})(zd||{});function Bd(e,t,n,r){let i=rn(null);try{let[i,a,o]=e.inputs[n],s=null;(a&zd.SignalBased)!==0&&(s=t[i][nn]),s!==null&&s.transformFn!==void 0?r=s.transformFn(r):o!==null&&(r=o.call(t,r)),e.setInput===null?Sc(t,s,i,r):e.setInput(t,s,r,n,i)}finally{rn(i)}}function Vd(e,t,n,r,i){let a=ls(),o=r&2;try{us(-1),o&&t.length>27&&Rd(e,t,27,!1),Nc(o?bc.TemplateUpdateStart:bc.TemplateCreateStart,i,n),n(r,i)}finally{us(a),Nc(o?bc.TemplateUpdateEnd:bc.TemplateCreateEnd,i,n)}}function Hd(e,t,n){Yd(e,t,n),(n.flags&64)==64&&Xd(e,t,n)}function Ud(e,t,n=ho){let r=t.localNames;if(r!==null){let i=t.index+1;for(let a=0;a<r.length;a+=2){let o=r[a+1],s=o===-1?n(t,e):e[o];e[i++]=s}}}function Wd(e,t,n,r){let i=r.get(Ql,Zl)||n===su.ShadowDom||n===su.ExperimentalIsolatedShadowDom;return e.selectRootElement(t,i)}function Gd(e){return e===`class`?`className`:e===`for`?`htmlFor`:e===`formaction`?`formAction`:e===`innerHtml`?`innerHTML`:e===`readonly`?`readOnly`:e===`tabindex`?`tabIndex`:e}function Kd(e,t,n,r,i,a){let o=t[1];if(of(e,o,t,n,r)){ao(e)&&Jd(t,e.index);return}e.type&3&&(n=Gd(n)),qd(e,t,n,r,i,a)}function qd(e,t,n,r,i,a){if(e.type&3){let o=ho(e,t);r=a==null?r:a(r,e.value||``,n),i.setProperty(o,n,r)}else e.type&12}function Jd(e,t){let n=yo(t,e);n[2]&16||(n[2]|=64)}function Yd(e,t,n){let r=n.directiveStart,i=n.directiveEnd;ao(n)&&Pd(t,n,e.data[r+n.componentOffset]),e.firstCreatePass||cl(n,t);let a=n.initialInputs;for(let o=r;o<i;o++){let i=e.data[o],s=yl(t,e,o,n);if(Wl(s,t),a!==null&&tf(t,o-r,s,i,n,a),so(i)){let r=yo(n.index,t);r[8]=yl(t,e,o,n)}}}function Xd(e,t,n){let r=n.directiveStart,i=n.directiveEnd,a=n.index,o=Qee();try{us(a);for(let n=r;n<i;n++){let r=e.data[n],i=t[n];es(n),(r.hostBindings!==null||r.hostVars!==0||r.hostAttrs!==null)&&Zd(r,i)}}finally{us(-1),es(o)}}function Zd(e,t){e.hostBindings!==null&&e.hostBindings(1,t)}function Qd(e,t){let n=e.directiveRegistry,r=null;if(n)for(let e=0;e<n.length;e++){let i=n[e];Nu(t,i.selectors,!1)&&(r??=[],so(i)?r.unshift(i):r.push(i))}return r}function $d(e,t,n,r,i,a){let o=ho(e,t);ef(t[11],o,a,e.value,n,r,i)}function ef(e,t,n,r,i,a,o){if(a==null)o?.(a,r||``,i),e.removeAttribute(t,i,n);else{let s=o==null?zi(a):o(a,r||``,i);e.setAttribute(t,i,s,n)}}function tf(e,t,n,r,i,a){let o=a[t];if(o!==null)for(let e=0;e<o.length;e+=2){let t=o[e],i=o[e+1];Bd(r,n,t,i)}}function nf(e,t,n,r,i){let a=27+n,o=t[1],s=i(o,t,e,r,n);t[a]=s,Wo(e,!0);let c=e.type===2;return c?(Eu(t[11],s,e),(Kee()===0||oo(e))&&Wl(s,t),qee()):Wl(s,t),gs()&&(!c||!tu(e))&&Sd(o,t,s,e),e}function rf(e){let t=e;return Go()?Ko():(t=t.parent,Wo(t,!1)),t}function af(e,t){let n=e[9];if(!n)return;let r;try{r=n.get(qs,null)}catch{r=null}r?.(t)}function of(e,t,n,r,i){let a=e.inputs?.[r],o=e.hostDirectiveInputs?.[r],s=!1;if(o)for(let e=0;e<o.length;e+=2){let r=o[e],a=o[e+1],c=t.data[r];Bd(c,n[r],a,i),s=!0}if(a)for(let e of a){let a=n[e],o=t.data[e];Bd(o,a,r,i),s=!0}return s}function sf(e,t,n,r,i,a){let o=null,s=null,c=null,l=!1,u=e.directiveToIndex.get(r.type);if(typeof u==`number`?o=u:[o,s,c]=u,s!==null&&c!==null&&e.hostDirectiveInputs&&Object.hasOwn(e.hostDirectiveInputs,i)){let r=e.hostDirectiveInputs[i];for(let e=0;e<r.length;e+=2){let i=r[e];if(i>=s&&i<=c){let o=t.data[i],s=r[e+1];Bd(o,n[i],s,a),l=!0}else if(i>c)break}}return o!==null&&Object.hasOwn(r.inputs,i)&&(Bd(r,n[o],i,a),l=!0),l}function cf(e,t){let n=yo(t,e),r=n[1];lf(r,n);let i=n[0];i!==null&&n[6]===null&&(n[6]=ru(i,n[9])),Nc(bc.ComponentStart);try{uf(r,n,n[8])}finally{Nc(bc.ComponentEnd,n[8])}}function lf(e,t){for(let n=t.length;n<e.blueprint.length;n++)t.push(e.blueprint[n])}function uf(e,t,n){rs(t);try{let r=e.viewQuery;r!==null&&au(1,r,n);let i=e.template;i!==null&&Vd(e,t,i,1,n),e.firstCreatePass&&=!1,t[18]?.finishViewCreation(e),e.staticContentQueries&&iu(e,t),e.staticViewQueries&&au(2,e.viewQuery,n);let a=e.components;a!==null&&df(t,a)}catch(t){throw e.firstCreatePass&&=(e.incompleteFirstPass=!0,!1),t}finally{t[2]&=-5,cs()}}function df(e,t){for(let n=0;n<t.length;n++)cf(e,t[n])}function ff(e,t,n,r){let i=rn(null);try{let i=t.tView,a=Nd(e,i,n,e[2]&4096?4096:16,null,t,null,null,r?.injector??null,r?.embeddedViewInjector??null,r?.dehydratedView??null);a[16]=e[t.index];let o=e[18];return o!==null&&(a[18]=o.createEmbeddedView(i)),uf(i,a,n),a}finally{rn(i)}}function pf(e,t){return!t||t.firstChild===null||Il(e)}function mf(e,t,n,r,i=!1){if(e.type===3){let n=e.firstChild,i=n.next,a=po(t[n.index]),o=po(t[i.index]),s=a;for(;s!==null&&(r.push(s),s!==o);)s=s.nextSibling;return r}for(;n!==null;){if(n.type===128){n=i?n.projectionNext:n.next;continue}let a=t[n.index];if(a!==null){if(ro(a)){let e=a[7];e!==a[0]&&r.push(po(a)),a[2]&4||hf(a,r),r.push(e)}else r.push(po(a))}let o=n.type;if(o&8)mf(e,t,n.child,r);else if(o&32){let e=Lu(n,t),i;for(;i=e();)r.push(i)}else if(o&16){let e=wd(t,n);if(Array.isArray(e))r.push(...e);else{let n=Ao(t[15]);mf(n[1],n,e,r,!0)}}n=i?n.projectionNext:n.next}return r}function hf(e,t){for(let n=10;n<e.length;n++){let r=e[n],i=r[1].firstChild;i!==null&&mf(r[1],r,i,t)}}function gf(e){if(e[25]!==null){for(let t of e[25])t.impl.addSequence(t);e[25].length=0}}var _f=[];function vf(e){return e[24]??yf(e)}function yf(e){let t=_f.pop()??Object.create(xf);return t.lView=e,t}function bf(e){e.lView[24]!==e&&(e.lView=null,_f.push(e))}var xf={...on,consumerIsAlwaysLive:!0,kind:`template`,consumerMarkedDirty:e=>{Oo(e.lView)},consumerOnSignalRead(){this.lView[24]=this}};function Sf(e){let t=e[24]??Object.create(Cf);return t.lView=e,t}var Cf={...on,consumerIsAlwaysLive:!0,kind:`template`,consumerMarkedDirty:e=>{let t=Ao(e.lView);for(;t&&!wf(t[1]);)t=Ao(t);t&&wo(t)},consumerOnSignalRead(){this.lView[24]=this}};function wf(e){return e.type!==2}function Tf(e){if(e[23]===null)return;let t=!0;for(;t;){let n=!1;for(let t of e[23])if(t.dirty&&(n=!0,t.zone===null||Zone.current===t.zone?t.run():t.zone.run(()=>t.run()),e[23]===null))return;t=n&&!!(e[2]&8192)}}var Ef=100;function Df(e,t=0){let n=e[10].rendererFactory;n.begin?.();try{Of(e,t)}finally{n.end?.()}}function Of(e,t){let n=Jo();try{Yo(!0),Pf(e,t);let n=0;for(;Eo(e);){if(n===Ef)throw new fi(103,!1);n++,Pf(e,1)}}finally{Yo(n)}}function kf(e,t,n,r){if(lo(t))return;let i=t[2];rs(t);let a=!0,o=null,s=null;wf(e)?(s=vf(t),o=mn(s)):an()===null?(a=!1,s=Sf(t),o=mn(s)):t[24]&&=(yn(t[24]),null);try{Co(t),Yee(e.bindingStartIndex),n!==null&&Vd(e,t,n,2,r);let a=(i&3)==3;if(a){let n=e.preOrderCheckHooks;n!==null&&Ic(t,n,null)}else{let n=e.preOrderHooks;n!==null&&Lc(t,n,0,null),Rc(t,0)}if(jf(t),Tf(t),Af(t,0),e.contentQueries!==null&&iu(e,t),a){let n=e.contentCheckHooks;n!==null&&Ic(t,n)}else{let n=e.contentHooks;n!==null&&Lc(t,n,1),Rc(t,1)}If(e,t);let o=e.components;o!==null&&Ff(t,o,0);let s=e.viewQuery;if(s!==null&&au(2,s,r),a){let n=e.viewCheckHooks;n!==null&&Ic(t,n)}else{let n=e.viewHooks;n!==null&&Lc(t,n,2),Rc(t,2)}if(e.firstUpdatePass===!0&&(e.firstUpdatePass=!1),t[22]){for(let e of t[22])e();t[22]=null}gf(t),t[2]&=-73}catch(e){throw Oo(t),e}finally{s!==null&&(gn(s,o),a&&bf(s)),cs()}}function Af(e,t){for(let n=Gl(e);n!==null;n=Kl(n))for(let e=10;e<n.length;e++){let r=n[e];Nf(r,t)}}function jf(e){for(let t=Gl(e);t!==null;t=Kl(t)){if(!(t[2]&2))continue;let e=t[9];for(let t=0;t<e.length;t++){let n=e[t];wo(n)}}}function Mf(e,t,n){Nc(bc.ComponentStart);let r=yo(t,e);try{Nf(r,n)}finally{Nc(bc.ComponentEnd,r[8])}}function Nf(e,t){bo(e)&&Pf(e,t)}function Pf(e,t){let n=e[1],r=e[2],i=e[24],a=!!(t===0&&r&16);if(a||=!!(r&64&&t===0),a||=!!(r&1024),a||=!!(i?.dirty&&vn(i)),a||=!1,i&&(i.dirty=!1),e[2]&=-9217,a)kf(n,e,n.template,e[8]);else if(r&8192){let t=rn(null);try{Tf(e),Af(e,1);let t=n.components;t!==null&&Ff(e,t,1),gf(e)}finally{rn(t)}}}function Ff(e,t,n){for(let r=0;r<t.length;r++)Mf(e,t[r],n)}function If(e,t){let n=e.hostBindingOpCodes;if(n!==null)try{for(let e=0;e<n.length;e++){let r=n[e];if(r<0)us(~r);else{let i=r,a=n[++e],o=n[++e];Zee(a,i);let s=t[i];Nc(bc.HostBindingsUpdateStart,s);try{o(2,s)}finally{Nc(bc.HostBindingsUpdateEnd,s)}}}}finally{us(-1)}}function Lf(e,t){let n=Jo()?64:1088;for(e[10].changeDetectionScheduler?.notify(t);e;){e[2]|=n;let t=Ao(e);if(co(e)&&!t)return e;e=t}return null}function Rf(e,t,n,r){return[e,!0,0,t,null,r,null,n,null,null]}function zf(e,t){let n=10+t;if(n<e.length)return e[n]}function Bf(e,t,n,r=!0){let i=t[1];if(Uf(i,t,e,n),r){let r=Td(n,e),a=t[11],o=a.parentNode(e[7]);o!==null&&Wte(i,e[5],a,t,o,r)}let a=t[6];a!==null&&a.firstChild!==null&&(a.firstChild=null)}function Vf(e,t){let n=Hf(e,t);return n!==void 0&&vd(n[1],n),n}function Hf(e,t){if(e.length<=10)return;let n=10+t,r=e[n];if(r){let i=r[16];i!==null&&i!==e&&_d(i,r),t>0&&(e[n-1][4]=r[4]);let a=fa(e,10+t);Ute(r[1],r);let o=a[18];o!==null&&o.detachView(a[1]),r[3]=null,r[4]=null,r[2]&=-129}return r}function Uf(e,t,n,r){let i=10+r,a=n.length;r>0&&(n[i-1][4]=t),r<a-10?(t[4]=n[i],da(n,10+r,t)):(n.push(t),t[4]=null),t[3]=n;let o=t[16];o!==null&&n!==o&&Wf(o,t);let s=t[18];s!==null&&s.insertView(e),Do(t),t[2]|=128}function Wf(e,t){let n=e[9],r=t[3];if(no(r))e[2]|=2;else{let n=r[3][15];t[15]!==n&&(e[2]|=2)}n===null?e[9]=[t]:n.push(t)}var Gf=class{_lView;_cdRefInjectingView;_appRef=null;_attachedToViewContainer=!1;exhaustive;get rootNodes(){let e=this._lView,t=e[1];return mf(t,e,t.firstChild,[])}constructor(e,t){this._lView=e,this._cdRefInjectingView=t}get context(){return this._lView[8]}set context(e){this._lView[8]=e}get destroyed(){return lo(this._lView)}destroy(){if(this._appRef)this._appRef.detachView(this);else if(this._attachedToViewContainer){let e=this._lView[3];if(ro(e)){let t=e[8],n=t?t.indexOf(this):-1;n>-1&&(Hf(e,n),fa(t,n))}this._attachedToViewContainer=!1}vd(this._lView[1],this._lView)}onDestroy(e){ko(this._lView,e)}markForCheck(){Lf(this._cdRefInjectingView||this._lView,4)}detach(){this._lView[2]&=-129}reattach(){Do(this._lView),this._lView[2]|=128}detectChanges(){this._lView[2]|=1024,Df(this._lView)}checkNoChanges(){}attachToViewContainerRef(){if(this._appRef)throw new fi(902,!1);this._attachedToViewContainer=!0}detachFromAppRef(){this._appRef=null;let e=co(this._lView),t=this._lView[16];t!==null&&!e&&_d(t,this._lView),gd(this._lView[1],this._lView)}attachToAppRef(e){if(this._attachedToViewContainer)throw new fi(902,!1);this._appRef=e;let t=co(this._lView),n=this._lView[16];n!==null&&!t&&Wf(n,this._lView),Do(this._lView)}},Kf=(()=>{class e{_declarationLView;_declarationTContainer;elementRef;static __NG_ELEMENT_ID__=qf;constructor(e,t,n){this._declarationLView=e,this._declarationTContainer=t,this.elementRef=n}get ssrId(){return this._declarationTContainer.tView?.ssrId||null}createEmbeddedView(e,t){return this.createEmbeddedViewImpl(e,t)}createEmbeddedViewImpl(e,t,n){return new Gf(ff(this._declarationLView,this._declarationTContainer,e,{embeddedViewInjector:t,dehydratedView:n}))}}return e})();function qf(){return Jf(Ho(),Bo())}function Jf(e,t){return e.type&4?new Kf(t,e,jl(e,t)):null}function Yf(e,t,n,r,i){let a=e.data[t];if(a===null)a=Xf(e,t,n,r,i),Xee()&&(a.flags|=32);else if(a.type&64){a.type=n,a.value=r,a.attrs=i;let e=Jee();a.injectorIndex=e===null?-1:e.injectorIndex}return Wo(a,!0),a}function Xf(e,t,n,r,i){let a=Uo(),o=Go(),s=o?a:a&&a.parent,c=e.data[t]=Qf(e,s,n,t,r,i);return Zf(e,c,a,o),c}function Zf(e,t,n,r){e.firstChild===null&&(e.firstChild=t),n!==null&&(r?n.child==null&&t.parent!==null&&(n.child=t):n.next===null&&(n.next=t,t.prev=n))}function Qf(e,t,n,r,i,a){let o=t?t.injectorIndex:-1,s=0;return Lo()&&(s|=128),{type:n,index:r,insertBeforeIndex:null,injectorIndex:o,directiveStart:-1,directiveEnd:-1,directiveStylingLast:-1,componentOffset:-1,controlDirectiveIndex:-1,customControlIndex:-1,propertyBindings:null,flags:s,providerIndexes:0,value:i,namespace:ms(),attrs:a,mergedAttrs:null,localNames:null,initialInputs:null,inputs:null,hostDirectiveInputs:null,outputs:null,hostDirectiveOutputs:null,directiveToIndex:null,tView:null,next:null,prev:null,projectionNext:null,child:null,parent:t,projection:null,styles:null,stylesWithoutHost:null,residualStyles:void 0,classes:null,classesWithoutHost:null,residualClasses:void 0,classBindings:0,styleBindings:0}}function $f(e){let t=e[6]??[],n=e[3][11],r=[];for(let e of t)e.data.di===void 0?ep(e,n):r.push(e);e[6]=r}function ep(e,t){let n=0,r=e.firstChild;if(r){let i=e.data.r;for(;n<i;){let e=r.nextSibling;Tu(t,r,!1),r=e,n++}}}var tp=()=>null,np=()=>null;function rp(e,t){return tp(e,t)}function ip(e,t,n){return np(e,t,n)}var ap=class{},op=class{},sp=class{destroyNode=null;static __NG_ELEMENT_ID__=()=>cp()};function cp(){let e=Bo(),t=yo(Ho().index,e);return(no(t)?t:e)[11]}var lp=(()=>{class e{static ɵprov=bi({token:e,providedIn:`root`,factory:()=>null})}return e})();function up(e){return e.debugInfo?.className||e.type.name||null}var dp={},fp=class{injector;parentInjector;constructor(e,t){this.injector=e,this.parentInjector=t}get(e,t,n){let r=this.injector.get(e,dp,n);return r!==dp||t===dp?r:this.parentInjector.get(e,t,n)}};function pp(e,t,n){return e[t]=n}function mp(e,t){return e[t]}function hp(e,t,n){if(n===Fu)return!1;let r=e[t];return!Object.is(r,n)&&(e[t]=n,!0)}function gp(e,t,n,r){let i=hp(e,t,n);return hp(e,t+1,r)||i}function _p(e,t,n,r,i){let a=gp(e,t,n,r);return hp(e,t+2,i)||a}function vp(e,t,n,r,i,a){let o=gp(e,t,n,r);return gp(e,t+2,i,a)||o}function yp(e,t,n){return function r(i){let a=r.__ngNativeEl__;a!==void 0&&eu(i,a),Lf(ao(e)?yo(e.index,t):t,5);let o=t[8],s=bp(t,o,n,i),c=r.__ngNextListenerFn__;for(;c;)s=bp(t,o,c,i)&&s,c=c.__ngNextListenerFn__;return s}}function bp(e,t,n,r){let i=rn(null);try{return Nc(bc.OutputStart,t,n),n(r)!==!1}catch(t){return af(e,t),!1}finally{Nc(bc.OutputEnd,t,n),rn(i)}}function xp(e,t,n,r,i,a,o,s){let c=oo(e),l=!1,u=null;if(!r&&c&&(u=Cp(t,n,a,e.index)),u!==null){let e=u.__ngLastListenerFn__||u;e.__ngNextListenerFn__=o,u.__ngLastListenerFn__=o,l=!0}else{let o=ho(e,n),c=r?r(o):o;r||(s.__ngNativeEl__=o);let l=i.listen(c,a,s);Sp(a)||wp(r?t=>r(po(t[e.index])):e.index,t,n,a,s,l,!1)}return l}function Sp(e){return e.startsWith(`animation`)||e.startsWith(`transition`)}function Cp(e,t,n,r){let i=e.cleanup;if(i!=null)for(let e=0;e<i.length-1;e+=2){let a=i[e];if(a===n&&i[e+1]===r){let n=t[7],r=i[e+2];return n&&n.length>r?n[r]:null}typeof a==`string`&&(e+=2)}return null}function wp(e,t,n,r,i,a,o){let s=t.firstCreatePass?Mo(t):null,c=jo(n),l=c.length;c.push(i,a),s&&s.push(r,e,l,(l+1)*(o?-1:1))}function Tp(e,t,n,r,i){let a=null,o=null,s=null,c=!1,l=e.directiveToIndex.get(n.type);if(typeof l==`number`?a=l:[a,o,s]=l,o!==null&&s!==null&&e.hostDirectiveOutputs&&Object.hasOwn(e.hostDirectiveOutputs,r)){let n=e.hostDirectiveOutputs[r];for(let a=0;a<n.length;a+=2){let l=n[a];if(l>=o&&l<=s)c=!0,Ep(e,t,l,n[a+1],r,i);else if(l>s)break}}return Object.hasOwn(n.outputs,r)&&(c=!0,Ep(e,t,a,r,r,i)),c}function Ep(e,t,n,r,i,a){let o=t[n],s=t[1],c=o[s.data[n].outputs[r]].subscribe(a);wp(e.index,s,t,i,a,c,!0)}function Dp(){Op()}function Op(){let e=Bo(),t=Vo(),n=Ho();if(t.firstCreatePass&&Pp(t,n),n.controlDirectiveIndex===-1)return;rd(`NgSignalForms`);let r=e[n.controlDirectiveIndex];t.data[n.controlDirectiveIndex].controlDef.create(r,new jp(e,t,n))}function kp(){Ap()}function Ap(){let e=Bo(),t=Vo(),n=ds();if(n.controlDirectiveIndex===-1)return;let r=t.data[n.controlDirectiveIndex].controlDef,i=e[n.controlDirectiveIndex];r.update(i,new jp(e,t,n))}var jp=class{lView;tView;tNode;hasPassThrough;constructor(e,t,n){this.lView=e,this.tView=t,this.tNode=n,this.hasPassThrough=!!(n.flags&4096)}get customControl(){return this.tNode.customControlIndex===-1?void 0:this.lView[this.tNode.customControlIndex]}get nativeElement(){return ho(this.tNode,this.lView)}get descriptor(){return`<${this.tNode.value}>`}listenToCustomControlOutput(e,t){let n=this.tView.data[this.tNode.customControlIndex];Tp(this.tNode,this.lView,n,e,yp(this.tNode,this.lView,t))}listenToCustomControlModel(e){let t=this.tNode.flags&1024?`valueChange`:`checkedChange`,n=this.tView.data[this.tNode.customControlIndex];Tp(this.tNode,this.lView,n,t,yp(this.tNode,this.lView,e))}listenToDom(e,t){xp(this.tNode,this.tView,this.lView,void 0,this.lView[11],e,t,yp(this.tNode,this.lView,t))}setInputOnDirectives(e,t,n){let r=this.tNode.inputs?.[e],i=this.tNode.hostDirectiveInputs?.[e];if(!r&&!i)return!1;let a=!1;if(r)for(let i of r){if(i===this.tNode.controlDirectiveIndex)continue;let r=this.lView[i],o=this.tView.data[i];(!n||n(Np(r,o,e)))&&(Bd(o,r,e,t),a=!0)}if(i)for(let r=0;r<i.length;r+=2){let o=i[r];if(o===this.tNode.controlDirectiveIndex)continue;let s=this.lView[o],c=i[r+1],l=this.tView.data[o];(!n||n(Np(s,l,e)))&&(Bd(l,s,c,t),a=!0)}return a}setCustomControlModelInput(e){let t=this.tView.data[this.tNode.customControlIndex],n=this.tNode.flags&1024?`value`:`checked`;sf(this.tNode,this.tView,this.lView,t,n,e)}customControlHasInput(e){if(this.tNode.customControlIndex===-1)return!1;let t=this.tView.data[this.tNode.customControlIndex];return(t.signalFormsInputPresence??=this._buildCustomControlInputCache(t))[e]===!0}_buildCustomControlInputCache(e){let t={};for(let n in e.inputs)t[n]=!0;if(e.hostDirectives!==null){let n=[...e.hostDirectives];for(;n.length>0;){let e=n.shift();if(typeof e!=`function`){for(let n in e.inputs)t[e.inputs[n]]=!0;let r=Mp(e.directive);r!==null&&n.push(...r);continue}for(let r of e()){if(typeof r==`function`)continue;if(r.inputs)for(let e=0;e<r.inputs.length;e+=2){let n=r.inputs[e+1]||r.inputs[e];t[n]=!0}let e=Mp(r.directive);e!==null&&n.push(...e)}}}return t}};function Mp(e){return typeof e==`function`&&`ɵdir`in e?e.ɵdir.hostDirectives??null:null}function Np(e,t,n){if(!t.inputs||!Object.hasOwn(t.inputs,n))return;let[r,i]=t.inputs[n];if((i&zd.SignalBased)!==0){let t=e[r][nn];return t.value===_c?void 0:t.value}return e[r]}function Pp(e,t,n){for(let n=t.directiveStart;n<t.directiveEnd;n++)if(e.data[n].controlDef){t.controlDirectiveIndex=n;break}if(t.controlDirectiveIndex===-1)return;let r=e.data[t.controlDirectiveIndex].controlDef;if(r.passThroughInput&&(t.inputs?.[r.passThroughInput]?.length??0)>1){t.flags|=4096;return}Fp(e,t)}function Fp(e,t){for(let n=t.directiveStart;n<t.directiveEnd;n++){let r=e.data[n];if(!t.directiveToIndex||t.directiveToIndex.has(r.type)){if(Ip(r,`value`)){t.flags|=1024,t.customControlIndex=n;return}if(Ip(r,`checked`)){t.flags|=2048,t.customControlIndex=n;return}}}if(t.hostDirectiveInputs!==null&&t.hostDirectiveOutputs!==null&&t.directiveToIndex!==null){let e=(e,n)=>{let r=t.hostDirectiveInputs[e],i=t.hostDirectiveOutputs[e+`Change`];if(!r||!i)return!1;for(let e=0;e<r.length;e+=2){let a=r[e];for(let e=0;e<i.length;e+=2)if(a===i[e])for(let e of t.directiveToIndex.values()){if(!Array.isArray(e))continue;let[r,i,o]=e;if(a>=i&&a<=o)return t.flags|=n,t.customControlIndex=r,!0}}return!1};if(e(`value`,1024)||e(`checked`,2048))return}}function Ip(e,t){return Lp(e,t)&&Rp(e,t+`Change`)}function Lp(e,t){return t in e.inputs}function Rp(e,t){return t in e.outputs}var zp=Symbol(`BINDING`),Bp=new Di(``);function Vp(e,t,n){let r=n?e.styles:null,i=n?e.classes:null,a=0;if(t!==null)for(let e=0;e<t.length;e++){let n=t[e];if(typeof n==`number`)a=n;else if(a==1)i=gi(i,n);else if(a==2){let i=n,a=t[++e];r=gi(r,i+`: `+a+`;`)}}n?e.styles=r:e.stylesWithoutHost=r,n?e.classes=i:e.classesWithoutHost=i}function Hp(e,t=0){let n=Bo();return n===null?na(e,t):hl(Ho(),n,vi(e),t)}function Up(e,t,n,r,i){let a=r===null?null:{"":-1},o=i(e,n);if(o!==null){let r=o,i=null,s=null;for(let e of o)if(e.resolveHostDirectives!==null){[r,i,s]=e.resolveHostDirectives(o);break}Kp(e,t,n,r,a,i,s)}a!==null&&r!==null&&Wp(n,r,a)}function Wp(e,t,n){let r=e.localNames=[];for(let e=0;e<t.length;e+=2){let i=n[t[e+1]];if(i==null)throw new fi(-301,!1);r.push(t[e],i)}}function Gp(e,t,n){t.componentOffset=n,(e.components??=[]).push(t.index)}function Kp(e,t,n,r,i,a,o){let s=r.length,c=null;for(let i=0;i<s;i++){let a=r[i];c===null&&so(a)&&(c=a,Gp(e,n,i)),fl(cl(n,t),e,a.type)}nm(n,e.data.length,s),c?.viewProvidersResolver&&c.viewProvidersResolver(c);for(let e=0;e<s;e++){let t=r[e];t.providersResolver&&t.providersResolver(t)}let l=!1,u=!1,d=Id(e,t,s,null);s>0&&(n.directiveToIndex=new Map);for(let c=0;c<s;c++){let s=r[c];if(n.mergedAttrs=Yc(n.mergedAttrs,s.hostAttrs),Qp(e,n,t,d,s),tm(d,s,i),o!==null&&o.has(s)){let[e,t]=o.get(s);n.directiveToIndex.set(s.type,[d,e+n.directiveStart,t+n.directiveStart])}else(a===null||!a.has(s))&&n.directiveToIndex.set(s.type,d);s.contentQueries!==null&&(n.flags|=4),(s.hostBindings!==null||s.hostAttrs!==null||s.hostVars!==0)&&(n.flags|=64);let f=s.type.prototype;!l&&(f.ngOnChanges||f.ngOnInit||f.ngDoCheck)&&((e.preOrderHooks??=[]).push(n.index),l=!0),!u&&(f.ngOnChanges||f.ngDoCheck)&&((e.preOrderCheckHooks??=[]).push(n.index),u=!0),d++}qp(e,n,a)}function qp(e,t,n){for(let r=t.directiveStart;r<t.directiveEnd;r++){let i=e.data[r];if(n===null||!n.has(i))Jp(0,t,i,r),Jp(1,t,i,r),Zp(t,r,!1);else{let e=n.get(i);Yp(0,t,e,r),Yp(1,t,e,r),Zp(t,r,!0)}}}function Jp(e,t,n,r){let i=e===0?n.inputs:n.outputs;for(let n in i)if(Object.hasOwn(i,n)){let i;i=e===0?t.inputs??={}:t.outputs??={},i[n]??=[],i[n].push(r),Xp(t,n)}}function Yp(e,t,n,r){let i=e===0?n.inputs:n.outputs;for(let n in i)if(Object.hasOwn(i,n)){let a=i[n],o;o=e===0?t.hostDirectiveInputs??={}:t.hostDirectiveOutputs??={},o[a]??=[],o[a].push(r,n),Xp(t,a)}}function Xp(e,t){t===`class`?e.flags|=8:t===`style`&&(e.flags|=16)}function Zp(e,t,n){let{attrs:r,inputs:i,hostDirectiveInputs:a}=e;if(r===null||!n&&i===null||n&&a===null||ju(e)){e.initialInputs??=[],e.initialInputs.push(null);return}let o=null,s=0;for(;s<r.length;){let e=r[s];if(e===0){s+=4;continue}if(e===5){s+=2;continue}if(typeof e==`number`)break;if(!n&&Object.hasOwn(i,e)){let n=i[e];for(let i of n)if(i===t){o??=[],o.push(e,r[s+1]);break}}else if(n&&Object.hasOwn(a,e)){let n=a[e];for(let e=0;e<n.length;e+=2)if(n[e]===t){o??=[],o.push(n[e+1],r[s+1]);break}}s+=2}e.initialInputs??=[],e.initialInputs.push(o)}function Qp(e,t,n,r,i){e.data[r]=i;let a=new Uc(i.factory||=sa(i.type,!0),so(i),Hp,null);e.blueprint[r]=a,n[r]=a,$p(e,t,r,Id(e,n,i.hostVars,Fu),i)}function $p(e,t,n,r,i){let a=i.hostBindings;if(a){let i=e.hostBindingOpCodes;i===null&&(i=e.hostBindingOpCodes=[]);let o=~t.index;em(i)!=o&&i.push(o),i.push(n,r,a)}}function em(e){let t=e.length;for(;t>0;){let n=e[--t];if(typeof n==`number`&&n<0)return n}return 0}function tm(e,t,n){if(n){if(t.exportAs)for(let r=0;r<t.exportAs.length;r++)n[t.exportAs[r]]=e;so(t)&&(n[``]=e)}}function nm(e,t,n){e.flags|=1,e.directiveStart=t,e.directiveEnd=t+n,e.providerIndexes=t}function rm(e,t,n,r,i,a,o,s){let c=t[1],l=c.consts,u=Yf(c,e,n,r,So(l,o));return a&&Up(c,t,u,So(l,s),i),u.mergedAttrs=Yc(u.mergedAttrs,u.attrs),u.attrs!==null&&Vp(u,u.attrs,!1),u.mergedAttrs!==null&&Vp(u,u.mergedAttrs,!0),c.queries!==null&&c.queries.elementStart(c,u),u}function im(e,t){Fc(e,t),io(t)&&e.queries.elementEnd(t)}function am(e,t,n,r,i,a){let o=t.consts,s=Yf(t,e,n,r,So(o,i));if(s.mergedAttrs=Yc(s.mergedAttrs,s.attrs),a!=null){let e=So(o,a);s.localNames=[];for(let t=0;t<e.length;t+=2)s.localNames.push(e[t],-1)}return s.attrs!==null&&Vp(s,s.attrs,!1),s.mergedAttrs!==null&&Vp(s,s.mergedAttrs,!0),t.queries!==null&&t.queries.elementStart(t,s),s}var om=typeof ShadowRoot<`u`,sm=typeof Document<`u`;function cm(e){return Object.keys(e).map(t=>{let[n,r,i]=e[t],a={propName:n,templateName:t,isSignal:(r&zd.SignalBased)!==0};return i&&(a.transform=i),a})}function lm(e){return Object.keys(e).map(t=>({propName:e[t],templateName:t}))}function um(e,t,n){let r=t instanceof Va?t:t?.injector;return r&&e.getStandaloneInjector!==null&&(r=e.getStandaloneInjector(r)||r),r?new fp(n,r):n}function dm(e){let t=e.get(op,null);if(t===null)throw new fi(407,!1);return{rendererFactory:t,sanitizer:e.get(lp,null),changeDetectionScheduler:e.get(rc,null),ngReflect:!1,tracingService:e.get(td,null,{optional:!0})}}function fm(e,t,n){let r=mm(e);return xu(t,r,r===`svg`?`svg`:r===`math`?fo:n)}function pm(e){if((e&&`localName`in e&&typeof e.localName==`string`?e.localName:e?.tagName)?.toLowerCase()===`script`)throw new fi(905,!1)}function mm(e){return(e.selectors[0][0]||`div`).toLowerCase()}var hm=class{componentDef;ngModule;selector;componentType;ngContentSelectors;isBoundToModule;cachedInputs=null;cachedOutputs=null;get inputs(){return this.cachedInputs??=cm(this.componentDef.inputs),this.cachedInputs}get outputs(){return this.cachedOutputs??=lm(this.componentDef.outputs),this.cachedOutputs}constructor(e,t){this.componentDef=e,this.ngModule=t,this.componentType=e.type,this.selector=gte(e.selectors),this.ngContentSelectors=e.ngContentSelectors??[],this.isBoundToModule=!!t}create(e,t,n,r,i,a,o){Nc(bc.DynamicComponentStart);let s=rn(null);try{let s=this.componentDef,c=um(s,r||this.ngModule,e),l=dm(c),u=l.tracingService;return u&&u.componentCreate?u.componentCreate(up(s),()=>this.createComponentRef(l,c,t,n,i,a,o)):this.createComponentRef(l,c,t,n,i,a,o)}finally{rn(s)}}createComponentRef(e,t,n,r,i,a,o){let s=this.componentDef,c=gm(r,s,a,i),l=e.rendererFactory.createRenderer(null,s),u=r?Wd(l,r,s.encapsulation,t):fm(s,l,o??null);pm(u);let d=t.get(Bp,null),f=_m(u,()=>t.get(xs,null)??Xl());d&&d.addHost(f);let p=a?.some(ym)||i?.some(e=>typeof e!=`function`&&e.bindings.some(ym)),m=Nd(null,c,null,512|Fd(s),null,null,e,l,t,null,ru(u,t,!0));d&&om&&f instanceof ShadowRoot&&ko(m,()=>{d.removeHost(f)}),m[27]=u,rs(m);let ee=null;try{let e=rm(27,m,2,`#host`,()=>c.directiveRegistry,!0,0);Eu(l,u,e),Wl(u,m),Hd(c,m,e),ou(c,e,m),im(c,e),n!==void 0&&xm(e,this.ngContentSelectors,n),ee=yo(e.index,m),m[8]=ee[8],uf(c,m,null)}catch(e){throw ee!==null&&Hl(ee),Hl(m),e}finally{Nc(bc.DynamicComponentEnd),cs()}return new bm(this.componentType,m,!!p)}};function gm(e,t,n,r){let i=e?[`ng-version`,`22.1.7`]:_te(t.selectors[0]),a=null,o=null,s=0;if(n)for(let e of n)s+=e[zp].requiredVars,e.create&&(e.targetIdx=0,(a??=[]).push(e)),e.update&&(e.targetIdx=0,(o??=[]).push(e));if(r)for(let e=0;e<r.length;e++){let t=r[e];if(typeof t!=`function`)for(let n of t.bindings){s+=n[zp].requiredVars;let t=e+1;n.create&&(n.targetIdx=t,(a??=[]).push(n)),n.update&&(n.targetIdx=t,(o??=[]).push(n))}}let c=[t];if(r)for(let e of r){let t=Ii(typeof e==`function`?e:e.type);c.push(t)}return Ad(0,null,vm(a,o),1,s,c,null,null,null,[i],null)}function _m(e,t){let n=e.getRootNode?.();return sm&&n instanceof Document?n.head:n&&om&&n instanceof ShadowRoot?n:t().head}function vm(e,t){return!e&&!t?null:n=>{if(n&1&&e)for(let t of e)t.create();if(n&2&&t)for(let e of t)e.update()}}function ym(e){let t=e[zp].kind;return t===`input`||t===`twoWay`}var bm=class extends ap{_rootLView;_hasInputBindings;instance;hostView;changeDetectorRef;componentType;location;previousInputValues=null;_tNode;constructor(e,t,n){super(),this._rootLView=t,this._hasInputBindings=n,this._tNode=go(t[1],27),this.location=jl(this._tNode,t),this.instance=yo(this._tNode.index,t)[8],this.hostView=this.changeDetectorRef=new Gf(t,void 0),this.componentType=e}setInput(e,t){this._hasInputBindings;let n=this._tNode;if(this.previousInputValues??=new Map,this.previousInputValues.has(e)&&Object.is(this.previousInputValues.get(e),t))return;let r=this._rootLView;of(n,r[1],r,e,t),this.previousInputValues.set(e,t),Lf(yo(n.index,r),1)}get injector(){return new Cl(this._tNode,this._rootLView)}destroy(){this.hostView.destroy()}onDestroy(e){this.hostView.onDestroy(e)}};function xm(e,t,n){let r=e.projection=[];for(let e=0;e<t.length;e++){let t=n[e];r.push(t!=null&&t.length?Array.from(t):null)}}var Sm=(()=>{class e{static __NG_ELEMENT_ID__=Cm}return e})();function Cm(){return Dm(Ho(),Bo())}var wm=class e extends Sm{_lContainer;_hostTNode;_hostLView;constructor(e,t,n){super(),this._lContainer=e,this._hostTNode=t,this._hostLView=n}get element(){return jl(this._hostTNode,this._hostLView)}get injector(){return new Cl(this._hostTNode,this._hostLView)}get parentInjector(){let e=dl(this._hostTNode,this._hostLView);if(Zc(e)){let t=el(e,this._hostLView),n=Qc(e),r=t[1].data[n+8];return new Cl(r,t)}return new Cl(null,this._hostLView)}clear(){for(;this.length>0;)this.remove(this.length-1)}get(e){let t=Tm(this._lContainer);return t!==null&&t[e]||null}get length(){return this._lContainer.length-10}createEmbeddedView(e,t,n){let r,i;typeof n==`number`?r=n:n!=null&&(r=n.index,i=n.injector);let a=rp(this._lContainer,e.ssrId),o=e.createEmbeddedViewImpl(t||{},i,a);return this.insertImpl(o,r,pf(this._hostTNode,a)),o}createComponent(e,t,n,r,i,a,o){let s,c=t||{};s=c.index,n=c.injector,r=c.projectableNodes,i=c.environmentInjector||c.ngModuleRef,a=c.directives,o=c.bindings;let l=new hm(Fi(e)),u=n||this.parentInjector;if(!i&&l.ngModule==null){let e=this.parentInjector.get(Va,null);e&&(i=e)}let d=Fi(l.componentType??{}),f=rp(this._lContainer,d?.id??null),p=f?.firstChild??null,m=l.create(u,r,p,i,a,o,this._getHostElementNamespace());return this.insertImpl(m.hostView,s,pf(this._hostTNode,f)),m}_getHostElementNamespace(){if(this._hostTNode.type&2){let e=this._hostTNode.parent??this._hostLView[5];return e!==null&&e.type&2&&typeof e.value==`string`&&e.value.toLowerCase()===`foreignobject`?null:e?.namespace??null}return this._hostTNode.namespace}insert(e,t){return this.insertImpl(e,t,!0)}insertImpl(t,n,r){let i=t._lView;if(xo(i)){let n=this.indexOf(t);if(n!==-1)this.detach(n);else{let n=i[3],r=new e(n,n[5],n[3]);r.detach(r.indexOf(t))}}let a=this._adjustIndex(n),o=this._lContainer;return Bf(o,i,a,r),t.attachToViewContainerRef(),da(Em(o),a,t),t}move(e,t){return this.insert(e,t)}indexOf(e){let t=Tm(this._lContainer);return t===null?-1:t.indexOf(e)}remove(e){let t=this._adjustIndex(e,-1),n=Hf(this._lContainer,t);n&&(fa(Em(this._lContainer),t),vd(n[1],n))}detach(e){let t=this._adjustIndex(e,-1),n=Hf(this._lContainer,t);return n&&fa(Em(this._lContainer),t)!=null?new Gf(n):null}_adjustIndex(e,t=0){return e??this.length+t}};function Tm(e){return e[8]}function Em(e){return e[8]||=[]}function Dm(e,t){let n,r=t[e.index];return ro(r)?n=r:(n=Rf(r,t,null,e),t[e.index]=n,Ld(t,n)),km(n,t,e,r),new wm(n,e,t)}function Om(e,t){let n=e[11],r=n.createComment(``),i=ho(t,e);return Su(n,n.parentNode(i),r,n.nextSibling(i),!1),r}var km=Mm,Am=()=>!1;function jm(e,t,n){return Am(e,t,n)}function Mm(e,t,n,r){if(e[7])return;let i;i=n.type&8?po(r):Om(t,n),e[7]=i}var Nm=class e{queryList;matches=null;constructor(e){this.queryList=e}clone(){return new e(this.queryList)}setDirty(){this.queryList.setDirty()}},Pm=class e{queries;constructor(e=[]){this.queries=e}createEmbeddedView(t){let n=t.queries;if(n!==null){let r=t.contentQueries===null?n.length:t.contentQueries[0],i=[];for(let e=0;e<r;e++){let t=n.getByIndex(e),r=this.queries[t.indexInDeclarationView];i.push(r.clone())}return new e(i)}return null}insertView(e){this.dirtyQueriesWithMatches(e)}detachView(e){this.dirtyQueriesWithMatches(e)}finishViewCreation(e){this.dirtyQueriesWithMatches(e)}dirtyQueriesWithMatches(e){for(let t=0;t<this.queries.length;t++)Ym(e,t).matches!==null&&this.queries[t].setDirty()}},Fm=class{flags;read;predicate;constructor(e,t,n=null){this.flags=t,this.read=n,this.predicate=typeof e==`string`?qm(e):e}},Im=class e{queries;constructor(e=[]){this.queries=e}elementStart(e,t){for(let n=0;n<this.queries.length;n++)this.queries[n].elementStart(e,t)}elementEnd(e){for(let t=0;t<this.queries.length;t++)this.queries[t].elementEnd(e)}embeddedTView(t){let n=null;for(let e=0;e<this.length;e++){let r=n===null?0:n.length,i=this.getByIndex(e).embeddedTView(t,r);i&&(i.indexInDeclarationView=e,n===null?n=[i]:n.push(i))}return n===null?null:new e(n)}template(e,t){for(let n=0;n<this.queries.length;n++)this.queries[n].template(e,t)}getByIndex(e){return this.queries[e]}get length(){return this.queries.length}track(e){this.queries.push(e)}},Lm=class e{metadata;matches=null;indexInDeclarationView=-1;crossesNgTemplate=!1;_declarationNodeIndex;_appliesToNextNode=!0;constructor(e,t=-1){this.metadata=e,this._declarationNodeIndex=t}elementStart(e,t){this.isApplyingToNode(t)&&this.matchTNode(e,t)}elementEnd(e){this._declarationNodeIndex===e.index&&(this._appliesToNextNode=!1)}template(e,t){this.elementStart(e,t)}embeddedTView(t,n){return this.isApplyingToNode(t)?(this.crossesNgTemplate=!0,this.addMatch(-t.index,n),new e(this.metadata)):null}isApplyingToNode(e){if(this._appliesToNextNode&&(this.metadata.flags&1)!=1){let t=this._declarationNodeIndex,n=e.parent;for(;n!==null&&n.type&8&&n.index!==t;)n=n.parent;return t===(n===null?-1:n.index)}return this._appliesToNextNode}matchTNode(e,t){let n=this.metadata.predicate;if(Array.isArray(n))for(let r=0;r<n.length;r++){let i=n[r];this.matchTNodeWithReadOption(e,t,Rm(t,i)),this.matchTNodeWithReadOption(e,t,vl(t,e,i,!1,!1))}else n===Kf?t.type&4&&this.matchTNodeWithReadOption(e,t,-1):this.matchTNodeWithReadOption(e,t,vl(t,e,n,!1,!1))}matchTNodeWithReadOption(e,t,n){if(n!==null){let r=this.metadata.read;if(r!==null){if(r===Ml||r===Sm||r===Kf&&t.type&4)this.addMatch(t.index,-2);else{let n=vl(t,e,r,!1,!1);n!==null&&this.addMatch(t.index,n)}}else this.addMatch(t.index,n)}}addMatch(e,t){this.matches===null?this.matches=[e,t]:this.matches.push(e,t)}};function Rm(e,t){let n=e.localNames;if(n!==null){for(let e=0;e<n.length;e+=2)if(n[e]===t)return n[e+1]}return null}function zm(e,t){return e.type&11?jl(e,t):e.type&4?Jf(e,t):null}function Bm(e,t,n,r){return n===-1?zm(t,e):n===-2?Vm(e,t,r):yl(e,e[1],n,t)}function Vm(e,t,n){if(n===Ml)return jl(t,e);if(n===Kf)return Jf(t,e);if(n===Sm)return Dm(t,e)}function Hm(e,t,n,r){let i=t[18].queries[r];if(i.matches===null){let r=e.data,a=n.matches,o=[];for(let e=0;a!==null&&e<a.length;e+=2){let i=a[e];if(i<0)o.push(null);else{let s=r[i];o.push(Bm(t,s,a[e+1],n.metadata.read))}}i.matches=o}return i.matches}function Um(e,t,n,r){let i=e.queries.getByIndex(n),a=i.matches;if(a!==null){let o=Hm(e,t,i,n);for(let e=0;e<a.length;e+=2){let n=a[e];if(n>0)r.push(o[e/2]);else{let i=a[e+1],o=t[-n];for(let e=10;e<o.length;e++){let t=o[e];t[16]===t[3]&&Um(t[1],t,i,r)}if(o[9]!==null){let e=o[9];for(let t=0;t<e.length;t++){let n=e[t];Um(n[1],n,i,r)}}}}}return r}function Wm(e,t){return e[18].queries[t].queryList}function Gm(e,t,n){let r=new Fl((n&4)==4);return Gee(e,t,r,r.destroy),(t[18]??=new Pm).queries.push(new Nm(r))-1}function Km(e,t,n){let r=Vo();return r.firstCreatePass&&(Jm(r,new Fm(e,t,n),-1),(t&2)==2&&(r.staticViewQueries=!0)),Gm(r,Bo(),t)}function qm(e){return e.split(`,`).map(e=>e.trim())}function Jm(e,t,n){e.queries===null&&(e.queries=new Im),e.queries.track(new Lm(t,n))}function Ym(e,t){return e.queries.getByIndex(t)}function Xm(e,t){let n=e[1],r=Ym(n,t);return r.crossesNgTemplate?Um(n,e,t,[]):Hm(n,e,r,t)}function Zm(e,t,n){let r,i=Tn(()=>{r._dirtyCounter();let n=th(r,e);if(t&&n===void 0)throw new fi(-951,!1);return n});return r=i[nn],r._dirtyCounter=T(0),r._flatValue=void 0,i}function Qm(e){return Zm(!0,!1,e)}function $m(e){return Zm(!0,!0,e)}function eh(e,t){let n=e[nn];n._lView=Bo(),n._queryIndex=t,n._queryList=Wm(n._lView,t),n._queryList.onDirty(()=>n._dirtyCounter.update(e=>e+1))}function th(e,t){let n=e._lView,r=e._queryIndex;if(n===void 0||r===void 0||n[2]&4)return t?void 0:ba;let i=Wm(n,r),a=Xm(n,r);return i.reset(a,Nl),t?i.first:i._changesDetected||e._flatValue===void 0?e._flatValue=i.toArray():e._flatValue}function nh(e){return!!e&&typeof e.then==`function`}function rh(e){return!!e&&typeof e.subscribe==`function`}var ih=class{},ah=class extends ih{injector;instance=null;constructor(e){super();let t=new Ha([...e.providers,{provide:ih,useValue:this}],e.parent||Ba(),e.debugName,new Set([`environment`]));this.injector=t,e.runEnvironmentInitializers&&t.resolveInjectorInitializers()}destroy(){this.injector.destroy()}onDestroy(e){this.injector.onDestroy(e)}};function oh(e,t,n=null){return new ah({providers:e,parent:t,debugName:n,runEnvironmentInitializers:!0}).injector}var sh=(()=>{class e{_injector;cachedInjectors=new Map;constructor(e){this._injector=e}getOrCreateStandaloneInjector(e){if(!e.standalone)return null;if(!this.cachedInjectors.has(e)){let t=Ea(!1,e.type),n=t.length>0?oh([t],this._injector,``):null;this.cachedInjectors.set(e,n)}return this.cachedInjectors.get(e)}ngOnDestroy(){try{for(let e of this.cachedInjectors.values())e!==null&&e.destroy()}finally{this.cachedInjectors.clear()}}static ɵprov=bi({token:e,providedIn:`environment`,factory:()=>new e(na(Va))})}return e})();function O(e){return yc(()=>{let t=ph(e),n={...t,decls:e.decls,vars:e.vars,template:e.template,consts:e.consts||null,ngContentSelectors:e.ngContentSelectors,onPush:e.changeDetection!==Ll.Eager,directiveDefs:null,pipeDefs:null,dependencies:t.standalone&&e.dependencies||null,getStandaloneInjector:t.standalone?e=>e.get(sh).getOrCreateStandaloneInjector(n):null,getExternalStyles:null,signals:e.signals??!1,data:e.data||{},encapsulation:e.encapsulation||su.Emulated,styles:e.styles||ba,_:null,schemas:e.schemas||null,tView:null,id:``};t.standalone&&rd(`NgStandalone`),mh(n);let r=e.dependencies;return n.directiveDefs=hh(r,ch),n.pipeDefs=hh(r,Li),n.id=gh(n),n})}function ch(e){return Fi(e)||Ii(e)}function lh(e,t){if(e==null)return ya;let n={};for(let r in e)if(Object.hasOwn(e,r)){let i=e[r],a,o,s,c;Array.isArray(i)?(s=i[0],a=i[1],o=i[2]??a,c=i[3]||null):(a=i,o=i,s=zd.None,c=null),n[a]=[r,s,c],t[a]=o}return n}function uh(e){if(e==null)return ya;let t={};for(let n in e)Object.hasOwn(e,n)&&(t[e[n]]=n);return t}function dh(e){return yc(()=>{let t=ph(e);return mh(t),t})}function fh(e){return{type:e.type,name:e.name,factory:null,pure:e.pure!==!1,standalone:e.standalone??!0,onDestroy:e.type.prototype.ngOnDestroy||null}}function ph(e){let t={};return{type:e.type,providersResolver:null,viewProvidersResolver:null,factory:null,hostBindings:e.hostBindings||null,hostVars:e.hostVars||0,hostAttrs:e.hostAttrs||null,contentQueries:e.contentQueries||null,declaredInputs:t,inputConfig:e.inputs||ya,exportAs:e.exportAs||null,standalone:e.standalone??!0,signals:e.signals===!0,selectors:e.selectors||ba,viewQuery:e.viewQuery||null,features:e.features||null,setInput:null,resolveHostDirectives:null,hostDirectives:null,controlDef:null,signalFormsInputPresence:null,inputs:lh(e.inputs,t),outputs:uh(e.outputs),debugInfo:null}}function mh(e){e.features?.forEach(t=>t(e))}function hh(e,t){return e?()=>{let n=typeof e==`function`?e():e,r=[];for(let e of n){let n=t(e);n!==null&&r.push(n)}return r}:null}function gh(e){let t=0,n=typeof e.consts==`function`?``:e.consts,r=[e.selectors,e.ngContentSelectors,e.hostVars,e.hostAttrs,n,e.vars,e.decls,e.encapsulation,e.standalone,e.signals,e.exportAs,JSON.stringify(e.inputs),JSON.stringify(e.outputs),Object.getOwnPropertyNames(e.type.prototype),!!e.contentQueries,!!e.viewQuery];for(let e of r.join(`|`))t=Math.imul(31,t)+e.charCodeAt(0)<<0;return t+=2147483648,`c`+t}var _h=new Di(``),vh=(()=>{class e{resolve;reject;initialized=!1;done=!1;donePromise=new Promise((e,t)=>{this.resolve=e,this.reject=t});appInits=x(_h,{optional:!0})??[];injector=x(bs);constructor(){}runInitializers(){if(this.initialized)return;let e=[];for(let t of this.appInits){let n=$a(this.injector,t);if(nh(n))e.push(n);else if(rh(n)){let t=new Promise((e,t)=>{n.subscribe({complete:e,error:t})});e.push(t)}}let t=()=>{this.done=!0,this.resolve()};Promise.all(e).then(()=>{t()}).catch(e=>{this.reject(e)}),e.length===0&&t(),this.initialized=!0}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})}return e})();function yh(e){return t=>{t.controlDef={create:(e,t)=>{e?.ɵngControlCreate(t)},update:(e,t)=>{e?.ɵngControlUpdate?.(t)},passThroughInput:e}}}function bh(e){return Object.getPrototypeOf(e.prototype).constructor}function xh(e){let t=bh(e.type),n=!0,r=[e];for(;t&&t!==Function.prototype&&t!==Object.prototype;){let i,a=Object.hasOwn(t,ki)?t[ki]:void 0,o=Object.hasOwn(t,Ai)?t[Ai]:void 0;if(so(e))i=a??o;else{if(a)throw new fi(903,!1);i=o}if(i){if(n){r.push(i);let t=e;t.inputs=wh(e.inputs),t.declaredInputs=wh(e.declaredInputs),t.outputs=wh(e.outputs);let n=i.hostBindings;n&&Dh(e,n);let a=i.viewQuery,o=i.contentQueries;if(a&&Th(e,a),o&&Eh(e,o),Sh(e,i),Hee(e.outputs,i.outputs),so(i)&&i.data.animation){let t=e.data;t.animation=(t.animation||[]).concat(i.data.animation)}}let t=i.features;if(t)for(let r=0;r<t.length;r++){let i=t[r];i&&i.ngInherit&&i(e),i===xh&&(n=!1)}}t=Object.getPrototypeOf(t)}Ch(r)}function Sh(e,t){for(let n in t.inputs){if(!Object.hasOwn(t.inputs,n)||Object.hasOwn(e.inputs,n))continue;let r=t.inputs[n];r!==void 0&&(e.inputs[n]=r,e.declaredInputs[n]=t.declaredInputs[n])}}function Ch(e){let t=0,n=null;for(let r=e.length-1;r>=0;r--){let i=e[r];i.hostVars=t+=i.hostVars,i.hostAttrs=Yc(i.hostAttrs,n=Yc(n,i.hostAttrs))}}function wh(e){return e===ya?{}:e===ba?[]:e}function Th(e,t){let n=e.viewQuery;e.viewQuery=n?(e,r)=>{t(e,r),n(e,r)}:t}function Eh(e,t){let n=e.contentQueries;e.contentQueries=n?(e,r,i)=>{t(e,r,i),n(e,r,i)}:t}function Dh(e,t){let n=e.hostBindings;e.hostBindings=n?(e,r)=>{t(e,r),n(e,r)}:t}function Oh(e,t,n,r,i,a,o,s){if(n.firstCreatePass){e.mergedAttrs=Yc(e.mergedAttrs,e.attrs);let t=e.tView=Ad(2,e,i,a,o,n.directiveRegistry,n.pipeRegistry,null,n.schemas,n.consts,null);n.queries!==null&&(n.queries.template(n,e),t.queries=n.queries.embeddedTView(e))}s&&(e.flags|=s),Wo(e,!1);let c=Mh(n,t,e,r);gs()&&Sd(n,t,c,e),Wl(c,t);let l=Rf(c,t,c,e);t[r+27]=l,Ld(t,l),jm(l,e,t)}function kh(e,t,n,r,i,a,o,s,c,l,u){let d=n+27,f;return t.firstCreatePass?(f=Yf(t,d,4,o||null,s||null),Io()&&Up(t,e,f,So(t.consts,l),Qd),Fc(t,f)):f=t.data[d],Oh(f,e,t,n,r,i,a,c),oo(f)&&Hd(t,e,f),l!=null&&Ud(e,f,u),f}function Ah(e,t,n,r,i,a,o,s,c,l,u){let d=n+27,f;if(t.firstCreatePass){if(f=Yf(t,d,4,o||null,s||null),l!=null){let e=So(t.consts,l);f.localNames=[];for(let t=0;t<e.length;t+=2)f.localNames.push(e[t],-1)}}else f=t.data[d];return Oh(f,e,t,n,r,i,a,c),l!=null&&Ud(e,f,u),f}function jh(e,t,n,r,i,a,o,s){let c=Bo(),l=Vo();return kh(c,l,e,t,n,r,i,So(l.consts,a),void 0,o,s),jh}var Mh=Nh;function Nh(e,t,n,r){return _s(!0),t[11].createComment(``)}var Ph=new Di(``),Fh=new Di(``);function Ih(){pee(()=>{throw new fi(600,``)})}var Lh=10,Rh=(()=>{class e{_runningTick=!1;_destroyed=!1;_destroyListeners=[];_views=[];internalErrorHandler=x(qs);afterRenderManager=x(id);zonelessEnabled=x(ic);rootEffectScheduler=x(oc);dirtyFlags=0;tracingSnapshot=null;allTestViews=new Set;autoDetectTestViews=new Set;includeAllTestViews=!1;afterTick=new Ur;get allViews(){return[...(this.includeAllTestViews?this.allTestViews:this.autoDetectTestViews).keys(),...this._views]}get destroyed(){return this._destroyed}componentTypes=[];components=[];internalPendingTask=x(Es);get isStable(){return this.internalPendingTask.hasPendingTasksObservable.pipe(ui(e=>!e))}constructor(){x(td,{optional:!0})}whenStable(){let e;return new Promise(t=>{e=this.isStable.subscribe({next:e=>{e&&t()}})}).finally(()=>{e.unsubscribe()})}_injector=x(Va);_rendererFactory=null;get injector(){return this._injector}bootstrap(e,t){return this.bootstrapImpl(e,t)}bootstrapImpl(e,t,n=bs.NULL){return this._injector.get(Ps).run(()=>{if(Nc(bc.BootstrapComponentStart),!this._injector.get(vh).done)throw new fi(405,``);let r=Fi(e),i=this._injector.get(ih),a=new hm(r,i);this.componentTypes.push(e);let{hostElement:o,directives:s,bindings:c}=zh(t),l=o||a.selector,u=a.create(n,[],l,i.injector,s,c),d=u.location.nativeElement,f=u.injector.get(Ph,null);return f?.registerApplication(d),u.onDestroy(()=>{this.detachView(u.hostView),Bh(this.components,u),f?.unregisterApplication(d)}),this._loadComponent(u),Nc(bc.BootstrapComponentEnd,u),u})}tick(){this.zonelessEnabled||(this.dirtyFlags|=1),this._tick()}_tick(){Nc(bc.ChangeDetectionStart),this.tracingSnapshot===null?this.tickImpl():this.tracingSnapshot.run(ed.CHANGE_DETECTION,this.tickImpl)}tickImpl=()=>{if(this._runningTick)throw Nc(bc.ChangeDetectionEnd),new fi(101,!1);let e=rn(null);try{this._runningTick=!0,this.synchronize()}finally{this._runningTick=!1,this.tracingSnapshot?.dispose(),this.tracingSnapshot=null,rn(e),this.afterTick.next(),Nc(bc.ChangeDetectionEnd)}};synchronize(){this._rendererFactory===null&&!this._injector.destroyed&&(this._rendererFactory=this._injector.get(op,null,{optional:!0}));let e=0;for(;this.dirtyFlags!==0&&e++<Lh;){Nc(bc.ChangeDetectionSyncStart);try{this.synchronizeOnce()}finally{Nc(bc.ChangeDetectionSyncEnd)}}}synchronizeOnce(){this.dirtyFlags&16&&(this.dirtyFlags&=-17,this.rootEffectScheduler.flush());let e=!1;if(this.dirtyFlags&7){let t=!!(this.dirtyFlags&1);this.dirtyFlags&=-8,this.dirtyFlags|=8;for(let{_lView:n}of this.allViews)(t||Eo(n))&&(Df(n,t&&!this.zonelessEnabled?0:1),e=!0);if(this.dirtyFlags&=-5,this.syncDirtyFlagsWithViews(),this.dirtyFlags&23)return}e||(this._rendererFactory?.begin?.(),this._rendererFactory?.end?.()),this.dirtyFlags&8&&(this.dirtyFlags&=-9,this.afterRenderManager.execute()),this.syncDirtyFlagsWithViews()}syncDirtyFlagsWithViews(){if(this.allViews.some(({_lView:e})=>Eo(e))){this.dirtyFlags|=2;return}this.dirtyFlags&=-8}attachView(e){let t=e;this._views.push(t),t.attachToAppRef(this)}detachView(e){let t=e;Bh(this._views,t),t.detachFromAppRef()}_loadComponent(e){this.attachView(e.hostView);try{this.tick()}catch(e){this.internalErrorHandler(e)}this.components.push(e),this._injector.get(Fh,[]).forEach(t=>t(e))}ngOnDestroy(){if(!this._destroyed)try{this._destroyListeners.forEach(e=>e()),this._views.slice().forEach(e=>e.destroy())}finally{this._destroyed=!0,this._views=[],this._destroyListeners=[]}}onDestroy(e){return this._destroyListeners.push(e),()=>Bh(this._destroyListeners,e)}destroy(){if(this._destroyed)throw new fi(406,!1);let e=this._injector;e.destroy&&!e.destroyed&&e.destroy()}get viewCount(){return this._views.length}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})}return e})();function zh(e){return e===void 0||typeof e==`string`||e instanceof Element?{hostElement:e}:e}function Bh(e,t){let n=e.indexOf(t);n>-1&&e.splice(n,1)}function k(e,t,n,r){let i=Bo();return hp(i,Qo(),t)&&(Vo(),$d(ds(),i,e,t,n,r)),k}function Vh(e){if(rd(`NgAnimateEnter`),!Wu)return Vh;let t=Bo();if(Dte(t))return Vh;let n=Ho(),r=t[9].get(Ps);return Mte(Zu(t),n,()=>Hh(t,n,e,r)),Rte(t[9]),dd(t[9],Zu(t)),Vh}function Hh(e,t,n,r){let i=ho(t,e),a=e[11],o=jte(n),s=[],c=!1,l=e=>{if(Qu(e)!==i)return;let t=e instanceof AnimationEvent?`animationend`:`transitionend`;r.runOutsideAngular(()=>{a.listen(i,t,u)})},u=e=>{Qu(e)===i&&($u(e,i)&&(c=!0),Uh(e,i,a))};if(o&&o.length>0){r.runOutsideAngular(()=>{s.push(a.listen(i,`animationstart`,l)),s.push(a.listen(i,`transitionstart`,l))}),Ote(i,o,s);for(let e of o)a.addClass(i,e);r.runOutsideAngular(()=>{requestAnimationFrame(()=>{if(!c&&(Cte(i,qu,Wu),!qu.has(i))){for(let e of o)a.removeClass(i,e);Gu(i)}})})}}function Uh(e,t,n){let r=Ku.get(t);if(Qu(e)===t&&r&&$u(e,t)){e.stopPropagation();for(let e of r.classList)n.removeClass(t,e);Gu(t)}}var Wh=class{destroy(e){}updateValue(e,t){}swap(e,t){let n=Math.min(e,t),r=Math.max(e,t),i=this.detach(r);if(r-n>1){let e=this.detach(n);this.attach(n,i),this.attach(r,e)}else this.attach(n,i)}move(e,t){this.attach(t,this.detach(e))}};function Gh(e,t,n,r,i){return e===n&&Object.is(t,r)?1:Object.is(i(e,t),i(n,r))?-1:0}function Kh(e,t,n,r){let i,a,o=0,s=e.length-1;if(Array.isArray(t)){rn(r);let c=t.length-1;for(rn(null);o<=s&&o<=c;){let r=e.at(o),l=t[o],u=Gh(o,r,o,l,n);if(u!==0){u<0&&e.updateValue(o,l),o++;continue}let d=e.at(s),f=t[c],p=Gh(s,d,c,f,n);if(p!==0){p<0&&e.updateValue(s,f),s--,c--;continue}let m=n(o,r),ee=n(s,d),h=n(o,l);if(Object.is(h,ee)){let t=n(c,f);Object.is(t,m)?(e.swap(o,s),e.updateValue(s,f),c--,s--):e.move(s,o),e.updateValue(o,l),o++;continue}if(i??=new Xh,a??=Yh(e,o,s,n),qh(e,i,o,h))e.updateValue(o,l),o++,s++;else if(a.has(h))i.set(m,e.detach(o)),s--;else{let n=e.create(o,t[o]);e.attach(o,n),o++,s++}}for(;o<=c;)Jh(e,i,n,o,t[o]),o++}else if(t!=null){rn(r);let c=t[Symbol.iterator]();rn(null);let l=c.next();for(;!l.done&&o<=s;){let t=e.at(o),r=l.value,u=Gh(o,t,o,r,n);if(u!==0)u<0&&e.updateValue(o,r),o++,l=c.next();else{i??=new Xh,a??=Yh(e,o,s,n);let u=n(o,r);if(qh(e,i,o,u))e.updateValue(o,r),o++,s++,l=c.next();else if(!a.has(u))e.attach(o,e.create(o,r)),o++,s++,l=c.next();else{let r=n(o,t);i.set(r,e.detach(o)),s--}}}for(;!l.done;)Jh(e,i,n,e.length,l.value),l=c.next()}for(;o<=s;)e.destroy(e.detach(s--));i?.forEach(t=>{e.destroy(t)})}function qh(e,t,n,r){return t!==void 0&&t.has(r)?(e.attach(n,t.get(r)),t.delete(r),!0):!1}function Jh(e,t,n,r,i){if(qh(e,t,r,n(r,i)))e.updateValue(r,i);else{let t=e.create(r,i);e.attach(r,t)}}function Yh(e,t,n,r){let i=new Set;for(let a=t;a<=n;a++)i.add(r(a,e.at(a)));return i}var Xh=class{kvMap=new Map;_vMap=void 0;has(e){return this.kvMap.has(e)}delete(e){if(!this.has(e))return!1;let t=this.kvMap.get(e);return this._vMap!==void 0&&this._vMap.has(t)?(this.kvMap.set(e,this._vMap.get(t)),this._vMap.delete(t)):this.kvMap.delete(e),!0}get(e){return this.kvMap.get(e)}set(e,t){if(this.kvMap.has(e)){let n=this.kvMap.get(e);this._vMap===void 0&&(this._vMap=new Map);let r=this._vMap;for(;r.has(n);)n=r.get(n);r.set(n,t)}else this.kvMap.set(e,t)}forEach(e){for(let[t,n]of this.kvMap)if(e(n,t),this._vMap!==void 0){let r=this._vMap;for(;r.has(n);)n=r.get(n),e(n,t)}}};function A(e,t,n,r,i,a,o,s){rd(`NgControlFlow`);let c=Bo(),l=Vo();return Ah(c,l,e,t,n,r,i,So(l.consts,a),256,o,s),Zh}function Zh(e,t,n,r,i,a,o,s){rd(`NgControlFlow`);let c=Bo(),l=Vo();return Ah(c,l,e,t,n,r,i,So(l.consts,a),512,o,s),Zh}function j(e,t){rd(`NgControlFlow`);let n=Bo(),r=Qo(),i=n[r]===Fu?-1:n[r],a=i===-1?void 0:rg(n,27+i);if(hp(n,r,e)){let r=rn(null);try{if(a!==void 0&&Vf(a,0),e!==-1){let r=27+e,i=rg(n,r),a=cg(n[1],r),o=ip(i,a,n);Bf(i,ff(n,a,t,{dehydratedView:o}),0,pf(a,o))}}finally{rn(r)}}else if(a!==void 0){let e=zf(a,0);e!==void 0&&(e[8]=t)}}var Qh=class{lContainer;$implicit;$index;constructor(e,t,n){this.lContainer=e,this.$implicit=t,this.$index=n}get $count(){return this.lContainer.length-10}};function $h(e){return e}function eg(e,t){return t}var tg=class{hasEmptyBlock;trackByFn;liveCollection;constructor(e,t,n){this.hasEmptyBlock=e,this.trackByFn=t,this.liveCollection=n}};function M(e,t,n,r,i,a,o,s,c,l,u,d,f){rd(`NgControlFlow`);let p=Bo(),m=Vo(),ee=c!==void 0,h=Bo(),g=new tg(ee,s?o.bind(h[15][8]):o);h[27+e]=g,Ah(p,m,e+1,t,n,r,i,So(m.consts,a),256),ee&&Ah(p,m,e+2,c,l,u,d,So(m.consts,f),512)}var ng=class extends Wh{lContainer;hostLView;templateTNode;operationsCounter=void 0;needsIndexUpdate=!1;constructor(e,t,n){super(),this.lContainer=e,this.hostLView=t,this.templateTNode=n}get length(){return this.lContainer.length-10}at(e){return this.getLView(e)[8].$implicit}attach(e,t){let n=t[6];this.needsIndexUpdate||=e!==this.length,Bf(this.lContainer,t,e,pf(this.templateTNode,n)),ig(this.lContainer,e)}detach(e){return this.needsIndexUpdate||=e!==this.length-1,ag(this.lContainer,e),og(this.lContainer,e)}create(e,t){let n=rp(this.lContainer,this.templateTNode.tView.ssrId);return ff(this.hostLView,this.templateTNode,new Qh(this.lContainer,t,e),{dehydratedView:n})}destroy(e){vd(e[1],e)}updateValue(e,t){this.getLView(e)[8].$implicit=t}reset(){this.needsIndexUpdate=!1}updateIndexes(){if(this.needsIndexUpdate)for(let e=0;e<this.length;e++)this.getLView(e)[8].$index=e}getLView(e){return sg(this.lContainer,e)}};function N(e){let t=rn(null),n=ls();try{let r=Bo(),i=r[1],a=r[n],o=n+1,s=rg(r,o);a.liveCollection===void 0?a.liveCollection=new ng(s,r,cg(i,o)):a.liveCollection.reset();let c=a.liveCollection;if(Kh(c,e,a.trackByFn,t),c.updateIndexes(),a.hasEmptyBlock){let e=Qo(),t=c.length===0;if(hp(r,e,t)){let e=n+2,a=rg(r,e);if(t){let t=cg(i,e),n=ip(a,t,r);Bf(a,ff(r,t,void 0,{dehydratedView:n}),0,pf(t,n))}else i.firstUpdatePass&&$f(a),Vf(a,0)}}}finally{rn(t)}}function rg(e,t){return e[t]}function ig(e,t){if(e.length<=10)return;let n=e[10+t],r=n?n[26]:void 0;if(n&&r&&r.detachedLeaveAnimationFns&&r.detachedLeaveAnimationFns.length>0){let e=n[9];Ite(e,r),Uu.delete(n[19]),r.detachedLeaveAnimationFns=void 0}}function ag(e,t){if(e.length<=10)return;let n=e[10+t],r=n?n[26]:void 0;r&&r.leave&&r.leave.size>0&&(r.detachedLeaveAnimationFns=[])}function og(e,t){return Hf(e,t)}function sg(e,t){return zf(e,t)}function cg(e,t){return go(e,t)}function P(e,t,n){let r=Bo();return hp(r,Qo(),t)&&(Vo(),Kd(ds(),r,e,t,r[11],n)),P}function lg(e,t,n,r,i){of(t,e,n,i?`class`:`style`,r)}function F(e,t,n,r){let i=Bo(),a=i[1],o=e+27,s=a.firstCreatePass?rm(o,i,2,t,Qd,Io(),n,r):a.data[o];if(ao(s)){let n=i[10].tracingService;if(n&&n.componentCreate){let o=a.data[s.directiveStart+s.componentOffset];return n.componentCreate(up(o),()=>(ug(e,t,i,s,r),F))}}return ug(e,t,i,s,r),F}function ug(e,t,n,r,i){if(nf(r,n,e,t,fg),oo(r)){let e=n[1];Hd(e,n,r),ou(e,r,n)}i!=null&&Ud(n,r)}function I(){let e=Vo(),t=rf(Ho());return e.firstCreatePass&&im(e,t),Ro(t)&&zo(),Fo(),t.classesWithoutHost!=null&&Wc(t)&&lg(e,t,Bo(),t.classesWithoutHost,!0),t.stylesWithoutHost!=null&&Gc(t)&&lg(e,t,Bo(),t.stylesWithoutHost,!1),I}function L(e,t,n,r){return F(e,t,n,r),I(),L}function R(e,t,n,r){let i=Bo(),a=i[1],o=e+27,s=a.firstCreatePass?am(o,a,2,t,n,r):a.data[o];return nf(s,i,e,t,fg),r!=null&&Ud(i,s),R}function z(){return Ro(rf(Ho()))&&zo(),Fo(),z}function dg(e,t,n,r){return R(e,t,n,r),z(),dg}var fg=(e,t,n,r,i)=>(_s(!0),xu(t[11],r,ms()));function pg(e,t,n){let r=Bo(),i=r[1],a=e+27,o=i.firstCreatePass?rm(a,r,8,`ng-container`,Qd,Io(),t,n):i.data[a];if(nf(o,r,e,`ng-container`,gg),oo(o)){let e=r[1];Hd(e,r,o),ou(e,o,r)}return n!=null&&Ud(r,o),pg}function mg(){let e=Vo(),t=rf(Ho());return e.firstCreatePass&&im(e,t),mg}function hg(e,t,n){return pg(e,t,n),mg(),hg}var gg=(e,t,n,r,i)=>(_s(!0),bu(t[11],``));function B(){return Bo()}function V(e,t,n){let r=Bo();return hp(r,Qo(),t)&&(Vo(),qd(ds(),r,e,t,r[11],n)),V}var _g=void 0;function vg(e){let t=Math.floor(Math.abs(e)),n=e.toString().replace(/^[^.]*\.?/,``).length;return t===1&&n===0?1:5}var yg=[`en`,[[`a`,`p`],[`AM`,`PM`]],[[`AM`,`PM`]],[[`S`,`M`,`T`,`W`,`T`,`F`,`S`],[`Sun`,`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`],[`Sunday`,`Monday`,`Tuesday`,`Wednesday`,`Thursday`,`Friday`,`Saturday`],[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`]],_g,[[`J`,`F`,`M`,`A`,`M`,`J`,`J`,`A`,`S`,`O`,`N`,`D`],[`Jan`,`Feb`,`Mar`,`Apr`,`May`,`Jun`,`Jul`,`Aug`,`Sep`,`Oct`,`Nov`,`Dec`],[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`]],_g,[[`B`,`A`],[`BC`,`AD`],[`Before Christ`,`Anno Domini`]],0,[6,0],[`M/d/yy`,`MMM d, y`,`MMMM d, y`,`EEEE, MMMM d, y`],[`h:mm a`,`h:mm:ss a`,`h:mm:ss a z`,`h:mm:ss a zzzz`],[`{1}, {0}`,_g,_g,_g],[`.`,`,`,`;`,`%`,`+`,`-`,`E`,`×`,`‰`,`∞`,`NaN`,`:`],[`#,##0.###`,`#,##0%`,`¤#,##0.00`,`#E0`],`USD`,`$`,`US Dollar`,{},`ltr`,vg],bg=Object.create(null);function xg(e){let t=wg(e),n=Sg(t);if(n)return n;let r=t.split(`-`)[0];if(n=Sg(r),n)return n;if(r===`en`)return yg;throw new fi(701,!1)}function Sg(e){if(!(e in bg)){let t=Zi.ng&&Zi.ng.common&&Zi.ng.common.locales&&Zi.ng.common.locales[e];return t!==void 0&&(bg[e]=t),t}return bg[e]}var Cg={LocaleId:0,DayPeriodsFormat:1,DayPeriodsStandalone:2,DaysFormat:3,DaysStandalone:4,MonthsFormat:5,MonthsStandalone:6,Eras:7,FirstDayOfWeek:8,WeekendRange:9,DateFormat:10,TimeFormat:11,DateTimeFormat:12,NumberSymbols:13,NumberFormats:14,CurrencyCode:15,CurrencySymbol:16,CurrencyName:17,Currencies:18,Directionality:19,PluralCase:20,ExtraData:21};function wg(e){return e.toLowerCase().replace(/_/g,`-`)}var Tg=`en-US`;function Eg(e){typeof e==`string`&&e.toLowerCase().replace(/_/g,`-`)}function H(e,t,n){let r=Bo(),i=Vo(),a=Ho();return Dg(i,r,r[11],a,e,t,n),H}function U(e,t,n){let r=Bo(),i=Vo(),a=Ho();return(a.type&3||n)&&xp(a,i,r,n,r[11],e,t,yp(a,r,t)),U}function Dg(e,t,n,r,i,a,o){let s=!0,c=null;if((r.type&3||o)&&(c??=yp(r,t,a),xp(r,e,t,o,n,i,a,c)&&(s=!1)),s){let e=r.outputs?.[i],n=r.hostDirectiveOutputs?.[i];if(n&&n.length)for(let e=0;e<n.length;e+=2){let o=n[e],s=n[e+1];c??=yp(r,t,a),Ep(r,t,o,s,i,c)}if(e&&e.length)for(let n of e)c??=yp(r,t,a),Ep(r,t,n,i,i,c)}}function W(e=1){return nte(e)}function Og(e,t){let n=null,r=dte(e);for(let i=0;i<t.length;i++){let a=t[i];if(a===`*`){n=i;continue}if(r===null?Nu(e,a,!0):mte(r,a))return i}return n}function kg(e){let t=Bo()[15][5];if(!t.projection){let n=t.projection=pa(e?e.length:1,null),r=n.slice(),i=t.child;for(;i!==null;){if(i.type!==128){let t=e?Og(i,e):0;t!==null&&(r[t]?r[t].projectionNext=i:n[t]=i,r[t]=i)}i=i.next}}}function Ag(e,t=0,n,r,i,a){let o=Bo(),s=Vo(),c=r?e+1:null;c!==null&&Ah(o,s,c,r,i,a,null,n);let l=Yf(s,27+e,16,null,n||null);l.projection===null&&(l.projection=t),Ko();let u=!o[6]||Lo();o[15][5].projection[l.projection]===null&&c!==null?jg(o,s,c):u&&!tu(l)&&Qte(s,o,l)}function jg(e,t,n){let r=27+n,i=t.data[r],a=e[r],o=rp(a,i.tView.ssrId);Bf(a,ff(e,i,void 0,{dehydratedView:o}),0,pf(i,o))}function Mg(e,t,n,r){return eh(e,Km(t,n,r)),Mg}function Ng(e=1){ts(ete()+e)}function Pg(e){return _o(qo(),27+e)}function Fg(e,t){return e<<17|t<<2}function Ig(e){return e>>17&32767}function Lg(e){return(e&2)==2}function Rg(e,t){return e&131071|t<<17}function zg(e){return e|2}function Bg(e){return(e&131068)>>2}function Vg(e,t){return e&-131069|t<<2}function Hg(e){return(e&1)==1}function Ug(e){return e|1}function Wg(e,t,n,r,i,a){let o=a?t.classBindings:t.styleBindings,s=Ig(o),c=Bg(o);e[r]=n;let l=!1,u;if(Array.isArray(n)){let e=n;u=e[1],(u===null||_a(e,u)>0)&&(l=!0)}else u=n;if(i){if(c!==0){let t=Ig(e[s+1]);e[r+1]=Fg(t,s),t!==0&&(e[t+1]=Vg(e[t+1],r)),e[s+1]=Rg(e[s+1],r)}else e[r+1]=Fg(s,0),s!==0&&(e[s+1]=Vg(e[s+1],r)),s=r}else e[r+1]=Fg(c,0),s===0?s=r:e[c+1]=Vg(e[c+1],r),c=r;l&&(e[r+1]=zg(e[r+1])),Kg(e,u,r,!0),Kg(e,u,r,!1),Gg(t,u,e,r,a),o=Fg(s,c),a?t.classBindings=o:t.styleBindings=o}function Gg(e,t,n,r,i){let a=i?e.residualClasses:e.residualStyles;a!=null&&typeof t==`string`&&_a(a,t)>=0&&(n[r+1]=Ug(n[r+1]))}function Kg(e,t,n,r){let i=e[n+1],a=t===null,o=r?Ig(i):Bg(i),s=!1;for(;o!==0&&(s===!1||a);){let n=e[o],i=e[o+1];qg(n,t)&&(s=!0,e[o+1]=r?Ug(i):zg(i)),o=r?Ig(i):Bg(i)}s&&(e[n+1]=r?zg(i):Ug(i))}function qg(e,t){return e===null||t==null||(Array.isArray(e)?e[1]:e)===t?!0:Array.isArray(e)&&typeof t==`string`?_a(e,t)>=0:!1}var Jg={textEnd:0,key:0,keyEnd:0,value:0,valueEnd:0};function Yg(e){return e.substring(Jg.key,Jg.keyEnd)}function Xg(e){return Qg(e),Zg(e,$g(e,0,Jg.textEnd))}function Zg(e,t){let n=Jg.textEnd;return n===t?-1:(t=Jg.keyEnd=e_(e,Jg.key=t,n),$g(e,t,n))}function Qg(e){Jg.key=0,Jg.keyEnd=0,Jg.value=0,Jg.valueEnd=0,Jg.textEnd=e.length}function $g(e,t,n){for(;t<n&&e.charCodeAt(t)<=32;)t++;return t}function e_(e,t,n){for(;t<n&&e.charCodeAt(t)>32;)t++;return t}function t_(e,t,n){return i_(e,t,n,!1),t_}function G(e,t){return i_(e,t,null,!0),G}function n_(e){a_(h_,r_,e,!0)}function r_(e,t){for(let n=Xg(t);n>=0;n=Zg(t,n))ha(e,Yg(t),!0)}function i_(e,t,n,r){let i=Bo(),a=Vo(),o=$o(2);if(a.firstUpdatePass&&s_(a,e,o,r),t!==Fu&&hp(i,o,t)){let s=a.data[ls()];__(a,s,i,i[11],e,i[o+1]=b_(t,n),r,o)}}function a_(e,t,n,r){let i=Vo(),a=$o(2);i.firstUpdatePass&&s_(i,null,a,r);let o=Bo();if(n!==Fu&&hp(o,a,n)){let s=i.data[ls()];if(x_(s,r)&&!o_(i,a)){let e=r?s.classesWithoutHost:s.stylesWithoutHost;e!==null&&(n=gi(e,n||``)),lg(i,s,o,n,r)}else g_(i,s,o,o[11],o[a+1],o[a+1]=m_(e,t,n),r,a)}}function o_(e,t){return t>=e.expandoStartIndex}function s_(e,t,n,r){let i=e.data;if(i[n+1]===null){let a=i[ls()],o=o_(e,n);x_(a,r)&&t===null&&!o&&(t=!1),t=c_(i,a,t,r),Wg(i,a,t,n,o,r)}}function c_(e,t,n,r){let i=$ee(e),a=r?t.residualClasses:t.residualStyles;if(i===null)(r?t.classBindings:t.styleBindings)===0&&(n=f_(null,e,t,n,r),n=p_(n,t.attrs,r),a=null);else{let o=t.directiveStylingLast;if(o===-1||e[o]!==i){if(n=f_(i,e,t,n,r),a===null){let n=l_(e,t,r);n!==void 0&&Array.isArray(n)&&(n=f_(null,e,t,n[1],r),n=p_(n,t.attrs,r),u_(e,t,r,n))}else a=d_(e,t,r)}}return a!==void 0&&(r?t.residualClasses=a:t.residualStyles=a),n}function l_(e,t,n){let r=n?t.classBindings:t.styleBindings;if(Bg(r)!==0)return e[Ig(r)]}function u_(e,t,n,r){let i=n?t.classBindings:t.styleBindings;e[Ig(i)]=r}function d_(e,t,n){let r,i=t.directiveEnd;for(let a=1+t.directiveStylingLast;a<i;a++){let t=e[a].hostAttrs;r=p_(r,t,n)}return p_(r,t.attrs,n)}function f_(e,t,n,r,i){let a=null,o=n.directiveEnd,s=n.directiveStylingLast;for(s===-1?s=n.directiveStart:s++;s<o&&(a=t[s],r=p_(r,a.hostAttrs,i),a!==e);)s++;return e!==null&&(n.directiveStylingLast=s),r}function p_(e,t,n){let r=n?1:2,i=-1;if(t!==null)for(let a=0;a<t.length;a++){let o=t[a];typeof o==`number`?i=o:i===r&&(Array.isArray(e)||(e=e===void 0?[]:[``,e]),ha(e,o,n?!0:t[++a]))}return e===void 0?null:e}function m_(e,t,n){if(n==null||n===``)return ba;let r=[],i=lu(n);if(Array.isArray(i))for(let t=0;t<i.length;t++)e(r,i[t],!0);else if(i instanceof Set)for(let t of i)e(r,t,!0);else if(typeof i==`object`)for(let t in i)Object.hasOwn(i,t)&&e(r,t,i[t]);else typeof i==`string`&&t(r,i);return r}function h_(e,t,n){let r=String(t);r!==``&&!r.includes(` `)&&ha(e,r,n)}function g_(e,t,n,r,i,a,o,s){i===Fu&&(i=ba);let c=0,l=0,u=0<i.length?i[0]:null,d=0<a.length?a[0]:null;for(;u!==null||d!==null;){let f=c<i.length?i[c+1]:void 0,p=l<a.length?a[l+1]:void 0,m=null,ee;u===d?(c+=2,l+=2,f!==p&&(m=d,ee=p)):d===null||u!==null&&u<d?(c+=2,m=u):(l+=2,m=d,ee=p),m!==null&&__(e,t,n,r,m,ee,o,s),u=c<i.length?i[c]:null,d=l<a.length?a[l]:null}}function __(e,t,n,r,i,a,o,s){if(!(t.type&3))return;let c=e.data,l=c[s+1];y_(Hg(l)?v_(c,t,n,i,Bg(l),o):void 0)||(y_(a)||Lg(l)&&(a=v_(c,null,n,i,s,o)),kd(r,o,mo(ls(),n),i,a))}function v_(e,t,n,r,i,a){let o=t===null,s;for(;i>0;){let t=e[i],a=Array.isArray(t),c=a?t[1]:t,l=c===null,u=n[i+1];u===Fu&&(u=l?ba:void 0);let d=l?ga(u,r):c===r?u:void 0;if(a&&!y_(d)&&(d=ga(t,r)),y_(d)&&(s=d,o))return s;let f=e[i+1];i=o?Ig(f):Bg(f)}if(t!==null){let e=a?t.residualClasses:t.residualStyles;e!=null&&(s=ga(e,r))}return s}function y_(e){return e!==void 0}function b_(e,t){return e==null||e===``||(typeof t==`string`?e=lu(e)+t:typeof e==`object`&&(e=hi(lu(e)))),e}function x_(e,t){return!!(e.flags&(t?8:16))}function K(e,t=``){let n=Bo(),r=Vo(),i=e+27,a=r.firstCreatePass?Yf(r,i,1,t,null):r.data[i],o=S_(r,n,a,t);n[i]=o,gs()&&Sd(r,n,o,a),Wo(a,!1)}var S_=(e,t,n,r)=>(_s(!0),vu(t[11],r));function C_(e,t,n,r=``){return hp(e,Qo(),n)?t+zi(n)+r:Fu}function w_(e,t,n,r,i,a=``){let o=gp(e,Zo(),n,i);return $o(2),o?t+zi(n)+r+zi(i)+a:Fu}function T_(e,t,n,r,i,a,o,s=``){let c=_p(e,Zo(),n,i,o);return $o(3),c?t+zi(n)+r+zi(i)+a+zi(o)+s:Fu}function E_(e,t,n,r,i,a,o,s,c,l=``){let u=vp(e,Zo(),n,i,o,c);return $o(4),u?t+zi(n)+r+zi(i)+a+zi(o)+s+zi(c)+l:Fu}function q(e){return J(``,e),q}function J(e,t,n){let r=Bo(),i=C_(r,e,t,n);return i!==Fu&&k_(r,ls(),i),J}function Y(e,t,n,r,i){let a=Bo(),o=w_(a,e,t,n,r,i);return o!==Fu&&k_(a,ls(),o),Y}function D_(e,t,n,r,i,a,o){let s=Bo(),c=T_(s,e,t,n,r,i,a,o);return c!==Fu&&k_(s,ls(),c),D_}function O_(e,t,n,r,i,a,o,s,c){let l=Bo(),u=E_(l,e,t,n,r,i,a,o,s,c);return u!==Fu&&k_(l,ls(),u),O_}function k_(e,t,n){let r=mo(t,e);yu(e[11],r,n)}function A_(e,t,n){gc(t)&&(t=t());let r=Bo();return hp(r,Qo(),t)&&(Vo(),Kd(ds(),r,e,t,r[11],n)),A_}function j_(e,t){let n=gc(e);return n&&e.set(t),n}function M_(e,t){let n=Bo(),r=Vo(),i=Ho();return Dg(r,n,n[11],i,e,t),M_}var N_={};function P_(e){rd(`NgLet`);let t=Vo(),n=Bo(),r=e+27;return Wo(Yf(t,r,128,null,null),!1),vo(t,n,r,N_),P_}function F_(e){return vo(Vo(),Bo(),ls(),e),e}function I_(e){let t=_o(qo(),27+e);if(t===N_)throw new fi(314,!1);return t}function L_(e,t,n=``){return C_(Bo(),e,t,n)}function R_(e,t,n){let r=Vo();r.firstCreatePass&&z_(t,r.data,r.blueprint,so(e),n)}function z_(e,t,n,r,i){if(e=vi(e),Array.isArray(e))for(let a=0;a<e.length;a++)z_(e[a],t,n,r,i);else{let a=Vo(),o=Bo(),s=Ho(),c=Pa(e)?e:vi(e.provide),l=Ka(e),u=s.providerIndexes&1048575,d=s.directiveStart,f=s.providerIndexes>>20;if(Pa(e)||!e.multi){let r=new Uc(l,i,Hp,null),p=H_(c,t,i?u:u+f,d);p===-1?(fl(cl(s,o),a,c),B_(a,e,t.length),t.push(c),s.directiveStart++,s.directiveEnd++,i&&(s.providerIndexes+=1048576),n.push(r),o.push(r)):(n[p]=r,o[p]=r)}else{let p=H_(c,t,u+f,d),m=H_(c,t,u,u+f),ee=p>=0&&n[p],h=m>=0&&n[m];if(i&&!h||!i&&!ee){fl(cl(s,o),a,c);let u=nne(i?tne:ene,n.length,i,r,l,e);!i&&h&&(n[m].providerFactory=u),B_(a,e,t.length,0),t.push(c),s.directiveStart++,s.directiveEnd++,i&&(s.providerIndexes+=1048576),n.push(u),o.push(u)}else{let t=V_(n[i?m:p],l,!i&&r);B_(a,e,p>-1?p:m,t)}!i&&r&&h&&n[m].componentProviders++}}}function B_(e,t,n,r){let i=Pa(t),a=Fa(t);if(i||a){let o=(a?vi(t.useClass):t).prototype.ngOnDestroy;if(o){let a=e.destroyHooks||=[];if(!i&&t.multi){let e=a.indexOf(n);e===-1?a.push(n,[r,o]):a[e+1].push(r,o)}else a.push(n,o)}}}function V_(e,t,n){return n&&e.componentProviders++,e.multi.push(t)-1}function H_(e,t,n,r){for(let i=n;i<r;i++)if(t[i]===e)return i;return-1}function ene(e,t,n,r,i){return U_(this.multi,[])}function tne(e,t,n,r,i){let a=this.multi,o;if(this.providerFactory){let e=this.providerFactory.componentProviders,t=yl(r,r[1],this.providerFactory.index,i);o=t.slice(0,e),U_(a,o);for(let n=e;n<t.length;n++)o.push(t[n])}else o=[],U_(a,o);return o}function U_(e,t){for(let n=0;n<e.length;n++){let r=e[n];t.push(r())}return t}function nne(e,t,n,r,i,a){let o=new Uc(e,n,Hp,null);return o.multi=[],o.index=t,o.componentProviders=0,V_(o,i,r&&!n),o}function W_(e,t){return n=>{n.providersResolver=(t,n)=>R_(t,n?n(e):e,!1),t&&(n.viewProvidersResolver=(e,n)=>R_(e,n?n(t):t,!0))}}function G_(e,t){let n=Xo()+e,r=Bo();return r[n]===Fu?pp(r,n,t()):mp(r,n)}function K_(e,t,n){return Y_(Bo(),Xo(),e,t,n)}function q_(e,t,n,r){return X_(Bo(),Xo(),e,t,n,r)}function rne(e,t,n,r,i,a,o){return ine(Bo(),Xo(),e,t,n,r,i,a)}function J_(e,t){let n=e[t];return n===Fu?void 0:n}function Y_(e,t,n,r,i,a){let o=t+n;return hp(e,o,i)?pp(e,o+1,a?r.call(a,i):r(i)):J_(e,o+1)}function X_(e,t,n,r,i,a,o){let s=t+n;return gp(e,s,i,a)?pp(e,s+2,o?r.call(o,i,a):r(i,a)):J_(e,s+2)}function ine(e,t,n,r,i,a,o,s,c){let l=t+n;return vp(e,l,i,a,o,s)?pp(e,l+4,c?r.call(c,i,a,o,s):r(i,a,o,s)):J_(e,l+4)}function Z_(e,t){let n=Vo(),r,i=e+27;n.firstCreatePass?(r=ane(t,n.pipeRegistry),n.data[i]=r,r.onDestroy&&(n.destroyHooks??=[]).push(i,r.onDestroy)):r=n.data[i];let a=r.factory||(r.factory=sa(r.type,!0)),o=Yi(Hp);try{let e=nl(!1),t=a();return nl(e),vo(n,Bo(),i,t),t}finally{Yi(o)}}function ane(e,t){if(t)for(let n=t.length-1;n>=0;n--){let r=t[n];if(e===r.name)return r}}function Q_(e,t,n){let r=e+27,i=Bo(),a=_o(i,r);return ev(i,r)?Y_(i,Xo(),t,a.transform,n,a):a.transform(n)}function $_(e,t,n,r){let i=e+27,a=Bo(),o=_o(a,i);return ev(a,i)?X_(a,Xo(),t,o.transform,n,r,o):o.transform(n,r)}function ev(e,t){return e[1].data[t].pure}function tv(e,t){return Jf(e,t)}var one=(()=>{class e{applicationErrorHandler=x(qs);appRef=x(Rh);taskService=x(Es);ngZone=x(Ps);zonelessEnabled=x(ic);tracing=x(td,{optional:!0});zoneIsDefined=typeof Zone<`u`&&!!Zone.root.run;schedulerTickApplyArgs=[{data:{__scheduler_tick__:!0}}];subscriptions=new sr;angularZoneId=this.zoneIsDefined?this.ngZone._inner?.get(Ms):null;scheduleInRootZone=!this.zonelessEnabled&&this.zoneIsDefined&&(x(ac,{optional:!0})??!1);cancelScheduledCallback=null;useMicrotaskScheduler=!1;runningTick=!1;pendingRenderTaskId=null;constructor(){this.subscriptions.add(this.appRef.afterTick.subscribe(()=>{let e=this.taskService.add();if(!this.runningTick&&(this.cleanup(),!this.zonelessEnabled||this.appRef.includeAllTestViews)){this.taskService.remove(e);return}this.switchToMicrotaskScheduler(),this.taskService.remove(e)})),this.subscriptions.add(this.ngZone.onUnstable.subscribe(()=>{this.runningTick||this.cleanup()}))}switchToMicrotaskScheduler(){this.ngZone.runOutsideAngular(()=>{let e=this.taskService.add();this.useMicrotaskScheduler=!0,queueMicrotask(()=>{this.useMicrotaskScheduler=!1,this.taskService.remove(e)})})}notify(e){if(!this.zonelessEnabled&&e===5)return;switch(e){case 0:case 2:this.appRef.dirtyFlags|=2;break;case 3:case 4:case 5:case 1:this.appRef.dirtyFlags|=4;break;case 6:this.appRef.dirtyFlags|=2;break;case 12:this.appRef.dirtyFlags|=16;break;case 13:this.appRef.dirtyFlags|=2;break;case 11:break;default:this.appRef.dirtyFlags|=8}if(this.appRef.tracingSnapshot=this.tracing?.snapshot(this.appRef.tracingSnapshot)??null,!this.shouldScheduleTick())return;let t=this.useMicrotaskScheduler?As:ks;this.pendingRenderTaskId=this.taskService.add(),this.cancelScheduledCallback=this.scheduleInRootZone?Zone.root.run(()=>t(()=>this.tick())):this.ngZone.runOutsideAngular(()=>t(()=>this.tick()))}shouldScheduleTick(){return!(this.appRef.destroyed||this.pendingRenderTaskId!==null||this.runningTick||this.appRef._runningTick||!this.zonelessEnabled&&this.zoneIsDefined&&Zone.current.get(`isAngularZone_ID`+this.angularZoneId))}tick(){if(this.runningTick||this.appRef.destroyed)return;if(this.appRef.dirtyFlags===0){this.cleanup();return}!this.zonelessEnabled&&this.appRef.dirtyFlags&7&&(this.appRef.dirtyFlags|=1);let e=this.taskService.add();try{this.ngZone.run(()=>{this.runningTick=!0,this.appRef._tick()},void 0,this.schedulerTickApplyArgs)}catch(e){this.applicationErrorHandler(e)}finally{this.taskService.remove(e),this.cleanup()}}ngOnDestroy(){this.subscriptions.unsubscribe(),this.cleanup()}cleanup(){if(this.runningTick=!1,this.cancelScheduledCallback?.(),this.cancelScheduledCallback=null,this.pendingRenderTaskId!==null){let e=this.pendingRenderTaskId;this.pendingRenderTaskId=null,this.taskService.remove(e)}}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})}return e})();function sne(){return[{provide:rc,useExisting:one},{provide:Ps,useClass:Hs},{provide:ic,useValue:!0}]}function cne(){return typeof $localize<`u`&&$localize.locale||`en-US`}var nv=new Di(``,{factory:()=>x(nv,{optional:!0,skipSelf:!0})||cne()}),rv=class{destroyed=!1;listeners=null;errorHandler=x(Ks,{optional:!0});isEmitting=!1;hasNullListeners=!1;destroyRef=x(Ss);constructor(){this.destroyRef.onDestroy(()=>{this.destroyed=!0,this.listeners=null})}subscribe(e){if(this.destroyed)throw new fi(953,!1);return(this.listeners??=[]).push(e),{unsubscribe:()=>{let t=this.listeners?this.listeners.indexOf(e):-1;t>-1&&(this.isEmitting?(this.hasNullListeners=!0,this.listeners[t]=null):this.listeners.splice(t,1))}}}emit(e){if(this.destroyed){console.warn(pi(953,!1));return}if(this.listeners===null)return;this.isEmitting=!0;let t=rn(null);try{for(let t of this.listeners)try{t!==null&&t(e)}catch(e){this.errorHandler?.handleError(e)}}finally{this.hasNullListeners&&(this.hasNullListeners=!1,this.listeners&&lne(this.listeners)),rn(t),this.isEmitting=!1}}};function lne(e){let t=e.length-1;for(;t>-1;)e[t]===null&&e.splice(t,1),t--}function X(e,t){return Tn(e,t?.equal)}function Z(e){return Kn(e)}(class e extends Error{_brand;constructor(e){super(e)}static IDLE=new e(`IDLE`);static LOADING=new e(`LOADING`)});var une=e=>e;function Q(e,t){return typeof e==`function`?iv(Hn(e,une,t?.equal),t?.debugName,t?.set):iv(Hn(e.source,e.computation,e.equal),e.debugName,e.set)}function iv(e,t,n){let r=e[nn],i=e;if(n!==void 0){let t=e=>Un(r,e);i.set=e=>n(e,t),i.update=r=>n(r(Z(e)),t)}else i.set=e=>Un(r,e),i.update=e=>Wn(r,e);return i.asReadonly=Ys.bind(e),i}var av=!1;function dne(){return av}function ov(e){av=e}function sv(e,t){let n=Object.create(vc);n.value=e,n.transformFn=t?.transform;function r(){if(sn(n),n.value===_c)throw new fi(-950,null);return n.value}return r[nn]=n,r}function cv(e){return new rv}function lv(e,t){return sv(e,t)}function fne(e){return sv(_c,e)}var $=(lv.required=fne,lv);function uv(e,t){let n=Object.create(vc),r=new rv;n.value=e;function i(){return sn(n),dv(n.value),n.value}return i[nn]=n,i.asReadonly=Ys.bind(i),i.set=e=>{n.equal(n.value,e)||(jn(n,e),r.emit(e))},i.update=e=>{dv(n.value),i.set(e(n.value))},i.subscribe=r.subscribe.bind(r),i.destroyRef=r.destroyRef,i}function dv(e){if(e===_c)throw new fi(952,!1)}function fv(e,t){return uv(e,t)}function pne(e){return uv(_c,e)}var pv=(fv.required=pne,fv);function mv(e,t){return Qm(t)}function mne(e,t){return $m(t)}var hv=(mv.required=mne,mv),hne=(()=>{class e{static __NG_ELEMENT_ID__=gne}return e})();function gne(e){return _ne(Ho(),Bo(),(e&16)==16)}function _ne(e,t,n){if(ao(e)&&!n){let n=yo(e.index,t);return new Gf(n,n)}if(e.type&175){let e=t[15];return new Gf(e,t)}return null}var gv=new Di(``),vne=new Di(``);function _v(e){return!e.moduleRef}function yne(e){let t=_v(e)?e.r3Injector:e.moduleRef.injector,n=t.get(Ps);return n.run(()=>{_v(e)?e.r3Injector.resolveInjectorInitializers():e.moduleRef.resolveInjectorInitializers();let r=t.get(qs),i;if(n.runOutsideAngular(()=>{i=n.onError.subscribe({next:r})}),_v(e)){let n=()=>t.destroy(),r=e.platformInjector.get(gv);r.add(n),t.onDestroy(()=>{i.unsubscribe(),r.delete(n)})}else{let t=()=>e.moduleRef.destroy(),n=e.platformInjector.get(gv);n.add(t),e.moduleRef.onDestroy(()=>{Bh(e.allPlatformModules,e.moduleRef),i.unsubscribe(),n.delete(t)})}return xne(r,n,()=>{let n=t.get(Es),r=n.add(),i=t.get(vh);return i.runInitializers(),i.donePromise.then(()=>{if(Eg(t.get(nv,Tg)||`en-US`),!t.get(vne,!0))return _v(e)?t.get(Rh):(e.allPlatformModules.push(e.moduleRef),e.moduleRef);if(_v(e)){let n=t.get(Rh);return e.rootComponent!==void 0&&n.bootstrap(e.rootComponent),n}return bne?.(e.moduleRef,e.allPlatformModules),e.moduleRef}).finally(()=>void n.remove(r))})})}var bne;function xne(e,t,n){try{let r=n();return nh(r)?r.catch(n=>{throw t.runOutsideAngular(()=>e(n)),n}):r}catch(n){throw t.runOutsideAngular(()=>e(n)),n}}var vv=null;function Sne(e=[],t){return bs.create({name:t,providers:[{provide:Ia,useValue:`platform`},{provide:gv,useValue:new Set([()=>vv=null])},...e]})}function Cne(e=[]){if(vv)return vv;let t=Sne(e);return vv=t,Ih(),wne(t),t}function wne(e){let t=e.get(Qs,null);$a(e,()=>{t?.forEach(e=>e())})}function Tne(e){let{rootComponent:t,appProviders:n,platformProviders:r,platformRef:i}=e;Nc(bc.BootstrapApplicationStart);try{let e=i?.injector??Cne(r);return yne({r3Injector:new ah({providers:[sne(),Js,...n||[]],parent:e,debugName:``,runEnvironmentInitializers:!1}).injector,platformInjector:e,rootComponent:t})}catch(e){return Promise.reject(e)}finally{Nc(bc.BootstrapApplicationEnd)}}function yv(e){return typeof e==`boolean`?e:e!=null&&e!==`false`}var bv=Symbol(`NOT_SET`),xv=new Set,Ene={...Nn,kind:`afterRenderEffectPhase`,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,value:bv,cleanup:null,consumerMarkedDirty(){if(this.sequence.impl.executing){if(this.sequence.lastPhase===null||this.sequence.lastPhase<this.phase)return;this.sequence.erroredOrDestroyed=!0}this.sequence.scheduler.notify(7)},phaseFn(e){if(this.sequence.lastPhase=this.phase,!this.dirty||(this.dirty=!1,this.value!==bv&&!vn(this)))return this.signal;try{for(let e of this.cleanup??xv)e()}finally{this.cleanup?.clear()}let t=[];e!==void 0&&t.push(e),t.push(this.registerCleanupFn);let n=mn(this),r;try{r=this.userFn.apply(null,t)}finally{gn(this,n)}return(this.value===bv||!this.equal(this.value,r))&&(this.value=r,this.version++),this.signal}},Dne=class extends sd{scheduler;lastPhase=null;nodes=[void 0,void 0,void 0,void 0];onDestroyFns=null;constructor(e,t,n,r,i,a=null){super(e,[void 0,void 0,void 0,void 0],n,!1,i.get(Ss),a),this.scheduler=r;for(let e of ad){let n=t[e];if(n===void 0)continue;let r=Object.create(Ene);r.sequence=this,r.phase=e,r.userFn=n,r.dirty=!0,r.signal=()=>(sn(r),r.value),r.signal[nn]=r,r.registerCleanupFn=e=>(r.cleanup??=new Set).add(e),this.nodes[e]=r,this.hooks[e]=e=>r.phaseFn(e)}}afterRun(){super.afterRun(),this.lastPhase=null}destroy(){if(this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();super.destroy();for(let e of this.nodes)if(e)try{for(let t of e.cleanup??xv)t()}finally{yn(e)}}};function Sv(e,t){let n=t?.injector??x(bs),r=n.get(rc),i=n.get(id),a=n.get(td,null,{optional:!0});i.impl??=n.get(od);let o=e;typeof o==`function`&&(o={mixedReadWrite:e});let s=n.get(tc,null,{optional:!0}),c=new Dne(i.impl,[o.earlyRead,o.write,o.mixedReadWrite,o.read],s?.view,r,n,a?.snapshot(null));return i.impl.register(c),c}var Cv=null;function wv(){return Cv}function One(e){Cv??=e}var kne=class{},Tv=(function(e){return e[e.Format=0]=`Format`,e[e.Standalone=1]=`Standalone`,e})(Tv||{}),Ev=(function(e){return e[e.Narrow=0]=`Narrow`,e[e.Abbreviated=1]=`Abbreviated`,e[e.Wide=2]=`Wide`,e[e.Short=3]=`Short`,e})(Ev||{}),Dv=(function(e){return e[e.Short=0]=`Short`,e[e.Medium=1]=`Medium`,e[e.Long=2]=`Long`,e[e.Full=3]=`Full`,e})(Dv||{}),Ov={Decimal:0,Group:1,List:2,PercentSign:3,PlusSign:4,MinusSign:5,Exponential:6,SuperscriptingExponent:7,PerMille:8,Infinity:9,NaN:10,TimeSeparator:11,CurrencyDecimal:12,CurrencyGroup:13};function Ane(e){return xg(e)[Cg.LocaleId]}function jne(e,t,n){let r=xg(e);return Pv(Pv([r[Cg.DayPeriodsFormat],r[Cg.DayPeriodsStandalone]],t),n)}function Mne(e,t,n){let r=xg(e);return Pv(Pv([r[Cg.DaysFormat],r[Cg.DaysStandalone]],t),n)}function Nne(e,t,n){let r=xg(e);return Pv(Pv([r[Cg.MonthsFormat],r[Cg.MonthsStandalone]],t),n)}function Pne(e,t){let n=xg(e)[Cg.Eras];return Pv(n,t)}function kv(e,t){return Pv(xg(e)[Cg.DateFormat],t)}function Av(e,t){return Pv(xg(e)[Cg.TimeFormat],t)}function jv(e,t){let n=xg(e)[Cg.DateTimeFormat];return Pv(n,t)}function Mv(e,t){let n=xg(e),r=n[Cg.NumberSymbols][t];if(r===void 0){if(t===Ov.CurrencyDecimal)return n[Cg.NumberSymbols][Ov.Decimal];if(t===Ov.CurrencyGroup)return n[Cg.NumberSymbols][Ov.Group]}return r}function Nv(e){if(!e[Cg.ExtraData])throw new fi(2303,!1)}function Fne(e){let t=xg(e);return Nv(t),(t[Cg.ExtraData][2]||[]).map(e=>typeof e==`string`?Fv(e):[Fv(e[0]),Fv(e[1])])}function Ine(e,t,n){let r=xg(e);return Nv(r),Pv(Pv([r[Cg.ExtraData][0],r[Cg.ExtraData][1]],t)||[],n)||[]}function Pv(e,t){for(let n=t;n>-1;n--)if(e[n]!==void 0)return e[n];throw new fi(2304,!1)}function Fv(e){let[t,n]=e.split(`:`);return{hours:+t,minutes:+n}}var Lne=/^(\d{4,})-?(\d\d)-?(\d\d)(?:T(\d\d)(?::?(\d\d)(?::?(\d\d)(?:\.(\d+))?)?)?(Z|([+-])(\d\d):?(\d\d))?)?$/,Iv=Object.create(null),Rne=/((?:[^BEGHLMOSWYZabcdhmswyz']+)|(?:'(?:[^']|'')*')|(?:G{1,5}|y{1,4}|Y{1,4}|M{1,5}|L{1,5}|w{1,2}|W{1}|d{1,2}|E{1,6}|c{1,6}|a{1,5}|b{1,5}|B{1,5}|h{1,2}|H{1,2}|m{1,2}|s{1,2}|S{1,3}|z{1,4}|Z{1,5}|O{1,4}))([\s\S]*)/,zne=256;function Bne(e,t,n,r){let i=Xne(e);Vne(t),t=Rv(n,t)||t;let a=[],o;for(;t;)if(o=Rne.exec(t),o){a=a.concat(o.slice(1));let e=a.pop();if(!e)break;t=e}else{a.push(t);break}let s=i.getTimezoneOffset();r&&(s=Yv(r,s),i=Yne(i,r));let c=``;return a.forEach(e=>{let t=qne(e);c+=t?t(i,n,s):e===`''`?`'`:e.replace(/(^'|'$)/g,``).replace(/''/g,`'`)}),c}function Vne(e){if(e.length>zne)throw new fi(2300,!1)}function Lv(e,t,n){let r=new Date(0);return r.setFullYear(e,t,n),r.setHours(0,0,0),r}function Rv(e,t){let n=Ane(e);if(Iv[n]??=Object.create(null),Iv[n][t])return Iv[n][t];let r=``;switch(t){case`shortDate`:r=kv(e,Dv.Short);break;case`mediumDate`:r=kv(e,Dv.Medium);break;case`longDate`:r=kv(e,Dv.Long);break;case`fullDate`:r=kv(e,Dv.Full);break;case`shortTime`:r=Av(e,Dv.Short);break;case`mediumTime`:r=Av(e,Dv.Medium);break;case`longTime`:r=Av(e,Dv.Long);break;case`fullTime`:r=Av(e,Dv.Full);break;case`short`:let t=Rv(e,`shortTime`),n=Rv(e,`shortDate`);r=zv(jv(e,Dv.Short),[t,n]);break;case`medium`:let i=Rv(e,`mediumTime`),a=Rv(e,`mediumDate`);r=zv(jv(e,Dv.Medium),[i,a]);break;case`long`:let o=Rv(e,`longTime`),s=Rv(e,`longDate`);r=zv(jv(e,Dv.Long),[o,s]);break;case`full`:let c=Rv(e,`fullTime`),l=Rv(e,`fullDate`);r=zv(jv(e,Dv.Full),[c,l])}return r&&(Iv[n][t]=r),r}function zv(e,t){return t&&(e=e.replace(/\{([^}]+)}/g,function(e,n){return Object.hasOwn(t,n)?t[n]:e})),e}function Bv(e,t,n=`-`,r,i){let a=``;(e<0||i&&e<=0)&&(i?e=-e+1:(e=-e,a=n));let o=String(e);for(;o.length<t;)o=`0`+o;return r&&(o=o.slice(o.length-t)),a+o}function Hne(e,t){return Bv(e,3).substring(0,t)}function Vv(e,t,n=0,r=!1,i=!1){return function(a,o){let s=Une(e,a);if((n>0||s>-n)&&(s+=n),e===3)s===0&&n===-12&&(s=12);else if(e===6)return Hne(s,t);let c=Mv(o,Ov.MinusSign);return Bv(s,t,c,r,i)}}function Une(e,t){switch(e){case 0:return t.getFullYear();case 1:return t.getMonth();case 2:return t.getDate();case 3:return t.getHours();case 4:return t.getMinutes();case 5:return t.getSeconds();case 6:return t.getMilliseconds();case 7:return t.getDay();default:throw new fi(2301,!1)}}function Hv(e,t,n=Tv.Format,r=!1){return function(i,a){return Wne(i,a,e,t,n,r)}}function Wne(e,t,n,r,i,a){switch(n){case 2:return Nne(t,i,r)[e.getMonth()];case 1:return Mne(t,i,r)[e.getDay()];case 0:let n=e.getHours(),o=e.getMinutes();if(a){let e=Fne(t),a=Ine(t,i,r),s=e.findIndex(e=>{if(Array.isArray(e)){let[t,r]=e,i=n>=t.hours&&o>=t.minutes,a=n<r.hours||n===r.hours&&o<r.minutes;if(t.hours<r.hours){if(i&&a)return!0}else if(i||a)return!0}else if(e.hours===n&&e.minutes===o)return!0;return!1});if(s!==-1)return a[s]}return jne(t,i,r)[n<12?0:1];case 3:return Pne(t,r)[e.getFullYear()<=0?0:1];default:throw new fi(2302,!1)}}function Uv(e){return function(t,n,r){let i=-1*r,a=Mv(n,Ov.MinusSign),o=i>0?Math.floor(i/60):Math.ceil(i/60);switch(e){case 0:return(i>=0?`+`:``)+Bv(o,2,a)+Bv(Math.abs(i%60),2,a);case 1:return`GMT`+(i>=0?`+`:``)+Bv(o,1,a);case 2:return`GMT`+(i>=0?`+`:``)+Bv(o,2,a)+`:`+Bv(Math.abs(i%60),2,a);case 3:return r===0?`Z`:(i>=0?`+`:``)+Bv(o,2,a)+`:`+Bv(Math.abs(i%60),2,a);default:throw new fi(2310,!1)}}}var Gne=0,Wv=4;function Kne(e){let t=Lv(e,Gne,1).getDay();return Lv(e,0,1+(t<=Wv?Wv:11)-t)}function Gv(e){let t=e.getDay(),n=t===0?-3:Wv-t;return Lv(e.getFullYear(),e.getMonth(),e.getDate()+n)}function Kv(e,t=!1){return function(n,r){let i;if(t){let e=new Date(n.getFullYear(),n.getMonth(),1).getDay()-1,t=n.getDate();i=1+Math.floor((t+e)/7)}else{let e=Gv(n),t=Kne(e.getFullYear()),r=e.getTime()-t.getTime();i=1+Math.round(r/6048e5)}return Bv(i,e,Mv(r,Ov.MinusSign))}}function qv(e,t=!1){return function(n,r){return Bv(Gv(n).getFullYear(),e,Mv(r,Ov.MinusSign),t)}}var Jv=Object.create(null);function qne(e){if(Jv[e])return Jv[e];let t;switch(e){case`G`:case`GG`:case`GGG`:t=Hv(3,Ev.Abbreviated);break;case`GGGG`:t=Hv(3,Ev.Wide);break;case`GGGGG`:t=Hv(3,Ev.Narrow);break;case`y`:t=Vv(0,1,0,!1,!0);break;case`yy`:t=Vv(0,2,0,!0,!0);break;case`yyy`:t=Vv(0,3,0,!1,!0);break;case`yyyy`:t=Vv(0,4,0,!1,!0);break;case`Y`:t=qv(1);break;case`YY`:t=qv(2,!0);break;case`YYY`:t=qv(3);break;case`YYYY`:t=qv(4);break;case`M`:case`L`:t=Vv(1,1,1);break;case`MM`:case`LL`:t=Vv(1,2,1);break;case`MMM`:t=Hv(2,Ev.Abbreviated);break;case`MMMM`:t=Hv(2,Ev.Wide);break;case`MMMMM`:t=Hv(2,Ev.Narrow);break;case`LLL`:t=Hv(2,Ev.Abbreviated,Tv.Standalone);break;case`LLLL`:t=Hv(2,Ev.Wide,Tv.Standalone);break;case`LLLLL`:t=Hv(2,Ev.Narrow,Tv.Standalone);break;case`w`:t=Kv(1);break;case`ww`:t=Kv(2);break;case`W`:t=Kv(1,!0);break;case`d`:t=Vv(2,1);break;case`dd`:t=Vv(2,2);break;case`c`:case`cc`:t=Vv(7,1);break;case`ccc`:t=Hv(1,Ev.Abbreviated,Tv.Standalone);break;case`cccc`:t=Hv(1,Ev.Wide,Tv.Standalone);break;case`ccccc`:t=Hv(1,Ev.Narrow,Tv.Standalone);break;case`cccccc`:t=Hv(1,Ev.Short,Tv.Standalone);break;case`E`:case`EE`:case`EEE`:t=Hv(1,Ev.Abbreviated);break;case`EEEE`:t=Hv(1,Ev.Wide);break;case`EEEEE`:t=Hv(1,Ev.Narrow);break;case`EEEEEE`:t=Hv(1,Ev.Short);break;case`a`:case`aa`:case`aaa`:t=Hv(0,Ev.Abbreviated);break;case`aaaa`:t=Hv(0,Ev.Wide);break;case`aaaaa`:t=Hv(0,Ev.Narrow);break;case`b`:case`bb`:case`bbb`:t=Hv(0,Ev.Abbreviated,Tv.Standalone,!0);break;case`bbbb`:t=Hv(0,Ev.Wide,Tv.Standalone,!0);break;case`bbbbb`:t=Hv(0,Ev.Narrow,Tv.Standalone,!0);break;case`B`:case`BB`:case`BBB`:t=Hv(0,Ev.Abbreviated,Tv.Format,!0);break;case`BBBB`:t=Hv(0,Ev.Wide,Tv.Format,!0);break;case`BBBBB`:t=Hv(0,Ev.Narrow,Tv.Format,!0);break;case`h`:t=Vv(3,1,-12);break;case`hh`:t=Vv(3,2,-12);break;case`H`:t=Vv(3,1);break;case`HH`:t=Vv(3,2);break;case`m`:t=Vv(4,1);break;case`mm`:t=Vv(4,2);break;case`s`:t=Vv(5,1);break;case`ss`:t=Vv(5,2);break;case`S`:t=Vv(6,1);break;case`SS`:t=Vv(6,2);break;case`SSS`:t=Vv(6,3);break;case`Z`:case`ZZ`:case`ZZZ`:t=Uv(0);break;case`ZZZZZ`:t=Uv(3);break;case`O`:case`OO`:case`OOO`:case`z`:case`zz`:case`zzz`:t=Uv(1);break;case`OOOO`:case`ZZZZ`:case`zzzz`:t=Uv(2);break;default:return null}return Jv[e]=t,t}function Yv(e,t){e=e.replace(/:/g,``);let n=Date.parse(`Jan 01, 1970 00:00:00 `+e)/6e4;return isNaN(n)?t:n}function Jne(e,t){return e=new Date(e.getTime()),e.setMinutes(e.getMinutes()+t),e}function Yne(e,t,n){let r=e.getTimezoneOffset();return Jne(e,-1*(Yv(t,r)-r))}function Xne(e){if(Xv(e))return e;if(typeof e==`number`&&!isNaN(e))return new Date(e);if(typeof e==`string`){if(e=e.trim(),/^(\d{4}(-\d{1,2}(-\d{1,2})?)?)$/.test(e)){let[t,n=1,r=1]=e.split(`-`).map(e=>+e);return Lv(t,n-1,r)}let t=parseFloat(e);if(!isNaN(e-t))return new Date(t);let n;if(n=e.match(Lne))return Zne(n)}let t=new Date(e);if(!Xv(t))throw new fi(2311,!1);return t}function Zne(e){let t=new Date(0),n=0,r=0,i=e[8]?t.setUTCFullYear:t.setFullYear,a=e[8]?t.setUTCHours:t.setHours;e[9]&&(n=Number(e[9]+e[10]),r=Number(e[9]+e[11])),i.call(t,Number(e[1]),Number(e[2])-1,Number(e[3]));let o=Number(e[4]||0)-n,s=Number(e[5]||0)-r,c=Number(e[6]||0),l=Math.floor(parseFloat(`0.`+(e[7]||0))*1e3);return a.call(t,o,s,c,l),t}function Xv(e){return e instanceof Date&&!isNaN(e.valueOf())}var Zv=(()=>{class e{_viewContainerRef;_viewRef=null;ngTemplateOutletContext=null;ngTemplateOutlet=null;ngTemplateOutletInjector=null;injector=x(bs);constructor(e){this._viewContainerRef=e}ngOnChanges(e){if(this._shouldRecreateView(e)){let e=this._viewContainerRef;if(this._viewRef&&e.remove(e.indexOf(this._viewRef)),!this.ngTemplateOutlet){this._viewRef=null;return}let t=this._createContextForwardProxy();this._viewRef=e.createEmbeddedView(this.ngTemplateOutlet,t,{injector:this._getInjector()})}}_getInjector(){return this.ngTemplateOutletInjector===`outlet`?this.injector:this.ngTemplateOutletInjector??void 0}_shouldRecreateView(e){return!!e.ngTemplateOutlet||!!e.ngTemplateOutletInjector}_createContextForwardProxy(){return new Proxy({},{set:(e,t,n)=>this.ngTemplateOutletContext?Reflect.set(this.ngTemplateOutletContext,t,n):!1,get:(e,t,n)=>{if(this.ngTemplateOutletContext)return Reflect.get(this.ngTemplateOutletContext,t,n)}})}static ɵfac=function(t){return new(t||e)(Hp(Sm))};static ɵdir=dh({type:e,selectors:[[``,`ngTemplateOutlet`,``]],inputs:{ngTemplateOutletContext:`ngTemplateOutletContext`,ngTemplateOutlet:`ngTemplateOutlet`,ngTemplateOutletInjector:`ngTemplateOutletInjector`},features:[wc]})}return e})();function Qne(e,t){return new fi(2100,!1)}var $ne=`mediumDate`,ere=new Di(``),tre=new Di(``),Qv=(()=>{class e{locale;defaultTimezone;defaultOptions;constructor(e,t,n){this.locale=e,this.defaultTimezone=t,this.defaultOptions=n}transform(t,n,r,i){if(t==null||t===``||t!==t)return null;try{let e=n??this.defaultOptions?.dateFormat??$ne,a=r??this.defaultOptions?.timezone??this.defaultTimezone??void 0;return Bne(t,e,i||this.locale,a)}catch(t){throw Qne(e,t.message)}}static ɵfac=function(t){return new(t||e)(Hp(nv,16),Hp(ere,24),Hp(tre,24))};static ɵpipe=fh({name:`date`,type:e,pure:!0})}return e})(),$v=(()=>{class e{transform(e){return JSON.stringify(e,null,2)}static ɵfac=function(t){return new(t||e)};static ɵpipe=fh({name:`json`,type:e,pure:!1})}return e})();function nre(e,t){t=encodeURIComponent(t);for(let n of e.split(`;`)){let e=n.indexOf(`=`),[r,i]=e==-1?[n,``]:[n.slice(0,e),n.slice(e+1)];if(r.trim()!==t)continue;let a=i;try{a=decodeURIComponent(i)}catch{}return a.length>1&&a[0]===`"`&&a[a.length-1]===`"`&&(a=a.slice(1,-1)),a}return null}var rre=`browser`,ey=class{_doc;constructor(e){this._doc=e}manager},ty=(()=>{class e extends ey{constructor(e){super(e)}supports(e){return!0}addEventListener(e,t,n,r){return e.addEventListener(t,n,r),()=>this.removeEventListener(e,t,n,r)}removeEventListener(e,t,n,r){return e.removeEventListener(t,n,r)}static ɵfac=function(t){return new(t||e)(na(xs))};static ɵprov=bi({token:e,factory:e.ɵfac})}return e})(),ny=new Di(``),ry=(()=>{class e{_zone;_plugins;_eventNameToPlugin=new Map;constructor(e,t){this._zone=t,e.forEach(e=>{e.manager=this});let n=e.filter(e=>!(e instanceof ty));this._plugins=n.slice().reverse();let r=e.find(e=>e instanceof ty);r&&this._plugins.push(r)}addEventListener(e,t,n,r){return this._findPluginFor(t).addEventListener(e,t,n,r)}getZone(){return this._zone}_findPluginFor(e){let t=this._eventNameToPlugin.get(e);if(t)return t;if(t=this._plugins.find(t=>t.supports(e)),!t)throw new fi(-5101,!1);return this._eventNameToPlugin.set(e,t),t}static ɵfac=function(t){return new(t||e)(na(ny),na(Ps))};static ɵprov=bi({token:e,factory:e.ɵfac})}return e})(),iy=`ng-app-id`;function ay(e){for(let t of e)t.remove()}function oy(e,t){let n=t.createElement(`style`);return n.textContent=e,n}function ire(e,t,n,r){let i=e.head?.querySelectorAll(`style[${iy}="${t}"],link[${iy}="${t}"]`);if(!i||i.length===0)return!1;for(let e of i)e.removeAttribute(iy),e instanceof HTMLLinkElement?r.set(e.href.slice(e.href.lastIndexOf(`/`)+1),{usage:0,elements:[e]}):e.textContent&&n.set(e.textContent,{usage:0,elements:[e]});return!0}function sy(e,t){let n=t.createElement(`link`);return n.setAttribute(`rel`,`stylesheet`),n.setAttribute(`href`,e),n}var cy=(()=>{class e{doc;appId;nonce;inline=new Map;external=new Map;hosts=new Set;constructor(e,t,n,r={}){this.doc=e,this.appId=t,this.nonce=n,ire(e,t,this.inline,this.external)&&this.hosts.add(e.head)}addStyles(e,t){for(let t of e)this.addUsage(t,this.inline,oy);t?.forEach(e=>this.addUsage(e,this.external,sy))}removeStyles(e,t){for(let t of e)this.removeUsage(t,this.inline);t?.forEach(e=>this.removeUsage(e,this.external))}addUsage(e,t,n){let r=t.get(e);r?r.usage++:t.set(e,{usage:1,elements:[...this.hosts].map(t=>this.addElement(t,n(e,this.doc)))})}removeUsage(e,t){let n=t.get(e);n&&(n.usage--,n.usage<=0&&(ay(n.elements),t.delete(e)))}ngOnDestroy(){for(let[,{elements:e}]of[...this.inline,...this.external])ay(e);this.hosts.clear()}addHost(e){if(!this.hosts.has(e)){this.hosts.add(e);for(let[t,{elements:n}]of this.inline)n.push(this.addElement(e,oy(t,this.doc)));for(let[t,{elements:n}]of this.external)n.push(this.addElement(e,sy(t,this.doc)))}}removeHost(e){this.hosts.delete(e);for(let t of[...this.inline.values(),...this.external.values()]){let n=[];for(let r of t.elements)r.parentNode===e?r.remove():n.push(r);t.elements=n}}addElement(e,t){return this.nonce&&t.setAttribute(`nonce`,this.nonce),e.appendChild(t)}static ɵfac=function(t){return new(t||e)(na(xs),na(Xs),na(ec,8),na($s))};static ɵprov=bi({token:e,factory:e.ɵfac})}return e})(),ly={svg:`http://www.w3.org/2000/svg`,xhtml:`http://www.w3.org/1999/xhtml`,xlink:`http://www.w3.org/1999/xlink`,xml:`http://www.w3.org/XML/1998/namespace`,xmlns:`http://www.w3.org/2000/xmlns/`,math:`http://www.w3.org/1998/Math/MathML`},uy=/%COMP%/g,dy=`%COMP%`,are=`_nghost-${dy}`,ore=`_ngcontent-${dy}`,sre=!0,cre=new Di(``,{factory:()=>sre}),lre=new Di(``);function ure(e){return ore.replace(uy,e)}function dre(e){return are.replace(uy,e)}function fy(e,t){return t.map(t=>t.replace(uy,e))}var py=(()=>{class e{eventManager;sharedStylesHost;appId;removeStylesOnCompDestroy;doc;ngZone;nonce;tracingService;rendererByCompId=new Map;defaultRenderer;cssVarNamespace;constructor(e,t,n,r,i,a,o=null,s=null,c=null){this.eventManager=e,this.sharedStylesHost=t,this.appId=n,this.removeStylesOnCompDestroy=r,this.doc=i,this.ngZone=a,this.nonce=o,this.tracingService=s,this.cssVarNamespace=c??``,this.defaultRenderer=new my(e,i,a,this.tracingService,this.cssVarNamespace)}createRenderer(e,t){if(!e||!t)return this.defaultRenderer;let n=this.getOrCreateRenderer(e,t);return n instanceof vy?n.applyToHost(e):n instanceof _y&&n.applyStyles(),n}getOrCreateRenderer(e,t){let n=this.rendererByCompId,r=n.get(t.id);if(!r){let i=this.doc,a=this.ngZone,o=this.eventManager,s=this.sharedStylesHost,c=this.removeStylesOnCompDestroy,l=this.tracingService;switch(t.encapsulation){case su.Emulated:r=new vy(o,s,t,this.appId,c,i,a,l,this.cssVarNamespace);break;case su.ShadowDom:return new gy(o,e,t,i,a,this.nonce,l,this.cssVarNamespace,s);case su.ExperimentalIsolatedShadowDom:return new gy(o,e,t,i,a,this.nonce,l,this.cssVarNamespace);default:r=new _y(o,s,t,c,i,a,l,this.cssVarNamespace)}n.set(t.id,r)}return r}ngOnDestroy(){this.rendererByCompId.clear()}componentReplaced(e){this.rendererByCompId.delete(e)}static ɵfac=function(t){return new(t||e)(na(ry),na(Bp),na(Xs),na(cre),na(xs),na(Ps),na(ec),na(td,8),na(lre,8))};static ɵprov=bi({token:e,factory:e.ɵfac})}return e})(),my=class{eventManager;doc;ngZone;tracingService;cssVarNamespace;data=Object.create(null);throwOnSyntheticProps=!0;constructor(e,t,n,r,i=``){this.eventManager=e,this.doc=t,this.ngZone=n,this.tracingService=r,this.cssVarNamespace=i}destroy(){}destroyNode=null;createElement(e,t){return t?this.doc.createElementNS(ly[t]||t,e):this.doc.createElement(e)}createComment(e){return this.doc.createComment(e)}createText(e){return this.doc.createTextNode(e)}appendChild(e,t){(hy(e)?e.content:e).appendChild(t)}insertBefore(e,t,n){if(e){let r=hy(e)?e.content:e;if(n!=null&&n.parentNode!==r)throw new fi(-5106,!1);r.insertBefore(t,n)}}removeChild(e,t){t.remove()}selectRootElement(e,t){let n=typeof e==`string`?this.doc.querySelector(e):e;if(!n)throw new fi(-5104,!1);return t||(n.textContent=``),n}parentNode(e){return e.parentNode}nextSibling(e){return e.nextSibling}setAttribute(e,t,n,r){if(r){t=r+`:`+t;let i=ly[r];i?e.setAttributeNS(i,t,n):e.setAttribute(t,n)}else e.setAttribute(t,n)}removeAttribute(e,t,n){if(n){let r=ly[n];r?e.removeAttributeNS(r,t):e.removeAttribute(`${n}:${t}`)}else e.removeAttribute(t)}addClass(e,t){e.classList.add(t)}removeClass(e,t){e.classList.remove(t)}setStyle(e,t,n,r){let i=t.startsWith(`--`);i&&(t=t.replace(`%NS%`,this.cssVarNamespace)),i||r&(Iu.DashCase|Iu.Important)?e.style.setProperty(t,n,r&Iu.Important?`important`:``):e.style[t]=n}removeStyle(e,t,n){let r=t.startsWith(`--`);r&&(t=t.replace(`%NS%`,this.cssVarNamespace)),r||n&Iu.DashCase?e.style.removeProperty(t):e.style[t]=``}setProperty(e,t,n){e!=null&&(e[t]=n)}setValue(e,t){e.nodeValue=t}listen(e,t,n,r){if(typeof e==`string`&&(e=wv().getGlobalEventTarget(this.doc,e),!e))throw new fi(-5102,!1);let i=this.decoratePreventDefault(n);return this.tracingService?.wrapEventListener&&(i=this.tracingService.wrapEventListener(e,t,i)),this.eventManager.addEventListener(e,t,i,r)}decoratePreventDefault(e){return t=>{if(t===`__ngUnwrap__`)return e;e(t)===!1&&t.preventDefault()}}};function hy(e){return e.tagName===`TEMPLATE`&&e.content!==void 0}var gy=class extends my{hostEl;sharedStylesHost;shadowRoot;constructor(e,t,n,r,i,a,o,s,c){super(e,r,i,o,s),this.hostEl=t,this.sharedStylesHost=c,this.shadowRoot=t.attachShadow({mode:`open`}),this.sharedStylesHost&&this.sharedStylesHost.addHost(this.shadowRoot);let l=n.styles;l=fy(n.id,l).map(e=>e.replace(/%NS%/g,s));for(let e of l){let t=document.createElement(`style`);a&&t.setAttribute(`nonce`,a),t.textContent=e,this.shadowRoot.appendChild(t)}let u=n.getExternalStyles?.();if(u)for(let e of u){let t=sy(e,r);a&&t.setAttribute(`nonce`,a),this.shadowRoot.appendChild(t)}}nodeOrShadowRoot(e){return e===this.hostEl?this.shadowRoot:e}appendChild(e,t){return super.appendChild(this.nodeOrShadowRoot(e),t)}insertBefore(e,t,n){return super.insertBefore(this.nodeOrShadowRoot(e),t,n)}removeChild(e,t){return super.removeChild(null,t)}parentNode(e){return this.nodeOrShadowRoot(super.parentNode(this.nodeOrShadowRoot(e)))}destroy(){this.sharedStylesHost&&this.sharedStylesHost.removeHost(this.shadowRoot)}},_y=class extends my{sharedStylesHost;removeStylesOnCompDestroy;styles;styleUrls;constructor(e,t,n,r,i,a,o,s,c){super(e,i,a,o,s),this.sharedStylesHost=t,this.removeStylesOnCompDestroy=r;let l=n.styles,u=c?fy(c,l):l;this.styles=u.map(e=>e.replace(/%NS%/g,s)),this.styleUrls=n.getExternalStyles?.(c)}applyStyles(){this.sharedStylesHost.addStyles(this.styles,this.styleUrls)}destroy(){this.removeStylesOnCompDestroy&&Uu.size===0&&this.sharedStylesHost.removeStyles(this.styles,this.styleUrls)}},vy=class extends _y{contentAttr;hostAttr;constructor(e,t,n,r,i,a,o,s,c){let l=r+`-`+n.id;super(e,t,n,i,a,o,s,c,l),this.contentAttr=ure(l),this.hostAttr=dre(l)}applyToHost(e){this.applyStyles(),this.setAttribute(e,this.hostAttr,``)}createElement(e,t){let n=super.createElement(e,t);return super.setAttribute(n,this.contentAttr,``),n}},fre=class e extends kne{supportsDOMEvents=!0;static makeCurrent(){One(new e)}onAndCancel(e,t,n,r){return e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}}dispatchEvent(e,t){e.dispatchEvent(t)}remove(e){e.remove()}createElement(e,t){return t||=this.getDefaultDocument(),t.createElement(e)}createHtmlDocument(){return document.implementation.createHTMLDocument(`fakeTitle`)}getDefaultDocument(){return document}isElementNode(e){return e.nodeType===Node.ELEMENT_NODE}isShadowRoot(e){return e instanceof DocumentFragment}getGlobalEventTarget(e,t){return t===`window`?window:t===`document`?e:t===`body`?e.body:null}getBaseHref(e){let t=pre();return t==null?null:mre(t)}resetBaseElement(){yy=null}getUserAgent(){return window.navigator.userAgent}getCookie(e){return nre(document.cookie,e)}},yy=null;function pre(){return yy||=document.head.querySelector(`base`),yy?yy.getAttribute(`href`):null}function mre(e){return new URL(e,document.baseURI).pathname}var by=[`alt`,`control`,`meta`,`shift`],hre={"\b":`Backspace`,"	":`Tab`,"":`Delete`,"\x1B":`Escape`,Del:`Delete`,Esc:`Escape`,Left:`ArrowLeft`,Right:`ArrowRight`,Up:`ArrowUp`,Down:`ArrowDown`,Menu:`ContextMenu`,Scroll:`ScrollLock`,Win:`OS`},gre={alt:e=>e.altKey,control:e=>e.ctrlKey,meta:e=>e.metaKey,shift:e=>e.shiftKey},_re=(()=>{class e extends ey{constructor(e){super(e)}supports(t){return e.parseEventName(t)!=null}addEventListener(t,n,r,i){let a=e.parseEventName(n),o=e.eventCallback(a.fullKey,r,this.manager.getZone());return this.manager.getZone().runOutsideAngular(()=>wv().onAndCancel(t,a.domEventName,o,i))}static parseEventName(t){let n=t.toLowerCase().split(`.`),r=n.shift();if(n.length===0||r!==`keydown`&&r!==`keyup`)return null;let i=e._normalizeKey(n.pop()),a=``,o=n.indexOf(`code`);if(o>-1&&(n.splice(o,1),a=`code.`),by.forEach(e=>{let t=n.indexOf(e);t>-1&&(n.splice(t,1),a+=e+`.`)}),a+=i,n.length!=0||i.length===0)return null;let s={};return s.domEventName=r,s.fullKey=a,s}static matchEventFullKeyCode(e,t){let n=hre[e.key]||e.key,r=``;return t.indexOf(`code.`)>-1&&(n=e.code,r=`code.`),n==null||!n?!1:(n=n.toLowerCase(),n===` `?n=`space`:n===`.`&&(n=`dot`),by.forEach(t=>{if(t!==n){let n=gre[t];n(e)&&(r+=t+`.`)}}),r+=n,r===t)}static eventCallback(t,n,r){return i=>{e.matchEventFullKeyCode(i,t)&&r.runGuarded(()=>n(i))}}static _normalizeKey(e){return e===`esc`?`escape`:e}static ɵfac=function(t){return new(t||e)(na(xs))};static ɵprov=bi({token:e,factory:e.ɵfac})}return e})();async function vre(e,t,n){return Tne({rootComponent:e,...yre(t,n)})}function yre(e,t){return{platformRef:t?.platformRef,appProviders:[...wre,...e?.providers??[]],platformProviders:Cre}}function bre(){fre.makeCurrent()}function xre(){return new Ks}function Sre(){return Yl(document),document}var Cre=[{provide:$s,useValue:rre},{provide:Qs,useValue:bre,multi:!0},{provide:xs,useFactory:Sre}],wre=[{provide:Ia,useValue:`root`},{provide:Ks,useFactory:xre},{provide:ny,useClass:ty,multi:!0},{provide:ny,useClass:_re,multi:!0},py,{provide:Bp,useClass:cy},{provide:cy,useExisting:Bp},ry,{provide:op,useExisting:py},[]];function xy(e,t){let n=`\x1B[${e}m`,r=`\x1B[${t}m`;return((e,...t)=>{if(Array.isArray(e)&&`raw`in e){let i=e,a=``;for(let e=0;e<i.length;e++)a+=i[e],e<t.length&&(a+=String(t[e]));return`${n}${a}${r}`}return`${n}${String(e)}${r}`})}var Tre={blue:xy(34,39),cyan:xy(36,39),gray:xy(90,39),green:xy(32,39),red:xy(31,39),yellow:xy(33,39),bold:xy(1,22),dim:xy(2,22),reset:xy(0,0),underline:xy(4,24)};function Sy(e,...t){return typeof e==`function`?e(...t):e}var Ere=Error.captureStackTrace,Dre=class e extends Error{name;code;docs;fix;sources;data;get why(){return this.message}constructor(t,n=e){super(t.why,{cause:t.cause}),this.code=this.name=t.code,this.fix=t.fix,this.docs=t.docs,this.sources=t.sources,this.data=t.data,Ere?.(this,n)}toJSON(){return{name:this.name,why:this.why,fix:this.fix,docs:this.docs,sources:this.sources,cause:this.cause,data:this.data,stack:this.stack}}};function Ore(e,t){return typeof e==`string`?`${e}/${t.toLowerCase()}`:e?.(t)}function kre(e){let t=e.reporters??[],n={},{docsBase:r}=e;for(let i of Object.keys(e.codes)){let a=e.codes[i],o=a.docs===!1?void 0:a.docs||Ore(r,i),s=(e={},n={})=>{let r=new Dre({code:i,why:Sy(a.why,e),fix:Sy(a.fix,e),docs:o,cause:e.cause,sources:e.sources,data:Sy(a.data,e)},s);for(let e of t)e(r,n);return r};n[i]=s}return n}function Are(e){return t=>{let n=`${e.bold(e.red(`[${t.name}]`))} ${t.message}`,r=[];return t.fix&&r.push(`${e.dim(`fix:`)} ${t.fix}`),t.sources?.length&&r.push(`${e.dim(`sources:`)} ${t.sources.join(`, `)}`),t.docs&&r.push(`${e.dim(`see:`)} ${e.cyan(t.docs)}`),r.length===0?n:[n,...r.map((t,n)=>`${e.dim(n<r.length-1?`├▶`:`╰▶`)} ${t}`)].join(`
-`)}}var Cy={bus:{agentManifestChanged:`agent:manifest:changed`,agentToolRegistered:`agent:tool:registered`,agentToolUnregistered:`agent:tool:unregistered`,agentResourceRegistered:`agent:resource:registered`,agentResourceUnregistered:`agent:resource:unregistered`},client:{isTrustedUpdated:`rpc:is-trusted:updated`,error:`rpc:error`,connectionStatus:`connection:status`,connectionError:`connection:error`},broadcast:{authRevoked:`devframe:auth:revoked`,cacheInvalidate:`devframe:rpc:cache:invalidate`,clientStateUpdated:`devframe:rpc:client-state:updated`,clientStatePatch:`devframe:rpc:client-state:patch`,streamingChunk:`devframe:streaming:chunk`,streamingEnd:`devframe:streaming:end`,streamingUploadCancel:`devframe:streaming:upload-cancel`},inPageChannel:{panelStateUpdated:`devframe:in-page:panel-state:updated`,panelStatePatch:`devframe:in-page:panel-state:patch`},postMessage:{remoteAssetsError:`devframe:remote-assets-error`,inPageChannel:`devframe:in-page-channel`}},jre=Are(Tre);function Mre(e,{method:t=`warn`}={}){console[t](jre(e))}function Nre(e){return kre({...e,reporters:[Mre,...e.reporters??[]]})}function Pre(){let e,t;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}var Fre=Math.random.bind(Math),Ire=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function Lre(e=21){let t=``,n=e;for(;n--;)t+=Ire[Fre()*64|0];return t}var Rre=6e4,wy=e=>e,zre=wy,{clearTimeout:Ty,setTimeout:Bre}=globalThis;function Vre(e,t){let{post:n,on:r,off:i=()=>{},eventNames:a=[],serialize:o=wy,deserialize:s=zre,resolver:c,bind:l=`rpc`,timeout:u=Rre,proxify:d=!0}=t,f=!1,p=new Map,m,ee;async function h(e,r,i,a){if(f)throw Error(`[birpc] rpc is closed, cannot call "${e}"`);let s={m:e,a:r,t:`q`};a&&(s.o=!0);let c=async e=>n(o(e));if(i){await c(s);return}if(m)try{await m}finally{m=void 0}let{promise:l,resolve:d,reject:h}=Pre(),g=Lre();s.i=g;let te;async function ne(n=s){return u>=0&&(te=Bre(()=>{try{if(t.onTimeoutError?.call(ee,e,r)!==!0)throw Error(`[birpc] timeout on calling "${e}"`)}catch(e){h(e)}p.delete(g)},u),typeof te==`object`&&(te=te.unref?.())),p.set(g,{resolve:d,reject:h,timeoutId:te,method:e}),await c(n),l}try{t.onRequest?await t.onRequest.call(ee,s,ne,d):await ne()}catch(e){if(t.onGeneralError?.call(ee,e)!==!0)throw e;return}finally{Ty(te),p.delete(g)}return l}let g={$call:(e,...t)=>h(e,t,!1),$callOptional:(e,...t)=>h(e,t,!1,!0),$callEvent:(e,...t)=>h(e,t,!0),$callRaw:e=>h(e.method,e.args,e.event,e.optional),$rejectPendingCalls:ne,get $closed(){return f},get $meta(){return t.meta},$close:te,$functions:e};ee=d?new Proxy({},{get(t,n){if(Object.hasOwn(g,n))return g[n];if(n===`then`&&!a.includes(`then`)&&!(`then`in e))return;let r=(...e)=>h(n,e,!0);if(a.includes(n))return r.asEvent=r,r;let i=(...e)=>h(n,e,!1);return i.asEvent=r,i}}):g;function te(e){f=!0,p.forEach(({reject:t,method:n})=>{let r=Error(`[birpc] rpc is closed, cannot call "${n}"`);if(e)return e.cause??=r,t(e);t(r)}),p.clear(),i(re)}function ne(e){let t=Array.from(p.values()).map(({method:t,reject:n})=>e?e({method:t,reject:n}):n(Error(`[birpc]: rejected pending call "${t}".`)));return p.clear(),t}async function re(r,...i){let a;try{a=s(r)}catch(e){if(t.onGeneralError?.call(ee,e)!==!0)throw e;return}if(a.t===`q`){let{m:r,a:s,o:u}=a,d,f,p=await(c?c.call(ee,r,e[r]):e[r]);if(u&&(p||=()=>void 0),!p)f=Error(`[birpc] function "${r}" not found`);else try{d=await p.apply(l===`rpc`?ee:e,s)}catch(e){f=e}if(a.i){if(f&&t.onFunctionError&&t.onFunctionError.call(ee,f,r,s)===!0)return;if(!f)try{await n(o({t:`s`,i:a.i,r:d}),...i);return}catch(e){if(f=e,t.onGeneralError?.call(ee,e,r,s)!==!0)throw e}try{await n(o({t:`s`,i:a.i,e:f}),...i)}catch(e){if(t.onGeneralError?.call(ee,e,r,s)!==!0)throw e}}}else{let{i:e,r:t,e:n}=a,r=p.get(e);r&&(Ty(r.timeoutId),n?r.reject(n):r.resolve(t)),p.delete(e)}}return m=r(re),ee}function Ey(e,t){return t.safety?t.safety:e===`static`||e===`query`||e==null?`read`:`action`}var Dy=Object.freeze({type:`object`,additionalProperties:!0});function Oy(e){let t=e[`~standard`];if(t.jsonSchema)try{return t.jsonSchema.input({target:`draft-2020-12`})}catch{return Dy}return Dy}function ky(e){if(!e||e.length===0)return{type:`object`,properties:{}};let t={},n=[];for(let r=0;r<e.length;r++){let i=`arg${r}`;t[i]=Oy(e[r]),n.push(i)}return{type:`object`,properties:t,required:n,additionalProperties:!1}}function Ay(e,t){if(Array.isArray(e))return e;if(e==null)return[];if(typeof e!=`object`)return;let n=e;if(t!=null)return Array.from({length:t},(e,t)=>n[`arg${t}`]);if(`arg0`in n){let e=[];for(;`arg${e.length}`in n;)e.push(n[`arg${e.length}`]);return e}return Object.keys(n).length===0?[]:void 0}function jy(e,t){return Ay(e,t)??[e]}function My(e){return typeof e==`string`?`'${e}'`:new Iy().serialize(e)}var Ny=` _-,;:!?.'"()[]{}@*/\\&#%\`^+<=>|~$0123456789abcdefghijklmnopqrstuvwxyz`,Py=(function(){let e=new Uint8Array(128);for(let t=0;t<69;t++)e[Ny.charCodeAt(t)]=t+1;for(let t=65;t<=90;t++)e[t]=e[t+32];return e})();function Fy(e,t){if(e===t)return 0;let n=Math.min(e.length,t.length),r=0;for(let i=0;i<n;i++){let n=e.charCodeAt(i),a=t.charCodeAt(i);if(n===a)continue;let o=n<128&&Py[n]?Py[n]:n+128,s=a<128&&Py[a]?Py[a]:a+128;if(o!==s)return o<s?-1:1;r===0&&(r=n>a?-1:1)}return e.length===t.length?r:e.length<t.length?-1:1}var Iy=(function(){class e{#e=new Map;compare(e,t){let n=typeof e,r=typeof t;return n===`string`&&r===`string`?Fy(e,t):n===`number`&&r===`number`?e-t:Fy(this.serialize(e,!0),this.serialize(t,!0))}serialize(e,t){if(e===null)return`null`;switch(typeof e){case`string`:return t?e:`'${e}'`;case`bigint`:return`${e}n`;case`object`:return this.$object(e);case`function`:return this.$function(e)}return String(e)}serializeObject(e){let t=Object.prototype.toString.call(e);if(t!==`[object Object]`)return this.serializeBuiltInType(t.length<10?`unknown:${t}`:t.slice(8,-1),e);let n=e.constructor,r=n===Object||n===void 0?``:n.name;if(r!==``&&globalThis[r]===n)return this.serializeBuiltInType(r,e);if(`toJSON`in e&&typeof e.toJSON==`function`){let t=e.toJSON();return r+(typeof t==`object`&&t?this.$object(t):`(${this.serialize(t)})`)}let i=Object.keys(e).sort(Fy),a=`${r}{`;for(let t=0;t<i.length;t++){let n=i[t];a+=`${n}:${this.serialize(e[n])}`,t<i.length-1&&(a+=`,`)}return a+`}`}serializeBuiltInType(e,t){let n=this[`$`+e];if(n)return n.call(this,t);if(typeof t.entries==`function`)return this.serializeObjectEntries(e,t.entries());throw Error(`Cannot serialize ${e}`)}serializeObjectEntries(e,t){let n=Array.from(t).sort((e,t)=>this.compare(e[0],t[0])),r=`${e}{`;for(let e=0;e<n.length;e++){let[t,i]=n[e];r+=`${this.serialize(t,!0)}:${this.serialize(i)}`,e<n.length-1&&(r+=`,`)}return r+`}`}$object(e){let t=this.#e.get(e);return t===void 0&&(this.#e.set(e,`#${this.#e.size}`),t=this.serializeObject(e),this.#e.set(e,t)),t}$function(e){let t=Function.prototype.toString.call(e);return t.slice(-15)===`[native code] }`?`${e.name||``}()[native]`:`${e.name}(${e.length})${t.replace(/\s*\n\s*/g,``)}`}$Array(e){let t=`[`;for(let n=0;n<e.length;n++)t+=this.serialize(e[n]),n<e.length-1&&(t+=`,`);return t+`]`}$Date(e){try{return`Date(${e.toISOString()})`}catch{return`Date(null)`}}$ArrayBuffer(e){return`ArrayBuffer[${new Uint8Array(e).join(`,`)}]`}$Set(e){return`Set${this.$Array(Array.from(e).sort((e,t)=>this.compare(e,t)))}`}$Map(e){return this.serializeObjectEntries(`Map`,e.entries())}}for(let t of[`Error`,`RegExp`,`URL`])e.prototype[`$`+t]=function(e){return`${t}(${e})`};for(let t of[`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float32Array`,`Float64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`,`)}]`};for(let t of[`BigInt64Array`,`BigUint64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`n,`)}${e.length>0?`n`:``}]`};return e})(),Ly=[1779033703,-1150833019,1013904242,-1521486534,1359893119,-1694144372,528734635,1541459225],Ry=[1116352408,1899447441,-1245643825,-373957723,961987163,1508970993,-1841331548,-1424204075,-670586216,310598401,607225278,1426881987,1925078388,-2132889090,-1680079193,-1046744716,-459576895,-272742522,264347078,604807628,770255983,1249150122,1555081692,1996064986,-1740746414,-1473132947,-1341970488,-1084653625,-958395405,-710438585,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,-2117940946,-1838011259,-1564481375,-1474664885,-1035236496,-949202525,-778901479,-694614492,-200395387,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,-2067236844,-1933114872,-1866530822,-1538233109,-1090935817,-965641998],zy=`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_`,By=[],Vy=class{_data=new Hy;_hash=new Hy([...Ly]);_nDataBytes=0;_minBufferSize=0;finalize(e){e&&this._append(e);let t=this._nDataBytes*8,n=this._data.sigBytes*8;return this._data.words[n>>>5]|=128<<24-n%32,this._data.words[(n+64>>>9<<4)+14]=Math.floor(t/4294967296),this._data.words[(n+64>>>9<<4)+15]=t,this._data.sigBytes=this._data.words.length*4,this._process(),this._hash}_doProcessBlock(e,t){let n=this._hash.words,r=n[0],i=n[1],a=n[2],o=n[3],s=n[4],c=n[5],l=n[6],u=n[7];for(let n=0;n<64;n++){if(n<16)By[n]=e[t+n]|0;else{let e=By[n-15],t=(e<<25|e>>>7)^(e<<14|e>>>18)^e>>>3,r=By[n-2],i=(r<<15|r>>>17)^(r<<13|r>>>19)^r>>>10;By[n]=t+By[n-7]+i+By[n-16]}let d=s&c^~s&l,f=r&i^r&a^i&a,p=(r<<30|r>>>2)^(r<<19|r>>>13)^(r<<10|r>>>22),m=(s<<26|s>>>6)^(s<<21|s>>>11)^(s<<7|s>>>25),ee=u+m+d+Ry[n]+By[n],h=p+f;u=l,l=c,c=s,s=o+ee|0,o=a,a=i,i=r,r=ee+h|0}n[0]=n[0]+r|0,n[1]=n[1]+i|0,n[2]=n[2]+a|0,n[3]=n[3]+o|0,n[4]=n[4]+s|0,n[5]=n[5]+c|0,n[6]=n[6]+l|0,n[7]=n[7]+u|0}_append(e){typeof e==`string`&&(e=Hy.fromUtf8(e)),this._data.concat(e),this._nDataBytes+=e.sigBytes}_process(e){let t,n=this._data.sigBytes/64;n=e?Math.ceil(n):Math.max((n|0)-this._minBufferSize,0);let r=n*16,i=Math.min(r*4,this._data.sigBytes);if(r){for(let e=0;e<r;e+=16)this._doProcessBlock(this._data.words,e);t=this._data.words.splice(0,r),this._data.sigBytes-=i}return new Hy(t,i)}},Hy=class e{words;sigBytes;constructor(e,t){e=this.words=e||[],this.sigBytes=t===void 0?e.length*4:t}static fromUtf8(t){let n=unescape(encodeURIComponent(t)),r=n.length,i=[];for(let e=0;e<r;e++)i[e>>>2]|=(n.charCodeAt(e)&255)<<24-e%4*8;return new e(i,r)}toBase64(){let e=[];for(let t=0;t<this.sigBytes;t+=3){let n=this.words[t>>>2]>>>24-t%4*8&255,r=this.words[t+1>>>2]>>>24-(t+1)%4*8&255,i=this.words[t+2>>>2]>>>24-(t+2)%4*8&255,a=n<<16|r<<8|i;for(let n=0;n<4&&t*8+n*6<this.sigBytes*8;n++)e.push(zy.charAt(a>>>6*(3-n)&63))}return e.join(``)}concat(e){if(this.words[this.sigBytes>>>2]&=4294967295<<32-this.sigBytes%4*8,this.words.length=Math.ceil(this.sigBytes/4),this.sigBytes%4)for(let t=0;t<e.sigBytes;t++){let n=e.words[t>>>2]>>>24-t%4*8&255;this.words[this.sigBytes+t>>>2]|=n<<24-(this.sigBytes+t)%4*8}else for(let t=0;t<e.sigBytes;t+=4)this.words[this.sigBytes+t>>>2]=e.words[t>>>2];this.sigBytes+=e.sigBytes}};function Uy(e){return new Vy().finalize(e).toBase64()}function Wy(e){return Uy(My(e))}function Gy(e){return Wy(e)}function Ky(){let e={};function t(t,...n){let r=e[t]||[];for(let e=0,t=r.length;e<t;e++){let t=r[e];t&&t(...n)}}function n(n,...r){t(n,...r),delete e[n]}function r(t,n){return(e[t]||=[]).push(n),()=>{e[t]=e[t]?.filter(e=>n!==e)}}function i(e,t){let n=r(e,((...e)=>(n(),t(...e))));return n}return{_listeners:e,emit:t,emitOnce:n,on:r,once:i}}var qy=/^[\w+.-]{2,}:\/\//;function Jy(e){return e.endsWith(`/`)?e:`${e}/`}function Yy(e){return(e.endsWith(`/`)?e.slice(0,-1):e)||`/`}function Xy(e,...t){let n=e;for(let e of t)e&&e!==`/`&&(n=n?Jy(n)+e.replace(/^\.?\//,``):e);return n}function Zy(e,t){if(!t||t===`/`||qy.test(e))return e;let n=Yy(t);return e.startsWith(n)?e:Xy(n,e)}function Qy(e,t){let n=e.match(qy);return t+(n?e.slice(n[0].length):e)}var $y=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function eb(e=21){let t=``,n=e;for(;n--;)t+=$y[Math.random()*64|0];return t}var tb=Symbol.for(`immer-nothing`),nb=Symbol.for(`immer-draftable`),rb=Symbol.for(`immer-state`),ib=[function(e){return`The plugin for '${e}' has not been loaded into Immer. To enable the plugin, import and call \`enable${e}()\` when initializing your application.`},function(e){return`produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${e}'`},`This object has been frozen and should not be mutated`,function(e){return`Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? `+e},`An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.`,`Immer forbids circular references`,"The first or second argument to `produce` must be a function","The third argument to `produce` must be a function or undefined","First argument to `createDraft` must be a plain object, an array, or an immerable object","First argument to `finishDraft` must be a draft returned by `createDraft`",function(e){return`'current' expects a draft, got: ${e}`},`Object.defineProperty() cannot be used on an Immer draft`,`Object.setPrototypeOf() cannot be used on an Immer draft`,`Immer only supports deleting array indices`,`Immer only supports setting array indices and the 'length' property`,function(e){return`'original' expects a draft, got: ${e}`}];function ab(e,...t){{let n=ib[e],r=kb(n)?n.apply(null,t):n;throw Error(`[Immer] ${r}`)}}var ob=Object,sb=ob.getPrototypeOf,cb=`constructor`,lb=`prototype`,ub=`configurable`,db=`enumerable`,fb=`writable`,pb=`value`,mb=e=>!!e&&!!e[rb];function hb(e){return e?vb(e)||Tb(e)||!!e[nb]||!!e[cb]?.[nb]||Eb(e)||Db(e):!1}var gb=ob[lb][cb].toString(),_b=new WeakMap;function vb(e){if(!e||!Ob(e))return!1;let t=sb(e);if(t===null||t===ob[lb])return!0;let n=ob.hasOwnProperty.call(t,cb)&&t[cb];if(n===Object)return!0;if(!kb(n))return!1;let r=_b.get(n);return r===void 0&&(r=Function.toString.call(n),_b.set(n,r)),r===gb}function yb(e,t,n=!0){bb(e)===0?(n?Reflect.ownKeys(e):ob.keys(e)).forEach(n=>{t(n,e[n],e)}):e.forEach((n,r)=>t(r,n,e))}function bb(e){let t=e[rb];return t?t.type_:Tb(e)?1:Eb(e)?2:Db(e)?3:0}var xb=(e,t,n=bb(e))=>n===2?e.has(t):ob[lb].hasOwnProperty.call(e,t),Sb=(e,t,n=bb(e))=>n===2?e.get(t):e[t],Cb=(e,t,n,r=bb(e))=>{r===2?e.set(t,n):r===3?e.add(n):e[t]=n};function wb(e,t){return e===t?e!==0||1/e==1/t:e!==e&&t!==t}var Tb=Array.isArray,Eb=e=>e instanceof Map,Db=e=>e instanceof Set,Ob=e=>typeof e==`object`,kb=e=>typeof e==`function`,Ab=e=>typeof e==`boolean`;function jb(e){let t=+e;return Number.isInteger(t)&&String(t)===e}var Mb=e=>Ob(e)?e?.[rb]:null,Nb=e=>e.copy_||e.base_,Pb=e=>e.modified_?e.copy_:e.base_;function Fb(e,t){if(Eb(e))return new Map(e);if(Db(e))return new Set(e);if(Tb(e))return Array[lb].slice.call(e);let n=vb(e);if(t===!0||t===`class_only`&&!n){let t=ob.getOwnPropertyDescriptors(e);delete t[rb];let n=Reflect.ownKeys(t);for(let r=0;r<n.length;r++){let i=n[r],a=t[i];a[fb]===!1&&(a[fb]=!0,a[ub]=!0),(a.get||a.set)&&(t[i]={[ub]:!0,[fb]:!0,[db]:a[db],[pb]:e[i]})}return ob.create(sb(e),t)}{let t=sb(e);if(t!==null&&n)return{...e};let r=ob.create(t);return ob.assign(r,e)}}function Ib(e,t=!1){return zb(e)||mb(e)||!hb(e)?e:(bb(e)>1&&ob.defineProperties(e,{set:Rb,add:Rb,clear:Rb,delete:Rb}),ob.freeze(e),t&&yb(e,(e,t)=>{Ib(t,!0)},!1),e)}function Lb(){ab(2)}var Rb={[pb]:Lb};function zb(e){return e===null||!Ob(e)||ob.isFrozen(e)}var Bb=`MapSet`,Vb=`Patches`,Hb=`ArrayMethods`,Ub={};function Wb(e){let t=Ub[e];return t||ab(0,e),t}var Gb=e=>!!Ub[e];function Kb(e,t){Ub[e]||(Ub[e]=t)}var qb,Jb=()=>qb,Yb=(e,t)=>({drafts_:[],parent_:e,immer_:t,canAutoFreeze_:!0,unfinalizedDrafts_:0,handledSet_:new Set,processedForPatches_:new Set,mapSetPlugin_:Gb(Bb)?Wb(Bb):void 0,arrayMethodsPlugin_:Gb(Hb)?Wb(Hb):void 0});function Xb(e,t){t&&(e.patchPlugin_=Wb(Vb),e.patches_=[],e.inversePatches_=[],e.patchListener_=t)}function Zb(e){Qb(e),e.drafts_.forEach(ex),e.drafts_=null}function Qb(e){e===qb&&(qb=e.parent_)}var $b=e=>qb=Yb(qb,e);function ex(e){let t=e[rb];t.type_===0||t.type_===1?t.revoke_():t.revoked_=!0}function tx(e,t){t.unfinalizedDrafts_=t.drafts_.length;let n=t.drafts_[0];if(e!==void 0&&e!==n){n[rb].modified_&&(Zb(t),ab(4)),hb(e)&&(e=nx(t,e));let{patchPlugin_:r}=t;r&&r.generateReplacementPatches_(n[rb].base_,e,t)}else e=nx(t,n);return rx(t,e,!0),Zb(t),t.patches_&&t.patchListener_(t.patches_,t.inversePatches_),e===tb?void 0:e}function nx(e,t){if(zb(t))return t;let n=t[rb];if(!n)return dx(t,e.handledSet_,e);if(!ax(n,e))return t;if(!n.modified_)return n.base_;if(!n.finalized_){let{callbacks_:t}=n;if(t)for(;t.length>0;)t.pop()(e);lx(n,e)}return n.copy_}function rx(e,t,n=!1){!e.parent_&&e.immer_.autoFreeze_&&e.canAutoFreeze_&&Ib(t,n)}function ix(e){e.finalized_=!0,e.scope_.unfinalizedDrafts_--}var ax=(e,t)=>e.scope_===t,ox=[];function sx(e,t,n,r){let i=Nb(e),a=e.type_;if(r!==void 0&&Sb(i,r,a)===t){Cb(i,r,n,a);return}if(!e.draftLocations_){let t=e.draftLocations_=new Map;yb(i,(e,n)=>{if(mb(n)){let r=t.get(n)||[];r.push(e),t.set(n,r)}})}let o=e.draftLocations_.get(t)??ox;for(let e of o)Cb(i,e,n,a)}function cx(e,t,n){e.callbacks_.push(function(r){let i=t;if(!i||!ax(i,r))return;r.mapSetPlugin_?.fixSetContents(i);let a=Pb(i);sx(e,i.draft_??i,a,n),lx(i,r)})}function lx(e,t){if(e.modified_&&!e.finalized_&&(e.type_===3||e.type_===1&&e.allIndicesReassigned_||(e.assigned_?.size??0)>0)){let{patchPlugin_:n}=t;if(n){let r=n.getPath(e);r&&n.generatePatches_(e,r,t)}ix(e)}}function ux(e,t,n){let{scope_:r}=e;if(mb(n)){let i=n[rb];ax(i,r)&&i.callbacks_.push(function(){bx(e),sx(e,n,Pb(i),t)})}else hb(n)&&e.callbacks_.push(function(){let i=Nb(e);e.type_===3?i.has(n)&&dx(n,r.handledSet_,r):Sb(i,t,e.type_)===n&&r.drafts_.length>1&&(e.assigned_.get(t)??!1)===!0&&e.copy_&&dx(Sb(e.copy_,t,e.type_),r.handledSet_,r)})}function dx(e,t,n){return!n.immer_.autoFreeze_&&n.unfinalizedDrafts_<1||mb(e)||t.has(e)||!hb(e)||zb(e)?e:(t.add(e),yb(e,(r,i)=>{if(mb(i)){let t=i[rb];ax(t,n)&&(Cb(e,r,Pb(t),e.type_),ix(t))}else hb(i)&&dx(i,t,n)}),e)}function fx(e,t){let n=Tb(e),r={type_:+!!n,scope_:t?t.scope_:Jb(),modified_:!1,finalized_:!1,assigned_:void 0,parent_:t,base_:e,draft_:null,copy_:null,revoke_:null,isManual_:!1,callbacks_:void 0},i=r,a=px;n&&(i=[r],a=mx);let{revoke:o,proxy:s}=Proxy.revocable(i,a);return r.draft_=s,r.revoke_=o,[s,r]}var px={get(e,t){if(t===rb)return e;let n=e.scope_.arrayMethodsPlugin_,r=e.type_===1&&typeof t==`string`;if(r&&n?.isArrayOperationMethod(t))return n.createMethodInterceptor(e,t);let i=Nb(e);if(!xb(i,t,e.type_))return _x(e,i,t);let a=i[t];if(e.finalized_||!hb(a)||r&&e.operationMethod&&n?.isMutatingArrayMethod(e.operationMethod)&&jb(t))return a;if(a===hx(e.base_,t)||gx(e,t,a)){bx(e);let n=e.type_===1?+t:t,r=Sx(e.scope_,a,e,n);return e.copy_[n]=r}return a},has(e,t){return t in Nb(e)},ownKeys(e){return Reflect.ownKeys(Nb(e))},set(e,t,n){let r=vx(Nb(e),t);if(r?.set)return r.set.call(e.draft_,n),!0;if(!e.modified_){let r=hx(Nb(e),t),i=r?.[rb];if(i&&i.base_===n)return e.copy_[t]=n,e.assigned_.delete(t),!0;if(wb(n,r)&&(n!==void 0||xb(e.base_,t,e.type_)))return!0;bx(e),yx(e)}return e.copy_[t]===n&&(n!==void 0||xb(e.copy_,t,e.type_))||Number.isNaN(n)&&Number.isNaN(e.copy_[t])?!0:(e.copy_[t]=n,e.assigned_.set(t,!0),ux(e,t,n),!0)},deleteProperty(e,t){return bx(e),hx(e.base_,t)!==void 0||t in e.base_?(e.assigned_.set(t,!1),yx(e)):e.assigned_.delete(t),e.copy_&&delete e.copy_[t],!0},getOwnPropertyDescriptor(e,t){let n=Nb(e),r=Reflect.getOwnPropertyDescriptor(n,t);return r&&{[fb]:!0,[ub]:e.type_!==1||t!==`length`,[db]:r[db],[pb]:n[t]}},defineProperty(){ab(11)},getPrototypeOf(e){return sb(e.base_)},setPrototypeOf(){ab(12)}},mx={};for(let e in px){let t=px[e];mx[e]=function(){let e=arguments;return e[0]=e[0][0],t.apply(this,e)}}mx.deleteProperty=function(e,t){return isNaN(parseInt(t))&&ab(13),mx.set.call(this,e,t,void 0)},mx.set=function(e,t,n){return t!==`length`&&isNaN(parseInt(t))&&ab(14),px.set.call(this,e[0],t,n,e[0])};function hx(e,t){let n=e[rb];return(n?Nb(n):e)[t]}function gx(e,t,n){return e.type_!==1||!e.allIndicesReassigned_||e.assigned_?.get(t)||!hb(n)||n[rb]?!1:e.baseRefs_.has(n)}function _x(e,t,n){let r=vx(t,n);return r?pb in r?r[pb]:r.get?.call(e.draft_):void 0}function vx(e,t){if(!(t in e))return;let n=sb(e);for(;n;){let e=Object.getOwnPropertyDescriptor(n,t);if(e)return e;n=sb(n)}}function yx(e){e.modified_||(e.modified_=!0,e.parent_&&yx(e.parent_))}function bx(e){e.copy_||=(e.assigned_=new Map,Fb(e.base_,e.scope_.immer_.useStrictShallowCopy_))}var xx=class{constructor(e){this.autoFreeze_=!0,this.useStrictShallowCopy_=!1,this.useStrictIteration_=!1,this.produce=(e,t,n)=>{if(kb(e)&&!kb(t)){let n=t;t=e;let r=this;return function(e=n,...i){return r.produce(e,e=>t.call(this,e,...i))}}kb(t)||ab(6),n!==void 0&&!kb(n)&&ab(7);let r;if(hb(e)){let i=$b(this),a=Sx(i,e,void 0),o=!0;try{r=t(a),o=!1}finally{o?Zb(i):Qb(i)}return Xb(i,n),tx(r,i)}if(!e||!Ob(e)){if(r=t(e),r===void 0&&(r=e),r===tb&&(r=void 0),this.autoFreeze_&&Ib(r,!0),n){let t=[],i=[];Wb(Vb).generateReplacementPatches_(e,r,{patches_:t,inversePatches_:i}),n(t,i)}return r}ab(1,e)},this.produceWithPatches=(e,t)=>{if(kb(e))return(t,...n)=>this.produceWithPatches(t,t=>e(t,...n));let n,r;return[this.produce(e,t,(e,t)=>{n=e,r=t}),n,r]},Ab(e?.autoFreeze)&&this.setAutoFreeze(e.autoFreeze),Ab(e?.useStrictShallowCopy)&&this.setUseStrictShallowCopy(e.useStrictShallowCopy),Ab(e?.useStrictIteration)&&this.setUseStrictIteration(e.useStrictIteration)}createDraft(e){hb(e)||ab(8),mb(e)&&(e=Cx(e));let t=$b(this),n=Sx(t,e,void 0);return n[rb].isManual_=!0,Qb(t),n}finishDraft(e,t){let n=e&&e[rb];(!n||!n.isManual_)&&ab(9);let{scope_:r}=n;return Xb(r,t),tx(void 0,r)}setAutoFreeze(e){this.autoFreeze_=e}setUseStrictShallowCopy(e){this.useStrictShallowCopy_=e}setUseStrictIteration(e){this.useStrictIteration_=e}shouldUseStrictIteration(){return this.useStrictIteration_}applyPatches(e,t){let n;for(n=t.length-1;n>=0;n--){let r=t[n];if(r.path.length===0&&r.op===`replace`){e=r.value;break}}n>-1&&(t=t.slice(n+1));let r=Wb(Vb).applyPatches_;return mb(e)?r(e,t):this.produce(e,e=>r(e,t))}};function Sx(e,t,n,r){let[i,a]=Eb(t)?Wb(Bb).proxyMap_(t,n):Db(t)?Wb(Bb).proxySet_(t,n):fx(t,n);return(n?.scope_??Jb()).drafts_.push(i),a.callbacks_=n?.callbacks_??[],a.key_=r,n&&r!==void 0?cx(n,a,r):a.callbacks_.push(function(e){e.mapSetPlugin_?.fixSetContents(a);let{patchPlugin_:t}=e;a.modified_&&t&&t.generatePatches_(a,[],e)}),i}function Cx(e){return mb(e)||ab(10,e),wx(e)}function wx(e){if(!hb(e)||zb(e))return e;let t=e[rb],n,r=!0;if(t){if(!t.modified_)return t.base_;t.finalized_=!0,n=Fb(e,t.scope_.immer_.useStrictShallowCopy_),r=t.scope_.immer_.shouldUseStrictIteration()}else n=Fb(e,!0);let i=n;return Db(n)&&(n=new Set),yb(i,(e,t)=>{Cb(n,e,wx(t))},r),t&&(t.finalized_=!1),n}function Tx(){ib.push(`Sets cannot have "replace" patches.`,function(e){return`Unsupported patch operation: `+e},function(e){return`Cannot apply patch, path doesn't resolve: `+e},`Patching reserved attributes like __proto__, prototype and constructor is not allowed`);function e(n,r=[]){if(n.key_!==void 0){let e=n.parent_.copy_??n.parent_.base_,t=Mb(Sb(e,n.key_)),i=Sb(e,n.key_);if(i===void 0||i!==n.draft_&&i!==n.base_&&i!==n.copy_||t!=null&&t.base_!==n.base_)return null;let a=n.parent_.type_===3,o;if(a){let e=n.parent_;o=Array.from(e.drafts_.keys()).indexOf(n.key_)}else o=n.key_;if(!(a&&e.size>o||xb(e,o))||n.parent_.type_===1&&n.parent_.allIndicesReassigned_)return null;r.push(o)}if(n.parent_)return e(n.parent_,r);r.reverse();try{t(n.copy_,r)}catch{return null}return r}function t(e,t){let n=e;for(let e=0;e<t.length-1;e++){let r=t[e];if(n=Sb(n,r),!Ob(n)||n===null)throw Error(`Cannot resolve path at '${t.join(`/`)}'`)}return n}let n=`replace`,r=`remove`;function i(e,t,n){if(e.scope_.processedForPatches_.has(e))return;e.scope_.processedForPatches_.add(e);let{patches_:r,inversePatches_:i}=n;switch(e.type_){case 0:case 2:return o(e,t,r,i);case 1:return a(e,t,r,i);case 3:return s(e,t,r,i)}}function a(e,t,i,a){let{base_:o,assigned_:s}=e,c=e.copy_;c.length<o.length&&([o,c]=[c,o],[i,a]=[a,i]);let l=e.allIndicesReassigned_===!0;for(let e=0;e<o.length;e++){let r=c[e],u=o[e];if((l||s?.get(e.toString()))&&r!==u){let o=r?.[rb];if(o&&o.modified_)continue;let s=t.concat([e]);i.push({op:n,path:s,value:d(r)}),a.push({op:n,path:s,value:d(u)})}}for(let e=o.length;e<c.length;e++){let n=t.concat([e]);i.push({op:`add`,path:n,value:d(c[e])})}for(let e=c.length-1;o.length<=e;--e){let n=t.concat([e]);a.push({op:r,path:n})}}function o(e,t,i,a){let{base_:o,copy_:s,type_:c}=e;yb(e.assigned_,(e,l)=>{let u=Sb(o,e,c),f=Sb(s,e,c),p=l?xb(o,e)?n:`add`:r;if(u===f&&p===n)return;let m=t.concat(e);i.push(p===r?{op:p,path:m}:{op:p,path:m,value:d(f)}),a.push(p===`add`?{op:r,path:m}:p===r?{op:`add`,path:m,value:d(u)}:{op:n,path:m,value:d(u)})})}function s(e,t,n,i){let{base_:a,copy_:o}=e,s=0;a.forEach(e=>{if(!o.has(e)){let a=t.concat([s]);n.push({op:r,path:a,value:e}),i.unshift({op:`add`,path:a,value:e})}s++}),s=0,o.forEach(e=>{if(!a.has(e)){let a=t.concat([s]);n.push({op:`add`,path:a,value:e}),i.unshift({op:r,path:a,value:e})}s++})}function c(e,t,r){let{patches_:i,inversePatches_:a}=r;i.push({op:n,path:[],value:t===tb?void 0:t}),a.push({op:n,path:[],value:e})}function l(e,t){return t.forEach(t=>{let{path:i,op:a}=t,o=e;for(let e=0;e<i.length-1;e++){let t=bb(o),n=i[e];typeof n!=`string`&&typeof n!=`number`&&(n=``+n),(t===0||t===1)&&(n===`__proto__`||n===cb)&&ab(19),kb(o)&&n===lb&&ab(19),o=Sb(o,n),(o===null||!Ob(o))&&ab(18,i.join(`/`))}let s=bb(o),c=u(t.value),l=i[i.length-1];switch(a){case n:switch(s){case 2:return o.set(l,c);case 3:ab(16);default:return o[l]=c}case`add`:switch(s){case 1:return l===`-`?o.push(c):o.splice(l,0,c);case 2:return o.set(l,c);case 3:return o.add(c);default:return o[l]=c}case r:switch(s){case 1:return o.splice(l,1);case 2:return o.delete(l);case 3:return o.delete(t.value);default:return delete o[l]}default:ab(17,a)}}),e}function u(e){if(!hb(e))return e;if(Tb(e))return e.map(u);if(Eb(e))return new Map(Array.from(e.entries()).map(([e,t])=>[e,u(t)]));if(Db(e))return new Set(Array.from(e).map(u));let t=Object.create(sb(e));for(let n in e)t[n]=u(e[n]);return xb(e,nb)&&(t[nb]=e[nb]),t}function d(e){return mb(e)?u(e):e}Kb(Vb,{applyPatches_:l,generatePatches_:i,generateReplacementPatches_:c,getPath:e})}globalThis.Iterator?.from;var Ex=new xx,Dx=Ex.produce,Ox=Ex.produceWithPatches.bind(Ex),kx=Ex.applyPatches.bind(Ex),Ax=1e3;function jx(e,t){if(e.add(t),e.size>Ax){let t=e.values().next().value;t!==void 0&&e.delete(t)}}function Mx(e){let{enablePatches:t=!1}=e;t&&Tx();let n=Ky(),r=e.initialValue,i=new Set;return{on:n.on,value:()=>r,patch:(e,t=eb())=>{i.has(t)||(Tx(),r=kx(r,e),jx(i,t),n.emit(`updated`,r,void 0,t))},mutate:(e,a=eb())=>{if(!i.has(a)){if(jx(i,a),t){let[t,i]=Ox(r,e);if(t===r)return;r=t,n.emit(`updated`,r,i,a)}else{let t=Dx(r,e);if(t===r)return;r=t,n.emit(`updated`,r,void 0,a)}}},syncIds:i}}var Nx=typeof self==`object`?self:globalThis,Px=new Set([`Error`,`EvalError`,`RangeError`,`ReferenceError`,`SyntaxError`,`TypeError`,`URIError`,`AggregateError`]),Fx=new Set([`Boolean`,`Number`,`String`,`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float16Array`,`Float32Array`,`Float64Array`,`BigInt64Array`,`BigUint64Array`]);function Ix(e,t){let n=(t,n)=>(e.set(n,t),t),r=i=>{if(e.has(i))return e.get(i);let[a,o]=t[i];switch(a){case 0:case-1:return n(o,i);case 1:{let e=n([],i);for(let t of o)e.push(r(t));return e}case 2:{let e=n({},i);for(let[t,n]of o)e[r(t)]=r(n);return e}case 3:return n(new Date(o),i);case 4:{let{source:e,flags:t}=o;return n(new RegExp(e,t),i)}case 5:{let e=n(new Map,i);for(let[t,n]of o)e.set(r(t),r(n));return e}case 6:{let e=n(new Set,i);for(let t of o)e.add(r(t));return e}case 7:{let{name:e,message:t}=o,r=Px.has(e)?Nx[e]:void 0;return n(new(r??Nx.Error)(t),i)}case 8:return n(BigInt(o),i);case`BigInt`:return n(Object(BigInt(o)),i);case`ArrayBuffer`:return n(new Uint8Array(o).buffer,o);case`DataView`:{let{buffer:e}=new Uint8Array(o);return n(new DataView(e),o)}}if(typeof a==`string`&&Fx.has(a))return n(new Nx[a](o),i);throw TypeError(`unable to deserialize unsafe or unknown type: ${String(a)}`)};return r}function Lx(e){return Ix(new Map,e)(0)}var Rx=``,{toString:zx}={},{keys:Bx}=Object;function Vx(e){let t=typeof e;if(t!==`object`||!e)return[0,t];let n=zx.call(e).slice(8,-1);switch(n){case`Array`:return[1,Rx];case`Object`:return[2,Rx];case`Date`:return[3,Rx];case`RegExp`:return[4,Rx];case`Map`:return[5,Rx];case`Set`:return[6,Rx];case`DataView`:return[1,n]}return n.includes(`Array`)?[1,n]:n.includes(`Error`)?[7,n]:[2,n]}function Hx([e,t]){return e===0&&(t===`function`||t===`symbol`)}function Ux(e,t,n,r){let i=(e,t)=>{let i=r.push(e)-1;return n.set(t,i),i},a=r=>{if(n.has(r))return n.get(r);let[o,s]=Vx(r);switch(o){case 0:{let t=r;switch(s){case`bigint`:o=8,t=r.toString();break;case`function`:case`symbol`:if(e)throw TypeError(`unable to serialize ${s}`);t=null;break;case`undefined`:return i([-1],r)}return i([o,t],r)}case 1:{if(s){let e=r;return s===`DataView`?e=new Uint8Array(r.buffer):s===`ArrayBuffer`&&(e=new Uint8Array(r)),i([s,[...e]],r)}let e=[],t=i([o,e],r);for(let t of r)e.push(a(t));return t}case 2:{if(s)switch(s){case`BigInt`:return i([s,r.toString()],r);case`Boolean`:case`Number`:case`String`:return i([s,r.valueOf()],r)}if(t&&`toJSON`in r)return a(r.toJSON());let n=[],c=i([o,n],r);for(let t of Bx(r))(e||!Hx(Vx(r[t])))&&n.push([a(t),a(r[t])]);return c}case 3:return i([o,r.toISOString()],r);case 4:{let{source:e,flags:t}=r;return i([o,{source:e,flags:t}],r)}case 5:{let t=[],n=i([o,t],r);for(let[n,i]of r)(e||!(Hx(Vx(n))||Hx(Vx(i))))&&t.push([a(n),a(i)]);return n}case 6:{let t=[],n=i([o,t],r);for(let n of r)(e||!Hx(Vx(n)))&&t.push(a(n));return n}}let{message:c}=r;return i([o,{name:s,message:c}],r)};return a}function Wx(e,t={}){let n=[];return Ux(!(t.json||t.lossy),!!t.json,new Map,n)(e),n}var{parse:Gx,stringify:Kx}=JSON,qx={json:!0,lossy:!0};function Jx(e){return Lx(Gx(e))}function Yx(e){return Kx(Wx(e,qx))}function Xx(e){return Lx(e)}function Zx(e){return Yx(e)}function Qx(e){return Jx(e)}var $x=256,eS=class extends Error{name=`StreamClosedError`};function tS(e={}){let t=e.id??eb(),n=Math.max(0,e.replayWindow??0),r=Ky(),i=new AbortController,a=[],o=!1,s=0;function c(e){if(o)throw new eS(`Cannot write to a closed stream "${t}"`);s+=1,n>0&&(a.push({seq:s,chunk:e}),a.length>n&&(a.length-n===1?a.shift():a.splice(0,a.length-n))),r.emit(`chunk`,s,e)}function l(e){if(o)return;o=!0;let t=rS(e);i.abort(e),r.emit(`end`,t)}function u(){o||(o=!0,i.signal.aborted||i.abort(`stream closed`),r.emit(`end`,void 0))}function d(e){o||i.signal.aborted||i.abort(e??`aborted`)}let f=new WritableStream({write(e){c(e)},close(){u()},abort(e){l(e)}});return{id:t,signal:i.signal,get closed(){return o},get lastSeq(){return s},write:c,error:l,close:u,abort:d,writable:f,events:r,buffer:a}}function nS(e={}){let t=e.id??eb(),n=Math.max(1,e.highWaterMark??$x),r=[],i=0,a=!1,o=!1,s,c,l,u;function d(){if(c){if(r.length>0){let e=r.shift(),t=c;c=void 0,t.resolve({value:e,done:!1});return}if(a){let e=c;if(c=void 0,s){let t=Error(s.message);t.name=s.name,e.reject(t)}else e.resolve({value:void 0,done:!0})}}}function f(){if(l){for(;r.length>0;){let e=r.shift();try{l.enqueue(e)}catch{break}}if(a&&l){try{if(s){let e=Error(s.message);e.name=s.name,l.error(e)}else l.close()}catch{}l=void 0}}}function p(t,s){if(!(a||o)&&!(t<=i)){if(i=t,r.push(s),r.length>n){let t=r.length-n;r.splice(0,t),e.onOverflow?.(t)}d(),u&&f()}}function m(e){a||(a=!0,s=e,d(),u&&f())}function ee(){o||a||(o=!0,e.onCancel?.(),m(void 0))}function h(){return u||(u=new ReadableStream({start(e){l=e,f()},cancel(){ee()}}),u)}return{id:t,get cancelled(){return o},get done(){return a},get lastSeenSeq(){return i},get readable(){return h()},cancel:ee,_push:p,_end:m,[Symbol.asyncIterator](){return{next(){if(r.length>0)return Promise.resolve({value:r.shift(),done:!1});if(a){if(s){let e=Error(s.message);return e.name=s.name,Promise.reject(e)}return Promise.resolve({value:void 0,done:!0})}return new Promise((e,t)=>{c={resolve:e,reject:t}})},return(){return ee(),Promise.resolve({value:void 0,done:!0})}}}}}function rS(e){if(e instanceof Error)return{name:e.name||`Error`,message:e.message};if(typeof e==`string`)return{name:`Error`,message:e};try{return{name:`Error`,message:JSON.stringify(e)}}catch{return{name:`Error`,message:String(e)}}}var iS=128;function aS(e){return e.replace(/[^\w-]+/g,`_`).slice(0,iS)}var oS=`modulepreload`,sS=function(e,t){return new URL(e,t).href},cS={},lS=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}function s(e){return import.meta.resolve?import.meta.resolve(e):new URL(e,import.meta.url).href}r=o(t.map(t=>{if(t=sS(t,n),t=s(t),t in cS)return;cS[t]=!0;let r=t.endsWith(`.css`);for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}let i=document.createElement(`link`);if(i.rel=r?`stylesheet`:oS,r||(i.as=`script`),i.crossOrigin=``,i.href=t,a&&i.setAttribute(`nonce`,a),document.head.appendChild(i),r)return new Promise((e,n)=>{i.addEventListener(`load`,e),i.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}).filter(e=>e!==void 0))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},uS=`__connection.json`,dS=`__DEVFRAME_CONNECTION__`,fS=`x-birpc-session`,pS=`__rpc-dump/index.json`,mS=`devframe:services`,hS=`devframe_otp`,gS=`devframe_auth_token`;Cy.postMessage.remoteAssetsError;var _S=class{cacheMap=new Map;options;keySerializer;constructor(e){this.options=e,this.keySerializer=e.keySerializer||(e=>Gy(e))}updateOptions(e){this.options={...this.options,...e}}cached(e,t){let n=this.cacheMap.get(e);if(n)return n.get(this.keySerializer(t))}has(e,t){return this.cacheMap.get(e)?.has(this.keySerializer(t))??!1}apply(e,t){let n=this.cacheMap.get(e.m)||new Map;n.set(this.keySerializer(e.a),t),this.cacheMap.set(e.m,n)}validate(e){return this.options.functions.includes(e)}clear(e){e?this.cacheMap.delete(e):this.cacheMap.clear()}},vS=Nre({docsBase:`https://devfra.me/errors`,codes:{DF0019:{why:e=>`RPC function "${e.name}" has \`agent\` set but \`jsonSerializable\` is \`false\`; MCP requires JSON-serializable data.`,fix:"Remove `jsonSerializable: false`, or remove `agent` to keep it RPC-only."},DF0020:{why:e=>`RPC function "${e.name}" declares \`jsonSerializable: true\` but the value at "${e.path}" is a ${e.type}.`,fix:"Either drop `jsonSerializable: true` (falls back to structured-clone) or change the value to a JSON-safe shape."},DF0021:{why:e=>`RPC function "${e.name}" is already registered`,fix:"Use the `force` parameter to overwrite an existing registration."},DF0022:{why:e=>`RPC function "${e.name}" is not registered. Use register() to add new functions.`},DF0023:{why:e=>`RPC function "${e.name}" is not registered`},DF0024:{why:e=>`Either handler or setup function must be provided for RPC function "${e.name}"`},DF0025:{why:e=>`Function "${e.name}" not found in dump store`},DF0026:{why:e=>`No dump match for "${e.name}" with args: ${e.args}`},DF0027:{why:e=>`Function "${e.name}" with type "${e.type}" cannot have dump configuration. Only "static" and "query" types support dumps.`},DF0028:{why:e=>`Function "${e.name}" with type "${e.type}" cannot use \`snapshot: true\`. Only "query" functions support this sugar; "static" functions have equivalent default behavior already.`,fix:"Remove `snapshot: true`, or change the function type to `query`."},DF0043:{why:e=>`RPC function "${e.name}" received an invalid argument at position ${e.index}: ${e.issues}`,fix:"Pass a value that satisfies the `args` schema declared for this function."},DF0044:{why:e=>`RPC function "${e.name}" returned a value that failed its \`returns\` schema: ${e.issues}`,fix:"Make the handler return a value that satisfies the `returns` schema, or relax the schema."}}});function yS(e){if(e.agent&&e.jsonSerializable===!1)throw vS.DF0019({name:e.name});e.agent&&!e.jsonSerializable&&(e.jsonSerializable=!0)}async function bS(e,t){let n=e[`~standard`].validate(t);return n instanceof Promise?await n:n}function xS(e){return e.map(e=>{let t=e.path?.map(e=>typeof e==`object`?e.key:e).join(`.`);return t?`${t}: ${e.message}`:e.message}).join(`; `)}async function SS(e,t,n){let r=n.slice();if(!t||t.length===0)return r;for(let r=0;r<t.length;r++){let i=t[r];if(!i)continue;let a=await bS(i,n[r]);if(a.issues)throw vS.DF0043({name:e,index:r,issues:xS(a.issues)})}return r}async function CS(e,t,n){if(!t)return n;let r=await bS(t,n);if(r.issues)throw vS.DF0044({name:e,issues:xS(r.issues)});return n}async function wS(e,t){if(!e.setup)return{};if(typeof t==`object`&&t){e.__cache??=new WeakMap;let n=e.__cache,r=n.get(t);return r||(r=Promise.resolve(e.setup(t)),r.catch(()=>{n.get(t)===r&&n.delete(t)}),n.set(t,r)),await r}if(!e.__promise){let n=Promise.resolve(e.setup(t));n.catch(()=>{e.__promise===n&&(e.__promise=void 0)}),e.__promise=n}return await e.__promise}async function TS(e,t){let n=e.handler;if(!n){let r=await wS(e,t);if(!r.handler)throw vS.DF0024({name:e.name});n=r.handler}let r=e.args,i=e.returns;if(!r&&!i)return n;let a=n;return async(...t)=>{let n=await SS(e.name,r,t),o=await a(...n);return await CS(e.name,i,o)}}var ES=class{context;definitions=new Map;functions;_onChanged=[];constructor(e){this.context=e;let t=this.definitions,n=this;this.functions=new Proxy({},{get(e,r){let i=t.get(r);if(i)return TS(i,n.context)},has(e,n){return t.has(n)},getOwnPropertyDescriptor(e,n){return{value:t.get(n)?.handler,configurable:!0,enumerable:!0}},ownKeys(){return Array.from(t.keys())}})}register(e,t=!1){if(this.definitions.has(e.name)&&!t)throw vS.DF0021({name:e.name});yS(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}update(e,t=!1){if(!this.definitions.has(e.name)&&!t)throw vS.DF0022({name:e.name});yS(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}onChanged(e){return this._onChanged.push(e),()=>{let t=this._onChanged.indexOf(e);t!==-1&&this._onChanged.splice(t,1)}}async getHandler(e){return await TS(this.definitions.get(e),this.context)}getSchema(e){let t=this.definitions.get(e);if(!t)throw vS.DF0023({name:String(e)});return{args:t.args,returns:t.returns}}has(e){return this.definitions.has(e)}get(e){return this.definitions.get(e)}list(){return Array.from(this.definitions.keys())}};function DS(e,t=``){return JSON.stringify(e,function(e,n){let r=this,i=r==null?n:r[e];if(i===void 0){if(Array.isArray(r))throw kS(t,`undefined`,r,e);return n}return i!==null&&OS(i,r,e,t),n})}function OS(e,t,n,r){if(typeof e==`bigint`)throw kS(r,`BigInt`,t,n);if(typeof e!=`object`)return;if(e instanceof Map)throw kS(r,`Map`,t,n);if(e instanceof Set)throw kS(r,`Set`,t,n);if(e instanceof Date)throw kS(r,`Date`,t,n);if(Array.isArray(e))return;let i=Object.getPrototypeOf(e);if(i!==null&&i!==Object.prototype)throw kS(r,e.constructor?.name??`class instance`,t,n)}function kS(e,t,n,r){let i=AS(n,r);return vS.DF0020({name:e||`<anonymous>`,type:t,path:i})}function AS(e,t){return Array.isArray(e)?`[${t}]`:t===``?`<root>`:t}var jS=`__DEVFRAME_CONNECTION_META__`,MS=`__DEVFRAME_CONNECTION_AUTH_TOKEN__`;function NS(e){let t=[()=>window?.[e],()=>globalThis?.[e],()=>parent.window?.[e]];for(let e of t)try{let t=e();if(t)return t}catch{}}function PS(){return NS(dS)}function FS(){return NS(jS)}function IS(e){if(e)return e;try{let e=localStorage.getItem(MS);if(e)return e}catch{}return NS(MS)}function LS(e){globalThis[dS]=e,globalThis[jS]={...e.connectionMeta,baseUrl:e.metaBaseUrl},e.authToken&&RS(e.authToken)}function RS(e){try{localStorage.setItem(MS,e)}catch{}globalThis[MS]=e;let t=PS();t&&(globalThis[dS]={...t,authToken:e})}function zS(e){let t=Zy(uS,e);try{return new URL(t,globalThis.location?.href).href}catch{return t}}function BS(e,t){return t&&t!==e.authToken?{...e,authToken:t}:e}function VS(){let e=PS();if(e)return BS(e,IS()??e.authToken??e.connectionMeta.authToken);let t=FS();if(t)return{connectionMeta:t,metaBaseUrl:t.baseUrl??zS(`./`),authToken:IS(t.authToken)}}async function HS(e={}){if(e.connection){let t=BS(e.connection,IS(e.authToken??e.connection.authToken??e.connection.connectionMeta.authToken));return LS(t),t}let t=Array.isArray(e.baseURL)?e.baseURL:[e.baseURL??`./`];if(e.connectionMeta){let n={connectionMeta:e.connectionMeta,metaBaseUrl:zS(t[0]??`./`),authToken:IS(e.authToken??e.connectionMeta.authToken)};return LS(n),n}let n=VS();if(n){let t=BS(n,IS(e.authToken??n.authToken??n.connectionMeta.authToken));return LS(t),t}let r=[];for(let n of t){let t=Zy(uS,n),i=zS(n);try{let n=await fetch(t);if(!n.ok)throw Error(`Failed to fetch connection meta from ${i}: ${n.status}`);let r=await n.json(),a=n.url||i,o={connectionMeta:r,metaBaseUrl:r.baseUrl?new URL(r.baseUrl,a).href:a,authToken:IS(e.authToken??r.authToken)};return LS(o),o}catch(e){r.push(e)}}throw Error(`Failed to get connection meta from ${t.join(`, `)}`,{cause:r})}var US=class extends Error{name=`DevframeConnectionError`;kind;constructor(e,t,n){super(t,n),this.kind=e}};function WS(e=hS){try{let t=globalThis.location?.hash?.replace(/^#/,``)??``;return new URLSearchParams(t).get(e)||void 0}catch{return}}function GS(e){try{let t=new URL(globalThis.location.href),n=new URLSearchParams(t.hash.replace(/^#/,``));if(!n.has(e))return;n.delete(e),t.hash=n.toString(),globalThis.history?.replaceState(globalThis.history.state,``,t.href)}catch{}}function KS(e=hS){let t=WS(e);return t&&GS(e),t}async function qS(e,t={}){let n=KS(t.param??`devframe_otp`);return n?e.isTrusted?!0:e.requestTrustWithCode(n):!1}function JS(e){let t={},n=new WeakMap,r,i=()=>(r??=e.sharedState.get(mS,{initialValue:{}}).then(e=>(t=e.value(),e.on(`updated`,e=>{t=e}),e)),r);return i(),{state:i,has:e=>e in t,keys:()=>Object.keys(t),get:r=>{let i=t[r];if(!i)return;let a=n.get(i);return a||(a={...i,rpc:e.scope(i.scope).rpc},n.set(i,a)),a}}}function YS(e){let t=new Map,n=new Map,r=new Map,i=new Set,a=e.connectionMeta.backend===`static`;function o(e,t){let n=r.get(e);return n&&typeof n==`object`&&!Array.isArray(n)&&typeof t==`object`&&!Array.isArray(t)?{...n,...t}:t}e.client.register({name:Cy.broadcast.clientStateUpdated,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.mutate(()=>o(e,n),r)}}),e.client.register({name:Cy.broadcast.clientStatePatch,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.patch(n,r)}});function s(t,n){let r=[];return r.push(n.on(`updated`,(n,r,i)=>{a||(r?e.callEvent(`devframe:rpc:server-state:patch`,t,r,i):e.callEvent(`devframe:rpc:server-state:set`,t,n,i))})),()=>{for(let e of r)e()}}return{keys:()=>Array.from(t.keys()),onKeyAdded(e){return i.add(e),()=>{i.delete(e)}},delete(e){let i=n.get(e);n.delete(e);let a=t.delete(e);return r.delete(e),i?.(),a},get:async(c,l)=>{if(l?.initialValue!==void 0&&r.set(c,l.initialValue),t.has(c))return t.get(c);let u=Mx({initialValue:l?.initialValue,enablePatches:!1});async function d(){if(a||e.callEvent(`devframe:rpc:server-state:subscribe`,c),l?.initialValue!==void 0){t.set(c,u);for(let e of i)e(c);return e.call(`devframe:rpc:server-state:get`,c).then(e=>{e!==void 0&&u.mutate(()=>o(c,e))}).catch(e=>{console.error(`Error getting server state`,e)}),n.set(c,s(c,u)),u}{let r=await e.call(`devframe:rpc:server-state:get`,c);u.mutate(()=>o(c,r)),t.set(c,u);for(let e of i)e(c);return n.set(c,s(c,u)),u}}return new Promise((t,n)=>{if(e.isTrusted)d().then(t,n);else{t(u);let n=!1;e.events.on(Cy.client.isTrustedUpdated,e=>{e&&!n&&(n=!0,d())})}})}}}var XS=new Map;function ZS(e=XS){let t=new Map;return{serialize:n=>{let r;return n.t===`q`?r=n.m:(r=t.get(n.i),t.delete(n.i)),!(n.t===`s`&&`e`in n)&&r&&e.get(r)?.jsonSerializable===!0?DS(n,r??``):`s:${Zx(n)}`},deserialize:e=>{let n=e.startsWith(`s:`)?Qx(e.slice(2)):JSON.parse(e);return n.t===`q`&&n.i&&n.m&&t.set(n.i,n.m),n}}}function QS(){}function $S(e){let t=e.search(/\n\n|\r\n\r\n/);if(!(t<0))return{frame:e.slice(0,t),rest:e.slice(t+(e[t]===`\r`?4:2))}}function eC(e){let t=`message`,n=[];for(let r of e.split(/\r?\n/))r.startsWith(`:`)||(r.startsWith(`event:`)?t=r.slice(6).trimStart():r.startsWith(`data:`)&&n.push(r.slice(5).replace(/^ /,``)));return{event:t,data:n}}function tC(e){let{onConnected:t=QS,onError:n=QS,onDisconnected:r=QS,definitions:i,fetch:a=globalThis.fetch.bind(globalThis)}=e,o=e.url;e.authToken&&(o=`${o}${o.includes(`?`)?`&`:`?`}${gS}=${encodeURIComponent(e.authToken)}`);let s=ZS(i),c=new AbortController,l=!1,u,d,f,p,m=new Promise((e,t)=>{f=e,p=t});m.catch(()=>{});function ee(e){l||(l=!0,p(e),n(e),r())}function h(){l||(l=!0,p(Error(`Devframe SSE stream closed`)),r())}function g(e,n){if(e===`session`){f(n),t();return}u?.(n)}async function te(e){let t=e.getReader();d=t;let n=new TextDecoder,r=``;for(;;){let{done:e,value:i}=await t.read();if(e)break;for(r+=n.decode(i,{stream:!0});;){let e=$S(r);if(!e)break;r=e.rest;let{event:t,data:n}=eC(e.frame);n.length>0&&g(t,n.join(`
-`))}}h()}return(async()=>{try{let e=await a(o,{headers:{accept:`text/event-stream`},signal:c.signal});if(!e.ok||!e.body)throw Error(`Devframe SSE stream request failed: ${e.status}`);await te(e.body)}catch(e){if(c.signal.aborted){h();return}ee(e instanceof Error?e:Error(String(e)))}})(),{close:()=>{l=!0,c.abort(),d?.cancel().catch(()=>{})},on:e=>{u=e},post:async e=>{let t;try{t=await m}catch{return}if(l){n(Error(`Devframe SSE channel is closed; message dropped`));return}try{let n=await a(o,{method:`POST`,headers:{"content-type":`text/plain; charset=utf-8`,[fS]:t},body:e});if(n.status===200){let e=await n.text();e&&u?.(e);return}if(!n.ok)throw Error(`Devframe SSE POST failed: ${n.status}`)}catch(e){n(e instanceof Error?e:Error(String(e)))}},serialize:s.serialize,deserialize:s.deserialize}}function nC(e,t){let{channel:n,rpcOptions:r={}}=t;return Vre(e,{...n,timeout:-1,...r,proxify:!1})}function rC(e){let{transport:t,authToken:n,connectionMeta:r,events:i,clientRpc:a,rpcOptions:o={},callTimeout:s=0}=e,c=!1,l=`connecting`,u=null,d=Promise.withResolvers();function f(e,t=null){if(t?u=t:e===`connected`&&(u=null),e===l)return;let n=l;l=e,i.emit(Cy.client.connectionStatus,e,n)}let p=new Set;function m(e){for(let t of[...p])t.reject(e)}function ee(){return l===`disconnected`||l===`error`?new US(`connection`,`[devframe] Not connected to the devframe server`,{cause:u??void 0}):l===`unauthorized`?new US(`auth`,`[devframe] Not authorized by the devframe server`,{cause:u??void 0}):null}function h(e,t){return new Promise((n,r)=>{let a=!1,o,c={reject(e){a||(l(),i.emit(Cy.client.error,e,t),r(e))}};function l(){a=!0,p.delete(c),o&&clearTimeout(o)}p.add(c),s>0&&(o=setTimeout(()=>{c.reject(new US(`timeout`,`[devframe] RPC call "${t}" timed out after ${s}ms`))},s)),e.then(e=>{a||(l(),n(e))},e=>{if(a)return;l();let n=e instanceof Error?e:Error(String(e));i.emit(Cy.client.error,n,t),r(n)})})}let g=new Map;for(let e of r.jsonSerializableMethods??[])g.set(e,{jsonSerializable:!0});let te=e.createChannel({definitions:g,onError(e){f(`error`,e),i.emit(Cy.client.connectionError,e),m(new US(`connection`,`[devframe] Connection to the devframe server failed`,{cause:e}))},onDisconnected(){l!==`error`&&f(`disconnected`),m(new US(`connection`,`[devframe] Disconnected from the devframe server`,{cause:u??void 0}))}}),ne=nC(a.functions,{channel:te,rpcOptions:o});a.register({name:Cy.broadcast.authRevoked,type:`event`,handler:()=>{c=!1;let e=new US(`auth`,`[devframe] The devframe server revoked this client's trust`);f(`unauthorized`,e),i.emit(Cy.client.connectionError,e),m(e),i.emit(Cy.client.isTrustedUpdated,!1)}});let re=n;async function ie(e){re=e;let t=await ne.$call(`anonymous:devframe:auth`,{authToken:e,ua:navigator.userAgent,origin:location.origin});if(c=t.isTrusted,c)d.resolve(!0),f(`connected`);else{let e=new US(`auth`,`[devframe] The devframe server refused this client's credentials`);f(`unauthorized`,e),i.emit(Cy.client.connectionError,e)}return i.emit(Cy.client.isTrustedUpdated,c),t.isTrusted}async function ae(e){let t=(await ne.$call(`anonymous:devframe:auth:exchange`,{code:e,ua:navigator.userAgent,origin:location.origin}))?.authToken??null;return t&&(re=t,c=!0,d.resolve(!0),f(`connected`),i.emit(Cy.client.isTrustedUpdated,!0)),t}async function oe(e={}){await ne.$call(`anonymous:devframe:auth:request-code`,{ua:navigator.userAgent,origin:location.origin,...e.reissue?{reissue:!0}:{}})}async function se(){return c?!0:ie(re??``)}async function ce(e=6e4){if(c&&d.resolve(!0),e<=0)return d.promise;let t;try{return await Promise.race([d.promise,new Promise((n,r)=>{t=setTimeout(()=>{r(Error(`[devframe] Timeout waiting for rpc to be trusted`))},e)})]),c}finally{clearTimeout(t)}}return{transport:t,get isTrusted(){return c},get status(){return l},get connectionError(){return u},requestTrust:se,requestTrustWithToken:ie,requestTrustWithCode:ae,requestAuthCode:oe,ensureTrusted:ce,call:(...e)=>{let t=String(e[0]),n=ee();return n?(i.emit(Cy.client.error,n,t),Promise.reject(n)):h(ne.$call(...e),t)},callEvent:(...e)=>{let t=ee();if(t){i.emit(Cy.client.error,t,String(e[0]));return}return ne.$callEvent(...e)},callOptional:(...e)=>{let t=String(e[0]),n=ee();return n?(i.emit(Cy.client.error,n,t),Promise.reject(n)):h(ne.$callOptional(...e),t)},close:()=>{te.close()}}}function iC(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})();if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`;return new URL(e.path??`/`,`${r.protocol}//${t}`).href}return new URL(e.path??``,r).href}let i=e??``;return/^https?:\/\//i.test(i)?i:new URL(i,r).href}function aC(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},sseOptions:s={},callTimeout:c=0}=e,l=iC(n.sse,r??`./`,location);return rC({transport:`sse`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>tC({url:l,authToken:t,definitions:e.definitions,...s,onConnected(){s.onConnected?.()},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(){e.onDisconnected(),s.onDisconnected?.()}})})}function oC(e){let{name:t,message:n,cause:r,...i}=e,a=r instanceof Error?r:sC(r)?oC(r):r,o=a===void 0?Error(n):Error(n,{cause:a});return o.name=t,Object.assign(o,i),o}function sC(e){return typeof e==`object`&&!!e&&typeof e.message==`string`&&typeof e.name==`string`}function cC(e){return typeof e==`object`&&!!e&&e.type===`static`&&typeof e.path==`string`}function lC(e){return typeof e==`object`&&!!e&&e.type===`query`&&typeof e.records==`object`&&e.records!==null}function uC(e){return typeof e==`object`&&!!e&&(`output`in e||`error`in e)}function dC(e){if(e.error)throw oC(e.error);return e.output}function fC(e){return e.some(e=>e!=null)}function pC(e){return typeof e==`object`&&e&&`serialization`in e&&`data`in e?e.data:e}function mC(e,t){let n=new Map,r=new Map;function i(e,t){return t===`structured-clone`&&Array.isArray(e)?Xx(e):e}function a(e,t){return i(pC(e),t)}async function o(e){n.has(e.path)||n.set(e.path,t(e.path).then(t=>a(t,e.serialization)));let r=await n.get(e.path);return uC(r)?dC(r):r}async function s(e,n){return r.has(e)||r.set(e,t(e).then(e=>a(e,n))),await r.get(e)}async function c(t,n){if(!(t in e))throw Error(`[devframe-rpc] Function "${t}" not found in dump store`);let r=e[t];if(cC(r)){if(fC(n))throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`);return await o(r)}if(lC(r)){let e=Gy(n),i=r.records[e];if(i)return dC(await s(i,r.serialization));if(r.fallback)return dC(await s(r.fallback,r.serialization));throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}if(!fC(n))return r;throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}return{call:async(e,t)=>await c(e,t),callOptional:async(t,n)=>{if(t in e)return await c(t,n)},callEvent:async(e,t)=>{}}}async function hC(e){let t=mC(await e.fetchJsonFromBases(pS),e.fetchJsonFromBases);return{transport:`static`,isTrusted:!0,status:`connected`,connectionError:null,requestTrust:async()=>!0,requestTrustWithToken:async()=>!0,requestTrustWithCode:async()=>null,requestAuthCode:async()=>{},ensureTrusted:async()=>!0,call:(...e)=>t.call(e[0],e.slice(1)),callEvent:(...e)=>t.callEvent(e[0],e.slice(1)),callOptional:(...e)=>t.callOptional(e[0],e.slice(1)),close:()=>{}}}var gC=``;function _C(e,t){return`${e}${gC}${t}`}function vC(e){let t=new Map,n=new Map;e.client.register({name:Cy.broadcast.streamingChunk,type:`event`,handler(e,n,r,i){t.get(_C(e,n))?._push(r,i)}}),e.client.register({name:Cy.broadcast.streamingEnd,type:`event`,handler(e,n,r){let i=_C(e,n),a=t.get(i);a&&(a._end(r),t.delete(i))}}),e.client.register({name:Cy.broadcast.streamingUploadCancel,type:`event`,handler(e,t){let r=_C(e,t),i=n.get(r);i&&(i.abort(`server cancelled upload`),n.delete(r))}}),e.events.on(Cy.client.isTrustedUpdated,n=>{if(n)for(let[n,r]of t){if(r.cancelled||r.done)continue;let t=n.indexOf(gC);if(t<0)continue;let i=n.slice(0,t),a=n.slice(t+1);e.callEvent(`devframe:streaming:subscribe`,i,a,{afterSeq:r.lastSeenSeq})}});function r(n,r,i={}){let a=_C(n,r),o=t.get(a);if(o)return o;let s=nS({id:r,highWaterMark:i.highWaterMark,onOverflow(e){console.warn(`[devframe] DF0029: Stream "${n}#${r}" dropped ${e} chunk(s) after exceeding the client high-water mark.`)},onCancel(){e.callEvent(`devframe:streaming:cancel`,n,r),t.delete(a)}});if(t.set(a,s),e.isTrusted)e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:0});else{let i=e.events.on(Cy.client.isTrustedUpdated,o=>{o&&(i(),t.has(a)&&!s.cancelled&&!s.done&&e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:s.lastSeenSeq}))})}return s}function i(t,r){let i=_C(t,r),a=n.get(i);if(a)return a;let o=tS({id:r});return o.events.on(`chunk`,(n,i)=>{e.callEvent(`devframe:streaming:upload-chunk`,t,r,n,i)}),o.events.on(`end`,a=>{e.callEvent(`devframe:streaming:upload-end`,t,r,a),n.delete(i)}),n.set(i,o),o}return{subscribe:r,upload:i}}function yC(){}var bC=new Map;function xC(e){let t=e.url;e.authToken&&(t=`${t}?${gS}=${encodeURIComponent(e.authToken)}`);let n=new WebSocket(t),{onConnected:r=yC,onError:i=yC,onDisconnected:a=yC,definitions:o=bC}=e;n.addEventListener(`open`,e=>{r(e)}),n.addEventListener(`error`,e=>{let t=e instanceof Error?e:Error(e.type);i(t)}),n.addEventListener(`close`,e=>{a(e)});let s=ZS(o);return{close:()=>{n.close()},on:e=>{n.addEventListener(`message`,t=>{e(t.data)})},post:e=>{if(n.readyState===WebSocket.OPEN){n.send(e);return}if(n.readyState===WebSocket.CONNECTING){let t=()=>{i(),n.readyState===WebSocket.OPEN&&n.send(e)},r=()=>i();function i(){n.removeEventListener(`open`,t),n.removeEventListener(`close`,r)}n.addEventListener(`open`,t),n.addEventListener(`close`,r);return}i(Error(`Devframe WebSocket is not open; message dropped`))},serialize:s.serialize,deserialize:s.deserialize}}function SC(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})(),i=r.protocol===`https:`?`wss:`:`ws:`;if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`,n=new URL(e.path??`/`,`${i}//${t}`);return n.protocol=i,n.href}let t=new URL(e.path??``,r);return t.protocol=i,t.href}if(typeof e==`number`)return`${i}//${r.hostname}:${e}`;let a=e??``;if(/^wss?:\/\//i.test(a))return a;if(/^https?:\/\//i.test(a))return Qy(a,/^https/i.test(a)?`wss://`:`ws://`);let o=new URL(a,r);return o.protocol=i,o.href}function CC(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},wsOptions:s={},callTimeout:c=0}=e,l=SC(n.websocket,r??`./`,location);return rC({transport:`websocket`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>xC({url:l,authToken:t,definitions:e.definitions,...s,onConnected(e){s.onConnected?.(e)},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(t){e.onDisconnected(),s.onDisconnected?.(t)}})})}function wC(e){return e.includes(`:`)}function TC(e,t){return wC(t)?t:`${e}:${t}`}function EC(e){return{async get(t){return(await e()).value()?.[t]},async set(t,n){(await e()).mutate(e=>{if(e===void 0)return{[t]:n};e[t]=n})},async delete(t){(await e()).mutate(e=>{e!==void 0&&delete e[t]})},async all(){return(await e()).value()??{}},async onChange(t){return(await e()).on(`updated`,e=>t(e??{}))}}}function DC(e,t,n){let r=`devframe:settings:${n}:${t}`,i;function a(){return i||=(async()=>(await e.ensureTrusted(),e.sharedState.get(r)))().catch(e=>{throw i=void 0,e}),i}return EC(a)}function OC(e,t){return{global:DC(e,t,`global`),project:DC(e,t,`project`)}}function kC(e,t){return{namespace:t,base:e,rpc:{namespace:t,register(n){if(wC(n.name))throw Error(`[devframe] Scoped client RPC registration for namespace "${t}" received an already-namespaced function name "${n.name}". Pass a bare name without a ":" separator.`);e.client.register({...n,name:`${t}:${n.name}`})},call:((n,...r)=>e.call(TC(t,n),...r)),callEvent:((n,...r)=>e.callEvent(TC(t,n),...r)),callOptional:((n,...r)=>e.callOptional(TC(t,n),...r)),sharedState:((n,r)=>e.sharedState.get(TC(t,n),r)),streaming:{subscribe:(n,r,i)=>e.streaming.subscribe(TC(t,n),r,i),upload:(n,r)=>e.streaming.upload(TC(t,n),r)}},settings:OC(e,t),scope:e.scope}}function AC(){if(typeof document<`u`){let e=document.modelContext;if(e)return e}if(typeof navigator<`u`){let e=navigator.modelContext;if(e)return e}}function jC(e,t={}){let n=t.modelContext??AC();if(!n)return()=>{};let r=n,i=new Map,a=new Map;function o(t,n){let o=aS(t.name),s=a.get(o);if(s&&s!==t.name){console.warn(`[devframe] WebMCP tool name "${o}" (from "${t.name}") collides with "${s}"; keeping the first registration.`);return}let c=new AbortController,l=Ey(t.type,n),u=r.registerTool({name:o,description:n.description,inputSchema:ky(t.args),annotations:{title:n.title??t.name,readOnlyHint:l===`read`,destructiveHint:l===`destructive`},execute:n=>MC(t,e.context,n)},{signal:c.signal});u&&`then`in u&&u.then(()=>{},()=>{}),a.set(o,t.name),i.set(t.name,()=>{c.abort(),u&&`unregister`in u&&typeof u.unregister==`function`&&u.unregister(),a.delete(o)})}function s(t){let n=t?[t]:[...e.definitions.keys()];for(let t of n){i.get(t)?.(),i.delete(t);let n=e.definitions.get(t),r=n?.agent;n&&r&&o(n,r)}}s();let c=e.onChanged(e=>s(e));return()=>{c();for(let e of i.values())e();i.clear()}}async function MC(e,t,n){try{let r=jy(n,e.args?.length);return{content:[{type:`text`,text:NC(await(await TS(e,t))(...r))}]}}catch(e){return{isError:!0,content:[{type:`text`,text:PC(e)}]}}}function NC(e){return e===void 0?`undefined`:typeof e==`string`?e:JSON.stringify(e,null,2)}function PC(e){if(!(e instanceof Error))return String(e);let t=e.cause instanceof Error?` (cause: ${e.cause.message})`:``;return`${e.name}: ${e.message}${t}`}function FC(e,t){if(t.backend===`static`)return`static`;let n=t.websocket!==void 0,r=t.sse!==void 0;if(e===`websocket`){if(!n)throw Error(`[devframe] transport: 'websocket' was requested, but this server does not advertise a WebSocket endpoint`);return`websocket`}if(e===`sse`){if(!r)throw Error(`[devframe] transport: 'sse' was requested, but this server does not advertise an SSE endpoint`);return`sse`}if(t.backend===`sse`&&r)return`sse`;if(n)return`websocket`;if(r)return`sse`;throw Error(`[devframe] This server advertises no RPC transport (backend "none"), so there is nothing to connect to. Enable the WebSocket or SSE endpoint on the server, or use its static/MCP surfaces instead.`)}async function IC(e={}){let{baseURL:t=`./`,rpcOptions:n={},cacheOptions:r=!1}=e,i=Ky(),a=Array.isArray(t)?t:[t],o=await HS(e),{connectionMeta:s,metaBaseUrl:c,authToken:l}=o,u=a[0]??`./`;try{u=new URL(`.`,c).href}catch{}let d=new _S({functions:[],...typeof e.cacheOptions==`object`?e.cacheOptions:{}}),f={rpc:void 0},p=new ES(f),m=e.webmcp===!1?void 0:jC(p),ee,h=!1,g=0,te;function ne(){g++,te=void 0,d.clear(),r===!0&&d.updateOptions({functions:[]})}r&&(p.register({name:Cy.broadcast.cacheInvalidate,type:`event`,handler:ne}),i.on(Cy.client.connectionStatus,ne),i.on(Cy.client.isTrustedUpdated,ne));async function re(e){let t=[u,...a.filter(e=>e!==u)].filter(e=>e!=null),n=[];for(let r of t)try{return await fetch(Zy(e,r)).then(t=>{if(!t.ok)throw Error(`Failed to fetch ${e} from ${r}: ${t.status}`);return t.json()})}catch(e){n.push(e)}throw Error(`Failed to load ${e} from ${t.join(`, `)}`,{cause:n})}let ie=e.callTimeout??0,ae=ie>0?ie:1/0,oe,se={authToken:l,connectionMeta:s,metaBaseUrl:c,events:i,clientRpc:p,callTimeout:e.callTimeout,rpcOptions:{...n,async onRequest(e,t,i){let a=performance.now()+ae;if(await n.onRequest?.call(this,e,t,i),r===!0&&e.i&&oe.isTrusted&&!e.m.startsWith(`anonymous:`)&&e.m!==`devframe:rpc:cacheable-functions`){function t(){if(performance.now()>=a)throw new US(`timeout`,`[devframe] RPC call "${e.m}" timed out after ${ie}ms`)}for(;!te&&(t(),!(h||oe.status!==`connected`));){let e=g;te=oe.callOptional(`devframe:rpc:cacheable-functions`).then(t=>{e===g&&d.updateOptions({functions:t??[]})}).catch(t=>{throw e===g&&(te=void 0),t}),await te}await te,t()}let o=g;if(r&&e.i&&!h&&oe.isTrusted&&d.validate(e.m)){if(d.has(e.m,e.a))return i(d.cached(e.m,e.a));let n=await t(e);o===g&&!h&&d.apply(e,n)}else await t(e)}}},ce=FC(e.transport??`auto`,s);oe=ce===`static`?await hC({fetchJsonFromBases:re}):ce===`sse`?aC({...se,sseOptions:e.sseOptions}):CC({...se,wsOptions:e.wsOptions});let le;try{le=new BroadcastChannel(`devframe-auth`)}catch{}let ue,de=!1;function fe(e){return((...t)=>de||!ue?e(...t):ue.then(()=>e(...t)))}function pe(){h=!0,ne();try{ee?.(),m?.()}finally{try{le?.close()}finally{oe.close?.()}}}let me={events:i,get isTrusted(){return oe.isTrusted},get status(){return oe.status},get connectionError(){return oe.connectionError},get transport(){return oe.transport??ce},get connection(){return o},connectionMeta:s,ensureTrusted:oe.ensureTrusted,requestTrust:oe.requestTrust,requestTrustWithToken:async e=>(RS(e),o={...o,authToken:e},oe.requestTrustWithToken(e)),requestTrustWithCode:async e=>{let t=await oe.requestTrustWithCode(e);if(!t)return!1;RS(t),o={...o,authToken:t};try{le?.postMessage({type:`auth-update`,authToken:t})}catch{}return!0},requestAuthCode:e=>oe.requestAuthCode(e),call:fe(oe.call),callEvent:fe(oe.callEvent),callOptional:fe(oe.callOptional),client:p,sharedState:void 0,services:void 0,streaming:void 0,cacheManager:d,scope:void 0,close:pe};me.sharedState=YS(me),me.streaming=vC(me),me.services=JS(me);let he=new Map;me.scope=(e=>{if(!e)return me;let t=he.get(e);return t||(t=kC(me,e),he.set(e,t)),t}),f.rpc=me;function ge(){try{return typeof window<`u`&&window.self===window.top}catch{return!1}}async function _e(){if(e.simpleAuth!==!1&&ge()&&typeof globalThis.prompt==`function`)for(await me.requestAuthCode().catch(()=>{});!me.isTrusted;){let e=globalThis.prompt(`devframe: enter the authentication code shown in your terminal`);if(e==null)return;let t=e.trim();if(t&&await me.requestTrustWithCode(t))return}}async function ve(){let t=await oe.requestTrust(),n=e.otpParam??`devframe_otp`,r=n?await qS(me,{param:n}):!1;t||r||me.isTrusted||await _e()}return ue=ve().then(()=>{de=!0},()=>{de=!0}),s.mcp&&lS(async()=>{let{setupBrowserAgentRpcBridge:e}=await import(`./browser-agent-rpc-KH4HHvHf-DF8dhgzY.js`);return{setupBrowserAgentRpcBridge:e}},[],import.meta.url).then(({setupBrowserAgentRpcBridge:e})=>{h||(ee=e(me))}).catch(()=>{}),le&&(le.onmessage=e=>{e.data?.type===`auth-update`&&e.data.authToken&&me.requestTrustWithToken(e.data.authToken)}),me}var LC=IC,RC=[`components`,`injectors`,`signals`,`ngrx`,`tanstackQuery`,`forms`,`router`,`pipes`,`http`,`analog`,`capacitor`,`errors`,`plugins`,`performance`,`build`],zC=[`angular`,`ngrx`,`analog`,`angular-native`,`nativescript`,`capacitor`];function BC(e){return`pangular:${e}`}var VC=[`forms`,`router`,`ngrx`,`http`,`analog`,`components`,`tanstackQuery`,`plugins`],HC={refreshMs:{default:3e3,min:500,max:8e3},navigations:{default:50,min:5,max:500},formTimeline:{default:200,min:10,max:2e3},httpCalls:{default:200,min:10,max:2e3},changeLog:{default:200,min:10,max:2e3},cdCycles:{default:200,min:10,max:2e3},cdSlowMs:{default:16,min:1,max:1e3},capacitorCalls:{default:200,min:10,max:2e3},idleAfterMs:{default:6e4,min:0,max:6e5}},UC={"opted-out":`the request sets transferCache: false`,post:`POST requests are left out unless includePostRequests is set`,method:`only GET, HEAD and POST requests are cached`,"auth-headers":`it sends an Authorization, Proxy-Authorization or Cookie header`,credentials:`it sends credentials (withCredentials or credentials: include/same-origin)`,"no-cache-request":`the request asks for no-store, no-cache or private`,"no-cache-response":`the response has Cache-Control no-store, no-cache or private`,"set-cookie":`the response sets a cookie`,error:`failed responses are not stored`,mocked:`a fault rule answered before the transfer cache ran`,filter:`the transferCache filter passed to withPangular() left it out`,"cache-off-or-filter":`the transfer cache is off, or its filter (or another withHttpTransferCacheOptions setting) left it out`},WC=[[0,`Network error (offline)`],[200,`OK`],[201,`Created`],[202,`Accepted`],[203,`Non-Authoritative Information`],[204,`No Content`],[205,`Reset Content`],[206,`Partial Content`],[207,`Multi-Status`],[208,`Already Reported`],[226,`IM Used`],[300,`Multiple Choices`],[301,`Moved Permanently`],[302,`Found`],[303,`See Other`],[304,`Not Modified`],[307,`Temporary Redirect`],[308,`Permanent Redirect`],[400,`Bad Request`],[401,`Unauthorized`],[402,`Payment Required`],[403,`Forbidden`],[404,`Not Found`],[405,`Method Not Allowed`],[406,`Not Acceptable`],[407,`Proxy Authentication Required`],[408,`Request Timeout`],[409,`Conflict`],[410,`Gone`],[411,`Length Required`],[412,`Precondition Failed`],[413,`Content Too Large`],[414,`URI Too Long`],[415,`Unsupported Media Type`],[416,`Range Not Satisfiable`],[417,`Expectation Failed`],[418,`I'm a Teapot`],[421,`Misdirected Request`],[422,`Unprocessable Content`],[423,`Locked`],[424,`Failed Dependency`],[425,`Too Early`],[426,`Upgrade Required`],[428,`Precondition Required`],[429,`Too Many Requests`],[431,`Request Header Fields Too Large`],[451,`Unavailable For Legal Reasons`],[499,`Client Closed Request`],[500,`Internal Server Error`],[501,`Not Implemented`],[502,`Bad Gateway`],[503,`Service Unavailable`],[504,`Gateway Timeout`],[505,`HTTP Version Not Supported`],[506,`Variant Also Negotiates`],[507,`Insufficient Storage`],[508,`Loop Detected`],[510,`Not Extended`],[511,`Network Authentication Required`],[520,`Web Server Returned an Unknown Error`],[521,`Web Server Is Down`],[522,`Connection Timed Out`],[523,`Origin Is Unreachable`],[524,`A Timeout Occurred`]];function GC(e){return WC.some(([t])=>t===e)}var KC=/^[a-z][a-z0-9-]{0,39}$/;function qC(e,t){let n=t.plugins?.[e],r=t.inspectors.plugins&&KC.test(e)&&(n?.enabled??!0);return{enabled:r,tools:r&&t.agent.tools.plugins&&(n?.tools??!0),actions:r&&t.actions.plugins&&(n?.actions??!0)}}var JC=`pangular`,YC={mod:`Mod`,ctrl:`Ctrl`,control:`Ctrl`,meta:`Meta`,cmd:`Meta`,command:`Meta`,alt:`Alt`,option:`Alt`,opt:`Alt`,shift:`Shift`},XC=[`Mod`,`Ctrl`,`Meta`,`Alt`,`Shift`];function ZC(e){if(typeof e!=`string`||e.length>40)return;let t=e.split(`+`).map(e=>e.trim());if(t.some(e=>!e))return;let n=new Set,r;for(let e of t){let t=YC[e.toLowerCase()];if(t){if(n.has(t))return;n.add(t);continue}if(r!==void 0)return;if(/^[a-z0-9]$/i.test(e))r=e.toUpperCase();else if(/^f([1-9]|1[0-2])$/i.test(e))r=e.toUpperCase();else return}if(r&&[...n].some(e=>e!==`Shift`)&&!(n.has(`Mod`)&&(n.has(`Ctrl`)||n.has(`Meta`))))return[...XC.filter(e=>n.has(e)),r].join(`+`)}function QC(e,t,n){let r=t.split(`+`),i=r.pop(),a=new Set(r),o=a.has(`Ctrl`)||a.has(`Mod`)&&!n,s=a.has(`Meta`)||a.has(`Mod`)&&n;if(e.ctrlKey!==o||e.metaKey!==s||e.altKey!==a.has(`Alt`)||e.shiftKey!==a.has(`Shift`))return!1;if(/^F\d+$/.test(i))return e.key.toUpperCase()===i;let c=/^\d$/.test(i)?`Digit${i}`:`Key${i}`;return e.code?e.code===c:e.key.toUpperCase()===i}function $C(e,t){if(!t)return e.replace(/^Mod\b/,`Ctrl`);let n={Mod:`⌘`,Meta:`⌘`,Ctrl:`⌃`,Alt:`⌥`,Shift:`⇧`};return e.split(`+`).map(e=>n[e]??e).join(``)}var ew=[{id:`dashboard`,label:`Dashboard`},{id:`timeline`,label:`Timeline`},{id:`audit`,label:`Audit`},{id:`analog`,label:`Analog`,inspector:`analog`},{id:`components`,label:`Components`,inspector:`components`},{id:`routes`,label:`Routes`,inspector:`router`},{id:`signals`,label:`Signals`,inspector:`signals`},{id:`injectors`,label:`Injectors`,inspector:`injectors`},{id:`store`,label:`Store`,inspector:`ngrx`},{id:`queries`,label:`Queries`,inspector:`tanstackQuery`},{id:`forms`,label:`Forms`,inspector:`forms`},{id:`pipes`,label:`Pipes`,inspector:`pipes`},{id:`network`,label:`SSR & HTTP`,inspector:`http`},{id:`errors`,label:`Errors`,inspector:`errors`},{id:`performance`,label:`Performance`,inspector:`performance`},{id:`build`,label:`Build`,inspector:`build`},{id:`capacitor`,label:`Capacitor`,inspector:`capacitor`},{id:`plugins`,label:`Plugins`,inspector:`plugins`}],tw=1e4;function nw(e){return ew.filter(t=>!(`inspector`in t)||e.inspectors[t.inspector])}var rw={components:`a component instance, by its id in the component tree`,injectors:`a component's element injector, by the component's id`,signals:`a component's signal graph, by the component's id`,forms:`a form, by its id`},iw=200;function aw(e){let t=new URLSearchParams({tab:e.tab});return e.id&&t.set(`id`,e.id),e.page&&t.set(`page`,e.page),`#${t.toString()}`}function ow(e){let t=new URLSearchParams(e.replace(/^#/,``)),n=e=>{let n=t.get(e)?.trim();return n&&n.length<=iw?n:void 0},r=n(`tab`);if(!r)return null;let i=n(`id`),a=n(`page`);return{tab:r,...i?{id:i}:{},...a?{page:a}:{}}}var sw=[{id:`settings`,title:`Open settings`,group:`Go to`,keywords:`preferences tabs`},{id:`pick-component`,title:`Pick component on page`,group:`Actions`,keywords:`select inspect element`,inspector:`components`},{id:`cd-record-start`,title:`Start recording change detection`,group:`Actions`,keywords:`profiler cycles`,inspector:`components`},{id:`cd-record-stop`,title:`Stop recording change detection`,group:`Actions`,keywords:`profiler cycles`,inspector:`components`},{id:`cd-clear`,title:`Clear change detection recording`,group:`Actions`,keywords:`reset recordings cycles`,inspector:`components`},{id:`theme:system`,title:`Theme: follow the system`,group:`Theme`,keywords:`auto`},{id:`theme:light`,title:`Theme: light`,group:`Theme`},{id:`theme:dark`,title:`Theme: dark`,group:`Theme`},{id:`dock:float`,title:`Popup: float`,group:`Popup`,keywords:`dock`,popupOnly:!0},{id:`dock:bottom`,title:`Popup: dock to the bottom`,group:`Popup`,keywords:`dock`,popupOnly:!0},{id:`dock:right`,title:`Popup: dock to the right`,group:`Popup`,keywords:`dock`,popupOnly:!0},{id:`dock:reset-size`,title:`Popup: reset the docked size`,group:`Popup`,keywords:`splitter resize height width`,popupOnly:!0},{id:`popout`,title:`Popup: open in its own window`,group:`Popup`,keywords:`pop out detach new window`,popupOnly:!0},{id:`popout:return`,title:`Popup: back into the page`,group:`Popup`,keywords:`pop in attach dock window`,popupOnly:!0}];function cw(e){let t=nw(e).map(e=>({id:`tab:${e.id}`,title:`Go to ${e.label}`,group:`Go to`,keywords:`tab open`})),n=sw.filter(t=>!t.inspector||e.inspectors[t.inspector]).map(({inspector:e,...t})=>t);return[...t,...n]}function lw(e){return e&&typeof e==`object`&&!Array.isArray(e)?e:{}}var uw=Object.freeze({minLength:24,threshold:4.5}),dw={min:16,max:512},fw={min:2,max:6};function pw(e){return typeof e==`number`&&Number.isInteger(e)&&e>=dw.min&&e<=dw.max}function mw(e){return typeof e==`number`&&Number.isFinite(e)&&e>=fw.min&&e<=fw.max}function hw(e){if(e===!0)return{...uw};if(!e||typeof e!=`object`||Array.isArray(e))return;let{minLength:t,threshold:n}=e;return{minLength:pw(t)?t:uw.minLength,threshold:mw(n)?n:uw.threshold}}function gw(e){let t=hw(e);return t?{entropy:t}:{}}function _w(e,t){return typeof e==`boolean`?e:t}var vw=100,yw=100;function bw(e){if(!Array.isArray(e))return[];let t=e.filter(e=>typeof e==`string`).map(e=>e.trim()).filter(e=>e&&e.length<=yw);return[...new Set(t)].slice(0,vw)}function xw(e,t){let{default:n,min:r,max:i}=HC[t];return typeof e!=`number`||!Number.isFinite(e)?n:Math.min(i,Math.max(r,Math.round(e)))}function Sw(e,t){return Object.fromEntries(e.map(e=>[e,t(e)]))}function Cw(e){let t=lw(e),n=lw(t.agent),r=lw(t.inspectors),i=lw(n.tools),a=lw(t.actions),o=_w(t.actions,!0),s=lw(t.redaction),c=lw(t.limits),l=Sw(RC,e=>_w(r[e],!0));return{inspectors:l,agent:{readOnly:_w(n.readOnly,!1),tools:Sw(RC,e=>l[e]&&_w(i[e],!0)),browserTools:_w(n.browserTools,!1)},actions:Sw(VC,e=>l[e]&&_w(a[e],o)),redaction:{secretNames:bw(s.secretNames),unmask:bw(s.unmask),...gw(s.entropy)},limits:Object.fromEntries(Object.keys(HC).map(e=>[e,xw(c[e],e)])),popup:{hotkey:Aw(lw(t.popup).hotkey)},plugins:kw(t.plugins),lint:{rules:Dw(t.lint)},analog:Tw(t.analog),ngrx:{trace:_w(lw(t.ngrx).trace,!1)}}}var ww=500;function Tw(e){let t=lw(e).contentSchema;return typeof t==`string`&&t.trim()&&t.length<=ww?{contentSchema:t.trim()}:{}}var Ew=200;function Dw(e){let t=lw(lw(e).rules),n={};for(let[e,r]of Object.entries(t).slice(0,Ew))typeof r==`boolean`&&(n[e]=r);return n}var Ow=100;function kw(e){let t={};for(let[n,r]of Object.entries(lw(e)).slice(0,Ow)){if(!KC.test(n))continue;if(typeof r==`boolean`){t[n]={enabled:r,tools:!0,actions:!0};continue}let e=lw(r);r!==void 0&&Object.keys(e).length&&(t[n]={enabled:_w(e.enabled,!0),tools:_w(e.tools,!0),actions:_w(e.actions,!0)})}return t}function Aw(e){return e===!1?!1:ZC(e)??`Alt+Shift+P`}function jw(e){let t=e?.configs;return Cw(t?.[JC])}function Mw(e){return`${{forms:`Writing to forms`,router:`Navigating and clearing navigations`,ngrx:`Restoring NgRx state, dispatching actions and changing the Store DevTools history`,http:`Changing HTTP mock rules and SSR overrides, refetching the TransferState payload, and clearing HTTP calls`,analog:`Calling API routes, clearing server calls, running Nitro tasks and purging the Nitro cache`,components:`Editing component properties and signals`,tanstackQuery:`Invalidating and refetching TanStack queries`,plugins:`Running plugin actions`}[e]} is turned off in the devtools config (actions.${e}).`}var Nw=[`pangular:build-meta`],Pw={components:`Components`,injectors:`Injectors`,signals:`Signals`,ngrx:`NgRx`,tanstackQuery:`TanStack Query`,forms:`Forms`,router:`Router`,pipes:`Pipes`,http:`HTTP`,analog:`Analog`,capacitor:`Capacitor`,errors:`Errors`,plugins:`Plugins`,performance:`Performance`,build:`Build`},Fw={forms:`Form writes`,router:`Navigation`,ngrx:`NgRx restore, dispatch and Store DevTools`,http:`HTTP mocking`,analog:`Analog API calls`,components:`Component edits`,tanstackQuery:`TanStack Query invalidate and refetch`,plugins:`Plugin actions`},Iw={refreshMs:e=>`poll every ${e} ms`,navigations:e=>`${e} navigations`,formTimeline:e=>`${e} form events`,httpCalls:e=>`${e} HTTP calls`,changeLog:e=>`${e} NgRx changes`,cdCycles:e=>`${e} change detection cycles`,cdSlowMs:e=>`slow cycles over ${e} ms`,capacitorCalls:e=>`${e} Capacitor plugin calls`,idleAfterMs:e=>e?`idle ${e/1e3} s after the last agent call`:`never idle`};function Lw(e){if(!e)return[];let t=[`On`];return e.minLength!==uw.minLength&&t.push(`${e.minLength} characters or more`),e.threshold!==uw.threshold&&t.push(`up to ${e.threshold} bits per character`),t}function Rw(e){let t=[],n=(e,n)=>{n.length&&t.push({label:e,value:n.join(`, `)})},r=RC.filter(t=>e.inspectors[t]);n(`Inspectors off`,RC.filter(t=>!e.inspectors[t]).map(e=>Pw[e])),n(`Agent`,e.agent.readOnly?[`Read-only`]:[]),n(`Hidden from the agent`,r.filter(t=>!e.agent.tools[t]).map(e=>Pw[e])),n(`Blocked actions`,VC.filter(t=>e.inspectors[t]&&!e.actions[t]).map(e=>Fw[e])),n(`Extra secret names`,e.redaction.secretNames),n(`Unmasked names`,e.redaction.unmask),n(`Entropy masking`,Lw(e.redaction.entropy)),n(`Limits`,Object.keys(HC).filter(t=>e.limits[t]!==HC[t].default).map(t=>Iw[t](e.limits[t]))),e.popup.hotkey!==`Alt+Shift+P`&&n(`Popup shortcut`,[e.popup.hotkey===!1?`Off`:e.popup.hotkey]);let i=Object.entries(e.plugins??{});return n(`Plugins off`,i.filter(([,e])=>!e.enabled).map(([e])=>e)),n(`Plugin tools or actions off`,i.filter(([,e])=>e.enabled&&(!e.tools||!e.actions)).map(([e,t])=>`${e} (${[!t.tools&&`tools`,!t.actions&&`actions`].filter(Boolean).join(`, `)})`)),n(`Lint rules off`,Object.entries(e.lint?.rules??{}).filter(([,e])=>!e).map(([e])=>e)),t}function zw(e){let t={tags:[],directives:[],text:``},n=e.toLowerCase();return n=n.replace(/<\s*([^<>\s]+)\s*>/g,(e,n)=>(t.tags.push({value:n,exact:!0}),` `)),n=n.replace(/\[\s*([^[\]\s]+)\s*\]/g,(e,n)=>(t.directives.push({value:n,exact:!0}),` `)),n=n.replace(/(^|\s)([<[])([^<>[\]\s]*)$/,(e,n,r,i)=>(i&&(r===`<`?t.tags:t.directives).push({value:i,exact:!1}),n)),t.text=n.replace(/\s+/g,` `).trim(),t}function Bw(e){return!e.tags.length&&!e.directives.length&&!e.text}function Vw(e,t){let n=e.tag.toLowerCase(),r=(e.directives??[]).map(e=>e.toLowerCase()),i=(e.attributes??[]).map(e=>e.toLowerCase()),a=[...r,...r.map(e=>e.replace(/directive$/,``)),...i];for(let{value:e,exact:r}of t.tags)if(r?n!==e:!n.startsWith(e))return!1;for(let{value:e,exact:n}of t.directives)if(!a.some(t=>n?t===e:t.includes(e)))return!1;if(t.text){let a=t.text;if(!(e.name.toLowerCase().includes(a)||n.includes(a)||r.some(e=>e.includes(a))||i.some(e=>e.includes(a))))return!1}return!0}var Hw={debugApi:{subject:`Live data`,since:`12.0`},injectorProviders:{subject:`Reading providers and environment injectors`,since:`16.2`},injectorMetadata:{subject:`The full injector tree`,since:`17.0`},isSignal:{subject:`Telling signals apart in component values`,since:`17.1`},signalGraph:{subject:`The live signal graph`,since:`20.1`},deferBlocks:{subject:`Listing @defer blocks`,since:`19.1`},forBlocks:{subject:`Listing @for blocks`,since:`22.0`},profiler:{subject:`Recording change detection`,since:`20.0`},angularProfiling:{subject:`Angular profiling`,since:`20.0`},routerInstance:{subject:`The router debug util`,since:`20.3`}};function Uw(e){let t=/^(\d+)\.(\d+)/.exec(e.trim());return t?`${t[1]}.${t[2]}`:e.trim()}function Ww(e){let t=/^(\d+)(?:\.(\d+))?/.exec(e.trim());return t?[Number(t[1]),Number(t[2]??0)]:null}function Gw(e,t){let n=Ww(e),r=Ww(t);return!n||!r?!1:n[0]===r[0]?n[1]>=r[1]:n[0]>r[0]}function Kw(e,t){return e?.capabilities?.[t]===!1}function qw(e,t){let n=Hw[e],r=`${n.subject} needs Angular ${n.since} or later`;if(!t)return`${r}; this page's Angular version is unknown.`;let i=Uw(t);return Gw(t,n.since)?`${r} in a development build; this page runs Angular ${i} without it, which usually means a production build.`:`${r}; this page runs Angular ${i}.`}function Jw(e){return e.hydration===`hydrated`&&e.hydratedAt===void 0?`hydrated before inspection`:e.hydration}var Yw=/^on (viewport|interaction|hover)\b/;function Xw(e){let t=e.filter(e=>!/^(prefetch|hydrate) /.test(e));return t.length>0&&t.every(e=>Yw.test(e))}function Zw(e,t){let n=[],r=e.since>0?Math.max(0,Math.round((t-e.since)/1e3)):0;return e.state===`error`&&n.push({kind:`failed`,text:`failed to load`,label:`failed`}),(e.state===`placeholder`||e.state===`initial`)&&r*1e3>=1e4&&n.push(Xw(e.triggers)?{kind:`waiting`,text:`waiting for its trigger for ${r}s`,label:`waiting ${r}s`,seconds:r}:{kind:`stuck`,text:`on its placeholder for ${r}s`,label:`stuck ${r}s`,seconds:r}),e.hydrateNever?n.push({kind:`hydrate-never`,text:`hydrate never: the server HTML stays static`,label:`hydrate never`}):e.hydration===`dehydrated`&&n.push({kind:`dehydrated`,text:`still dehydrated`,label:`dehydrated`}),n}var Qw=`pangular-page-id`,$w=null;function eT(e){$w=e}function tT(){if($w)return $w;try{return new URLSearchParams(location.search).get(`pageId`)||(window.top===window?null:sessionStorage.getItem(Qw)||null)}catch{return null}}function nT(e,t){if(t.chosen&&e[t.chosen])return t.chosen;if(t.host)return t.host;if(t.previous&&e[t.previous])return t.previous;let n=null;for(let t of Object.values(e))(!n||t.reportedAt>n.reportedAt)&&(n=t);return n?.pageId??null}function rT(e,t){return e?t?e.pages?.[t]??null:e:null}function iT(e,t){return e?t?e.pages?.[t]??null:e.graph??null:null}function aT(){return{functions:[...Nw]}}function oT(e,t,n){return e?e.scope(`pangular`).rpc.call(t,...n===void 0?[]:[n]):Promise.resolve(null)}function sT(e,t,n){return oT(e,t,n).then(e=>e,()=>null)}function cT(e){return e?.connectionMeta.backend===`static`}function lT(e){let t=()=>{let t=e()?.scope(`pangular`).rpc;t&&(t.callEvent(`request-page-highlight`,null),t.callEvent(`request-form-highlight`,null))};return addEventListener(`pagehide`,t),()=>{removeEventListener(`pagehide`,t),t()}}function uT(e=globalThis){delete e.__DEVFRAME_CONNECTION__,delete e.__DEVFRAME_CONNECTION_META__}function dT(e){return e.split(`@`)[1]??``}var fT={signal:`Signal Forms`,reactive:`Reactive`,template:`Template-driven`},pT={own:`validator`,directive:`template attribute`,tree:`cross-field rule`,async:`async`,parse:`parse`,submission:`server`,schema:`schema`,manual:`setErrors`},mT=sT,hT={key:`name looks secret`,"input-type":`password input`,autocomplete:`autocomplete is a secret kind`,marker:`marked as mask`,parent:`inside a secret group`,config:`listed in mask`};function gT(e){return hT[e]??e}var _T=`https://pangular-inspector.dev/security/#opt-fields-in-or-out`;async function vT(e,t){return await mT(e,`request-form-action`,t)??{ok:!1,error:`The devtools server did not answer.`}}function yT(e){return`${e.ok?e.message??`Done.`:e.error??`Failed.`}${e.skipped?.length?` Skipped: ${e.skipped.map(e=>`${e.path} (${e.reason})`).join(`, `)}.`:``}${e.status?` Status: ${e.status}.`:``}`}var bT=/"(?:[^"\\\n]|\\.)*"|`([^`\n]*)`|\*\*/g;function xT(e){return(e??``).replace(/^_Labels, paths.*_\n\n/,``).replace(bT,(e,t)=>t??(e===`**`?``:e))}function ST(e,t){let n=Math.max(0,e-t),r=Math.ceil(n/6e4);if(r<60)return`in ${r} min`;let i=Math.round(r/60);return i<48?`in ${i} ${i===1?`hour`:`hours`}`:`in ${Math.round(i/24)} days`}function CT(e,t){return e.length?e.join(`, `):t}function wT(e,t){let n=[];if(n.push({label:`One-time code`,value:e.auth?e.oneTimeCode.state===`locked`?`Locked after too many wrong codes: run pangular token --rotate or restart the server for a new code`:e.oneTimeCode.expiresAt?`On, current code expires ${ST(e.oneTimeCode.expiresAt,t)}`:`On`:`Off: every client is trusted`}),e.auth){let{count:r,nextExpiresAt:i,lastExpiresAt:a}=e.tokens;n.push({label:`Trusted clients`,value:r?r===1||i===a?`${r} ${r===1?`token`:`tokens`}, expires ${ST(i??t,t)}`:`${r} tokens, the first expires ${ST(i??t,t)}, the last ${ST(a??t,t)}`:`None`}),e.pairingTokens&&n.push({label:`Pairing tokens`,value:`${e.pairingTokens} accepted instead of the code`})}return e.reported?(n.push({label:`Reach`,value:e.network?`This machine and other machines`:`This machine only`}),n.push({label:`Allowed origins`,value:e.originCheck?`${CT(e.allowedOrigins,`This machine and the Chrome extension`)}${e.customOrigins?`, plus a custom origin check`:``}`:`Any: the origin check is off`}),(e.allowedHosts===`any`||e.allowedHosts.length)&&n.push({label:`Allowed hosts`,value:e.allowedHosts===`any`?`Any`:e.allowedHosts.join(`, `)}),n):n}function TT(e){return jw(e?.connectionMeta)}function ET(e){return Array.isArray(e)&&e.every(e=>typeof e==`string`)?[...e]:void 0}function DT(e,t){if(!t||typeof t!=`object`)return e;let n=ET(t.secretNames),r=ET(t.unmask);if(!n||!r)return e;let i=hw(t.entropy);return{...e,redaction:i?{secretNames:n,unmask:r,entropy:i}:{secretNames:n,unmask:r}}}function OT(e,t){return TT(e).actions[t]}var kT={components:`components`,routes:`router`,signals:`signals`,injectors:`injectors`,store:`ngrx`,queries:`tanstackQuery`,forms:`forms`,pipes:`pipes`,network:`http`,analog:`analog`,capacitor:`capacitor`,errors:`errors`,plugins:`plugins`,performance:`performance`,build:`build`};function AT(e){return kT[e]}var jT=`https://pangular-inspector.dev/getting-started/configuration/#inspectors-and-agent-tools`;function MT(e,t){let n=kT[e];return!n||t.inspectors[n]}function NT(e,t){e&1&&(w(),dg(0,`rect`,5)(1,`rect`,6)(2,`rect`,7)(3,`rect`,8))}function PT(e,t){e&1&&(w(),dg(0,`path`,9)(1,`circle`,10)(2,`circle`,11)(3,`path`,12))}function FT(e,t){e&1&&(w(),dg(0,`path`,13)(1,`path`,14))}function IT(e,t){e&1&&(w(),dg(0,`path`,15)(1,`path`,16)(2,`path`,17))}function LT(e,t){e&1&&(w(),dg(0,`circle`,18)(1,`path`,19)(2,`circle`,20))}function RT(e,t){e&1&&(w(),dg(0,`path`,1))}function zT(e,t){e&1&&(w(),dg(0,`path`,21)(1,`path`,22)(2,`path`,23)(3,`path`,24))}function BT(e,t){e&1&&(w(),dg(0,`ellipse`,25)(1,`path`,26)(2,`path`,27))}function VT(e,t){e&1&&(w(),dg(0,`rect`,28)(1,`path`,29)(2,`path`,30)(3,`path`,31))}function HT(e,t){e&1&&(w(),dg(0,`circle`,32)(1,`path`,9)(2,`path`,33))}function UT(e,t){e&1&&(w(),dg(0,`path`,34)(1,`path`,35)(2,`path`,36)(3,`path`,37)(4,`circle`,38))}function WT(e,t){e&1&&(w(),dg(0,`circle`,39)(1,`path`,40))}function GT(e,t){e&1&&(w(),dg(0,`ellipse`,41)(1,`path`,42)(2,`path`,43)(3,`path`,44)(4,`path`,45))}function KT(e,t){e&1&&(w(),dg(0,`circle`,32)(1,`path`,46)(2,`path`,47))}function qT(e,t){e&1&&(w(),dg(0,`path`,48)(1,`path`,49))}function JT(e,t){e&1&&(w(),dg(0,`path`,50)(1,`path`,51)(2,`path`,52))}function YT(e,t){e&1&&(w(),dg(0,`path`,2))}function XT(e,t){e&1&&(w(),dg(0,`path`,3))}function ZT(e,t){e&1&&(w(),dg(0,`path`,4))}var QT=class e{name=$.required();static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-tab-icon`]],inputs:{name:[1,`name`]},decls:20,vars:1,consts:[[`viewBox`,`0 0 24 24`,`width`,`16`,`height`,`16`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`1.8`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`,`aria-hidden`,`true`],[`d`,`M22 12h-4l-3 9L9 3l-3 9H2`],[`d`,`M10 3h4v3a2 2 0 1 0 4 0V5h1a2 2 0 0 1 2 2v4h-2a2 2 0 1 0 0 4h2v4a2 2 0 0 1-2 2h-4v-2a2 2 0 1 0-4 0v2H7a2 2 0 0 1-2-2v-4H4a2 2 0 1 1 0-4h1V7a2 2 0 0 1 2-2h3Z`],[`d`,`m8 3 4 8 5-5 5 15H2L8 3z`],[`fill`,`currentColor`,`stroke`,`none`,`transform`,`translate(1.8 1.8) scale(0.85)`,`d`,`M24 3.7l-5.766 5.766 5.725 5.736-3.713 3.712L5.073 3.742 8.786.03l5.736 5.726L20.284 0 24 3.7zM.029 8.785l3.713-3.713 15.173 15.173-3.713 3.714-5.732-5.726L3.7 24 0 20.285l5.754-5.764L.029 8.785z`],[`x`,`3`,`y`,`3`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`14`,`y`,`3`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`x`,`14`,`y`,`12`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`3`,`y`,`16`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`d`,`M3 12h18`],[`cx`,`7`,`cy`,`12`,`r`,`2`],[`cx`,`14`,`cy`,`12`,`r`,`2`],[`d`,`M18 7v10`],[`d`,`M9 11l2 2 4-4`],[`d`,`M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6l-8-3Z`],[`d`,`M12 2 3 7l9 5 9-5-9-5Z`],[`d`,`m3 12 9 5 9-5`],[`d`,`m3 17 9 5 9-5`],[`cx`,`6`,`cy`,`19`,`r`,`3`],[`d`,`M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15`],[`cx`,`18`,`cy`,`5`,`r`,`3`],[`d`,`M12 22v-5`],[`d`,`M9 8V2`],[`d`,`M15 8V2`],[`d`,`M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z`],[`cx`,`12`,`cy`,`5`,`rx`,`9`,`ry`,`3`],[`d`,`M3 5v14a9 3 0 0 0 18 0V5`],[`d`,`M3 12a9 3 0 0 0 18 0`],[`x`,`3`,`y`,`4`,`width`,`18`,`height`,`16`,`rx`,`2`],[`d`,`M7 9h10`],[`d`,`M7 13h6`],[`d`,`M7 17h8`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z`],[`d`,`M4 7h10`],[`d`,`M4 17h6`],[`d`,`m14 13 4 4-4 4`],[`d`,`M10 17h8`],[`cx`,`18`,`cy`,`7`,`r`,`3`],[`cx`,`12`,`cy`,`12`,`r`,`3`],[`d`,`M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z`],[`cx`,`11`,`cy`,`5`,`rx`,`8`,`ry`,`3`],[`d`,`M3 5v6c0 1.66 3.58 3 8 3`],[`d`,`M3 11v6c0 1.66 3.58 3 8 3`],[`d`,`M21 14a4 4 0 1 1-1.2-2.85L21 12.3`],[`d`,`M21 9v3.3h-3.3`],[`d`,`M12 7v6`],[`d`,`M12 16.5v.01`],[`d`,`M12 14l4-4`],[`d`,`M3.34 19a10 10 0 1 1 17.32 0`],[`d`,`M21 16V8l-9-5-9 5v8l9 5 9-5Z`],[`d`,`m3.3 7 8.7 5 8.7-5`],[`d`,`M12 22V12`]],template:function(e,t){if(e&1&&(w(),R(0,`svg`,0),A(1,NT,4,0)(2,PT,4,0)(3,FT,2,0)(4,IT,3,0)(5,LT,3,0)(6,RT,1,0,`:svg:path`,1)(7,zT,4,0)(8,BT,3,0)(9,VT,4,0)(10,HT,3,0)(11,UT,5,0)(12,WT,2,0)(13,GT,5,0)(14,KT,3,0)(15,qT,2,0)(16,JT,3,0)(17,YT,1,0,`:svg:path`,2)(18,XT,1,0,`:svg:path`,3)(19,ZT,1,0,`:svg:path`,4),z()),e&2){let e;D(),j((e=t.name())===`dashboard`?1:e===`timeline`?2:e===`audit`?3:e===`components`?4:e===`routes`?5:e===`signals`?6:e===`injectors`?7:e===`store`?8:e===`forms`?9:e===`network`?10:e===`pipes`?11:e===`settings`?12:e===`queries`?13:e===`errors`?14:e===`performance`?15:e===`build`?16:e===`plugins`?17:e===`analog`?18:e===`capacitor`?19:-1)}},styles:[`[_nghost-%COMP%] {
-  display: inline-flex;
-  flex-shrink: 0;
-}`]})},$T=(e,t)=>t.tab,eE=(e,t)=>t.label;function tE(e,t){e&1&&K(0),e&2&&J(` `,W().meta()?.projectName,` `)}function nE(e,t){e&1&&K(0,` Project details unavailable `)}function rE(e,t){e&1&&K(0,` Loading… `)}function iE(e,t){e&1&&(K(0,` Run `),F(1,`code`),K(2,`pangular build`),I(),K(3,` again to rebuild the report. `))}function aE(e,t){e&1&&K(0,` Check that the dev server is running. `)}function oE(e,t){if(e&1){let e=B();F(0,`button`,13),H(`click`,function(){return S(e),C(W(2).loadMeta())}),K(1,`Try again`),I()}}function sE(e,t){if(e&1&&(F(0,`p`,11),A(1,iE,4,0)(2,aE,1,0),I(),A(3,oE,2,0,`button`,12)),e&2){let e=W();D(),j(e.staticReport()?1:2),D(2),j(e.staticReport()?-1:3)}}function cE(e,t){e&1&&(F(0,`li`,5)(1,`span`),K(2,`Analog`),I(),K(3),I()),e&2&&(D(3),q(t))}function lE(e,t){e&1&&(F(0,`li`)(1,`span`),K(2,`Change detection`),I(),K(3),I()),e&2&&(D(3),q(t))}function uE(e,t){if(e&1&&(F(0,`span`,20),K(1),I(),F(2,`span`,21),K(3),I()),e&2){let e=W().$implicit,t=W();D(),q(t.cards()[e.tab]?.value),D(2),q(t.cards()[e.tab]?.sub)}}function dE(e,t){e&1&&(F(0,`span`,22),K(1,`–`),I(),F(2,`span`,21),K(3,`Count unavailable`),I())}function fE(e,t){e&1&&(L(0,`span`,23),F(1,`span`,21),K(2,`Counting…`),I())}function pE(e,t){if(e&1){let e=B();F(0,`button`,14),H(`click`,function(){let t=S(e).$implicit;return C(W().navigate.emit(t.tab))}),F(1,`span`,15)(2,`span`,16),L(3,`app-tab-icon`,17),I(),F(4,`span`,18),K(5,`→`),I()(),F(6,`span`,19),K(7),I(),A(8,uE,4,2)(9,dE,4,0)(10,fE,3,0),I()}if(e&2){let e,n=t.$implicit,r=t.$index,i=W().stateOf(n.tab);t_(`animation-delay`,60*r,`ms`),k(`aria-busy`,i===`loading`),D(3),P(`name`,n.tab),D(4),q(n.label),D(),j((e=i)===`ready`?8:e===`error`?9:10)}}function mE(e,t){e&1&&(F(0,`p`),K(1,`Loading…`),I())}function hE(e,t){if(e&1&&(F(0,`div`)(1,`dt`),K(2),I(),F(3,`dd`),K(4),I()()),e&2){let e=t.$implicit;D(2),q(e.label),D(2),q(e.value)}}function gE(e,t){if(e&1&&(F(0,`dl`),M(1,hE,5,2,`div`,null,eE),I()),e&2){let e=W();D(),N(e.configItems())}}function _E(e,t){e&1&&(F(0,`p`),K(1,`Defaults`),I())}function vE(e,t){if(e&1&&(F(0,`div`)(1,`dt`),K(2),I(),F(3,`dd`),K(4),I()()),e&2){let e=t.$implicit;D(2),q(e.label),D(2),q(e.value)}}function yE(e,t){e&1&&(F(0,`section`,10)(1,`h2`,24),K(2,`Security`),I(),F(3,`dl`),M(4,vE,5,2,`div`,null,eE),I()()),e&2&&(D(4),N(t))}var bE=[{tab:`components`,label:`Components`},{tab:`routes`,label:`Routes`},{tab:`signals`,label:`Signals`},{tab:`injectors`,label:`Injectors`},{tab:`store`,label:`NgRx declarations`},{tab:`pipes`,label:`Pipes`},{tab:`forms`,label:`Forms`},{tab:`network`,label:`SSR & HTTP`}];function xE(e){return bE.filter(t=>MT(t.tab,e))}var SE={zoneless:`Zoneless`,zone:`zone.js`,"zone-unused":`Zoneless, zone.js loaded`};function CE(e){return e&&Object.hasOwn(SE,e)?SE[e]:null}var wE=new Set([`signal`,`computed`,`linkedSignal`,`effect`]),TE={action:[`action`,`actions`],reducer:[`reducer`,`reducers`],effect:[`effect`,`effects`],selector:[`selector`,`selectors`],feature:[`feature`,`features`],"store-setup":[`setup call`,`setup calls`],"signal-store":[`signal store`,`signal stores`],"signal-state":[`signal state`,`signal states`],"signal-method":[`signal method`,`signal methods`]};function EE(e,t,n){return`${e} ${e===1?t:n}`}function DE(e,t){for(let n of e??[])t(n),DE(n.children,t)}function OE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`discovered in source`};let t=e.filter(e=>e.kind===`directive`).length;return{value:e.length-t,sub:`components · ${EE(t,`directive`,`directives`)}`}}function kE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`route entries in source`};let t=e.filter(e=>e.kind===`redirect`).length;return{value:new Set(e.filter(e=>e.kind===`page`).map(e=>e.fullPath??e.path??``)).size,sub:`navigable paths · ${EE(t,`redirect`,`redirects`)}`}}function AE(e){let t=new Map;for(let n of e)n.kind&&t.set(n.kind,(t.get(n.kind)??0)+1);if(!t.size)return{value:e.length,sub:`declarations in source`};let n=[...t].sort((e,t)=>t[1]-e[1]).map(([e,t])=>{let[n,r]=TE[e]??[e,e];return EE(t,n,r)});return{value:e.length,sub:n.join(` · `)}}function jE(e,t){let n=e?.forms??[],r=t?n.filter(e=>dT(e.id)===t):n;if(!r.length)return{value:0,sub:`no forms on the page yet`};let i=r.filter(e=>e.root?.status===`INVALID`).length;return{value:r.length,sub:`${r.length===1?`form`:`forms`} · ${i} invalid`}}function ME(e){return e.cancelled||e.status===void 0?!1:e.status===0||e.status>=400}function NE(e,t){let n=e?.pages??[],r=t?n.find(e=>e.pageId===t)??null:n.reduce((e,t)=>!e||t.reportedAt>e.reportedAt?t:e,null),i=t&&!r?[]:e?.serverCalls??[],a=r?.initialUrl,o=[...a?i.filter(e=>!e.pageUrl||e.pageUrl===a):i,...r?.calls??[]];if(!o.length)return{value:0,sub:`no calls recorded yet`};let s=o.filter(ME).length;return{value:o.length,sub:`${o.length===1?`call`:`calls`} · ${s} failed`}}var PE=class e{rpc=$(null);navigate=cv();staticReport=X(()=>cT(this.rpc()));meta=T(null);security=T(null);redaction=T(null);config=X(()=>DT(TT(this.rpc()),this.redaction()));stats=X(()=>this.rpc()?xE(this.config()):[]);configItems=X(()=>Rw(this.config()));metaState=T(`loading`);states=T({});rows=T({});injectorTree=T(null);signalGraph=T(null);formsState=T(null);httpState=T(null);pageId=tT();destroyRef=x(Ss);stopLive=[];zone=X(()=>CE(rT(this.injectorTree(),this.pageId)?.zone));liveInjectors=X(()=>{let e=rT(this.injectorTree(),this.pageId);if(!e?.roots?.length)return null;let t=0,n=0,r=e=>{t++,n+=e.providers?.length??0};return DE(e.roots,r),DE(e.environment,r),{injectors:t,providers:n}});liveSignals=X(()=>{let e=iT(this.signalGraph(),this.pageId);return e?.nodes?.length?e.nodes.filter(e=>wE.has(e.kind??``)).length:null});cards=X(()=>{let e=this.rows(),t={};if(e.components&&(t.components=OE(e.components)),e.routes&&(t.routes=kE(e.routes)),e.store&&(t.store=AE(e.store)),e.pipes){let n=e.pipes.filter(e=>e.builtin).length;t.pipes={value:e.pipes.length-n,sub:n?`custom pipes · ${n} built-in in use`:`custom pipes in source`}}let n=this.liveSignals();n===null?e.signals&&(t.signals={value:e.signals.length,sub:`signal declarations in source`}):t.signals={value:n,sub:e.signals?`live on the page · ${e.signals.length} declared in source`:`live on the page`};let r=this.liveInjectors();r?t.injectors={value:r.injectors,sub:`live injectors · ${EE(r.providers,`provider`,`providers`)}`}:e.injectors&&(t.injectors={value:e.injectors.filter(e=>e.type!==`injection`).length,sub:`provider declarations in source`});let i=this.formsState();i&&(t.forms=jE(i,this.pageId));let a=this.httpState();return a&&(t.network=NE(a,this.pageId)),t});loadMeta(e=this.rpc()){e&&(this.metaState.set(`loading`),e.scope(`pangular`).rpc.call(`build-meta`).then(t=>{this.rpc()===e&&(this.meta.set(t),this.metaState.set(`ready`))}).catch(()=>{this.rpc()===e&&this.metaState.set(`error`)}))}loadRedaction(e){this.redaction.set(null),!cT(e)&&oT(e,`redaction-config`).then(t=>{this.rpc()===e&&this.redaction.set(t)}).catch(()=>{})}loadSecurity(e){this.security.set(null),!cT(e)&&sT(e,`security-status`).then(t=>{this.rpc()===e&&t&&this.security.set(wT(t,Date.now()))})}constructor(){E(()=>{let e=this.rpc();if(!e)return;let t=e.scope(`pangular`);this.states.set({}),this.rows.set({}),this.formsState.set(null),this.httpState.set(null),this.loadMeta(e),this.loadRedaction(e),this.loadSecurity(e);let n=TT(e),r=e=>MT(e,n);r(`components`)&&this.load(t.rpc.call(`get-components`),`components`),r(`routes`)&&this.load(t.rpc.call(`get-routes`),`routes`),r(`signals`)&&this.load(t.rpc.call(`get-signals`),`signals`),r(`injectors`)&&this.load(t.rpc.call(`get-providers`),`injectors`),r(`store`)&&this.load(t.rpc.call(`get-ngrx-store`),`store`),r(`pipes`)&&this.load(t.rpc.call(`get-pipes`),`pipes`),this.watchLive(e,n)}),this.destroyRef.onDestroy(()=>this.unwatch())}stateOf(e){return(e===`signals`?this.liveSignals():e===`injectors`?this.liveInjectors():null)===null?this.states()[e]??`loading`:`ready`}load(e,t){let n=e=>this.states.update(n=>({...n,[t]:e}));e.then(e=>{this.rows.update(n=>({...n,[t]:Array.isArray(e)?e:[]})),n(`ready`)}).catch(()=>n(`error`))}async watchLive(e,t){this.unwatch();let n=e.scope(`pangular`).rpc,r=async(t,r,i)=>{let a=e=>i&&this.states.update(t=>({...t,[i]:e}));try{let i=await n.sharedState(t);if(this.destroyRef.destroyed||this.rpc()!==e)return;r(i.value()),a(`ready`),this.stopLive.push(i.on(`updated`,e=>r(e)))}catch{if(this.destroyRef.destroyed||this.rpc()!==e)return;r(null),a(`error`)}};await Promise.all([t.inspectors.injectors&&r(`injector-tree`,e=>this.injectorTree.set(e)),t.inspectors.signals&&r(`signal-graph`,e=>this.signalGraph.set(e)),MT(`forms`,t)&&r(`forms`,e=>this.formsState.set(e??{}),`forms`),MT(`network`,t)&&r(`http`,e=>this.httpState.set(e??{}),`network`)])}unwatch(){for(let e of this.stopLive.splice(0))e()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-dashboard`]],inputs:{rpc:[1,`rpc`]},outputs:{navigate:`navigate`},decls:34,vars:15,consts:[[`aria-labelledby`,`project-title`,1,`project`],[1,`project-head`],[1,`eyebrow`],[`id`,`project-title`],[1,`chips`],[1,`analog`],[1,`grid`],[`type`,`button`,1,`stat`,3,`animation-delay`],[`aria-labelledby`,`config-title`,1,`config`],[`id`,`config-title`],[`aria-labelledby`,`security-title`,1,`config`],[1,`hint`],[`type`,`button`,1,`retry`],[`type`,`button`,1,`retry`,3,`click`],[`type`,`button`,1,`stat`,3,`click`],[1,`top`],[1,`icon`],[3,`name`],[`aria-hidden`,`true`,1,`go`],[1,`label`],[1,`big`],[1,`sub`],[1,`big`,`muted`],[`aria-hidden`,`true`,1,`big`,`skeleton`],[`id`,`security-title`]],template:function(e,t){if(e&1&&(F(0,`section`,0)(1,`div`,1)(2,`p`,2),K(3,`Project`),I(),F(4,`h2`,3),A(5,tE,1,1)(6,nE,1,0)(7,rE,1,0),I(),A(8,sE,4,2),I(),F(9,`ul`,4)(10,`li`)(11,`span`),K(12,`Angular`),I(),K(13),I(),F(14,`li`)(15,`span`),K(16,`TypeScript`),I(),K(17),I(),F(18,`li`)(19,`span`),K(20,`SSR`),I(),K(21),I(),A(22,cE,4,1,`li`,5),A(23,lE,4,1,`li`),I()(),F(24,`div`,6),M(25,pE,11,6,`button`,7,$T),I(),F(27,`section`,8)(28,`h2`,9),K(29,`Configuration`),I(),A(30,mE,2,0,`p`)(31,gE,3,0,`dl`)(32,_E,2,0,`p`),I(),A(33,yE,6,0,`section`,10)),e&2){let e,n,r,i;k(`aria-busy`,t.metaState()===`loading`),D(4),G(`muted`,t.metaState()!==`ready`),D(),j((e=t.metaState())===`ready`?5:e===`error`?6:7),D(3),j(t.metaState()===`error`?8:-1),D(),G(`pending`,t.metaState()===`loading`),D(4),q(t.meta()?.angularVersion??`…`),D(4),q(t.meta()?.typescript??`…`),D(4),q(t.meta()?t.meta()?.ssr?`On`:`Off`:`…`),D(),j((n=t.meta()?.analog)?22:-1,n),D(),j((r=t.zone())?23:-1,r),D(2),N(t.stats()),D(2),k(`aria-busy`,!t.rpc()),D(3),j(t.rpc()?t.configItems().length?31:32:30),D(3),j((i=t.security())?33:-1,i)}},dependencies:[QT],styles:[`[_nghost-%COMP%] {
-  display: block;
-  max-width: 1200px;
-}
-
-.project[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 16px 24px;
-  margin-bottom: 16px;
-  padding: 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: radial-gradient(420px 180px at 100% 0%, var(--%NS%accent-soft), transparent 70%), linear-gradient(180deg, var(--%NS%surface-2), var(--%NS%surface));
-  box-shadow: var(--%NS%shadow);
-}
-
-.project-head[_ngcontent-%COMP%] {
-  flex: 1 1 240px;
-  min-width: 0;
-}
-
-.eyebrow[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 4px;
-  color: var(--%NS%accent);
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 24px;
-  line-height: 1.25;
-  letter-spacing: -0.02em;
-  overflow-wrap: anywhere;
-}
-
-h2.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.retry[_ngcontent-%COMP%] {
-  display: inline-flex;
-  margin-top: 8px;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-}
-.retry[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-.retry[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.chips[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 28px;
-  max-width: 100%;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%bg);
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.chips[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 500;
-}
-
-.chips.pending[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.chips[_ngcontent-%COMP%]   .analog[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, #dd0330 55%, transparent);
-}
-
-.grid[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
-  gap: 12px;
-}
-
-.stat[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 0;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: inherit;
-  text-align: left;
-  font: inherit;
-  cursor: pointer;
-  animation: enter 0.4s var(--%NS%ease) both;
-  transition: border-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-.stat[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-2);
-  box-shadow: var(--%NS%shadow);
-  transform: translateY(-2px);
-}
-
-.stat[_ngcontent-%COMP%]:active {
-  transform: translateY(0);
-  background: var(--%NS%surface-3);
-}
-
-.stat[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.top[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  align-self: stretch;
-  margin-bottom: 12px;
-}
-
-.icon[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--%NS%accent-line);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%accent);
-}
-
-.go[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  color: var(--%NS%text-3);
-  transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease);
-}
-
-.stat[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%], 
-.stat[_ngcontent-%COMP%]:focus-visible   .go[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  transform: translateX(3px);
-}
-
-.label[_ngcontent-%COMP%] {
-  max-width: 100%;
-  overflow: hidden;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 16px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.big[_ngcontent-%COMP%] {
-  margin: 4px 0;
-  color: var(--%NS%text-strong);
-  font-size: 32px;
-  font-weight: 750;
-  line-height: 40px;
-  letter-spacing: -0.03em;
-  font-variant-numeric: tabular-nums;
-}
-
-.big.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.skeleton[_ngcontent-%COMP%] {
-  display: block;
-  width: 56px;
-  height: 32px;
-  margin-block: 8px;
-  border-radius: var(--%NS%radius-sm);
-  background: linear-gradient(90deg, var(--%NS%surface-2), var(--%NS%surface-3), var(--%NS%surface-2)) 0 0/200% 100%;
-  animation: _ngcontent-%COMP%_shimmer 1.4s linear infinite;
-}
-
-.sub[_ngcontent-%COMP%] {
-  max-width: 100%;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.config[_ngcontent-%COMP%] {
-  margin-top: 16px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.config[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 8px;
-  color: var(--%NS%text-2);
-}
-
-.config[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.config[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.config[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-}
-
-.config[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%]   div[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-}
-
-.config[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.config[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%]::after {
-  content: ":";
-}
-
-.config[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-@keyframes _ngcontent-%COMP%_shimmer {
-  to {
-    background-position: -200% 0;
-  }
-}
-@media (max-width: 480px) {
-  .project[_ngcontent-%COMP%] {
-    padding: 16px;
-  }
-  h2[_ngcontent-%COMP%] {
-    font-size: 20px;
-  }
-  .stat[_ngcontent-%COMP%] {
-    padding: 12px;
-  }
-  .big[_ngcontent-%COMP%] {
-    font-size: 28px;
-    line-height: 36px;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .stat[_ngcontent-%COMP%], 
-   .stat[_ngcontent-%COMP%]:hover, 
-   .stat[_ngcontent-%COMP%]:active {
-    transform: none;
-  }
-  .stat[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%] {
-    transform: none;
-  }
-  .skeleton[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}`]})},FE=`pangular:panel-action-result`,IE=6e3,LE=0;function RE(e=window){return e.location.protocol===`chrome-extension:`&&e.parent!==e}function zE(e,t=window){let n=`pa-${Date.now().toString(36)}-${++LE}`;return new Promise(r=>{let i=e=>{t.clearTimeout(o),t.removeEventListener(`message`,a),r(e)},a=({source:e,origin:r,data:a})=>{if(e!==t.parent||r!==t.location.origin)return;let o=a;if(o?.type!==FE||o.requestId!==n)return;let{opened:s,error:c}=a;i({ok:o.ok===!0,...s===`file`||s===`class`?{opened:s}:{},...typeof c==`string`?{error:c}:{}})},o=t.setTimeout(()=>i({ok:!1,error:`timeout`}),IE);t.addEventListener(`message`,a),t.parent.postMessage({...e,requestId:n},t.location.origin)})}var BE=class e{available=RE();reveal(e,t){return zE({type:`pangular:reveal-element`,pageId:e,id:t})}openSource(e,t,n){return zE({type:`pangular:open-source`,pageId:e,id:t,...n?{file:n.file,line:n.line}:{}})}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})};function VE(e){return new Date(e).toLocaleTimeString()}var HE=/[ \t\n\r]/;function UE(e){let t=e.trim(),n;try{n=JSON.parse(t)}catch{return null}if(typeof n!=`object`||!n)return null;let r=``,i=0,a=()=>`\n${`  `.repeat(i)}`;for(let e=0;e<t.length;e++){let n=t[e];if(n===`"`){let n=e+1;for(;t[n]!==`"`;)n+=t[n]===`\\`?2:1;r+=t.slice(e,n+1),e=n}else if(n===`{`||n===`[`){let o=n===`{`?`}`:`]`,s=e+1;for(;HE.test(t[s]);)s++;t[s]===o?(r+=n+o,e=s):(i++,r+=n+a())}else n===`}`||n===`]`?(i--,r+=a()+n):n===`,`?r+=`,${a()}`:n===`:`?r+=`: `:HE.test(n)||(r+=n)}return r}function WE(e,t,n=`${t}s`){return`${e} ${e===1?t:n}`}var GE=(e,t)=>t.name;function KE(e,t){e&1&&(R(0,`span`,11),K(1,`impure`),z())}function qE(e,t){e&1&&(R(0,`span`,11),K(1,`churning`),z())}function JE(e,t){e&1&&(R(0,`span`,11),K(1,`stale?`),z())}function YE(e,t){if(e&1&&(R(0,`span`,10),K(1),z()),e&2){let e=W(2).$implicit,t=W(3);D(),q(t.plural(e.calls,`call`))}}function XE(e,t){if(e&1){let e=B();R(0,`button`,7),U(`click`,function(){S(e);let t=W().$implicit;return C(W(3).showPipe.emit(t.name))}),R(1,`span`,8),K(2,`Show in Pipes:`),z(),R(3,`span`,9),K(4),z(),R(5,`span`,10),K(6),z(),A(7,KE,2,0,`span`,11),A(8,qE,2,0,`span`,11),A(9,JE,2,0,`span`,11),A(10,YE,2,1,`span`,10),z()}if(e&2){let e=W().$implicit;D(4),q(e.name),D(2),J(``,e.uses,`×`),D(),j(e.isPure?-1:7),D(),j(e.churn?8:-1),D(),j(e.stale?9:-1),D(),j(e.calls===void 0?-1:10)}}function ZE(e,t){e&1&&(R(0,`span`,11),K(1,`impure`),z())}function QE(e,t){if(e&1&&(R(0,`span`,6)(1,`span`,9),K(2),z(),R(3,`span`,10),K(4),z(),A(5,ZE,2,0,`span`,11),z()),e&2){let e=W().$implicit;D(2),q(e.name),D(2),J(``,e.uses,`×`),D(),j(e.isPure?-1:5)}}function $E(e,t){if(e&1&&(R(0,`li`),A(1,XE,11,6,`button`,5)(2,QE,6,3,`span`,6),z()),e&2){let e=W(3);D(),j(e.canShowPipes()?1:2)}}function eD(e,t){if(e&1&&(R(0,`ul`,3),M(1,$E,3,1,`li`,null,GE),z(),R(3,`p`,4),K(4,` Call counts cover every component that uses the pipe. Record calls in the Pipes tab to see them. `),z()),e&2){let e=W(2);D(),N(e.rows())}}function tD(e,t){e&1&&(R(0,`p`,2),K(1,`No pipe is in use in the rendered part of its template.`),z())}function nD(e,t){if(e&1&&(R(0,`div`,0)(1,`h3`),K(2,` Pipes in template `),R(3,`span`,1),K(4),z()(),A(5,eD,5,0)(6,tD,2,0,`p`,2),z()),e&2){let e=W();D(4),q(e.rows().length),D(),j(e.rows().length?5:6)}}function rD(e,t,n){let r=(t?e?.pages?.find(e=>e.pageId===t):void 0)?.pipes??e?.pipes??[],i=[];for(let e of r){let t=e.components.find(e=>e.name===n);t&&i.push({name:e.name,isPure:e.isPure,uses:t.count,...e.call?{calls:e.call.callCount}:{},churn:!!e.churn,stale:!!e.stale})}return i.sort((e,t)=>e.name.localeCompare(t.name))}var iD=class e{plural=WE;destroyRef=x(Ss);rpc=$(null);pageId=$(void 0);component=$.required();canShowPipes=$(!1);showPipe=cv();snapshot=T(void 0);loaded=T(!1);rows=X(()=>rD(this.snapshot(),this.pageId(),this.component()));unsubscribe;constructor(){E(()=>{let e=this.rpc();e&&this.subscribe(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async subscribe(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`pipe-usage`);if(this.destroyRef.destroyed)return;let n=e=>{this.snapshot.set(e),this.loaded.set(!0)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-component-pipes`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],component:[1,`component`],canShowPipes:[1,`canShowPipes`]},outputs:{showPipe:`showPipe`},decls:1,vars:1,consts:[[1,`block`],[1,`pill`],[1,`empty-line`],[1,`chips`],[1,`hint`],[`type`,`button`,1,`pipe`],[1,`pipe`],[`type`,`button`,1,`pipe`,3,`click`],[1,`sr-only`],[1,`mono`],[1,`note`],[1,`flag`,`warn`]],template:function(e,t){e&1&&A(0,nD,7,2,`div`,0),e&2&&j(t.loaded()?0:-1)},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.block[_ngcontent-%COMP%] {
-  padding: 14px 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 8px;
-}
-
-.pill[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.pipe[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-height: var(--%NS%control-h);
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 12px;
-}
-
-button.pipe[_ngcontent-%COMP%] {
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-button.pipe[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button.pipe[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  color: var(--%NS%text-strong);
-}
-
-.note[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.flag[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.flag.warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-  padding: 0 6px;
-  border-radius: 99px;
-}
-
-.hint[_ngcontent-%COMP%], 
-.empty-line[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  button.pipe[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})};function aD(e){let t=e?.pages;return t&&typeof t==`object`?t:{}}function oD(e){let t=x(Ss),n=T({}),r=null,i=null,a=async e=>{i?.(),i=null,r=e;try{let a=await e.scope(`pangular`).rpc.sharedState(`page-angular`);if(t.destroyed||r!==e)return;let o=e=>n.set(aD(e));o(a.value()),i=a.on(`updated`,o)}catch{r===e&&n.set({})}};return E(()=>{let t=e();t&&t!==r&&Z(()=>void a(t))}),t.onDestroy(()=>i?.()),n.asReadonly()}function sD(e,t){if(t)return e[t]??null;let n=null;for(let t of Object.values(e))(!n||t.reportedAt>n.reportedAt)&&(n=t);return n}var cD=[`*`];function lD(e,t){if(e&1&&(R(0,`div`,1)(1,`p`,2),K(2),z(),R(3,`p`,3),K(4),Ag(5),R(6,`a`,4),K(7,`Supported versions`),z()()()),e&2){let e=W();G(`compact`,e.compact()),D(2),q(e.title()),D(2),J(` `,t,` `),D(2),V(`href`,e.docsUrl,Du)}}var uD=`https://pangular-inspector.dev/getting-started/installation/#supported-angular-versions`,dD=class e{page=$(null);capability=$.required();missing=$(!1,{transform:yv});compact=$(!1,{transform:yv});docsUrl=uD;text=X(()=>{let e=this.page();return!this.missing()&&!Kw(e,this.capability())?null:qw(this.capability(),e?.version)});title=X(()=>{let e=this.page()?.version;return e?`Not available on Angular ${Uw(e)}`:`Not available on this page`});static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-angular-unavailable`]],inputs:{page:[1,`page`],capability:[1,`capability`],missing:[1,`missing`],compact:[1,`compact`]},ngContentSelectors:cD,decls:1,vars:1,consts:[[`role`,`status`,1,`unavailable`,3,`compact`],[`role`,`status`,1,`unavailable`],[1,`title`],[1,`hint`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){if(e&1&&(kg(),A(0,lD,8,5,`div`,0)),e&2){let e;j((e=t.text())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-[_nghost-%COMP%]:empty {
-  display: none;
-}
-
-.unavailable[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin: 0 0 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  border-style: dashed;
-}
-
-.unavailable.compact[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-}
-
-.title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.55;
-  overflow-wrap: anywhere;
-}
-
-a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  border-radius: 2px;
-}
-
-a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})};function fD(e){return e?.platform===`angular-native`}function pD(e){return fD(e)||e?.platform===`nativescript`}function mD(e,t){let n=Object.values(e??{}).filter(fD);if(t&&n.some(e=>e.pageId===t))return t;let r=null;for(let e of n)(!r||e.reportedAt>r.reportedAt)&&(r=e);return r?.pageId??null}var hD=[`trigger`],gD=[`list`],_D=(e,t)=>t.value;function vD(e,t){if(e&1&&(R(0,`span`,4),K(1),z()),e&2){let e=W();D(),q(e.current().hint)}}function yD(e,t){if(e&1&&(R(0,`span`,15),K(1),z()),e&2){let e=W().$implicit;D(),q(e.hint)}}function bD(e,t){if(e&1){let e=B();R(0,`li`,11),U(`pointerenter`,function(){let t=S(e).$index;return C(W(2).active.set(t))})(`pointerdown`,function(e){return e.preventDefault()})(`click`,function(){let t=S(e).$index;return C(W(2).choose(t))}),w(),R(1,`svg`,12),dg(2,`path`,13),z(),fs(),R(3,`span`,14),K(4),z(),A(5,yD,2,1,`span`,15),z()}if(e&2){let e=t.$implicit,n=t.$index,r=W(2);G(`active`,n===r.active())(`selected`,e.value===r.value()),k(`id`,r.uid+`-opt-`+n)(`aria-selected`,e.value===r.value())(`aria-disabled`,e.disabled||null),D(4),q(e.label),D(),j(e.hint?5:-1)}}function xD(e,t){if(e&1&&(R(0,`li`,10),K(1),z()),e&2){let e=W(2);D(),q(e.emptyText())}}function SD(e,t){if(e&1&&(R(0,`ul`,8,1),Vh(`list-in`),U(`pointerdown`,function(e){return e.preventDefault()}),M(2,bD,6,9,`li`,9,_D,!1,xD,2,1,`li`,10),z()),e&2){let e=W();G(`up`,e.dropUp()),k(`id`,e.uid+`-list`)(`aria-labelledby`,e.labelledBy()||e.uid+`-trigger`),D(2),N(e.options())}}var CD=0,wD=class e{options=$.required();value=pv(null);placeholder=$(`Select…`);ariaLabel=$(``);labelledBy=$(``);describedBy=$(``);disabled=$(!1);emptyText=$(`Nothing to choose`);uid=`app-select-${++CD}`;open=T(!1);active=T(-1);dropUp=T(!1);current=X(()=>this.options().find(e=>e.value===this.value())??null);host=x(Ml);injector=x(bs);trigger=hv.required(`trigger`);list=hv(`list`);typed=``;typedAt=0;toggle(){this.open()?this.close():this.show()}choose(e){let t=this.options()[e];t&&!t.disabled&&(this.value.set(t.value),this.close(),this.trigger().nativeElement.focus())}onKey(e){let t=this.options(),n=this.open();switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!n){this.show();return}this.move(e.key===`ArrowDown`?1:-1);return;case`Home`:case`End`:if(!n)return;e.preventDefault(),this.setActive(e.key===`Home`?this.firstEnabled(0,1):this.firstEnabled(t.length-1,-1));return;case`Enter`:case` `:e.preventDefault(),n&&this.active()>=0?this.choose(this.active()):this.show();return;case`Escape`:if(!n)return;e.preventDefault(),e.stopPropagation(),this.close();return;case`Tab`:n&&this.close();return;default:e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&this.typeAhead(e.key)}}onBlur(e){let t=e.relatedTarget;t&&this.host.nativeElement.contains(t)||this.close()}onOutside(e){this.open()&&!this.host.nativeElement.contains(e.target)&&this.close()}show(){if(this.disabled())return;let e=this.host.nativeElement.getBoundingClientRect(),t=window.innerHeight-e.bottom;this.dropUp.set(t<220&&e.top>t);let n=this.options().findIndex(e=>e.value===this.value());this.open.set(!0),this.setActive(n>=0?n:this.firstEnabled(0,1))}close(){this.open.set(!1),this.active.set(-1)}move(e){let t=this.firstEnabled(this.active()+e,e);t>=0&&this.setActive(t)}firstEnabled(e,t){let n=this.options();for(let r=e;r>=0&&r<n.length;r+=t)if(!n[r].disabled)return r;return-1}setActive(e){this.active.set(e),!(e<0)&&cd(()=>{(this.list()?.nativeElement.querySelector(`#${this.uid}-opt-${e}`))?.scrollIntoView({block:`nearest`})},{injector:this.injector})}typeAhead(e){let t=performance.now();this.typed=t-this.typedAt>600?e.toLowerCase():this.typed+e.toLowerCase(),this.typedAt=t;let n=this.options().findIndex(e=>!e.disabled&&e.label.toLowerCase().startsWith(this.typed));n<0||(this.open()?this.setActive(n):this.value.set(this.options()[n].value))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-select`]],viewQuery:function(e,t){e&1&&Mg(t.trigger,hD,5)(t.list,gD,5),e&2&&Ng(2)},hostAttrs:[1,`app-select`],hostVars:2,hostBindings:function(e,t){e&1&&H(`pointerdown`,function(e){return t.onOutside(e)},ku),e&2&&G(`open`,t.open())},inputs:{options:[1,`options`],value:[1,`value`],placeholder:[1,`placeholder`],ariaLabel:[1,`ariaLabel`],labelledBy:[1,`labelledBy`],describedBy:[1,`describedBy`],disabled:[1,`disabled`],emptyText:[1,`emptyText`]},outputs:{value:`valueChange`},decls:8,vars:13,consts:[[`trigger`,``],[`list`,``],[`type`,`button`,`role`,`combobox`,`aria-haspopup`,`listbox`,1,`trigger`,3,`click`,`keydown`,`blur`,`disabled`],[1,`value`],[1,`value-hint`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m6 9 6 6 6-6`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`,3,`up`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`,3,`pointerdown`],[`role`,`option`,3,`active`,`selected`],[`role`,`option`,`aria-disabled`,`true`,1,`empty`],[`role`,`option`,3,`pointerenter`,`pointerdown`,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`check`],[`d`,`m5 12 5 5 9-10`],[1,`label`],[1,`hint`]],template:function(e,t){e&1&&(R(0,`button`,2,0),U(`click`,function(){return t.toggle()})(`keydown`,function(e){return t.onKey(e)})(`blur`,function(e){return t.onBlur(e)}),R(2,`span`,3),K(3),z(),A(4,vD,2,1,`span`,4),w(),R(5,`svg`,5),dg(6,`path`,6),z()(),A(7,SD,5,5,`ul`,7)),e&2&&(V(`disabled`,t.disabled()),k(`id`,t.uid+`-trigger`)(`aria-controls`,t.uid+`-list`)(`aria-expanded`,t.open())(`aria-label`,t.ariaLabel()||null)(`aria-labelledby`,t.labelledBy()||null)(`aria-describedby`,t.describedBy()||null)(`aria-activedescendant`,t.open()&&t.active()>=0?t.uid+`-opt-`+t.active():null),D(2),G(`placeholder`,!t.current()),D(),J(` `,t.current()?.label??t.placeholder(),` `),D(),j(t.current()?.hint?4:-1),D(3),j(t.open()?7:-1))},styles:[`[_nghost-%COMP%] {
-  position: relative;
-  display: inline-flex;
-  min-width: 0;
-  vertical-align: middle;
-}
-
-.trigger[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 10px 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
-}
-
-.trigger[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 55%, var(--%NS%text-3));
-}
-
-.trigger[_ngcontent-%COMP%]:focus-visible, 
-.open[_nghost-%COMP%]   .trigger[_ngcontent-%COMP%] {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.trigger[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.value[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.value.placeholder[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.value-hint[_ngcontent-%COMP%] {
-  flex: 0 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chevron[_ngcontent-%COMP%] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: transform 150ms var(--%NS%ease);
-}
-
-.open[_nghost-%COMP%]   .chevron[_ngcontent-%COMP%] {
-  transform: rotate(180deg);
-  stroke: var(--%NS%accent);
-}
-
-.list[_ngcontent-%COMP%] {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  z-index: 50;
-  box-sizing: border-box;
-  min-width: 100%;
-  max-width: min(480px, 100vw - 24px);
-  max-height: 280px;
-  margin: 0;
-  padding: 4px;
-  overflow: auto;
-  list-style: none;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.2);
-  overscroll-behavior: contain;
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .list[_ngcontent-%COMP%] {
-    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .list[_ngcontent-%COMP%] {
-  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
-}
-
-.list.up[_ngcontent-%COMP%] {
-  top: auto;
-  bottom: calc(100% + 6px);
-}
-
-.list-in[_ngcontent-%COMP%] {
-  animation: _ngcontent-%COMP%_list-in 140ms var(--%NS%ease) both;
-}
-
-@keyframes _ngcontent-%COMP%_list-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px) scale(0.98);
-  }
-}
-li[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 32px;
-  padding: 0 10px 0 8px;
-  border-radius: 6px;
-  color: var(--%NS%text);
-  font-size: 13px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-li.active[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-}
-
-li.selected[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-li[aria-disabled=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  cursor: default;
-}
-
-.check[_ngcontent-%COMP%] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: var(--%NS%accent);
-  stroke-width: 2.4;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  visibility: hidden;
-}
-
-li.selected[_ngcontent-%COMP%]   .check[_ngcontent-%COMP%] {
-  visibility: visible;
-}
-
-.label[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.hint[_ngcontent-%COMP%] {
-  flex: none;
-  max-width: 50%;
-  overflow: hidden;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  font-weight: 400;
-  text-overflow: ellipsis;
-}
-
-.empty[_ngcontent-%COMP%] {
-  justify-content: center;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .list-in[_ngcontent-%COMP%] {
-    animation: none;
-  }
-  .chevron[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})};function TD(e,t){let n=zw(t);if(Bw(n))return{nodes:e,matches:0};let r=0,i=e=>e.flatMap(e=>{let t=Vw(e,n);t&&r++;let a=i(e.children);return t||a.length?[{...e,children:a}]:[]});return{nodes:i(e),matches:r}}function ED(e){return e.flatMap(e=>e.kind===`directive`?ED(e.children):[{...e,children:ED(e.children)}])}function DD(e){return(e.attributes?.length?e.attributes:e.directives??[e.name]).map(e=>`[${e}]`).join(` `)}var OD={hydrated:`Hydrated`,skipped:`Skipped`,mismatched:`Mismatch`,client:`Client`};function kD(e){return OD[e]}function AD(e,t,n,r=!1,i=0){let a=r?`${e}+`:`${e}`;if(n)return`${t} of ${r?`${e+i}+`:e+i}`;let o=i?` · ${i} directive ${i===1?`host`:`hosts`}`:``;return`${a} ${e===1&&!r?`instance`:`instances`}${o}`}function jD(e,t,n,r=!1,i=0){if(!n.trim())return``;if(!t)return`No components match.`;let a=e+i,o=r?`${a}+`:`${a}`,s=!r&&a===1;return`${t} of ${o} ${i?s?`row`:`rows`:s?`instance`:`instances`} match.`}function MD(e){let t=e?.components,n=e?.depth;return t&&n?`Showing the first ${t} component instances, and none nested more than ${n} elements deep. Others are not listed or searchable.`:t?`Showing the first ${t} component instances. Others are not listed or searchable.`:n?`Components nested more than ${n} elements deep are not listed or searchable.`:`The page has more components than the tree shows.`}function ND(e,t){let n=t?.detail?.id??null,r=t?.pageId??null;if(r!==e.pageId)return{pageId:r,selectedId:n,detailId:n,destroyed:null};let i=e.selectedId;return n&&n!==e.detailId&&n!==i&&(i=n),i&&t&&!t.truncated&&!PD(t.roots,i)?{pageId:r,selectedId:null,detailId:n,destroyed:i}:{pageId:r,selectedId:i,detailId:n,destroyed:null}}function PD(e,t){return e.some(e=>e.id===t||PD(e.children,t))}function FD(e,t,n){let r=e.indexOf(n);if(r<0)return null;for(let n=r+1;n<e.length;n++)if(t.has(e[n]))return e[n];for(let n=r-1;n>=0;n--)if(t.has(e[n]))return e[n];return null}var ID=(e,t)=>t.key,LD=(e,t)=>t.id;function RD(e,t){e&1&&(R(0,`p`,2),K(1,` The HTML came from the server, but no component was hydrated, so the app rendered again on the client. Add `),R(2,`code`),K(3,`provideClientHydration()`),z(),K(4,` and use a development build to see each component's status. `),z())}function zD(e,t){if(e&1&&(R(0,`li`)(1,`span`,9),K(2),z(),K(3),z()),e&2){let e=t.$implicit;n_(`count count-`+e.key),D(2),q(e.value),D(),J(` `,e.label,` `)}}function BD(e,t){if(e&1&&(R(0,`span`,15),K(1,`Expected `),R(2,`code`),K(3),z()()),e&2){let e=W().$implicit;D(3),q(e.expected)}}function VD(e,t){if(e&1&&(R(0,`span`,15),K(1,`Found `),R(2,`code`),K(3),z()()),e&2){let e=W().$implicit;D(3),q(e.actual)}}function HD(e,t){if(e&1){let e=B();R(0,`li`)(1,`button`,12),U(`click`,function(){let t=S(e).$implicit;return C(W(4).showNode.emit(t.id))})(`focus`,function(){let t=S(e).$implicit;return C(W(4).highlight.emit(t.id))})(`blur`,function(){return S(e),C(W(4).highlight.emit(null))})(`mouseenter`,function(){let t=S(e).$implicit;return C(W(4).highlight.emit(t.id))})(`mouseleave`,function(){return S(e),C(W(4).highlight.emit(null))}),R(2,`span`,13),K(3),z(),R(4,`span`,14),K(5),z(),A(6,BD,4,1,`span`,15),A(7,VD,4,1,`span`,15),z()()}if(e&2){let e=t.$implicit;D(3),q(e.name),D(2),J(`<`,e.tag,`>`),D(),j(e.expected?6:-1),D(),j(e.actual?7:-1)}}function UD(e,t){if(e&1&&(R(0,`h3`,10),K(1,`Mismatches`),z(),R(2,`ul`,11),M(3,HD,8,4,`li`,null,LD),z()),e&2){let e=W(2);D(3),N(e.mismatches)}}function WD(e,t){if(e&1){let e=B();R(0,`div`,3)(1,`ul`,4),M(2,zD,4,4,`li`,5,ID),z(),R(4,`button`,6),U(`click`,function(){return S(e),C(W(2).toggleOverlay())}),w(),R(5,`svg`,7),dg(6,`rect`,8),z(),K(7,` Outline on page `),z()(),A(8,UD,5,0)}if(e&2){let e=W(),t=W();D(2),N(t.counts()),D(2),k(`aria-pressed`,t.overlayOn()),D(4),j(e.mismatches.length?8:-1)}}function GD(e,t){e&1&&A(0,RD,5,0,`p`,2)(1,WD,9,2),e&2&&j(+!!t.hydrated)}function KD(e,t){e&1&&(R(0,`p`,2),K(1,` This page was not rendered on the server, so there is nothing to hydrate. With server-side rendering and `),R(2,`code`),K(3,`provideClientHydration()`),z(),K(4,`, each component shows whether it was hydrated, skipped or mismatched. `),z())}var qD=class e{report=$(void 0);overlay=cv();showNode=cv();highlight=cv();overlayOn=Q(()=>this.report()?.overlay===!0);counts=X(()=>{let e=this.report()?.counts;return e?[{key:`hydrated`,label:`hydrated`,value:e.hydrated},{key:`skipped`,label:`skipped`,value:e.skipped},{key:`mismatched`,label:`mismatched`,value:e.mismatched},{key:`client`,label:`created on the client`,value:e.client},{key:`dehydratedBlocks`,label:e.dehydratedBlocks===1?`dehydrated @defer block`:`dehydrated @defer blocks`,value:e.dehydratedBlocks}]:[]});toggleOverlay(){let e=!this.overlayOn();this.overlayOn.set(e),this.overlay.emit(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-hydration-section`]],inputs:{report:[1,`report`]},outputs:{overlay:`overlay`,showNode:`showNode`,highlight:`highlight`},decls:5,vars:1,consts:[[`aria-labelledby`,`ct-hydration-title`,1,`hydration`],[`id`,`ct-hydration-title`,1,`title`],[1,`empty`],[1,`summary`],[`aria-label`,`Hydration summary`,1,`counts`],[3,`class`],[`type`,`button`,1,`outline`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`x`,`3`,`y`,`3`,`width`,`18`,`height`,`18`,`rx`,`2`,`stroke-dasharray`,`4 3`],[1,`num`],[1,`label`],[1,`mismatches`],[`type`,`button`,1,`mismatch`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[1,`name`,`mono`],[1,`mono`,`muted`],[1,`detail-line`]],template:function(e,t){if(e&1&&(R(0,`section`,0)(1,`h2`,1),K(2,`Hydration`),z(),A(3,GD,2,1)(4,KD,5,0,`p`,2),z()),e&2){let e;D(3),j((e=t.report())?3:4,e)}},styles:[`.hydration[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 8px;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 12px 0 6px;
-}
-
-.empty[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  border: 1px dashed var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%], 
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-code[_ngcontent-%COMP%] {
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.summary[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-}
-
-.counts[_ngcontent-%COMP%] {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.count[_ngcontent-%COMP%] {
-  padding: 2px 10px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.num[_ngcontent-%COMP%] {
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.count-hydrated[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.count-skipped[_ngcontent-%COMP%], 
-.count-dehydratedBlocks[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.count-mismatched[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.outline[aria-pressed=true][_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%text-strong);
-}
-
-svg[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.2;
-}
-
-.mismatches[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.mismatch[_ngcontent-%COMP%] {
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  width: 100%;
-  height: auto;
-  min-height: var(--%NS%control-h);
-  padding: 6px 12px;
-  background: var(--%NS%surface);
-  border-color: var(--%NS%border);
-  text-align: left;
-}
-
-.name[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.detail-line[_ngcontent-%COMP%] {
-  width: 100%;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  button[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})};function JD(e,t){if(e&1&&(R(0,`p`,0),K(1),R(2,`code`),K(3),z(),K(4,` to keep more. `),R(5,`a`,1),K(6,`About limits`),z()()),e&2){let e=W();D(),O_(` Showing the latest `,e.max(),` `,e.what(),`. `,e.dropped(),` older `,e.dropped()===1?`entry was`:`entries were`,` dropped. Raise `),D(2),J(`limits.`,e.limit()),D(2),V(`href`,e.docsUrl,Du)}}var YD=`https://pangular-inspector.dev/getting-started/configuration/#limits`,XD=class e{dropped=$(0);max=$.required();what=$.required();limit=$.required();docsUrl=YD;static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-limit-note`]],inputs:{dropped:[1,`dropped`],max:[1,`max`],what:[1,`what`],limit:[1,`limit`]},decls:1,vars:1,consts:[[1,`note`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){e&1&&A(0,JD,7,6,`p`,0),e&2&&j(t.dropped()>0?0:-1)},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  color: var(--%NS%text);
-}
-
-a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  border-radius: 2px;
-}
-
-a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},ZD=1e3;function QD(e){return typeof e==`number`&&Number.isFinite(e)&&e>0&&e<=ZD?e:16}var $D=864e13,eO=200,tO=300,nO=100,rO=10,iO=100,aO=2e3,oO=2e3,sO=4e3,cO=1e3,lO=100,uO=3,dO=50,fO={component:`c`,hook:`h`,afterRender:`r`,output:`o`},pO=Object.values(fO),mO=e=>!!e&&typeof e==`object`&&!Array.isArray(e),hO=e=>typeof e==`number`&&Number.isFinite(e)&&e>=0?e:0,gO=(e,t)=>typeof e==`string`?e.slice(0,t):``,_O=e=>hO(e)>0?hO(e):void 0,vO=(e,t)=>Array.isArray(e)?e.slice(0,t):[];function yO(e){if(!mO(e))return null;let t=gO(e.name,eO);return t?{name:t,checks:hO(e.checks),ms:hO(e.ms)}:null}function bO(e,t){if(!Array.isArray(e)||e.length!==5)return null;let[n,r,i,a,o]=e;return typeof n!=`number`||!Number.isInteger(n)||n<0||n>=t||typeof r!=`number`||!Number.isFinite(r)||Math.abs(r)>1e7||typeof a!=`number`||!Number.isInteger(a)||a<0||a>cO||typeof o!=`string`||!pO.includes(o)?null:[n,r,hO(i),a,o]}function xO(e,t,n){if(!mO(e)||typeof e.id!=`number`)return null;let r=vO(e.components,rO).map(yO).filter(e=>!!e),i=gO(e.trigger,tO),a=vO(e.spans,40).map(e=>bO(e,t)).filter(e=>!!e),o=Array.isArray(e.spans)?e.spans.length-40:0,s=Math.floor(hO(e.droppedSpans))+Math.max(0,o),c={t:typeof e.t==`number`?hO(e.t):void 0,hookMs:_O(e.hookMs),afterRenderMs:_O(e.afterRenderMs),outputMs:_O(e.outputMs)},l=TO(e.cause),u=_O(e.refreshed),d=_O(e.unchanged);return{id:hO(e.id),at:hO(e.at),ms:hO(e.ms),passes:hO(e.passes),...i?{trigger:i}:{},checks:hO(e.checks),components:r,...Object.fromEntries(Object.entries(c).filter(([,e])=>e!==void 0)),...a.length?{spans:a}:{},...s?{droppedSpans:s}:{},...l?{cause:l}:{},...u?{refreshed:u}:{},...d?{unchanged:d}:{},...hO(e.ms)>n?{slow:!0}:{}}}var SO=[`event`,`http`,`timer`,`signal`,`effect`,`markForCheck`,`input`,`view`,`tick`,`zone`,`unknown`],CO={event:`Event`,http:`HTTP response`,timer:`Timer`,signal:`Signal write`,effect:`Effect`,markForCheck:`markForCheck`,input:`setInput`,view:`View change`,tick:`ApplicationRef.tick`,zone:`zone.js only`,unknown:`Unknown`},wO=e=>typeof e==`string`&&SO.includes(e);function TO(e){if(!mO(e)||!wO(e.kind))return;let t=[`component`,`listener`,`event`,`target`,`signal`,`task`],n={kind:e.kind};wO(e.via)&&(n.via=e.via);for(let r of t){let t=gO(e[r],eO);t&&(n[r]=t)}e.zone===!0&&(n.zone=!0);let r=vO(e.stack,uO).map(e=>gO(e,tO)).filter(Boolean);r.length&&(n.stack=r);let i=Math.floor(hO(e.more));return i&&(n.more=i),n}function EO(e){if(!mO(e))return null;let t=gO(e.name,eO);if(!t)return null;let n=e.strategy;return{name:t,refreshed:Math.floor(hO(e.refreshed)),unchanged:Math.floor(hO(e.unchanged)),...n===`OnPush`||n===`Eager`?{strategy:n}:{}}}function DO(e){if(!mO(e))return null;let t=gO(e.name,eO),n=gO(e.input,eO);if(!t||!n)return null;let r=gO(e.parent,eO);return{name:t,input:n,...r?{parent:r}:{},inPlace:Math.floor(hO(e.inPlace)),sameContents:Math.floor(hO(e.sameContents))}}function OO(e){if(!mO(e))return null;let t=gO(e.name,eO);if(!t)return null;let n=vO(e.tasks,3).map(e=>gO(e,eO)).filter(Boolean);return{name:t,ticks:Math.floor(hO(e.ticks)),...n.length?{tasks:n}:{}}}function kO(e){if(!mO(e))return;let t={};if(mO(e.causes))for(let n of SO){let r=Math.floor(hO(e.causes[n]));r&&(t[n]=r)}let n=vO(e.components,iO).map(EO).filter(e=>!!e),r=vO(e.inputs,dO).map(DO).filter(e=>!!e),i=vO(e.zone,dO).map(OO).filter(e=>!!e),a=Math.floor(hO(e.major));return{triggers:e.triggers===!0,waste:e.waste===!0,...a&&a<1e3?{major:a}:{},causes:t,components:n,...r.length?{inputs:r}:{},...i.length?{zone:i}:{},...typeof e.zoneJs==`boolean`?{zoneJs:e.zoneJs}:{}}}function AO(e){let t=[],n=e.component?` in ${e.component}${e.listener?` (${e.listener})`:``}`:``;switch(e.kind){case`event`:t.push(`${e.event??`Template listener`}${e.target?` on ${e.target}`:``}${n}`);break;case`http`:t.push(`HTTP response${n}`);break;case`timer`:t.push(`${e.task??`Timer`}${n}`);break;case`zone`:t.push(`zone.js tick with no Angular notification${e.task?` after ${e.task}`:``}`);break;case`tick`:t.push(`ApplicationRef.tick()${n}`);break;default:t.push(`${CO[e.kind]}${n}`)}return e.signal?t.push(e.signal===`?`?`wrote an unnamed signal`:`wrote signal ${e.signal}`):e.via&&e.via!==e.kind&&t.push(`via ${CO[e.via]}`),e.zone&&e.kind!==`zone`&&t.push(`run by zone.js`),e.more&&t.push(`${e.more} more notification${e.more===1?``:`s`}`),t.join(`, `)}function jO(e){if(!e)return[];let t=[],n=(e.major??0)>=22;for(let r of e.components){if(r.refreshed<10)continue;let e=r.refreshed-r.unchanged;if(e/r.refreshed>.2)continue;let i=`refreshed ${r.refreshed} times and changed something in ${e}`;r.strategy===`Eager`?t.push({name:r.name,kind:`on-push`,text:n?`${r.name} was ${i}. It opts out of OnPush, which is the default from Angular 22: remove \`changeDetection: ChangeDetectionStrategy.Eager\` (or \`Default\`) so Angular skips it until an input, event, signal or markForCheck marks it.`:`${r.name} was ${i}. Add \`changeDetection: ChangeDetectionStrategy.OnPush\` so Angular skips it until an input, event, signal or markForCheck marks it.`}):r.strategy===`OnPush`&&t.push({name:r.name,kind:`already-on-push`,text:`${r.name} was ${i}, and it is already OnPush${n?` (the default from Angular 22)`:``}. Something keeps marking it: an input that gets a new reference each time, an event or output in it, markForCheck, or a signal it reads that is set to an equal value.`})}for(let n of e.inputs??[]){let e=n.parent?` set by ${n.parent}`:``;n.inPlace&&t.push({name:n.name,kind:`in-place`,text:`Input ${n.input} of ${n.name}${e} changed in place ${n.inPlace} time${n.inPlace===1?``:`s`}: same reference, different contents. OnPush components, computed and signal equality don't see that. Pass a new object or array instead of mutating it.`}),n.sameContents&&t.push({name:n.name,kind:`same-contents`,text:`Input ${n.input} of ${n.name}${e} got a new reference with the same contents ${n.sameContents} time${n.sameContents===1?``:`s`}, so Angular refreshed ${n.name} for nothing. Keep the reference when nothing changed, for example with a computed instead of a method call in the template.`})}for(let n of e.zone??[]){let e=n.tasks?.length?` (after ${n.tasks.join(`, `)})`:``;t.push({name:n.name,kind:`zone`,text:`${n.name} changed in ${n.ticks} tick${n.ticks===1?``:`s`} that only zone.js started${e}. Without zone.js it would not update: keep that state in a signal, or call markForCheck after changing it.`})}return t}function MO(e){let t=yO(e);return!t||!mO(e)?null:{...t,maxMs:hO(e.maxMs),cycles:hO(e.cycles)}}function NO(e){if(!mO(e))return null;let t=gO(e.name,eO),n=gO(e.hook,nO);if(!t||!n)return null;let{calls:r,ms:i,maxMs:a}=e;return{name:t,hook:n,calls:hO(r),ms:hO(i),maxMs:hO(a)}}function PO(e){if(!mO(e))return null;let t=gO(e.name,eO);if(!t)return null;let n=gO(e.listener,eO);return{name:t,...n?{listener:n}:{},calls:hO(e.calls),ms:hO(e.ms),maxMs:hO(e.maxMs)}}function FO(e){if(mO(e)&&hO(e.runs))return{runs:hO(e.runs),ms:hO(e.ms),maxMs:hO(e.maxMs)}}function IO(e,t){if(!mO(e))return null;let n=vO(e.spanNames,sO).map(e=>gO(e,tO)),r=QD(e.slowMs),i=Array.isArray(e.cycles)?e.cycles.slice(-Math.min(t,oO)).map(e=>xO(e,n.length,r)).filter(e=>!!e):[],a={},o=0;if(mO(e.hosts)){let t=Object.entries(e.hosts);o=Math.max(0,t.length-aO);for(let[e,n]of t.slice(0,aO))e.length<50&&hO(n)&&(a[e]=hO(n))}let s=Array.isArray(e.components)?e.components:[],c=Math.floor(hO(e.droppedClasses))+Math.max(0,s.length-iO),l=Math.floor(hO(e.droppedHosts))+o,u=vO(e.hooks,lO).map(NO).filter(e=>!!e),d=vO(e.outputs,lO).map(PO).filter(e=>!!e),f=Math.max(0,vO(e.hooks,1/0).length-lO)+Math.max(0,vO(e.outputs,1/0).length-lO),p=Math.floor(hO(e.droppedTimings))+f,m=FO(e.afterRender),ee=i.some(e=>e.spans?.length),h=kO(e.diagnosis);return{recording:e.recording===!0,startedAt:typeof e.startedAt==`number`&&e.startedAt<=$D?hO(e.startedAt):null,dropped:hO(e.dropped),slowMs:r,cycles:i,components:s.slice(0,iO).map(MO).filter(e=>!!e),...c?{droppedClasses:c}:{},hosts:a,...l?{droppedHosts:l}:{},...u.length?{hooks:u}:{},...d.length?{outputs:d}:{},...p?{droppedTimings:p}:{},...m?{afterRender:m}:{},...ee?{spanNames:n}:{},...h?{diagnosis:h}:{}}}var LO=`pangular-inspector/change-detection`;function RO(e,t,n=Date.now()){return{format:LO,version:1,exportedAt:n,pageId:t,recording:{...IO(e,oO)??e,recording:!1,hosts:{}}}}function zO(e,t){if(e.length>2e7||e.length*3>2e7&&new TextEncoder().encode(e).byteLength>2e7)return{ok:!1,error:`The file is larger than 20 MB.`};let n;try{n=JSON.parse(e)}catch{return{ok:!1,error:`The file is not valid JSON.`}}if(!mO(n))return{ok:!1,error:`The file is not a recording.`};if(n.format!==void 0&&n.format!==`pangular-inspector/change-detection`)return{ok:!1,error:`The file is not a change detection recording.`};let r=mO(n.recording)?n.recording:n;if(!Array.isArray(r.cycles))return{ok:!1,error:`The file has no change detection cycles.`};let i=IO(r,t);if(!i)return{ok:!1,error:`The file is not a recording.`};let a=gO(n.pageId??r.pageId,49)||`imported`,o=_O(n.exportedAt);return{ok:!0,pageId:a,...o?{exportedAt:o}:{},recording:{...i,recording:!1}}}var BO=1,VO=1,HO=2,UO={c:`component`,h:`lifecycle-hook`,r:`after-render`,o:`output`},WO=e=>Math.round(e*1e6)/1e3;function GO(e,t){let n=e.spanNames??[],r=e.cycles[0]?.at??0,i=e.startedAt??r,a=[],o=0,s=0;for(let t of e.cycles){let e=t.t??Math.max(0,t.at-i),r=e+t.ms;a.push({name:`Change detection #${t.id}`,cat:`change-detection`,ph:`X`,pid:BO,tid:VO,ts:WO(e),dur:WO(t.ms),args:{checks:t.checks,passes:t.passes,...t.trigger?{trigger:t.trigger}:{},...t.hookMs?{hookMs:t.hookMs}:{},...t.afterRenderMs?{afterRenderMs:t.afterRenderMs}:{},...t.outputMs?{outputMs:t.outputMs}:{},...t.cause?{cause:AO(t.cause)}:{},...t.unchanged?{unchanged:t.unchanged}:{},slowest:t.components.map(e=>`${e.name} ${e.checks}x ${e.ms}ms`)}}),s+=t.droppedSpans??0;let c=[{end:r}],l=[...t.spans??[]].sort((e,t)=>e[1]-t[1]||t[2]-e[2]);for(let[r,i,s,u,d]of l){o++;let l=n[r]??`?`;if(d===fO.output){let n=e+i;a.push({name:l,cat:UO[d],ph:`X`,pid:BO,tid:HO,ts:WO(n),dur:WO(i<0?Math.max(0,Math.min(s,-i)):s),args:{cycle:t.id}});continue}let f=Math.max(e,e+i);for(;c.length>1&&c.at(-1).end<=f;)c.pop();let p=c.at(-1).end,m=Math.min(f+s,p);m<f||(c.push({end:m}),a.push({name:l,cat:UO[d],ph:`X`,pid:BO,tid:VO,ts:WO(f),dur:WO(m-f),args:{cycle:t.id,depth:u}}))}}let c=Math.min(0,...a.map(e=>e.ts??0));if(c<0)for(let e of a)e.ts=WO((e.ts-c)/1e3);a.sort((e,t)=>e.ts-t.ts||t.dur-e.dur);let l=(e,t,n)=>({name:t,ph:`M`,pid:BO,tid:e,args:{name:n}});return{traceEvents:[l(0,`process_name`,`Angular change detection (page ${t})`),l(VO,`thread_name`,`Change detection`),l(HO,`thread_name`,`Outputs`),...a],displayTimeUnit:`ms`,otherData:{source:`Pangular Inspector change detection recording`,pageId:t,cycles:e.cycles.length,droppedCycles:e.dropped,spans:o,droppedSpans:s,...e.startedAt&&e.startedAt<=$D?{startedAt:new Date(e.startedAt).toISOString()}:{}}}}function KO(e,t=16){return e.ms>t}function qO(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}function JO(e,t){if(!t)return[...e];let n=Math.min(t.from,t.to),r=Math.max(t.from,t.to),i=e.filter(e=>e.id>=n&&e.id<=r);return i.length?i:[...e]}function YO(e){let t=new Map;for(let n of e)for(let e of n.components){let n=t.get(e.name);n?(n.checks+=e.checks,n.ms+=e.ms,n.maxMs=Math.max(n.maxMs,e.ms),n.cycles+=1):t.set(e.name,{name:e.name,checks:e.checks,ms:e.ms,maxMs:e.ms,cycles:1})}return[...t.values()].sort((e,t)=>t.ms-e.ms||e.name.localeCompare(t.name))}function XO(e,t=16){let n=e.reduce((e,t)=>Math.max(e,t.ms),0);return Math.max(n,t*1.25)}function ZO(e,t,n=3){let r=e.map(e=>({item:e,value:t(e)})).filter(e=>e.value>0).sort((e,t)=>t.value-e.value),i=r.reduce((e,t)=>e+t.value,0);if(!i)return[];let a=n/i,o=[],s=0,c=0,l=n,u=1,d=[],f=(e,t)=>{let n=e.reduce((e,t)=>e+t,0),r=Math.max(...e),i=Math.min(...e);return Math.max(t*t*r/(n*n),n*n/(t*t*i))},p=()=>{let e=d.reduce((e,t)=>e+t.area,0);if(l>=u){let t=e/u,n=c;for(let e of d){let r=e.area/t;o.push({item:e.item,x:s,y:n,w:t,h:r}),n+=r}s+=t,l-=t}else{let t=e/l,n=s;for(let e of d){let r=e.area/t;o.push({item:e.item,x:n,y:c,w:r,h:t}),n+=r}c+=t,u-=t}d=[]};for(let e of r){let t=e.value*a,n=Math.min(l,u),r=d.map(e=>e.area);d.length&&f([...r,t],n)>f(r,n)&&p(),d.push({item:e.item,area:t})}return d.length&&p(),o.map(e=>({item:e.item,x:e.x/n*100,y:e.y*100,w:e.w/n*100,h:e.h*100}))}var QO={c:`component`,h:`hook`,r:`afterRender`,o:`output`};function $O(e,t){if(t===`c`)return e||null;if(t===`h`){let t=e.lastIndexOf(`.`);return t>0?e.slice(0,t):null}if(t===`o`){let t=e.indexOf(` (`),n=t>0?e.slice(0,t):e;return n&&n!==`?`?n:null}return null}function ek(e,t){let n=e.filter(e=>e.spans?.length);if(!n.length)return null;let r=n.map(e=>{let t=e.spans,n=Math.min(0,...t.map(e=>e[1])),r=Math.max(e.ms,...t.map(e=>e[1]+e[2]));return{cycle:e,spans:t,from:n,width:Math.max(r-n,.001)}}),i=r.reduce((e,t)=>e+t.width,0),a=[],o=[],s=0,c=0;for(let{cycle:e,spans:n,from:l,width:u}of r){o.push({id:e.id,x:s/i*100,w:u/i*100,droppedSpans:e.droppedSpans??0});let r=[...n].sort((e,t)=>e[1]-t[1]||e[3]-t[3]),d=[];for(let[n,o,u,f,p]of r){let r=t[n]??`unknown`,m=d[f-1],ee=f>0&&m!==void 0&&o<a[m].start+a[m].ms+1e-6?m:null,h={index:a.length,cycleId:e.id,name:r,kind:p,start:o,ms:u,selfMs:u,depth:f,parent:ee,component:$O(r,p),x:(s+o-l)/i*100,w:u/i*100};ee!==null&&(a[ee].selfMs=Math.max(a[ee].selfMs-u,0)),a.push(h),d[f]=h.index,d.length=f+1,c=Math.max(c,f+1)}s+=u}return{blocks:a,cycles:o,depth:c,totalMs:i}}var tk=(e,t)=>t.kind,nk=(e,t)=>t.name,rk=(e,t)=>t.name+`.`+t.input;function ik(e,t){e&1&&(R(0,`p`,3),K(1,` The page has no Angular change detection scheduler the overlay could find (it needs Angular 18 or later), so cycles have no cause. `),z())}function ak(e,t){if(e&1&&(R(0,`tr`)(1,`td`),K(2),z(),R(3,`td`,6),K(4),z()()),e&2){let e=t.$implicit;D(2),q(e.label),D(2),q(e.count)}}function ok(e,t){if(e&1&&(R(0,`table`)(1,`thead`)(2,`tr`)(3,`th`,4),K(4,`Trigger`),z(),R(5,`th`,5),K(6,`Cycles`),z()()(),R(7,`tbody`),M(8,ak,5,2,`tr`,null,tk),z()()),e&2){let e=W(2);D(8),N(e.causes())}}function sk(e,t){e&1&&(R(0,`p`,3),K(1,`No cycle has a cause yet.`),z())}function ck(e,t){if(e&1&&(R(0,`tr`)(1,`td`,7),K(2),z(),R(3,`td`,6),K(4),z(),R(5,`td`,7),K(6),z()()),e&2){let e=t.$implicit;D(2),q(e.name),D(2),q(e.ticks),D(2),q(e.tasks?.join(`, `))}}function lk(e,t){if(e&1&&(R(0,`table`)(1,`thead`)(2,`tr`)(3,`th`,4),K(4,`Component`),z(),R(5,`th`,5),K(6,`Zone-only ticks`),z(),R(7,`th`,4),K(8,`After`),z()()(),R(9,`tbody`),M(10,ck,7,3,`tr`,null,nk),z()()),e&2){let e=W(3);D(10),N(e.zone())}}function uk(e,t){if(e&1&&(R(0,`p`,3),K(1),z()),e&2){let e=W(3);D(),q(e.zoneNote())}}function dk(e,t){if(e&1&&(R(0,`div`)(1,`h4`),K(2,`Depends on zone.js`),z(),A(3,lk,12,0,`table`)(4,uk,2,1,`p`,3),z()),e&2){let e=W(),t=W();D(3),j(t.zone().length?3:e.triggers?4:-1)}}function fk(e,t){e&1&&(R(0,`p`,3),K(1,`The page can't watch DOM updates, so wasted checks are not counted.`),z())}function pk(e,t){if(e&1&&(R(0,`tr`)(1,`td`,7),K(2),z(),R(3,`td`,6),K(4),z(),R(5,`td`,6),K(6),z(),R(7,`td`),K(8),z()()),e&2){let e=t.$implicit,n=W(3);D(2),q(e.name),D(2),q(e.refreshed),D(2),Y(``,e.unchanged,` (`,n.share(e.unchanged,e.refreshed),`)`),D(2),q(e.strategy??`Unknown`)}}function mk(e,t){if(e&1&&(R(0,`table`)(1,`thead`)(2,`tr`)(3,`th`,4),K(4,`Component`),z(),R(5,`th`,5),K(6,`Refreshed`),z(),R(7,`th`,5),K(8,`Changed nothing`),z(),R(9,`th`,4),K(10,`Strategy`),z()()(),R(11,`tbody`),M(12,pk,9,5,`tr`,null,nk),z()()),e&2){let e=W(2);D(12),N(e.wasted())}}function hk(e,t){e&1&&(R(0,`p`,3),K(1,`Every refreshed check changed something.`),z())}function gk(e,t){if(e&1&&(R(0,`tr`)(1,`td`,7),K(2),z(),R(3,`td`,7),K(4),z(),R(5,`td`,6),K(6),z(),R(7,`td`,6),K(8),z()()),e&2){let e=t.$implicit;D(2),Y(``,e.name,`.`,e.input),D(2),q(e.parent??`Unknown`),D(2),q(e.inPlace),D(2),q(e.sameContents)}}function _k(e,t){if(e&1&&(R(0,`h4`),K(1,`Inputs that break OnPush`),z(),R(2,`table`)(3,`thead`)(4,`tr`)(5,`th`,4),K(6,`Input`),z(),R(7,`th`,4),K(8,`Set by`),z(),R(9,`th`,5),K(10,`Changed in place`),z(),R(11,`th`,5),K(12,`Same contents, new reference`),z()()(),R(13,`tbody`),M(14,gk,9,5,`tr`,null,rk),z()()),e&2){let e=W(2);D(14),N(e.inputs())}}function vk(e,t){if(e&1&&(R(0,`li`),K(1),z()),e&2){let e=t.$implicit;D(),q(e.text)}}function yk(e,t){if(e&1&&(R(0,`h4`),K(1,`Hints`),z(),R(2,`ul`,8),M(3,vk,2,1,`li`,null,$h),z()),e&2){let e=W(2);D(3),N(e.hints())}}function bk(e,t){if(e&1&&(R(0,`section`,0)(1,`h3`,1),K(2,`Why it ran and what it wasted`),z(),R(3,`div`,2)(4,`div`)(5,`h4`),K(6,`What started the cycles`),z(),A(7,ik,2,0,`p`,3)(8,ok,10,0,`table`)(9,sk,2,0,`p`,3),z(),A(10,dk,5,1,`div`),z(),R(11,`h4`),K(12,`Wasted checks`),z(),A(13,fk,2,0,`p`,3)(14,mk,14,0,`table`)(15,hk,2,0,`p`,3),A(16,_k,16,0),A(17,yk,5,0),z()),e&2){let e=t,n=W();D(7),j(e.triggers?n.causes().length?8:9:7),D(3),j(n.hasZone()?10:-1),D(3),j(e.waste?n.wasted().length?14:15:13),D(3),j(n.inputs().length?16:-1),D(),j(n.hints().length?17:-1)}}var xk=10,Sk=class e{page=$(null);diagnosis=X(()=>this.page()?.diagnosis??null);causes=X(()=>{let e=this.diagnosis()?.causes??{};return SO.filter(t=>e[t]).map(t=>({kind:t,label:CO[t],count:e[t]}))});zone=X(()=>(this.diagnosis()?.zone??[]).slice(0,xk));zoneTicks=X(()=>this.diagnosis()?.causes.zone??0);hasZone=X(()=>this.diagnosis()?.zoneJs??(this.zone().length>0||this.zoneTicks()>0));zoneNote=X(()=>{let e=this.zoneTicks();return e?`${e} ${e===1?`tick`:`ticks`} came from zone.js alone, and no component changed in them.`:`No component changed in a tick only zone.js started.`});wasted=X(()=>(this.diagnosis()?.components??[]).filter(e=>e.unchanged>0).slice(0,xk));inputs=X(()=>(this.diagnosis()?.inputs??[]).slice(0,xk));hints=X(()=>jO(this.diagnosis()??void 0).slice(0,xk));share(e,t){return t?`${Math.round(e/t*100)}%`:`0%`}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-cd-diagnosis`]],inputs:{page:[1,`page`]},decls:1,vars:1,consts:[[`aria-labelledby`,`cd-diagnosis-heading`,1,`diagnosis`],[`id`,`cd-diagnosis-heading`],[1,`grid`],[1,`note`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`num`],[1,`mono`],[1,`hints`]],template:function(e,t){if(e&1&&A(0,bk,18,5,`section`,0),e&2){let e;j((e=t.diagnosis())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 16px 0 6px;
-}
-
-h4[_ngcontent-%COMP%] {
-  margin: 12px 0 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.grid[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0 16px;
-}
-
-@media (min-width: 880px) {
-  .grid[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }
-}
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 500;
-}
-
-td.mono[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 4px 0 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.hints[_ngcontent-%COMP%] {
-  margin: 0;
-  padding-left: 18px;
-  color: var(--%NS%text);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.hints[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
-  margin-top: 4px;
-}`]})},Ck=(e,t)=>t.cycle.id,wk=(e,t)=>t.id;function Tk(e,t){if(e&1){let e=B();R(0,`button`,27),U(`click`,function(){return S(e),C(W().showAll())}),K(1,`Show all cycles`),z()}}function Ek(e,t){if(e&1&&dg(0,`div`,28),e&2){let e=t;t_(`left`,e.left,`%`)(`width`,e.width,`%`)}}function Dk(e,t){if(e&1&&(R(0,`div`,29),dg(1,`span`,30),z()),e&2){let e=t.$implicit,n=W();G(`over`,e.over)(`out`,!n.inRange(e.index)&&!!n.range())(`active`,n.focused()&&n.active()===e.index),V(`id`,n.optionId(e.index)),k(`data-index`,e.index)(`aria-selected`,n.inRange(e.index))(`aria-label`,e.label),D(),t_(`height`,e.height,`%`)}}function Ok(e,t){e&1&&(R(0,`span`,33),K(1,`over budget`),z())}function kk(e,t){if(e&1&&(R(0,`p`),K(1,` after `),R(2,`span`,35),K(3),z()()),e&2){let e=W();D(3),q(e.cycle.trigger)}}function Ak(e,t){if(e&1&&(R(0,`p`,34)(1,`span`,36),K(2),z(),R(3,`span`),K(4),z()()),e&2){let e=t.$implicit,n=W(2);D(2),q(e.name),D(2),q(n.fmt(e.ms))}}function jk(e,t){if(e&1&&(R(0,`div`,31)(1,`p`,32)(2,`strong`),K(3),z(),R(4,`span`),K(5),z(),A(6,Ok,2,0,`span`,33),z(),A(7,kk,4,1,`p`),R(8,`p`),K(9),z(),M(10,Ak,5,2,`p`,34,$h),z()),e&2){let e=t,n=W();t_(`left`,e.left)(`right`,e.right),D(3),q(n.fmt(e.cycle.ms)),D(2),J(`cycle `,e.cycle.id),D(),j(e.over?6:-1),D(),j(e.cycle.trigger?7:-1),D(2),O_(` `,e.cycle.checks,` `,e.cycle.checks===1?`check`:`checks`,`, `,e.cycle.passes,` `,e.cycle.passes===1?`pass`:`passes`,` `),D(),N(e.top)}}function Mk(e,t){if(e&1&&dg(0,`span`),e&2){let e=t.$implicit;G(`over`,e.over)}}function Nk(e,t){if(e&1&&K(0),e&2){let e=t,n=W(2);Y(` `,e.name,` (`,n.fmt(e.ms),`) `)}}function Pk(e,t){if(e&1&&(R(0,`tr`)(1,`td`,37),K(2),z(),R(3,`td`,37),K(4),z(),R(5,`td`),K(6),z(),R(7,`td`,37),K(8),z(),R(9,`td`,37),K(10),z(),R(11,`td`,35),K(12),z(),R(13,`td`,35),A(14,Nk,1,2),z()()),e&2){let e,n=t.$implicit,r=W();D(2),q(n.id),D(2),q(r.fmt(n.ms)),D(2),q(r.isOver(n)?`Over`:`Within`),D(2),q(n.checks),D(2),q(n.passes),D(2),q(n.trigger??``),D(2),j((e=n.components[0])?14:-1,e)}}var Fk=0,Ik=80,Lk=10,Rk=class e{cycles=$([]);range=pv(null);slowMs=$(16);gapUntil=Ik;budgetLabel=X(()=>`${this.slowMs()} ms budget`);uid=`cd-chart-${Fk++}`;hintId=`${this.uid}-hint`;active=T(null);anchor=null;dragging=!1;hover=T(null);focused=T(!1);max=X(()=>XO(this.cycles(),this.slowMs()));budgetAt=X(()=>this.slowMs()/this.max()*100);bars=X(()=>{let e=this.max();return this.cycles().map((t,n)=>({cycle:t,index:n,height:t.ms/e*100,over:KO(t,this.slowMs()),label:this.describe(t)}))});firstId=X(()=>this.cycles()[0]?.id??0);lastId=X(()=>this.cycles().at(-1)?.id??0);span=X(()=>{let e=this.range();if(!e)return null;let t=this.cycles(),n=Math.min(e.from,e.to),r=Math.max(e.from,e.to),i=t.findIndex(e=>e.id>=n),a=-1;for(let e=t.length-1;e>=0;e--)if(t[e].id<=r){a=e;break}return i<0||a<i?null:{start:i,end:a}});selected=X(()=>JO(this.cycles(),this.range()));startId=X(()=>this.selected()[0]?.id??``);endId=X(()=>this.selected().at(-1)?.id??``);band=X(()=>{let e=this.span(),t=this.cycles().length;return!e||!t?null:{left:e.start/t*100,width:(e.end-e.start+1)/t*100}});summary=X(()=>{let e=this.selected(),t=this.slowMs(),n=e.filter(e=>KO(e,t)).length;return`${this.span()?e.length===1?`Cycle ${e[0].id}`:`Cycles ${e[0].id} to ${e.at(-1).id} (${e.length})`:`All ${e.length} ${e.length===1?`cycle`:`cycles`}`}. ${n} over the ${t} ms budget.`});tableLabel=X(()=>this.span()?`Picked cycles, ${this.summary()}`:`All recorded cycles`);activeOptionId=X(()=>{let e=this.active();return this.focused()&&e!==null&&e<this.cycles().length?this.optionId(e):null});tip=X(()=>{let e=this.hover()??(this.focused()?this.active():null),t=e===null?void 0:this.cycles()[e];return!t||e===null?null:{cycle:t,over:KO(t,this.slowMs()),top:t.components.slice(0,3),...this.tipSide(e)}});tipSide(e){let t=this.cycles().length;return e+.5<t/2?{left:`min(calc(${(e+1)/t*100}% + 6px), max(0px, calc(100% - 240px)))`,right:null}:{left:null,right:`min(calc(${(t-e)/t*100}% + 6px), max(0px, calc(100% - 240px)))`}}fmt(e){return qO(e)}isOver(e){return KO(e,this.slowMs())}optionId(e){return`${this.uid}-${e}`}inRange(e){let t=this.span();return!!t&&e>=t.start&&e<=t.end}describe(e){let t=[`Cycle ${e.id}`,qO(e.ms)];KO(e,this.slowMs())&&t.push(`over budget`),e.trigger&&t.push(`after ${e.trigger}`),t.push(`${e.checks} ${e.checks===1?`check`:`checks`}`);let n=e.components[0];return n&&t.push(`slowest ${n.name} ${qO(n.ms)}`),t.join(`, `)}select(e,t){let n=this.cycles(),r=n[Math.min(e,t)],i=n[Math.max(e,t)];r&&i&&this.range.set({from:r.id,to:i.id})}showAll(){this.range.set(null),this.anchor=null}setEnd(e,t){if(!this.cycles().length)return;let n=t.target,r=Number.parseInt(n.value,10);if(Number.isNaN(r)){n.value=String(e===`from`?this.startId():this.endId());return}let i=Math.min(Math.max(r,this.firstId()),this.lastId()),a=this.selected(),o=e===`from`?i:a[0]?.id??this.firstId(),s=e===`to`?i:a.at(-1)?.id??this.lastId();this.range.set({from:Math.min(o,s),to:Math.max(o,s)}),n.value=String(e===`from`?Math.min(o,s):Math.max(o,s))}onFocus(){this.focused.set(!0),(this.active()===null||this.active()>=this.cycles().length)&&this.active.set(this.span()?.start??Math.max(this.cycles().length-1,0)),this.anchor??=this.active()}onKey(e){let t=this.cycles().length;if(!t)return;let n=Math.min(this.active()??t-1,t-1),r=null;switch(e.key){case`ArrowRight`:case`ArrowDown`:r=n+1;break;case`ArrowLeft`:case`ArrowUp`:r=n-1;break;case`PageDown`:r=n+Lk;break;case`PageUp`:r=n-Lk;break;case`Home`:r=0;break;case`End`:r=t-1;break;case`Enter`:case` `:e.preventDefault(),this.anchor=n,this.select(n,n);return;case`Escape`:this.range()&&(e.preventDefault(),this.showAll());return;default:return}e.preventDefault(),r=Math.min(Math.max(r,0),t-1),this.active.set(r),this.hover.set(null),e.shiftKey?(this.anchor??=n,this.select(this.anchor,r)):this.anchor=r}indexAt(e){let t=e.target?.closest?.(`[data-index]`);if(t)return Number(t.getAttribute(`data-index`));let n=e.currentTarget?.getBoundingClientRect(),r=this.cycles().length;if(!n?.width||!r)return null;let i=(e.clientX-n.left)/n.width;return Math.min(Math.max(Math.floor(i*r),0),r-1)}startDrag(e){if(e.button!==0)return;let t=this.indexAt(e);t!==null&&(this.dragging=!0,this.anchor=t,this.active.set(t),this.select(t,t))}onPointerMove(e){let t=this.indexAt(e);this.hover.set(t),this.dragging&&t!==null&&this.anchor!==null&&(this.active.set(t),this.select(this.anchor,t))}endDrag(){this.dragging=!1}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-cd-cycle-chart`]],hostBindings:function(e,t){e&1&&H(`pointerup`,function(){return t.endDrag()},Ou)(`pointercancel`,function(){return t.endDrag()},Ou)},inputs:{cycles:[1,`cycles`],range:[1,`range`],slowMs:[1,`slowMs`]},outputs:{range:`rangeChange`},decls:69,vars:25,consts:[[1,`range`],[`type`,`number`,`inputmode`,`numeric`,3,`change`,`min`,`max`,`value`],[`type`,`button`],[1,`summary`],[1,`hint`,3,`id`],[1,`plot`],[`aria-hidden`,`true`,1,`axis`],[1,`tick`,`top`],[1,`tick`,`zero`],[1,`area`],[`aria-hidden`,`true`,1,`band`,3,`left`,`width`],[`aria-hidden`,`true`,1,`budget`],[`role`,`listbox`,`aria-multiselectable`,`true`,`aria-orientation`,`horizontal`,`tabindex`,`0`,1,`bars`,3,`keydown`,`focus`,`blur`,`pointerdown`,`pointermove`,`pointerleave`],[`role`,`option`,1,`col`,3,`id`,`over`,`out`,`active`],[`aria-hidden`,`true`,1,`tip`,3,`left`,`right`],[`aria-hidden`,`true`,1,`markers`],[3,`over`],[`aria-label`,`Chart key`,1,`legend`],[`aria-hidden`,`true`,1,`key`,`ok`],[`aria-hidden`,`true`,1,`key`,`over`],[`aria-hidden`,`true`,1,`key-marker`],[`aria-hidden`,`true`,1,`key`,`line`],[1,`table`],[`tabindex`,`0`,`role`,`region`,1,`table-wrap`],[1,`sr-only`],[`scope`,`col`,1,`num`],[`scope`,`col`],[`type`,`button`,3,`click`],[`aria-hidden`,`true`,1,`band`],[`role`,`option`,1,`col`,3,`id`],[1,`bar`],[`aria-hidden`,`true`,1,`tip`],[1,`tip-head`],[1,`flag`],[1,`tip-row`],[1,`mono`],[1,`mono`,`name`],[1,`num`]],template:function(e,t){if(e&1&&(R(0,`div`,0)(1,`label`)(2,`span`),K(3,`Start`),z(),R(4,`input`,1),U(`change`,function(e){return t.setEnd(`from`,e)}),z()(),R(5,`label`)(6,`span`),K(7,`End`),z(),R(8,`input`,1),U(`change`,function(e){return t.setEnd(`to`,e)}),z()(),A(9,Tk,2,0,`button`,2),R(10,`p`,3),K(11),z()(),R(12,`p`,4),K(13,` Drag across the bars to pick a range of cycles. With the chart focused, the arrow keys move between cycles, Shift with an arrow key extends the range, Enter picks one cycle and Escape shows all cycles again. `),z(),R(14,`div`,5)(15,`div`,6)(16,`span`,7),K(17),z(),R(18,`span`,8),K(19,`0 ms`),z()(),R(20,`div`,9),A(21,Ek,1,4,`div`,10),R(22,`div`,11)(23,`span`),K(24),z()(),R(25,`div`,12),U(`keydown`,function(e){return t.onKey(e)})(`focus`,function(){return t.onFocus()})(`blur`,function(){return t.focused.set(!1)})(`pointerdown`,function(e){return t.startDrag(e)})(`pointermove`,function(e){return t.onPointerMove(e)})(`pointerleave`,function(){return t.hover.set(null)}),M(26,Dk,2,12,`div`,13,Ck),z(),A(28,jk,12,12,`div`,14),z()(),R(29,`div`,15),M(30,Mk,1,2,`span`,16,Ck),z(),R(32,`ul`,17)(33,`li`),dg(34,`span`,18),K(35,`Within budget`),z(),R(36,`li`),dg(37,`span`,19)(38,`span`,20),K(39,`Over budget `),z(),R(40,`li`),dg(41,`span`,21),K(42),z()(),R(43,`details`,22)(44,`summary`),K(45,`Show the cycles as a table`),z(),R(46,`div`,23)(47,`table`)(48,`caption`,24),K(49),z(),R(50,`thead`)(51,`tr`)(52,`th`,25),K(53,`Cycle`),z(),R(54,`th`,25),K(55,`Duration`),z(),R(56,`th`,26),K(57,`Budget`),z(),R(58,`th`,25),K(59,`Checks`),z(),R(60,`th`,25),K(61,`Passes`),z(),R(62,`th`,26),K(63,`After`),z(),R(64,`th`,26),K(65,`Slowest component`),z()()(),R(66,`tbody`),M(67,Pk,15,7,`tr`,null,wk),z()()()()),e&2){let e,n;D(4),V(`min`,t.firstId())(`max`,t.lastId())(`value`,t.startId()),D(4),V(`min`,t.firstId())(`max`,t.lastId())(`value`,t.endId()),D(),j(t.range()?9:-1),D(2),q(t.summary()),D(),V(`id`,t.hintId),D(2),G(`flush`,t.bars().length>t.gapUntil),D(3),q(t.fmt(t.max())),D(4),j((e=t.band())?21:-1,e),D(),t_(`bottom`,t.budgetAt(),`%`),D(2),q(t.budgetLabel()),D(),k(`aria-label`,`Change detection cycles, `+t.summary())(`aria-describedby`,t.hintId)(`aria-activedescendant`,t.activeOptionId()),D(),N(t.bars()),D(2),j((n=t.tip())?28:-1,n),D(),G(`flush`,t.bars().length>t.gapUntil),D(),N(t.bars()),D(12),q(t.budgetLabel()),D(4),k(`aria-label`,t.tableLabel()),D(3),J(` `,t.tableLabel(),` `),D(18),N(t.selected())}},styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.range[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-}
-
-label[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%] {
-  width: 76px;
-  height: var(--%NS%control-h);
-  padding: 0 8px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-}
-
-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-button[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-}
-
-button[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.summary[_ngcontent-%COMP%], 
-.hint[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 6px 0 8px;
-}
-
-.plot[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 6px;
-}
-
-.axis[_ngcontent-%COMP%] {
-  position: relative;
-  width: 44px;
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  text-align: right;
-}
-
-.tick[_ngcontent-%COMP%] {
-  position: absolute;
-  right: 0;
-}
-
-.tick.top[_ngcontent-%COMP%] {
-  top: 0;
-}
-
-.tick.zero[_ngcontent-%COMP%] {
-  bottom: -6px;
-}
-
-.area[_ngcontent-%COMP%] {
-  position: relative;
-  height: 140px;
-  border-bottom: 1px solid var(--%NS%border-strong);
-}
-
-.bars[_ngcontent-%COMP%] {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: stretch;
-  column-gap: 2px;
-  touch-action: none;
-  cursor: crosshair;
-  user-select: none;
-}
-
-.flush[_ngcontent-%COMP%]   .bars[_ngcontent-%COMP%], 
-.markers.flush[_ngcontent-%COMP%] {
-  column-gap: 0;
-}
-
-.bars[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.col[_ngcontent-%COMP%] {
-  position: relative;
-  display: flex;
-  flex: 1 1 0;
-  align-items: flex-end;
-  justify-content: center;
-  min-width: 0;
-}
-
-.bar[_ngcontent-%COMP%] {
-  width: min(24px, 100%);
-  min-height: 1px;
-  background: var(--%NS%accent);
-  border-radius: 4px 4px 0 0;
-  transition: height 150ms var(--%NS%ease);
-}
-
-.flush[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
-  border-radius: 1px 1px 0 0;
-}
-
-.col.over[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
-  background: repeating-linear-gradient(135deg, var(--%NS%danger) 0 3px, color-mix(in srgb, var(--%NS%danger) 55%, var(--%NS%surface)) 3px 6px);
-}
-
-.col.out[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
-  opacity: 0.4;
-}
-
-.col[_ngcontent-%COMP%]:hover   .bar[_ngcontent-%COMP%], 
-.col.active[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
-  outline: 2px solid var(--%NS%text-strong);
-  outline-offset: 1px;
-}
-
-.band[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  background: var(--%NS%accent-soft);
-  border-inline: 2px solid var(--%NS%accent);
-  pointer-events: none;
-}
-
-.budget[_ngcontent-%COMP%] {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 0;
-  border-top: 1px solid var(--%NS%text-2);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.budget[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  position: absolute;
-  right: 0;
-  bottom: 2px;
-  padding: 0 4px;
-  background: var(--%NS%surface);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.markers[_ngcontent-%COMP%] {
-  display: flex;
-  column-gap: 2px;
-  height: 8px;
-  margin: 3px 0 0 50px;
-}
-
-.markers[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  display: flex;
-  flex: 1 1 0;
-  justify-content: center;
-  min-width: 0;
-}
-
-.markers[_ngcontent-%COMP%]   span.over[_ngcontent-%COMP%]::before {
-  content: "";
-  width: min(10px, 100%);
-}
-
-.markers[_ngcontent-%COMP%]   span.over[_ngcontent-%COMP%]::before, 
-.key-marker[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  clip-path: polygon(50% 0, 100% 100%, 0 100%);
-}
-
-.key-marker[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-right: 6px;
-}
-
-.tip[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 4px;
-  z-index: 2;
-  width: min(240px, 100% - 8px);
-  padding: 8px 10px;
-  background: var(--%NS%surface-3);
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  pointer-events: none;
-}
-
-.tip[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 2px 0;
-}
-
-.tip[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-}
-
-.tip-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 8px;
-}
-
-.flag[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border: 1px solid;
-  border-radius: 999px;
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tip-row[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.tip-row[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.legend[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
-  margin: 8px 0 0;
-  padding: 0;
-  list-style: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.legend[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-}
-
-.key[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin-right: 6px;
-  border-radius: 2px;
-}
-
-.key.ok[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-}
-
-.key.over[_ngcontent-%COMP%] {
-  background: repeating-linear-gradient(135deg, var(--%NS%danger) 0 3px, color-mix(in srgb, var(--%NS%danger) 55%, var(--%NS%surface)) 3px 6px);
-}
-
-.key.line[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 0;
-  border-top: 1px solid var(--%NS%text-2);
-  border-radius: 0;
-}
-
-.table[_ngcontent-%COMP%] {
-  margin-top: 8px;
-  font-size: 12px;
-}
-
-summary[_ngcontent-%COMP%] {
-  width: fit-content;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  max-height: 320px;
-  margin-top: 6px;
-  overflow: auto;
-}
-
-.table-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 600px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-th[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  font-weight: 500;
-}
-
-td.mono[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bar[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},zk=(e,t)=>t.id,Bk=(e,t)=>t.index,Vk=(e,t)=>t.kind;function Hk(e,t){if(e&1&&(R(0,`p`,0),K(1),z()),e&2){let e=W(2);D(),Y(` Pick `,e.max,` cycles or fewer to see their spans. `,e.count(),` are picked. `)}}function Uk(e,t){if(e&1&&(R(0,`span`),K(1),z()),e&2){let e=t.$implicit;t_(`left`,e.x,`%`)(`width`,e.w,`%`),D(),J(`cycle `,e.id)}}function Wk(e,t){if(e&1){let e=B();R(0,`button`,11),U(`focus`,function(){let t=S(e).$implicit;return C(W(3).current.set(t.index))})(`mouseenter`,function(){let t=S(e).$implicit;return C(W(3).hover.set(t.index))})(`mouseleave`,function(){return S(e),C(W(3).hover.set(null))})(`click`,function(){let t=S(e).$implicit;return C(W(3).choose(t))}),R(1,`span`,12),K(2),z()()}if(e&2){let e=t.$implicit,n=W(3);n_(L_(`block kind-`,e.kind)),t_(`left`,e.x,`%`)(`width`,e.w,`%`)(`top`,e.depth*n.row,`px`),G(`narrow`,e.w<4),k(`tabindex`,e.index===n.tabStop()?0:-1)(`data-index`,e.index)(`aria-label`,n.describe(e))(`aria-disabled`,e.component?null:`true`),D(2),q(e.name)}}function Gk(e,t){if(e&1&&(R(0,`li`),dg(1,`span`,13),K(2),z()),e&2){let e=t.$implicit;D(),n_(L_(`key kind-`,e.kind)),D(),q(e.label)}}function Kk(e,t){if(e&1&&(R(0,`p`,0),K(1),z()),e&2){let e=W(3);D(),Y(` Each cycle keeps its longest spans. `,e.dropped(),` shorter `,e.dropped()===1?`span was`:`spans were`,` left out. `)}}function qk(e,t){if(e&1&&(R(0,`tr`)(1,`td`,17),K(2),z(),R(3,`td`,18),K(4),z(),R(5,`td`),K(6),z(),R(7,`td`,17),K(8),z(),R(9,`td`,17),K(10),z(),R(11,`td`,17),K(12),z(),R(13,`td`,17),K(14),z()()),e&2){let e=t.$implicit,n=W(4);D(2),q(e.cycleId),D(),t_(`padding-left`,6+e.depth*8,`px`),D(),q(e.name),D(2),q(n.kindLabel(e)),D(2),q(e.depth),D(2),q(n.fmt(e.start)),D(2),q(n.fmt(e.ms)),D(2),q(n.fmt(e.selfMs))}}function Jk(e,t){if(e&1&&(R(0,`div`,10)(1,`table`)(2,`caption`,14),K(3),z(),R(4,`thead`)(5,`tr`)(6,`th`,15),K(7,`Cycle`),z(),R(8,`th`,16),K(9,`Span`),z(),R(10,`th`,16),K(11,`Kind`),z(),R(12,`th`,15),K(13,`Depth`),z(),R(14,`th`,15),K(15,`Start`),z(),R(16,`th`,15),K(17,`Total`),z(),R(18,`th`,15),K(19,`Self`),z()()(),R(20,`tbody`),M(21,qk,15,9,`tr`,null,Bk),z()()()),e&2){let e=W(),t=W(2);k(`aria-label`,t.tableLabel()),D(3),J(` `,t.tableLabel(),` `),D(18),N(e.blocks)}}function Yk(e,t){if(e&1){let e=B();R(0,`div`,1),U(`keydown`,function(t){return S(e),C(W(2).onKey(t))}),R(1,`div`,2),M(2,Uk,2,5,`span`,3,zk),z(),R(4,`div`,4),M(5,Wk,3,16,`button`,5,Bk),z()(),R(7,`p`,6),K(8),z(),R(9,`ul`,7),M(10,Gk,3,4,`li`,null,Vk),z(),R(12,`p`,8),K(13,` Arrow keys move along a row, Up goes to the enclosing span and Down to the first nested one. Enter on a component shows it in the tree. `),z(),A(14,Kk,2,2,`p`,0),R(15,`details`,9),U(`toggle`,function(t){return S(e),C(W(2).onToggle(t))}),R(16,`summary`),K(17,`Show the spans as a table`),z(),A(18,Jk,23,2,`div`,10),z()}if(e&2){let e=t,n=W(2);k(`aria-label`,n.label()),D(2),N(e.cycles),D(2),t_(`height`,e.depth*n.row,`px`),D(),N(e.blocks),D(3),q(n.readout()),D(2),N(n.kinds),D(4),j(n.dropped()?14:-1),D(4),j(n.tableOpen()?18:-1)}}function Xk(e,t){if(e&1&&(R(0,`h3`),K(1,`Spans in the picked cycles`),z(),A(2,Hk,2,2,`p`,0)(3,Yk,19,6)),e&2){let e,t=W();D(2),j(t.tooMany()?2:(e=t.graph())?3:-1,e)}}var Zk=22;function Qk(e,t){for(let n=e.length-1;n>=0;n--)if(t(e[n]))return e[n]}var $k=class e{cycles=$([]);names=$([]);scope=$(`the recording`);pick=cv();row=Zk;max=30;kinds=[`c`,`h`,`r`,`o`].map(e=>({kind:e,label:QO[e]}));current=T(0);tableOpen=T(!1);hover=T(null);hasSpans=X(()=>this.cycles().some(e=>e.spans?.length));count=X(()=>this.cycles().length);tooMany=X(()=>this.count()>30);graph=X(()=>this.tooMany()?null:ek(this.cycles(),this.names()));tabStop=X(()=>Math.min(this.current(),Math.max((this.graph()?.blocks.length??1)-1,0)));dropped=X(()=>this.graph()?.cycles.reduce((e,t)=>e+t.droppedSpans,0)??0);label=X(()=>`Spans in ${this.scope()} over time, nested by depth. Pick a component to show it in the tree.`);readout=X(()=>{let e=(this.graph()?.blocks??[])[this.hover()??this.tabStop()];return e?this.describe(e):``});tableLabel=X(()=>`Timed spans in ${this.scope()}`);fmt(e){return qO(e)}kindLabel(e){return QO[e.kind]}onToggle(e){this.tableOpen.set(e.target.open)}describe(e){let t=[e.name,QO[e.kind],`${qO(e.ms)} total`];return e.selfMs!==e.ms&&t.push(`${qO(e.selfMs)} self`),t.push(e.start<0?`cycle ${e.cycleId}, ${qO(-e.start)} before it started`:`cycle ${e.cycleId} at ${qO(e.start)}`),t.join(`, `)}choose(e){this.current.set(e.index),e.component&&this.pick.emit(e.component)}onKey(e){let t=this.graph()?.blocks??[];if(!t.length)return;let n=t[this.tabStop()],r;switch(e.key){case`ArrowRight`:r=t.find(e=>e.index>n.index&&e.depth===n.depth);break;case`ArrowLeft`:r=Qk(t,e=>e.index<n.index&&e.depth===n.depth);break;case`ArrowUp`:r=n.parent===null?Qk(t,e=>e.index<n.index&&e.depth===n.depth-1):t[n.parent];break;case`ArrowDown`:r=t.find(e=>e.parent===n.index)??t.find(e=>e.index>n.index&&e.depth===n.depth+1);break;case`Home`:r=t[0];break;case`End`:r=t.at(-1);break;default:return}e.preventDefault(),this.hover.set(null),r&&(this.current.set(r.index),e.currentTarget.querySelector(`button[data-index="${r.index}"]`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-cd-flame-graph`]],inputs:{cycles:[1,`cycles`],names:[1,`names`],scope:[1,`scope`]},outputs:{pick:`pick`},decls:1,vars:1,consts:[[1,`note`],[`role`,`group`,1,`flame`,3,`keydown`],[`aria-hidden`,`true`,1,`cycles`],[3,`left`,`width`],[1,`rows`],[`type`,`button`,3,`class`,`narrow`,`left`,`width`,`top`],[`aria-hidden`,`true`,1,`readout`],[`aria-label`,`Span kinds`,1,`legend`],[1,`hint`],[1,`table`,3,`toggle`],[`tabindex`,`0`,`role`,`region`,1,`table-wrap`],[`type`,`button`,3,`focus`,`mouseenter`,`mouseleave`,`click`],[1,`text`],[`aria-hidden`,`true`],[1,`sr-only`],[`scope`,`col`,1,`num`],[`scope`,`col`],[1,`num`],[1,`mono`]],template:function(e,t){e&1&&A(0,Xk,4,1),e&2&&j(t.hasSpans()?0:-1)},styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 12px 0 6px;
-}
-
-.flame[_ngcontent-%COMP%] {
-  position: relative;
-}
-
-.cycles[_ngcontent-%COMP%] {
-  position: relative;
-  height: 18px;
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.cycles[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 0;
-  padding-left: 4px;
-  border-left: 1px solid var(--%NS%border-strong);
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rows[_ngcontent-%COMP%] {
-  position: relative;
-  min-height: 22px;
-}
-
-.block[_ngcontent-%COMP%] {
-  position: absolute;
-  height: 20px;
-  min-width: 2px;
-  padding: 0 4px;
-  overflow: hidden;
-  border: 0;
-  border-radius: 3px;
-  color: var(--%NS%text-strong);
-  font: inherit;
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  line-height: 20px;
-  text-align: left;
-  cursor: default;
-}
-
-.block.narrow[_ngcontent-%COMP%] {
-  padding: 0;
-}
-
-.block.narrow[_ngcontent-%COMP%]   .text[_ngcontent-%COMP%] {
-  display: none;
-}
-
-.text[_ngcontent-%COMP%] {
-  display: block;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-
-.kind-c[_ngcontent-%COMP%] {
-  background: color-mix(in srgb, var(--%NS%accent) 35%, var(--%NS%surface));
-}
-
-.block[_ngcontent-%COMP%]:not([aria-disabled]) {
-  cursor: pointer;
-}
-
-.kind-h[_ngcontent-%COMP%] {
-  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--%NS%accent) 30%, var(--%NS%surface)) 0 4px, color-mix(in srgb, var(--%NS%accent) 10%, var(--%NS%surface)) 4px 8px);
-}
-
-.kind-r[_ngcontent-%COMP%] {
-  background-color: var(--%NS%surface-3);
-  background-image: radial-gradient(circle, var(--%NS%text-3) 1px, transparent 1.6px);
-  background-size: 6px 6px;
-}
-
-.kind-o[_ngcontent-%COMP%] {
-  background-color: var(--%NS%surface-2);
-  background-image: repeating-linear-gradient(0deg, var(--%NS%border-strong) 0 1px, transparent 1px 5px);
-  box-shadow: inset 0 0 0 1px var(--%NS%text-2);
-}
-
-.block[_ngcontent-%COMP%]:hover {
-  outline: 2px solid var(--%NS%text-strong);
-  outline-offset: -2px;
-}
-
-.block[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-  outline-color: var(--%NS%text-strong);
-  z-index: 1;
-}
-
-.readout[_ngcontent-%COMP%], 
-.hint[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.readout[_ngcontent-%COMP%] {
-  min-height: 18px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.legend[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 16px;
-  margin: 6px 0 0;
-  padding: 0;
-  list-style: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.legend[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-}
-
-.key[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 18px;
-  height: 12px;
-  margin-right: 6px;
-  border-radius: 2px;
-}
-
-.table[_ngcontent-%COMP%] {
-  margin-top: 6px;
-  font-size: 12px;
-}
-
-summary[_ngcontent-%COMP%] {
-  width: fit-content;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  max-height: 320px;
-  margin-top: 6px;
-  overflow: auto;
-}
-
-.table-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 560px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-th[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  font-weight: 500;
-}
-
-td.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  overflow-wrap: anywhere;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}`]})};function eA(e,t){if(e&1&&(R(0,`tr`)(1,`td`,5),K(2),z(),R(3,`td`,6),K(4),z(),R(5,`td`,6),K(6),z(),R(7,`td`,6),K(8),z()()),e&2){let e=t.$implicit,n=W(3);D(2),Y(``,e.name,`.`,e.hook),D(2),q(e.calls),D(2),q(n.ms(e.ms)),D(2),q(n.ms(e.maxMs))}}function tA(e,t){if(e&1&&(R(0,`div`)(1,`h3`),K(2,`Lifecycle hooks`),z(),R(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,3),K(7,`Hook`),z(),R(8,`th`,4),K(9,`Calls`),z(),R(10,`th`,4),K(11,`Time`),z(),R(12,`th`,4),K(13,`Slowest`),z()()(),R(14,`tbody`),M(15,eA,9,5,`tr`,null,$h),z()()()),e&2){let e=W(2);D(15),N(e.hooks())}}function nA(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` (`,e.listener,`) `)}}function rA(e,t){if(e&1&&(R(0,`tr`)(1,`td`,5),K(2),A(3,nA,1,1),z(),R(4,`td`,6),K(5),z(),R(6,`td`,6),K(7),z(),R(8,`td`,6),K(9),z()()),e&2){let e=t.$implicit,n=W(3);D(2),J(` `,e.name,` `),D(),j(e.listener?3:-1),D(2),q(e.calls),D(2),q(n.ms(e.ms)),D(2),q(n.ms(e.maxMs))}}function iA(e,t){if(e&1&&(R(0,`div`)(1,`h3`),K(2,`Output listeners`),z(),R(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,3),K(7,`Listener`),z(),R(8,`th`,4),K(9,`Calls`),z(),R(10,`th`,4),K(11,`Time`),z(),R(12,`th`,4),K(13,`Slowest`),z()()(),R(14,`tbody`),M(15,rA,10,5,`tr`,null,$h),z()()()),e&2){let e=W(2);D(15),N(e.outputs())}}function aA(e,t){if(e&1&&(R(0,`p`,1),K(1),z()),e&2){let e=t,n=W(2);D(),O_(` afterRender callbacks ran `,e.runs,` `,e.runs===1?`time`:`times`,`, `,n.ms(e.ms),` in total, slowest `,n.ms(e.maxMs),`. `)}}function oA(e,t){if(e&1&&(R(0,`p`,2),K(1),z()),e&2){let e=W(2);D(),Y(` `,e.dropped(),` more hook or output `,e.dropped()===1?`row is`:`rows are`,` left out. A recording lists at most 100 of each. `)}}function sA(e,t){if(e&1&&(R(0,`div`,0),A(1,tA,17,0,`div`),A(2,iA,17,0,`div`),z(),A(3,aA,2,4,`p`,1),A(4,oA,2,2,`p`,2)),e&2){let e,t=W();D(),j(t.hooks().length?1:-1),D(),j(t.outputs().length?2:-1),D(),j((e=t.afterRender())?3:-1,e),D(),j(t.dropped()?4:-1)}}var cA=10;function lA(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}var uA=class e{page=$(null);hooks=X(()=>(this.page()?.hooks??[]).slice(0,cA));outputs=X(()=>(this.page()?.outputs??[]).slice(0,cA));afterRender=X(()=>{let e=this.page()?.afterRender;return e?.runs?e:null});dropped=X(()=>this.page()?.droppedTimings??0);ms(e){return lA(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-cd-timing`]],inputs:{page:[1,`page`]},decls:1,vars:1,consts:[[1,`timing`],[1,`after-render`],[1,`note`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`mono`],[1,`num`]],template:function(e,t){e&1&&A(0,sA,5,4),e&2&&j(t.hooks().length||t.outputs().length||t.afterRender()?0:-1)},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.timing[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0 16px;
-}
-
-@media (min-width: 880px) {
-  .timing[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }
-}
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 12px 0 6px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 500;
-}
-
-td.mono[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.after-render[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}`]})};function dA(e,t){if(e&1&&(R(0,`p`,5),K(1),z()),e&2){let e=W();D(),q(e.error())}}function fA(e,t){let n=new Blob([JSON.stringify(e,null,2)],{type:`application/json`}),r=URL.createObjectURL(n),i=document.createElement(`a`);i.href=r,i.download=t,document.body.append(i),i.click(),i.remove(),setTimeout(()=>URL.revokeObjectURL(r),0)}var pA=class e{page=$(null);maxCycles=$(200);imported=cv();error=T(``);hasCycles(){return(this.page()?.cycles.length??0)>0}exportJson(){let e=this.page();e&&fA(RO(e,e.pageId),`change-detection-${e.pageId}.json`)}exportTrace(){let e=this.page();e&&fA(GO(e,e.pageId),`change-detection-${e.pageId}.trace.json`)}async read(e){let t=e.files?.[0];if(e.value=``,!t)return;if(t.size>2e7){this.error.set(`${t.name}: The file is larger than 20 MB.`);return}let n;try{n=await t.text()}catch{this.error.set(`Could not read the file.`);return}let r=zO(n,this.maxCycles());if(!r.ok){this.error.set(`${t.name}: ${r.error}`);return}this.error.set(``),this.imported.emit({fileName:t.name,page:{...r.recording,pageId:r.pageId,supported:!0}})}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-cd-transfer`]],inputs:{page:[1,`page`],maxCycles:[1,`maxCycles`]},outputs:{imported:`imported`},decls:10,vars:3,consts:[[`file`,``],[`role`,`group`,`aria-label`,`Export and import the recording`,1,`transfer`],[`type`,`button`,3,`click`,`disabled`],[`type`,`button`,3,`click`],[`type`,`file`,`accept`,`.json,application/json`,`hidden`,``,3,`change`],[`role`,`alert`,1,`error`]],template:function(e,t){if(e&1){let e=B();R(0,`div`,1)(1,`button`,2),U(`click`,function(){return t.exportJson()}),K(2,`Export JSON`),z(),R(3,`button`,2),U(`click`,function(){return t.exportTrace()}),K(4,` Export trace (Perfetto) `),z(),R(5,`button`,3),U(`click`,function(){return S(e),C(Pg(8).click())}),K(6,`Import`),z(),R(7,`input`,4,0),U(`change`,function(){S(e);let n=Pg(8);return C(t.read(n))}),z()(),A(9,dA,2,1,`p`,5)}e&2&&(D(),V(`disabled`,!t.hasCycles()),D(2),V(`disabled`,!t.hasCycles()),D(6),j(t.error()?9:-1))},styles:[`[_nghost-%COMP%] {
-  display: contents;
-}
-
-.transfer[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-button[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.error[_ngcontent-%COMP%] {
-  flex-basis: 100%;
-  margin: 0;
-  color: var(--%NS%danger-text);
-  font-size: 12px;
-}`]})},mA=(e,t)=>t.stat.name;function hA(e,t){if(e&1&&(R(0,`span`,8),K(1),z()),e&2){let e=W(2).$implicit;D(),J(``,e.other,` more`)}}function gA(e,t){if(e&1&&(R(0,`div`,6)(1,`span`,7),K(2),z(),A(3,hA,2,1,`span`,8),z()),e&2){let e=W().$implicit;t_(`--%NS%tone`,e.tone+`%`),D(2),q(e.label),D(),j(e.roomy?3:-1)}}function _A(e,t){if(e&1&&(R(0,`span`,10),K(1),z(),R(2,`span`,11),K(3),z()),e&2){let e=W(2).$implicit,t=W(2);D(),q(e.stat.name),D(2),q(t.fmt(e.stat.ms))}}function vA(e,t){if(e&1){let e=B();R(0,`button`,9),U(`focus`,function(){S(e);let t=W().$index;return C(W(2).current.set(t))})(`click`,function(){S(e);let t=W().$implicit;return C(W(2).pick.emit(t.stat.name))}),A(1,_A,4,2),z()}if(e&2){let e=W(),t=e.$implicit,n=e.$index,r=W(2);t_(`--%NS%tone`,t.tone+`%`),k(`tabindex`,n===r.tabStop()?0:-1)(`aria-label`,t.label)(`data-index`,n),D(),j(t.roomy?1:-1)}}function yA(e,t){if(e&1&&(R(0,`li`),A(1,gA,4,4,`div`,4)(2,vA,2,6,`button`,5),z()),e&2){let e=t.$implicit;t_(`left`,e.x,`%`)(`top`,e.y,`%`)(`width`,e.w,`%`)(`height`,e.h,`%`),D(),j(e.other?1:2)}}function bA(e,t){if(e&1){let e=B();R(0,`ul`,2),U(`keydown`,function(t){return S(e),C(W().onKey(t))}),M(1,yA,3,9,`li`,3,mA),z()}if(e&2){let e=W();k(`aria-label`,e.label()),D(),N(e.cells())}}function xA(e,t){e&1&&(R(0,`p`,1),K(1,`No component time in these cycles.`),z())}var SA=24,CA=3,wA=class e{stats=$([]);scope=$(`the recording`);pick=cv();current=T(0);label=X(()=>`Self time per component in ${this.scope()}, largest first. Pick one to show it in the tree.`);cells=X(()=>{let e=this.stats().filter(e=>e.ms>0),t=e.slice(0,SA),n=e.slice(SA),r=n.reduce((e,t)=>e+t.ms,0),i=t.map(e=>({stat:e,other:0}));n.length&&i.push({stat:{name:`Other components`,checks:0,ms:r,maxMs:0,cycles:0},other:n.length});let a=e.reduce((e,t)=>e+t.ms,0),o=t[0]?.ms??1,s=ZO(i,e=>e.stat.ms,CA);return s.sort((e,t)=>Number(e.item.other>0)-Number(t.item.other>0)),s.map(e=>{let{stat:t,other:n}=e.item,r=a?Math.round(t.ms/a*100):0;return{stat:t,other:n,x:e.x,y:e.y,w:e.w,h:e.h,tone:n?0:14+Math.round(26*Math.min(t.ms/o,1)),roomy:e.w>=10&&e.h>=22,label:n?`${n} more components, ${qO(t.ms)}, ${r}% of self time`:`${t.name}, ${qO(t.ms)} self time, ${r}%, ${t.checks} ${t.checks===1?`check`:`checks`}`}})});tabStop=X(()=>Math.min(this.current(),Math.max(this.cells().filter(e=>!e.other).length-1,0)));fmt(e){return qO(e)}onKey(e){let t=this.cells().filter(e=>!e.other).length;if(!t)return;let n=this.tabStop(),r;switch(e.key){case`ArrowRight`:case`ArrowDown`:r=Math.min(n+1,t-1);break;case`ArrowLeft`:case`ArrowUp`:r=Math.max(n-1,0);break;case`Home`:r=0;break;case`End`:r=t-1;break;default:return}e.preventDefault(),this.current.set(r),e.currentTarget.querySelector(`button[data-index="${r}"]`)?.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-cd-treemap`]],inputs:{stats:[1,`stats`],scope:[1,`scope`]},outputs:{pick:`pick`},decls:2,vars:1,consts:[[1,`map`],[1,`empty`],[1,`map`,3,`keydown`],[3,`left`,`top`,`width`,`height`],[1,`cell`,`other`,3,`--%NS%tone`],[`type`,`button`,1,`cell`,3,`--%NS%tone`],[1,`cell`,`other`],[1,`sr-only`],[`aria-hidden`,`true`,1,`name`],[`type`,`button`,1,`cell`,3,`focus`,`click`],[1,`name`,`mono`],[1,`ms`]],template:function(e,t){e&1&&A(0,bA,3,1,`ul`,0)(1,xA,2,0,`p`,1),e&2&&j(+!t.cells().length)},styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.map[_ngcontent-%COMP%] {
-  position: relative;
-  height: 180px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-li[_ngcontent-%COMP%] {
-  position: absolute;
-  padding: 1px;
-}
-
-.cell[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 2px;
-  width: 100%;
-  height: 100%;
-  padding: 4px 6px;
-  overflow: hidden;
-  background: color-mix(in srgb, var(--%NS%accent) var(--%NS%tone, 20%), var(--%NS%surface));
-  border: 0;
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-strong);
-  font: inherit;
-  font-size: 12px;
-  text-align: left;
-}
-
-button.cell[_ngcontent-%COMP%] {
-  cursor: pointer;
-}
-
-button.cell[_ngcontent-%COMP%]:hover {
-  outline: 2px solid var(--%NS%text-strong);
-  outline-offset: -2px;
-}
-
-button.cell[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-  outline-color: var(--%NS%text-strong);
-}
-
-.cell.other[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-}
-
-.name[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.ms[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.empty[_ngcontent-%COMP%] {
-  margin: 8px 0;
-  color: var(--%NS%text-2);
-}`]})},TA=(e,t)=>t.id;function EA(e,t){if(e&1){let e=B();F(0,`button`,14),H(`click`,function(){return S(e),C(W(2).clear())}),K(1,`Clear`),I()}}function DA(e,t){if(e&1){let e=B();F(0,`button`,11),H(`click`,function(){return S(e),C(W().toggle())}),L(1,`span`,12),K(2),I(),A(3,EA,2,0,`button`,13)}if(e&2){let e=W();G(`on`,e.recording()),P(`disabled`,!e.pageId()),D(2),J(` `,e.recording()?`Stop recording`:`Record`,` `),D(),j(e.cycles().length?3:-1)}}function OA(e,t){if(e&1){let e=B();F(0,`p`,6)(1,`span`,15),K(2,`Imported recording`),I(),F(3,`span`,16),K(4),I(),F(5,`button`,14),H(`click`,function(){return S(e),C(W().closeImport())}),K(6,`Back to live recording`),I()()}e&2&&(D(4),q(t.fileName))}function kA(e,t){e&1&&K(0,` An app on a device has no DOM, so checks that changed nothing are not counted there. `)}function AA(e,t){e&1&&K(0,` A recording keeps running when the tab reloads, so it catches the next start of the app. The cycles from before the reload are gone with the old page. `)}function jA(e,t){e&1&&(F(0,`p`,9),K(1,` The page has Angular's profiler hook, but the recording could not attach to it yet. The page tries again on its next update while recording is on. If this stays, stop and start the recording, or reload the page. `),I())}function MA(e,t){e&1&&L(0,`app-angular-unavailable`,17),e&2&&P(`page`,W(2).angularPage())}function NA(e,t){e&1&&A(0,jA,2,0,`p`,9)(1,MA,1,1,`app-angular-unavailable`,17),e&2&&j(+!W().attachPending())}function PA(e,t){e&1&&(F(0,`p`,9),K(1,`Angular profiling stays on until the page reloads.`),I())}function FA(e,t){e&1&&L(0,`app-angular-unavailable`,21),e&2&&P(`page`,W(2).angularPage())}function IA(e,t){if(e&1){let e=B();F(0,`div`,18)(1,`span`,19),K(2,`Live views`),I(),F(3,`button`,20),H(`click`,function(){S(e);let t=W();return C(t.setView(`flash`,!t.views().flash))}),L(4,`span`,12),K(5,` Flash checks `),I(),F(6,`button`,20),H(`click`,function(){S(e);let t=W();return C(t.setView(`track`,!t.views().track))}),L(7,`span`,12),K(8,` Performance track `),I(),F(9,`button`,20),H(`click`,function(){return S(e),C(W().setView(`angularProfiling`,!0))}),L(10,`span`,12),K(11,` Angular profiling `),I()(),F(12,`p`,7),K(13,` Flash checks draws a box over each component on the page as Angular checks it, with its name and how often it was checked, fading over a second. Performance track adds a Pangular track to the Chrome Performance panel with every component check, hook and output. Angular profiling turns on Angular's own track there. `),I(),A(14,PA,2,0,`p`,9)(15,FA,1,1,`app-angular-unavailable`,21)}if(e&2){let e=W();D(3),P(`disabled`,!e.canShowViews()),k(`aria-pressed`,e.views().flash),D(3),P(`disabled`,!e.canShowViews()),k(`aria-pressed`,e.views().track),D(3),P(`disabled`,!e.canShowViews()||e.views().angularProfiling||!e.views().angularProfilingAvailable),k(`aria-pressed`,e.views().angularProfiling),D(5),j(e.views().angularProfiling?14:e.views().angularProfilingAvailable?-1:15)}}function LA(e,t){if(e&1&&(F(0,`p`,9),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function RA(e,t){if(e&1&&(F(0,`p`,24),K(1),I()),e&2){let e=W(2);D(),J(` `,e.range()?`The picked cycles have no timed spans, so there is no flame graph for them.`:`This recording has no timed spans, so there is no flame graph. A recording from an older version, or a file saved without spans, has none.`,` `)}}function zA(e,t){e&1&&(F(0,`p`,9),K(1,` For picked cycles, totals come from the 10 slowest components each cycle lists. `),I())}function BA(e,t){if(e&1){let e=B();F(0,`h3`),K(1,`Cycles`),I(),F(2,`app-cd-cycle-chart`,22),M_(`rangeChange`,function(t){S(e);let n=W();return j_(n.range,t)||(n.range=t),C(t)}),I(),F(3,`app-cd-flame-graph`,23),H(`pick`,function(t){return S(e),C(W().showComponent.emit(t))}),I(),A(4,RA,2,1,`p`,24),F(5,`h3`),K(6,`Self time by component`),I(),A(7,zA,2,0,`p`,9),F(8,`app-cd-treemap`,25),H(`pick`,function(t){return S(e),C(W().showComponent.emit(t))}),I()}if(e&2){let e=W();D(2),P(`cycles`,e.cycles())(`slowMs`,e.slowMs()),A_(`range`,e.range),D(),P(`cycles`,e.picked())(`names`,e.spanNames())(`scope`,e.scope()),D(),j(e.hasSpans()?-1:4),D(3),j(e.range()?7:-1),D(),P(`stats`,e.stats())(`scope`,e.scope())}}function VA(e,t){if(e&1){let e=B();F(0,`tr`)(1,`td`,16)(2,`button`,31),H(`click`,function(){let t=S(e).$implicit;return C(W(2).showComponent.emit(t.name))}),K(3),I()(),F(4,`td`,32),K(5),I(),F(6,`td`,32),K(7),I(),F(8,`td`,32),K(9),I()()}if(e&2){let e=t.$implicit,n=W(2);D(3),J(` `,e.name,` `),D(2),q(e.checks),D(2),q(n.ms(e.ms)),D(2),q(n.ms(e.maxMs))}}function HA(e,t){e&1&&(F(0,`tr`)(1,`td`,33),K(2,`No component time in the picked cycles.`),I()())}function UA(e,t){if(e&1){let e=B();F(0,`tr`)(1,`td`,16)(2,`button`,31),H(`click`,function(){let t=S(e).$implicit;return C(W(2).showComponent.emit(t.name))}),K(3),I()(),F(4,`td`,32),K(5),I(),F(6,`td`,32),K(7),I(),F(8,`td`,32),K(9),I()()}if(e&2){let e=t.$implicit,n=W(2);D(3),J(` `,e.name,` `),D(2),q(e.checks),D(2),q(e.cycles),D(2),q(n.ms(e.ms))}}function WA(e,t){e&1&&(F(0,`tr`)(1,`td`,33),K(2,`No component checks in the picked cycles.`),I()())}function GA(e,t){if(e&1&&(F(0,`span`,35),K(1,`from `),F(2,`span`,16),K(3),I()()),e&2){let e=W(3);D(3),q(e.causeText(t))}}function KA(e,t){if(e&1&&(F(0,`span`,35),K(1,`after `),F(2,`span`,16),K(3),I()()),e&2){let e=W().$implicit;D(3),q(e.trigger)}}function qA(e,t){if(e&1&&(F(0,`span`,36),K(1),I()),e&2){let e=W().$implicit;D(),J(``,e.unchanged,` changed nothing`)}}function JA(e,t){if(e&1&&(F(0,`span`,36),K(1),I()),e&2){let e=W().$implicit,t=W(2);D(),J(`hooks `,t.ms(e.hookMs))}}function YA(e,t){if(e&1&&(F(0,`span`,36),K(1),I()),e&2){let e=W().$implicit,t=W(2);D(),J(`afterRender `,t.ms(e.afterRenderMs))}}function XA(e,t){if(e&1&&(F(0,`span`,37),K(1,` slowest `),F(2,`span`,16),K(3),I(),K(4),I()),e&2){let e=t,n=W(3);D(3),q(e.name),D(),J(` `,n.ms(e.ms),` `)}}function ZA(e,t){if(e&1&&(F(0,`li`)(1,`span`,34),K(2),I(),F(3,`span`,16),K(4),I(),F(5,`span`),K(6),I(),A(7,GA,4,1,`span`,35)(8,KA,4,1,`span`,35),A(9,qA,2,1,`span`,36),A(10,JA,2,1,`span`,36),A(11,YA,2,1,`span`,36),A(12,XA,5,2,`span`,37),I()),e&2){let e,n,r=t.$implicit,i=W(2);D(2),q(i.clock(r.at)),D(2),q(i.ms(r.ms)),D(2),O_(` `,r.checks,` `,r.checks===1?`check`:`checks`,`, `,r.passes,` `,r.passes===1?`pass`:`passes`,` `),D(),j((e=r.cause)?7:r.trigger?8:-1,e),D(2),j(r.unchanged?9:-1),D(),j(r.hookMs?10:-1),D(),j(r.afterRenderMs?11:-1),D(),j((n=r.components[0])?12:-1,n)}}function QA(e,t){if(e&1&&(F(0,`div`,26)(1,`div`)(2,`h3`),K(3),I(),F(4,`table`)(5,`thead`)(6,`tr`)(7,`th`,27),K(8,`Component`),I(),F(9,`th`,28),K(10,`Checks`),I(),F(11,`th`,28),K(12,`Self time`),I(),F(13,`th`,28),K(14,`Slowest`),I()()(),F(15,`tbody`),M(16,VA,10,4,`tr`,null,$h,!1,HA,3,0,`tr`),I()(),F(19,`h3`),K(20),I(),F(21,`table`)(22,`thead`)(23,`tr`)(24,`th`,27),K(25,`Component`),I(),F(26,`th`,28),K(27,`Checks`),I(),F(28,`th`,28),K(29,`Cycles`),I(),F(30,`th`,28),K(31,`Self time`),I()()(),F(32,`tbody`),M(33,UA,10,4,`tr`,null,$h,!1,WA,3,0,`tr`),I()(),F(36,`p`,7),K(37,` Select a component name to show its most checked instance in the tree. `),I()(),F(38,`div`)(39,`h3`),K(40,`Latest cycles`),I(),F(41,`ol`,29),M(42,ZA,13,11,`li`,null,TA),I()()(),L(44,`app-cd-timing`,30)(45,`app-cd-diagnosis`,30)),e&2){let e=W();D(3),J(` `,e.range()?`Slowest components in the picked cycles`:`Slowest components`,` `),D(13),N(e.slowest()),D(4),J(` `,e.range()?`Most often checked in the picked cycles`:`Most often checked`,` `),D(13),N(e.busiest()),D(9),N(e.latest()),D(2),P(`page`,e.page()),D(),P(`page`,e.page())}}function $A(e,t){e&1&&(F(0,`p`,10),K(1,`Use the app. Cycles show up here as Angular runs change detection.`),I())}var ej=3e3,tj=10,nj=class e{livePage=$(null,{alias:`page`});pageId=$(null);rpc=$(null);native=$(!1);angularPages=oD(()=>this.rpc());angularPage=X(()=>sD(this.angularPages(),this.pageId()));attachPending=X(()=>this.angularPage()?.capabilities.profiler===!0);showComponent=cv();range=T(null);imported=T(null);page=X(()=>this.imported()?.page??this.livePage());views=Q(()=>this.livePage()?.options??{flash:!1,track:!1,angularProfiling:!1,angularProfilingAvailable:!0});canShowViews=X(()=>!!this.pageId()&&this.livePage()?.supported!==!1);message=T(``);announcement=T(``);recording=X(()=>this.page()?.recording===!0);cycles=X(()=>this.page()?.cycles??[]);slowMs=X(()=>this.page()?.slowMs??16);maxCycles=X(()=>TT(this.rpc()).limits.cdCycles);picked=X(()=>JO(this.cycles(),this.range()));hasSpans=X(()=>this.picked().some(e=>e.spans?.length));spanNames=X(()=>this.page()?.spanNames??[]);stats=X(()=>this.range()?YO(this.picked()):[...this.page()?.components??[]].sort((e,t)=>t.ms-e.ms));scope=X(()=>{let e=this.range()?this.picked():[];return e.length?e.length===1?`cycle ${e[0].id}`:`cycles ${e[0].id} to ${e.at(-1).id}`:`the recording`});slowest=X(()=>this.stats().slice(0,tj));busiest=X(()=>[...this.stats()].sort((e,t)=>t.checks-e.checks).slice(0,tj));latest=X(()=>this.cycles().slice(-30).reverse());capNotes=X(()=>{let e=this.page()?.droppedClasses??0,t=this.page()?.droppedHosts??0,n=[];return e>0&&n.push(`${e} more component ${e===1?`class was`:`classes were`} checked than a recording keeps, so ${e===1?`it is`:`they are`} left out of these totals.`),t>0&&n.push(`${t} component ${t===1?`instance was`:`instances were`} checked past the 2000 a recording counts, so ${t===1?`its tree row shows`:`their tree rows show`} no check count.`),n});status=X(()=>{if(this.message())return this.message();let e=this.cycles().length;return this.imported()?`${e} ${e===1?`cycle`:`cycles`} imported.`:this.recording()?`Recording. ${e} ${e===1?`cycle`:`cycles`} so far.`:e?`${e} ${e===1?`cycle`:`cycles`} recorded.`:``});ms(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}clock(e){return VE(e)}causeText(e){return AO(e)}confirming=T(null);confirmTimer;constructor(){E(()=>{let e=this.confirming();e!==null&&this.livePage()?.recording===!0===e&&Z(()=>this.confirmed(e))}),x(Ss).onDestroy(()=>clearTimeout(this.confirmTimer))}confirmed(e){clearTimeout(this.confirmTimer),this.confirming.set(null),this.message.set(``);let t=this.livePage()?.cycles.length??0;this.announce(e?`Recording started.`:`Recording stopped. ${t} ${t===1?`cycle`:`cycles`} recorded.`)}unconfirmed(e){let t=`The page did not confirm that the recording ${e?`started`:`stopped`}. The tab may be in the background, closed or reloading.`;this.message.set(t),this.announce(t)}async toggle(){let e=!this.recording();clearTimeout(this.confirmTimer),this.confirming.set(null),await this.send({on:e},e?`Starting…`:`Stopping…`,()=>``,`request-change-detection-record`,{quiet:!0,keepPending:!0})&&(this.confirming.set(e),this.confirmTimer=setTimeout(()=>{this.confirming()===e&&this.unconfirmed(e)},ej))}showImport(e){this.message.set(``),this.range.set(null),this.imported.set(e);let t=e.page.cycles.length;this.announce(`Imported ${e.fileName}: ${t} ${t===1?`cycle`:`cycles`}. Showing the imported recording.`)}closeImport(){this.imported.set(null),this.range.set(null),this.announce(`Showing the live recording.`)}async clear(){this.range.set(null),await this.send({clear:!0},``,()=>`Cleared the recorded cycles.`)}async setView(e,t){let n=this.views();this.views.set({...n,[e]:t});let r={flash:t?`Flash checks on.`:`Flash checks off.`,track:t?`Performance track on. Record in the Chrome Performance panel to see it.`:`Performance track off.`,angularProfiling:`Angular profiling on. It stays on until the page reloads.`}[e];await this.send({[e]:t},``,()=>r,`request-change-detection-options`)||this.views.set(n)}async send(e,t,n,r=`request-change-detection-record`,{quiet:i=!1,keepPending:a=!1}={}){this.message.set(t);try{if(!this.rpc())throw Error(`no client`);return await oT(this.rpc(),r,{pageId:this.pageId(),...e}),a||this.message.set(``),i||this.announce(n()),!0}catch{let e=`Could not reach the page.`;return this.message.set(e),this.announce(e),!1}}announce(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-cd-recording`]],inputs:{livePage:[1,`page`,`livePage`],pageId:[1,`pageId`],rpc:[1,`rpc`],native:[1,`native`]},outputs:{showComponent:`showComponent`},decls:23,vars:13,consts:[[`aria-labelledby`,`cd-heading`,1,`cd`],[1,`cd-head`],[`id`,`cd-heading`],[3,`imported`,`page`,`maxCycles`],[1,`status`],[`role`,`status`,1,`sr-only`],[1,`imported`],[1,`hint`],[`what`,`cycles`,`limit`,`cdCycles`,3,`dropped`,`max`],[1,`note`],[1,`empty`],[`type`,`button`,3,`click`,`disabled`],[`aria-hidden`,`true`,1,`dot`],[`type`,`button`],[`type`,`button`,3,`click`],[1,`badge`],[1,`mono`],[`capability`,`profiler`,`missing`,``,`compact`,``,3,`page`],[`role`,`group`,`aria-labelledby`,`cd-views-label`,1,`views`],[`id`,`cd-views-label`,1,`views-label`],[`type`,`button`,1,`view`,3,`click`,`disabled`],[`capability`,`angularProfiling`,`missing`,``,`compact`,``,3,`page`],[3,`rangeChange`,`cycles`,`slowMs`,`range`],[3,`pick`,`cycles`,`names`,`scope`],[1,`spans-note`],[3,`pick`,`stats`,`scope`],[1,`cd-grid`],[`scope`,`col`],[`scope`,`col`,1,`num`],[`aria-label`,`Latest change detection cycles, newest first`,1,`cycles`],[3,`page`],[`type`,`button`,1,`name-link`,3,`click`],[1,`num`],[`colspan`,`4`],[1,`when`],[1,`trigger`],[1,`timing`],[1,`top`]],template:function(e,t){if(e&1&&(F(0,`section`,0)(1,`div`,1)(2,`h2`,2),K(3,`Change detection`),I(),A(4,DA,4,5),F(5,`app-cd-transfer`,3),H(`imported`,function(e){return t.showImport(e)}),I(),F(6,`p`,4),K(7),I(),F(8,`p`,5),K(9),I()(),A(10,OA,7,1,`p`,6),F(11,`p`,7),K(12,` Records each change detection cycle with Angular's profiler: how long it took, how many components it checked, what started it and which checks changed nothing. Tree rows show how often each instance was checked. Times come from a development build. While it records, the page also wraps Angular's scheduler, adds a signal write hook and watches DOM updates; all of it stops with the recording. `),A(13,kA,1,0)(14,AA,1,0),I(),A(15,NA,2,1),A(16,IA,16,7),L(17,`app-limit-note`,8),M(18,LA,2,1,`p`,9,eg),A(20,BA,9,10),A(21,QA,46,6)(22,$A,2,0,`p`,10),I()),e&2){let e;D(4),j(t.imported()?-1:4),D(),P(`page`,t.page())(`maxCycles`,t.maxCycles()),D(2),q(t.status()),D(2),q(t.announcement()),D(),j((e=t.imported())?10:-1,e),D(3),j(t.native()?13:14),D(2),j(t.page()?.supported===!1?15:-1),D(),j(!t.imported()&&!t.native()?16:-1),D(),P(`dropped`,t.page()?.dropped??0)(`max`,t.maxCycles()),D(),N(t.capNotes()),D(2),j(t.cycles().length?20:-1),D(),j(t.page()?.components?.length?21:t.recording()?22:-1)}},dependencies:[dD,XD,uA,Sk,pA,Rk,$k,wA],styles:[`[_nghost-%COMP%] {
-  display: block;
-  margin-top: 16px;
-}
-
-.cd[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  padding: 12px 14px;
-}
-
-.cd-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  font-size: 14px;
-  color: var(--%NS%text-strong);
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 12px 0 6px;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.views[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.views-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-button.view[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-}
-
-button.view[aria-pressed=true][_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-}
-
-.dot[_ngcontent-%COMP%] {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--%NS%text-3);
-}
-
-button.on[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.hint[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%], 
-.spans-note[_ngcontent-%COMP%], 
-.empty[_ngcontent-%COMP%] {
-  margin: 8px 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.cd-grid[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0 16px;
-}
-
-@media (min-width: 880px) {
-  .cd-grid[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  }
-}
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 4px 6px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 500;
-}
-
-td.mono[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.name-link[_ngcontent-%COMP%] {
-  height: auto;
-  min-height: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--%NS%text-strong);
-  font: inherit;
-  text-align: left;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.name-link[_ngcontent-%COMP%]:hover {
-  background: none;
-  text-decoration-thickness: 2px;
-}
-
-.name-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.cycles[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 12px;
-}
-
-.cycles[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-  padding: 4px 0;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-}
-
-.when[_ngcontent-%COMP%], 
-.trigger[_ngcontent-%COMP%], 
-.timing[_ngcontent-%COMP%], 
-.top[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.imported[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin: 8px 0;
-  color: var(--%NS%text-2);
-}
-
-.badge[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  padding: 2px 8px;
-  border: 1px solid;
-  border-radius: var(--%NS%radius-sm);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.trigger[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%], 
-.top[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}`]})};function rj(e){return Object.fromEntries(e.map(e=>[e.name,e.value??null]))}function ij(e){return e.map(e=>({name:e.name,listened:!!e.listened}))}function aj(e){let t={component:e.name,tag:e.tag,hostPath:e.path};e.selector&&(t.selector=e.selector),e.source&&(t.source=e.source),e.changeDetection&&(t.changeDetection=e.changeDetection),e.encapsulation&&(t.encapsulation=e.encapsulation),t.inputs=rj(e.inputs),t.outputs=ij(e.outputs),t.properties=rj(e.properties??[]),e.listeners.length&&(t.listeners=e.listeners),e.directives.length&&(t.directives=e.directives.map(e=>({name:e.name,inputs:rj(e.inputs),outputs:ij(e.outputs)}))),t.injected=e.dependencies.map(e=>({token:e.token,providedBy:e.providedBy?e.providedByName??`an injector`:null}));try{return JSON.stringify(t,null,2)}catch{return JSON.stringify({component:e.name,tag:e.tag,hostPath:e.path})}}function oj(e){return e.selector||e.path}var sj=1e3;function cj(e,t){let n=[];for(let[r,i]of t){let t=e.get(r);t!==void 0&&t!==i&&n.push(r)}return n}function lj(e){try{return JSON.stringify(e)??`undefined`}catch{return String(e)}}var uj=class{ms;changed=T(new Set);owner=null;last=new Map;timers=new Map;constructor(e=sj){this.ms=e}update(e,t){let n=new Map([...t].map(([e,t])=>[e,lj(t)]));if(e!==this.owner){this.clear(),this.owner=e,this.last=n;return}let r=cj(this.last,n);if(this.last=n,r.length){this.changed.update(e=>new Set([...e,...r]));for(let e of r)clearTimeout(this.timers.get(e)),this.timers.set(e,setTimeout(()=>{this.timers.delete(e),this.changed.update(t=>{let n=new Set(t);return n.delete(e),n})},this.ms))}}clear(){for(let e of this.timers.values())clearTimeout(e);this.timers.clear(),this.changed().size&&this.changed.set(new Set)}};function dj(e,t,n=0){return e===`directive`?`directive:${n}:${t}`:`${e}:${t}`}var fj=[`*`];function pj(e,t){e&1&&K(0),e&2&&q(W(2).label())}function mj(e,t){e&1&&Ag(0,0,null,pj,1,1)}function hj(e,t){if(e&1&&(F(0,`span`,4),K(1),I()),e&2){let e=W(2);D(),q(e.message())}}function gj(e,t){if(e&1){let e=B();F(0,`button`,2),H(`click`,function(){return S(e),C(W().open())}),hg(1,3),I(),A(2,hj,2,1,`span`,4)}if(e&2){let e=W(),t=Pg(1);P(`title`,`Open `+e.label()+` in your editor`),k(`aria-label`,`Open `+e.label()+` in your editor`),D(),P(`ngTemplateOutlet`,t),D(),j(e.message()?2:-1)}}function _j(e,t){if(e&1&&(F(0,`span`,1),hg(1,3),I()),e&2){let e=W(),t=Pg(1);P(`title`,e.label()),D(),P(`ngTemplateOutlet`,t)}}var vj=class e{source=T(T(null));client=X(()=>this.source()());available=X(()=>{let e=this.client();return!!e&&!cT(e)});use(e){this.source.set(e)}async open(e,t){if(!this.available())return{ok:!1,error:`No server is connected.`};try{let n=await oT(this.client(),`open-in-editor`,{file:e,...t?{line:t}:{}});return n?.ok?{ok:!0}:{ok:!1,error:n?.error??`The server did not open it.`}}catch{return{ok:!1,error:`The server did not open it.`}}}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})};function yj(e,t){return t?`${e}:${t}`:e}var bj=class e{editor=x(vj);file=$.required();line=$(void 0);label=X(()=>yj(this.file(),this.line()));message=T(``);async open(){this.message.set(``);let e=await this.editor.open(this.file(),this.line()??void 0);e.ok||this.message.set(`Not opened: ${e.error}`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-source-link`]],inputs:{file:[1,`file`],line:[1,`line`]},ngContentSelectors:fj,decls:4,vars:1,consts:[[`text`,``],[1,`source-text`,3,`title`],[`type`,`button`,1,`source-link`,3,`click`,`title`],[3,`ngTemplateOutlet`],[`role`,`alert`,1,`message`]],template:function(e,t){e&1&&(kg(),jh(0,mj,2,0,`ng-template`,null,0,tv),A(2,gj,3,4)(3,_j,2,2,`span`,1)),e&2&&(D(2),j(t.editor.available()?2:3))},dependencies:[Zv],styles:[`[_nghost-%COMP%] {
-  display: inline;
-  min-width: 0;
-}
-
-.source-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: 0;
-  border-radius: 2px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-  text-decoration: underline dotted;
-  text-underline-offset: 2px;
-  cursor: pointer;
-  overflow-wrap: anywhere;
-}
-
-.source-link[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%accent-text);
-  text-decoration-style: solid;
-}
-
-.source-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.message[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%danger-text);
-  font-family: var(--%NS%font-sans);
-  font-size: 0.92em;
-}`]})},xj=[`field`],Sj=[`editButton`],Cj=[`valueBox`];function wj(e,t){if(e&1){let e=B();R(0,`div`,5)(1,`label`,6),K(2),z(),R(3,`input`,7,0),U(`input`,function(t){return S(e),C(W().draft.set(t.target.value))})(`keydown.enter`,function(t){S(e);let n=W();return t.preventDefault(),C(n.apply())})(`keydown.escape`,function(t){S(e);let n=W();return t.preventDefault(),t.stopPropagation(),C(n.cancel())}),z(),R(5,`button`,8),U(`click`,function(){return S(e),C(W().apply())}),K(6,`Apply`),z(),R(7,`button`,9),U(`click`,function(){return S(e),C(W().cancel())}),K(8,`Cancel`),z()(),R(9,`p`,10),K(10),z()}if(e&2){let e=W();D(),V(`htmlFor`,e.fieldId),D(),J(`New value of `,e.prop().name,`, as JSON`),D(),V(`id`,e.fieldId)(`value`,e.draft())(`readOnly`,e.busy()),k(`aria-busy`,e.busy()?`true`:null)(`aria-invalid`,e.error()?`true`:null)(`aria-describedby`,e.hintId+(e.error()?` `+e.errorId:``)),D(2),V(`disabled`,e.busy()),D(4),V(`id`,e.hintId),D(),J(` JSON, such as "text", 42, true or `,e.objectSample,`. Enter applies, Escape cancels. `)}}function Tj(e,t){if(e&1&&(R(0,`pre`,null,1),K(2),Z_(3,`json`),z()),e&2){let e=W(2);k(`tabindex`,e.scrollable()?0:null)(`role`,e.scrollable()?`region`:null)(`aria-label`,e.scrollable()?`Value of `+e.prop().name:null),D(2),q(Q_(3,4,e.prop().value))}}function Ej(e,t){if(e&1){let e=B();R(0,`button`,14,2),U(`click`,function(){return S(e),C(W(2).start())}),K(2,` Edit `),z()}if(e&2){let e=W(2);V(`disabled`,e.busy()),k(`aria-label`,`Edit `+e.prop().name)}}function Dj(e,t){if(e&1&&(R(0,`p`,13),K(1),z()),e&2){let e=W(2);D(),q(e.prop().locked)}}function Oj(e,t){if(e&1&&(R(0,`div`,11),A(1,Tj,4,6,`pre`),A(2,Ej,3,2,`button`,12),z(),A(3,Dj,2,1,`p`,13)),e&2){let e=W();D(),j(e.bare()?-1:1),D(),j(e.editable()?2:-1),D(),j(e.writes()&&e.prop().locked?3:-1)}}function kj(e,t){if(e&1&&(R(0,`p`,3),K(1),z()),e&2){let e=W();V(`id`,e.errorId),D(),q(e.error())}}var Aj=0;function jj(e){let t=e.trim();if(!t)return{error:`Type a JSON value, such as "text", 42, true, null or [1, 2].`};try{return{value:JSON.parse(t)}}catch{return{error:`Not valid JSON. Put text in double quotes, such as "Paris".`}}}var Mj=class e{prop=$.required();componentId=$.required();pageId=$(null);rpc=$(null);writes=$(!1);bare=$(!1);readDraft=$(null);fieldId=`prop-edit-${++Aj}`;hintId=`${this.fieldId}-hint`;errorId=`${this.fieldId}-error`;objectSample=`{"a": 1}`;editing=T(!1);draft=T(``);busy=T(!1);error=T(``);done=T(``);editable=X(()=>this.writes()&&!!this.prop().edit&&!!this.pageId()&&!!this.rpc());field=hv(`field`);editButton=hv(`editButton`);valueBox=hv(`valueBox`);injector=x(bs);scrollable=T(!1);constructor(){Sv(()=>{this.prop();let e=this.valueBox()?.nativeElement;this.scrollable.set(!!e&&e.scrollHeight>e.clientHeight+1)})}async start(){let e=this.prop().value;this.error.set(``),this.done.set(``);let t=this.readDraft();if(t){this.busy.set(!0);let n=await t();if(this.busy.set(!1),n.error!==void 0){this.error.set(n.error);return}e=n.value}this.draft.set(e===void 0?``:JSON.stringify(e)),this.editing.set(!0),cd(()=>{let e=this.field()?.nativeElement;e?.focus(),e?.select()},{injector:this.injector})}cancel(){this.editing()&&(this.editing.set(!1),this.busy.set(!1),this.error.set(``),this.focusEdit())}async apply(){if(this.busy())return;let e=jj(this.draft());if(`error`in e){this.error.set(e.error);return}let t=this.prop(),n=this.rpc(),r=this.pageId();if(!n||!r||!t.edit)return;this.busy.set(!0),this.error.set(``);let i;try{i=await n.scope(`pangular`).rpc.call(`request-component-edit`,{pageId:r,request:{id:this.componentId(),path:t.prop,value:e.value,kind:t.edit}})??{}}catch{i={error:`The devtools server did not answer. Try again.`}}this.busy.set(!1),this.editing()&&(i.ok?(this.editing.set(!1),this.done.set(`Set ${t.name}.`),this.focusEdit()):(this.error.set(i.error??`The page did not write it.`),this.field()?.nativeElement.focus()))}focusEdit(){cd(()=>this.editButton()?.nativeElement.focus(),{injector:this.injector})}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-prop-value`]],viewQuery:function(e,t){e&1&&Mg(t.field,xj,5)(t.editButton,Sj,5)(t.valueBox,Cj,5),e&2&&Ng(3)},inputs:{prop:[1,`prop`],componentId:[1,`componentId`],pageId:[1,`pageId`],rpc:[1,`rpc`],writes:[1,`writes`],bare:[1,`bare`],readDraft:[1,`readDraft`]},decls:5,vars:3,consts:[[`field`,``],[`valueBox`,``],[`editButton`,``],[`role`,`alert`,1,`error`,3,`id`],[`role`,`status`,1,`sr-only`],[1,`editor`],[1,`sr-only`,3,`for`],[`type`,`text`,`autocomplete`,`off`,`spellcheck`,`false`,1,`field`,`mono`,3,`input`,`keydown.enter`,`keydown.escape`,`id`,`value`,`readOnly`],[`type`,`button`,1,`primary`,3,`click`,`disabled`],[`type`,`button`,3,`click`],[1,`hint`,3,`id`],[1,`view`],[`type`,`button`,1,`edit`,3,`disabled`],[1,`locked`],[`type`,`button`,1,`edit`,3,`click`,`disabled`]],template:function(e,t){e&1&&(A(0,wj,11,11)(1,Oj,4,3),A(2,kj,2,2,`p`,3),R(3,`p`,4),K(4),z()),e&2&&(j(+!t.editing()),D(2),j(t.error()?2:-1),D(2),q(t.done()))},dependencies:[$v],styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.view[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-pre[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-  max-height: 200px;
-  margin: 0;
-  overflow: auto;
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.editor[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-
-.field[_ngcontent-%COMP%] {
-  flex: 1 1 160px;
-  min-width: 0;
-  height: var(--%NS%control-h);
-  padding: 0 10px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.field[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-pre[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.6;
-}
-
-button.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-}
-
-button.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-button.edit[_ngcontent-%COMP%] {
-  height: 26px;
-  padding: 0 10px;
-  font-size: 12px;
-}
-
-.hint[_ngcontent-%COMP%], 
-.locked[_ngcontent-%COMP%], 
-.error[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.hint[_ngcontent-%COMP%], 
-.locked[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.error[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}`]})},Nj=1e3,Pj={depth:5,limit:100},Fj=`[redacted]`;function Ij(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function Lj(e){return Ij(e)&&typeof e.$more==`number`&&Object.keys(e).length===1}function Rj(e){return Ij(e)&&typeof e.$collapsed==`string`&&typeof e.size==`number`&&Object.keys(e).length===2}function zj(e){return e===`Array`?`array`:e===`Map`?`map`:e===`Set`?`set`:`object`}function Bj(e){return e.$type===`Map`&&Array.isArray(e.entries)}function Vj(e){return e.$type===`Set`&&Array.isArray(e.values)}function Hj(e){return Object.keys(e).filter(e=>e!==`$type`&&e!==`$more`)}function Uj(e){if(!e||typeof e!=`object`)return null;if(Rj(e))return e.size<=0?null:{kind:zj(e.$collapsed),type:e.$collapsed,size:e.size,collapsed:!0};if(Lj(e))return null;if(Array.isArray(e)){let t=e.at(-1),n=Lj(t)?t.$more:0,r=e.length-+!!n+n;return r?{kind:`array`,type:`Array`,size:r,collapsed:!1}:null}let t=e;if(Bj(t)||Vj(t)){let e=typeof t.size==`number`?t.size:0,n=Bj(t)?`map`:`set`;return e?{kind:n,type:n===`map`?`Map`:`Set`,size:e,collapsed:!1}:null}let n=typeof t.$more==`number`?t.$more:0,r=Hj(t).length+n,i=typeof t.$type==`string`?t.$type:`Object`;return r?{kind:`object`,type:i,size:r,collapsed:!1}:null}function Wj(e){if(typeof e==`string`)return JSON.stringify(e);let t=Uj(e);if(t)return qj(t);try{return JSON.stringify(e)??String(e)}catch{return String(e)}}function Gj(e){let t=Uj(e);if(!t||t.collapsed)return{children:[],more:0};if(Array.isArray(e)){let n=(Lj(e.at(-1))?e.slice(0,-1):e).map((e,t)=>({key:String(t),label:String(t),value:e}));return{children:n,more:t.size-n.length}}let n=e;if(t.kind===`map`){let e=n.entries.map((e,t)=>{let[n,r]=Array.isArray(e)?e:[void 0,e];return{key:String(t),label:Wj(n),value:r}});return{children:e,more:Math.max(0,t.size-e.length)}}if(t.kind===`set`){let e=n.values.map((e,t)=>({key:String(t),label:String(t),value:e}));return{children:e,more:Math.max(0,t.size-e.length)}}return{children:Hj(n).map(e=>({key:e,label:e,value:n[e]})),more:typeof n.$more==`number`?n.$more:0}}function Kj(e,t,n){return`${e} ${e===1?t:n}`}function qj(e){let t={array:Kj(e.size,`item`,`items`),object:Kj(e.size,`key`,`keys`),map:Kj(e.size,`entry`,`entries`),set:Kj(e.size,`value`,`values`)}[e.kind];return`${e.type} (${t})`}function Jj(e,t){return JSON.stringify(t===void 0?e:[t,...e])}function Yj(e,t){return e.map((e,n)=>n===0?e:(t?t[n-1]!==`object`:/^\d+$/.test(e))?`[${e}]`:`.${e}`).join(``)}function Xj(e){return e.every(e=>e&&e===e.trim()&&!/[.[\]]/.test(e))?e.join(`.`):null}var Zj=/^\[(Getter|Unreadable|Circular|Truncated|Function\b.*|Promise)\]$/;function Qj(e){return e===null||typeof e==`boolean`?!0:typeof e==`number`?Number.isFinite(e):typeof e==`string`&&e!==Fj&&!Zj.test(e)&&!e.endsWith(`…`)}function $j(e,t){return!e||t.kind===`map`||t.kind===`set`||e===`signal`&&t.kind===`object`&&t.type!==`Object`?null:e}function eM(e,t,n,r,i=500){let a=[],o=r.trim().toLowerCase();if(!o)return a;let s=new Set,c=(e,t)=>{let r=Jj(e);if(!(s.has(r)||a.length>=i)){s.add(r);for(let r of Gj(t).children){let t=[...e,r.key];if(r.label.toLowerCase().includes(o)&&a.push(t),!Uj(r.value))continue;let i=n(t)??(Uj(r.value)?.collapsed?void 0:r.value);i!==void 0&&c(t,i)}}};return c(e,n(e)??t),a}var tM=(e,t)=>t.id;function nM(e,t){if(e&1){let e=B();F(0,`button`,2),H(`click`,function(){S(e);let t=W().$implicit;return C(W(3).toggle(t))}),w(),F(1,`svg`,3),L(2,`path`,4),I(),fs(),F(3,`span`,14),K(4),I(),F(5,`span`,5),K(6),I()()}if(e&2){let e=W().$implicit;k(`aria-expanded`,e.open)(`aria-label`,e.label+`: `+e.text),D(4),J(``,e.label,`:`),D(2),q(e.text)}}function rM(e,t){if(e&1&&L(0,`app-prop-value`,15),e&2){let e=W(5);P(`prop`,t)(`componentId`,e.componentId())(`pageId`,e.pageId())(`rpc`,e.rpc())(`writes`,e.writes())}}function iM(e,t){if(e&1&&(F(0,`span`,16),K(1),I()),e&2){let e=W(2).$implicit;D(),q(e.text)}}function aM(e,t){if(e&1&&(F(0,`span`,14),K(1),I(),A(2,rM,1,5,`app-prop-value`,15)(3,iM,2,1,`span`,16)),e&2){let e,t=W().$implicit;D(),J(``,t.label,`:`),D(),j((e=t.edit)?2:3,e)}}function oM(e,t){if(e&1){let e=B();F(0,`button`,17),H(`click`,function(){S(e);let t=W().$implicit;return C(W(3).more(t))}),K(1),F(2,`span`,18),K(3),I()()}if(e&2){let e=W().$implicit,t=W(3);D(),J(` Show `,t.step(e),` more `),D(2),J(`(`,e.more,` not listed)`)}}function sM(e,t){e&1&&(F(0,`span`,12),K(1,`Reading from the page…`),I())}function cM(e,t){if(e&1&&(F(0,`span`,13),K(1),I()),e&2){let e=W().$implicit;D(),q(e.text)}}function lM(e,t){if(e&1&&(F(0,`li`,9),A(1,nM,7,4,`button`,10)(2,aM,4,2)(3,oM,4,2,`button`,11)(4,sM,2,0,`span`,12)(5,cM,2,1,`span`,13),I()),e&2){let e,n=t.$implicit;t_(`padding-left`,n.depth*14,`px`),D(),j((e=n.kind)===`node`?1:e===`leaf`?2:e===`more`?3:e===`loading`?4:e===`error`?5:-1)}}function uM(e,t){if(e&1&&(F(0,`ul`,7),M(1,lM,6,3,`li`,8,tM),I()),e&2){let e=W(2);P(`id`,e.listId),k(`aria-label`,e.prop().name+` entries`),D(),N(e.rows())}}function dM(e,t){if(e&1){let e=B();F(0,`div`,1)(1,`button`,2),H(`click`,function(){return S(e),C(W().toggleRoot())}),w(),F(2,`svg`,3),L(3,`path`,4),I(),fs(),F(4,`span`,5),K(5),I()(),L(6,`app-prop-value`,6),I(),A(7,uM,3,2,`ul`,7)}if(e&2){let e=t,n=W();D(),k(`aria-expanded`,n.rootOpen())(`aria-controls`,n.rootOpen()?n.listId:null)(`aria-label`,n.prop().name+`: `+n.summaryOf(e)),D(4),q(n.summaryOf(e)),D(),P(`bare`,!0)(`prop`,n.prop())(`componentId`,n.componentId())(`pageId`,n.pageId())(`rpc`,n.rpc())(`writes`,n.writes())(`readDraft`,n.readWhole),D(),j(n.rootOpen()?7:-1)}}function fM(e,t){if(e&1&&L(0,`app-prop-value`,0),e&2){let e=W();P(`prop`,e.prop())(`componentId`,e.componentId())(`pageId`,e.pageId())(`rpc`,e.rpc())(`writes`,e.writes())}}var pM=0;function mM(e){if(e===void 0)return`undefined`;try{return JSON.stringify(e)??String(e)}catch{return String(e)}}function hM(e){if(Array.isArray(e))return e.every(hM);if(e&&typeof e==`object`){let t=e;return![`$collapsed`,`$more`,`$type`].some(e=>Object.hasOwn(t,e))&&Object.values(t).every(hM)}return Qj(e)}var gM=class e{prop=$.required();store=$.required();componentId=$.required();pageId=$(null);rpc=$(null);writes=$(!1);directive=$(void 0);query=$(``);listId=`value-tree-${++pM}`;host=x(Ml);pendingMore=null;constructor(){Sv(()=>{let e=this.rows(),t=this.pendingMore;if(!t)return;let n=e.findIndex(e=>(e.kind===`leaf`||e.kind===`node`)&&!t.has(e.id));if(n<0)return;this.pendingMore=null;let r=document.activeElement;r&&r!==document.body&&r.isConnected||this.focusNear(n)})}rootPath=X(()=>[this.prop().prop]);rootValue=X(()=>this.store().level(this.rootPath(),this.directive())??this.prop().value);root=X(()=>Uj(this.rootValue()));needle=X(()=>this.query().trim().toLowerCase());matches=X(()=>{let e=this.needle(),t=this.prop();if(!e||[t.name,t.prop].some(t=>t.toLowerCase().includes(e)))return null;let n=this.store(),r=this.directive();return eM(this.rootPath(),this.rootValue(),e=>n.level(e,r),e)});rootOpen=X(()=>!!this.matches()?.length||this.store().isOpen(this.rootPath(),this.directive()));rows=X(()=>{let e=this.root();if(!e)return[];let t=this.store(),n=this.directive(),r=this.matches(),i=new Set,a=new Set;for(let e of r??[]){a.add(Jj(e));for(let t=2;t<=e.length;t++)i.add(Jj(e.slice(0,t)))}let o=this.prop(),s=this.writes()&&n===void 0,c=[],l=(e,o,d,f,p,m)=>{let{children:ee,more:h}=Gj(e);for(let e of ee){let ee=[...o,e.key],h=Jj(ee);if(r&&!m&&!i.has(h))continue;let g=Uj(e.value),te=Jj(ee,n);if(!g){let t=p&&Qj(e.value)?Xj(ee):null;c.push({id:te,kind:`leaf`,depth:f,path:ee,label:e.label,text:mM(e.value),edit:s&&t&&p?{name:Yj(ee,[...d]),prop:t,value:e.value,edit:p}:void 0});continue}let ne=!!r&&!m&&i.has(h)&&!a.has(h)||t.isOpen(ee,n);if(c.push({id:te,kind:`node`,depth:f,path:ee,label:e.label,text:qj(g),container:g,open:ne}),!ne)continue;let re=t.level(ee,n)??(g.collapsed?void 0:e.value),ie=[...d,g.kind];re===void 0?t.errors().has(te)?c.push({...u(ee,f+1,`error`),text:t.errors().get(te)}):c.push(u(ee,f+1,`loading`)):l(re,ee,ie,f+1,$j(p,g),m||a.has(h))}h>0&&(!r||m)&&c.push({...u(o,f,`more`),more:h,listed:ee.length})},u=(e,t,r)=>({id:`${Jj(e,n)}:${r}`,kind:r,depth:t,path:e,label:``,text:``});return l(this.rootValue(),this.rootPath(),[e.kind],0,s?$j(o.editInside??null,e):null,!r),c});readWhole=async()=>{let e=await this.store().read(this.rootPath(),Pj.depth,Pj.limit);return e.ok?hM(e.value)?{value:e.value}:{error:`Too large to edit as a whole. Open it to edit the values inside.`}:{error:e.error??`The page did not read it.`}};summaryOf(e){return qj(e)}toggleRoot(){this.pendingMore=null,this.store().toggle(this.rootPath(),this.directive(),!1)}toggle(e){this.pendingMore=null,this.store().toggle(e.path,this.directive(),!!e.container?.collapsed)}more(e){this.pendingMore=new Set(this.rows().map(e=>e.id)),this.store().more(e.path,this.directive(),e.listed??0)}focusNear(e){let t=this.host.nativeElement,n=Array.from(t.querySelectorAll(`#${this.listId} > li`)),r=e=>e?.querySelector(`button:not([disabled]), input, textarea, [tabindex="0"]`);(n.slice(e).map(r).find(Boolean)??n.slice(0,e).reverse().map(r).find(Boolean)??t.querySelector(`.root > .toggle`))?.focus()}step(e){return Math.min(100,e.more??0)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-value-tree`]],inputs:{prop:[1,`prop`],store:[1,`store`],componentId:[1,`componentId`],pageId:[1,`pageId`],rpc:[1,`rpc`],writes:[1,`writes`],directive:[1,`directive`],query:[1,`query`]},decls:2,vars:1,consts:[[3,`prop`,`componentId`,`pageId`,`rpc`,`writes`],[1,`root`],[`type`,`button`,1,`toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[1,`summary`,`mono`],[1,`whole`,3,`bare`,`prop`,`componentId`,`pageId`,`rpc`,`writes`,`readDraft`],[1,`entries`,3,`id`],[1,`entry`,3,`padding-left`],[1,`entry`],[`type`,`button`,1,`toggle`],[`type`,`button`,1,`more`],[`role`,`status`,1,`muted`],[`role`,`alert`,1,`error`],[1,`key`,`mono`],[1,`leaf-edit`,3,`prop`,`componentId`,`pageId`,`rpc`,`writes`],[1,`leaf`,`mono`],[`type`,`button`,1,`more`,3,`click`],[1,`muted`]],template:function(e,t){if(e&1&&A(0,dM,8,12)(1,fM,1,5,`app-prop-value`,0),e&2){let e;j((e=t.root())?0:1,e)}},dependencies:[Mj],styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.root[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.whole[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-}
-
-.entries[_ngcontent-%COMP%] {
-  margin: 4px 0 0;
-  padding: 0 0 0 6px;
-  border-left: 1px solid var(--%NS%border);
-  list-style: none;
-}
-
-.entry[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 6px;
-  min-width: 0;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.toggle[_ngcontent-%COMP%], 
-.more[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-height: 24px;
-  max-width: 100%;
-  padding: 0 6px 0 2px;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  text-align: left;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.toggle[_ngcontent-%COMP%]:hover, 
-.more[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.toggle[_ngcontent-%COMP%]:focus-visible, 
-.more[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.more[_ngcontent-%COMP%] {
-  padding-left: 6px;
-  color: var(--%NS%text);
-  text-decoration: underline;
-}
-
-.chevron[_ngcontent-%COMP%] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: transform 150ms var(--%NS%ease);
-}
-
-.toggle[aria-expanded=true][_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
-  transform: rotate(90deg);
-}
-
-.key[_ngcontent-%COMP%] {
-  flex: none;
-  max-width: 50%;
-  overflow-wrap: anywhere;
-  color: var(--%NS%text-2);
-}
-
-.summary[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.leaf[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.leaf-edit[_ngcontent-%COMP%] {
-  flex: 1 1 160px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.error[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chevron[_ngcontent-%COMP%], 
-   .toggle[_ngcontent-%COMP%], 
-   .more[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})};function _M(e,t){return e.length>t.length&&e.startsWith(`${t.slice(0,-1)},`)}var vM=class{sender;target={rpc:null,pageId:null,componentId:null};fetched=T(new Map);pushed=T({});open=T(new Set);loading=T(new Set);errors=T(new Map);limits=new Map;generation=0;constructor(e){this.sender=e}follow(e,t){let n=e.componentId===this.target.componentId&&e.pageId===this.target.pageId;this.target=e,n||(this.generation++,this.fetched.set(new Map),this.open.set(new Set),this.loading.set(new Set),this.errors.set(new Map),this.limits.clear()),this.pushed.set(t??{})}level(e,t){let n=Jj(e,t),r=this.pushed();return Object.hasOwn(r,n)?r[n]:this.fetched().get(n)}isOpen(e,t){return this.open().has(Jj(e,t))}toggle(e,t,n){let r=Jj(e,t),i=new Set(this.open());if(i.has(r)){for(let e of i)(e===r||_M(e,r))&&i.delete(e);this.open.set(i),this.send({path:e,directive:t,forget:!0});return}i.add(r),this.open.set(i),n&&this.load(e,t,this.limits.get(r)??30)}more(e,t,n){let r=Jj(e,t),i=Math.min(Nj,Math.max(n,this.limits.get(r)??0)+100);this.limits.set(r,i),this.load(e,t,i)}async read(e,t,n){return this.send({path:e,depth:t,limit:n})}async load(e,t,n){let r=Jj(e,t),i=this.generation;this.loading.update(e=>new Set(e).add(r));let a=await this.send({path:e,directive:t,limit:n,watch:!0});i===this.generation&&(this.loading.update(e=>{let t=new Set(e);return t.delete(r),t}),this.errors.update(e=>{let t=new Map(e);return a.ok?t.delete(r):t.set(r,a.error??`The page did not read it.`),t}),a.ok&&this.fetched.update(e=>new Map(e).set(r,a.value)))}async send(e){if(this.sender){if(e.forget)return{ok:!0};let{directive:t,watch:n,...r}=e;try{return await this.sender(r)}catch{return{error:`The devtools server did not answer. Try again.`}}}let{rpc:t,pageId:n,componentId:r}=this.target;if(!t||!n||!r)return{error:`No live page to read from.`};let{directive:i,...a}=e;try{return await t.scope(`pangular`).rpc.call(`request-component-value`,{pageId:n,request:{id:r,...a,...i===void 0?{}:{directive:i}}})??{}}catch{return{error:`The devtools server did not answer. Try again.`}}}};function yM(e,t){if(e&1&&(R(0,`span`,1),K(1),z()),e&2){let e=W(2);D(),J(`: `,e.label())}}function bM(e,t){if(e&1&&(R(0,`span`,1),K(1),z()),e&2){let e=W(3);D(),J(`: `,e.label())}}function xM(e,t){if(e&1){let e=B();R(0,`button`,4),U(`click`,function(){return S(e),C(W(2).store(`log`))}),K(1,` Log to console `),A(2,bM,2,1,`span`,1),z()}if(e&2){let e=W(2);V(`disabled`,e.busy()||!e.rpc()||!e.pageId()),D(2),j(e.label()?2:-1)}}function SM(e,t){if(e&1){let e=B();R(0,`button`,0),U(`click`,function(){return S(e),C(W().store())}),K(1,` Store as global `),A(2,yM,2,1,`span`,1),z(),A(3,xM,3,2,`button`,2),R(4,`span`,3),K(5),z()}if(e&2){let e=W();V(`disabled`,e.busy()||!e.rpc()||!e.pageId()),D(2),j(e.label()?2:-1),D(),j(e.canLog()?3:-1),D(2),q(e.message())}}var CM=class e{rpc=$(null);pageId=$(null);target=$.required();label=$(``);canLog=$(!1);staticReport=X(()=>cT(this.rpc()));busy=T(!1);message=T(``);async store(e=`store`){let t=this.rpc(),n=this.pageId();if(t&&n){this.busy.set(!0),this.message.set(``);try{let r=await t.scope(`pangular`).rpc.call(`request-console-global`,{pageId:n,target:this.target(),...e===`log`?{mode:e}:{}}),i=e===`log`?r?.ok?`Logged in the page console.`:`Not logged.`:r?.ok&&r.name?`Stored as ${r.name}.`:`Not stored.`;this.message.set(r?.message||i)}catch{this.message.set(`Could not reach the page.`)}finally{this.busy.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-store-global`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],target:[1,`target`],label:[1,`label`],canLog:[1,`canLog`]},decls:1,vars:1,consts:[[`type`,`button`,1,`store`,3,`click`,`disabled`],[1,`sr-only`],[`type`,`button`,1,`store`,`log`,3,`disabled`],[`role`,`status`,1,`status`],[`type`,`button`,1,`store`,`log`,3,`click`,`disabled`]],template:function(e,t){e&1&&A(0,SM,6,4),e&2&&j(t.staticReport()?-1:0)},styles:[`[_nghost-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-
-.store[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.store[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-}
-
-.store[_ngcontent-%COMP%]:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.store[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .store[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}
-.status[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.status[_ngcontent-%COMP%]:empty {
-  display: none;
-}`]})},wM=(e,t)=>t.block.id,TM=(e,t)=>t.kind,EM=(e,t)=>t.id;function DM(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,e.label,` `)}}function OM(e,t){if(e&1&&(K(0),R(1,`span`,18),K(2),z()),e&2){let e=W().$implicit;J(` `,e.kind,` `),D(2),J(``,e.seconds,`s`)}}function kM(e,t){if(e&1&&(R(0,`span`,9),A(1,DM,1,1)(2,OM,3,2),z()),e&2){let e=t.$implicit;n_(`note-`+e.kind),k(`title`,e.text),D(),j(e.seconds===void 0?1:2)}}function AM(e,t){if(e&1&&(R(0,`span`,9),K(1),z()),e&2){let e=W().$implicit;k(`title`,e.block.hydratedAt===void 0?`The block hydrated before the devtools attached to the page.`:null),D(),q(e.hydrated)}}function jM(e,t){e&1&&(R(0,`span`,9),K(1,`@error block`),z())}function MM(e,t){if(e&1&&(R(0,`span`,10),K(1),z()),e&2){let e=W().$implicit;D(),q(e.timings)}}function NM(e,t){e&1&&(R(0,`span`,11),K(1,`mismatch`),z())}function PM(e,t){if(e&1&&(R(0,`dt`),K(1,`Template of`),z(),R(2,`dd`,19),K(3),z()),e&2){let e=t;D(3),Y(``,e.name,` <`,e.tag,`>`)}}function FM(e,t){if(e&1&&(R(0,`dt`),K(1,`In this state since`),z(),R(2,`dd`),K(3),z()),e&2){let e=W(2).$implicit,t=W(2);D(3),q(t.clock(e.block.since))}}function IM(e,t){if(e&1&&(R(0,`dt`),K(1,`Hydrated`),z(),R(2,`dd`),K(3),z()),e&2){let e=W(2).$implicit,t=W(2);D(3),J(` `,e.block.hydratedAt===void 0?`Before the devtools attached`:t.clock(e.block.hydratedAt),` `)}}function LM(e,t){if(e&1&&(R(0,`span`,23),K(1),z()),e&2){let e=W().$implicit;D(),q(e.hydration)}}function RM(e,t){if(e&1&&(R(0,`li`)(1,`span`,22),K(2),z(),R(3,`span`,19),K(4),z(),A(5,LM,2,1,`span`,23),z()),e&2){let e=t.$implicit,n=W(5);D(2),q(n.clock(e.at)),D(2),q(e.state),D(),j(e.hydration===`not-configured`?-1:5)}}function zM(e,t){if(e&1&&(R(0,`h3`,20),K(1,`Transitions`),z(),R(2,`ol`,21),M(3,RM,6,3,`li`,null,$h),z()),e&2){let e=W(2).$implicit;D(3),N(e.block.transitions)}}function BM(e,t){if(e&1){let e=B();R(0,`li`)(1,`button`,25),U(`click`,function(){let t=S(e).$implicit;return C(W(5).showNode.emit(t.id))}),K(2),R(3,`span`,19),K(4),z()()()}if(e&2){let e=t.$implicit;D(2),J(` Show `,e.name,` `),D(2),J(`<`,e.tag,`>`)}}function VM(e,t){if(e&1&&(R(0,`h3`,20),K(1,`Hydration mismatches`),z(),R(2,`ul`,24),M(3,BM,5,2,`li`,null,EM),z()),e&2){let e=W(2).$implicit;D(3),N(e.mismatches)}}function HM(e,t){if(e&1&&(R(0,`div`,17)(1,`dl`)(2,`dt`),K(3,`Block`),z(),R(4,`dd`,19),K(5),z(),A(6,PM,4,2),A(7,FM,4,1),A(8,IM,4,1),R(9,`dt`),K(10,`Root elements`),z(),R(11,`dd`),K(12),z(),R(13,`dt`),K(14,`Triggers`),z(),R(15,`dd`,19),K(16),z()(),A(17,zM,5,0),A(18,VM,5,0),z()),e&2){let e,t=W().$implicit;V(`id`,`defer-detail-`+t.block.id),D(5),q(t.block.id),D(),j((e=t.block.owner)?6:-1,e),D(),j(t.block.since?7:-1),D(),j(t.block.hydration===`hydrated`?8:-1),D(4),q(t.block.rootIds.length||`None rendered`),D(4),q(t.block.triggers.join(`, `)||`None`),D(),j(t.block.transitions?.length?17:-1),D(),j(t.mismatches.length?18:-1)}}function UM(e,t){if(e&1){let e=B();R(0,`li`,4)(1,`button`,5),U(`click`,function(){let t=S(e).$implicit;return C(W(2).showOwner.emit(t.block))})(`focus`,function(){let t=S(e).$implicit;return C(W(2).highlight.emit(t.block))})(`blur`,function(){return S(e),C(W(2).highlight.emit(null))})(`mouseenter`,function(){let t=S(e).$implicit;return C(W(2).highlight.emit(t.block))})(`mouseleave`,function(){return S(e),C(W(2).highlight.emit(null))}),R(2,`span`,6),K(3),z(),R(4,`span`,7),K(5),z(),M(6,kM,3,4,`span`,8,TM),A(8,AM,2,2,`span`,9),A(9,jM,2,0,`span`,9),A(10,MM,2,1,`span`,10),A(11,NM,2,0,`span`,11),R(12,`span`,12),K(13),z()(),R(14,`button`,13),U(`click`,function(){let t=S(e).$implicit;return C(W(2).toggle(t.block.id))}),w(),R(15,`svg`,14),dg(16,`path`,15),z(),fs(),R(17,`span`,16),K(18),z()(),A(19,HM,19,9,`div`,17),z()}if(e&2){let e=t.$implicit,n=W(2);D(),k(`aria-disabled`,e.block.owner?null:`true`),D(2),q(e.block.owner?.name??`Unknown component`),D(),n_(`defer-state-`+e.block.state),D(),q(e.block.state),D(),N(e.notes),D(2),j(e.hydrated?8:-1),D(),j(e.block.hasErrorBlock?9:-1),D(),j(e.timings?10:-1),D(),j(e.mismatches.length?11:-1),D(2),q(e.block.triggers.join(`, `)||`no triggers`),D(),k(`aria-expanded`,n.isOpen(e.block.id))(`aria-controls`,n.isOpen(e.block.id)?`defer-detail-`+e.block.id:null),D(4),J(`Details of the block in `,e.block.owner?.name??`an unknown component`),D(),j(n.isOpen(e.block.id)?19:-1)}}function WM(e,t){if(e&1&&(R(0,`section`,0)(1,`h2`,1),K(2,` Defer blocks `),R(3,`span`,2),K(4),z()(),R(5,`ul`,3),M(6,UM,20,14,`li`,4,wM),z()()),e&2){let e=W();D(4),Y(``,e.rows().length,``,e.truncated()?`+`:``),D(2),N(e.rows())}}function GM(e){return e<1e3?`${e}ms`:`${Number((e/1e3).toFixed(2))}s`}function KM(e){let t=[],n=e.placeholder?.minimumTime;n!=null&&t.push(`placeholder min ${GM(n)}`);let r=[e.loading?.afterTime==null?``:`after ${GM(e.loading.afterTime)}`,e.loading?.minimumTime==null?``:`min ${GM(e.loading.minimumTime)}`].filter(Boolean);return r.length&&t.push(`loading ${r.join(`, `)}`),t.join(` · `)}var qM=class e{blocks=$([]);truncated=$(!1);clockOffset=$(0);showOwner=cv();mismatches=$([]);showNode=cv();open=T(new Set);highlight=cv();now=T(Date.now());waiting=X(()=>this.blocks().some(e=>!!e.since&&(e.state===`placeholder`||e.state===`initial`)));rows=X(()=>{let e=this.now()-this.clockOffset();return this.blocks().map(t=>({block:t,notes:Zw({...t,since:t.since||e},e),timings:KM(t),mismatches:this.mismatches().filter(e=>t.rootIds.includes(e.id)),hydrated:t.hydration===`hydrated`?Jw(t):``}))});isOpen(e){return this.open().has(e)}toggle(e){this.open.update(t=>{let n=new Set(t);return n.delete(e)||n.add(e),n})}clock(e){return VE(e)}constructor(){let e,t=()=>{clearInterval(e),e=void 0};E(()=>{if(!this.waiting())return t();e===void 0&&(this.now.set(Date.now()),e=setInterval(()=>this.now.set(Date.now()),1e3))}),x(Ss).onDestroy(t)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-defer-blocks`]],inputs:{blocks:[1,`blocks`],truncated:[1,`truncated`],clockOffset:[1,`clockOffset`],mismatches:[1,`mismatches`]},outputs:{showOwner:`showOwner`,showNode:`showNode`,highlight:`highlight`},decls:1,vars:1,consts:[[`aria-labelledby`,`ct-defer-title`,1,`defer`],[`id`,`ct-defer-title`,1,`defer-title`],[1,`pill`],[1,`defer-list`],[1,`defer-item`],[`type`,`button`,1,`defer-row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[1,`name`,`mono`],[1,`defer-state`],[1,`flag`,3,`class`],[1,`flag`],[1,`timings`],[1,`flag`,`note-failed`],[1,`triggers`,`mono`],[`type`,`button`,1,`defer-toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`m9 6 6 6-6 6`],[1,`sr-only`],[1,`defer-detail`,3,`id`],[`aria-hidden`,`true`],[1,`mono`],[1,`detail-label`],[1,`transitions`],[1,`when`],[1,`muted`],[1,`mismatch-links`],[`type`,`button`,3,`click`]],template:function(e,t){e&1&&A(0,WM,8,2,`section`,0),e&2&&j(t.rows().length?0:-1)},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.defer[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.defer-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 8px;
-}
-
-.pill[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-}
-
-.defer-list[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.defer-item[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--%NS%control-h);
-  gap: 6px;
-}
-
-.defer-toggle[_ngcontent-%COMP%] {
-  width: var(--%NS%control-h);
-  padding: 0;
-  background: var(--%NS%surface);
-}
-
-.defer-toggle[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  transition: transform 150ms var(--%NS%ease);
-}
-
-.defer-toggle[aria-expanded=true][_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  transform: rotate(90deg);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .defer-toggle[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}
-.defer-toggle[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.defer-detail[_ngcontent-%COMP%] {
-  grid-column: 1/-1;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  font-size: 12px;
-}
-
-.defer-detail[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 4px 12px;
-  margin: 0;
-}
-
-.defer-detail[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.defer-detail[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.detail-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 10px 0 4px;
-}
-
-.transitions[_ngcontent-%COMP%], 
-.mismatch-links[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.transitions[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.when[_ngcontent-%COMP%], 
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.mismatch-links[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.defer-row[_ngcontent-%COMP%] {
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  width: 100%;
-  height: auto;
-  min-height: var(--%NS%control-h);
-  padding: 6px 12px;
-  background: var(--%NS%surface);
-  border-color: var(--%NS%border);
-  text-align: left;
-}
-
-.defer-row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.defer-row[aria-disabled=true][_ngcontent-%COMP%] {
-  cursor: default;
-}
-
-.name[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.defer-state[_ngcontent-%COMP%] {
-  padding: 0 8px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.defer-state-complete[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.defer-state-error[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.defer-state-loading[_ngcontent-%COMP%], 
-.defer-state-placeholder[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.flag[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 5px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 10px;
-  line-height: 16px;
-}
-
-.note-failed[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.note-stuck[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.timings[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.triggers[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}`]})},JM=(e,t)=>t.id;function YM(e,t){if(e&1&&(F(0,`p`,4),K(1),I()),e&2){let e=W(2);D(),J(`The page has more @for blocks than the `,e.length,` listed.`)}}function XM(e,t){e&1&&(F(0,`span`,9),K(1,`@empty showing`),I())}function ZM(e,t){e&1&&(F(0,`span`,10),K(1,`@empty`),I())}function QM(e,t){e&1&&(F(0,`span`,10),K(1,`renders nothing`),I())}function $M(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,6),H(`click`,function(){let t=S(e).$implicit;return C(W(3).showOwner.emit(t))})(`focus`,function(){let t=S(e).$implicit,n=W(3);return C(n.highlight.emit(n.target(t)))})(`blur`,function(){return S(e),C(W(3).highlight.emit(null))})(`mouseenter`,function(){let t=S(e).$implicit,n=W(3);return C(n.highlight.emit(n.target(t)))})(`mouseleave`,function(){return S(e),C(W(3).highlight.emit(null))}),F(2,`span`,7),K(3),I(),F(4,`span`,8),K(5),I(),A(6,XM,2,0,`span`,9)(7,ZM,2,0,`span`,10)(8,QM,2,0,`span`,10),F(9,`span`,11),K(10),I()()()}if(e&2){let e=t.$implicit,n=W(3);D(),k(`aria-disabled`,e.owner?null:`true`),D(2),q(e.owner?.name??`Unknown component`),D(2),Y(` `,e.count,` `,e.count===1?`item`:`items`,` `),D(),j(e.showingEmpty?6:e.hasEmptyBlock?7:e.count===0?8:-1),D(4),q(n.trackLabel(e))}}function eN(e,t){if(e&1&&(F(0,`section`,1)(1,`h2`,2),K(2,` @for blocks `),F(3,`span`,3),K(4),I()(),A(5,YM,2,1,`p`,4),F(6,`ul`,5),M(7,$M,11,6,`li`,null,JM),I()()),e&2){let e=W(),t=W();D(4),q(t.truncated()?e.length+`+`:e.length),D(),j(t.truncated()?5:-1),D(2),N(e)}}function tN(e,t){e&1&&A(0,eN,9,2,`section`,1),e&2&&j(t.length?0:-1)}function nN(e,t){e&1&&L(0,`app-angular-unavailable`,0),e&2&&P(`page`,W().angular())}var rN={$index:`track $index`,item:`track item`,function:`track expression`},iN=class e{blocks=$(void 0);truncated=$(!1);supported=$(null);angular=$(null);showOwner=cv();highlight=cv();target(e){return e.rootIds[0]??e.owner?.id??null}trackLabel(e){return e.track?rN[e.track]:`track unknown`}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-for-blocks`]],inputs:{blocks:[1,`blocks`],truncated:[1,`truncated`],supported:[1,`supported`],angular:[1,`angular`]},outputs:{showOwner:`showOwner`,highlight:`highlight`},decls:2,vars:1,consts:[[`capability`,`forBlocks`,`missing`,``,`compact`,``,1,`for`,3,`page`],[`aria-labelledby`,`ct-for-title`,1,`for`],[`id`,`ct-for-title`,1,`for-title`],[1,`pill`],[1,`note`],[1,`for-list`],[`type`,`button`,1,`for-row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[1,`name`,`mono`],[1,`count`],[1,`flag`,`empty`],[1,`flag`],[1,`track`,`mono`]],template:function(e,t){if(e&1&&A(0,tN,1,1)(1,nN,1,1,`app-angular-unavailable`,0),e&2){let e;j((e=t.blocks())?0:t.supported()===!1?1:-1,e)}},dependencies:[dD],styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.for[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.for-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 8px;
-}
-
-.pill[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.for-list[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.for-row[_ngcontent-%COMP%] {
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  width: 100%;
-  height: auto;
-  min-height: var(--%NS%control-h);
-  padding: 6px 12px;
-  background: var(--%NS%surface);
-  border-color: var(--%NS%border);
-  text-align: left;
-}
-
-.for-row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.for-row[aria-disabled=true][_ngcontent-%COMP%] {
-  cursor: default;
-}
-
-.name[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.count[_ngcontent-%COMP%] {
-  padding: 0 8px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.flag[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 5px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 10px;
-}
-
-.flag.empty[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.track[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}`]})},aN=(e,t)=>t.id;function oN(e,t){if(e&1&&(F(0,`p`,11),K(1),I(),F(2,`h3`,7),K(3,`Still retained`),I(),F(4,`p`,6),K(5,` In a development build, Angular's DI debug data keeps every destroyed component in memory, so Pangular can't tell a leak from that. Check retainers in the Chrome DevTools Memory panel: take a heap snapshot after a few navigations, search for the class and look for a retainer other than Angular's DI debug records. Open subscriptions after destroy are still tracked below. `),I()),e&2){let e=W(),t=W();D(),q(t.plural(e.navigations,`navigation`))}}function sN(e,t){e&1&&(F(0,`p`,6),K(1,` This page cannot track destroyed components. It needs WeakRef, FinalizationRegistry and the Angular debug API of a development build. `),I())}function cN(e,t){if(e&1&&(F(0,`span`,18),K(1),I()),e&2){let e=W().$implicit,t=W(4);D(),q(t.plural(e.subscriptions,`open subscription`))}}function lN(e,t){if(e&1&&(F(0,`li`,13)(1,`span`,14),K(2),I(),F(3,`span`,15),K(4),I(),F(5,`span`,16),K(6),I(),F(7,`span`,17),K(8),I(),A(9,cN,2,1,`span`,18),I()),e&2){let e=t.$implicit,n=W(4);D(2),q(e.name),D(2),q(e.route||`/`),D(2),J(``,n.plural(e.navigations,`navigation`),` ago`),D(2),q(n.ageOf(e)),D(),j(e.subscriptions?9:-1)}}function uN(e,t){if(e&1&&(F(0,`p`,6),K(1),I(),F(2,`ul`,12),M(3,lN,10,5,`li`,13,aN),I()),e&2){let e=W(3);D(),Y(` Destroyed, yet still in memory after at least `,e.minNavigations,` navigations and `,e.minSeconds,` seconds. Take a heap snapshot, search for the class and read its retainers. `),D(2),N(e.retained().slice(0,e.shown))}}function dN(e,t){e&1&&(F(0,`p`,6),K(1,`No destroyed component is still in memory after a few navigations.`),I())}function fN(e,t){if(e&1&&(F(0,`p`,6),K(1),F(2,`span`,19),K(3),I(),K(4,`. Navigate a few times to see whether they stay. `),I()),e&2){let e=W(3);D(),J(` `,e.plural(e.recent().length,`instance`),` destroyed recently and not collected yet: `),D(2),q(e.names(e.recent()))}}function pN(e,t){if(e&1&&(A(0,sN,2,0,`p`,6),F(1,`p`,11),K(2),I(),F(3,`h3`,7),K(4,` Still retained `),F(5,`span`,8),K(6),I()(),A(7,uN,5,2)(8,dN,2,0,`p`,6),A(9,fN,5,2,`p`,6)),e&2){let e=W(),t=W();j(e.support.retention?-1:0),D(2),D_(` `,t.plural(e.navigations,`navigation`),` · `,t.retained().length,` still retained · `,t.plural(e.totals.collected,`instance`),` collected `),D(4),q(t.retained().length),D(),j(t.retained().length?7:8),D(2),j(t.recent().length?9:-1)}}function mN(e,t){if(e&1&&(F(0,`p`,6),K(1,` Off the page but not destroyed (detached views, such as a route reuse cache): `),F(2,`span`,19),K(3),I(),K(4,`. `),I()),e&2){let e=W(2);D(3),q(e.names(e.detached()))}}function hN(e,t){if(e&1&&(F(0,`span`,8),K(1),I()),e&2){let e=W();D(),q(e.subscriptions.length)}}function gN(e,t){if(e&1&&(F(0,`span`,15),K(1),I()),e&2){let e=W().$implicit;D(),q(e.source)}}function _N(e,t){if(e&1&&(F(0,`li`,13)(1,`span`,14),K(2),I(),F(3,`span`,16),K(4),I(),F(5,`span`,18),K(6),I(),A(7,gN,2,1,`span`,15),I()),e&2){let e=t.$implicit;D(2),q(e.name),D(2),J(``,e.count,` open`),D(2),J(` `,e.reason===`instance-destroyed`?`instance destroyed`:`no instance left`,` `),D(),j(e.source?7:-1)}}function vN(e,t){if(e&1&&(F(0,`p`,6),K(1,` Still open although the component that made them is gone. Tear them down with takeUntilDestroyed(), DestroyRef.onDestroy or the async pipe. `),I(),F(2,`ul`,12),M(3,_N,8,4,`li`,13,$h),I()),e&2){let e=W(2),t=W();D(3),N(e.subscriptions.slice(0,t.shown))}}function yN(e,t){e&1&&(F(0,`p`,6),K(1,`No subscription is still open after its component went away.`),I())}function bN(e,t){e&1&&(F(0,`p`,6),K(1,` Subscriptions are tied to component classes only; Angular 20 profiler hooks tie them to instances. `),I())}function xN(e,t){if(e&1&&(A(0,vN,5,0)(1,yN,2,0,`p`,6),A(2,bN,2,0,`p`,6)),e&2){let e=W();j(+!e.subscriptions.length),D(2),j(e.support.instances?-1:2)}}function SN(e,t){e&1&&(F(0,`p`,9),K(1,` Tracking could not start: the page has no RxJS the overlay can load. `),I())}function CN(e,t){e&1&&(F(0,`p`,6),K(1,` Off. Track subscriptions wraps Observable.prototype.subscribe on the page to record which component makes each subscription, until you stop it. Subscriptions made before you start are not seen, so reload or navigate again after starting. `),I())}function wN(e,t){e&1&&L(0,`app-angular-unavailable`,10),e&2&&P(`page`,W(2).angular())}function TN(e,t){if(e&1&&(F(0,`span`,16),K(1),I()),e&2){let e=W().$implicit,t=W(3);D(),q(t.plural(e.subscriptions,`subscription`))}}function EN(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,20),H(`click`,function(){let t=S(e).$implicit;return C(W(3).showComponent.emit(t.id))})(`focus`,function(){let t=S(e).$implicit;return C(W(3).highlight.emit(t.id))})(`blur`,function(){return S(e),C(W(3).highlight.emit(null))})(`mouseenter`,function(){let t=S(e).$implicit;return C(W(3).highlight.emit(t.id))})(`mouseleave`,function(){return S(e),C(W(3).highlight.emit(null))}),F(2,`span`,14),K(3),I(),F(4,`span`,16),K(5),I(),A(6,TN,2,1,`span`,16),I()()}if(e&2){let e=t.$implicit,n=W(2),r=W();D(3),q(e.name),D(2),q(r.effectsText(e)),D(),j(n.support.subscriptions===`on`?6:-1)}}function DN(e,t){e&1&&(F(0,`p`,6),K(1,` Angular files a component's effects under the template its host sits in, so effects of components side by side in one template show as shared. `),I())}function ON(e,t){if(e&1&&(F(0,`ul`,12),M(1,EN,7,3,`li`,null,aN),I(),A(3,DN,2,0,`p`,6)),e&2){let e=W(),t=W();D(),N(e.components.slice(0,t.shown)),D(2),j(e.components.some(t.hasShared)?3:-1)}}function kN(e,t){e&1&&(F(0,`p`,6),K(1,`No component on the page has a live effect or a tracked subscription.`),I())}function AN(e,t){if(e&1&&(A(0,oN,6,1)(1,pN,10,7),A(2,mN,5,1,`p`,6),F(3,`h3`,7),K(4,` Open subscriptions after destroy `),A(5,hN,2,1,`span`,8),I(),A(6,xN,3,2)(7,SN,2,0,`p`,9)(8,CN,2,0,`p`,6),F(9,`h3`,7),K(10,` Live effects and subscriptions `),F(11,`span`,8),K(12),I()(),A(13,wN,1,1,`app-angular-unavailable`,10),A(14,ON,4,1)(15,kN,2,0,`p`,6)),e&2){let e,n=t,r=W();j(n.support.retention===`dev-di-debug`?0:1),D(2),j(r.detached().length?2:-1),D(3),j(n.support.subscriptions===`on`?5:-1),D(),j((e=n.support.subscriptions)===`on`?6:e===`unavailable`?7:8),D(6),q(n.components.length),D(),j(n.support.effects?-1:13),D(),j(n.components.length?14:15)}}function jN(e,t){e&1&&(F(0,`p`,6),K(1,`No leak data from this page yet. It comes with the next report.`),I())}var MN=20;function NN(e){let t=Math.max(0,Math.round(e/1e3));if(t<120)return`${t} s`;let n=Math.round(t/60);return n<120?`${n} min`:`${Math.round(n/60)} h`}var PN=(e,t,n=`${t}s`)=>`${e} ${e===1?t:n}`,FN=class e{report=$(null);pageId=$(null);rpc=$(null);angular=$(null);now=$(()=>Date.now());showComponent=cv();highlight=cv();shown=MN;minNavigations=2;minSeconds=tw/1e3;plural=PN;busy=T(!1);announcement=T(``);tracking=X(()=>this.report()?.support.subscriptions===`on`);split=X(()=>{let e=this.report(),t=[],n=[],r=[];if(!e)return{retained:t,recent:n,detached:r};let i=e.support.retention===`dev-di-debug`;for(let a of e.destroyed)if(a.detached)r.push(a);else if(i)continue;else this.isRetained(e,a)?t.push(a):n.push(a);return{retained:t,recent:n,detached:r}});retained=X(()=>this.split().retained);recent=X(()=>this.split().recent);detached=X(()=>this.split().detached);ageMs(e,t){return Math.max(0,this.now()()-e.reportedAt+(e.at-t.destroyedAt))}isRetained(e,t){return t.navigations>=2&&this.ageMs(e,t)>=1e4}ageOf(e){let t=this.report();return t?`${NN(this.ageMs(t,e))} old`:``}names(e){let t=[...new Set(e.map(e=>e.name))];return t.length>6?`${t.slice(0,6).join(`, `)} and more`:t.join(`, `)}hasShared(e){return!!e.sharedEffects}effectsText(e){let t=PN(e.effects,`effect`);return e.sharedEffects?`${t}, ${e.sharedEffects} shared`:t}async toggle(){let e=this.pageId();if(!e||this.busy())return;let t=!this.tracking();this.busy.set(!0);try{await oT(this.rpc(),`request-leak-tracking`,{pageId:e,on:t}),this.announcement.set(t?`Tracking subscriptions. Reload or navigate to see subscriptions made at start.`:`Stopped tracking subscriptions.`)}catch{this.announcement.set(`Could not reach the page. Try again.`)}finally{this.busy.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-leaks-section`]],inputs:{report:[1,`report`],pageId:[1,`pageId`],rpc:[1,`rpc`],angular:[1,`angular`],now:[1,`now`]},outputs:{showComponent:`showComponent`,highlight:`highlight`},decls:12,vars:5,consts:[[`aria-labelledby`,`ct-leaks-title`,1,`leaks`],[1,`head`],[`id`,`ct-leaks-title`],[`type`,`button`,1,`track`,3,`click`,`disabled`],[`role`,`status`,1,`sr-only`],[1,`hint`],[1,`note`],[1,`sub`],[1,`pill`],[`role`,`status`,1,`note`],[`capability`,`signalGraph`,`missing`,``,`compact`,``,3,`page`],[1,`stats`],[1,`rows`],[1,`row`],[1,`name`,`mono`],[1,`meta`,`mono`],[1,`count`],[1,`meta`],[1,`flag`,`warn`],[1,`mono`],[`type`,`button`,1,`row`,`live`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`]],template:function(e,t){if(e&1&&(F(0,`section`,0)(1,`div`,1)(2,`h2`,2),K(3,`Leaks`),I(),F(4,`button`,3),H(`click`,function(){return t.toggle()}),K(5,` Track subscriptions `),I(),F(6,`p`,4),K(7),I()(),F(8,`p`,5),K(9,` Components that left the page but are still in memory, and the live effects and RxJS subscriptions of each component. The browser collects garbage when it decides, so a retained instance is a hint: check what holds it in the Chrome DevTools Memory panel. `),I(),A(10,AN,16,7)(11,jN,2,0,`p`,6),I()),e&2){let e;D(4),P(`disabled`,!t.pageId()||!t.report()),k(`aria-pressed`,t.tracking())(`aria-disabled`,t.busy()||null),D(3),q(t.announcement()),D(3),j((e=t.report())?10:11,e)}},dependencies:[dD],styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.leaks[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0;
-}
-
-.track[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-}
-
-.track[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.track[aria-disabled=true][_ngcontent-%COMP%] {
-  cursor: progress;
-}
-
-.track[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.hint[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%], 
-.stats[_ngcontent-%COMP%] {
-  margin: 8px 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.stats[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.sub[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 14px 0 6px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.pill[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.rows[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  min-height: var(--%NS%control-h);
-  padding: 6px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  font-size: 12px;
-}
-
-.row.live[_ngcontent-%COMP%] {
-  justify-content: flex-start;
-  width: 100%;
-  height: auto;
-  text-align: left;
-}
-
-.row.live[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.name[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.meta[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-2);
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.count[_ngcontent-%COMP%] {
-  padding: 0 8px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.flag[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 5px;
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.flag.warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}`]})},IN=12,LN=900;function RN(e){for(let t=e.parentElement;t;t=t.parentElement){let e=getComputedStyle(t);if(/(auto|scroll|overlay)/.test(e.overflowY))return t}return null}var zN=class{options;injector=x(bs);visibleTop=T(0);viewport=T(LN);rowHeight;host=null;scroller=null;detach=null;enabled;range;padTop;padBottom;constructor(e){this.options=e,this.rowHeight=T(e.estimate);let t=e.min??300;this.enabled=X(()=>e.count()>t),this.range=X(()=>{let t=e.count();if(!this.enabled())return{start:0,end:t};let n=this.rowHeight(),r=this.viewport(),i=Math.max(0,Math.min(this.visibleTop(),t*n-r)),a=Math.max(0,Math.min(t-1,Math.floor(i/n)-IN));return{start:a,end:Math.min(t,Math.max(a,Math.ceil((i+r)/n)+IN))}}),this.padTop=X(()=>this.enabled()?this.range().start*this.rowHeight():0),this.padBottom=X(()=>this.enabled()?(e.count()-this.range().end)*this.rowHeight():0),E(()=>{e.count(),cd(()=>this.update(),{injector:this.injector})}),x(Ss).onDestroy(()=>this.detach?.())}get count(){return this.options.count()}rendered(e){let{start:t,end:n}=this.range();return e>=t&&e<n}attach(e){if(this.host===e)return;this.detach?.(),this.host=e,e.style.overflowAnchor=`none`,e.style.transitionProperty=`none`;let t=/(auto|scroll|overlay)/.test(getComputedStyle(e).overflowY);this.scroller=t?e:RN(e);let n=this.scroller??window,r=()=>this.update();n.addEventListener(`scroll`,r,{passive:!0}),window.addEventListener(`resize`,r),this.detach=()=>{n.removeEventListener(`scroll`,r),window.removeEventListener(`resize`,r)},this.update()}update(){let e=this.host;if(e){if(this.scroller===e)this.place(e.scrollTop,e.clientHeight);else{let t=this.scroller?this.scroller.getBoundingClientRect().top:0,n=this.scroller?this.scroller.clientHeight:window.innerHeight;this.place(t-e.getBoundingClientRect().top,n)}this.options.fixed||this.measure()}}place(e,t){this.visibleTop.set(e),this.viewport.set(t>0?t:LN)}measure(){let e=this.host?.querySelectorAll(`[data-vindex]`);if(!e||e.length<2)return;let t=e[0].getBoundingClientRect(),n=(e[e.length-1].getBoundingClientRect().bottom-t.top)/e.length;n>4&&Math.abs(n-this.rowHeight())>1&&this.rowHeight.set(n)}reveal(e,t){if(this.enabled()&&!this.rendered(e)){let t=e*this.rowHeight(),n=this.viewport(),r=Math.max(0,t-n/2);if(this.place(r,n),this.host&&this.scroller===this.host)this.host.scrollTop=r;else if(this.host){let e=this.scroller?this.scroller.getBoundingClientRect().top:0,t=this.host.getBoundingClientRect().top-e+r;this.scroller?this.scroller.scrollTop+=t:window.scrollBy(0,t)}}t&&cd(t,{injector:this.injector})}};function BN(e){let t=e.ownerDocument.defaultView;if(!t)return null;for(let n=e.parentElement;n&&n!==e.ownerDocument.documentElement&&n!==e.ownerDocument.body;n=n.parentElement)if(/(auto|scroll|overlay)/.test(t.getComputedStyle(n).overflowY))return n;return null}var VN=e=>{let t=parseFloat(e);return Number.isFinite(t)?t:0};function HN(e,t=8){let n=e.ownerDocument.defaultView;if(!n)return e.offsetHeight+t;let r=BN(e),i=r?n.getComputedStyle(r):null,a=i?VN(i.paddingTop):0,o=i?VN(i.scrollPaddingTop):0,s=VN(n.getComputedStyle(e).top);return Math.max(0,Math.ceil(a+s+e.offsetHeight+t-o))}function UN(e,t,n=8){let r=BN(e),i=t.getBoundingClientRect().bottom+n-e.getBoundingClientRect().top;i<=0||(r?r.scrollTop-=i:e.ownerDocument.defaultView?.scrollBy(0,-i))}var WN=[`input`];function GN(e,t){if(e&1){let e=B();R(0,`button`,9),U(`click`,function(){return S(e),C(W().save())}),w(),R(1,`svg`,10),dg(2,`path`,11),z(),fs(),R(3,`span`,12),K(4,`Save`),z()()}e&2&&k(`aria-label`,`Save filter `+W().query())}function KN(e,t){if(e&1){let e=B();R(0,`li`,14)(1,`button`,15),U(`click`,function(){let t=S(e).$implicit;return C(W(2).apply(t))}),K(2),z(),R(3,`button`,16),U(`click`,function(){let t=S(e).$implicit;return C(W(2).remove(t))}),w(),R(4,`svg`,10),dg(5,`path`,17),z()()()}if(e&2){let e=t.$implicit,n=W(2);G(`active`,e===n.query()),D(),k(`aria-pressed`,e===n.query())(`title`,e),D(),J(` `,e,` `),D(),k(`aria-label`,`Remove saved filter `+e)}}function qN(e,t){if(e&1&&(R(0,`ul`,7),M(1,KN,6,6,`li`,13,eg),z()),e&2){let e=W();D(),N(e.saved())}}function JN(e,t){if(e&1&&(R(0,`span`,8),K(1),z()),e&2){let e=W();D(),q(e.announcement())}}var YN=`pangular-pref:filters`,XN=200;function ZN(e){try{let t=localStorage.getItem(`${YN}:${e}`),n=t?JSON.parse(t):[];if(!Array.isArray(n))return[];let r=n.filter(e=>typeof e==`string`&&!!e.trim()&&e.length<=XN);return[...new Set(r)].slice(-8)}catch{return[]}}function QN(e,t){try{t.length?localStorage.setItem(`${YN}:${e}`,JSON.stringify(t)):localStorage.removeItem(`${YN}:${e}`)}catch{}}var $N=class e{value=pv(``);label=$(`Filter`);placeholder=$(`Filter`);inputId=$(null);describedBy=$(null);saveKey=$(null);input=hv.required(`input`);host=x(Ml);injector=x(bs);announcement=T(``);query=X(()=>this.value().trim());saved=Q(()=>{let e=this.saveKey();return e?ZN(e):[]});canSave=X(()=>{let e=this.query();return!!this.saveKey()&&!!e&&e.length<=XN&&!this.saved().includes(e)&&this.saved().length<8});focus(){this.input().nativeElement.focus()}clear(e){this.value()&&(e.preventDefault(),e.stopPropagation(),this.value.set(``))}save(){let e=this.saveKey(),t=this.query();if(!e||!this.canSave())return;let n=[...this.saved(),t];this.saved.set(n),QN(e,n),this.say(`Filter ${t} saved.`),this.focusAfterRender(`.chip:last-child .apply`)}apply(e){this.value.set(this.query()===e?``:e)}remove(e){let t=this.saveKey();if(!t)return;let n=this.saved().indexOf(e),r=this.saved().filter(t=>t!==e);if(this.saved.set(r),QN(t,r),this.say(`Saved filter ${e} removed.`),!r.length){this.focus();return}let i=Math.min(n,r.length-1)+1;this.focusAfterRender(`.chip:nth-child(${i}) .apply`)}focusAfterRender(e){cd(()=>{let t=this.host.nativeElement.querySelector(e);t?t.focus():this.focus()},{injector:this.injector})}say(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-search-field`]],viewQuery:function(e,t){e&1&&Mg(t.input,WN,5),e&2&&Ng()},inputs:{value:[1,`value`],label:[1,`label`],placeholder:[1,`placeholder`],inputId:[1,`inputId`],describedBy:[1,`describedBy`],saveKey:[1,`saveKey`]},outputs:{value:`valueChange`},decls:9,vars:8,consts:[[`input`,``],[1,`box`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`placeholder`,`value`],[`type`,`button`,1,`save`],[`aria-label`,`Saved filters`,1,`chips`],[`role`,`status`,1,`sr-only`],[`type`,`button`,1,`save`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M6 4h12v16l-6-4-6 4z`],[1,`save-text`],[1,`chip`,3,`active`],[1,`chip`],[`type`,`button`,1,`apply`,3,`click`],[`type`,`button`,1,`remove`,3,`click`],[`d`,`M7 7l10 10M17 7 7 17`]],template:function(e,t){e&1&&(R(0,`div`,1),w(),R(1,`svg`,2),dg(2,`circle`,3)(3,`path`,4),z(),fs(),R(4,`input`,5,0),U(`input`,function(e){return t.value.set(e.target.value)})(`keydown.escape`,function(e){return t.clear(e)}),z()(),A(6,GN,5,1,`button`,6),A(7,qN,3,0,`ul`,7),A(8,JN,2,1,`span`,8)),e&2&&(D(4),V(`placeholder`,t.placeholder())(`value`,t.value()),k(`id`,t.inputId())(`aria-label`,t.label())(`aria-describedby`,t.describedBy()),D(2),j(t.canSave()?6:-1),D(),j(t.saveKey()&&t.saved().length?7:-1),D(),j(t.saveKey()?8:-1))},styles:[`[_nghost-%COMP%] {
-  display: flex;
-  flex: 1 1 220px;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.box[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-input[_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-}
-
-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.save[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 6px;
-  height: var(--%NS%control-h);
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background 150ms var(--%NS%ease);
-}
-
-.save[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.save[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%], 
-.remove[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  height: 26px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 999px;
-  background: var(--%NS%surface);
-  overflow: hidden;
-}
-
-.chip.active[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.chip[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  height: 100%;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-}
-
-.apply[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 22ch;
-  padding: 0 4px 0 10px;
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.chip.active[_ngcontent-%COMP%]   .apply[_ngcontent-%COMP%] {
-  color: var(--%NS%accent-text);
-}
-
-.remove[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  padding: 0;
-  color: var(--%NS%text-2);
-}
-
-.remove[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text-strong);
-}
-
-.save[_ngcontent-%COMP%]:focus-visible, 
-.chip[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-@media (max-width: 420px) {
-  .save-text[_ngcontent-%COMP%] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .save[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},eP=[`[redacted]`,`[email]`],tP=2e4;function nP(e){let t=0;for(let n of eP)for(let r=e.indexOf(n);r>=0;r=e.indexOf(n,r+n.length))t++;return t}function rP(e,t=tP){let n=0,r=t,i=new Set,a=[e];for(;a.length;){let e=a.pop();if(typeof e==`string`){if(--r<0)return{count:n,capped:!0};n+=nP(e);continue}if(typeof e==`object`&&e&&!i.has(e)){if(i.add(e),Array.isArray(e)){for(let t of e)a.push(t);continue}for(let[t,i]of Object.entries(e)){if(--r<0)return{count:n,capped:!0};n+=nP(t),a.push(i)}}}return{count:n,capped:!1}}function iP(e,t){if(e&1&&(R(0,`p`,0),K(1),R(2,`span`,1),K(3),z()()),e&2){let e=W();D(),D_(` `,e.result().capped?`At least `:``,``,e.result().count,` `,e.result().count===1?`value`:`values`,` masked `),D(2),q(e.why())}}var aP=class e{value=$(void 0);why=$(`by redaction (secret names, tokens and emails).`);result=X(()=>rP(this.value()));static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-redaction-count`]],inputs:{value:[1,`value`],why:[1,`why`]},decls:1,vars:1,consts:[[`data-redaction-count`,``,1,`count`],[1,`why`]],template:function(e,t){e&1&&A(0,iP,4,4,`p`,0),e&2&&j(t.result().count>0?0:-1)},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-  font-variant-numeric: tabular-nums;
-}
-
-.why[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}`]})},oP=[`filterInput`],sP=[`treeEl`],cP=[`propFilterInput`],lP=()=>[],uP=e=>({$implicit:e}),dP=e=>({kind:`component`,id:e}),fP=(e,t)=>t.row.node.id,pP=(e,t)=>t.outlet+t.route,mP=(e,t)=>t+e;function hP(e,t){return this.sourceKey(t)}var gP=(e,t)=>t.formId,_P=(e,t)=>t.name+t.index,vP=(e,t)=>t.name,yP=(e,t)=>t.id,bP=(e,t)=>t.token+e;function xP(e,t){if(e&1){let e=B();F(0,`span`,38),K(1,`Page`),I(),F(2,`app-select`,39),H(`valueChange`,function(t){return S(e),C(W(2).selectPage(t))}),I()}if(e&2){let e=W(2);D(2),P(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function SP(e,t){if(e&1){let e=B();F(0,`button`,40),H(`click`,function(){return S(e),C(W(2).toggleDirectiveHosts())}),w(),F(1,`svg`,12),L(2,`path`,41)(3,`path`,42),I(),fs(),F(4,`span`,15),K(5,`Directive hosts`),I()()}e&2&&k(`aria-pressed`,W(2).showDirectiveHosts())}function CP(e,t){if(e&1&&(F(0,`p`,22),K(1),I()),e&2){let e=W(2);D(),q(e.pickMessage())}}function wP(e,t){if(e&1&&(F(0,`p`,23),K(1),I()),e&2){let e=W(2);D(),q(e.truncationText())}}function TP(e,t){e&1&&(F(0,`p`,44),K(1,`The filter only searches the components the tree lists.`),I())}function EP(e,t){e&1&&(F(0,`p`,44),K(1,`Directive hosts are hidden, so they are not searched.`),I())}function DP(e,t){if(e&1){let e=B();F(0,`div`,27)(1,`p`,43),K(2),I(),A(3,TP,2,0,`p`,44),A(4,EP,2,0,`p`,44),F(5,`button`,45),H(`click`,function(){return S(e),C(W(2).clearFilter())}),K(6,`Clear filters`),I()()}if(e&2){let e=W(2);D(2),J(`No components match “`,e.filter().trim(),`”`),D(),j(e.page().truncated?3:-1),D(),j(!e.showDirectiveHosts()&&e.page().directiveHostCount?4:-1)}}function OP(e,t){if(e&1&&(F(0,`p`,28),K(1),I()),e&2){let e=W(2);D(),J(` `,e.rows().length,` rows. Rows render as you scroll, so the browser's find only sees the ones near view; the filter above searches them all. `)}}function kP(e,t){if(e&1){let e=B();F(0,`span`,53),H(`click`,function(t){S(e),W();let n=I_(0);return C(W(2).toggle(n.node.id,t))}),w(),F(1,`svg`,54),L(2,`path`,55),I()()}e&2&&(W(),G(`open`,I_(0).expanded))}function AP(e,t){e&1&&L(0,`span`,48)}function jP(e,t){if(e&1&&(F(0,`span`,56),K(1),I(),F(2,`span`,57),K(3),I(),F(4,`span`,26),K(5,`directive host`),I()),e&2){W();let e=I_(0),t=W(2);D(),J(`<`,e.node.tag,`>`),D(),k(`title`,e.node.directives?.join(`, `)),D(),q(t.hostLabel(e.node))}}function MP(e,t){if(e&1&&(F(0,`span`,58),K(1),I(),F(2,`span`,59),K(3),I()),e&2){W();let e=I_(0);k(`title`,e.node.name),D(),q(e.node.name),D(),k(`title`,`<`+e.node.tag+`>`),D(),J(`<`,e.node.tag,`>`)}}function NP(e,t){if(e&1&&(F(0,`span`)(1,`span`,26),K(2,`Hydration: `),I(),K(3),I()),e&2){let e=t,n=W(3);n_(`hyd hyd-`+e),D(3),q(n.hydrationText(e))}}function PP(e,t){if(e&1&&(F(0,`span`,50),K(1),I()),e&2){let e=t.$implicit;D(),q(e.route||`/`)}}function FP(e,t){if(e&1&&(F(0,`span`,51),K(1),F(2,`span`,26),K(3),I()()),e&2){let e=t;D(),J(` `,e),D(2),J(` `,e===1?`check`:`checks`,` while recording`)}}function IP(e,t){if(e&1&&(F(0,`span`,52),K(1),F(2,`span`,26),K(3),I()()),e&2){W();let e=I_(0);k(`title`,e.node.directives.join(`, `)),D(),J(` +`,e.node.directives.length,` `),D(2),J(` `,e.node.directives.length===1?`directive`:`directives`,` `)}}function LP(e,t){if(e&1){let e=B();P_(0),F(1,`div`,46),H(`click`,function(){S(e);let t=I_(0);return C(W(2).select(t.node.id))})(`focus`,function(t){S(e);let n=I_(0),r=W(2);return r.focusId.set(n.node.id),r.highlight(n.node.id),C(r.showNameTip(t))})(`blur`,function(){S(e);let t=W(2);return t.highlight(null),C(t.nameTip.set(null))})(`keydown.escape`,function(){return S(e),C(W(2).nameTip.set(null))})(`mouseenter`,function(){S(e);let t=I_(0);return C(W(2).highlight(t.node.id))})(`mouseleave`,function(){return S(e),C(W(2).highlight(null))}),A(2,kP,3,2,`span`,47)(3,AP,1,0,`span`,48),A(4,jP,6,3)(5,MP,4,4),A(6,NP,4,3,`span`,49),M(7,PP,2,1,`span`,50,pP),A(9,FP,4,2,`span`,51),A(10,IP,4,3,`span`,52),I()}if(e&2){let e,n,r=t.$implicit,i=W(2),a=F_(r.row);D(),t_(`--%NS%depth`,a.depth),G(`selected`,i.selectedId()===a.node.id)(`dir-host`,a.node.kind===`directive`),k(`aria-level`,a.depth+1)(`aria-setsize`,a.setsize)(`aria-posinset`,a.posinset)(`aria-expanded`,a.hasChildren?a.expanded:null)(`aria-selected`,i.selectedId()===a.node.id)(`tabindex`,i.tabStop()===a.node.id?0:-1)(`data-vindex`,r.index)(`data-id`,a.node.id),D(),j(a.hasChildren?2:3),D(2),j(a.node.kind===`directive`?4:5),D(2),j((e=a.node.hydration)?6:-1,e),D(),N(i.routedById().get(a.node.id)??G_(20,lP)),D(2),j((n=i.cdHosts()[a.node.id])?9:-1,n),D(),j(a.node.kind!==`directive`&&a.node.directives?.length?10:-1)}}function RP(e,t){if(e&1&&(F(0,`div`,60),K(1),I()),e&2){let e=t;t_(`top`,e.top,`px`),D(),J(` `,e.text,` `)}}function zP(e,t){if(e&1&&(F(0,`li`,68),K(1),hg(2,71),I()),e&2){let e=t.$implicit;W(3);let n=Pg(3);D(),J(` `,e,` `),D(),P(`ngTemplateOutlet`,n)(`ngTemplateOutletContext`,K_(3,uP,e))}}function BP(e,t){if(e&1){let e=B();F(0,`div`,70)(1,`button`,45),H(`click`,function(){let t=S(e);return C(W(3).reveal(t.id,!0))}),K(2),I()()}e&2&&(D(2),J(` Show `,t.name,` `))}function VP(e,t){if(e&1&&(F(0,`section`,32)(1,`header`,61)(2,`span`,62),K(3,`directive host`),I(),F(4,`h2`,63),K(5),I(),F(6,`span`,64),K(7),I()(),F(8,`div`,65)(9,`h3`),K(10,` Directives `),F(11,`span`,66),K(12),I()(),F(13,`ul`,67),M(14,zP,3,5,`li`,68,mP),I()(),F(16,`div`,65)(17,`p`,69),K(18,` This element hosts directives but no component. Their inputs are bound in the template of the component that renders it. `),I(),A(19,BP,3,1,`div`,70),I()()),e&2){let e,n=t,r=W(2);D(5),J(`<`,n.tag,`>`),D(2),q(r.hostLabel(n)),D(5),q(n.directives?.length??0),D(2),N(n.directives??G_(4,lP)),D(5),j((e=r.ownerOf(n.id))?19:-1,e)}}function HP(e,t){if(e&1&&(F(0,`p`,72),L(1,`app-source-link`,76),I()),e&2){let e=t;D(),P(`file`,e.file)(`line`,e.line)}}function UP(e,t){if(e&1&&(F(0,`p`,77)(1,`span`,79),K(2,`Likely`),I(),F(3,`span`,26),K(4,`, matched by class name: `),I(),L(5,`app-source-link`,76),I()),e&2){W();let e=I_(0);P(`title`,W(3).guessTitle),D(5),P(`file`,e[0].file)(`line`,e[0].line)}}function WP(e,t){if(e&1&&(F(0,`li`),L(1,`app-source-link`,76),I()),e&2){let e=t.$implicit;D(),P(`file`,e.file)(`line`,e.line)}}function GP(e,t){if(e&1&&(F(0,`div`,78)(1,`p`,80)(2,`span`,79),K(3,`Not certain`),I(),K(4),I(),F(5,`ul`,81),M(6,WP,2,2,`li`,null,hP,!0),I()()),e&2){W();let e=I_(0),t=W(),n=W(2);P(`title`,n.guessTitle),D(4),Y(` `,e.length,` source files define `,n.bareName(t.name),`: `),D(2),N(e)}}function KP(e,t){if(e&1&&(P_(0),A(1,UP,6,3,`p`,77)(2,GP,8,3,`div`,78)),e&2){let e=W(),t=F_(W(2).sourceCandidates(e));D(),j(t.length===1?1:t.length>1?2:-1)}}function qP(e,t){if(e&1){let e=B();F(0,`div`,82)(1,`button`,45),H(`click`,function(){S(e);let t=W();return C(W(2).revealInElements(t))}),K(2,`Reveal in Elements`),I(),F(3,`button`,45),H(`click`,function(){S(e);let t=W();return C(W(2).openSource(t))}),K(4,`Open source`),I()(),F(5,`p`,83),K(6),I()}if(e&2){let e=W(3);D(6),q(e.actionMessage())}}function JP(e,t){if(e&1){let e=B();F(0,`button`,85),H(`click`,function(){let t=S(e).$implicit;return C(W(5).showForm.emit(t.formId))}),K(1),I()}if(e&2){let e=t.$implicit;D(),J(` Show `,e.label,` in Forms `)}}function YP(e,t){if(e&1&&(F(0,`div`,73),M(1,JP,2,1,`button`,84,gP),I()),e&2){let e=W(),t=W(3);D(),N(t.formsIn(e.file))}}function XP(e,t){e&1&&A(0,YP,3,0,`div`,73),e&2&&j(W(3).formsIn(t.file).length?0:-1)}function ZP(e,t){if(e&1){let e=B();F(0,`button`,45),H(`click`,function(){S(e);let t=W(2);return C(W(2).openInjector(t))}),K(1,` Show in Injectors `),F(2,`span`,26),K(3),I()()}if(e&2){let e=W(2);D(3),J(`: `,e.name)}}function QP(e,t){if(e&1){let e=B();F(0,`button`,45),H(`click`,function(){S(e);let t=W(2);return C(W(2).openSignals(t))}),K(1,` Show in Signals `),F(2,`span`,26),K(3),I()()}if(e&2){let e=W(2);D(3),J(`: `,e.name)}}function $P(e,t){if(e&1&&(F(0,`div`,73),A(1,ZP,4,1,`button`,86),A(2,QP,4,1,`button`,86),I()),e&2){let e=W(3);D(),j(e.canShowInjector()?1:-1),D(),j(e.canShowSignals()?2:-1)}}function eF(e,t){if(e&1){let e=B();F(0,`div`,87)(1,`button`,45),H(`click`,function(){let t=S(e);return C(W(3).copyJson(t))}),K(2,`Copy as JSON`),I(),F(3,`button`,45),H(`click`,function(){let t=S(e);return C(W(3).copyHostPath(t))}),K(4,`Copy host path`),I()(),F(5,`p`,83),K(6),I()}if(e&2){let e=W(3);D(6),q(e.copyMessage())}}function tF(e,t){if(e&1&&L(0,`app-store-global`,74),e&2){let e=W(),t=W(2);P(`rpc`,t.rpc())(`pageId`,t.page()?.pageId)(`target`,K_(4,dP,e.id))(`label`,e.name)}}function nF(e,t){if(e&1&&(F(0,`dt`),K(1,`Routed`),I(),F(2,`dd`,89),K(3),I()),e&2){let e=t.$implicit;D(3),Y(``,e.route||`/`,` in outlet `,e.outlet)}}function rF(e,t){if(e&1&&(F(0,`span`,8),K(1),I()),e&2){let e=W(4);D(),Y(``,e.shownValues()?.count??0,` of `,e.valueTotal())}}function iF(e,t){if(e&1){let e=B();F(0,`div`,95)(1,`p`,43),K(2),I(),F(3,`p`,44),K(4,` The filter searches names, and the nested keys of values you opened. `),I(),F(5,`button`,45),H(`click`,function(){return S(e),C(W(5).clearPropFilter())}),K(6,`Clear filters`),I()()}if(e&2){let e=W(5);D(2),J(` No inputs, outputs or properties match “`,e.propFilter().trim(),`” `)}}function aF(e,t){if(e&1&&(F(0,`span`,100),K(1),I()),e&2){let e=W().$implicit;D(),J(`(`,e.prop,`)`)}}function oF(e,t){if(e&1&&(F(0,`li`,98)(1,`span`,99),K(2),A(3,aF,2,1,`span`,100),I(),L(4,`app-value-tree`,101),I()),e&2){let e=t.$implicit,n=W(4),r=W(3);G(`changed`,r.flashed(`input`,e.name)),D(2),J(` `,e.name,` `),D(),j(e.prop===e.name?-1:3),D(),P(`prop`,e)(`store`,r.values)(`query`,r.propFilter())(`componentId`,n.id)(`pageId`,r.page()?.pageId??null)(`rpc`,r.rpc())(`writes`,r.canEdit())}}function sF(e,t){if(e&1&&(F(0,`ul`,96),M(1,oF,5,11,`li`,97,vP),I()),e&2){let e=W(2);D(),N(e.inputs)}}function cF(e,t){e&1&&(F(0,`p`,69),K(1,`No inputs.`),I())}function lF(e,t){if(e&1&&(F(0,`div`,65)(1,`h3`),K(2,` Inputs `),F(3,`span`,66),K(4),I()(),A(5,sF,3,0,`ul`,96)(6,cF,2,0,`p`,69),I()),e&2){let e=W();D(4),q(e.inputs.length),D(),j(e.inputs.length?5:6)}}function uF(e,t){if(e&1&&(F(0,`li`,103)(1,`span`,89),K(2),I(),F(3,`span`,104),K(4),I()()),e&2){let e=t.$implicit;G(`on`,e.listened),D(2),q(e.name),D(2),q(e.listened?`listened`:`no listener`)}}function dF(e,t){if(e&1&&(F(0,`ul`,67),M(1,uF,5,4,`li`,102,vP),I()),e&2){let e=W(2);D(),N(e.outputs)}}function fF(e,t){e&1&&(F(0,`p`,69),K(1,`No outputs.`),I())}function pF(e,t){if(e&1&&(F(0,`div`,65)(1,`h3`),K(2,` Outputs `),F(3,`span`,66),K(4),I()(),A(5,dF,3,0,`ul`,67)(6,fF,2,0,`p`,69),I()),e&2){let e=W();D(4),q(e.outputs.length),D(),j(e.outputs.length?5:6)}}function mF(e,t){if(e&1&&(F(0,`span`,105),K(1),I()),e&2){let e=W().$implicit;D(),q(e.kind)}}function hF(e,t){if(e&1){let e=B();F(0,`button`,107),H(`click`,function(){S(e);let t=W().$implicit,n=W(5);return C(W(2).openSignals(n,t.prop))}),K(1,` Show in Signals`),F(2,`span`,26),K(3),I()()}if(e&2){let e=W().$implicit;D(3),J(`: `,e.name)}}function gF(e,t){if(e&1&&(F(0,`li`,98)(1,`span`,99),K(2),A(3,mF,2,1,`span`,105),A(4,hF,4,1,`button`,106),I(),L(5,`app-value-tree`,101),I()),e&2){let e=t.$implicit,n=W(4),r=W(3);G(`changed`,r.flashed(`property`,e.name)),D(2),J(` `,e.name,` `),D(),j(e.kind?3:-1),D(),j(e.kind===`signal`&&r.canShowSignals()&&!r.staticReport()?4:-1),D(),P(`prop`,e)(`store`,r.values)(`query`,r.propFilter())(`componentId`,n.id)(`pageId`,r.page()?.pageId??null)(`rpc`,r.rpc())(`writes`,r.canEdit())}}function _F(e,t){if(e&1&&(F(0,`ul`,96),M(1,gF,6,12,`li`,97,vP),I()),e&2){let e=W(2);D(),N(e.properties)}}function vF(e,t){e&1&&(F(0,`p`,69),K(1,`No other properties.`),I())}function yF(e,t){if(e&1&&(F(0,`div`,65)(1,`h3`),K(2,` Properties `),F(3,`span`,66),K(4),I()(),A(5,_F,3,0,`ul`,96)(6,vF,2,0,`p`,69),I()),e&2){let e=W();D(4),q(e.properties.length),D(),j(e.properties.length?5:6)}}function bF(e,t){if(e&1&&(F(0,`li`,68),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function xF(e,t){if(e&1&&(F(0,`div`,65)(1,`h3`),K(2,` DOM listeners `),F(3,`span`,66),K(4),I()(),F(5,`ul`,67),M(6,bF,2,1,`li`,68,eg),I()()),e&2){let e=W(2);D(4),q(e.listeners.length),D(2),N(e.listeners)}}function SF(e,t){if(e&1&&(F(0,`li`,103)(1,`span`,89),K(2),I(),F(3,`span`,104),K(4),I()()),e&2){let e=t.$implicit;D(2),q(e.state),D(2),q(e.triggers.join(`, `)||`no triggers`)}}function CF(e,t){if(e&1&&(F(0,`div`,65)(1,`h3`),K(2,` Defer blocks `),F(3,`span`,66),K(4),I()(),F(5,`ul`,67),M(6,SF,5,2,`li`,103,yP),I()()),e&2){let e=W(5);D(4),q(e.ownedDeferBlocks().length),D(2),N(e.ownedDeferBlocks())}}function wF(e,t){if(e&1&&(F(0,`li`,98)(1,`span`,99),K(2),I(),L(3,`app-value-tree`,109),I()),e&2){let e=t.$implicit,n=W(2).$implicit,r=W(2),i=W(3);G(`changed`,i.flashed(`directive`,e.name,n.index)),D(2),q(e.name),D(),P(`prop`,e)(`store`,i.values)(`query`,i.propFilter())(`directive`,n.index)(`componentId`,r.id)(`pageId`,i.page()?.pageId??null)(`rpc`,i.rpc())}}function TF(e,t){if(e&1&&(F(0,`ul`,96),M(1,wF,4,10,`li`,97,vP),I()),e&2){let e=W().$implicit;D(),N(e.inputs)}}function EF(e,t){if(e&1&&(F(0,`li`,103)(1,`span`,89),K(2),I(),F(3,`span`,104),K(4),I()()),e&2){let e=t.$implicit;G(`on`,e.listened),D(2),q(e.name),D(2),q(e.listened?`listened`:`no listener`)}}function DF(e,t){if(e&1&&(F(0,`ul`,67),M(1,EF,5,4,`li`,102,vP),I()),e&2){let e=W().$implicit;D(),N(e.outputs)}}function OF(e,t){e&1&&(F(0,`p`,69),K(1,`No inputs or outputs.`),I())}function kF(e,t){if(e&1&&(F(0,`div`,65)(1,`h3`)(2,`span`,89),K(3),I(),F(4,`span`,105),K(5,`directive on host`),I()(),F(6,`p`,108),hg(7,71),I(),A(8,TF,3,0,`ul`,96),A(9,DF,3,0,`ul`,67),A(10,OF,2,0,`p`,69),I()),e&2){let e=t.$implicit;W(5);let n=Pg(3);D(3),q(e.name),D(4),P(`ngTemplateOutlet`,n)(`ngTemplateOutletContext`,K_(6,uP,e.name)),D(),j(e.inputs.length?8:-1),D(),j(e.outputs.length?9:-1),D(),j(!e.inputs.length&&!e.outputs.length?10:-1)}}function AF(e,t){if(e&1&&(L(0,`app-redaction-count`,94),A(1,iF,7,1,`div`,95),A(2,lF,7,2,`div`,65),A(3,pF,7,2,`div`,65),A(4,yF,7,2,`div`,65),A(5,xF,8,1,`div`,65),A(6,CF,8,1,`div`,65),M(7,kF,11,8,`div`,65,_P)),e&2){let e=t,n=W(),r=W(3);P(`value`,e),D(),j(r.propQuery()&&!e.count?1:-1),D(),j(!r.propQuery()||e.inputs.length?2:-1),D(),j(!r.propQuery()||e.outputs.length?3:-1),D(),j(!r.propQuery()||e.properties.length?4:-1),D(),j(!r.propQuery()&&n.listeners.length?5:-1),D(),j(!r.propQuery()&&r.ownedDeferBlocks().length?6:-1),D(),N(e.directives)}}function jF(e,t){if(e&1&&(F(0,`span`,105),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function MF(e,t){if(e&1&&(F(0,`span`,112),K(1,`from `),F(2,`span`,89),K(3),I()()),e&2){let e=W().$implicit;D(3),q(e.providedByName??`an injector`)}}function NF(e,t){e&1&&(F(0,`span`,113),K(1,`not provided`),I())}function PF(e,t){if(e&1&&(F(0,`li`,110)(1,`span`,111),K(2),I(),M(3,jF,2,1,`span`,105,eg),A(5,MF,4,1,`span`,112)(6,NF,2,0,`span`,113),I()),e&2){let e=t.$implicit;D(2),q(e.token),D(),N(e.flags),D(2),j(e.providedBy?5:6)}}function FF(e,t){if(e&1&&(F(0,`ul`,92),M(1,PF,7,2,`li`,110,bP),I()),e&2){let e=W();D(),N(e.dependencies)}}function IF(e,t){e&1&&(F(0,`p`,69),K(1,`Nothing is injected through the constructor or inject().`),I())}function LF(e,t){if(e&1){let e=B();F(0,`app-component-pipes`,114),H(`showPipe`,function(t){S(e);let n=W(4);return C(n.showPipe.emit({name:t,pageId:n.page()?.pageId}))}),I()}if(e&2){let e=W(2),t=W(2);P(`rpc`,t.rpc())(`pageId`,t.page()?.pageId)(`component`,t.bareName(e.name))(`canShowPipes`,!t.staticReport())}}function RF(e,t){if(e&1){let e=B();F(0,`dl`,88)(1,`dt`),K(2,`Change detection`),I(),F(3,`dd`),K(4),I(),F(5,`dt`),K(6,`Encapsulation`),I(),F(7,`dd`),K(8),I(),F(9,`dt`),K(10,`Host path`),I(),F(11,`dd`,89),K(12),I(),M(13,nF,4,2,null,null,pP),I(),F(15,`div`,90)(16,`app-search-field`,91,3),M_(`valueChange`,function(t){S(e);let n=W(3);return j_(n.propFilter,t)||(n.propFilter=t),C(t)}),I(),A(18,rF,2,2,`span`,8),F(19,`p`,21),K(20),I()(),A(21,AF,9,7),F(22,`div`,65)(23,`h3`),K(24,` Injected `),F(25,`span`,66),K(26),I()(),A(27,FF,3,0,`ul`,92)(28,IF,2,0,`p`,69),I(),A(29,LF,1,4,`app-component-pipes`,93)}if(e&2){let e,n=t,r=W(),i=W(2);D(4),q(n.changeDetection??`Unknown`),D(4),q(n.encapsulation??`Unknown`),D(4),q(n.path),D(),N(i.routedById().get(r.id)??G_(10,lP)),D(3),A_(`value`,i.propFilter),D(2),j(i.propQuery()?18:-1),D(2),q(i.propFilterStatus()),D(),j((e=i.shownValues())?21:-1,e),D(5),q(n.dependencies.length),D(),j(n.dependencies.length?27:28),D(2),j(i.canShowPipes()?29:-1)}}function zF(e,t){e&1&&(F(0,`div`,75),L(1,`span`,115),F(2,`p`,44),K(3,`Reading live values from the page…`),I()())}function BF(e,t){if(e&1&&(F(0,`section`,32)(1,`header`,61)(2,`span`,62),K(3,`component`),I(),F(4,`h2`,63),K(5),I(),F(6,`span`,64),K(7),I(),A(8,HP,2,2,`p`,72)(9,KP,3,2),A(10,qP,7,1),A(11,XP,1,1),A(12,$P,3,2,`div`,73),A(13,eF,7,1),A(14,tF,1,6,`app-store-global`,74),I(),A(15,RF,30,11)(16,zF,4,0,`div`,75),I()),e&2){let e,n,r,i,a=t,o=W(2);D(5),q(a.name),D(2),J(`<`,a.tag,`>`),D(),j((e=o.detail()?.source)?8:9,e),D(2),j(o.devtoolsActions()?10:-1),D(),j((n=o.sourceFor(a))?11:-1,n),D(),j((o.canShowInjector()||o.canShowSignals())&&!o.staticReport()?12:-1),D(),j((r=o.detail())?13:-1,r),D(),j(!o.staticReport()&&!o.native()?14:-1),D(),j((i=o.detail())?15:16,i)}}function VF(e,t){e&1&&(F(0,`p`,43),K(1,`The selected component was destroyed`),I(),F(2,`p`,44)(3,`span`,89),K(4),I(),K(5,` is no longer on the page. Select another component to see its live values. `),I()),e&2&&(D(4),q(t))}function HF(e,t){e&1&&(F(0,`p`,44),K(1,` Select a component to see its live inputs, properties, outputs, change detection and injected services. `),I())}function UF(e,t){if(e&1&&(F(0,`div`,33),A(1,VF,6,1)(2,HF,2,0,`p`,44),I()),e&2){let e,t=W(2);D(),j((e=t.destroyed())?1:2,e)}}function WF(e,t){e&1&&L(0,`app-angular-unavailable`,35),e&2&&P(`page`,W(2).angularPage())}function GF(e,t){if(e&1){let e=B();F(0,`app-hydration-section`,116),H(`overlay`,function(t){return S(e),C(W(2).setHydrationOverlay(t))})(`showNode`,function(t){return S(e),C(W(2).revealNode(t))})(`highlight`,function(t){return S(e),C(W(2).highlight(t))}),I()}e&2&&P(`report`,W(2).page()?.hydration)}function KF(e,t){if(e&1){let e=B();F(0,`app-cd-recording`,117),H(`showComponent`,function(t){return S(e),C(W(2).showCdComponent(t))}),I(),F(1,`app-leaks-section`,118),H(`showComponent`,function(t){return S(e),C(W(2).showLeakComponent(t))})(`highlight`,function(t){return S(e),C(W(2).highlight(t))}),I()}if(e&2){let e=W(2);P(`page`,e.cdPage())(`pageId`,e.page().pageId)(`rpc`,e.rpc())(`native`,e.native()),D(),P(`report`,e.leaksPage())(`pageId`,e.page().pageId)(`rpc`,e.rpc())(`angular`,e.angularPage())}}function qF(e,t){if(e&1){let e=B();F(0,`p`,4),K(1,` Every component instance on the page, in the order Angular rendered them. Hover a row to highlight its host in the page, and select it to read its live inputs, properties, outputs and injected services. `),I(),F(2,`div`,5)(3,`app-search-field`,6,1),H(`valueChange`,function(t){return S(e),C(W().setFilter(t))}),I(),F(5,`span`,7),K(6,` Type plain text, a tag such as <button>, or a directive such as [routerLink]. Combine them to narrow the tree. `),I(),A(7,xP,3,2),F(8,`span`,8),K(9),I(),F(10,`div`,9),A(11,SP,6,1,`button`,10),F(12,`button`,11),H(`click`,function(){return S(e),C(W().expandAll())}),w(),F(13,`svg`,12),L(14,`path`,13)(15,`path`,14),I(),fs(),F(16,`span`,15),K(17,`Expand all`),I()(),F(18,`button`,16),H(`click`,function(){return S(e),C(W().collapseAll())}),w(),F(19,`svg`,12),L(20,`path`,17)(21,`path`,18),I(),fs(),F(22,`span`,15),K(23,`Collapse all`),I()(),F(24,`button`,19),H(`click`,function(){S(e);let t=W();return C(t.picking()?t.cancelPick():t.pick())}),w(),F(25,`svg`,12),L(26,`path`,20),I(),fs(),F(27,`span`,15),K(28),I()()()(),F(29,`p`,21),K(30),I(),A(31,CP,2,1,`p`,22),A(32,wP,2,1,`p`,23),F(33,`div`,24)(34,`div`,25)(35,`h2`,26),K(36,`Component tree`),I(),A(37,DP,7,3,`div`,27),A(38,OP,2,1,`p`,28),F(39,`div`,29,2),H(`keydown`,function(t){return S(e),C(W().onTreeKey(t))}),M(41,LP,11,21,`div`,30,fP),I(),A(43,RP,2,3,`div`,31),I(),A(44,VP,20,5,`section`,32)(45,BF,17,9,`section`,32)(46,UF,3,1,`div`,33),I(),F(47,`app-defer-blocks`,34),H(`showOwner`,function(t){return S(e),C(W().showOwner(t))})(`showNode`,function(t){return S(e),C(W().revealNode(t))})(`highlight`,function(t){S(e);let n=W();return C(t?n.highlightBlock(t):n.highlight(null))}),I(),A(48,WF,1,1,`app-angular-unavailable`,35),A(49,GF,1,1,`app-hydration-section`,36),F(50,`app-for-blocks`,37),H(`showOwner`,function(t){return S(e),C(W().showForOwner(t))})(`highlight`,function(t){return S(e),C(W().highlight(t))}),I(),A(51,KF,2,8)}if(e&2){let e,t,n=W();D(3),P(`value`,n.filter()),D(4),j(n.pageOptions().length>1?7:-1),D(2),q(n.countLabel()),D(2),j(n.page().directiveHostCount?11:-1),D(),P(`disabled`,!!n.filter().trim()),D(6),P(`disabled`,!!n.filter().trim()),D(6),G(`on`,n.picking()),k(`title`,n.pickLabel()),D(4),q(n.pickLabel()),D(2),q(n.announcement()),D(),j(n.pickMessage()?31:-1),D(),j(n.page().truncated?32:-1),D(5),j(n.rows().length?-1:37),D(),j(n.rowWindow.enabled()?38:-1),D(),t_(`padding-top`,n.rowWindow.enabled()?6+n.rowWindow.padTop():null,`px`)(`padding-bottom`,n.rowWindow.enabled()?6+n.rowWindow.padBottom():null,`px`),G(`windowed`,n.rowWindow.enabled()),P(`hidden`,!n.rows().length),D(2),N(n.shownRows()),D(2),j((e=n.nameTip())?43:-1,e),D(),j((t=n.selectedHost())?44:(t=n.selectedNode())?45:46,t),D(3),P(`blocks`,n.deferBlocks())(`truncated`,n.page()?.deferTruncated===!0)(`clockOffset`,n.page()?.clockOffset??0)(`mismatches`,n.page()?.hydration?.mismatches??G_(35,lP)),D(),j(n.deferUnavailable()?48:-1),D(),j(n.native()?-1:49),D(),P(`blocks`,n.page()?.forBlocks)(`truncated`,n.page()?.forBlocksTruncated===!0)(`supported`,n.page()?.deferBlocks&&!n.page()?.forBlocks||n.forUnavailable()?!1:null)(`angular`,n.angularPage()),D(),j(n.staticReport()?-1:51)}}function JF(e,t){e&1&&(F(0,`p`,23),K(1,` The page reported no component instances. The live tree needs a development build with Angular's debug API. Showing what the source declares instead. `),I())}function YF(e,t){e&1&&(F(0,`p`,23),K(1,`Loading the live component tree…`),I())}function XF(e,t){e&1&&(F(0,`p`,119),K(1,` No page is connected, so this lists what the source declares. Open the app in a browser with the devtools connected to see each rendered instance. `),I())}function ZF(e,t){if(e&1&&K(0),e&2){let e=W(3);Y(` `,e.filteredSource().length,` of `,e.source().length,` `)}}function QF(e,t){if(e&1&&K(0),e&2){let e=W(3);O_(` `,e.sourceCounts().components,` `,e.sourceCounts().components===1?`component`:`components`,` · `,e.sourceCounts().directives,` `,e.sourceCounts().directives===1?`directive`:`directives`,` `)}}function $F(e,t){if(e&1&&(F(0,`span`,121),A(1,ZF,1,2)(2,QF,1,4),I()),e&2){let e=W(2);D(),j(e.filter().trim()?1:2)}}function eI(e,t){e&1&&(F(0,`div`,125),L(1,`span`,115),F(2,`p`,43),K(3,`Scanning components…`),I()())}function tI(e,t){e&1&&(K(0,` Run `),F(1,`code`),K(2,`pangular build`),I(),K(3,` again to rebuild the report. `))}function nI(e,t){e&1&&K(0,` Check that the dev server is running, then try again. `)}function rI(e,t){if(e&1){let e=B();F(0,`div`,126)(1,`p`,43),K(2,`Could not load components`),I(),F(3,`p`,44),A(4,tI,4,0)(5,nI,1,0),I(),F(6,`button`,45),H(`click`,function(){return S(e),C(W(2).refresh())}),K(7,`Retry`),I()()}if(e&2){let e=W(2);D(4),j(e.staticReport()?4:5)}}function iI(e,t){e&1&&(F(0,`div`,127)(1,`p`,43),K(2,`No components found`),I(),F(3,`p`,44),K(4,`No @Component or @Directive was found in the source.`),I()())}function aI(e,t){if(e&1){let e=B();F(0,`div`,127)(1,`p`,43),K(2),I(),F(3,`button`,45),H(`click`,function(){return S(e),C(W(2).clearFilter())}),K(4,`Clear filters`),I()()}if(e&2){let e=W(2);D(2),J(`No components match “`,e.filter().trim(),`”`)}}function oI(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,W(3).bareName(e.className),` · `)}}function sI(e,t){if(e&1&&(F(0,`dt`),K(1,`Change detection`),I(),F(2,`dd`),K(3),I()),e&2){let e=W(2).$implicit;D(3),q(e.changeDetection??`Unknown`)}}function cI(e,t){if(e&1){let e=B();F(0,`button`,85),H(`click`,function(){let t=S(e).$implicit;return C(W(5).showForm.emit(t.formId))}),K(1),I()}if(e&2){let e=t.$implicit;D(),J(` Show `,e.label,` in Forms `)}}function lI(e,t){if(e&1&&(F(0,`div`,137)(1,`dl`,88)(2,`dt`),K(3,`Class`),I(),F(4,`dd`,89),K(5),I(),F(6,`dt`),K(7,`File`),I(),F(8,`dd`,89),L(9,`app-source-link`,76),I(),F(10,`dt`),K(11,`Standalone`),I(),F(12,`dd`),K(13),I(),A(14,sI,4,1),F(15,`dt`),K(16,`Inputs`),I(),F(17,`dd`,89),K(18),I(),F(19,`dt`),K(20,`Outputs`),I(),F(21,`dd`,89),K(22),I()(),M(23,cI,2,1,`button`,84,gP),I()),e&2){let e=W(),t=e.$implicit,n=e.$index,r=W(3);P(`id`,`ct-source-`+n),D(5),q(r.bareName(t.className)),D(4),P(`file`,t.file)(`line`,t.line),D(4),q(t.isStandalone?`Yes`:`No`),D(),j(t.kind===`component`?14:-1),D(4),q(t.inputs.join(`, `)||`None`),D(4),q(t.outputs.join(`, `)||`None`),D(),N(r.formsIn(t.file))}}function uI(e,t){if(e&1){let e=B();F(0,`li`,130)(1,`button`,131),H(`click`,function(){let t=S(e).$implicit,n=W(3);return C(n.openKey.set(n.openKey()===n.sourceKey(t)?null:n.sourceKey(t)))}),F(2,`span`,132),K(3),I(),F(4,`span`,133)(5,`span`,134),K(6),I(),F(7,`span`,135),A(8,oI,1,1),K(9),I()(),w(),F(10,`svg`,136),L(11,`path`,55),I()(),A(12,lI,25,8,`div`,137),I()}if(e&2){let e=t.$implicit,n=t.$index,r=W(3);G(`expanded`,r.openKey()===r.sourceKey(e)),D(),k(`aria-expanded`,r.openKey()===r.sourceKey(e))(`aria-controls`,r.openKey()===r.sourceKey(e)?`ct-source-`+n:null),D(),G(`directive`,e.kind===`directive`),D(),q(e.kind),D(3),q(r.sourceLabel(e)),D(2),j(e.selector?8:-1),D(),Y(` `,e.file,`:`,e.line,` `),D(3),j(r.openKey()===r.sourceKey(e)?12:-1)}}function dI(e,t){if(e&1&&(F(0,`ul`,128),M(1,uI,13,12,`li`,129,hP,!0),I()),e&2){let e=W(2);D(),N(e.filteredSource())}}function fI(e,t){if(e&1){let e=B();A(0,JF,2,0,`p`,23)(1,YF,2,0,`p`,23)(2,XF,2,0,`p`,119),F(3,`div`,5)(4,`app-search-field`,120,1),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.filter,t)||(n.filter=t),C(t)}),I(),A(6,$F,3,1,`span`,121),F(7,`button`,122),H(`click`,function(){return S(e),C(W().refresh())}),w(),F(8,`svg`,12),L(9,`path`,123)(10,`path`,124),I(),K(11,` Refresh `),I()(),A(12,eI,4,0,`div`,125)(13,rI,8,1,`div`,126)(14,iI,5,0,`div`,127)(15,aI,5,1,`div`,127)(16,dI,3,0,`ul`,128)}if(e&2){let e=W();j(e.page()?0:e.pagesKnown()?2:1),D(4),A_(`value`,e.filter),D(2),j(e.source().length?6:-1),D(),G(`spinning`,e.loading()),k(`aria-busy`,e.loading()),D(5),j(e.loading()&&!e.source().length?12:e.error()&&!e.source().length?13:e.source().length?e.filteredSource().length?16:15:14)}}function pI(e,t){if(e&1&&(F(0,`span`,138)(1,`span`,79),K(2,`Likely`),I(),F(3,`span`,26),K(4,`, matched by class name: `),I(),L(5,`app-source-link`,76),I()),e&2){W();let e=I_(0);P(`title`,W().guessTitle),D(5),P(`file`,e[0].file)(`line`,e[0].line)}}function mI(e,t){if(e&1&&(F(0,`span`,139),K(1),I()),e&2){let e=W().$implicit,t=I_(0),n=W();P(`title`,n.guessTitle),D(),Y(``,t.length,` source files define `,n.bareName(e))}}function hI(e,t){if(e&1&&(P_(0),A(1,pI,6,3,`span`,138)(2,mI,2,3,`span`,139)),e&2){let e=t.$implicit,n=F_(W().directiveSources(e));D(),j(n.length===1?1:n.length>1?2:-1)}}var gI=32;function _I(e){return e.replace(/^_(?=[A-Z])/,``)}function vI(e,t){let n=e=>e.replace(/\\/g,`/`).replace(/^\.\//,``),[r,i]=[n(e),n(t)];return r===i||r.endsWith(`/`+i)||i.endsWith(`/`+r)}function yI(e,t){let n=[],r=new Set([t]);for(let i=e.get(t);i&&!r.has(i);i=e.get(i))r.add(i),n.push(i);return n}var bI={ArrowDown:`next`,ArrowUp:`previous`,ArrowLeft:`parent`,ArrowRight:`child`,Enter:`pick`},xI=`pangular:components:directive-hosts`;function SI(){try{return localStorage.getItem(xI)!==`hidden`}catch{return!0}}var CI=class e{rpc=$(null);staticReport=X(()=>cT(this.rpc()));focus=$(null);showForm=cv();focusHandled=cv();command=$(null);commandHandled=cv();canShowInjector=$(!1);canShowPipes=$(!1);showPipe=cv();showInjector=cv();canShowSignals=$(!1);showSignals=cv();filter=T(``);loading=T(!1);error=T(!1);source=T([]);formOwners=T([]);pages=T({});chosenPageId=T(null);selectedId=T(null);destroyed=T(null);announcement=T(``);picking=T(!1);pickMessage=T(``);pickPageId=null;pickSeq=0;focusId=T(null);nameTip=T(null);pickLabel=X(()=>this.picking()?`Cancel pick`:this.native()?`Pick component on device`:`Pick component on page`);bridge=x(BE);actionMessage=Q({source:this.selectedId,computation:()=>``});copyMessage=Q({source:this.selectedId,computation:()=>``});flash=new uj;collapsed=T(new Set);showDirectiveHosts=T(SI());openKey=T(null);routerPages=T([]);pageId=tT();angularPages=oD(()=>this.rpc());angularPage=X(()=>sD(this.angularPages(),this.page()?.pageId??this.pageId));hasControlFlow=X(()=>{let e=this.angularPage()?.version;return!e||Gw(e,`17.0`)});deferUnavailable=X(()=>this.hasControlFlow()&&Kw(this.angularPage(),`deferBlocks`));forUnavailable=X(()=>this.hasControlFlow()&&Kw(this.angularPage(),`forBlocks`));destroyRef=x(Ss);injector=x(bs);host=x(Ml);filterInput=hv(`filterInput`);cdRecording=hv(nj);pagesKnown=T(!1);cleanups=[];selection={pageId:null,detailId:null};shownPageId=Q({source:()=>({pages:this.pages(),chosen:this.chosenPageId()}),computation:({pages:e,chosen:t},n)=>nT(e,{chosen:t,host:this.pageId,previous:n?.value??null})});page=X(()=>{let e=this.shownPageId();return e?this.pages()[e]??null:null});pageOptions=X(()=>Object.values(this.pages()).map(e=>({value:e.pageId,label:e.title||e.url||`Page ${e.pageId}`,hint:e.url})));live=X(()=>(this.page()?.roots.length??0)>0);native=X(()=>pD(this.page()));canEdit=X(()=>this.live()&&!this.native()&&!this.staticReport()&&OT(this.rpc(),`components`));devtoolsActions=X(()=>this.bridge.available&&!!this.page()&&!this.native()&&!this.staticReport());cdPages=T({});cdPage=X(()=>{let e=this.page()?.pageId;return e?this.cdPages()[e]??null:null});cdHosts=X(()=>this.cdPage()?.hosts??{});leaksPages=T({});leaksPage=X(()=>{let e=this.page()?.pageId;return e?this.leaksPages()[e]??null:null});visibleRoots=X(()=>{let e=this.page()?.roots??[];return this.showDirectiveHosts()||!this.page()?.directiveHostCount?e:ED(e)});index=X(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.has(a.id)||(e.set(a.id,a),i&&t.set(a.id,i),n(a.children,a.id))};return n(this.visibleRoots(),null),{map:e,parents:t}});query=X(()=>this.filter().trim().toLowerCase());filtered=X(()=>TD(this.visibleRoots(),this.query()));shownDirectiveHosts=X(()=>this.showDirectiveHosts()?this.page()?.directiveHostCount??0:0);deferBlocks=X(()=>this.page()?.deferBlocks??[]);ownedDeferBlocks=X(()=>{let e=this.selectedId();return e?this.deferBlocks().filter(t=>t.owner?.id===e):[]});countLabel=X(()=>AD(this.page()?.count??0,this.filtered().matches,!!this.query(),!!this.page()?.truncated,this.shownDirectiveHosts()));truncationText=X(()=>MD(this.page()?.truncatedBy));rows=X(()=>{let e=[],t=this.collapsed(),n=!!this.query(),r=(i,a)=>{i.forEach((o,s)=>{let c=n||!t.has(o.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:c,posinset:s+1,setsize:i.length}),c&&r(o.children,a+1)})};return r(this.filtered().nodes,0),e});rowWindow=new zN({count:X(()=>this.rows().length),estimate:gI,fixed:!0});shownRows=X(()=>{let{start:e,end:t}=this.rowWindow.range();return this.rows().slice(e,t).map((t,n)=>({row:t,index:e+n}))});tabStop=X(()=>{let e=this.rovingId(),t=this.shownRows();return t.some(({row:t})=>t.node.id===e)?e:t[0]?.row.node.id??null});treeEl=hv(`treeEl`);selectedNode=X(()=>{let e=this.selectedId();return e?this.index().map.get(e)??null:null});selectedHost=X(()=>{let e=this.selectedNode();return e?.kind===`directive`?e:null});detail=X(()=>{let e=this.page()?.detail;return e&&e.id===this.selectedId()?e:null});values=new vM;propFilter=T(``);propQuery=X(()=>this.propFilter().trim().toLowerCase());propFilterInput=hv(`propFilterInput`);shownValues=X(()=>{let e=this.detail();if(!e)return null;let t=this.propQuery(),n=e=>!t||e.name.toLowerCase().includes(t)||e.prop.toLowerCase().includes(t),r=(e,r)=>n(e)||eM([e.prop],e.value,e=>this.values.level(e,r),t,1).length>0,i=e.inputs.filter(e=>r(e)),a=e.outputs.filter(n),o=(e.properties??[]).filter(e=>r(e)),s=e.directives.map((e,t)=>({...e,index:t,inputs:e.inputs.filter(e=>r(e,t)),outputs:e.outputs.filter(n)})).filter(e=>!t||e.inputs.length||e.outputs.length);return{inputs:i,outputs:a,properties:o,directives:s,count:i.length+a.length+o.length+s.reduce((e,t)=>e+t.inputs.length+t.outputs.length,0)}});valueTotal=X(()=>{let e=this.detail();return e?e.inputs.length+e.outputs.length+(e.properties?.length??0)+e.directives.reduce((e,t)=>e+t.inputs.length+t.outputs.length,0):0});propFilterStatus=X(()=>{if(!this.propQuery())return``;let e=this.shownValues()?.count??0;return e?`${e} of ${this.valueTotal()} values match.`:`No inputs, outputs or properties match.`});clearPropFilter(e){e&&this.propFilter()&&(e.stopPropagation(),e.preventDefault()),this.propFilter.set(``),this.propFilterInput()?.focus()}rovingId=X(()=>{let e=this.rows(),t=new Set(e.map(e=>e.node.id)),n=this.focusId();if(n&&t.has(n))return n;let r=this.selectedId();return r&&t.has(r)?r:e[0]?.node.id??null});outlets=X(()=>{let e=this.page()?.pageId;return this.routerPages().find(t=>t.pageId===e)?.outlets??[]});routedById=X(()=>{let e=new Map,t=n=>{for(let r of n){if(r.activated&&r.devtoolsId){let t=e.get(r.devtoolsId)??[];t.push({route:r.route??``,outlet:r.outlet}),e.set(r.devtoolsId,t)}r.children&&t(r.children)}};return t(this.outlets()),e});sourceByClass=X(()=>{let e=new Map;for(let t of this.source()){let n=_I(t.className);e.set(n,[...e.get(n)??[],t])}return e});filteredSource=X(()=>{let e=this.query(),t=this.source();return e?t.filter(t=>t.selector.toLowerCase().includes(e)||t.className.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):t});sourceCounts=X(()=>{let e=this.source().filter(e=>e.kind===`component`).length;return{components:e,directives:this.source().length-e}});constructor(){E(()=>{let e=this.treeEl()?.nativeElement;e&&this.rowWindow.attach(e)}),E(()=>{let e=this.detail(),t={rpc:this.rpc(),pageId:this.page()?.pageId??null,componentId:e?.id??null};Z(()=>this.values.follow(t,e?.expanded))}),E(()=>{let e=this.page()?.pageId??null;Z(()=>{this.picking()&&e!==this.pickPageId&&this.dropPick()})}),E(()=>{let e=this.detail(),t=e?`${this.page()?.pageId??``}|${e.id}`:null,n=new Map;for(let t of e?.inputs??[])n.set(dj(`input`,t.name),t.value);for(let t of e?.properties??[])n.set(dj(`property`,t.name),t.value);e?.directives.forEach((e,t)=>{for(let r of e.inputs)n.set(dj(`directive`,r.name,t),r.value)}),Z(()=>this.flash.update(t,n))}),this.destroyRef.onDestroy(()=>this.flash.clear()),E(()=>{let e=this.rpc();e&&(this.refresh(),this.watch(e))}),E(()=>{let e=this.focus();if(!e)return;let t=this.page()?.pageId??null;if(e.pageId&&t!==e.pageId&&this.pages()[e.pageId]){Z(()=>this.selectPage(e.pageId));return}this.live()&&Z(()=>{(!e.pageId||t===e.pageId)&&this.index().map.has(e.id)?this.reveal(e.id):this.announcement.set(`That component is no longer on the page.`),this.focusHandled.emit()})}),E(()=>{let e=this.command();if(!e)return;if(!this.live()){this.pagesKnown()&&Z(()=>this.commandHandled.emit());return}if(e.kind===`pick`){Z(()=>{this.picking()||this.pick(),this.commandHandled.emit()});return}let t=this.cdRecording();if(!t){(this.native()||this.staticReport())&&Z(()=>{this.say(`This page cannot record change detection.`),this.commandHandled.emit()});return}Z(()=>{e.kind===`cd-clear`?t.clear():e.kind===`cd-start`!==t.recording()&&t.toggle(),this.commandHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.highlight(null);for(let e of this.cleanups.splice(0))e()})}async watch(e){for(let e of this.cleanups.splice(0))e();let t=e.scope(`pangular`);try{let e=await t.rpc.sharedState(`component-tree`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.applyPages(t&&typeof t==`object`?t:{}),e!==void 0&&this.pagesKnown.set(!0)};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.applyPages({}),this.pagesKnown.set(!0)}try{let e=await t.rpc.sharedState(`change-detection`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.cdPages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.cdPages.set({})}try{let e=await t.rpc.sharedState(`leaks`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.leaksPages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.leaksPages.set({})}try{let e=await t.rpc.sharedState(`router`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e?.pages;this.routerPages.set(Array.isArray(t)?t:[])};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.routerPages.set([])}}async refresh(){let e=this.rpc();if(!e)return;this.loading.set(!0);let t=e.scope(`pangular`);try{this.source.set(await t.rpc.call(`get-components`)),this.error.set(!1)}catch{this.error.set(!0)}finally{this.loading.set(!1)}let n=await t.rpc.call(`forms-owners`).catch(()=>[]);this.formOwners.set(n??[])}formsIn(e){return this.formOwners().filter(t=>t.file===e)}whereOf(e){let t=this.detail()?.source;if(t)return t;let n=this.sourceCandidates(e);return n.length===1?n[0]:null}async revealInElements(e){let t=this.page()?.pageId;if(!t)return;this.actionMessage.set(``);let n=await this.bridge.reveal(t,e.id);this.selectedId()===e.id&&this.actionMessage.set(n.ok?``:`Could not reveal it. The component must be rendered in the tab these DevTools inspect.`)}flashed(e,t,n){return this.flash.changed().has(dj(e,t,n))}openSignals(e,t){let n=this.page()?.pageId;this.showSignals.emit({componentId:e.id,...n?{pageId:n}:{},...t?{key:t}:{}})}async copyJson(e){await this.copy(e.id,aj(e),`Copied ${e.name} as JSON.`)}async copyHostPath(e){await this.copy(e.id,oj(e),e.selector?`Copied the host selector.`:`Copied the host path.`)}async copy(e,t,n){let r=n;try{await navigator.clipboard.writeText(t)}catch{r=`The clipboard is not available here.`}this.selectedId()===e&&this.copyMessage.set(r)}openInjector(e){let t=this.page()?.pageId;this.showInjector.emit(t?{componentId:e.id,pageId:t}:{componentId:e.id})}async openSource(e){let t=this.page()?.pageId;if(!t)return;let n=this.whereOf(e);this.actionMessage.set(``);let r=await this.bridge.openSource(t,e.id,n);this.selectedId()===e.id&&(r.ok||this.actionMessage.set(n?`Not found in Sources. Open ${n.file}:${n.line} in your editor.`:`Could not open the source. The component must be rendered in the tab these DevTools inspect.`))}guessTitle=`The page gave no exact location. This comes from the source scan, matched by class name.`;sourceCandidates(e){let t=(this.sourceByClass().get(_I(e.name))??[]).filter(e=>e.kind===`component`),n=t.filter(t=>t.selector===e.tag);return n.length?n:t}sourceFor(e){let t=this.sourceCandidates(e),n=this.detail()?.source;return n?t.find(e=>vI(e.file,n.file))??null:t.length===1?t[0]:null}directiveSources(e){return(this.sourceByClass().get(_I(e))??[]).filter(e=>e.kind===`directive`)}sourceKey(e){return`${e.file}#${e.className}`}sourceLabel(e){return e.selector?e.kind===`component`&&/^[a-z][\w-]*$/i.test(e.selector)?`<${e.selector}>`:e.selector:_I(e.className)}bareName(e){return _I(e)}applyPages(e){let t=document.activeElement,n=t instanceof HTMLElement&&this.host.nativeElement.contains(t)?t.closest(`.row`)?.dataset.id??null:null,r=n?this.rows().map(e=>e.node.id):[],i=this.index().map;if(this.pages.set(e),this.syncSelection(i),!n)return;let a=new Set(this.rows().map(e=>e.node.id));if(a.has(n))return;let o=FD(r,a,n);o&&(this.focusId.set(o),cd(()=>this.rowElement(o)?.focus(),{injector:this.injector}))}syncSelection(e=this.index().map){let t=this.page(),n=ND({...this.selection,selectedId:this.selectedId()},t?{pageId:t.pageId,roots:t.roots,detail:t.detail,truncated:t.truncated}:null),r=n.destroyed?e.get(n.destroyed)?.name:void 0;this.selection={pageId:n.pageId,detailId:n.detailId},n.selectedId!==this.selectedId()&&this.selectedId.set(n.selectedId),n.selectedId&&this.destroyed.set(null),n.destroyed&&(this.destroyed.set(r??`The component`),this.announcement.set(`The selected component was destroyed.`),this.sendSelection(null))}selectPage(e){e&&(this.chosenPageId.set(e),this.destroyed.set(null),this.syncSelection())}setFilter(e){this.filter.set(e);let{matches:t}=this.filtered();this.announcement.set(jD(this.page()?.count??0,t,e,!!this.page()?.truncated,this.shownDirectiveHosts()))}clearFilter(){this.live()?this.setFilter(``):this.filter.set(``),this.filterInput()?.focus()}async pick(){let e=this.rpc();if(!e||this.picking())return;let t=++this.pickSeq;this.pickPageId=this.page()?.pageId??null,this.picking.set(!0),this.say(this.native()?`Tap a component on the device, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.`:`Click a component in the app, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.`);let n=await e.scope(`pangular`).rpc.call(`request-component-pick`,{pageId:this.pickPageId??void 0}).catch(()=>({ok:!1,error:`Could not reach the devtools server.`}));if(t===this.pickSeq){if(this.picking.set(!1),!n?.ok||!n.id){this.say(n?.error??`No component was picked.`);return}n.pageId&&n.pageId!==this.page()?.pageId&&this.selectPage(n.pageId),this.say(`Picked ${n.name??`a component`}.`),this.destroyed.set(null),this.index().map.has(n.id)?this.reveal(n.id):this.selectedId.set(n.id)}}pickKey(e){let t=bI[e.key];if(!this.picking()||!t||e.altKey||e.ctrlKey||e.metaKey)return;e.preventDefault();let n=this.rpc();if(!n)return;let r=this.pickSeq;n.scope(`pangular`).rpc.call(`request-component-pick-move`,{pageId:this.pickPageId??void 0,key:t}).then(e=>{let n=e;r===this.pickSeq&&this.picking()&&t!==`pick`&&this.say(n?.moved?`${n.name??`Component`} <${n.tag??``}>. Press Enter to pick it.`:n?.error??`The page did not move.`)}).catch(()=>{})}cancelPick(){let e=this.rpc();e&&this.picking()&&e.scope(`pangular`).rpc.call(`cancel-component-pick`,{pageId:this.pickPageId??void 0}).catch(()=>{})}dropPick(){this.cancelPick(),this.pickSeq++,this.picking.set(!1),this.say(`Picking stopped because the page changed.`)}say(e){this.pickMessage.set(e),this.announce(e)}sendSelection(e){let t=this.rpc();t&&t.scope(`pangular`).rpc.call(`select-component`,{pageId:this.page()?.pageId,id:e,console:!0}).catch(()=>{})}rowElement(e){return this.host.nativeElement.querySelector(`.row[data-id="${CSS.escape(e)}"]`)}select(e){let t=this.selectedId()===e?null:e;this.selectedId.set(t),this.destroyed.set(null),this.focusId.set(e),!(t&&this.index().map.get(t)?.kind===`directive`)&&this.sendSelection(t)}hostLabel(e){return DD(e)}hydrationText(e){return kD(e)}ownerOf(e){let{map:t,parents:n}=this.index();for(let r of yI(n,e)){let e=t.get(r);if(e&&e.kind!==`directive`)return e}return null}toggleDirectiveHosts(){let e=!this.showDirectiveHosts();this.showDirectiveHosts.set(e);try{localStorage.setItem(xI,e?`shown`:`hidden`)}catch{}let t=this.selectedId();!e&&t&&!this.index().map.has(t)&&this.selectedId.set(null),this.announce(e?`Directive hosts are shown.`:`Directive hosts are hidden.`)}setHydrationOverlay(e){let t=this.rpc(),n=this.page()?.pageId;t&&n&&(t.scope(`pangular`).rpc.call(`request-hydration-overlay`,{pageId:n,on:e}).catch(()=>{}),this.announce(e?`Outlining hydration on the page.`:`Hydration outline removed.`))}revealNode(e){this.index().map.has(e)&&this.reveal(e)}showLeakComponent(e){this.index().map.has(e)&&this.reveal(e,!0)}reveal(e,t=!1){let{parents:n}=this.index();this.collapsed.update(t=>{let r=new Set(t);for(let t of yI(n,e))r.delete(t);return r}),this.rows().some(t=>t.node.id===e)||this.setFilter(``),this.selectedId()!==e&&this.select(e),t&&this.focusId.set(e);let r=this.rows().findIndex(t=>t.node.id===e);r>=0&&this.rowWindow.reveal(r),cd(()=>{let n=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);this.clearToolbar(),n?.scrollIntoView({block:`nearest`}),n&&this.keepBelowToolbar(n),t&&n?.focus({preventScroll:!0})},{injector:this.injector})}clearToolbar(){let e=this.host.nativeElement.querySelector(`.toolbar`);e&&this.host.nativeElement.style.setProperty(`--ct-toolbar-clearance`,`${HN(e)}px`)}keepBelowToolbar(e){let t=this.host.nativeElement.querySelector(`.toolbar`);t&&UN(e,t)}toggle(e,t){t?.stopPropagation(),!this.query()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}expandAll(){this.query()||(this.collapsed.set(new Set),this.announce(`Expanded every component.`))}collapseAll(){if(this.query())return;let{map:e,parents:t}=this.index(),n=this.rovingId(),r=new Set;for(let t of e.values())t.children.length&&r.add(t.id);if(this.collapsed.set(r),n){let e=new Set(this.rows().map(e=>e.node.id)),r=n;for(;r&&!e.has(r);)r=t.get(r);r&&this.focusId.set(r)}this.announce(`Collapsed every component. Only the top level is shown.`)}announce(e){this.announcement.update(t=>t===e?`${e}\u00a0`:e)}expandSiblings(e){if(this.query())return;let t=this.index().parents.get(e),n=t?this.index().map.get(t)?.children??[]:this.page()?.roots??[];this.collapsed.update(e=>{let t=new Set(e);for(let e of n)t.delete(e.id);return t})}showNameTip(e){let t=e.currentTarget,n=Array.from(t.querySelectorAll(`.name, .tag, .host-dirs`));if(!n.some(e=>e.scrollWidth>e.clientWidth+1)){this.nameTip.set(null);return}let r=n.map(e=>e.title||e.textContent?.trim()).join(` `);this.nameTip.set({text:r,top:t.offsetTop+t.offsetHeight+2})}highlight(e){this.requestHighlight(e?{id:e}:null)}highlightBlock(e){e.rootIds.length>1?this.requestHighlight({ids:e.rootIds}):this.highlight(e.rootIds[0]??e.owner?.id??null)}requestHighlight(e){let t=this.rpc();t&&t.scope(`pangular`).rpc.call(`request-page-highlight`,e&&{pageId:this.page()?.pageId,...e}).catch(()=>{})}showOwner(e){e.owner&&this.index().map.has(e.owner.id)&&this.reveal(e.owner.id)}showCdComponent(e){let t=this.cdHosts(),n=null;for(let r of this.index().map.values())r.name===e&&(!n||(t[r.id]??0)>(t[n.id]??0))&&(n=r);if(!n){this.say(`No ${e} is in the tree now.`);return}this.say(`Showing ${e} in the tree.`),this.reveal(n.id)}showForOwner(e){e.owner&&this.index().map.has(e.owner.id)&&this.reveal(e.owner.id)}onTreeKey(e){let t=this.rows();if(!t.length)return;let n=t.findIndex(e=>e.node.id===this.rovingId()),r=Math.max(n,0),i=t[r],a=-1;switch(e.key){case`ArrowDown`:a=Math.min(r+1,t.length-1);break;case`ArrowUp`:a=Math.max(r-1,0);break;case`Home`:a=0;break;case`End`:a=t.length-1;break;case`ArrowRight`:i.hasChildren&&!i.expanded?this.toggle(i.node.id):i.hasChildren&&(a=r+1);break;case`ArrowLeft`:if(i.hasChildren&&i.expanded&&!this.query())this.toggle(i.node.id);else{let e=this.index().parents.get(i.node.id);a=t.findIndex(t=>t.node.id===e)}break;case`Enter`:case` `:this.select(i.node.id);break;case`*`:this.expandSiblings(i.node.id);break;default:return}if(e.preventDefault(),a>=0){let e=t[a].node.id;this.focusId.set(e);let n=()=>{let t=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);this.clearToolbar(),t?.focus({preventScroll:!0}),t?.scrollIntoView({block:`nearest`}),t&&this.keepBelowToolbar(t)};this.rowWindow.rendered(a)?queueMicrotask(n):this.rowWindow.reveal(a,n)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-component-tree`]],viewQuery:function(e,t){e&1&&Mg(t.filterInput,oP,5)(t.cdRecording,nj,5)(t.treeEl,sP,5)(t.propFilterInput,cP,5),e&2&&Ng(4)},hostBindings:function(e,t){e&1&&H(`keydown.escape`,function(){return t.cancelPick()})(`keydown`,function(e){return t.pickKey(e)})},inputs:{rpc:[1,`rpc`],focus:[1,`focus`],command:[1,`command`],canShowInjector:[1,`canShowInjector`],canShowPipes:[1,`canShowPipes`],canShowSignals:[1,`canShowSignals`]},outputs:{showForm:`showForm`,focusHandled:`focusHandled`,commandHandled:`commandHandled`,showPipe:`showPipe`,showInjector:`showInjector`,showSignals:`showSignals`},decls:4,vars:1,consts:[[`directiveSource`,``],[`filterInput`,``],[`treeEl`,``],[`propFilterInput`,``],[1,`intro`],[1,`toolbar`],[`placeholder`,`Filter by text, <tag> or [directive]`,`describedBy`,`ct-filter-hint`,`saveKey`,`components`,1,`search`,3,`valueChange`,`value`],[`id`,`ct-filter-hint`,1,`sr-only`],[1,`count`],[1,`tree-actions`],[`type`,`button`,`title`,`Directive hosts`,1,`tree-action`],[`type`,`button`,`title`,`Expand all`,1,`tree-action`,3,`click`,`disabled`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`m7 15 5 5 5-5`],[`d`,`m7 9 5-5 5 5`],[1,`label`],[`type`,`button`,`title`,`Collapse all`,1,`tree-action`,3,`click`,`disabled`],[`d`,`m7 20 5-5 5 5`],[`d`,`m7 4 5 5 5-5`],[`type`,`button`,1,`pick`,3,`click`],[`d`,`M4 4l6.5 16 2.3-6.7L19.5 11z`],[`role`,`status`,1,`sr-only`],[1,`pick-message`],[`role`,`status`,1,`notice`],[1,`layout`],[1,`tree-col`],[1,`sr-only`],[1,`state`,`compact`,`tree`],[1,`window-note`],[`role`,`tree`,`aria-label`,`Component instances`,1,`tree`,3,`keydown`,`hidden`],[`role`,`treeitem`,1,`row`,3,`selected`,`dir-host`,`--%NS%depth`],[`aria-hidden`,`true`,1,`name-tip`,`mono`,3,`top`],[`aria-labelledby`,`ct-detail-title`,1,`detail`],[1,`detail`,`placeholder`],[3,`showOwner`,`showNode`,`highlight`,`blocks`,`truncated`,`clockOffset`,`mismatches`],[`capability`,`deferBlocks`,`compact`,``,1,`defer`,3,`page`],[3,`report`],[3,`showOwner`,`highlight`,`blocks`,`truncated`,`supported`,`angular`],[`id`,`ct-page-label`,1,`sr-only`],[`labelledBy`,`ct-page-label`,1,`page-select`,3,`valueChange`,`options`,`value`],[`type`,`button`,`title`,`Directive hosts`,1,`tree-action`,3,`click`],[`d`,`M8 4H5v16h3`],[`d`,`M16 4h3v16h-3`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`keydown.escape`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[3,`class`],[1,`routed`],[1,`checks`],[1,`dirs`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`m9 6 6 6-6 6`],[1,`tag`,`host-tag`,`mono`],[1,`host-dirs`,`mono`],[1,`name`,`mono`],[1,`tag`,`mono`],[`aria-hidden`,`true`,1,`name-tip`,`mono`],[1,`detail-head`],[1,`badge`],[`id`,`ct-detail-title`,1,`mono`],[1,`mono`,`muted`],[1,`block`],[1,`pill`],[1,`chips`],[1,`chip`,`mono`],[1,`empty-line`],[1,`actions`,`owner-action`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[1,`where`,`mono`],[1,`actions`],[1,`console-global`,3,`rpc`,`pageId`,`target`,`label`],[`role`,`status`,1,`state`,`compact`],[3,`file`,`line`],[1,`where`,`mono`,`guess`,3,`title`],[1,`where`,`guess`,3,`title`],[1,`likely`],[1,`guess-text`],[1,`guess-list`,`mono`],[`role`,`group`,`aria-label`,`Chrome DevTools`,1,`actions`],[`role`,`status`,1,`where`,`action-message`],[`type`,`button`,1,`show-form`],[`type`,`button`,1,`show-form`,3,`click`],[`type`,`button`],[`role`,`group`,`aria-label`,`Copy`,1,`actions`],[1,`facts`],[1,`mono`],[1,`prop-filter`],[`label`,`Filter values`,`placeholder`,`Filter inputs, outputs and properties by name`,1,`search`,3,`valueChange`,`value`],[1,`deps`],[3,`rpc`,`pageId`,`component`,`canShowPipes`],[3,`value`],[1,`state`,`compact`],[1,`props`],[1,`prop`,3,`changed`],[1,`prop`],[1,`prop-name`,`mono`],[1,`muted`],[3,`prop`,`store`,`query`,`componentId`,`pageId`,`rpc`,`writes`],[1,`chip`,3,`on`],[1,`chip`],[1,`chip-note`],[1,`flag`],[`type`,`button`,1,`signal-link`],[`type`,`button`,1,`signal-link`,3,`click`],[1,`directive-where`,`mono`],[3,`prop`,`store`,`query`,`directive`,`componentId`,`pageId`,`rpc`],[1,`dep`],[1,`token`,`mono`],[1,`from`],[1,`from`,`missing`],[3,`showPipe`,`rpc`,`pageId`,`component`,`canShowPipes`],[`aria-hidden`,`true`,1,`spinner`],[3,`overlay`,`showNode`,`highlight`,`report`],[3,`showComponent`,`page`,`pageId`,`rpc`,`native`],[3,`showComponent`,`highlight`,`report`,`pageId`,`rpc`,`angular`],[1,`notice`],[`placeholder`,`Filter by selector, class or file`,`saveKey`,`components-source`,1,`search`,3,`valueChange`,`value`],[`aria-live`,`polite`,1,`count`],[`type`,`button`,1,`refresh`,3,`click`],[`d`,`M20 12a8 8 0 1 1-2.34-5.66`],[`d`,`M20 4v5h-5`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[1,`state`],[`role`,`list`,1,`source-list`],[1,`source-item`,3,`expanded`],[1,`source-item`],[`type`,`button`,1,`source-toggle`,3,`click`],[1,`kind-flag`],[1,`row-main`],[1,`selector`,`mono`],[1,`file`,`mono`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[1,`inline-detail`,3,`id`],[1,`directive-guess`,3,`title`],[1,`chip-note`,3,`title`]],template:function(e,t){e&1&&(A(0,qF,52,36)(1,fI,17,7),jh(2,hI,3,2,`ng-template`,null,0,tv)),e&2&&j(+!t.live())},dependencies:[$N,aP,Zv,wD,nj,bj,gM,CM,qM,iN,qD,FN,dD,iD],styles:[`[_nghost-%COMP%] {
-  display: block;
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.intro[_ngcontent-%COMP%] {
-  max-width: 720px;
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  padding: 10px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin: 0 0 12px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: 34px;
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-}
-
-input[type=search][_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[type=search][_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.count[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: 34px;
-  padding: 0 14px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-button[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.refresh.spinning[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  animation: spin 0.8s linear infinite;
-}
-
-.page-select[_ngcontent-%COMP%] {
-  flex: 0 1 220px;
-  min-width: 0;
-}
-
-.tree-action[_ngcontent-%COMP%]:disabled, 
-.tree-action[_ngcontent-%COMP%]:disabled:hover {
-  background: var(--%NS%surface-2);
-  border-color: var(--%NS%border-strong);
-  opacity: 0.5;
-}
-
-.pick.on[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%text-strong);
-}
-
-.defer[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.pick-message[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.layout[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 12px;
-  align-items: start;
-}
-
-@media (min-width: 880px) {
-  .layout[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
-  }
-  .detail[_ngcontent-%COMP%] {
-    position: sticky;
-    top: 64px;
-    max-height: calc(100vh - 150px);
-    overflow: auto;
-  }
-}
-.tree[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 6px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.window-note[_ngcontent-%COMP%] {
-  margin: 0 0 6px;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.tree.windowed[_ngcontent-%COMP%]   .row[_ngcontent-%COMP%] {
-  height: 32px;
-  overflow: hidden;
-}
-
-.row[_ngcontent-%COMP%] {
-  position: relative;
-  scroll-margin-top: var(--%NS%ct-toolbar-clearance, 72px);
-  scroll-margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-height: 32px;
-  padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px);
-  border-radius: var(--%NS%radius-sm);
-  cursor: pointer;
-  transition: background-color 120ms var(--%NS%ease);
-}
-
-.row[_ngcontent-%COMP%]::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 14px;
-  width: calc(var(--%NS%depth, 0) * 18px);
-  background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px);
-  pointer-events: none;
-}
-
-.row[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.row.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.twisty[_ngcontent-%COMP%], 
-.twisty-space[_ngcontent-%COMP%] {
-  flex: none;
-  width: 20px;
-  height: 20px;
-}
-
-.twisty[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  border-radius: 4px;
-  color: var(--%NS%text-3);
-}
-
-.twisty[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-  background: var(--%NS%surface-3);
-}
-
-.twisty[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: transform 150ms var(--%NS%ease);
-}
-
-.twisty.open[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  transform: rotate(90deg);
-}
-
-.name[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tag[_ngcontent-%COMP%] {
-  flex: 0 1 auto;
-  min-width: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.routed[_ngcontent-%COMP%] {
-  flex: none;
-  max-width: 40%;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%accent-line);
-  border-radius: 99px;
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  line-height: 18px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.checks[_ngcontent-%COMP%] {
-  flex: none;
-  margin-left: auto;
-  padding: 0 7px;
-  border-radius: 99px;
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text);
-  font-size: 11px;
-  line-height: 18px;
-  font-variant-numeric: tabular-nums;
-}
-
-.checks[_ngcontent-%COMP%]    + .dirs[_ngcontent-%COMP%] {
-  margin-left: 0;
-}
-
-.row.dir-host[_ngcontent-%COMP%]   .host-tag[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.host-dirs[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-style: italic;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.row.dir-host[_ngcontent-%COMP%]   .twisty-space[_ngcontent-%COMP%], 
-.row.dir-host[_ngcontent-%COMP%]   .twisty[_ngcontent-%COMP%] {
-  border-left: 1px dashed var(--%NS%border-strong);
-}
-
-.hyd[_ngcontent-%COMP%] {
-  flex: none;
-  padding: 0 7px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.hyd-skipped[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.hyd-mismatched[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tree-action[aria-pressed=true][_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%text-strong);
-}
-
-
-
-.tree-actions[_ngcontent-%COMP%] {
-  display: contents;
-}
-
-@media (max-width: 600px) {
-  .toolbar[_ngcontent-%COMP%] {
-    gap: 8px;
-  }
-  .search[_ngcontent-%COMP%] {
-    flex-basis: 100%;
-  }
-  .toolbar[_ngcontent-%COMP%]:has(.page-select)   .search[_ngcontent-%COMP%] {
-    flex-basis: 160px;
-  }
-  .page-select[_ngcontent-%COMP%] {
-    flex: 1 1 120px;
-  }
-  .count[_ngcontent-%COMP%] {
-    flex: 1 1 80px;
-    min-width: 0;
-    white-space: normal;
-    line-height: 1.3;
-  }
-  .tree-actions[_ngcontent-%COMP%] {
-    display: flex;
-    flex: none;
-    gap: 8px;
-    margin-left: auto;
-  }
-  .tree-action[_ngcontent-%COMP%], 
-   .pick[_ngcontent-%COMP%] {
-    flex: none;
-    width: var(--%NS%control-h);
-    padding: 0;
-  }
-  .tree-action[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%], 
-   .pick[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-}
-.tree-col[_ngcontent-%COMP%] {
-  position: relative;
-  min-width: 0;
-}
-
-.name-tip[_ngcontent-%COMP%] {
-  position: absolute;
-  z-index: 1;
-  left: 8px;
-  max-width: calc(100% - 16px);
-  padding: 4px 8px;
-  background: var(--%NS%surface-3);
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  box-shadow: var(--%NS%shadow);
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  line-height: 1.4;
-  overflow-wrap: anywhere;
-  pointer-events: none;
-  animation: enter 150ms var(--%NS%ease) both;
-}
-
-.owner-action[_ngcontent-%COMP%] {
-  margin-top: 10px;
-}
-
-.dirs[_ngcontent-%COMP%] {
-  flex: none;
-  margin-left: auto;
-  padding: 0 7px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 18px;
-}
-
-.detail[_ngcontent-%COMP%] {
-  min-width: 0;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.detail.placeholder[_ngcontent-%COMP%] {
-  padding: 24px 16px;
-  border-style: dashed;
-  text-align: center;
-}
-
-.detail-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 10px;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.where[_ngcontent-%COMP%] {
-  width: 100%;
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.directive-where[_ngcontent-%COMP%] {
-  margin: -4px 0 8px;
-  font-size: 12px;
-}
-
-.directive-where[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.directive-guess[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--%NS%font-sans);
-}
-
-.likely[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin-right: 6px;
-  padding: 0 6px;
-  border: 1px solid;
-  border-radius: 99px;
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-  font-family: var(--%NS%font-sans);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  line-height: 16px;
-  text-transform: uppercase;
-  vertical-align: 1px;
-}
-
-.guess-text[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.guess-list[_ngcontent-%COMP%] {
-  margin: 4px 0 0;
-  padding-left: 18px;
-}
-
-.badge[_ngcontent-%COMP%] {
-  padding: 2px 8px;
-  border-radius: 99px;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  width: 100%;
-}
-
-.show-form[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.show-form[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 8px 16px;
-  margin: 0;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  align-self: center;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.block[_ngcontent-%COMP%] {
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.block[_ngcontent-%COMP%]:last-child {
-  border-bottom: 0;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 8px;
-}
-
-.pill[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-}
-
-.props[_ngcontent-%COMP%], 
-.deps[_ngcontent-%COMP%], 
-.chips[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.prop[_ngcontent-%COMP%], 
-.dep[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-}
-
-.prop.changed[_ngcontent-%COMP%] {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -1px;
-  animation: _ngcontent-%COMP%_value-flash 1s var(--%NS%ease) forwards;
-}
-
-@keyframes _ngcontent-%COMP%_value-flash {
-  from {
-    outline-color: var(--%NS%accent);
-  }
-  to {
-    outline-color: transparent;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .prop.changed[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-.signal-link[_ngcontent-%COMP%] {
-  height: auto;
-  min-height: 0;
-  margin-left: 6px;
-  padding: 0 6px;
-  font-family: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-}
-
-.signal-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.prop-name[_ngcontent-%COMP%] {
-  display: block;
-  margin-bottom: 4px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-pre[_ngcontent-%COMP%] {
-  max-height: 200px;
-  margin: 0;
-  overflow: auto;
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 10px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.chip.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.chip-note[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.chip.on[_ngcontent-%COMP%]   .chip-note[_ngcontent-%COMP%] {
-  color: inherit;
-}
-
-.dep[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 8px;
-}
-
-.token[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.flag[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 5px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 10px;
-  font-weight: 400;
-  letter-spacing: 0;
-  line-height: 16px;
-  text-transform: none;
-}
-
-.from[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.from[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.from.missing[_ngcontent-%COMP%] {
-  color: var(--%NS%warn);
-}
-
-.empty-line[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.state[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 40px 16px;
-  text-align: center;
-  background: var(--%NS%surface);
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius);
-}
-
-.state.compact[_ngcontent-%COMP%] {
-  padding: 24px 12px;
-  border: 0;
-  background: none;
-}
-
-.state-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.state-hint[_ngcontent-%COMP%] {
-  max-width: 440px;
-  margin: 0 auto;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner[_ngcontent-%COMP%], 
-   .refresh.spinning[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-.source-list[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.source-item[_ngcontent-%COMP%] {
-  min-width: 0;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  overflow: hidden;
-}
-
-.source-item.expanded[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.source-toggle[_ngcontent-%COMP%] {
-  justify-content: flex-start;
-  gap: 12px;
-  width: 100%;
-  height: auto;
-  min-height: 52px;
-  padding: 10px 16px;
-  background: none;
-  border: 0;
-  border-radius: 0;
-  text-align: left;
-}
-
-.source-toggle[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.source-toggle[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.kind-flag[_ngcontent-%COMP%] {
-  flex: none;
-  padding: 1px 8px;
-  border-radius: 99px;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.kind-flag.directive[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.row-main[_ngcontent-%COMP%] {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.selector[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chevron[_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  transition: transform 200ms var(--%NS%ease);
-}
-
-.expanded[_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
-  transform: rotate(90deg);
-  stroke: var(--%NS%accent);
-}
-
-.inline-detail[_ngcontent-%COMP%] {
-  padding: 0 0 12px;
-  border-top: 1px solid var(--%NS%border);
-}
-
-.inline-detail[_ngcontent-%COMP%]   .facts[_ngcontent-%COMP%] {
-  border-bottom: 0;
-}
-
-.inline-detail[_ngcontent-%COMP%]   .show-form[_ngcontent-%COMP%] {
-  margin: 0 16px;
-}`]})};function wI(e){return e.line?`${e.file}:${e.line}`:e.file}function TI(e,t){let n=t.filter(t=>t.fullPath===e.fullPath&&t.redirectTo!==void 0==(e.redirectTo!==void 0));return n.find(t=>!!e.component&&t.component===e.component)??n.find(t=>!t.component||!e.component)}function EI(e){return e?.apps&&e.apps.length>1?e.apps:[]}function DI(e,t){let n=EI(e).find(e=>e.id===t);return n?n.primary?{...e,appId:n.id}:{pageId:e.pageId,reportedAt:e.reportedAt,changedAt:e.changedAt,snapshot:n.snapshot??null,navigations:n.navigations??[],dropped:n.dropped,generation:n.generation,config:n.config,configTruncated:n.configTruncated,activeIds:n.activeIds,setup:n.setup,outlets:n.outlets,links:n.links,linksTruncated:n.linksTruncated,linksUnchecked:n.linksUnchecked,preloads:n.preloads,instrumented:e.instrumented,loops:n.loops,apps:e.apps,appId:n.id}:e}var OI=sT;function kI(e){return e.startsWith(`/`)&&!e.startsWith(`//`)&&!/^\/*[a-z][a-z0-9+.-]*:/i.test(e)&&!e.includes(`[redacted]`)&&e.length<=2e3}var AI=`Could not reach the page.`;async function jI(e,t,n,r){return await OI(e,`request-router-action`,{pageId:t,...r?{app:r}:{},request:n})??{error:`Could not reach the page.`}}function MI(e){return e===`succeeded`?`good`:e===`redirected`||e===`pending`||e===`skipped`?`warn`:e===`cancelled`||e===`failed`?`bad`:``}var NI=()=>[],PI=(e,t)=>t[0],FI=(e,t)=>t.input;function II(e,t){if(e&1&&(R(0,`p`,3),K(1,` The browser shows `),R(2,`code`),K(3),z(),K(4,`, not the router URL (skipLocationChange, browserUrl, a failed navigation or code that changed history). `),z()),e&2){let e=W();D(3),q(e.browserUrl)}}function LI(e,t){if(e&1&&(R(0,`p`,13),K(1),z()),e&2){let e=W(3);D(),q(e.navigationOff)}}function RI(e,t){if(e&1){let e=B();R(0,`div`,9),dg(1,`span`,10),R(2,`span`,11),K(3,`Navigating to `),R(4,`code`),K(5),z(),K(6),z(),R(7,`button`,12),U(`click`,function(){return S(e),C(W(2).abort())}),K(8,` Abort `),z()(),A(9,LI,2,1,`p`,13)}if(e&2){let e=t,n=W(2);D(5),q(e.url),D(),J(` (#`,e.id,`)`),D(),V(`disabled`,!n.navigationAllowed()),k(`aria-describedby`,n.navigationAllowed()?null:`route-current-writes-off`),D(2),j(n.navigationAllowed()?-1:9)}}function zI(e,t){if(e&1&&(R(0,`p`,4),K(1),z()),e&2){let e=W(2);D(),q(e.message())}}function BI(e,t){if(e&1&&(R(0,`dt`),K(1,`Document title`),z(),R(2,`dd`),K(3),z()),e&2){let e=W();D(3),q(e.title)}}function VI(e,t){if(e&1&&(R(0,`dt`),K(1,`Query params`),z(),R(2,`dd`)(3,`code`),K(4),Z_(5,`json`),z()()),e&2){let e=W();D(4),q(Q_(5,1,e.queryParams))}}function HI(e,t){if(e&1&&(R(0,`dt`),K(1,`Fragment`),z(),R(2,`dd`)(3,`code`),K(4),z()()),e&2){let e=W();D(4),q(e.fragment)}}function UI(e,t){if(e&1&&(R(0,`span`,15),K(1),z()),e&2){let e=W().$implicit;D(),J(`, `,e.nesting)}}function WI(e,t){if(e&1&&(R(0,`span`,16),K(1),z()),e&2){let e=W().$implicit;D(),q(e.route.outlet)}}function GI(e,t){e&1&&(R(0,`span`,16),K(1,`lazy`),z())}function KI(e,t){if(e&1&&(R(0,`div`,17),K(1),z()),e&2){let e=W().$implicit;D(),Y(` title `,e.route.title,``,e.route.ownTitle===!1?` (inherited)`:``,` `)}}function qI(e,t){if(e&1&&(R(0,`code`,18),K(1),z()),e&2){let e=W().$implicit;D(),q(e.route.component)}}function JI(e,t){e&1&&(R(0,`span`,21),K(1,`–`),z(),R(2,`span`,15),K(3,`none`),z())}function YI(e,t){e&1&&(R(0,`span`,16),K(1,`inherited`),z())}function XI(e,t){if(e&1&&(R(0,`div`,19)(1,`code`),K(2),Z_(3,`json`),z(),A(4,YI,2,0,`span`,16),z()),e&2){let e=t.$implicit,n=W().$implicit;D(2),Y(``,e[0],`: `,Q_(3,3,e[1])),D(2),j(n.route.paramSources?.[e[0]]===`inherited`?4:-1)}}function ZI(e,t){e&1&&(R(0,`span`,21),K(1,`–`),z(),R(2,`span`,15),K(3,`none`),z())}function QI(e,t){e&1&&(R(0,`span`,16),K(1),z()),e&2&&(D(),q(t))}function $I(e,t){if(e&1&&(R(0,`div`,20)(1,`code`),K(2),Z_(3,`json`),z(),A(4,QI,2,1,`span`,16),z()),e&2){let e,n=t.$implicit,r=W().$implicit;D(2),Y(``,n[0],`: `,Q_(3,3,n[1])),D(2),j((e=r.route.dataSources?.[n[0]])?4:-1,e)}}function eL(e,t){e&1&&(R(0,`span`,21),K(1,`–`),z(),R(2,`span`,15),K(3,`none`),z())}function tL(e,t){if(e&1&&(R(0,`span`,16),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function nL(e,t){if(e&1&&(R(0,`span`,16),K(1),z()),e&2){let e=t.$implicit;D(),J(`resolve `,e)}}function rL(e,t){e&1&&(R(0,`span`,21),K(1,`–`),z(),R(2,`span`,15),K(3,`none`),z())}function iL(e,t){if(e&1&&(R(0,`tr`)(1,`td`,14),K(2),A(3,UI,2,1,`span`,15),A(4,WI,2,1,`span`,16),A(5,GI,2,0,`span`,16),A(6,KI,2,2,`div`,17),z(),R(7,`td`),A(8,qI,2,1,`code`,18)(9,JI,4,0),z(),R(10,`td`),M(11,XI,5,5,`div`,19,PI,!1,ZI,4,0),z(),R(14,`td`),M(15,$I,5,5,`div`,20,PI,!1,eL,4,0),z(),R(18,`td`),M(19,tL,2,1,`span`,16,eg),M(21,nL,2,1,`span`,16,eg),A(23,rL,4,0),z()()),e&2){let e=t.$implicit,n=W(2);D(),t_(`padding-left`,14+e.depth*16,`px`),D(),J(` `,e.label,` `),D(),j(e.nesting?3:-1),D(),j(e.route.outlet===`primary`?-1:4),D(),j(e.route.lazy?5:-1),D(),j(e.route.title?6:-1),D(2),j(e.route.component?8:9),D(3),N(n.entries(e.route.params)),D(4),N(n.entries(e.route.data)),D(4),N(n.guardList(e.route)),D(2),N(e.route.resolvers??G_(11,NI)),D(2),j(!n.guardList(e.route).length&&!e.route.resolvers?.length?23:-1)}}function aL(e,t){if(e&1&&(R(0,`span`,15),K(1),z()),e&2){let e=W().$implicit;D(),J(``,e.nesting,`, `)}}function oL(e,t){if(e&1){let e=B();R(0,`button`,27),U(`click`,function(){S(e);let t=W(2).$implicit,n=W(3);return C(n.showComponent.emit({pageId:n.page().pageId,id:t.outlet.devtoolsId}))}),K(1,` Show in Components`),R(2,`span`,15),K(3),z()()}if(e&2){let e=W(2).$implicit;D(3),J(`: `,e.outlet.component??e.outlet.element??`routed component`)}}function sL(e,t){if(e&1&&(R(0,`code`),K(1),z(),K(2,` for `),R(3,`code`),K(4),z(),A(5,oL,4,1,`button`,26)),e&2){let e=W().$implicit,t=W(3);D(),q(e.outlet.component??`?`),D(3),q(e.outlet.route??`?`),D(),j(e.outlet.devtoolsId&&t.componentsOn()?5:-1)}}function cL(e,t){e&1&&(R(0,`span`,24),K(1,`not activated`),z())}function lL(e,t){e&1&&(R(0,`span`,16),K(1,`detached by reuse strategy`),z())}function uL(e,t){if(e&1&&(R(0,`span`,16),K(1),z()),e&2){let e=t.$implicit;D(),Y(`input `,e.input,` ← `,e.source)}}function dL(e,t){if(e&1&&(R(0,`span`,25),K(1,`routerOutletData `),R(2,`code`),K(3),z()()),e&2){let e=W().$implicit;D(3),q(e.outlet.data)}}function fL(e,t){if(e&1&&(R(0,`li`)(1,`span`,16),K(2),z(),A(3,aL,2,1,`span`,15),A(4,sL,6,3)(5,cL,2,0,`span`,24),A(6,lL,2,0,`span`,16),M(7,uL,2,2,`span`,16,FI),A(9,dL,4,1,`span`,25),z()),e&2){let e=t.$implicit,n=W(3);t_(`padding-left`,10+e.depth*16,`px`),D(2),q(e.outlet.outlet),D(),j(e.nesting?3:-1),D(),j(e.outlet.activated?4:5),D(2),j(e.outlet.detached?6:-1),D(),N(n.boundInputs(e.outlet)),D(2),j(e.outlet.data===void 0?-1:9)}}function pL(e,t){if(e&1&&(R(0,`h3`),K(1,`Outlets`),z(),R(2,`ul`,22),M(3,fL,10,7,`li`,23,$h),z()),e&2){let e=W(2);D(3),N(e.outletRows())}}function mL(e,t){if(e&1&&(R(0,`p`,1)(1,`span`,2),K(2,`URL`),z(),R(3,`code`),K(4),z()(),A(5,II,5,1,`p`,3),A(6,RI,10,5),A(7,zI,2,1,`p`,4),R(8,`dl`,5),A(9,BI,4,1),A(10,VI,6,3),A(11,HI,5,1),z(),R(12,`h3`),K(13,`Active routes`),z(),R(14,`div`,6)(15,`table`,7)(16,`thead`)(17,`tr`)(18,`th`,8),K(19,`Route`),z(),R(20,`th`,8),K(21,`Component`),z(),R(22,`th`,8),K(23,`Params`),z(),R(24,`th`,8),K(25,`Data`),z(),R(26,`th`,8),K(27,`Guards and resolvers`),z()()(),R(28,`tbody`),M(29,iL,24,12,`tr`,null,$h),z()()(),A(31,pL,5,0)),e&2){let e,n=t,r=W();D(4),q(n.url),D(),j(n.urlDrift&&n.browserUrl?5:-1),D(),j((e=n.pending)?6:-1,e),D(),j(r.message()?7:-1),D(2),j(n.title?9:-1),D(),j(r.hasKeys(n.queryParams)?10:-1),D(),j(n.fragment?11:-1),D(18),N(r.rows()),D(2),j(r.outletRows().length?31:-1)}}function hL(e,t){e&1&&(R(0,`div`,0)(1,`p`,28),K(2,`This page reports no Router.`),z(),R(3,`p`,24),K(4,` Add `),R(5,`code`),K(6,`provideRouter()`),z(),K(7,` to the app config and navigate once to see the active routes here. `),z()())}function gL(e){return e.component?`${e.component} in the ${e.outlet} outlet`:`the ${e.outlet} outlet`}var _L=class e{page=$.required();rpc=$(null);navigationAllowed=X(()=>OT(this.rpc(),`router`));navigationOff=Mw(`router`);componentsOn=X(()=>TT(this.rpc()).inspectors.components);showComponent=cv();pageId=X(()=>this.page().pageId);message=Q({source:this.pageId,computation:()=>``});rows=X(()=>{let e=[],t=(n,r,i)=>{let a=r===0&&!n.path?`(root)`:`/`+n.path,o=i===void 0?void 0:`level ${r+1}, child of ${i}`;e.push({route:n,depth:r,label:a,nesting:o});for(let e of n.children)t(e,r+1,a)},n=this.page().snapshot?.root;return n&&t(n,0),e});outletRows=X(()=>{let e=[],t=(n,r,i)=>{for(let a of n){let n=i&&`level ${r+1}, inside ${gL(i)}`;e.push({outlet:a,depth:r,nesting:n}),a.children&&t(a.children,r+1,a)}};return t(this.page().outlets??[],0),e});hasKeys(e){return Object.keys(e).length>0}entries(e){return Object.entries(e)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>(t??[]).map(t=>`${e} ${t}`))}boundInputs(e){return(e.inputs??[]).filter(e=>e.source!==`unset`)}async abort(){let e=this.pageId(),t=await jI(this.rpc(),e,{action:`abort`},this.page().appId);e===this.pageId()&&this.message.set(t.error?String(t.error):`Aborted navigation #${t.aborted}.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-current`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},outputs:{showComponent:`showComponent`},decls:2,vars:1,consts:[[1,`empty`],[1,`url`],[1,`url-label`],[`role`,`note`,1,`note`],[`role`,`status`,1,`muted`],[1,`facts`],[`role`,`region`,`aria-label`,`Active routes`,`tabindex`,`0`,1,`table-scroll`],[1,`active-routes`],[`scope`,`col`],[`role`,`status`,1,`pending`],[`aria-hidden`,`true`,1,`pulse`],[1,`pending-text`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`route-current-writes-off`,1,`muted`],[1,`path`],[1,`visually-hidden`],[1,`tag`],[1,`sub`],[1,`component`],[1,`entry`],[1,`entry`,`data`],[`aria-hidden`,`true`,1,`nil`],[1,`outlets`],[3,`padding-left`],[1,`muted`],[1,`outlet-data`],[`type`,`button`,1,`small`,`show-component`],[`type`,`button`,1,`small`,`show-component`,3,`click`],[1,`empty-title`]],template:function(e,t){if(e&1&&A(0,mL,32,8)(1,hL,8,0,`div`,0),e&2){let e;j((e=t.page().snapshot)?0:1,e)}},dependencies:[$v],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-}
-
-.url[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  min-width: 0;
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-}
-
-.url-label[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.url[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%accent);
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.pending[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  padding: 6px 6px 6px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%warn-text);
-  font-size: 13px;
-}
-
-.pending-text[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.pending[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.pulse[_ngcontent-%COMP%] {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 99px;
-  background: var(--%NS%warn);
-  animation: _ngcontent-%COMP%_pulse 1.2s ease-in-out infinite;
-}
-
-@keyframes _ngcontent-%COMP%_pulse {
-  50% {
-    opacity: 0.35;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .pulse[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-.sub[_ngcontent-%COMP%] {
-  margin-top: 4px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-sans);
-  font-size: 12px;
-  white-space: normal;
-}
-
-.component[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  white-space: nowrap;
-}
-
-
-
-.active-routes[_ngcontent-%COMP%] {
-  min-width: 760px;
-}
-
-.active-routes[_ngcontent-%COMP%]   .data[_ngcontent-%COMP%] {
-  min-width: 220px;
-}
-
-.entry[_ngcontent-%COMP%]    + .entry[_ngcontent-%COMP%] {
-  margin-top: 2px;
-}
-
-.data[_ngcontent-%COMP%] {
-  max-width: 360px;
-}
-
-.outlets[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  margin: 0;
-  padding: 6px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font-size: 13px;
-  list-style: none;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.outlets[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  padding-top: 6px;
-  padding-right: 10px;
-  padding-bottom: 6px;
-  border-radius: var(--%NS%radius-sm);
-  line-height: 1.8;
-  overflow-wrap: anywhere;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-.outlets[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.show-component[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  vertical-align: middle;
-}
-
-.outlet-data[_ngcontent-%COMP%] {
-  display: block;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}`]})},vL=(e,t)=>t.title,yL=(e,t)=>t.field;function bL(e,t){e&1&&(F(0,`div`,1)(1,`p`,2),K(2,`Two navigations are needed to compare.`),I(),F(3,`p`,3),K(4,`Navigate in the app, then come back to this view.`),I()())}function xL(e,t){if(e&1&&(F(0,`p`,10),K(1),I()),e&2){let e=W();D(),q(e.error)}}function SL(e,t){if(e&1&&(F(0,`p`,10),K(1),I()),e&2){let e=W(2);D(),Y(`Nothing recorded differs between #`,e.a,` and #`,e.b,`.`)}}function CL(e,t){if(e&1&&(F(0,`code`),K(1),I()),e&2){let e=W().$implicit;D(),q(e.before)}}function wL(e,t){e&1&&(F(0,`span`,16),K(1,`none`),I())}function TL(e,t){if(e&1&&(F(0,`code`),K(1),I()),e&2){let e=W().$implicit;D(),q(e.after)}}function EL(e,t){e&1&&(F(0,`span`,16),K(1,`none`),I())}function DL(e,t){if(e&1&&(F(0,`tr`)(1,`th`,15),K(2),I(),F(3,`td`),A(4,CL,2,1,`code`)(5,wL,2,0,`span`,16),I(),F(6,`td`),A(7,TL,2,1,`code`)(8,EL,2,0,`span`,16),I()()),e&2){let e=t.$implicit;D(2),q(e.field),D(2),j(e.before===void 0?5:4),D(3),j(e.after===void 0?8:7)}}function OL(e,t){if(e&1&&(F(0,`div`,11)(1,`h3`,12),K(2),I(),F(3,`div`,13)(4,`table`)(5,`thead`)(6,`tr`)(7,`th`,14),K(8,`Field`),I(),F(9,`th`,14),K(10),I(),F(11,`th`,14),K(12),I()()(),F(13,`tbody`),M(14,DL,9,3,`tr`,null,yL),I()()()()),e&2){let e=t.$implicit,n=t.$index,r=W(2);D(),P(`id`,`route-diff-`+n),D(),q(e.title),D(),k(`aria-label`,e.title+` changes`),D(7),J(`#`,r.a),D(2),J(`#`,r.b),D(2),N(e.changes)}}function kL(e,t){if(e&1&&(F(0,`p`,3),K(1),I()),e&2){let e=W(2);D(),J(`Same in both: `,e.same.join(`, `),`.`)}}function AL(e,t){if(e&1&&(F(0,`p`,3),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function jL(e,t){if(e&1&&(A(0,SL,2,2,`p`,10),M(1,OL,16,5,`div`,11,vL),A(3,kL,2,1,`p`,3),M(4,AL,2,1,`p`,3,eg)),e&2){let e=W();j(e.sections.length?-1:0),D(),N(e.sections),D(2),j(e.same.length?3:-1),D(),N(e.notes)}}function ML(e,t){e&1&&A(0,xL,2,1,`p`,10)(1,jL,6,2),e&2&&j(`error`in t?0:1)}function NL(e,t){if(e&1){let e=B();F(0,`div`,4)(1,`span`,5),K(2,`Earlier`),I(),F(3,`app-select`,6),H(`valueChange`,function(t){return S(e),C(W().a.set(t))}),I(),F(4,`span`,7),K(5,`Later`),I(),F(6,`app-select`,8),H(`valueChange`,function(t){return S(e),C(W().b.set(t))}),I()(),F(7,`p`,9),K(8),I(),A(9,ML,2,1)}if(e&2){let e,t=W();D(3),P(`options`,t.options())(`value`,t.a()),D(3),P(`options`,t.options())(`value`,t.b()),D(2),q(t.announcement()),D(),j((e=t.result())?9:-1,e)}}function PL(e){let t=e.filter(e=>!e.probe&&e.outcome!==`pending`),n=t[t.length-1],r=t[t.length-2];return{a:r?String(r.id):null,b:n?String(n.id):null}}var FL=class e{page=$.required();rpc=$(null);start=$(null);pageId=X(()=>this.page().pageId);options=X(()=>[...this.page().navigations].filter(e=>!e.probe).reverse().map(e=>({value:String(e.id),label:`#${e.id} ${e.finalUrl??e.url}`,hint:e.outcome})));b=Q({source:()=>({page:this.pageId(),start:this.start()}),computation:({start:e})=>e===null?PL(this.page().navigations).b:String(e)});a=Q({source:()=>({page:this.pageId(),b:this.b()}),computation:({b:e},t)=>{let n=this.page().navigations.filter(e=>!e.probe);if(t?.value&&t.value!==e&&t.source.page===this.pageId())return t.value;let r=n.findIndex(t=>String(t.id)===e),i=r>0?n[r-1]:void 0;return i?String(i.id):null}});version=X(()=>this.page().navigations.map(e=>`${e.id}:${e.outcome}`).join(`,`));result=T(null);announcement=T(``);seq=0;constructor(){E(()=>{let e=this.a(),t=this.b(),n=this.pageId();this.version(),this.compare(n,e,t)})}async compare(e,t,n){let r=++this.seq;if(t===null||n===null){this.result.set(null);return}let i=await OI(this.rpc(),`router-diff`,{pageId:e,app:this.page().appId,a:Number(t),b:Number(n)});r===this.seq&&(this.result.set(i??{error:`Could not reach the page.`}),this.announcement.set(!i||`error`in i?i?.error??`Could not reach the page.`:`${i.sections.length} of ${i.sections.length+i.same.length} parts differ between #${i.a} and #${i.b}.`))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-diff`]],inputs:{page:[1,`page`],rpc:[1,`rpc`],start:[1,`start`]},decls:4,vars:1,consts:[[1,`muted`,`intro`],[1,`empty`],[1,`empty-title`],[1,`muted`],[1,`pick`],[`id`,`route-diff-a-label`,1,`pick-label`],[`labelledBy`,`route-diff-a-label`,3,`valueChange`,`options`,`value`],[`id`,`route-diff-b-label`,1,`pick-label`],[`labelledBy`,`route-diff-b-label`,3,`valueChange`,`options`,`value`],[`role`,`status`,1,`visually-hidden`],[1,`message`],[1,`diff`],[3,`id`],[`role`,`region`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[`scope`,`row`,1,`field-name`],[1,`nil`]],template:function(e,t){e&1&&(F(0,`p`,0),K(1,` Pick two recorded navigations to see which params, data, guards, resolvers, outlets and components changed between them. `),I(),A(2,bL,5,0,`div`,1)(3,NL,10,6)),e&2&&(D(2),j(t.options().length<2?2:3))},dependencies:[wD],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.intro[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.pick[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
-  gap: 8px 12px;
-  align-items: center;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.pick-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.message[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.diff[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-}
-
-.field-name[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 500;
-  text-align: left;
-  overflow-wrap: anywhere;
-}
-
-td[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-@media (max-width: 560px) {
-  .pick[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}`]})},IL=[`*`,[[``,`detail`,``]],[[``,`actions`,``]]],LL=[`*`,`[detail]`,`[actions]`];function RL(e,t){e&1&&dg(0,`span`,0)}function zL(e,t){if(e&1){let e=B();R(0,`button`,5),U(`click`,function(){return S(e),C(W(2).onRetry())}),K(1),z()}if(e&2){let e=W(2);k(`aria-disabled`,e.retrying()||null),D(),J(` `,e.retrying()?`Retrying…`:e.retryLabel(),` `)}}function BL(e,t){if(e&1){let e=B();R(0,`button`,5),U(`click`,function(){return S(e),C(W(2).clear.emit())}),K(1,`Clear filters`),z()}}function VL(e,t){if(e&1&&(R(0,`div`,3),A(1,zL,2,2,`button`,4)(2,BL,2,0,`button`,4),Ag(3,2),z()),e&2){let e=W();D(),j(e.kind()===`error`?1:e.kind()===`no-match`?2:-1)}}var HL=class e{kind=$.required();retryLabel=$(`Retry`);retrying=$(!1);compact=$(!1);hasActions=$(!1);retry=cv();clear=cv();role=X(()=>{switch(this.kind()){case`error`:return`alert`;case`no-match`:return null;default:return`status`}});onRetry(){this.retrying()||this.retry.emit()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-state`]],hostVars:4,hostBindings:function(e,t){e&2&&(k(`role`,t.role())(`data-kind`,t.kind()),G(`compact`,t.compact()))},inputs:{kind:[1,`kind`],retryLabel:[1,`retryLabel`],retrying:[1,`retrying`],compact:[1,`compact`],hasActions:[1,`hasActions`]},outputs:{retry:`retry`,clear:`clear`},ngContentSelectors:LL,decls:6,vars:2,consts:[[`aria-hidden`,`true`,1,`spinner`],[1,`body`],[1,`message`],[1,`actions`],[`type`,`button`,1,`action`],[`type`,`button`,1,`action`,3,`click`]],template:function(e,t){e&1&&(kg(IL),A(0,RL,1,0,`span`,0),R(1,`div`,1)(2,`p`,2),Ag(3),z(),Ag(4,1),A(5,VL,4,1,`div`,3),z()),e&2&&(j(t.kind()===`loading`?0:-1),D(5),j(t.kind()===`error`||t.kind()===`no-match`||t.hasActions()?5:-1))},styles:[`app-state {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  margin: 0 0 12px;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-  animation: enter 0.2s var(--%NS%ease) both;
-}
-
-app-state.compact {
-  padding: 8px 12px;
-}
-
-app-state[data-kind=error] {
-  box-shadow: inset 3px 0 0 var(--%NS%danger);
-}
-
-app-state > .body {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-app-state .message {
-  margin: 0;
-  color: var(--%NS%text);
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-app-state[data-kind=loading] .message {
-  color: var(--%NS%text-2);
-  font-weight: 400;
-}
-
-app-state [detail] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  overflow-wrap: anywhere;
-}
-
-app-state code {
-  font-family: var(--%NS%font-mono);
-  color: var(--%NS%text);
-}
-
-app-state .actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 2px;
-}
-
-app-state .action {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-app-state .action:hover {
-  background: var(--%NS%surface-3);
-}
-
-app-state .action[aria-disabled=true] {
-  cursor: progress;
-}
-
-app-state .action:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-app-state > .spinner {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  margin-top: 4px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: app-state-spin 0.8s linear infinite;
-}
-
-@keyframes app-state-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  app-state,
-  app-state > .spinner {
-    animation: none;
-  }
-}`],encapsulation:2})};function UL(e,t){if(e&1&&(F(0,`span`,8),K(1),I()),e&2){let e=W(2);D(),q(e.plural(e.counts().error,`error`))}}function WL(e,t){if(e&1&&(F(0,`span`,9),K(1),I()),e&2){let e=W(2);D(),q(e.plural(e.counts().warning,`warning`))}}function GL(e,t){if(e&1&&(F(0,`span`,10),K(1),I()),e&2){let e=W(2);D(),J(``,e.counts().info,` info`)}}function KL(e,t){if(e&1&&(F(0,`span`,3),A(1,UL,2,1,`span`,8),A(2,WL,2,1,`span`,9),A(3,GL,2,1,`span`,10),I()),e&2){let e=W();D(),j(e.counts().error?1:-1),D(),j(e.counts().warning?2:-1),D(),j(e.counts().info?3:-1)}}function qL(e,t){if(e&1){let e=B();F(0,`app-state`,11),H(`retry`,function(){return S(e),C(W().run())}),K(1,` The route checks could not run. `),F(2,`p`,12),K(3,`The devtools server did not answer. Check that it is still running.`),I()()}}function JL(e,t){e&1&&(F(0,`app-state`,5),K(1,`Checking…`),I())}function YL(e,t){e&1&&K(0,` The page has not reported its route config yet. It runs in events-only mode, which only limits setup detection, so the checks run once the config arrives. `)}function XL(e,t){e&1&&K(0,` The page has not reported its route config yet. It appears after the app finishes bootstrapping. `)}function ZL(e,t){e&1&&K(0,` No page with a router is connected. `)}function QL(e,t){if(e&1&&(F(0,`div`,6)(1,`p`,13),K(2,`No checks ran.`),I(),F(3,`p`,2),A(4,YL,1,0)(5,XL,1,0)(6,ZL,1,0),I()()),e&2){let e;D(4),j((e=t)===`events-only`?4:e===`no-config`?5:6)}}function $L(e,t){if(e&1&&(F(0,`li`)(1,`div`,14)(2,`span`,10),K(3),I(),F(4,`code`,15),K(5),I(),F(6,`code`,16),K(7),I()(),F(8,`p`,17),K(9),I(),F(10,`p`,18)(11,`span`,19),K(12,`Fix`),I(),F(13,`span`,20),K(14),F(15,`span`,2),K(16),I()()()()),e&2){let e=t.$implicit,n=W(2);k(`data-severity`,e.severity),D(2),k(`data-tone`,n.severityTone(e.severity)),D(),q(e.severity),D(2),q(e.rule),D(2),q(e.route),D(2),q(e.message),D(5),J(``,e.fix,` `),D(2),J(`(Angular `,e.angular===`throws`?`throws`:e.angular===`warns`?`warns`:`does not warn`,`)`)}}function eR(e,t){if(e&1&&(F(0,`ul`,7),M(1,$L,17,8,`li`,null,$h),I()),e&2){let e=W();k(`aria-busy`,e.checking()),D(),N(e.findings())}}function tR(e,t){e&1&&(F(0,`div`,6)(1,`span`,21),w(),F(2,`svg`,22),L(3,`path`,23),I()(),fs(),F(4,`p`,13),K(5,`No route config problems found.`),I(),F(6,`p`,2),K(7,`The check runs again after each navigation or config change.`),I()())}var nR=class e{plural=WE;page=$.required();rpc=$(null);result=T(null);failed=T(!1);checking=T(!1);findings=X(()=>{let e=this.result();return e?.checked?e.findings:[]});notChecked=X(()=>{let e=this.result();return e&&!e.checked?e.reason:null});counts=X(()=>{let e={error:0,warning:0,info:0};for(let t of this.findings())e[t.severity]++;return e});key=X(()=>{let e=this.page(),t=e.navigations[e.navigations.length-1],n=JSON.stringify((e.links??[]).map(e=>[e.text,e.href,e.linkActive!==void 0,e.ariaCurrent===void 0])),r=`${e.setup?.mode}/${e.setup?.features?.componentInputBinding}`;return`${e.pageId}:${e.generation}:${t?.id}:${t?.outcome}:${n}:${r}`});seq=0;checkedPage=null;constructor(){E(()=>{this.key(),Z(()=>void this.run())})}severityTone(e){return e===`error`?`bad`:e===`warning`?`warn`:``}async run(){let e=++this.seq,t=this.page().pageId;t!==this.checkedPage&&this.result.set(null),this.checking.set(!0);let n=await OI(this.rpc(),`router-lint`,this.page().appId?{pageId:t,app:this.page().appId}:t);e===this.seq&&(this.checking.set(!1),this.failed.set(!n),n&&(this.result.set(n),this.checkedPage=t))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-lint`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:11,vars:4,consts:[[1,`toolbar`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[1,`summary`],[`kind`,`error`],[`kind`,`loading`],[1,`empty`],[1,`findings`],[`data-tone`,`bad`,1,`badge`],[`data-tone`,`warn`,1,`badge`],[1,`badge`],[`kind`,`error`,3,`retry`],[`detail`,``],[1,`empty-title`],[1,`head`],[1,`rule`],[1,`route`],[1,`message`],[1,`fix`],[1,`fix-label`],[1,`fix-text`],[`aria-hidden`,`true`,1,`ok-mark`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`]],template:function(e,t){if(e&1&&(F(0,`div`,0)(1,`button`,1),H(`click`,function(){return t.run()}),K(2),I(),F(3,`span`,2),K(4,`Checks the live config, links and recent navigations. Lazy routes that have not loaded are skipped.`),I(),A(5,KL,4,3,`span`,3),I(),A(6,qL,4,0,`app-state`,4)(7,JL,2,0,`app-state`,5)(8,QL,7,1,`div`,6)(9,eR,3,1,`ul`,7)(10,tR,8,0,`div`,6)),e&2){let e;D(),k(`aria-busy`,t.checking()),D(),J(` `,t.checking()?`Checking…`:`Check again`,` `),D(3),j(t.result()?.checked&&t.findings().length?5:-1),D(),j(t.failed()?6:t.result()?(e=t.notChecked())?8:t.findings().length?9:10:7,e)}},dependencies:[HL],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.toolbar[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
-  flex: 1 1 240px;
-  font-size: 12px;
-}
-
-.summary[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  font-variant-numeric: tabular-nums;
-}
-
-.ok-mark[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  margin-bottom: 4px;
-  border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  border-radius: 99px;
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.findings[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-  animation: enter 0.35s var(--%NS%ease) both;
-  transition: border-color 0.15s var(--%NS%ease);
-}
-
-.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.findings[_ngcontent-%COMP%]   li[data-severity=error][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%danger);
-}
-
-.findings[_ngcontent-%COMP%]   li[data-severity=warning][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%warn);
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  min-width: 0;
-}
-
-.rule[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 500;
-}
-
-.route[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-
-.message[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-}
-
-.fix[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 10px;
-  align-items: baseline;
-  margin: 10px 0 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-.fix-label[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%accent);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.fix-text[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.fix[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
-  font-size: 12px;
-}`]})},rR=(e,t)=>t.name,iR=(e,t)=>t[0];function aR(e,t){e&1&&(R(0,`p`,1),K(1,` Events-only mode: this build lacks the injector provider debug helper, so setup detection is limited. The preloader, the scroller and the router providers can't be found, and the features and options below can show defaults. `),z())}function oR(e,t){if(e&1&&(R(0,`dt`),K(1,`Angular`),z(),R(2,`dd`),K(3),z()),e&2){let e=W();D(3),q(e.angularVersion)}}function sR(e,t){if(e&1&&(R(0,`dt`),K(1,`Base href`),z(),R(2,`dd`)(3,`code`),K(4),z()()),e&2){let e=W();D(4),q(e.baseHref)}}function cR(e,t){if(e&1&&(R(0,`dt`),K(1,`Hydration`),z(),R(2,`dd`),K(3),z()),e&2){let e=W(),t=W();D(3),J(``,t.plural(e.hydrated,`component`),` hydrated from server HTML`)}}function lR(e,t){if(e&1&&(R(0,`tr`)(1,`td`,5)(2,`code`),K(3),z()(),R(4,`td`)(5,`code`),K(6),z()(),R(7,`td`,6)(8,`span`,7),K(9),z()()()),e&2){let e=t.$implicit;D(3),q(e.name),D(3),q(e.value),D(2),k(`data-tone`,e.set?`warn`:``),D(),q(e.set?`set`:`default`)}}function uR(e,t){if(e&1&&(R(0,`li`)(1,`span`,7),K(2),z()()),e&2){let e=t.$implicit;D(),k(`data-tone`,e[1]===`off`?``:`good`),D(),Y(``,e[0],`: `,e[1])}}function dR(e,t){if(e&1&&(R(0,`h3`),K(1,`Features`),z(),R(2,`ul`,8),M(3,uR,3,3,`li`,null,iR),z()),e&2){let e=W(),t=W();D(3),N(t.entries(e.features))}}function fR(e,t){if(e&1&&(R(0,`dt`),K(1),z(),R(2,`dd`)(3,`code`),K(4),z()()),e&2){let e=t.$implicit;D(),q(e[0]),D(3),q(e[1])}}function pR(e,t){if(e&1&&(R(0,`h3`),K(1,`Strategies`),z(),R(2,`dl`,2),M(3,fR,5,2,null,null,iR),z()),e&2){let e=W(),t=W();D(3),N(t.entries(e.strategies))}}function mR(e,t){if(e&1&&(A(0,aR,2,0,`p`,1),R(1,`dl`,2)(2,`dt`),K(3,`Set up with`),z(),R(4,`dd`),K(5),z(),A(6,oR,4,1),A(7,sR,5,1),A(8,cR,4,1),z(),R(9,`h3`),K(10,`Options`),z(),R(11,`div`,3)(12,`table`)(13,`thead`)(14,`tr`)(15,`th`,4),K(16,`Option`),z(),R(17,`th`,4),K(18,`Value`),z(),R(19,`th`,4),K(20,`Source`),z()()(),R(21,`tbody`),M(22,lR,10,4,`tr`,null,rR),z()()(),A(24,dR,5,0),A(25,pR,5,0)),e&2){let e=t,n=W();j(e.mode===`events-only`?0:-1),D(5),Y(` `,e.setupKind,``,e.routers>1?`, `+e.routers+` routers on the page`:``,` `),D(),j(e.angularVersion?6:-1),D(),j(e.baseHref?7:-1),D(),j(e.hydrated?8:-1),D(14),N(e.options),D(2),j(n.entries(e.features).length?24:-1),D(),j(n.entries(e.strategies).length?25:-1)}}function hR(e,t){e&1&&(R(0,`div`,0)(1,`p`,9),K(2,`The page has not reported its router setup yet.`),z(),R(3,`p`,10),K(4,` It appears after the app finishes bootstrapping. Reload the app if it stays empty. `),z()())}var gR=class e{plural=WE;page=$.required();entries(e){return Object.entries(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-setup`]],inputs:{page:[1,`page`]},decls:2,vars:1,consts:[[1,`empty`],[`role`,`note`,1,`note`],[1,`facts`],[`role`,`region`,`aria-label`,`Router options`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[1,`name`],[1,`source`],[1,`badge`],[1,`chips`],[1,`empty-title`],[1,`muted`]],template:function(e,t){if(e&1&&A(0,mR,26,8)(1,hR,5,0,`div`,0),e&2){let e;j((e=t.page().setup)?0:1,e)}},styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-}
-
-.name[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.source[_ngcontent-%COMP%] {
-  width: 1%;
-  white-space: nowrap;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.chips[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-weight: 500;
-}
-
-.facts[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}`]})},_R=`pangular-pref`;function vR(e){try{let t=localStorage.getItem(`${_R}:${e}`);return t===`true`||t!==`false`&&null}catch{return null}}function yR(e,t){try{localStorage.setItem(`${_R}:${e}`,String(t))}catch{}}function bR(e,t){if(e&1&&(R(0,`span`,3),K(1),z()),e&2){let e=W();V(`id`,e.pendingId),D(),q(e.pendingText())}}var xR=class{options;held;followed;items;paused;pending;newestKey;follow;constructor(e){this.options=e;let t=X(()=>e.scope?.());this.held=Q({source:t,computation:(t,n)=>n?.value?Z(e.source):null}),this.followed=T(vR(`follow:${e.name}`)??!1),this.follow=this.followed.asReadonly(),this.items=X(()=>this.held()??e.source()),this.paused=X(()=>this.held()!==null),this.pending=X(()=>{let t=this.held();if(!t)return 0;let n=new Set(t.map(e.key));return e.source().filter(t=>!n.has(e.key(t))).length}),this.newestKey=X(()=>{let t=this.items(),n=e.newest===`last`?t.at(-1):t[0];return n===void 0?void 0:e.key(n)})}pause(){this.paused()||this.held.set([...Z(this.options.source)])}resume(){this.held.set(null)}toggle(){this.paused()?this.resume():this.pause()}setFollow(e){this.followed.set(e),yR(`follow:${this.options.name}`,e)}};function SR(e,t){let n=x(bs),r,i=!1,a=!1;E(()=>{let o=e.newestKey(),s=e.follow();s&&(a&&o!==void 0&&o!==r||!i)&&cd(t,{injector:n}),r=o,i=s,a=!0})}var CR=class e{static nextId=0;feed=$.required();what=$.required();pendingId=`live-pending-${e.nextId++}`;announcement=T(``);pendingText=X(()=>{let e=this.feed().pending();return e?`${e} new`:`No new ${this.what()}`});toggle(){let e=this.feed(),t=e.pending();e.toggle(),this.announcement.set(e.paused()?`Paused. New ${this.what()} wait until you resume.`:t?`Resumed. New ${this.what()}: ${t}.`:`Resumed.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-live-controls`]],inputs:{feed:[1,`feed`],what:[1,`what`]},decls:10,vars:7,consts:[[`role`,`group`,1,`live`],[`type`,`button`,1,`pause`,3,`click`],[`aria-hidden`,`true`,1,`icon`],[1,`pending`,3,`id`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`role`,`status`,1,`sr-only`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`button`,1),U(`click`,function(){return t.toggle()}),dg(2,`span`,2),K(3,` Pause `),z(),A(4,bR,2,2,`span`,3),R(5,`label`,4)(6,`input`,5),U(`change`,function(e){return t.feed().setFollow(e.target.checked)}),z(),K(7,` Follow newest `),z(),R(8,`p`,6),K(9),z()()),e&2&&(k(`aria-label`,`Live `+t.what()),D(),k(`aria-pressed`,t.feed().paused())(`aria-describedby`,t.feed().paused()?t.pendingId:null),D(),k(`data-paused`,t.feed().paused()),D(2),j(t.feed().paused()?4:-1),D(2),V(`checked`,t.feed().follow()),D(3),q(t.announcement()))},styles:[`[_nghost-%COMP%] {
-  display: contents;
-}
-
-.live[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 6px 12px;
-  align-items: center;
-  min-width: 0;
-}
-
-.pause[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
-}
-
-.pause[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.pause[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.pause[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.icon[_ngcontent-%COMP%] {
-  flex: none;
-  width: 10px;
-  height: 10px;
-  border-right: 3px solid currentColor;
-  border-left: 3px solid currentColor;
-  box-sizing: border-box;
-}
-
-.icon[data-paused=true][_ngcontent-%COMP%] {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-right: 0;
-  border-bottom: 5px solid transparent;
-  border-left: 8px solid currentColor;
-}
-
-.pending[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  padding: 1px 8px;
-  border: 1px solid;
-  border-radius: 999px;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  min-height: var(--%NS%control-h);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.check[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},wR=(e,t)=>t.id,TR=(e,t)=>t.phase,ER=(e,t)=>t.label;function DR(e,t){if(e&1&&(F(0,`p`,9),K(1),I()),e&2){let e=W();D(),q(e.message())}}function OR(e,t){if(e&1&&(F(0,`p`,10),K(1),I()),e&2){let e=W();D(),q(e.navigationOff)}}function kR(e,t){e&1&&(F(0,`span`,20),K(1,`→`),I(),F(2,`span`,21),K(3,`then`),I())}function AR(e,t){if(e&1&&(A(0,kR,4,0),F(1,`code`),K(2),I()),e&2){let e=t.$implicit,n=t.$index;j(n===0?-1:0),D(2),q(e)}}function jR(e,t){if(e&1&&(F(0,`li`)(1,`code`),K(2),I(),F(3,`span`,20),K(4,` → `),I(),F(5,`span`,21),K(6,` to `),I(),F(7,`code`),K(8),I(),K(9),I()),e&2){let e=t.$implicit,n=W(3);D(2),q(e.from),D(6),q(e.to),D(),J(`: `,n.hopCause(e),` `)}}function MR(e,t){if(e&1&&(F(0,`div`,15)(1,`p`,16)(2,`span`,17),K(3),I(),M(4,AR,3,2,null,null,$h),I(),F(6,`ol`,18),M(7,jR,10,3,`li`,null,$h),I(),F(9,`p`,19),K(10),I()()),e&2){let e=t.$implicit,n=W(2);D(3),q(n.loopTitle(e)),D(),N(e.cycle),D(3),N(e.hops),D(3),q(n.loopMeta(e))}}function NR(e,t){if(e&1&&(F(0,`section`,12)(1,`h3`,14),K(2),I(),M(3,MR,11,2,`div`,15,$h),I()),e&2){let e=W();D(2),J(` `,e.loops().length===1?`Loop detected`:e.loops().length+` loops detected`,` `),D(),N(e.loops())}}function PR(e,t){e&1&&K(0,` (started by the user) `)}function FR(e,t){if(e&1&&(F(0,`span`,24),K(1),I()),e&2){let e=W().$implicit;D(),J(`failed`,e.error?`: `+e.error:``)}}function IR(e,t){if(e&1&&(F(0,`li`)(1,`time`),K(2),I(),K(3),F(4,`code`),K(5),I(),A(6,PR,1,0),A(7,FR,2,1,`span`,24),I()),e&2){let e=t.$implicit,n=W(2);D(2),q(n.time(e.at)),D(),J(` `,e.type,` to `),D(2),q(e.url),D(),j(e.userInitiated?6:-1),D(),j(e.result===`failed`?7:-1)}}function LR(e,t){if(e&1&&(F(0,`section`,13)(1,`h3`,22),K(2,`History changes outside the router`),I(),F(3,`p`,23),K(4,` Browser Navigation API events no router navigation came with, such as `),F(5,`code`),K(6,`history.pushState`),I(),K(7,` or a hash change. They explain a browser URL that differs from the router's. `),I(),F(8,`ul`),M(9,IR,8,5,`li`,null,$h),I()()),e&2){let e=W();D(9),N(e.outsideRouter())}}function RR(e,t){if(e&1&&(F(0,`span`),L(1,`i`),K(2),I()),e&2){let e=t.$implicit,n=W(2);D(),t_(`background`,n.color(e)),D(),q(e)}}function zR(e,t){if(e&1&&(F(0,`time`),K(1),I()),e&2){let e=W().$implicit,t=W(2);D(),q(t.time(e.startedAt))}}function BR(e,t){if(e&1&&(F(0,`span`,20),K(1,`→`),I(),F(2,`span`,21),K(3,`redirected to`),I(),F(4,`code`,32),K(5),I()),e&2){let e=W().$implicit;D(5),q(e.finalUrl)}}function VR(e,t){if(e&1&&(F(0,`span`,23),K(1),I()),e&2){let e=W().$implicit;D(),q(e.endedAt===void 0&&e.outcome!==`pending`?`before Pangular Inspector connected`:`started before Pangular Inspector connected`)}}function HR(e,t){if(e&1&&(F(0,`span`,35),K(1),I()),e&2){let e=W().$implicit;D(),J(``,e.phases?.total,`ms`)}}function UR(e,t){if(e&1&&(F(0,`span`,35),K(1),I()),e&2){let e=W().$implicit;D(),J(``,e.endedAt-e.startedAt,`ms`)}}function WR(e,t){e&1&&(F(0,`span`,36),K(1,`probe`),I())}function GR(e,t){e&1&&(F(0,`span`,37),K(1,`open redirect risk`),I())}function KR(e,t){if(e&1&&(F(0,`span`,17),K(1,`loop`),F(2,`span`,21),K(3),I()()),e&2){let e=t,n=W(3);D(3),Y(`: part of `,n.loopTitle(e),` `,e.cycle.join(` then `))}}function qR(e,t){if(e&1&&L(0,`span`),e&2){let e=t.$implicit,n=W(4);t_(`width`,e.width,`%`)(`background`,n.color(e.phase)),k(`title`,e.phase+` `+e.ms+`ms`)}}function JR(e,t){if(e&1&&(F(0,`div`,38),M(1,qR,1,5,`span`,45,TR),I()),e&2){let e=W().$implicit,t=W(2);k(`aria-label`,t.barLabel(e)),D(),N(t.bars(e))}}function YR(e,t){if(e&1&&(F(0,`dt`),K(1,`From`),I(),F(2,`dd`)(3,`code`),K(4),I()()),e&2){let e=W().$implicit;D(4),q(e.from)}}function XR(e,t){if(e&1&&(F(0,`dt`),K(1,`Started by`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),Y(``,e.caller,` (`,e.trigger,`)`)}}function ZR(e,t){if(e&1&&(F(0,`dt`),K(1,`Navigation API`),I(),F(2,`dd`),K(3),I()),e&2){let e=t;D(3),Y(` `,e.type,``,e.userInitiated?` (started by the user)`:``,` `)}}function QR(e,t){if(e&1&&(F(0,`dt`),K(1,`Extras`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.extras?.join(`, `))}}function $R(e,t){if(e&1&&(F(0,`dt`),K(1,`Redirect of`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),J(`#`,e.redirectedFrom)}}function ez(e,t){if(e&1&&(F(0,`div`),K(1,` This navigation: `),F(2,`code`),K(3),I(),K(4,` to `),F(5,`code`),K(6),I(),K(7),I()),e&2){let e=t.$implicit,n=W(4);D(3),q(e.from),D(3),q(e.to),D(),J(`, `,n.hopCause(e),` `)}}function tz(e,t){if(e&1&&(F(0,`dt`),K(1,`Loop`),I(),F(2,`dd`,46),K(3),M(4,ez,8,3,`div`,null,$h),I()),e&2){let e=t,n=W().$implicit,r=W(2);D(3),J(` `,e.cycle.join(` → `),` `),D(),N(r.hopsOf(e,n))}}function nz(e,t){if(e&1&&(F(0,`dt`),K(1,`Redirects to`),I(),F(2,`dd`)(3,`code`),K(4),I(),K(5),I()),e&2){let e=W().$implicit;D(4),q(e.redirectTo),D(),J(` (`,e.redirectKind,`) `)}}function rz(e,t){if(e&1&&(F(0,`dt`),K(1,`Open redirect`),I(),F(2,`dd`,46),K(3,` The target came from query param `),F(4,`code`),K(5),I(),K(6),I()),e&2){let e=t;D(5),q(e.param),D(),J(` (`,e.by,`). Check return URLs against an allow list. `)}}function iz(e,t){if(e&1&&(F(0,`dt`),K(1,`Guards`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit,t=W(2);D(3),Y(``,e.guards.names.join(`, `)||`none`,`: `,t.guardResult(e))}}function az(e,t){if(e&1&&(F(0,`div`)(1,`code`),K(2),I(),K(3),F(4,`code`),K(5),I(),K(6,`: `),F(7,`strong`),K(8),I(),K(9),I()),e&2){let e=t.$implicit,n=W(4);D(2),q(e.guard),D(),J(` `,e.kind,` on `),D(2),q(e.route),D(2),G(`bad`,n.isBad(e.result)),D(),q(e.result),D(),J(` (`,e.ms,`ms) `)}}function oz(e,t){if(e&1&&(F(0,`dt`),K(1,`Runs`),I(),F(2,`dd`),M(3,az,10,7,`div`,null,$h),I()),e&2){let e=W().$implicit;D(3),N(e.runs)}}function sz(e,t){if(e&1&&K(0),e&2){let e=W(2).$implicit;J(` leaving `,e.checked.deactivate.join(`, `),`; `)}}function cz(e,t){if(e&1&&(F(0,`dt`),K(1,`Checked`),I(),F(2,`dd`),A(3,sz,1,1),K(4),I()),e&2){let e=W().$implicit;D(3),j(e.checked.deactivate.length?3:-1),D(),J(` entering `,e.checked.activate.join(`, `)||`nothing new`,` `)}}function lz(e,t){if(e&1&&(F(0,`dt`),K(1,`Resolvers`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.resolvers?.names?.join(`, `))}}function uz(e,t){if(e&1&&(F(0,`dt`),K(1,`Lazy loaded`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.lazyLoaded?.join(`, `))}}function dz(e,t){if(e&1&&(F(0,`dt`),K(1,`Reused`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),J(` `,e.reused?.join(`, `),` (component kept, only inputs and params change) `)}}function fz(e,t){if(e&1&&(F(0,`dt`),K(1,`HTTP`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit,t=W(2);D(3),Y(` `,t.plural(e.requests.count,`request`),`: `,e.requests.urls.join(`, `),` `)}}function pz(e,t){if(e&1&&(F(0,`dt`),K(1,`Scroll`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.scroll)}}function mz(e,t){if(e&1&&(F(0,`dt`),K(1,`Title after`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.title)}}function hz(e,t){if(e&1&&(F(0,`dt`),K(1,`Warnings`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.warnings?.join(` · `))}}function gz(e,t){if(e&1&&(F(0,`dt`),K(1,`Reason`),I(),F(2,`dd`,46),K(3),I()),e&2){let e=W().$implicit,t=W(2);D(3),q(t.reasonText(e))}}function _z(e,t){if(e&1&&(F(0,`dt`),K(1,`Error`),I(),F(2,`dd`,46),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.errorCode)}}function vz(e,t){if(e&1&&(F(0,`dt`),K(1,`Error handler`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit;D(3),q(e.errorHandler)}}function yz(e,t){if(e&1&&(F(0,`dt`),K(1,`Earlier`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().$implicit,t=W(2);D(3),J(``,t.plural(e.earlier,`navigation`),` before Pangular Inspector connected`)}}function bz(e,t){if(e&1&&(F(0,`p`,43),K(1,` Replay is off: the URL is redacted or not relative. `),I()),e&2){let e=W().$implicit;P(`id`,L_(`replay-note-`,e.id))}}function xz(e,t){e&1&&(F(0,`p`,23),K(1,`Loading the HTTP calls…`),I())}function Sz(e,t){e&1&&(F(0,`p`,23),K(1,`Could not load the HTTP calls.`),I())}function Cz(e,t){e&1&&(F(0,`p`,23),K(1,` The HTTP inspector recorded no HttpClient call for this navigation. `),I())}function wz(e,t){if(e&1&&(F(0,`li`)(1,`code`),K(2),I(),K(3,` `),F(4,`span`),K(5),I(),K(6,` `),F(7,`span`,35),K(8),I()()),e&2){let e=t.$implicit,n=W(5);D(2),Y(``,e.method,` `,e.url),D(2),G(`bad`,n.isFailedCall(e)),D(),q(n.callStatus(e)),D(3),J(``,n.round(e.durationMs),`ms`)}}function Tz(e,t){if(e&1&&(F(0,`p`,47),K(1),I(),F(2,`ul`),M(3,wz,9,6,`li`,null,wR),I()),e&2){let e=t.$implicit;D(),q(e.label),D(2),N(e.calls)}}function Ez(e,t){if(e&1&&(A(0,Cz,2,0,`p`,23),M(1,Tz,5,1,null,null,ER)),e&2){let e=W().$implicit,t=W(2),n=t.httpOf(e);j(!n.during.length&&!n.after.length?0:-1),D(),N(t.httpGroups(n))}}function Dz(e,t){if(e&1){let e=B();F(0,`li`)(1,`div`,30),A(2,zR,2,1,`time`),F(3,`span`,31),K(4),I(),F(5,`code`,32),K(6),I(),A(7,BR,6,1),F(8,`span`,33)(9,`span`,34),K(10),I(),A(11,VR,2,1,`span`,23)(12,HR,2,1,`span`,35)(13,UR,2,1,`span`,35),A(14,WR,2,0,`span`,36),A(15,GR,2,0,`span`,37),A(16,KR,4,2,`span`,17),I()(),A(17,JR,3,1,`div`,38),F(18,`dl`,39),A(19,YR,5,1),A(20,XR,4,2),A(21,ZR,4,2),A(22,QR,4,1),A(23,$R,4,1),A(24,tz,6,1),A(25,nz,6,2),A(26,rz,7,2),A(27,iz,4,2),A(28,oz,5,0),A(29,cz,5,2),A(30,lz,4,1),A(31,uz,4,1),A(32,dz,4,1),A(33,fz,4,2),A(34,pz,4,1),A(35,mz,4,1),A(36,hz,4,1),A(37,gz,4,1),A(38,_z,4,1),A(39,vz,4,1),A(40,yz,4,1),I(),F(41,`div`,40)(42,`button`,41),H(`click`,function(){let t=S(e).$implicit;return C(W(2).replay(t))}),K(43,` Replay `),I(),F(44,`button`,42),H(`click`,function(){let t=S(e).$implicit;return C(W(2).compare.emit(t.id))}),K(45,` Compare `),I(),F(46,`button`,42),H(`click`,function(){let t=S(e).$implicit;return C(W(2).copy(t))}),K(47,` Copy repro `),I(),F(48,`button`,42),H(`click`,function(){let t=S(e).$implicit;return C(W(2).toggleHttp(t))}),K(49,` HTTP calls `),I(),A(50,bz,2,2,`p`,43),I(),F(51,`div`,44),A(52,xz,2,0,`p`,23)(53,Sz,2,0,`p`,23)(54,Ez,3,1),I()()}if(e&2){let e,n,r,i,a,o=t.$implicit,s=W(2);G(`in-loop`,!!s.loopOf(o)),D(2),j(o.beforeConnect?-1:2),D(2),J(`#`,o.id),D(2),q(o.url),D(),j(o.finalUrl&&o.finalUrl!==o.url?7:-1),D(2),k(`data-tone`,s.tone(o.outcome)),D(),q(o.outcome),D(),j(o.beforeConnect?11:o.phases?.total===void 0?o.endedAt===void 0?-1:13:12),D(3),j(o.probe?14:-1),D(),j(o.queryRedirect?15:-1),D(),j((e=s.loopOf(o))?16:-1,e),D(),j(s.bars(o).length?17:-1),D(2),j(o.from?19:-1),D(),j(o.caller?20:-1),D(),j((n=o.platform)?21:-1,n),D(),j(o.extras?.length?22:-1),D(),j(o.redirectedFrom===void 0?-1:23),D(),j((r=s.loopOf(o))?24:-1,r),D(),j(o.redirectTo?25:-1),D(),j((i=o.queryRedirect)?26:-1,i),D(),j(o.guards&&(o.guards.names.length||o.guards.passed===!1)?27:-1),D(),j(o.runs?.length?28:-1),D(),j(o.checked&&(o.checked.activate.length||o.checked.deactivate.length)?29:-1),D(),j(o.resolvers?.names?.length?30:-1),D(),j(o.lazyLoaded?.length?31:-1),D(),j(o.reused?.length?32:-1),D(),j(o.requests?33:-1),D(),j(o.scroll?34:-1),D(),j(o.title?35:-1),D(),j(o.warnings?.length?36:-1),D(),j(o.reason||o.code?37:-1),D(),j(o.errorCode?38:-1),D(),j(o.errorHandler?39:-1),D(),j(o.earlier?40:-1),D(2),P(`disabled`,!s.navigationAllowed()||!s.replayable(o)),k(`aria-describedby`,s.replayNote(o))(`aria-label`,`Replay navigation `+o.id),D(2),k(`aria-label`,`Compare navigation `+o.id+` with an earlier one`),D(2),k(`aria-label`,`Copy repro for navigation `+o.id),D(2),k(`aria-expanded`,s.httpShown(o))(`aria-controls`,`nav-http-`+o.id)(`aria-label`,`HTTP calls of navigation `+o.id),D(2),j(s.replayable(o)?-1:50),D(),P(`id`,`nav-http-`+o.id)(`hidden`,!s.httpShown(o)),D(),j((a=s.httpState(o))===`loading`?52:a===`failed`?53:a===`ready`?54:-1)}}function Oz(e,t){if(e&1&&(F(0,`div`,25)(1,`span`,26),K(2),I(),F(3,`div`,27),M(4,RR,3,3,`span`,null,eg),I()(),F(6,`ol`,28),M(7,Dz,55,47,`li`,29,wR),I()),e&2){let e=W();D(2),Y(``,e.items().length,` of `,e.plural(e.feed.items().length,`navigation`)),D(2),N(e.phases),D(3),N(e.items())}}function kz(e,t){if(e&1){let e=B();F(0,`app-state`,50),H(`clear`,function(){S(e);let t=W(2),n=Pg(2);return t.clearFilters(),C(n.focus())}),K(1,` No navigations match the current filters. `),F(2,`p`,51),K(3),I()()}if(e&2){let e=W(2);D(3),J(` `,e.plural(e.feed.items().length,`navigation is`,`navigations are`),` hidden. Clear the filters to see them. `)}}function Az(e,t){e&1&&(F(0,`app-state`,49),K(1,` No navigations since Pangular Inspector connected. `),F(2,`p`,51),K(3,`Earlier ones are not visible. Click a link in the app to record one.`),I()())}function jz(e,t){e&1&&A(0,kz,4,1,`app-state`,48)(1,Az,4,0,`app-state`,49),e&2&&j(+!W().feed.items().length)}var Mz=[`recognize`,`guards`,`resolve`,`activate`],Nz=class e{plural=WE;page=$.required();rpc=$(null);compare=cv();maxNavigations=X(()=>TT(this.rpc()).limits.navigations);navigationAllowed=X(()=>OT(this.rpc(),`router`));navigationOff=Mw(`router`);phases=Mz;pageId=X(()=>this.page().pageId);filter=Q({source:this.pageId,computation:()=>``});onlyProblems=Q({source:this.pageId,computation:()=>!1});message=Q({source:this.pageId,computation:()=>``});loops=X(()=>this.page().loops??[]);outsideRouter=X(()=>(this.page().platformNavigations??[]).filter(e=>e.navigationId===void 0).slice(-5).reverse());loopById=X(()=>{let e=new Map;for(let t of this.loops())for(let n of t.ids)e.set(n,t);return e});feed=new xR({name:`router-timeline`,source:()=>this.page().navigations,key:e=>e.id,newest:`last`,scope:this.pageId});host=x(Ml);constructor(){SR(this.feed,()=>this.host.nativeElement.querySelector(`.navs > li`)?.scrollIntoView?.({block:`nearest`}))}items=X(()=>{let e=this.filter().toLowerCase();return[...this.feed.items()].reverse().filter(t=>(!e||t.url.toLowerCase().includes(e)||!!t.finalUrl?.toLowerCase().includes(e))&&(!this.onlyProblems()||this.isProblem(t)))});isProblem(e){return e.probe?!1:![`succeeded`,`pending`].includes(e.outcome)||this.loopById().has(e.id)}loopOf(e){return this.loopById().get(e.id)}loopTitle(e){return e.kind===`burst`?`navigation loop`:`redirect loop`}hopsOf(e,t){return e.hops.filter(e=>e.id===t.id)}hopCause(e){return e.via===`navigate`?`#${e.id} started by ${e.by??`code`}`:`${e.via===`redirectTo`?`config`:`${e.via} redirect`}${e.by?` ${e.by}`:e.via===`redirectTo`?` redirectTo`:``} in #${e.id}`}loopMeta(e){let t=e.ids.length>1?`Navigations #${e.ids[0]} to #${e.ids[e.ids.length-1]}`:`Navigation #${e.ids[0]}`,n=e.bounces>1?`, came back ${e.bounces} times`:``,r=e.guards.length?` Guards involved: ${e.guards.join(`, `)}.`:``;return`${t}${n}; ${e.end}.${r}`}reasonText(e){return[e.code,e.reason].filter(Boolean).join(`: `)}clearFilters(){this.filter.set(``),this.onlyProblems.set(!1)}tone(e){return MI(e)}color(e){return`var(--phase-${e})`}bars(e){let t=e.phases?.total;return t?Mz.filter(t=>(e.phases?.[t]??0)>0).map(n=>({phase:n,ms:e.phases[n],width:Math.max(1,e.phases[n]/t*100)})):[]}barLabel(e){return`Phases: ${this.bars(e).map(e=>`${e.phase} ${e.ms}ms`).join(`, `)}`}guardResult(e){let t=e.guards?.passed;return t===!0?`passed`:t===!1?e.outcome===`redirected`?`redirected`:`blocked`:e.outcome===`pending`?`running`:`did not finish, navigation ${e.outcome}`}isBad(e){return e===`false`||/^(UrlTree|RedirectCommand|threw)/.test(e)}time=VE;http=Q({source:this.pageId,computation:()=>({})});httpOpen=Q({source:this.pageId,computation:()=>({})});round=Math.round;httpShown(e){return!!this.httpOpen()[e.id]}httpState(e){let t=this.http()[e.id];return t===void 0?null:typeof t==`string`?t:`ready`}httpOf(e){let t=this.http()[e.id];return typeof t==`object`?t:{during:[],after:[]}}httpGroups(e){return[{label:`While it ran`,calls:e.during},{label:`After it ended`,calls:e.after}].filter(e=>e.calls.length)}callStatus(e){return e.cancelled?`cancelled`:e.status?String(e.status):`ERR`}isFailedCall(e){return e.status===0||e.status>=400||!!e.error||e.cancelled===!0}async toggleHttp(e){let t=!this.httpShown(e);if(this.httpOpen.update(n=>({...n,[e.id]:t})),!t)return;let n=this.pageId();this.http.update(t=>({...t,[e.id]:`loading`}));let r=await OI(this.rpc(),`router-http`,{pageId:n,app:this.page().appId,id:e.id});n===this.pageId()&&this.http.update(t=>({...t,[e.id]:r??`failed`}))}instrumentSeq=0;async toggleInstrument(e){let t=e.target,n=t.checked,r=this.pageId(),i=++this.instrumentSeq,a=await jI(this.rpc(),r,{action:`instrument`,on:n},this.page().appId);if(i===this.instrumentSeq){if(r!==this.pageId()){t.checked=!!this.page().instrumented;return}if(a.error){t.checked=!!this.page().instrumented,this.message.set(String(a.error));return}this.message.set(n?`Recording each guard and resolver.`:`Stopped recording guards and resolvers.`)}}replayable(e){return kI(e.url)}replayNote(e){return this.navigationAllowed()?this.replayable(e)?null:`replay-note-${e.id}`:`route-timeline-writes-off`}async replay(e){this.message.set(`Replaying #${e.id}…`);let t=this.pageId(),n=await jI(this.rpc(),t,{action:`replay`,id:e.id},this.page().appId);if(t!==this.pageId())return;if(n.error){this.message.set(String(n.error));return}let r=n.replay;this.message.set(`Replay of #${e.id}: ${r?.outcome??`unknown`}${n.same?` (same as before)`:` (different from before)`}.`)}async copy(e){let t=this.pageId(),n=await OI(this.rpc(),`router-export`,{pageId:t,app:this.page().appId,id:e.id});if(t===this.pageId()){if(!n){this.message.set(`Could not build the repro.`);return}try{await navigator.clipboard.writeText(n),t===this.pageId()&&this.message.set(`Copied a markdown repro of #${e.id}.`)}catch{t===this.pageId()&&this.message.set(`The clipboard is not available here.`)}}}async clearNavigations(){let e=this.rpc(),t=this.pageId(),n=`Clearing navigations…`;this.message.set(n);let r;try{if(!e)throw Error(`No connection`);let n=this.page().appId;await oT(e,`clear-router-navigations`,n?{pageId:t,app:n}:t),r=`Navigations cleared.`}catch{r=`Could not clear the navigations.`}t===this.pageId()?this.message.set(r):this.message()===n&&this.message.set(``)}exportJson(){let e=new Blob([JSON.stringify(this.page().navigations,null,2)],{type:`application/json`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`navigations-${this.page().pageId}.json`,n.click(),URL.revokeObjectURL(t)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-timeline`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},outputs:{compare:`compare`},decls:23,vars:14,consts:[[`filterInput`,``],[1,`toolbar`],[`placeholder`,`Filter by URL`,`saveKey`,`router-timeline`,3,`valueChange`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`what`,`navigations`,3,`feed`],[`type`,`button`,1,`small`,`export`,3,`click`],[`type`,`button`,`aria-label`,`Clear navigations`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`visually-hidden`],[`aria-hidden`,`true`,1,`message`],[`id`,`route-timeline-writes-off`,1,`message`],[`what`,`navigations`,`limit`,`navigations`,3,`dropped`,`max`],[`aria-labelledby`,`loops-heading`,1,`loops`],[`aria-labelledby`,`outside-heading`,1,`outside`],[`id`,`loops-heading`],[1,`loop`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`hops`],[1,`muted`,`loop-meta`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[`id`,`outside-heading`],[1,`muted`],[1,`bad`],[1,`meta-row`],[1,`muted`,`count`],[`aria-hidden`,`true`,1,`legend`],[1,`navs`],[3,`in-loop`],[1,`head`],[1,`id`],[1,`url`],[1,`meta`],[1,`badge`],[1,`muted`,`ms`],[1,`tag`],[`data-tone`,`warn`,1,`badge`],[`role`,`img`,1,`bar`],[1,`details`],[1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`,`replay-note`,3,`id`],[1,`http`,3,`id`,`hidden`],[3,`width`,`background`],[1,`reason`],[1,`http-label`],[`kind`,`no-match`],[`kind`,`empty`],[`kind`,`no-match`,3,`clear`],[`detail`,``]],template:function(e,t){if(e&1){let e=B();F(0,`div`,1)(1,`app-search-field`,2,0),M_(`valueChange`,function(n){return S(e),j_(t.filter,n)||(t.filter=n),C(n)}),I(),F(3,`label`,3)(4,`input`,4),H(`change`,function(e){return t.onlyProblems.set(e.target.checked)}),I(),K(5,` Only problems `),I(),F(6,`label`,3)(7,`input`,4),H(`change`,function(e){return t.toggleInstrument(e)}),I(),K(8,` Record each guard and resolver `),I(),L(9,`app-live-controls`,5),F(10,`button`,6),H(`click`,function(){return t.exportJson()}),K(11,`Export JSON`),I(),F(12,`button`,7),H(`click`,function(){return t.clearNavigations()}),K(13,` Clear `),I()(),F(14,`p`,8),K(15),I(),A(16,DR,2,1,`p`,9),A(17,OR,2,1,`p`,10),L(18,`app-limit-note`,11),A(19,NR,5,1,`section`,12),A(20,LR,11,0,`section`,13),A(21,Oz,9,2)(22,jz,2,1)}e&2&&(D(),A_(`value`,t.filter),D(3),P(`checked`,t.onlyProblems()),D(3),P(`checked`,t.page().instrumented),D(2),P(`feed`,t.feed),D(3),P(`disabled`,!t.navigationAllowed()),k(`aria-describedby`,t.navigationAllowed()?null:`route-timeline-writes-off`),D(3),q(t.message()),D(),j(t.message()?16:-1),D(),j(t.navigationAllowed()?-1:17),D(),P(`dropped`,t.page().dropped??0)(`max`,t.maxNavigations()),D(),j(t.loops().length?19:-1),D(),j(t.outsideRouter().length?20:-1),D(),j(t.items().length?21:22))},dependencies:[$N,XD,HL,CR],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
-  align-items: center;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.toolbar[_ngcontent-%COMP%]   .field[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.export[_ngcontent-%COMP%] {
-  margin-left: auto;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  min-height: 34px;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-  user-select: none;
-  transition: color 0.15s var(--%NS%ease);
-}
-
-.check[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-.message[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 13px;
-  overflow-wrap: anywhere;
-}
-
-.meta-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 16px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 4px;
-}
-
-.count[_ngcontent-%COMP%] {
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.legend[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 16px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.legend[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.legend[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 99px;
-}
-
-.navs[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.navs[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-  animation: enter 0.35s var(--%NS%ease) both;
-  transition: border-color 0.15s var(--%NS%ease);
-}
-
-.navs[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 8px;
-  align-items: center;
-  min-width: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-.head[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-weight: 500;
-}
-
-.id[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.arrow[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.meta[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 6px 8px;
-  align-items: center;
-  margin-left: auto;
-}
-
-.ms[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-time[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.bar[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 2px;
-  height: 6px;
-  margin: 12px 0 4px;
-  overflow: hidden;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-}
-
-.bar[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  display: block;
-  min-width: 2px;
-}
-
-.details[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 6px 16px;
-  margin: 12px 0 0;
-  font-size: 12.5px;
-  line-height: 1.5;
-}
-
-.details[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.details[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  letter-spacing: 0.06em;
-}
-
-.reason[_ngcontent-%COMP%], 
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.navs[_ngcontent-%COMP%]    > li.in-loop[_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%danger);
-}
-
-.outside[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.outside[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.outside[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.outside[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.outside[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  padding-left: 20px;
-}
-
-.loops[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  padding: 12px 16px;
-  border: 1px solid color-mix(in srgb, var(--%NS%danger) 35%, var(--%NS%border));
-  border-radius: var(--%NS%radius);
-  background: color-mix(in srgb, var(--%NS%danger) 6%, var(--%NS%surface));
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.loops[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-  letter-spacing: normal;
-  text-transform: none;
-}
-
-.loop[_ngcontent-%COMP%]    + .loop[_ngcontent-%COMP%] {
-  padding-top: 8px;
-  border-top: 1px solid var(--%NS%border);
-}
-
-.chain[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  margin: 0;
-}
-
-.hops[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  padding-left: 20px;
-}
-
-.hops[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
-  margin-top: 2px;
-}
-
-.loop-meta[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  font-size: 12px;
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--%NS%border);
-}
-
-.http[_ngcontent-%COMP%] {
-  margin-top: 8px;
-  font-size: 12.5px;
-  line-height: 1.5;
-}
-
-.http[hidden][_ngcontent-%COMP%] {
-  display: none;
-}
-
-.http[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.http[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.http[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  padding-left: 20px;
-}
-
-.http[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.http[_ngcontent-%COMP%]   p.http-label[_ngcontent-%COMP%] {
-  margin-top: 6px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.replay-note[_ngcontent-%COMP%] {
-  align-self: center;
-  margin: 0;
-  font-size: 12px;
-}
-
-@media (max-width: 480px) {
-  .details[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .details[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 6px;
-  }
-  .export[_ngcontent-%COMP%] {
-    margin-left: 0;
-  }
-}`]})},Pz=(e,t)=>t.path,Fz=(e,t)=>t.phase;function Iz(e,t){if(e&1&&(R(0,`li`),K(1,` Redirect `),R(2,`code`),K(3),z(),R(4,`span`,6),K(5,`→`),z(),R(6,`span`,7),K(7,`to`),z(),R(8,`code`),K(9),z(),K(10,` by `),R(11,`code`),K(12),z()()),e&2){let e=t.$implicit;D(3),q(e.from),D(6),q(e.to),D(3),q(e.route)}}function Lz(e,t){if(e&1&&(R(0,`ol`,3),M(1,Iz,13,3,`li`,null,$h),z()),e&2){W();let e=I_(0);D(),N(e.hops)}}function Rz(e,t){e&1&&(R(0,`span`,9),K(1,`active`),z())}function zz(e,t){e&1&&(R(0,`span`,6),K(1,` → `),z(),R(2,`span`,7),K(3,`then`),z())}function Bz(e,t){if(e&1&&(R(0,`code`),K(1),z(),A(2,Rz,2,0,`span`,9),A(3,zz,4,0)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;D(),q(e.path),D(),j(e.active?2:-1),D(),j(n===r-1?-1:3)}}function Vz(e,t){if(e&1&&(R(0,`p`)(1,`span`,8),K(2),z(),M(3,Bz,4,3,null,null,Pz),z()),e&2){W();let e=I_(0);D(),k(`data-tone`,e.matched?`good`:`warn`),D(),q(e.matched?`match`:`stops`),D(),N(e.chain)}}function Hz(e,t){if(e&1&&(K(0,` Nearest: `),R(1,`code`),K(2),z()),e&2){W(2);let e=I_(0);D(2),q(e.nearest.join(`, `))}}function Uz(e,t){if(e&1&&(R(0,`p`)(1,`span`,10),K(2,`no match`),z(),K(3,` Matches no route (NG04002). `),A(4,Hz,3,1),z()),e&2){W();let e=I_(0);D(4),j(e.nearest.length?4:-1)}}function Wz(e,t){e&1&&(R(0,`p`,2),K(1,` Params: `),R(2,`code`),K(3),z()()),e&2&&(D(3),q(t))}function Gz(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z()()),e&2){let e=t.$implicit;D(2),q(e)}}function Kz(e,t){if(e&1&&(R(0,`li`)(1,`span`,11),K(2),z(),R(3,`ul`),M(4,Gz,3,1,`li`,null,$h),z()()),e&2){let e=t.$implicit;D(2),q(e.phase),D(2),N(e.items)}}function qz(e,t){if(e&1&&(R(0,`ol`,4),M(1,Kz,6,1,`li`,null,Fz),z()),e&2){W();let e=I_(0);D(),N(e.steps)}}function Jz(e,t){if(e&1&&(R(0,`code`),K(1),z(),K(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;D(),q(e.source),D(),J(``,n===r-1?``:`, `,` `)}}function Yz(e,t){if(e&1&&(R(0,`p`,2),K(1,` Declared in: `),M(2,Jz,3,2,null,null,Pz),z()),e&2){let e=W();D(2),N(e.sources())}}function Xz(e,t){if(e&1&&(R(0,`p`,2),K(1,` Render mode `),R(2,`code`),K(3),z(),K(4,` (ServerRoute `),R(5,`code`),K(6),z(),K(7,`) `),z()),e&2){let e=t;D(3),q(e.mode),D(3),q(e.path)}}function Zz(e,t){if(e&1&&(R(0,`p`,5),K(1),z()),e&2){W();let e=I_(0);D(),q(e.stopped)}}function Qz(e,t){if(e&1&&(R(0,`p`,2),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}var $z=class e{preview=$.required();paramText=X(()=>Object.entries(this.preview().params).map(([e,t])=>`${e}=${t}`).join(`, `));sources=X(()=>this.preview().chain.filter(e=>e.source));static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-preview`]],inputs:{preview:[1,`preview`]},decls:18,vars:9,consts:[[`aria-labelledby`,`route-preview-heading`,1,`card`],[`id`,`route-preview-heading`],[1,`muted`],[`aria-label`,`Redirects`,1,`hops`],[1,`steps`],[1,`note`],[`aria-hidden`,`true`],[1,`visually-hidden`],[1,`badge`],[1,`tag`],[`data-tone`,`bad`,1,`badge`],[1,`phase`]],template:function(e,t){if(e&1&&(P_(0),R(1,`section`,0)(2,`h3`,1),K(3,` What happens if you go to `),R(4,`code`),K(5),z()(),R(6,`p`,2),K(7,`Predicted from the live route config. Nothing ran in the app.`),z(),A(8,Lz,3,0,`ol`,3),A(9,Vz,5,2,`p`)(10,Uz,5,1,`p`),A(11,Wz,4,1,`p`,2),A(12,qz,3,0,`ol`,4),A(13,Yz,4,0,`p`,2),A(14,Xz,8,2,`p`,2),A(15,Zz,2,1,`p`,5),M(16,Qz,2,1,`p`,2,eg),z()),e&2){let e,n,r=F_(t.preview());D(5),q(r.url),D(3),j(r.hops.length?8:-1),D(),j(r.chain.length?9:10),D(2),j((e=t.paramText())?11:-1,e),D(),j(r.steps.length?12:-1),D(),j(t.sources().length?13:-1),D(),j((n=r.renderMode)?14:-1,n),D(),j(r.stopped?15:-1),D(),N(r.notes)}},styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-}
-
-p[_ngcontent-%COMP%], 
-ol[_ngcontent-%COMP%], 
-ul[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.hops[_ngcontent-%COMP%], 
-.steps[_ngcontent-%COMP%] {
-  padding-left: 20px;
-}
-
-.steps[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
-  margin-top: 6px;
-}
-
-.steps[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  padding-left: 16px;
-}
-
-.phase[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-}`]})},eB=[`urlInput`],tB=[`grid`],nB=()=>[],rB=(e,t)=>t.node.id;function iB(e,t){if(e&1&&(K(0,` with `),F(1,`code`),K(2),Z_(3,`json`),I()),e&2){W(2);let e=I_(0);D(2),q(Q_(3,1,e.params))}}function aB(e,t){if(e&1&&(F(0,`span`,23),K(1,`match`),I(),K(2,` Matches `),F(3,`code`,24),K(4),I(),A(5,iB,4,3)),e&2){W();let e=I_(0),t=W();D(4),q(t.chainText(e)),D(),j(t.hasKeys(e.params)?5:-1)}}function oB(e,t){if(e&1&&(K(0,` Nearest: `),F(1,`code`),K(2),I()),e&2){W(2);let e=I_(0);D(2),q(e.nearest.join(`, `))}}function sB(e,t){if(e&1&&(F(0,`span`,25),K(1,`no match`),I(),K(2,` Matches no route (NG04002). `),A(3,oB,3,1)),e&2){W();let e=I_(0);D(3),j(e.nearest.length?3:-1)}}function cB(e,t){if(e&1&&(F(0,`div`,22),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function lB(e,t){if(e&1&&(P_(0),F(1,`div`,10)(2,`span`,21),K(3,`Result for `),F(4,`code`),K(5),I(),K(6,`:`),I(),A(7,aB,6,2)(8,sB,4,1),M(9,cB,2,1,`div`,22,eg),I()),e&2){let e=t,n=F_(e.result);D(),k(`data-matched`,n.matched),D(4),q(e.url),D(2),j(n.matched?7:8),D(2),N(n.notes)}}function uB(e,t){e&1&&L(0,`app-route-preview`,11),e&2&&P(`preview`,t)}function dB(e,t){if(e&1&&(F(0,`p`,12),K(1),I()),e&2){let e=W();D(),q(e.message())}}function fB(e,t){if(e&1&&(F(0,`p`,14),K(1),I()),e&2){let e=W();D(),q(e.navigationOff)}}function pB(e,t){if(e&1&&(F(0,`span`,26),K(1),I(),K(2,`. `)),e&2){let e=W(2);D(),q(e.countText())}}function mB(e,t){if(e&1&&K(0),e&2){let e=W(2);J(` `,e.plural(e.total(),`route`),`. `)}}function hB(e,t){e&1&&K(0),e&2&&J(` `,W(2).plural(t,`route`),` left out: the page lists at most 200 routes per level and 1000 in total. `)}function gB(e,t){if(e&1&&(F(0,`p`,17),K(1),A(2,pB,3,1)(3,mB,1,1),K(4,` Lazy routes show their children once loaded. `),A(5,hB,1,1),I()),e&2){let e,t=W();D(),J(` Generation `,t.page().generation,` · `),D(),j(t.filter()?2:3),D(3),j((e=t.page().configTruncated)?5:-1,e)}}function _B(e,t){e&1&&(F(0,`app-state`,18),K(1,` The page has not reported its route config yet. `),F(2,`p`,27),K(3,`It appears once the router initializes. Navigate in the app if it stays empty.`),I()())}function vB(e,t){if(e&1){let e=B();F(0,`app-state`,28),H(`clear`,function(){S(e);let t=W(),n=Pg(19);return t.setFilter(``),C(n.focus())}),K(1,` No routes match the filter. `),F(2,`p`,27),K(3,`Try a shorter path or a component name.`),I()()}}function yB(e,t){if(e&1){let e=B();F(0,`span`,46),H(`click`,function(){S(e);let t=W().$implicit;return C(W(2).toggle(t.node.id))}),I()}if(e&2){let e=W().$implicit;G(`open`,e.expanded)}}function bB(e,t){e&1&&L(0,`span`,37)}function xB(e,t){e&1&&(F(0,`span`,38),K(1,`active`),I())}function SB(e,t){if(e&1&&(F(0,`span`,38),K(1),I()),e&2){let e=W().$implicit;D(),J(`lazy `,e.node.lazy)}}function CB(e,t){if(e&1&&(F(0,`span`,38),K(1),I()),e&2){let e=W().$implicit;D(),J(`outlet `,e.node.outlet)}}function wB(e,t){if(e&1&&(F(0,`span`,39)(1,`span`,33),K(2,`declared in `),I(),L(3,`app-source-link`,47),I()),e&2){let e=W().$implicit;D(3),P(`file`,e.at.file)(`line`,e.at.line)}}function TB(e,t){if(e&1&&(F(0,`span`,41),K(1,`redirect `),F(2,`span`,48),K(3,`→`),I(),F(4,`code`),K(5),I()()),e&2){let e=W().$implicit;D(5),q(e.node.redirectTo)}}function EB(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,e.node.component??(e.node.lazy===`unloaded`?`lazy, not loaded yet`:e.node.kind),` `)}}function DB(e,t){if(e&1&&(F(0,`span`,38),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function OB(e,t){if(e&1&&(F(0,`span`,38),K(1),I()),e&2){let e=t.$implicit;D(),J(`resolve `,e)}}function kB(e,t){e&1&&(F(0,`span`,49),K(1,`–`),I(),F(2,`span`,33),K(3,`none`),I())}function AB(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,e.node.title,` `)}}function jB(e,t){e&1&&(F(0,`span`,49),K(1,`–`),I(),F(2,`span`,33),K(3,`none`),I())}function MB(e,t){if(e&1){let e=B();F(0,`input`,51),H(`input`,function(t){let n=S(e).$implicit,r=W(2).$implicit;return C(W(2).setParam(r.node.id,n,t.target.value))}),I()}if(e&2){let e=t.$implicit,n=W(2).$implicit,r=W(2);P(`placeholder`,e)(`value`,r.paramValues()[n.node.id]?.[e]??``),k(`aria-label`,e+` for `+n.node.fullPath)(`aria-invalid`,r.isInvalid(n.node,e)?`true`:null)(`aria-describedby`,r.isInvalid(n.node,e)?`route-tree-row-result`:null)}}function NB(e,t){if(e&1){let e=B();M(0,MB,1,5,`input`,50,eg),F(2,`button`,9),H(`click`,function(){S(e);let t=W().$implicit,n=Pg(1);return C(W(2).navigate(t.node,n))}),K(3,` Go `),I()}if(e&2){let e=W().$implicit,t=W(2);N(t.params(e.node)),D(2),P(`disabled`,!t.navigationAllowed()),k(`aria-describedby`,t.navigationAllowed()?null:`route-tree-writes-off`)(`aria-label`,`Navigate to `+e.node.fullPath)}}function PB(e,t){if(e&1){let e=B();F(0,`button`,8),H(`click`,function(){S(e);let t=W().$implicit;return C(W(2).resolveLazy(t.node))}),K(1,` Read lazy `),I()}if(e&2){let e=W().$implicit;k(`aria-label`,`Read lazy routes of `+e.node.fullPath)}}function FB(e,t){if(e&1&&(F(0,`tr`,45)(1,`td`,52)(2,`p`,53),K(3),I()()()),e&2){let e=W(3);D(3),q(e.rowResult()?.text)}}function IB(e,t){if(e&1){let e=B();F(0,`tr`,34,3),H(`focus`,function(){let t=S(e).$implicit;return C(W(2).focusId.set(t.node.id))})(`keydown`,function(t){let n=S(e).$index;return C(W(2).onRowKey(t,n))}),F(2,`td`,35),A(3,yB,1,2,`span`,36)(4,bB,1,0,`span`,37),K(5),A(6,xB,2,0,`span`,38),A(7,SB,2,1,`span`,38),A(8,CB,2,1,`span`,38),A(9,wB,4,2,`span`,39),I(),F(10,`td`,40),A(11,TB,6,1,`span`,41)(12,EB,1,1),I(),F(13,`td`,40),M(14,DB,2,1,`span`,38,$h),M(16,OB,2,1,`span`,38,eg),A(18,kB,4,0),I(),F(19,`td`,40),A(20,AB,1,1)(21,jB,4,0),I(),F(22,`td`,42)(23,`div`,43),A(24,NB,4,3),A(25,PB,2,1,`button`,44),I()()(),A(26,FB,4,1,`tr`,45)}if(e&2){let e=t.$implicit,n=W(2);G(`active`,n.isActive(e.node)),k(`data-id`,e.node.id)(`aria-level`,e.depth+1)(`aria-expanded`,e.expandable?e.expanded:null)(`tabindex`,e.node.id===n.focusRowId()?0:-1),D(2),t_(`padding-left`,6+e.depth*16,`px`),D(),j(e.expandable?3:4),D(2),J(` `,e.node.fullPath,` `),D(),j(n.isActive(e.node)?6:-1),D(),j(e.node.lazy?7:-1),D(),j(e.node.outlet?8:-1),D(),j(e.at?9:-1),D(2),j(e.node.redirectTo===void 0?12:11),D(3),N(n.guardList(e.node)),D(2),N(e.node.resolvers??G_(20,nB)),D(2),j(!n.guardList(e.node).length&&!e.node.resolvers?.length?18:-1),D(2),j(e.node.title?20:21),D(4),j(n.canNavigate(e.node)?24:-1),D(),j(e.node.kind===`lazy`&&e.node.lazy===`unloaded`?25:-1),D(),j(n.rowResult()?.id===e.node.id?26:-1)}}function LB(e,t){if(e&1&&(F(0,`div`,20)(1,`table`,29,2)(3,`thead`,30)(4,`tr`,31)(5,`th`,32),K(6,`Path`),I(),F(7,`th`,32),K(8,`Target`),I(),F(9,`th`,32),K(10,`Guards and resolvers`),I(),F(11,`th`,32),K(12,`Title`),I(),F(13,`th`,32)(14,`span`,33),K(15,`Actions`),I()()()(),F(16,`tbody`,30),M(17,IB,27,21,null,null,rB),I()()()),e&2){let e=W();D(17),N(e.rows())}}function RB(e,t){return`${e} of ${t} ${t===1?`route`:`routes`}`}var zB=class e{plural=WE;page=$.required();rpc=$(null);navigationAllowed=X(()=>OT(this.rpc(),`router`));navigationOff=Mw(`router`);sources=$([]);filter=T(``);testUrl=T(``);pageId=X(()=>this.page().pageId);match=Q({source:this.pageId,computation:()=>null});message=Q({source:this.pageId,computation:()=>``});rowResult=Q({source:this.pageId,computation:()=>null});paramValues=Q({source:this.pageId,computation:()=>({})});checkedRow=Q({source:this.pageId,computation:()=>null});filterAnnouncement=Q({source:this.pageId,computation:()=>``});preview=Q({source:this.pageId,computation:()=>null});predictSeq=0;announceFlip=!1;probeSeq=0;urlInput=hv(`urlInput`);active=X(()=>new Set(this.page().activeIds??[]));collapsed=Q({source:this.pageId,computation:()=>new Set});focusId=Q({source:this.pageId,computation:()=>null});grid=hv(`grid`);rows=X(()=>{let e=this.filter().toLowerCase(),t=this.sources(),n=this.collapsed(),r=[],i=(a,o)=>{for(let s of a){let a=TI(s,t),c=a&&wI(a),l=!e&&!!s.children?.length,u=l&&!n.has(s.id);(!e||s.fullPath.toLowerCase().includes(e)||s.component?.toLowerCase().includes(e)||c?.toLowerCase().includes(e))&&r.push({node:s,depth:o,source:c,at:a,expandable:l,expanded:u}),s.children&&(e||u)&&i(s.children,o+1)}};return i(this.page().config??[],0),r});focusRowId=X(()=>{let e=this.rows(),t=this.focusId();return e.some(e=>e.node.id===t)?t:e[0]?.node.id??null});toggle(e,t){this.collapsed.update(n=>{let r=new Set(n);return(t===void 0?!r.has(e):!t)?r.add(e):r.delete(e),r})}onRowKey(e,t){if(e.target!==e.currentTarget||e.altKey||e.ctrlKey||e.metaKey)return;let n=this.rows(),r=n[t];if(!r)return;let i=null;switch(e.key){case`ArrowDown`:i=Math.min(n.length-1,t+1);break;case`ArrowUp`:i=Math.max(0,t-1);break;case`Home`:i=0;break;case`End`:i=n.length-1;break;case`ArrowRight`:r.expandable&&!r.expanded?this.toggle(r.node.id,!0):r.expanded&&n[t+1]?.depth===r.depth+1&&(i=t+1);break;case`ArrowLeft`:if(r.expandable&&r.expanded)this.toggle(r.node.id,!1);else for(let e=t-1;e>=0;e--)if(n[e].depth<r.depth){i=e;break}break;default:return}e.preventDefault(),i!==null&&this.focusRow(n[i].node.id)}focusRow(e){this.focusId.set(e);let t=this.grid()?.nativeElement.querySelectorAll(`tr.tree-row`)??[];Array.from(t).find(t=>t.dataset.id===e)?.focus()}total=X(()=>{let e=t=>t.reduce((t,n)=>t+1+e(n.children??[]),0);return e(this.page().config??[])});countText=X(()=>RB(this.rows().length,this.total()));setFilter(e){this.filter.set(e);let t=this.rows().length,n=e?t?`${RB(t,this.total())} match.`:`No routes match.`:``;this.announceFlip=!this.announceFlip,this.filterAnnouncement.set(n&&(this.announceFlip?`${n}\u00a0`:n))}hasKeys(e){return Object.keys(e).length>0}isActive(e){return this.active().has(e.id)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>(t??[]).map(t=>`${e} ${t}`))}params(e){return(e.fullPath.match(/:([A-Za-z0-9_]+)/g)??[]).map(e=>e.slice(1))}canNavigate(e){return e.redirectTo===void 0&&!e.matcher&&!e.outlet&&!e.fullPath.includes(`**`)&&(!!e.component||e.kind===`component`||e.kind===`lazy`)}setParam(e,t,n){this.paramValues.update(r=>({...r,[e]:{...r[e],[t]:n}}))}missingParams(e){let t=this.paramValues()[e.id]??{};return this.params(e).filter(e=>!t[e])}isInvalid(e,t){return this.checkedRow()===e.id&&!this.paramValues()[e.id]?.[t]}chainText(e){return e.chain.map(e=>e.fullPath).join(` → `)}editUrl(e){this.testUrl.set(e),this.predictSeq++,this.probeSeq++,this.match.set(null),this.preview.set(null),this.message.set(``)}askForUrl(e){this.match.set(null),this.message.set(`Type a URL to ${e}, for example /users/42.`),this.urlInput()?.nativeElement.focus()}async predict(){let e=this.testUrl().trim(),t=++this.predictSeq;if(!e){this.askForUrl(`predict`);return}let n=this.pageId(),r=await OI(this.rpc(),`router-match`,{pageId:n,app:this.page().appId,url:e});t===this.predictSeq&&n===this.pageId()&&(this.preview.set(null),this.match.set(r&&{url:e,result:r}),r?this.message()===`Could not reach the page.`&&this.message.set(``):this.message.set(AI))}async whatHappens(){let e=this.testUrl().trim(),t=++this.predictSeq;if(!e){this.preview.set(null),this.askForUrl(`preview`);return}let n=this.pageId(),r=await OI(this.rpc(),`router-preview`,{pageId:n,app:this.page().appId,url:e});if(t!==this.predictSeq||n!==this.pageId())return;if(!r||`error`in r){this.preview.set(null),this.message.set(r?.error??`Could not reach the page.`);return}this.match.set(null),this.preview.set(r);let i=r.steps.length?`, ${WE(r.steps.length,`step`)} listed`:``,a=r.chain.length?`${r.matched?`Matches`:`Stops at`} ${r.chain.map(e=>e.path).join(` then `)}${i}.`:`${e} matches no route.`;this.message.set(r.stopped?`${a} ${r.stopped}`:a)}async probe(){let e=this.testUrl().trim(),t=++this.probeSeq;if(!e){this.askForUrl(`probe`);return}this.message.set(`Running the real matcher in the app…`);let n=this.pageId(),r=await jI(this.rpc(),n,{action:`probe`,url:e},this.page().appId);if(t===this.probeSeq&&n===this.pageId()){if(r.error){this.message.set(String(r.error));return}this.message.set(r.matched?`The app recognized ${e} and its canMatch guards passed. The probe stopped before canActivate guards and resolvers, so those did not run. See the probe entry in Navigations.`:typeof r.redirectedTo==`string`?`A canMatch guard or the navigation error handler redirected ${e} to ${r.redirectedTo}. The probe stopped that navigation before it rendered anything.`:`The app could not recognize ${e}: ${String(r.reason??``)}`)}}async navigate(e,t){let n=this.missingParams(e);if(n.length){this.checkedRow.set(e.id),this.rowResult.set({id:e.id,text:`Fill in ${n.map(e=>`:${e}`).join(`, `)} to navigate.`}),Array.from(t?.querySelectorAll(`input.param`)??[]).find(e=>!e.value)?.focus();return}this.checkedRow.set(null),this.rowResult.set({id:e.id,text:`Navigating to ${e.fullPath}…`});let r=this.pageId(),i=await jI(this.rpc(),r,{action:`navigate`,pattern:e.fullPath,params:this.paramValues()[e.id]??{}},this.page().appId);r===this.pageId()&&this.rowResult.set({id:e.id,text:i.error?String(i.error):`Navigation #${i.id}: ${i.outcome}${i.finalUrl?` at ${i.finalUrl}`:``}.`})}async resolveLazy(e){let t=this.pageId(),n=await jI(this.rpc(),t,{action:`resolve-lazy`,id:e.id},this.page().appId);if(t!==this.pageId())return;if(n.error){this.rowResult.set({id:e.id,text:String(n.error)});return}let r=n.routes??[];this.rowResult.set({id:e.id,text:`${e.fullPath} declares ${WE(r.length,`route`)}: ${r.map(e=>`/${e.path}`).join(`, `)}. The router loads them for real on the first navigation that needs them.`})}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-tree`]],viewQuery:function(e,t){e&1&&Mg(t.urlInput,eB,5)(t.grid,tB,5),e&2&&Ng(2)},inputs:{page:[1,`page`],rpc:[1,`rpc`],sources:[1,`sources`]},decls:26,vars:12,consts:[[`urlInput`,``],[`filterInput`,``],[`grid`,``],[`rowEl`,``],[1,`test`,3,`submit`],[`for`,`test-url`],[`id`,`test-url`,`type`,`text`,`placeholder`,`/users/42`,1,`field`,3,`input`,`value`],[`type`,`submit`,1,`small`,`primary`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`result`],[3,`preview`],[`role`,`status`,1,`message`],[`role`,`status`,1,`visually-hidden`],[`id`,`route-tree-writes-off`,1,`message`],[1,`filter-row`],[`placeholder`,`Filter by path, component or file`,`saveKey`,`router-config`,1,`filter`,3,`valueChange`,`value`],[1,`muted`,`summary`],[`kind`,`empty`],[`kind`,`no-match`],[`role`,`region`,`aria-label`,`Live route config`,`tabindex`,`0`,1,`table-scroll`],[1,`for`],[1,`muted`],[`data-tone`,`good`,1,`badge`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`count`],[`detail`,``],[`kind`,`no-match`,3,`clear`],[`role`,`treegrid`,`aria-label`,`Routes`],[`role`,`rowgroup`],[`role`,`row`],[`role`,`columnheader`,`scope`,`col`],[1,`visually-hidden`],[`role`,`row`,1,`tree-row`,3,`focus`,`keydown`],[`role`,`gridcell`,1,`path`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[1,`tag`],[1,`src`],[`role`,`gridcell`],[1,`redirect`],[`role`,`gridcell`,1,`actions`],[1,`actions-inner`],[`type`,`button`,1,`small`],[`role`,`row`,1,`row-result`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[3,`file`,`line`],[`aria-hidden`,`true`],[`aria-hidden`,`true`,1,`nil`],[`type`,`text`,1,`field`,`param`,3,`placeholder`,`value`],[`type`,`text`,1,`field`,`param`,3,`input`,`placeholder`,`value`],[`role`,`gridcell`,`colspan`,`5`],[`id`,`route-tree-row-result`]],template:function(e,t){if(e&1){let e=B();F(0,`form`,4),H(`submit`,function(n){return S(e),n.preventDefault(),C(t.predict())}),F(1,`label`,5),K(2,`Test a URL`),I(),F(3,`input`,6,0),H(`input`,function(e){return t.editUrl(e.target.value)}),I(),F(5,`button`,7),K(6,`Predict`),I(),F(7,`button`,8),H(`click`,function(){return t.whatHappens()}),K(8,`What happens`),I(),F(9,`button`,9),H(`click`,function(){return t.probe()}),K(10,` Probe in app `),I()(),A(11,lB,11,4,`div`,10),A(12,uB,1,1,`app-route-preview`,11),A(13,dB,2,1,`p`,12),F(14,`p`,13),K(15),I(),A(16,fB,2,1,`p`,14),F(17,`div`,15)(18,`app-search-field`,16,1),H(`valueChange`,function(e){return t.setFilter(e)}),I(),A(20,gB,6,3,`p`,17),I(),F(21,`p`,13),K(22),I(),A(23,_B,4,0,`app-state`,18)(24,vB,4,0,`app-state`,19)(25,LB,19,0,`div`,20)}if(e&2){let e,n;D(3),P(`value`,t.testUrl()),D(6),P(`disabled`,!t.navigationAllowed()),k(`aria-describedby`,t.navigationAllowed()?null:`route-tree-writes-off`),D(2),j((e=t.match())?11:-1,e),D(),j((n=t.preview())?12:-1,n),D(),j(t.message()?13:-1),D(2),q(t.rowResult()?.text),D(),j(t.navigationAllowed()?-1:16),D(2),P(`value`,t.filter()),D(2),j(t.page().config?20:-1),D(2),q(t.filterAnnouncement()),D(),j(t.page().config?t.rows().length?25:24:23)}},dependencies:[$N,$z,bj,HL,$v],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.test[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.test[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
-  margin-right: 4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.test[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.result[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  padding: 10px 14px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.result[data-matched=true][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%ok);
-}
-
-.result[data-matched=false][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%danger);
-}
-
-.result[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
-  flex-basis: 100%;
-  font-size: 12px;
-}
-
-.result[_ngcontent-%COMP%]   .for[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.result[_ngcontent-%COMP%]   .for[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.chain[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-
-.message[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 13px;
-  overflow-wrap: anywhere;
-}
-
-.filter-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
-  align-items: center;
-}
-
-.filter[_ngcontent-%COMP%] {
-  flex: 0 1 320px;
-  min-width: 0;
-}
-
-.summary[_ngcontent-%COMP%] {
-  flex: 1 1 240px;
-  margin: 0;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.summary[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 600;
-}
-
-td[_ngcontent-%COMP%] {
-  vertical-align: middle;
-}
-
-.redirect[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.src[_ngcontent-%COMP%] {
-  display: block;
-  margin-top: 2px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  overflow-wrap: anywhere;
-}
-
-.tree-row[_ngcontent-%COMP%] {
-  cursor: default;
-}
-
-.tree-row[_ngcontent-%COMP%]:focus {
-  outline: none;
-}
-
-.tree-row[_ngcontent-%COMP%]:focus-visible   td[_ngcontent-%COMP%] {
-  box-shadow: inset 0 2px 0 var(--%NS%accent), inset 0 -2px 0 var(--%NS%accent);
-}
-
-.tree-row[_ngcontent-%COMP%]:focus-visible   td[_ngcontent-%COMP%]:first-child {
-  box-shadow: inset 2px 0 0 var(--%NS%accent), inset 0 2px 0 var(--%NS%accent), inset 0 -2px 0 var(--%NS%accent);
-}
-
-.tree-row[_ngcontent-%COMP%]:focus-visible   td[_ngcontent-%COMP%]:last-child {
-  box-shadow: inset -2px 0 0 var(--%NS%accent), inset 0 2px 0 var(--%NS%accent), inset 0 -2px 0 var(--%NS%accent);
-}
-
-.twisty[_ngcontent-%COMP%], 
-.twisty-space[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  margin-right: 2px;
-  vertical-align: -3px;
-}
-
-.twisty[_ngcontent-%COMP%] {
-  position: relative;
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.twisty[_ngcontent-%COMP%]::before {
-  position: absolute;
-  top: 4px;
-  left: 6px;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-  border-left: 5px solid currentColor;
-  content: "";
-  transition: transform 0.15s var(--%NS%ease);
-}
-
-.twisty.open[_ngcontent-%COMP%]::before {
-  transform: rotate(90deg);
-}
-
-.twisty[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .twisty[_ngcontent-%COMP%]::before {
-    transition: none;
-  }
-}
-tr.active[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-tr.active[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
-}
-
-tr.active[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
-  box-shadow: inset 3px 0 0 var(--%NS%accent);
-}
-
-.actions[_ngcontent-%COMP%] {
-  width: 1%;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  white-space: nowrap;
-}
-
-.actions-inner[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.param[_ngcontent-%COMP%] {
-  width: 96px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.param[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-}
-
-.row-result[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  padding-top: 0;
-  background: transparent;
-}
-
-.row-result[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  font-size: 13px;
-  overflow-wrap: anywhere;
-}
-
-@media (max-width: 480px) {
-  .filter[_ngcontent-%COMP%] {
-    flex-basis: 100%;
-  }
-}`]})},BB=(e,t)=>t.id;function VB(e,t){if(e&1){let e=B();F(0,`div`,4)(1,`span`,5),K(2,`Page`),I(),F(3,`app-select`,6),H(`valueChange`,function(t){return S(e),C(W(2).pageId.set(t))}),I()()}if(e&2){let e=W(),t=W();D(3),P(`options`,t.pageOptions())(`value`,e.pageId)}}function HB(e,t){if(e&1){let e=B();F(0,`div`,4)(1,`span`,7),K(2,`App`),I(),F(3,`app-select`,8),H(`valueChange`,function(t){return S(e),C(W(2).appId.set(t))}),I()()}if(e&2){let e=W(),t=W();D(3),P(`options`,t.appOptions())(`value`,e.appId??``)}}function UB(e,t){if(e&1&&(A(0,VB,4,2,`div`,4),A(1,HB,4,2,`div`,4)),e&2){let e=W();j(e.pages().length>1?0:-1),D(),j(e.appOptions().length>1?1:-1)}}function WB(e,t){if(e&1){let e=B();F(0,`app-state`,9),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Could not load the live router state. `),F(2,`p`,10),K(3,` Check that the dev server with Pangular Inspector is still running, then retry. `),I()()}}function GB(e,t){e&1&&(F(0,`app-state`,2),K(1,`Loading the live router state…`),I())}function KB(e,t){if(e&1&&(F(0,`span`,15),K(1),I(),F(2,`span`,16),K(3),I()),e&2){let e=W(3);D(),q(e.problems()),D(2),J(`, `,e.problems(),` problem navigations`)}}function qB(e,t){if(e&1){let e=B();F(0,`button`,14),H(`click`,function(){let t=S(e).$implicit;return C(W(2).selected.set(t.id))}),K(1),A(2,KB,4,2),I()}if(e&2){let e=t.$implicit,n=W(2);P(`id`,`router-tab-`+e.id),k(`aria-selected`,e.id===n.selected())(`aria-controls`,`router-panel-`+e.id)(`tabindex`,e.id===n.selected()?0:-1),D(),J(` `,e.label,` `),D(),j(e.id===`navigations`&&n.problems()>0?2:-1)}}function JB(e,t){if(e&1){let e=B();F(0,`app-route-current`,21),H(`showComponent`,function(t){return S(e),C(W(3).showComponent.emit(t))}),I()}if(e&2){let e=W(2),t=W();P(`page`,e)(`rpc`,t.rpc())}}function YB(e,t){if(e&1){let e=B();F(0,`app-route-timeline`,22),H(`compare`,function(t){return S(e),C(W(3).compareFrom(t))}),I()}if(e&2){let e=W(2),t=W();P(`page`,e)(`rpc`,t.rpc())}}function XB(e,t){if(e&1&&L(0,`app-route-diff`,18),e&2){let e=W(2),t=W();P(`page`,e)(`rpc`,t.rpc())(`start`,t.compareStart())}}function ZB(e,t){if(e&1&&L(0,`app-route-tree`,19),e&2){let e=W(2),t=W();P(`page`,e)(`rpc`,t.rpc())(`sources`,t.sources())}}function QB(e,t){e&1&&L(0,`app-route-setup`,20),e&2&&P(`page`,W(2))}function $B(e,t){if(e&1&&L(0,`app-route-lint`,17),e&2){let e=W(2),t=W();P(`page`,e)(`rpc`,t.rpc())}}function eV(e,t){if(e&1&&A(0,JB,1,2,`app-route-current`,17)(1,YB,1,2,`app-route-timeline`,17)(2,XB,1,3,`app-route-diff`,18)(3,ZB,1,3,`app-route-tree`,19)(4,QB,1,1,`app-route-setup`,20)(5,$B,1,2,`app-route-lint`,17),e&2){let e;j((e=W(2).selected())===`current`?0:e===`navigations`?1:e===`compare`?2:e===`routes`?3:e===`setup`?4:e===`lint`?5:-1)}}function tV(e,t){if(e&1){let e=B();F(0,`div`,11),H(`keydown`,function(t){return S(e),C(W().onKey(t))}),M(1,qB,3,6,`button`,12,BB),I(),F(3,`div`,13),M(4,eV,6,1,null,null,eg),I()}if(e&2){let e=W();D(),N(e.tabs),D(2),P(`id`,`router-panel-`+e.selected()),k(`aria-labelledby`,`router-tab-`+e.selected()),D(),N(e.viewKey())}}function nV(e,t){e&1&&(F(0,`div`,3)(1,`p`,23),K(2,`No page is reporting router state yet.`),I(),F(3,`p`,24),K(4,` Open the app in a browser. This view updates as soon as a page connects. `),I()())}var rV=[{id:`current`,label:`Current`},{id:`navigations`,label:`Navigations`},{id:`compare`,label:`Compare`},{id:`routes`,label:`Config`},{id:`setup`,label:`Setup`},{id:`lint`,label:`Lint`}],iV=class e{rpc=$(null);sources=$([]);showComponent=cv();tabs=rV;selected=T(`current`);compareStart=T(null);pages=T([]);hostPageId=tT();loading=T(!0);failed=T(!1);pageId=Q({source:this.pages,computation:(e,t)=>nT(Object.fromEntries(e.map(e=>[e.pageId,e])),{chosen:t?.value??null,host:this.hostPageId,previous:null})});unsubscribe=null;destroyRef=x(Ss);reported=X(()=>this.pages().find(e=>e.pageId===this.pageId())??null);appId=Q({source:this.reported,computation:(e,t)=>{let n=EI(e);if(!n.length)return null;let r=t?.value;return n.some(e=>e.id===r)?r:n[0].id}});page=X(()=>{let e=this.reported();return e?DI(e,this.appId()):null});viewKey=X(()=>[`${this.pageId()??``} ${this.appId()??``}`]);appOptions=X(()=>EI(this.reported()).map(e=>({value:e.id,label:e.name===e.selector?`<${e.selector}>`:`${e.name} <${e.selector}>`,hint:(e.primary?this.reported()?.snapshot?.url:e.snapshot?.url)??e.id})));problems=X(()=>(this.page()?.navigations??[]).filter(e=>!e.probe&&[`failed`,`cancelled`,`redirected`].includes(e.outcome)).length);constructor(){E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`router`);if(this.destroyRef.destroyed)return;let n=e=>{this.pages.set(e?.pages??[])};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}compareFrom(e){this.compareStart.set(e),this.selected.set(`compare`),setTimeout(()=>document.getElementById(`router-tab-compare`)?.focus())}retry(){let e=this.rpc();e&&this.load(e)}pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.snapshot?.url??e.pageId,hint:e.pageId})));onKey(e){let t=this.tabs.map(e=>e.id),n=t.indexOf(this.selected()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.selected.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#router-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-live-route`]],inputs:{rpc:[1,`rpc`],sources:[1,`sources`]},outputs:{showComponent:`showComponent`},decls:8,vars:2,consts:[[1,`section-head`],[`kind`,`error`],[`kind`,`loading`],[1,`empty`],[1,`page-pick`],[`id`,`live-route-page-label`,1,`page-label`],[`labelledBy`,`live-route-page-label`,3,`valueChange`,`options`,`value`],[`id`,`live-route-app-label`,1,`page-label`],[`labelledBy`,`live-route-app-label`,3,`valueChange`,`options`,`value`],[`kind`,`error`,3,`retry`],[`detail`,``],[`role`,`tablist`,`aria-label`,`Router views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[`aria-hidden`,`true`,1,`count`],[1,`visually-hidden`],[3,`page`,`rpc`],[3,`page`,`rpc`,`start`],[3,`page`,`rpc`,`sources`],[3,`page`],[3,`showComponent`,`page`,`rpc`],[3,`compare`,`page`,`rpc`],[1,`empty-title`],[1,`muted`]],template:function(e,t){if(e&1&&(F(0,`div`,0)(1,`h2`),K(2,`Live router`),I(),A(3,UB,2,2),I(),A(4,WB,4,0,`app-state`,1)(5,GB,2,0,`app-state`,2)(6,tV,6,2)(7,nV,5,0,`div`,3)),e&2){let e,n;D(3),j((e=t.page())?3:-1,e),D(),j(t.failed()?4:t.loading()?5:(n=t.page())?6:7,n)}},dependencies:[HL,_L,FL,nR,gR,Nz,zB,wD],styles:[`[_nghost-%COMP%] {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  margin-bottom: 32px;
-}
-
-.section-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 34px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.retry[_ngcontent-%COMP%] {
-  height: 34px;
-  margin-top: 8px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-.retry[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.retry[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.page-pick[_ngcontent-%COMP%] {
-  display: flex;
-  flex: 0 1 420px;
-  gap: 10px;
-  align-items: center;
-  min-width: 0;
-}
-
-.page-label[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.page-pick[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  width: 100%;
-}
-
-.tabs[_ngcontent-%COMP%] {
-  display: flex;
-  justify-self: start;
-  max-width: 100%;
-  gap: 2px;
-  padding: 3px;
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: 10px;
-  background: var(--%NS%bg);
-}
-
-[role=tab][_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 6px;
-  height: 26px;
-  padding: 0 12px;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-[role=tab][_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-[role=tab][aria-selected=true][_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
-}
-
-[role=tab][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.panel[_ngcontent-%COMP%] {
-  min-width: 0;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.count[_ngcontent-%COMP%] {
-  min-width: 18px;
-  padding: 0 6px;
-  border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  border-radius: 99px;
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 16px;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}`]})},aV=[`*`];function oV(e,t){return e?.column===t?e.direction===`ascending`?{column:t,direction:`descending`}:null:{column:t,direction:`ascending`}}var sV=new Intl.Collator(void 0,{numeric:!0,sensitivity:`base`});function cV(e,t){let n=e==null||e===``,r=t==null||t===``;return n||r?n===r?0:n?1:-1:typeof e==`number`&&typeof t==`number`?e-t:sV.compare(String(e),String(t))}function lV(e,t,n){let r=t&&n[t.column];if(!t||!r)return e;let i=t.direction===`ascending`?1:-1;return e.map((e,t)=>({row:e,index:t,value:r(e)})).sort((e,t)=>{let n=e.value===void 0||e.value===null||e.value===``;return n===(t.value===void 0||t.value===null||t.value===``)?i*cV(e.value,t.value)||e.index-t.index:n?1:-1}).map(({row:e})=>e)}var uV=class e{column=$.required({alias:`appSortHeader`});sort=pv(null);direction=X(()=>{let e=this.sort();return e?.column===this.column()?e.direction:null});toggle(){this.sort.set(oV(this.sort(),this.column()))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`th`,`appSortHeader`,``]],hostAttrs:[1,`sortable`],hostVars:1,hostBindings:function(e,t){e&2&&k(`aria-sort`,t.direction())},inputs:{column:[1,`appSortHeader`,`column`],sort:[1,`sort`]},outputs:{sort:`sortChange`},ngContentSelectors:aV,decls:3,vars:1,consts:[[`type`,`button`,1,`sort-button`,3,`click`],[`aria-hidden`,`true`,1,`arrow`]],template:function(e,t){e&1&&(kg(),R(0,`button`,0),U(`click`,function(){return t.toggle()}),Ag(1),dg(2,`span`,1),z()),e&2&&(D(2),k(`data-direction`,t.direction()))},styles:[`.sort-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  max-width: 100%;
-  margin: -2px -4px;
-  padding: 2px 4px;
-  border: 0;
-  border-radius: var(--%NS%radius-sm);
-  background: none;
-  color: inherit;
-  font: inherit;
-  letter-spacing: inherit;
-  text-align: inherit;
-  text-transform: inherit;
-  cursor: pointer;
-}
-
-.sort-button[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.sort-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.arrow[_ngcontent-%COMP%] {
-  display: inline-block;
-  flex: none;
-  width: 0;
-  height: 0;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  opacity: 0.45;
-}
-
-.arrow[_ngcontent-%COMP%]:not([data-direction]) {
-  border-top: 4px solid currentColor;
-  border-bottom: 0;
-  transform: translateY(1px);
-}
-
-.arrow[data-direction=ascending][_ngcontent-%COMP%] {
-  border-bottom: 5px solid var(--%NS%accent);
-  opacity: 1;
-}
-
-.arrow[data-direction=descending][_ngcontent-%COMP%] {
-  border-top: 5px solid var(--%NS%accent);
-  opacity: 1;
-}`]})};function dV(e,t){e&1&&K(0,` The Config view above shows what the router uses. `)}function fV(e,t){if(e&1){let e=B();F(0,`button`,14),H(`click`,function(){S(e);let t=W();return C(t.expanded.set(!t.expanded()))}),K(1),I()}if(e&2){let e=W();k(`aria-expanded`,e.expanded()),D(),J(` `,e.expanded()?`Hide table`:`Show table`,` `)}}function pV(e,t){e&1&&(K(0,` Run `),F(1,`code`),K(2,`pangular build`),I(),K(3,` again to rebuild the report. `))}function mV(e,t){e&1&&K(0,` Check that the dev server is running, then retry. `)}function hV(e,t){if(e&1){let e=B();F(0,`app-state`,15),H(`retry`,function(){return S(e),C(W().refresh())}),K(1,` Could not scan the route files. `),F(2,`p`,16),A(3,pV,4,0)(4,mV,1,0),I()()}if(e&2){let e=W();P(`retrying`,e.loading()),D(3),j(e.staticReport()?3:4)}}function gV(e,t){e&1&&(F(0,`app-state`,13),K(1,`Scanning routes…`),I())}function _V(e,t){if(e&1){let e=B();F(0,`app-state`,19),H(`clear`,function(){S(e);let t=W(2),n=Pg(14);return t.filter.set(``),C(n.focus())}),K(1,` No routes match the filter. `),F(2,`p`,16),K(3,`Search by path, component, guard, title or file name.`),I()()}}function vV(e,t){e&1&&(F(0,`app-state`,18),K(1,` No routes found. `),F(2,`p`,16),K(3,` Routes are read from `),F(4,`code`),K(5,`*.routes.ts`),I(),K(6,` and `),F(7,`code`),K(8,`*routing.module.ts`),I(),K(9,` files, the files they lazy load, plus Analog pages. Add one and refresh. `),I()())}function yV(e,t){e&1&&A(0,_V,4,0,`app-state`,17)(1,vV,10,0,`app-state`,18),e&2&&j(+!W().routes().length)}function bV(e,t){if(e&1&&(F(0,`span`,28),K(1),I()),e&2){let e=W().$implicit;D(),q(e.kind)}}function xV(e,t){if(e&1&&(F(0,`span`,29)(1,`span`,33),K(2,`→`),I(),F(3,`span`,34),K(4,`redirects to`),I(),K(5),I()),e&2){let e=W().$implicit;D(5),J(` `,e.redirectTo)}}function SV(e,t){if(e&1&&(F(0,`code`,30),K(1),I()),e&2){let e=W().$implicit;D(),q(e.component)}}function CV(e,t){e&1&&(F(0,`span`,35),K(1,`–`),I(),F(2,`span`,34),K(3,`none`),I())}function wV(e,t){if(e&1&&(F(0,`span`,28),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function TV(e,t){e&1&&(F(0,`span`,35),K(1,`–`),I(),F(2,`span`,34),K(3,`none`),I())}function EV(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,e.title,` `)}}function DV(e,t){e&1&&(F(0,`span`,35),K(1,`–`),I(),F(2,`span`,34),K(3,`none`),I())}function OV(e,t){if(e&1&&(F(0,`tr`)(1,`td`,27),K(2),A(3,bV,2,1,`span`,28),I(),F(4,`td`),A(5,xV,6,1,`span`,29)(6,SV,2,1,`code`,30)(7,CV,4,0),I(),F(8,`td`),M(9,wV,2,1,`span`,28,$h,!1,TV,4,0),I(),F(12,`td`),A(13,EV,1,1)(14,DV,4,0),I(),F(15,`td`,31),L(16,`app-source-link`,32),I()()),e&2){let e=t.$implicit,n=W(2);D(2),J(` `,e.fullPath,` `),D(),j(e.kind===`page`?-1:3),D(2),j(e.redirectTo===void 0?e.component?6:7:5),D(4),N(n.checks(e)),D(4),j(e.title?13:14),D(3),P(`file`,e.file)(`line`,e.line)}}function kV(e,t){if(e&1){let e=B();F(0,`p`,20),K(1),I(),F(2,`div`,21)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,22),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.sort,t)||(n.sort=t),C(t)}),K(7,`Path`),I(),F(8,`th`,23),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.sort,t)||(n.sort=t),C(t)}),K(9,`Component / Target`),I(),F(10,`th`,24),K(11,`Guards and resolvers`),I(),F(12,`th`,25),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.sort,t)||(n.sort=t),C(t)}),K(13,`Title`),I(),F(14,`th`,26),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.sort,t)||(n.sort=t),C(t)}),K(15,`Declared in`),I()()(),F(16,`tbody`),M(17,OV,17,7,`tr`,null,$h),I()()()}if(e&2){let e=W();D(),D_(` `,e.filtered().length,` of `,e.routes().length,` route entries, `,e.navigable(),` navigable `),D(5),A_(`sort`,e.sort),D(2),A_(`sort`,e.sort),D(4),A_(`sort`,e.sort),D(2),A_(`sort`,e.sort),D(3),N(e.sorted())}}var AV=class e{rpc=$(null);showComponent=cv();staticReport=X(()=>cT(this.rpc()));routes=T([]);filter=T(``);loading=T(!1);error=T(!1);live=hv(iV);liveHasConfig=X(()=>!!this.live()?.page()?.config);expanded=Q(()=>!this.liveHasConfig());navigable=X(()=>this.filtered().filter(e=>e.kind===`page`).length);filtered=X(()=>{let e=this.filter().toLowerCase().trim(),t=this.routes();return e?t.filter(t=>t.fullPath.toLowerCase().includes(e)||t.component&&t.component.toLowerCase().includes(e)||t.redirectTo&&t.redirectTo.toLowerCase().includes(e)||t.title&&t.title.toLowerCase().includes(e)||this.checks(t).some(t=>t.toLowerCase().includes(e))||t.file.toLowerCase().includes(e)):t});sort=T(null);sorted=X(()=>lV(this.filtered(),this.sort(),{path:e=>e.fullPath,target:e=>e.component??e.redirectTo,title:e=>e.title,file:e=>`${e.file}:${e.line??0}`}));constructor(){E(()=>{this.rpc()&&this.refresh()})}checks(e){return[...Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`)),...(e.resolvers??[]).map(e=>`resolve ${e}`)]}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.error.set(!1);try{let t=await e.scope(`pangular`).rpc.call(`get-routes`);this.routes.set(t)}catch{this.error.set(!0)}finally{this.loading.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-route-inspector`]],viewQuery:function(e,t){e&1&&Mg(t.live,iV,5),e&2&&Ng()},inputs:{rpc:[1,`rpc`]},outputs:{showComponent:`showComponent`},decls:21,vars:9,consts:[[`filterInput`,``],[1,`page-intro`],[3,`showComponent`,`rpc`,`sources`],[`aria-labelledby`,`config-heading`,1,`config`],[1,`section-head`],[`id`,`config-heading`],[1,`muted`,`hint`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`],[`id`,`config-body`,1,`config-body`,3,`hidden`],[1,`toolbar`],[`placeholder`,`Filter by path, component or file`,`saveKey`,`router-source`,3,`valueChange`,`value`],[`type`,`button`,1,`small`,3,`click`],[`kind`,`error`,3,`retrying`],[`kind`,`loading`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`,3,`click`],[`kind`,`error`,3,`retry`,`retrying`],[`detail`,``],[`kind`,`no-match`],[`kind`,`empty`],[`kind`,`no-match`,3,`clear`],[1,`muted`,`count`],[`role`,`region`,`aria-label`,`Source route config table`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`,`appSortHeader`,`path`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`target`,3,`sortChange`,`sort`],[`scope`,`col`],[`scope`,`col`,`appSortHeader`,`title`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`file`,3,`sortChange`,`sort`],[1,`path`],[1,`tag`],[1,`redirect`],[1,`component`],[1,`file`],[3,`file`,`line`],[`aria-hidden`,`true`],[1,`visually-hidden`],[`aria-hidden`,`true`,1,`nil`]],template:function(e,t){if(e&1){let e=B();F(0,`p`,1),K(1,` The live route, every navigation, the route config the router uses, the router setup and a route lint, read from the live page. Below them, the routes your source files declare. `),I(),F(2,`app-live-route`,2),H(`showComponent`,function(e){return t.showComponent.emit(e)}),I(),F(3,`section`,3)(4,`div`,4)(5,`h2`,5),K(6,`Source route config`),I(),F(7,`span`,6),K(8,` Read from your source files. `),A(9,dV,1,0),I(),A(10,fV,2,2,`button`,7),I(),F(11,`div`,8)(12,`div`,9)(13,`app-search-field`,10,0),M_(`valueChange`,function(n){return S(e),j_(t.filter,n)||(t.filter=n),C(n)}),I(),F(15,`button`,11),H(`click`,function(){return t.refresh()}),K(16),I()(),A(17,hV,5,2,`app-state`,12)(18,gV,2,0,`app-state`,13)(19,yV,2,1)(20,kV,19,7),I()()}e&2&&(D(2),P(`rpc`,t.rpc())(`sources`,t.routes()),D(7),j(t.liveHasConfig()?9:-1),D(),j(t.liveHasConfig()?10:-1),D(),P(`hidden`,!t.expanded()),D(2),A_(`value`,t.filter),D(2),k(`aria-busy`,t.loading()),D(),J(` `,t.loading()?`Scanning…`:`Refresh`,` `),D(),j(t.error()?17:t.loading()&&t.routes().length===0?18:t.filtered().length===0?19:20))},dependencies:[$N,iV,bj,HL,uV],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.nil[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  min-height: 20px;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  line-height: 1.4;
-  vertical-align: middle;
-  overflow-wrap: anywhere;
-  white-space: normal;
-}
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.badge[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.badge[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-button.small[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-button.small[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-button.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button.small[_ngcontent-%COMP%]:focus-visible, 
-.table-scroll[_ngcontent-%COMP%]:focus-visible, 
-input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-input.field[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input.field[_ngcontent-%COMP%] {
-  text-overflow: ellipsis;
-}
-
-input.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input.field[_ngcontent-%COMP%]:hover:not(:focus), 
-select[_ngcontent-%COMP%]:hover:not(:focus) {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
-}
-
-input.field[_ngcontent-%COMP%]:focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  justify-items: center;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 480px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  align-items: baseline;
-  gap: 8px 24px;
-  margin: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  font-size: 13px;
-}
-
-.facts[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  line-height: 1.5;
-  vertical-align: top;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  white-space: nowrap;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 8px 0 -4px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-@media (max-width: 480px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 2px;
-  }
-  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}
-.page-intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.config[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.section-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  align-items: baseline;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.hint[_ngcontent-%COMP%], 
-.count[_ngcontent-%COMP%] {
-  margin: 0;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin-bottom: -4px;
-  padding: 0 4px;
-}
-
-.config-body[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.config-body[hidden][_ngcontent-%COMP%] {
-  display: none;
-}
-
-.toggle[_ngcontent-%COMP%] {
-  margin-left: auto;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.toolbar[_ngcontent-%COMP%]   .field[_ngcontent-%COMP%] {
-  flex: 1;
-  min-width: 0;
-}
-
-.component[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.redirect[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  min-width: 160px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}`]})},jV=[`ArrowDown`,`ArrowUp`,`Home`,`End`],MV=`[aria-pressed="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"]), .selected`,NV=class e{appRovingList=$(``);rovingWindow=$(null);host=x(Ml).nativeElement;current=null;focusInside=!1;wasSelected=new WeakSet;constructor(){let e=x(Ss);cd(()=>{if(this.sync(),typeof MutationObserver>`u`)return;let t=new MutationObserver(e=>{for(let t of e){let e=t.target;t.type===`attributes`&&this.isItem(e)&&e.matches(MV)&&!this.wasSelected.has(e)&&(this.current=e)}this.sync()});t.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`aria-pressed`,`aria-expanded`,`aria-current`,`class`]}),e.onDestroy(()=>t.disconnect())})}isItem(e){let t=this.appRovingList();return!!t&&!!e?.matches(t)}items(){let e=this.appRovingList();return e?[...this.host.querySelectorAll(e)]:[]}sync(){let e=this.items(),t=!1;if(!this.current||!this.host.contains(this.current)){let n=document.activeElement;t=this.focusInside&&(!n||n===document.body),this.current=e.find(e=>e.matches(MV))??e[0]??null}for(let t of e){t.matches(MV)?this.wasSelected.add(t):this.wasSelected.delete(t);let e=t===this.current?`0`:`-1`;t.getAttribute(`tabindex`)!==e&&t.setAttribute(`tabindex`,e)}t&&this.current?.focus()}onFocusIn(e){this.focusInside=!0;let t=e.target;this.isItem(t)&&t!==this.current&&(this.current?.setAttribute(`tabindex`,`-1`),this.current=t,t.setAttribute(`tabindex`,`0`))}onFocusOut(e){let t=e.relatedTarget;if(t&&this.host.contains(t))return;let n=e.target;setTimeout(()=>{n?.isConnected!==!1&&!this.host.contains(document.activeElement)&&(this.focusInside=!1)})}onKey(e){if(!jV.includes(e.key)||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.target;if(!this.isItem(t))return;let n=this.items(),r=n.indexOf(t);if(r<0)return;let i=this.rovingWindow();if(i?.enabled()&&(e.key===`Home`||e.key===`End`)){e.preventDefault();let t=e.key===`Home`?0:i.count-1,n=()=>{let e=this.host.querySelector(`[data-vindex="${t}"]`);(e?.matches(this.appRovingList())?e:e?.querySelector(this.appRovingList()))?.focus()};i.rendered(t)?n():i.reveal(t,n);return}let a={ArrowDown:Math.min(r+1,n.length-1),ArrowUp:Math.max(r-1,0),Home:0,End:n.length-1}[e.key];e.preventDefault(),n[a].focus()}static ɵfac=function(t){return new(t||e)};static ɵdir=dh({type:e,selectors:[[``,`appRovingList`,``]],hostBindings:function(e,t){e&1&&H(`keydown`,function(e){return t.onKey(e)})(`focusin`,function(e){return t.onFocusIn(e)})(`focusout`,function(e){return t.onFocusOut(e)})},inputs:{appRovingList:[1,`appRovingList`],rovingWindow:[1,`rovingWindow`]}})},PV=56,FV=12,IV=8,LV=4;function RV(e,t){let n=new Set(e),r=new Map(e.map(e=>[e,[]])),i=new Map(e.map(e=>[e,[]]));for(let{producer:e,consumer:a}of t)n.has(e)&&n.has(a)&&e!==a&&(r.get(a).push(e),i.get(e).push(a));return{producers:r,consumers:i}}function zV(e,t){let n=new Map,r=new Set,i=e=>{let a=n.get(e);if(a!==void 0)return a;if(r.has(e))return-1;r.add(e);let o=0;for(let n of t.get(e)??[])o=Math.max(o,i(n)+1);return r.delete(e),n.set(e,o),o};for(let t of e)i(t);return n}function BV(e,t){let{producers:n,consumers:r}=RV(e,t),i=zV(e,n),a=[];for(let t of e)(a[i.get(t)]??=[]).push(t);for(let e=0;e<a.length;e++)a[e]??=[];let o=new Map,s=e=>e.forEach((e,t)=>o.set(e,t));a.forEach(s);let c=(e,t)=>{let n=new Map;for(let[r,i]of e.entries()){let e=(t.get(i)??[]).map(e=>o.get(e));n.set(i,e.length?e.reduce((e,t)=>e+t,0)/e.length:r)}e.sort((e,t)=>n.get(e)-n.get(t)),s(e)};for(let e=0;e<LV;e++){for(let e=1;e<a.length;e++)c(a[e],n);for(let e=a.length-2;e>=0;e--)c(a[e],r)}let l=[],u=new Map;for(let[e,t]of a.entries())for(let[n,r]of t.entries()){let t={id:r,layer:e,row:n,x:IV+e*224,y:IV+n*56};l.push(t),u.set(r,t)}let d=[];for(let[e,t]of n){let n=u.get(e);for(let r of t){let t=u.get(r),i=t.x+168,a=t.y+22,o=n.x,s=n.y+22,c=Math.max(24,(o-i)/2);d.push({producer:r,consumer:e,path:`M${i} ${a} C${i+c} ${a} ${o-c} ${s} ${o} ${s}`})}}let f=Math.max(0,...a.map(e=>e.length));return{nodes:l,edges:d,layers:a,width:16+Math.max(1,a.length)*224-PV,height:16+Math.max(1,f)*56-FV}}function VV(e,t){let n=(n,r)=>{let i=new Set,a=[e];for(;a.length;){let o=a.pop();for(let s of t)s[n]!==o||i.has(s[r])||s[r]===e||(i.add(s[r]),a.push(s[r]))}return i};return{upstream:n(`consumer`,`producer`),downstream:n(`producer`,`consumer`)}}function HV(e,t,n,r=120){if(e.length<=r)return[...e];if(!n||!e.includes(n))return e.slice(0,r);let{upstream:i,downstream:a}=VV(n,t),o=new Set([n]);for(let e of[...i,...a]){if(o.size>=r)break;o.add(e)}return e.filter(e=>o.has(e))}function UV(e,t,n,r){let i=e.nodes.find(e=>e.id===n);if(!i||r===`Home`)return e.nodes[0]?.id??null;if(r===`End`)return e.nodes.at(-1)?.id??null;let a=e.layers[i.layer]??[];if(r===`ArrowUp`)return a[i.row-1]??null;if(r===`ArrowDown`)return a[i.row+1]??null;let o=r===`ArrowLeft`?-1:1,s=new Set(t.flatMap(e=>o<0?e.consumer===n?[e.producer]:[]:e.producer===n?[e.consumer]:[])),c=e=>e.sort((e,t)=>Math.abs(e.y-i.y)-Math.abs(t.y-i.y)||e.x-t.x)[0]?.id??null,l=e.nodes.filter(e=>s.has(e.id));return l.length?c(l):c(e.nodes.filter(e=>e.layer===i.layer+o))}var WV=(e,t)=>t.producer+`>`+t.consumer,GV=(e,t)=>t.id;function KV(e,t){if(e&1&&(R(0,`p`,5),K(1),z()),e&2){let e=t,n=W();D(),D_(` Drawing `,e.drawn,` of `,e.total,` signals. `,n.selectedId()?`The selected signal and its chain are drawn first.`:`Select a signal in the list to draw its chain.`,` `)}}function qV(e,t){if(e&1&&(w(),dg(0,`path`,11)),e&2){let e=t.$implicit;n_(W().edgeTone(e)),k(`d`,e.path)}}function JV(e,t){e&1&&(R(0,`span`,15),K(1,`watching`),z())}function YV(e,t){if(e&1){let e=B();R(0,`button`,12),U(`click`,function(){let t=S(e).$implicit;return C(W().pick(t.id))})(`focus`,function(){let t=S(e).$implicit;return C(W().focused.set(t.id))})(`keydown`,function(t){let n=S(e).$implicit;return C(W().onKey(t,n.id))}),R(1,`span`,13),dg(2,`span`,14),K(3),A(4,JV,2,0,`span`,15),z(),R(5,`span`,16),K(6),z()()}if(e&2){let e=t.$implicit,n=W();n_(n.tone(e.id)),t_(`left`,e.x,`px`)(`top`,e.y,`px`)(`width`,n.nodeWidth,`px`)(`height`,n.nodeHeight,`px`),V(`title`,n.labelOf(e.id)),k(`tabindex`,e.id===n.focusId()?0:-1)(`aria-pressed`,e.id===n.selectedId())(`aria-label`,n.describe(e.id))(`data-node`,e.id),D(2),t_(`background`,n.colorOf(e.id)),D(),J(` `,n.byId().get(e.id)?.kind,` `),D(),j(n.watched().has(e.id)?4:-1),D(2),q(n.labelOf(e.id))}}var XV=new Set([`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`]),ZV=class e{nodes=$.required();links=$.required();selectedId=$(null);watched=$(new Set);kindColor=$(()=>`var(--text-3)`);selected=cv();host=x(Ml).nativeElement;static seq=0;helpId=`signal-graph-help-${++e.seq}`;nodeWidth=168;nodeHeight=44;byId=X(()=>new Map(this.nodes().map(e=>[e.id,e])));drawn=X(()=>HV(this.nodes().map(e=>e.id),this.links(),this.selectedId()));capped=X(()=>{let e=this.nodes().length,t=this.drawn().length;return t<e?{drawn:t,total:e}:null});layout=X(()=>BV(this.drawn(),this.links()));chain=X(()=>{let e=this.selectedId();return e&&this.byId().has(e)?VV(e,this.links()):null});counts=X(()=>{let e=new Map,t=t=>{let n=e.get(t);return n||e.set(t,n={producers:0,consumers:0}),n};for(let e of this.links())t(e.consumer).producers++,t(e.producer).consumers++;return e});focused=T(null);focusId=X(()=>{let e=new Set(this.drawn()),t=this.focused();if(t&&e.has(t))return t;let n=this.selectedId();return n&&e.has(n)?n:this.layout().nodes[0]?.id??null});labelOf(e){let t=this.byId().get(e);return t?.label??`(unnamed ${t?.kind??`node`})`}colorOf(e){return this.kindColor()(this.byId().get(e)?.kind??`unknown`)}tone(e){if(e===this.selectedId())return`selected`;let t=this.chain();return t?t.upstream.has(e)?`up`:t.downstream.has(e)?`down`:`faded`:``}edgeTone(e){let t=this.chain(),n=this.selectedId();return!t||!n?``:(e=>e===n||t.upstream.has(e))(e.consumer)&&t.upstream.has(e.producer)?`up`:(e=>e===n||t.downstream.has(e))(e.producer)&&t.downstream.has(e.consumer)?`down`:`faded`}describe(e){let t=this.byId().get(e),{producers:n=0,consumers:r=0}=this.counts().get(e)??{},i=[`${t?.kind??`node`} ${t?.label??`unnamed`}`,`${n} ${n===1?`producer`:`producers`}`,`${r} ${r===1?`consumer`:`consumers`}`],a=this.tone(e);return a===`up`&&i.push(`upstream of the selected signal`),a===`down`&&i.push(`downstream of the selected signal`),this.watched().has(e)&&i.push(`watched`),i.join(`, `)}pick(e){this.focused.set(e),this.selected.emit(e)}onKey(e,t){if(!XV.has(e.key))return;e.preventDefault();let n=UV(this.layout(),this.links(),t,e.key);if(!n)return;this.focused.set(n);let r=[...this.host.querySelectorAll(`[data-node]`)].find(e=>e.dataset.node===n);r?.scrollIntoView?.({block:`nearest`,inline:`nearest`}),r?.focus({preventScroll:!0})}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-signal-graph-view`]],inputs:{nodes:[1,`nodes`],links:[1,`links`],selectedId:[1,`selectedId`],watched:[1,`watched`],kindColor:[1,`kindColor`]},outputs:{selected:`selected`},decls:17,vars:11,consts:[[1,`sr-only`,3,`id`],[`aria-hidden`,`true`,1,`legend`],[1,`key`,`key-selected`],[1,`key`,`key-up`],[1,`key`,`key-down`],[`role`,`status`,1,`cap-note`],[`role`,`group`,1,`canvas`],[1,`plane`],[`aria-hidden`,`true`,`focusable`,`false`],[1,`edge`,3,`class`],[`type`,`button`,1,`gnode`,3,`class`,`left`,`top`,`width`,`height`,`title`],[1,`edge`],[`type`,`button`,1,`gnode`,3,`click`,`focus`,`keydown`,`title`],[1,`gkind`],[`aria-hidden`,`true`,1,`dot`],[1,`watching`],[1,`glabel`]],template:function(e,t){if(e&1&&(R(0,`p`,0),K(1,` Producers are on the left and consumers on the right. Use the arrow keys to move between signals and Enter to select one. The list below has the same signals. `),z(),R(2,`div`,1)(3,`span`,2),K(4,`Selected`),z(),R(5,`span`,3),K(6,`Upstream (producers)`),z(),R(7,`span`,4),K(8,`Downstream (consumers)`),z()(),A(9,KV,2,3,`p`,5),R(10,`div`,6)(11,`div`,7),w(),R(12,`svg`,8),M(13,qV,1,3,`:svg:path`,9,WV),z(),M(15,YV,7,20,`button`,10,GV),z()()),e&2){let e;V(`id`,t.helpId),D(9),j((e=t.capped())?9:-1,e),D(),k(`aria-label`,`Signal graph, `+t.layout().nodes.length+` signals`)(`aria-describedby`,t.helpId),D(),t_(`width`,t.layout().width,`px`)(`height`,t.layout().height,`px`),D(),k(`width`,t.layout().width)(`height`,t.layout().height)(`viewBox`,`0 0 `+t.layout().width+` `+t.layout().height),D(),N(t.layout().edges),D(2),N(t.layout().nodes)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.legend[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  margin: 0 0 8px;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.key[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.key[_ngcontent-%COMP%]::before {
-  content: "";
-  width: 18px;
-  height: 0;
-  border-top: 2px solid var(--%NS%graph-edge);
-}
-
-.key-selected[_ngcontent-%COMP%]::before {
-  height: 10px;
-  border: 2px solid var(--%NS%accent);
-  border-radius: 3px;
-  background: var(--%NS%accent-soft);
-}
-
-.key-up[_ngcontent-%COMP%]::before {
-  border-top-color: var(--%NS%accent);
-}
-
-.key-down[_ngcontent-%COMP%]::before {
-  border-top: 2px dashed var(--%NS%ok);
-}
-
-.cap-note[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.canvas[_ngcontent-%COMP%] {
-  max-height: 420px;
-  overflow: auto;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.plane[_ngcontent-%COMP%] {
-  position: relative;
-}
-
-svg[_ngcontent-%COMP%] {
-  position: absolute;
-  inset: 0;
-  overflow: visible;
-}
-
-.edge[_ngcontent-%COMP%] {
-  fill: none;
-  stroke: var(--%NS%graph-edge);
-  stroke-width: 1.5;
-  transition: stroke 0.15s var(--%NS%ease);
-}
-
-.edge.up[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-  stroke-width: 2;
-}
-
-.edge.down[_ngcontent-%COMP%] {
-  stroke: var(--%NS%ok);
-  stroke-width: 2;
-  stroke-dasharray: 5 3;
-}
-
-.edge.faded[_ngcontent-%COMP%] {
-  stroke: var(--%NS%border);
-}
-
-.gnode[_ngcontent-%COMP%] {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
-  min-width: 0;
-  padding: 4px 8px;
-  text-align: left;
-  font: inherit;
-  color: var(--%NS%text);
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
-}
-
-.gnode[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.gnode[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.gnode.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  border: 2px solid var(--%NS%accent);
-}
-
-.gnode.up[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  box-shadow: inset 3px 0 0 var(--%NS%accent);
-}
-
-.gnode.down[_ngcontent-%COMP%] {
-  border: 1px dashed var(--%NS%ok);
-  box-shadow: inset 3px 0 0 var(--%NS%ok);
-}
-
-.gnode.faded[_ngcontent-%COMP%] {
-  background: var(--%NS%bg);
-  border-color: var(--%NS%border);
-}
-
-.gkind[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  font-size: 10.5px;
-  color: var(--%NS%text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-}
-
-.dot[_ngcontent-%COMP%] {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.watching[_ngcontent-%COMP%] {
-  margin-left: auto;
-  padding: 0 5px;
-  border: 1px solid;
-  border-radius: 99px;
-  text-transform: none;
-  letter-spacing: 0;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.glabel[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  color: var(--%NS%text-strong);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .edge[_ngcontent-%COMP%], 
-   .gnode[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},QV=8,$V=e=>!!e&&typeof e==`object`&&!Array.isArray(e);function eH(e,t){return/^[A-Za-z_$][\w$]*$/.test(t)?e?`${e}.${t}`:t:`${e}[${JSON.stringify(t)}]`}function tH(e,t){if(Object.is(e,t))return!0;if(!e||!t||typeof e!=`object`||typeof t!=`object`)return!1;try{return JSON.stringify(e)===JSON.stringify(t)}catch{return!1}}function nH(e,t){let n=[],r=0,i=e=>{n.length<50?n.push(e):r++},a=(e,t,n,r)=>{if(!tH(e,t)){if(r<QV&&Array.isArray(e)&&Array.isArray(t)){let o=Math.max(e.length,t.length);for(let s=0;s<o;s++){let o=`${n}[${s}]`;s>=e.length?i({path:o,kind:`added`,after:t[s]}):s>=t.length?i({path:o,kind:`removed`,before:e[s]}):a(e[s],t[s],o,r+1)}return}if(r<QV&&$V(e)&&$V(t)){for(let o of Object.keys(e)){let s=eH(n,o);o in t?a(e[o],t[o],s,r+1):i({path:s,kind:`removed`,before:e[o]})}for(let r of Object.keys(t))r in e||i({path:eH(n,r),kind:`added`,after:t[r]});return}i({path:n||`(value)`,kind:`changed`,before:e,after:t})}};return a(e,t,``,0),r&&n.push({path:`…`,kind:`changed`,after:`${r} more changes`}),n}var rH=[`filterInput`],iH=e=>({id:e,label:`Status history`}),aH=e=>({id:e,label:`Value history`}),oH=(e,t)=>t.kind,sH=(e,t)=>t.name+t.file+t.line,cH=(e,t)=>t.epoch,lH=(e,t)=>t.path,uH=(e,t)=>t.id,dH=(e,t)=>t.id+`:`+t.change.epoch,fH=(e,t)=>t.file+t.line;function pH(e,t){if(e&1){let e=B();F(0,`div`,4)(1,`span`,18),K(2,`Page`),I(),F(3,`app-select`,19),H(`valueChange`,function(t){return S(e),C(W().selectPage(t))}),I()()}if(e&2){let e=W();D(3),P(`options`,e.pageOptions())(`value`,e.shownPageId())}}function mH(e,t){if(e&1){let e=B();F(0,`div`,5)(1,`span`,20),K(2,`Graph of`),I(),F(3,`app-select`,21),H(`valueChange`,function(t){return S(e),C(W().pickComponent(t))}),I()()}if(e&2){let e=W();D(3),P(`options`,e.componentOptions())(`value`,e.pickerValue())}}function hH(e,t){if(e&1&&(F(0,`span`,24),K(1),I()),e&2){let e=W(2);D(),q(e.sourceNote(e.graph().source))}}function gH(e,t){if(e&1&&(F(0,`p`,7)(1,`span`,22),K(2),I(),F(3,`span`,23),K(4),I(),A(5,hH,2,1,`span`,24),I()),e&2){let e=t,n=W();D(2),q(e.name),D(2),q(e.path),D(),j(n.graph().source?5:-1)}}function _H(e,t){if(e&1&&(F(0,`p`,7)(1,`span`,22),K(2),I(),F(3,`span`,24),K(4,`environment injector`),I()()),e&2){let e=W();D(2),q(e.injectorLabel(t))}}function vH(e,t){if(e&1&&(F(0,`p`,7)(1,`span`,22),K(2),I(),F(3,`span`,23),K(4),I(),F(5,`span`,24),K(6,`directives, no component`),I()()),e&2){let e=t;D(2),q(e.directives.join(`, `)||`<`+e.tag+`>`),D(2),J(`<`,e.tag,`>`)}}function yH(e,t){e&1&&(F(0,`p`,8),K(1,` The picked component or injector is gone or has no signal graph, so this shows another one. `),I())}function bH(e,t){e&1&&K(0,` The effects registered on this injector and the signals they read. A signal that no effect reads is not part of the graph. Pick a kind to filter. `)}function xH(e,t){e&1&&K(0,` The live signal graph of one component. Only signals that its template or an effect has read appear here; a signal nothing has read yet is not part of the graph. Pick a kind to filter. `)}function SH(e,t){e&1&&K(0,` Loading the live signal graph… `)}function CH(e,t){e&1&&K(0,` Every signal, computed and effect found in your source. Pick a kind to filter. `)}function wH(e,t){if(e&1&&(F(0,`app-angular-unavailable`,10),K(1,` This list comes from a source scan. `),I()),e&2){let e=W();P(`page`,e.angularPage())(`missing`,e.unsupported())}}function TH(e,t){e&1&&(F(0,`p`,8),K(1,` The signal write hook did not load. Value history shows sampled values only, with no exact set entries. `),I())}function EH(e,t){if(e&1&&(F(0,`p`,8),K(1),I()),e&2){let e=W();D(),Y(` Showing `,e.graph().nodes.length,` of `,t,` signals. The rest and their edges are left out. `)}}function DH(e,t){if(e&1){let e=B();F(0,`button`,25),H(`click`,function(){let t=S(e).$implicit,n=W(2);return C(n.kind.set(n.kind()===t.kind?null:t.kind))}),L(1,`span`,28),F(2,`span`,29),K(3),I(),F(4,`span`,26),K(5),I()()}if(e&2){let e=t.$implicit,n=W(2);G(`active`,n.kind()===e.kind),k(`aria-pressed`,n.kind()===e.kind),D(),t_(`background`,n.kindColor(e.kind)),D(2),q(e.kind),D(2),q(e.count)}}function OH(e,t){if(e&1){let e=B();F(0,`div`,11)(1,`button`,25),H(`click`,function(){return S(e),C(W().kind.set(null))}),K(2,` All `),F(3,`span`,26),K(4),I()(),M(5,DH,6,7,`button`,27,oH),I()}if(e&2){let e=W();D(),G(`active`,!e.kind()),k(`aria-pressed`,!e.kind()),D(3),q(e.kindTotal()),D(),N(e.kindChips())}}function kH(e,t){e&1&&(F(0,`div`,12),L(1,`span`,30),F(2,`p`,31),K(3,`Scanning source for signals…`),I()())}function AH(e,t){if(e&1){let e=B();F(0,`div`,32)(1,`p`,31),K(2,`Couldn't load signals`),I(),F(3,`p`,33),K(4,` The devtools server did not answer. Check that it is still running, then retry. `),I(),F(5,`button`,34),H(`click`,function(){return S(e),C(W().retry())}),K(6),I()()}if(e&2){let e=W();G(`compact`,e.sourceSignals().length>0),D(5),k(`aria-disabled`,e.retrying()||null),D(),J(` `,e.retrying()?`Retrying…`:`Retry`,` `)}}function jH(e,t){e&1&&(F(0,`div`,14)(1,`p`,31),K(2,`No signals found.`),I(),F(3,`p`,33),K(4,` No `),F(5,`code`),K(6,`signal()`),I(),K(7,`, `),F(8,`code`),K(9,`computed()`),I(),K(10,` or `),F(11,`code`),K(12,`effect()`),I(),K(13,` calls were found in your source. To see the live graph, run Angular 20.1 or later with the overlay connected and select a component. `),I()())}function MH(e,t){if(e&1&&(F(0,`span`,44),K(1,`·`),I(),F(2,`span`),K(3),I()),e&2){let e=W().$implicit;D(3),J(`in <`,e.component,`>`)}}function NH(e,t){if(e&1&&(F(0,`div`,37)(1,`div`,39)(2,`span`,40),K(3),I(),F(4,`span`,41),K(5),I()(),F(6,`div`,42),L(7,`app-source-link`,43),A(8,MH,4,1),I()()),e&2){let e=t.$implicit,n=W(2);D(2),t_(`background`,n.kindColor(e.kind)),D(),q(e.kind),D(2),q(e.name),D(2),P(`file`,e.file)(`line`,e.line),D(),j(e.component?8:-1)}}function PH(e,t){if(e&1){let e=B();F(0,`div`,38)(1,`p`,31),K(2,`No signals match.`),I(),F(3,`p`,33),K(4,`Try a different name or kind.`),I(),F(5,`button`,34),H(`click`,function(){return S(e),C(W(2).clearFilters())}),K(6,`Clear filters`),I()()}}function FH(e,t){if(e&1&&(F(0,`p`,35),K(1,`Signals from the source scan:`),I(),F(2,`div`,36),M(3,NH,9,7,`div`,37,sH,!1,PH,7,0,`div`,38),I()),e&2){let e=W();D(3),N(e.filteredSourceSignals())}}function IH(e,t){e&1&&(F(0,`p`,33),K(1),I()),e&2&&(D(),J(`Restore is off. `,t))}function LH(e,t){if(e&1&&(A(0,IH,2,1,`p`,33),F(1,`p`,48),K(2),I()),e&2){let e,t=W(2).id,n=W();j((e=n.restoreBlocked())?0:-1,e),D(),G(`has-text`,n.restoreResult()?.id===t)(`restore-error`,n.restoreResult()?.id===t&&n.restoreResult()?.error),D(),J(` `,n.restoreResult()?.id===t?n.restoreResult()?.text:``,` `)}}function RH(e,t){if(e&1&&(F(0,`span`,51),K(1),I()),e&2){let e=W().$implicit;D(),J(``,e.missed,` earlier not captured`)}}function zH(e,t){if(e&1){let e=B();P_(0),Z_(1,`date`),F(2,`button`,55),H(`click`,function(){S(e);let t=I_(0),n=W().$implicit;W();let r=I_(4);return C(W(2).restore(r,n,t??``))}),K(3,` Restore `),I()}if(e&2){let e=W().$implicit,t=W(3),n=F_($_(1,2,e.at,`HH:mm:ss.SSS`));D(2),k(`aria-label`,`Restore value from `+n)(`aria-disabled`,t.restoring()||null)}}function BH(e,t){if(e&1&&(F(0,`code`,61),K(1),Z_(2,`json`),I()),e&2){let e=W().$implicit;D(),q(Q_(2,1,e.before))}}function VH(e,t){e&1&&(F(0,`span`,59),K(1,`to`),I(),F(2,`span`,63),K(3,`→`),I())}function HH(e,t){if(e&1&&(F(0,`code`,62),K(1),Z_(2,`json`),I()),e&2){let e=W().$implicit;D(),q(Q_(2,1,e.after))}}function UH(e,t){if(e&1&&(F(0,`li`)(1,`span`,58),K(2),I(),F(3,`span`,59),K(4,`: `),I(),F(5,`code`,60),K(6),I(),F(7,`span`,59),K(8,`, `),I(),A(9,BH,3,3,`code`,61),A(10,VH,4,0),A(11,HH,3,3,`code`,62),I()),e&2){let e=t.$implicit,n=W(5);n_(`diff-`+e.kind),D(2),q(n.diffLabel(e.kind)),D(4),q(e.path),D(3),j(e.kind===`added`?-1:9),D(),j(e.kind===`changed`?10:-1),D(),j(e.kind===`removed`?-1:11)}}function WH(e,t){if(e&1&&(F(0,`details`,53)(1,`summary`),K(2),I(),F(3,`ul`,56),M(4,UH,12,7,`li`,57,lH),I()()),e&2){let e=t;D(2),J(`Changes from the entry before (`,e.length,`)`),D(2),N(e)}}function GH(e,t){if(e&1&&(F(0,`li`),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function KH(e,t){if(e&1&&(F(0,`ol`,54),M(1,GH,2,1,`li`,null,$h),I()),e&2){let e=W().$implicit;D(),N(e.stack)}}function qH(e,t){if(e&1&&(F(0,`li`)(1,`span`,49)(2,`time`),K(3),Z_(4,`date`),I(),F(5,`span`,50),K(6),I(),F(7,`span`),K(8),I(),A(9,RH,2,1,`span`,51),A(10,zH,4,6,`button`,52),I(),F(11,`pre`),K(12),Z_(13,`json`),I(),A(14,WH,6,1,`details`,53),A(15,KH,3,0,`ol`,54),I()),e&2){let e,n=t.$implicit,r=t.$index;W();let i=I_(4),a=W(2);D(3),q($_(4,10,n.at,`HH:mm:ss.SSS`)),D(2),n_(`source-`+n.source),D(),q(a.sourceLabel(n.source)),D(2),J(`epoch `,n.epoch),D(),j(n.missed?9:-1),D(),j(i&&!a.restoreBlocked()&&r!==0?10:-1),D(2),q(Q_(13,13,n.value)),D(2),j((e=a.diffs().get(n.epoch))?14:-1,e),D(),j(n.stack?.length?15:-1)}}function JH(e,t){if(e&1&&(F(0,`h4`,45),K(1),I(),F(2,`p`,46),K(3),I(),P_(4),A(5,LH,3,6),F(6,`ol`,47),M(7,qH,16,15,`li`,null,cH),I()),e&2){let e=W(),t=e.id,n=e.label,r=W();P(`id`,`history-heading-`+t),D(),q(n),D(2),q(r.historySummary(t)),D();let i=F_(r.restorable(t));D(),j(i?5:-1),D(),k(`aria-labelledby`,`history-heading-`+t),D(),N(r.selectedHistory())}}function YH(e,t){e&1&&A(0,JH,9,6),e&2&&j(W().selectedHistory().length?0:-1)}function XH(e,t){if(e&1){let e=B();F(0,`button`,68),H(`click`,function(){S(e);let t=W(2);return C(t.showFramework.set(!t.showFramework()))}),K(1,` Show framework signals `),F(2,`span`,26),K(3),I()()}if(e&2){let e=W(2);k(`aria-pressed`,e.showFramework()),D(3),Y(``,t,` `,e.showFramework()?`shown`:`hidden`)}}function ZH(e,t){e&1&&(F(0,`p`,70),K(1,` Write stacks are on for this page. Each set of a named signal keeps the first 3 app frames of the code that wrote it, shown in its value history. Taking a stack slows every write, so turn it off when you are done. `),I())}function QH(e,t){if(e&1){let e=B();F(0,`app-signal-graph-view`,74),H(`selected`,function(t){return S(e),C(W(3).selectFromGraph(t))}),I()}if(e&2){let e=W(3);P(`nodes`,e.graphNodes())(`links`,e.graphLinks())(`selectedId`,e.selectedId())(`watched`,e.watchedIds())(`kindColor`,e.kindColorOf)}}function $H(e,t){e&1&&(F(0,`p`,70),K(1,` Every signal in this graph was created by Angular. Show framework signals to see them. `),I())}function eU(e,t){if(e&1){let e=B();F(0,`p`,73)(1,`span`),K(2,`Selected`),I(),F(3,`span`,75),K(4),I(),F(5,`span`,44),K(6,`·`),I(),F(7,`span`),K(8),I(),F(9,`span`,44),K(10,`·`),I(),F(11,`span`),K(12),I(),F(13,`button`,76),H(`click`,function(){let t=S(e);return C(W(3).jumpTo(t))}),K(14,` Show details `),I()()}if(e&2){let e=t,n=W(3);D(4),q(e.label??`(unnamed)`),D(4),q(n.plural(n.getDependencies(e).length,`producer`)),D(4),q(n.plural(n.getConsumers(e).length,`consumer`))}}function tU(e,t){if(e&1&&(F(0,`div`,71),A(1,QH,1,5,`app-signal-graph-view`,72)(2,$H,2,0,`p`,70),A(3,eU,15,3,`p`,73),I()),e&2){let e,t=W(2);D(),j(t.graphNodes().length?1:2),D(2),j((e=t.selectedNode())?3:-1,e)}}function nU(e,t){if(e&1){let e=B();F(0,`section`,15)(1,`div`,64)(2,`h2`,65),K(3,`Graph`),I(),F(4,`div`,66),A(5,XH,4,3,`button`,67),F(6,`button`,68),H(`click`,function(){return S(e),C(W().toggleStacks())}),K(7,` Record write stacks `),I(),F(8,`button`,69),H(`click`,function(){S(e);let t=W();return C(t.showGraph.set(!t.showGraph()))}),K(9),I()()(),A(10,ZH,2,0,`p`,70),A(11,tU,4,2,`div`,71),I()}if(e&2){let e,t=W();D(5),j((e=t.frameworkCount())?5:-1,e),D(),k(`aria-pressed`,t.stacksOn()),D(2),k(`aria-expanded`,t.showGraph()),D(),J(` `,t.showGraph()?`Hide graph`:`Show graph`,` `),D(),j(t.stacksOn()?10:-1),D(),j(t.showGraph()?11:-1)}}function rU(e,t){if(e&1&&(F(0,`p`,33),K(1),I()),e&2){let e=t;D(),Y(` `,e,` watched `,e===1?`signal is`:`signals are`,` not in this graph. Their changes still log to the page console. `)}}function iU(e,t){if(e&1&&(F(0,`span`,79),K(1),Z_(2,`json`),I()),e&2){let e=W().$implicit;D(),q(Q_(2,1,e.value))}}function aU(e,t){if(e&1&&(F(0,`span`,80),K(1),I()),e&2){let e=t;D(),Y(``,e,` `,e===1?`change`:`changes`)}}function oU(e,t){if(e&1){let e=B();F(0,`li`)(1,`span`,75),K(2),I(),A(3,iU,3,3,`span`,79),A(4,aU,2,2,`span`,80),F(5,`button`,76),H(`click`,function(){let t=S(e).$implicit;return C(W(2).toggleWatch(t))}),K(6,` Stop watching `),I()()}if(e&2){let e,n=t.$implicit,r=W(2);D(2),q(n.label??`(unnamed)`),D(),j(n.value===void 0?-1:3),D(),j((e=r.changeCount(n.id))?4:-1,e),D(),k(`aria-label`,`Stop watching `+(n.label??`the unnamed signal`))}}function sU(e,t){if(e&1&&(F(0,`li`),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function cU(e,t){if(e&1&&(F(0,`ol`,54),M(1,sU,2,1,`li`,null,$h),I()),e&2){let e=W().$implicit;D(),N(e.change.stack)}}function lU(e,t){if(e&1&&(F(0,`li`)(1,`span`,49)(2,`time`),K(3),Z_(4,`date`),I(),F(5,`span`,75),K(6),I(),F(7,`span`,50),K(8),I()(),F(9,`pre`),K(10),Z_(11,`json`),I(),A(12,cU,3,0,`ol`,54),I()),e&2){let e=t.$implicit,n=W(3);D(3),q($_(4,7,e.change.at,`HH:mm:ss.SSS`)),D(3),q(e.label),D(),n_(`source-`+e.change.source),D(),q(n.sourceLabel(e.change.source)),D(2),q(Q_(11,10,e.change.value)),D(2),j(e.change.stack?.length?12:-1)}}function uU(e,t){if(e&1&&(F(0,`h3`,81),K(1,`Recent changes`),I(),F(2,`div`,82)(3,`ol`,83),M(4,lU,13,12,`li`,null,dH),I()()),e&2){let e=W(2);D(4),N(e.watchLog())}}function dU(e,t){if(e&1&&(F(0,`section`,16)(1,`h2`,77),K(2,`Watched`),I(),A(3,rU,2,2,`p`,33),F(4,`ul`,78),M(5,oU,7,4,`li`,null,uH),I(),A(7,uU,6,0),I()),e&2){let e,t=W();D(3),j((e=t.watchedElsewhere())?3:-1,e),D(2),N(t.watchedNodes()),D(2),j(t.watchLog().length?7:-1)}}function fU(e,t){if(e&1&&(F(0,`span`,91),K(1),I()),e&2){let e=W().$implicit;n_(`tone-`+W(2).statusTone(e.status)),D(),q(e.status)}}function pU(e,t){if(e&1&&(F(0,`span`,80),K(1),I()),e&2){let e=t;D(),Y(``,e,` `,e===1?`change`:`changes`)}}function mU(e,t){if(e&1&&(F(0,`span`,89),K(1),Z_(2,`json`),I()),e&2){let e=W().$implicit;D(),q(Q_(2,1,e.error))}}function hU(e,t){if(e&1&&(F(0,`span`,89),K(1),Z_(2,`json`),I()),e&2){let e=W().$implicit;D(),q(Q_(2,1,e.value))}}function gU(e,t){e&1&&(F(0,`p`,33),K(1,` This resource has no name. Pass `),F(2,`code`),K(3,`debugName`),I(),K(4,` to `),F(5,`code`),K(6,`resource()`),I(),K(7,` or `),F(8,`code`),K(9,`httpResource()`),I(),K(10,` to name it here. `),I())}function _U(e,t){if(e&1&&(F(0,`dt`),K(1,`Loading`),I(),F(2,`dd`),K(3),I()),e&2){let e=W(2).$implicit;D(3),q(e.isLoading?`yes`:`no`)}}function vU(e,t){if(e&1&&(F(0,`dt`),K(1,`HTTP status`),I(),F(2,`dd`),K(3),I()),e&2){let e=W(2).$implicit;D(3),q(e.statusCode)}}function yU(e,t){if(e&1&&(F(0,`dt`),K(1,`Params`),I(),F(2,`dd`)(3,`pre`,95),K(4),Z_(5,`json`),I()()),e&2){let e=W(2).$implicit;D(3),k(`aria-label`,`Params of `+e.name),D(),q(Q_(5,2,e.params))}}function bU(e,t){if(e&1&&(F(0,`dt`),K(1,`Value`),I(),F(2,`dd`)(3,`pre`,95),K(4),Z_(5,`json`),I()()),e&2){let e=W(2).$implicit;D(3),k(`aria-label`,`Value of `+e.name),D(),q(Q_(5,2,e.value))}}function xU(e,t){if(e&1&&(F(0,`dt`),K(1,`Error`),I(),F(2,`dd`)(3,`pre`,95),K(4),Z_(5,`json`),I()()),e&2){let e=W(2).$implicit;D(3),k(`aria-label`,`Error of `+e.name),D(),q(Q_(5,2,e.error))}}function SU(e,t){if(e&1&&(F(0,`li`)(1,`span`,96),K(2),I(),F(3,`span`,75),K(4),I()()),e&2){let e=t.$implicit,n=W(5);D(),t_(`background`,n.kindColor(e.kind)),D(),q(e.kind),D(2),q(e.label??e.id)}}function CU(e,t){if(e&1&&(F(0,`ul`,45),M(1,SU,5,4,`li`,null,uH),I()),e&2){let e=W(2).$implicit,t=W(2);P(`id`,`resource-internals-`+e.id),D(),N(t.internalsOf(e))}}function wU(e,t){if(e&1){let e=B();F(0,`div`,90)(1,`h3`,92),K(2),I(),A(3,gU,11,0,`p`,33),F(4,`dl`)(5,`dt`),K(6,`Status`),I(),F(7,`dd`),K(8),I(),A(9,_U,4,1),A(10,vU,4,1),A(11,yU,6,4),A(12,bU,6,4),A(13,xU,6,4),I(),hg(14,93),F(15,`button`,94),H(`click`,function(){S(e);let t=W(3);return C(t.showInternals.set(!t.showInternals()))}),K(16),I(),A(17,CU,3,1,`ul`,45),I()}if(e&2){let e=W().$implicit,t=W(2),n=Pg(25);P(`id`,`signal-detail-`+e.id),D(2),q(e.name),D(),j(e.named?-1:3),D(5),q(e.status??`unknown`),D(),j(e.isLoading===void 0?-1:9),D(),j(e.statusCode===void 0?-1:10),D(),j(e.params===void 0?-1:11),D(),j(e.value===void 0?-1:12),D(),j(e.error===void 0?-1:13),D(),P(`ngTemplateOutlet`,n)(`ngTemplateOutletContext`,K_(16,iH,e.id)),D(),k(`aria-expanded`,t.showInternals())(`aria-controls`,`resource-internals-`+e.id),D(),Y(` `,t.showInternals()?`Hide`:`Show`,` internal signals (`,e.nodeIds.length,`) `),D(),j(t.showInternals()?17:-1)}}function TU(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,86),H(`click`,function(){let t=S(e).$implicit;return C(W(2).select(t.id))}),F(2,`span`,39)(3,`span`,40),K(4,`resource`),I(),F(5,`span`,41),K(6),I(),A(7,fU,2,3,`span`,87),A(8,pU,2,2,`span`,80),L(9,`span`,88),I(),A(10,mU,3,3,`span`,89)(11,hU,3,3,`span`,89),I(),A(12,wU,18,18,`div`,90),I()}if(e&2){let e,n=t.$implicit,r=W(2);D(),G(`selected`,r.selectedId()===n.id),k(`aria-expanded`,r.selectedId()===n.id)(`aria-controls`,`signal-detail-`+n.id)(`data-card`,n.id),D(2),t_(`background`,r.kindColor(`resource`)),D(3),q(n.name),D(),j(n.status?7:-1),D(),j((e=n.changes)?8:-1,e),D(2),j(n.error===void 0?n.value===void 0?-1:11:10),D(2),j(r.selectedId()===n.id?12:-1)}}function EU(e,t){if(e&1&&(F(0,`h2`,84),K(1,`Resources`),I(),F(2,`ul`,85),M(3,TU,13,12,`li`,null,uH),I()),e&2){let e=W();D(3),N(e.filteredResources())}}function DU(e,t){e&1&&(F(0,`span`,99),K(1,`watching`),I())}function OU(e,t){e&1&&(F(0,`span`,100),K(1,`framework`),I())}function kU(e,t){if(e&1&&(F(0,`span`,80),K(1),I()),e&2){let e=t;D(),Y(``,e,` `,e===1?`change`:`changes`)}}function AU(e,t){if(e&1&&(F(0,`span`,89),K(1),Z_(2,`json`),I()),e&2){let e=W().$implicit;D(),q(Q_(2,1,e.value))}}function jU(e,t){if(e&1&&(F(0,`span`,44),K(1,`·`),I(),F(2,`span`),K(3),I()),e&2){let e=W().$implicit,t=W(2);D(3),J(`Deps: `,t.getDependencies(e).length)}}function MU(e,t){if(e&1&&(F(0,`span`,44),K(1,`·`),I(),F(2,`span`),K(3),I()),e&2){let e=W().$implicit,t=W(2);D(3),J(`Consumers: `,t.getConsumers(e).length)}}function NU(e,t){if(e&1&&(F(0,`dt`),K(1,`Runs`),I(),F(2,`dd`),K(3),I()),e&2){let e=W(4);D(3),D_(` `,t,`, `,e.selectedNode().runMs??0,` ms in all, last `,e.selectedNode().lastRunMs??0,` ms `)}}function PU(e,t){if(e&1&&L(0,`app-source-link`,102),e&2){let e=W();P(`file`,e.exact.file)(`line`,e.exact.line)}}function FU(e,t){if(e&1&&(F(0,`span`,103),K(1),I()),e&2){let e=W().$implicit;D(),J(`in `,e.component)}}function IU(e,t){if(e&1&&(F(0,`li`),L(1,`app-source-link`,102),A(2,FU,2,1,`span`,103),I()),e&2){let e=t.$implicit;D(),P(`file`,e.file)(`line`,e.line),D(),j(e.component?2:-1)}}function LU(e,t){if(e&1&&(F(0,`span`,103),K(1),I(),F(2,`ul`,104),M(3,IU,3,3,`li`,null,fH),I()),e&2){let e=W();D(),J(``,e.candidates.length,` declarations match this name:`),D(2),N(e.candidates)}}function RU(e,t){e&1&&(F(0,`dt`),K(1,`Source`),I(),F(2,`dd`,101),A(3,PU,1,2,`app-source-link`,102)(4,LU,5,1),I()),e&2&&(D(3),j(t.exact?3:4))}function zU(e,t){if(e&1&&(F(0,`dt`),K(1,`Value`),I(),F(2,`dd`)(3,`pre`,95),K(4),Z_(5,`json`),I()()),e&2){let e=W(4);D(3),k(`aria-label`,`Value of `+(e.selectedNode().label??`signal`)),D(),q(Q_(5,2,e.selectedNode().value))}}function BU(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,105),H(`click`,function(){let t=S(e).$implicit;return C(W(5).jumpTo(t))}),F(2,`span`,96),K(3),I(),F(4,`span`,75),K(5),I()()()}if(e&2){let e=t.$implicit,n=W(5);D(),k(`aria-label`,`Go to `+e.kind+` `+(e.label??e.id)),D(),t_(`background`,n.kindColor(e.kind)),D(),q(e.kind),D(2),q(e.label??e.id)}}function VU(e,t){if(e&1&&(F(0,`h4`),K(1,`Dependencies (producers)`),I(),F(2,`ul`),M(3,BU,6,5,`li`,null,uH),I()),e&2){let e=W(4);D(3),N(e.getDependencies(e.selectedNode()))}}function HU(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,105),H(`click`,function(){let t=S(e).$implicit;return C(W(5).jumpTo(t))}),F(2,`span`,96),K(3),I(),F(4,`span`,75),K(5),I()()()}if(e&2){let e=t.$implicit,n=W(5);D(),k(`aria-label`,`Go to `+e.kind+` `+(e.label??e.id)),D(),t_(`background`,n.kindColor(e.kind)),D(),q(e.kind),D(2),q(e.label??e.id)}}function UU(e,t){if(e&1&&(F(0,`h4`),K(1,`Consumers`),I(),F(2,`ul`),M(3,HU,6,5,`li`,null,uH),I()),e&2){let e=W(4);D(3),N(e.getConsumers(e.selectedNode()))}}function WU(e,t){if(e&1){let e=B();F(0,`button`,106),H(`click`,function(){S(e);let t=W(4);return C(t.toggleWatch(t.selectedNode()))}),K(1,` Watch `),I(),F(2,`p`,33),K(3,` A watched signal is listed under Watched and logs each change to the page console. `),I()}if(e&2){let e=W(4);k(`aria-pressed`,e.watchedIds().has(e.selectedNode().id))}}function GU(e,t){e&1&&(F(0,`p`,33),K(1),I()),e&2&&(D(),q(t))}function KU(e,t){if(e&1&&(F(0,`div`,90)(1,`h3`,92),K(2),I(),F(3,`dl`)(4,`dt`),K(5,`Kind`),I(),F(6,`dd`),K(7),I(),F(8,`dt`),K(9,`Epoch`),I(),F(10,`dd`),K(11),I(),A(12,NU,4,3),A(13,RU,5,1),A(14,zU,6,4),I(),A(15,VU,5,0),A(16,UU,5,0),A(17,WU,4,1),A(18,GU,2,1,`p`,33),hg(19,93),I()),e&2){let e,t,n,r=W().$implicit,i=W(2),a=Pg(25);P(`id`,`signal-detail-`+r.id),D(2),q(i.selectedNode().label??i.selectedNode().id),D(5),q(i.selectedNode().kind),D(4),q(i.selectedNode().epoch),D(),j((e=i.selectedNode().runs)?12:-1,e),D(),j((t=i.sourceMatch())?13:-1,t),D(),j(i.selectedNode().value===void 0?-1:14),D(),j(i.getDependencies(i.selectedNode()).length?15:-1),D(),j(i.getConsumers(i.selectedNode()).length?16:-1),D(),j(i.isWatchable(i.selectedNode())?17:-1),D(),j((n=i.writeHint())?18:-1,n),D(),P(`ngTemplateOutlet`,a)(`ngTemplateOutletContext`,K_(13,aH,r.id))}}function qU(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,86),H(`click`,function(){let t=S(e).$implicit;return C(W(2).select(t.id))}),F(2,`span`,39)(3,`span`,40),K(4),I(),F(5,`span`,41),K(6),I(),A(7,DU,2,0,`span`,99),A(8,OU,2,0,`span`,100),A(9,kU,2,2,`span`,80),L(10,`span`,88),I(),A(11,AU,3,3,`span`,89),F(12,`span`,42)(13,`span`),K(14),I(),A(15,jU,4,1),A(16,MU,4,1),I()(),A(17,KU,20,15,`div`,90),I()}if(e&2){let e,n=t.$implicit,r=W(2);D(),G(`selected`,r.selectedId()===n.id),k(`aria-expanded`,r.selectedId()===n.id)(`aria-controls`,`signal-detail-`+n.id)(`data-card`,n.id),D(2),t_(`background`,r.kindColor(n.kind)),D(),q(n.kind),D(2),q(n.label??`(unnamed)`),D(),j(r.watchedIds().has(n.id)?7:-1),D(),j(n.framework?8:-1),D(),j((e=r.changeCount(n.id))?9:-1,e),D(2),j(n.value===void 0?-1:11),D(3),J(`Epoch: `,n.epoch),D(),j(r.getDependencies(n).length?15:-1),D(),j(r.getConsumers(n).length?16:-1),D(),j(r.selectedId()===n.id&&r.selectedNode()?17:-1)}}function JU(e,t){if(e&1){let e=B();F(0,`button`,34),H(`click`,function(){return S(e),C(W(3).clearFilters())}),K(1,`Clear filters`),I()}}function YU(e,t){if(e&1&&(F(0,`li`,98)(1,`p`,31),K(2),I(),F(3,`p`,33),K(4),I(),A(5,JU,2,0,`button`,107),I()),e&2){let e=W(2);D(2),J(` `,e.hasAnySignals()?`No signals match.`:`No signals in this graph.`,` `),D(2),J(` `,e.hasAnySignals()?`Try a different name or kind.`:`Select a component that reads signals, or interact with the page to create some.`,` `),D(),j(e.hasAnySignals()||e.filter()||e.kind()?5:-1)}}function XU(e,t){if(e&1&&(F(0,`h2`,84),K(1,`Signals`),I(),F(2,`ul`,97),M(3,qU,18,17,`li`,null,uH,!1,YU,6,3,`li`,98),I()),e&2){let e=W();D(3),N(e.filteredNodes())}}var ZU=`follow`;function QU(e){return Object.keys(e.pages).length?e.pages:e.graph?{[e.graph.pageId??``]:e.graph}:{}}var $U=`env:`,eW=50,tW=new Set([`signal`,`computed`,`linkedSignal`]),nW=20,rW={selected:`picked`,routed:`rendered by the router`,root:`first component with signals`},iW={write:`set`,sample:`sampled`,initial:`initial`},aW={resolved:`ok`,local:`ok`,loading:`warn`,reloading:`warn`,error:`danger`},oW={signal:`signal`,computed:`computed`,linkedSignal:`linked`,effect:`effect`,template:`template`,afterRenderEffectPhase:`after-render`,childSignalProp:`child-prop`,"input (signal)":`input`,"input.required (signal)":`input`,"output (signal)":`output`,"model (signal)":`model`,"model.required (signal)":`model`,"viewChild (signal)":`view-query`,"viewChild.required (signal)":`view-query`,"viewChildren (signal)":`view-query`,"contentChild (signal)":`content-query`,"contentChild.required (signal)":`content-query`,"contentChildren (signal)":`content-query`,resource:`resource`},sW=class e{rpc=$(null);focus=$(null);focusedSignal=T(null);pendingPageId=null;destroyRef=x(Ss);host=x(Ml);filterInput=hv(`filterInput`);injector=x(bs);pageId=tT();angularPages=oD(()=>this.rpc());angularPage=X(()=>sD(this.angularPages(),this.shownPageId()??this.pageId));cleanups=[];graphLoad=0;treePages=T({});graphState=T({graph:null,pages:{}});chosenPageId=T(null);announcement=T(``);graphPages=X(()=>QU(this.graphState()));shownPageId=Q({source:()=>({pages:this.graphPages(),newest:this.graphState().graph?.pageId??null,chosen:this.chosenPageId()}),computation:({pages:e,newest:t,chosen:n},r)=>{let i={};for(let n of Object.keys(e))i[n]={pageId:n,reportedAt:+(n===t)};return nT(i,{chosen:n,host:this.pageId,previous:r?.value??null})}});reported=X(()=>{let e=this.shownPageId();return e===null?null:this.graphPages()[e]??null});unsupported=X(()=>!!this.reported()?.unsupported);graphKnown=T(!1);graph=X(()=>{let e=this.reported();return e?.unsupported?null:e});graphOwner=X(()=>{let e=this.graph();return e?`${e.pageId??``}|${e.component?.id??e.injector?.id??e.element?.id??``}`:null});pickedByPage=T({});picked=X(()=>this.pickedByPage()[this.targetPageId()??``]??null);pageOptions=X(()=>{if(this.pageId)return[];let e=this.treePages();return Object.keys(this.graphPages()).map(t=>{let n=e[t];return{value:t,label:n?.title||n?.url||`Page ${t}`,hint:n?.url}})});showInternals=T(!1);sourceSignals=T([]);sourceLoaded=T(!1);sourceFailed=T(!1);graphFailed=T(!1);loadFailed=X(()=>this.sourceFailed()||this.graphFailed());retrying=T(!1);filter=T(``);resources=X(()=>this.graph()?.resources??[]);internalIds=X(()=>new Set(this.resources().flatMap(e=>e.nodeIds)));showFramework=T(!1);frameworkCount=X(()=>{let e=this.internalIds();return(this.graph()?.nodes??[]).filter(t=>t.framework&&!e.has(t.id)).length});visibleNodes=X(()=>{let e=this.internalIds(),t=this.showFramework();return(this.graph()?.nodes??[]).filter(n=>!e.has(n.id)&&(t||!n.framework))});showGraph=T(!0);graphLinks=X(()=>{let e=this.graph();if(!e)return[];let t=new Set(this.visibleNodes().map(e=>e.id)),n=[];for(let r of e.edges){let i=e.nodes[r.producer]?.id,a=e.nodes[r.consumer]?.id;i&&a&&t.has(i)&&t.has(a)&&n.push({producer:i,consumer:a})}return n});graphNodes=X(()=>[...this.visibleNodes()].sort((e,t)=>e.id.localeCompare(t.id,void 0,{numeric:!0})));kindColorOf=e=>this.kindColor(e);watchedIds=X(()=>new Set(this.graph()?.watch?.ids??[]));stacksOn=X(()=>!!this.graph()?.watch?.stacks);watchedNodes=X(()=>{let e=this.watchedIds();return(this.graph()?.nodes??[]).filter(t=>e.has(t.id))});watchedElsewhere=X(()=>this.watchedIds().size-this.watchedNodes().length);watchLog=X(()=>{let e=this.graph()?.history??{};return this.watchedNodes().flatMap(t=>(e[t.id]??[]).filter(e=>e.source!==`initial`).map(e=>({id:t.id,label:t.label??t.id,change:e}))).sort((e,t)=>t.change.at-e.change.at).slice(0,nW)});hasAnySignals=X(()=>this.visibleNodes().length+this.resources().length>0);kindCounts=X(()=>{let e=this.graph()?[...this.visibleNodes().map(e=>e.kind),...this.resources().map(()=>`resource`)]:this.sourceSignals().map(e=>e.kind),t=new Map;for(let n of e)t.set(n,(t.get(n)??0)+1);return[...t].map(([e,t])=>({kind:e,count:t}))});kind=Q({source:this.graphOwner,computation:(e,t)=>{let n=t?.value??null;return n&&Z(this.kindCounts).some(e=>e.kind===n)?n:null}});kindChips=X(()=>{let e=this.kindCounts(),t=this.kind();return t&&!e.some(e=>e.kind===t)?[...e,{kind:t,count:0}]:e});kindTotal=X(()=>this.kindCounts().reduce((e,t)=>e+t.count,0));selectedId=Q({source:this.graphOwner,computation:()=>null});selectedNode=X(()=>this.graph()?.nodes.find(e=>e.id===this.selectedId())??null);jumpedPast=T(null);jumpNote=X(()=>{let e=this.jumpedPast();return!e||this.filter()||this.kind()||this.selectedId()!==e.id?``:`Cleared the filters to show ${e.label}.`});selectedHistory=X(()=>{let e=this.selectedId();return e?[...this.graph()?.history?.[e]??[]].reverse():[]});restoreBlocked=X(()=>{let e=this.rpc();if(cT(e))return`A saved report cannot write to the app.`;let t=this.graph()?.pageId;return pD(t?this.treePages()[t]:null)?`It needs the app open in a browser.`:OT(e,`components`)?``:Mw(`components`)});restoring=T(!1);restoreResult=T(null);restorable(e){let t=this.graph(),n=t?.nodes.find(t=>t.id===e);return n?.locator?n.locator.owner===`service`?t?.injector&&n.locator.id===t.injector.id?n:null:t?.component&&n.locator.id===t.component.id?n:null:null}async restore(e,t,n){let r=this.rpc(),i=this.graph()?.pageId,a=e.locator;if(!r||!i||!a||this.restoring()||this.restoreBlocked())return;this.restoring.set(!0);let o;try{o=await r.scope(`pangular`).rpc.call(`request-signal-restore`,{pageId:i,request:{component:a.id,...a.owner===`service`?{owner:`service`}:{},node:e.id,epoch:t.epoch}})??{}}catch{o={error:`The devtools server did not answer. Try again.`}}this.restoring.set(!1),this.restoreResult.set(o.ok?{id:e.id,text:`Restored ${o.key??a.key} to the value from ${n}.`,error:!1}:{id:e.id,text:o.error??`The page did not restore it.`,error:!0})}diffs=X(()=>{let e=this.selectedId(),t=e?this.graph()?.history?.[e]??[]:[],n=new Map;for(let e=1;e<t.length;e++){let r=t[e-1].value,i=t[e].value;if(!r||!i||typeof r!=`object`||typeof i!=`object`)continue;let a=nH(r,i);a.length&&n.set(t[e].epoch,a)}return n});diffLabel(e){return e===`added`?`added`:e===`removed`?`removed`:`changed`}sourceMatch=X(()=>{let e=this.selectedNode(),t=e?.label;if(!e||!t)return null;let n=t=>t===e.kind||t.startsWith(`${e.kind} `)||t.startsWith(`${e.kind}.`)||e.kind===`signal`&&t.startsWith(`model`)||e.kind===`computed`&&t===`toSignal`,r=this.sourceSignals().filter(e=>e.name===t&&n(e.kind)),i=this.graph(),a=i?.component?.tag??i?.element?.tag,o=a?r.filter(e=>e.component===a):[];return o.length&&(r=o),r.length?r.length===1?{exact:r[0],candidates:[]}:{exact:null,candidates:r.slice(0,5)}:null});writeHint=X(()=>{let e=this.selectedNode(),t=this.graph();if(!e||!t||t.writeHook===!1||e.kind!==`signal`&&e.kind!==`linkedSignal`)return``;if(!e.label)return`This signal has no name, so its history holds sampled values only. From Angular 20.1 the compiler names a signal that initializes a field or variable, so this one was likely made in a factory or helper. Pass a debugName in its options, for example signal(0, { debugName: 'count' }).`;let n=t.history?.[e.id]??[];return n.some(e=>e.source===`write`)||!n.some(e=>e.source===`sample`)?``:`Every change here was sampled. Writes are matched by name, kind, version and value, so another live signal with the same name and value can hide them.`});filteredResources=X(()=>{let e=this.filter().toLowerCase(),t=this.kind();return t&&t!==`resource`?[]:this.resources().filter(t=>!e||t.name.toLowerCase().includes(e)||e.length>=3&&`resource`.startsWith(e))});filteredNodes=X(()=>{let e=this.filter().toLowerCase(),t=this.kind();return this.visibleNodes().filter(n=>(!t||n.kind===t)&&(!e||(n.label??``).toLowerCase().includes(e)||n.kind.toLowerCase().includes(e))).sort((e,t)=>e.id.localeCompare(t.id,void 0,{numeric:!0}))});filteredSourceSignals=X(()=>{let e=this.filter().toLowerCase(),t=this.kind();return this.sourceSignals().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.toLowerCase().includes(e)||n.file.toLowerCase().includes(e)))});targetPageId=X(()=>this.pageId??(this.shownPageId()||null)??this.graph()?.pageId??this.latestTreePage()?.pageId??null);latestTreePage=X(()=>{let e=null;for(let[t,n]of Object.entries(this.treePages())){let r=n.reportedAt??0;(!e||r>e.reportedAt)&&(e={pageId:t,reportedAt:r})}return e});componentOptions=X(()=>{let e=this.targetPageId(),t=(e?this.treePages()[e]?.roots:void 0)??[],n=[],r=e=>{for(let t of e)n.push(t),r(t.children)};r(t);let i=this.graph()?.environments??[];if(!n.length&&!i.length)return[];let a=new Map;for(let e of n)a.set(e.name,(a.get(e.name)??0)+1);let o=new Map,s=[{value:ZU,label:`Follow the routed component`,hint:`automatic`},...i.map(e=>({value:$U+e.id,label:this.injectorLabel(e),hint:`injector`}))];for(let e of n){let t=(o.get(e.name)??0)+1;o.set(e.name,t),s.push({value:e.id,label:(a.get(e.name)??0)>1?`${e.name} #${t}`:e.name,hint:e.kind===`directive`?`<${e.tag}> directive`:`<${e.tag}>`})}return s});pickerValue=X(()=>{let e=this.picked();return e&&this.componentOptions().some(t=>t.value===e)?e:ZU});constructor(){E(()=>{let e=this.rpc();e&&(this.loadSignalGraph(e),this.loadSourceSignals(e))}),E(()=>{let e=this.focus();e&&Z(()=>this.showComponent(e))}),E(()=>{let e=this.focusedSignal(),t=this.graph();if(!e||t?.component?.id!==e.componentId)return;let n=t.nodes.find(t=>t.locator?.id===e.componentId&&t.locator.key===e.key);Z(()=>{this.focusedSignal.set(null),n&&this.jumpTo(n)})}),this.destroyRef.onDestroy(()=>{for(let e of this.cleanups.splice(0))e()})}async loadSignalGraph(e){for(let e of this.cleanups.splice(0))e();let t=++this.graphLoad,n=()=>this.destroyRef.destroyed||t!==this.graphLoad,r=e.scope(`pangular`);try{let e=await r.rpc.sharedState(`signal-graph`);if(n())return;this.graphFailed.set(!1);let t=e=>{let t=e,n=t?.pages&&typeof t.pages==`object`?t.pages:{},r={graph:t?.graph??null,pages:n};this.notePageGone(QU(r)),this.graphState.set(r);let i=this.pendingPageId;i&&this.graphPages()[i]&&(this.pendingPageId=null,this.chosenPageId.set(i)),e!==void 0&&this.graphKnown.set(!0)};t(e.value()),this.cleanups.push(e.on(`updated`,t))}catch{if(n())return;this.graphState.set({graph:null,pages:{}}),this.graphKnown.set(!0),this.graphFailed.set(!0)}try{let e=await r.rpc.sharedState(`component-tree`);if(n())return;let t=e=>{let t=e?.pages;this.treePages.set(t&&typeof t==`object`?t:{})};t(e.value()),this.cleanups.push(e.on(`updated`,t))}catch{n()||this.treePages.set({})}}notePageGone(e){let t=Object.keys(this.graphPages()).filter(t=>!e[t]);t.length&&this.pickedByPage.update(e=>{let n={...e};for(let e of t)delete n[e];return n});let n=this.chosenPageId();if(!n||e[n])return;let r=this.pageOptions().find(e=>e.value===n)?.label??`The chosen page`;this.chosenPageId.set(null),this.announcement.set(`${r} closed, so this shows another page.`)}selectPage(e){if(!e||e===this.shownPageId())return;this.pendingPageId=null,this.chosenPageId.set(e);let t=this.pageOptions().find(t=>t.value===e)?.label??e;this.announcement.set(`Showing the signal graph of ${t}.`)}showComponent(e){this.pendingPageId=null,e.pageId&&!this.pageId&&(this.graphPages()[e.pageId]?this.chosenPageId.set(e.pageId):this.pendingPageId=e.pageId),this.focusedSignal.set(e.key?{componentId:e.componentId,key:e.key}:null),this.pickComponent(e.componentId,this.pageId??e.pageId)}pickComponent(e,t){let n=e&&e!==ZU?e:null;this.focusedSignal()?.componentId!==n&&this.focusedSignal.set(null);let r=t??this.targetPageId()??void 0;this.pickedByPage.update(e=>{let t={...e};return n?t[r??``]=n:delete t[r??``],t});let i=this.rpc();if(!i)return;let a=n?.startsWith($U)?{pageId:r,env:n.slice(4)}:{pageId:r,id:n};i.scope(`pangular`).rpc.call(`select-signal-target`,a).catch(()=>{})}injectorLabel(e){return e.name===`Root`?`Root services`:e.name}sourceNote(e){return rW[e]}async loadSourceSignals(e){let t=e.scope(`pangular`);try{let e=await t.rpc.call(`get-signals`);this.sourceSignals.set(e),this.sourceFailed.set(!1)}catch{this.sourceFailed.set(!0)}finally{this.sourceLoaded.set(!0)}}async retry(){let e=this.rpc();if(!e||this.retrying())return;let t=document.activeElement;this.retrying.set(!0);try{await Promise.all([this.loadSignalGraph(e),this.loadSourceSignals(e)])}finally{this.retrying.set(!1)}this.destroyRef.destroyed||cd(()=>{(!t?.isConnected||document.activeElement===document.body)&&this.filterInput()?.focus()},{injector:this.injector})}clearFilters(){this.resetFilters(),this.filterInput()?.focus()}resetFilters(){this.filter.set(``),this.kind.set(null)}select(e){this.selectedId.set(this.selectedId()===e?null:e),this.showInternals.set(!1)}selectFromGraph(e){this.selectedId.set(e),this.showInternals.set(!1)}plural(e,t){return`${e} ${t}${e===1?``:`s`}`}isWatchable(e){return tW.has(e.kind)}toggleWatch(e){let t=!this.watchedIds().has(e.id),n=e.label??`the unnamed signal`;this.sendWatch({id:e.id,watch:t}),this.announcement.set(t?`Watching ${n}. Its changes also log to the page console.`:`Stopped watching ${n}.`)}toggleStacks(){let e=!this.stacksOn();this.sendWatch({stacks:e}),this.announcement.set(e?`Recording write stacks.`:`Stopped recording write stacks.`)}sendWatch(e){let t=this.rpc(),n=this.graph()?.pageId??this.targetPageId()??void 0;t&&t.scope(`pangular`).rpc.call(`set-signal-watch`,{...e,pageId:n}).catch(()=>{})}jumpTo(e){let t=this.resources().find(t=>t.nodeIds.includes(e.id)),n=t?.id??e.id,r=t?!this.filteredResources().some(e=>e.id===n):!this.filteredNodes().some(e=>e.id===n);r&&this.resetFilters(),this.jumpedPast.set(r?{id:n,label:t?.name??e.label??e.id}:null),this.selectedId.set(n),this.showInternals.set(!!t),cd(()=>{let e=[...this.host.nativeElement.querySelectorAll(`.node-card[data-card]`)].find(e=>e.dataset.card===n);e?.scrollIntoView?.({block:`nearest`}),e?.focus({preventScroll:!0})},{injector:this.injector})}changeCount(e){let t=this.graph(),n=t?.nodes.find(t=>t.id===e)?.changes??t?.resources?.find(t=>t.id===e)?.changes;return n===void 0?(t?.history?.[e]??[]).reduce((e,t)=>e+(t.source===`initial`?0:1+(t.missed??0)),0):n}historySummary(e){let t=this.changeCount(e),n=this.graph()?.history?.[e]?.length??0;return t?`${`${t} ${t===1?`change`:`changes`} recorded`}${n>=eW&&t>=n?`, showing the last ${n}`:``}, newest first.`:`No changes recorded yet. The entry below is the value seen first.`}statusTone(e){return aW[e]??`neutral`}internalsOf(e){let t=new Set(e.nodeIds);return(this.graph()?.nodes??[]).filter(e=>t.has(e.id))}sourceLabel(e){return iW[e]}kindColor(e){return`var(--kind-${oW[e]??`unknown`})`}relations=X(()=>{let e=new Map,t=this.graph();if(!t)return e;for(let n of t.nodes)e.set(n.id,{deps:[],consumers:[]});for(let n of t.edges){let r=t.nodes[n.producer],i=t.nodes[n.consumer];r&&i&&(e.get(i.id)?.deps.push(r),e.get(r.id)?.consumers.push(i))}return e});getDependencies(e){return this.relations().get(e.id)?.deps??[]}getConsumers(e){return this.relations().get(e.id)?.consumers??[]}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-signal-inspector`]],viewQuery:function(e,t){e&1&&Mg(t.filterInput,rH,5),e&2&&Ng()},inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},decls:32,vars:19,consts:[[`filterInput`,``],[`historyTpl`,``],[1,`toolbar`],[`placeholder`,`Filter by name or kind`,`saveKey`,`signals`,3,`valueChange`,`value`],[1,`picker`,`page-picker`],[1,`picker`],[`role`,`status`,1,`sr-only`],[1,`showing`],[`role`,`status`,1,`fallback`],[1,`intro`],[`capability`,`signalGraph`,`compact`,``,3,`page`,`missing`],[`role`,`group`,`aria-label`,`Filter by kind`,1,`kinds`],[`role`,`status`,1,`empty`],[`role`,`alert`,1,`empty`,3,`compact`],[1,`empty`],[`aria-labelledby`,`signal-graph-heading`,1,`graph-section`],[`aria-labelledby`,`signal-watched-heading`,1,`watched`],[`role`,`status`,1,`jump-note`],[`id`,`signals-page-label`,1,`label-key`],[`labelledBy`,`signals-page-label`,3,`valueChange`,`options`,`value`],[`id`,`signals-component-label`,1,`label-key`],[`labelledBy`,`signals-component-label`,3,`valueChange`,`options`,`value`],[1,`showing-name`],[1,`mono`],[1,`source-note`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[`aria-hidden`,`true`,1,`dot`],[1,`chip-text`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[`role`,`alert`,1,`empty`],[1,`hint`],[`type`,`button`,1,`reset`,3,`click`],[1,`source-label`],[1,`nodes`],[1,`node-card`],[`role`,`status`,1,`empty`,`compact`],[1,`node-header`],[1,`kind-badge`],[1,`node-label`],[1,`node-meta`],[1,`file`,3,`file`,`line`],[`aria-hidden`,`true`,1,`sep`],[3,`id`],[1,`history-summary`],[`tabindex`,`0`,1,`history`,`scroll-box`],[`role`,`status`,1,`restore-result`],[1,`history-meta`],[1,`source-tag`],[1,`missed`],[`type`,`button`,1,`restore`],[1,`diff`],[`aria-label`,`Written from`,1,`stack`],[`type`,`button`,1,`restore`,3,`click`],[1,`diff-list`],[3,`class`],[1,`diff-kind`],[1,`sr-only`],[1,`diff-path`],[1,`diff-old`],[1,`diff-new`],[`aria-hidden`,`true`],[1,`section-head`],[`id`,`signal-graph-heading`,1,`list-heading`],[1,`section-actions`],[`type`,`button`,1,`toggle`],[`type`,`button`,1,`toggle`,3,`click`],[`type`,`button`,`aria-controls`,`signal-graph-body`,1,`toggle`,3,`click`],[1,`hint`,`graph-hint`],[`id`,`signal-graph-body`],[3,`nodes`,`links`,`selectedId`,`watched`,`kindColor`],[1,`graph-selection`],[3,`selected`,`nodes`,`links`,`selectedId`,`watched`,`kindColor`],[1,`rel-label`],[`type`,`button`,1,`link-button`,3,`click`],[`id`,`signal-watched-heading`,1,`list-heading`],[1,`watched-list`],[1,`watched-value`],[1,`changed-badge`],[`id`,`signal-watch-log-heading`,1,`sub-heading`],[`role`,`log`,`tabindex`,`0`,`aria-labelledby`,`signal-watch-log-heading`,1,`watch-log`,`scroll-box`],[1,`history`],[1,`list-heading`],[`role`,`list`,1,`nodes`,`resources`],[`type`,`button`,1,`node-card`,3,`click`],[1,`status-tag`,3,`class`],[`aria-hidden`,`true`,1,`chevron`],[1,`node-value`],[1,`detail-panel`,3,`id`],[1,`status-tag`],[1,`detail-title`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[`type`,`button`,1,`reset`,`internals-toggle`,3,`click`],[`role`,`region`,`tabindex`,`0`,1,`scroll-box`],[1,`kind-badge`,`sm`],[`role`,`list`,`appRovingList`,`button.node-card`,1,`nodes`],[1,`empty`,`compact`],[1,`watching-badge`],[1,`framework-badge`],[1,`source-matches`],[3,`file`,`line`],[1,`hint-inline`],[1,`source-candidates`],[`type`,`button`,1,`rel-link`,3,`click`],[`type`,`button`,1,`reset`,`watch-toggle`,3,`click`],[`type`,`button`,1,`reset`]],template:function(e,t){if(e&1){let e=B();F(0,`div`,2)(1,`app-search-field`,3,0),M_(`valueChange`,function(n){return S(e),j_(t.filter,n)||(t.filter=n),C(n)}),I(),A(3,pH,4,2,`div`,4),A(4,mH,4,2,`div`,5),I(),F(5,`p`,6),K(6),I(),A(7,gH,6,3,`p`,7)(8,_H,5,1,`p`,7)(9,vH,7,2,`p`,7),A(10,yH,2,0,`p`,8),F(11,`p`,9),A(12,bH,1,0)(13,xH,1,0)(14,SH,1,0)(15,CH,1,0),I(),A(16,wH,2,2,`app-angular-unavailable`,10),A(17,TH,2,0,`p`,8),A(18,EH,2,2,`p`,8),A(19,OH,7,4,`div`,11),A(20,kH,4,0,`div`,12),A(21,AH,7,4,`div`,13)(22,jH,14,0,`div`,14),A(23,FH,6,1),jh(24,YH,1,1,`ng-template`,null,1,tv),A(26,nU,12,6,`section`,15),A(27,dU,8,2,`section`,16),F(28,`p`,17),K(29),I(),A(30,EU,5,0),A(31,XU,6,1)}if(e&2){let e,n;D(),A_(`value`,t.filter),D(2),j(t.pageOptions().length>1?3:-1),D(),j(t.componentOptions().length?4:-1),D(2),q(t.announcement()),D(),j((e=t.graph()?.component)?7:(e=t.graph()?.injector)?8:(e=t.graph()?.element)?9:-1,e),D(3),j(t.graph()&&t.picked()&&t.graph().source!==`selected`?10:-1),D(2),j(t.graph()?.injector?12:t.graph()?13:t.graphKnown()?15:14),D(4),j(t.graph()?-1:16),D(),j(t.graph()?.writeHook===!1?17:-1),D(),j((n=t.graph()?.nodeCount)?18:-1,n),D(),j(t.kindChips().length?19:-1),D(),j(!t.graph()&&!t.sourceLoaded()?20:-1),D(),j(!t.graph()&&t.sourceLoaded()&&t.loadFailed()?21:!t.graph()&&t.sourceLoaded()&&t.sourceSignals().length===0?22:-1),D(2),j(!t.graph()&&t.sourceSignals().length>0?23:-1),D(3),j(t.graph()&&(t.visibleNodes().length||t.frameworkCount())?26:-1),D(),j(t.watchedNodes().length||t.watchedElsewhere()?27:-1),D(2),q(t.jumpNote()),D(),j(t.graph()&&t.filteredResources().length?30:-1),D(),j(t.graph()&&(t.visibleNodes().length||!t.filteredResources().length)?31:-1)}},dependencies:[$N,dD,Zv,NV,wD,ZV,bj,Qv,$v],styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 16px;
-  padding: 10px 12px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-input[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 60%, var(--%NS%control-border));
-}
-
-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  text-align: center;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty.compact[_ngcontent-%COMP%] {
-  padding: 24px 16px;
-  border-style: dashed;
-  background: transparent;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.hint[_ngcontent-%COMP%] {
-  max-width: 460px;
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.55;
-  overflow-wrap: anywhere;
-}
-
-.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  padding: 1px 5px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  color: var(--%NS%text);
-  background: var(--%NS%surface-3);
-  border: 1px solid var(--%NS%border);
-  border-radius: 5px;
-}
-
-.reset[_ngcontent-%COMP%] {
-  height: 34px;
-  margin-top: 4px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
-}
-
-.reset[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.reset[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner[_ngcontent-%COMP%] {
-    animation: none;
-    border-top-color: var(--%NS%border-strong);
-  }
-}
-.intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.kinds[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 16px;
-}
-
-.kind-chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 100%;
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease);
-}
-
-.kind-chip[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%text-3);
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text);
-}
-
-.kind-chip[_ngcontent-%COMP%]:active {
-  transform: translateY(0.5px);
-}
-
-.kind-chip.active[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.kind-chip[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.chip-text[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kind-chip[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
-  flex: none;
-  min-width: 18px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 16px;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-.kind-chip.active[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
-  background: color-mix(in srgb, var(--%NS%accent) 22%, transparent);
-  color: var(--%NS%text-strong);
-}
-
-.dot[_ngcontent-%COMP%] {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.node-header[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px 8px;
-  min-width: 0;
-}
-
-.kind-badge[_ngcontent-%COMP%] {
-  flex: none;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 10.5px;
-  line-height: 18px;
-  padding: 0 8px;
-  border-radius: 99px;
-  color: var(--%NS%kind-ink);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.node-label[_ngcontent-%COMP%] {
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.node-meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 2px 6px;
-  min-width: 0;
-  margin-top: 6px;
-  font-size: 12px;
-  color: var(--%NS%text-3);
-  font-variant-numeric: tabular-nums;
-}
-
-.node-meta[_ngcontent-%COMP%]   .file[_ngcontent-%COMP%] {
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  overflow-wrap: anywhere;
-}
-
-.sep[_ngcontent-%COMP%] {
-  color: var(--%NS%border-strong);
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 8px 16px;
-  margin: 0;
-  font-size: 13px;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  padding-top: 2px;
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-  font-variant-numeric: tabular-nums;
-  overflow-wrap: anywhere;
-}
-
-pre[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  margin: 0;
-  color: var(--%NS%text);
-}
-
-.nodes[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.node-card[_ngcontent-%COMP%] {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  text-align: left;
-  font: inherit;
-  color: inherit;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  padding: 12px 16px;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-.node-card[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-  border-color: var(--%NS%border-strong);
-}
-
-.picker[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1 1 260px;
-  min-width: 0;
-}
-
-.picker[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.page-picker[_ngcontent-%COMP%] {
-  flex: 0 1 240px;
-}
-
-.label-key[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.showing[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 10px;
-  margin: 0 0 8px;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.showing-name[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  overflow-wrap: anywhere;
-}
-
-.source-note[_ngcontent-%COMP%] {
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  line-height: 18px;
-}
-
-.fallback[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  color: var(--%NS%warn);
-  font-size: 12px;
-}
-
-.source-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 12px;
-}
-
-.nodes[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
-  display: block;
-  min-width: 0;
-  padding: 0;
-}
-
-
-.nodes[_ngcontent-%COMP%]    > li.empty[_ngcontent-%COMP%] {
-  display: flex;
-  padding: 24px 16px;
-}
-
-button.node-card[_ngcontent-%COMP%] {
-  cursor: pointer;
-}
-
-.node-card[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.node-card.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  border-color: var(--%NS%accent-line);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.chevron[_ngcontent-%COMP%] {
-  flex: none;
-  width: 7px;
-  height: 7px;
-  margin-left: auto;
-  border-right: 1.5px solid var(--%NS%text-3);
-  border-bottom: 1.5px solid var(--%NS%text-3);
-  transform: translateY(-2px) rotate(45deg);
-  transition: transform 0.2s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
-}
-
-.node-card[_ngcontent-%COMP%]:hover   .chevron[_ngcontent-%COMP%] {
-  border-color: var(--%NS%text);
-}
-
-.node-card.selected[_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  transform: translateY(2px) rotate(-135deg);
-}
-
-.node-value[_ngcontent-%COMP%] {
-  display: block;
-  margin-top: 8px;
-  padding: 4px 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  color: var(--%NS%text-2);
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%border);
-  border-radius: 6px;
-}
-
-.node-card.selected[_ngcontent-%COMP%]   .node-value[_ngcontent-%COMP%] {
-  background: color-mix(in srgb, var(--%NS%bg) 70%, transparent);
-}
-
-.kind-badge.sm[_ngcontent-%COMP%] {
-  font-size: 10px;
-  line-height: 16px;
-  padding: 0 6px;
-}
-
-.changed-badge[_ngcontent-%COMP%] {
-  flex: none;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 16px;
-  padding: 0 8px;
-  border: 1px solid;
-  border-radius: 99px;
-  font-variant-numeric: tabular-nums;
-}
-
-.changed-badge[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.detail-panel[_ngcontent-%COMP%] {
-  margin-top: 8px;
-  padding: 16px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.25s var(--%NS%ease) both;
-}
-
-.detail-title[_ngcontent-%COMP%] {
-  margin: 0 0 16px;
-  font-family: var(--%NS%font-mono);
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--%NS%accent);
-  overflow-wrap: anywhere;
-}
-
-.detail-panel[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 20px 0 8px;
-}
-
-.detail-panel[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {
-  max-height: 240px;
-  overflow: auto;
-  padding: 8px 12px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.scroll-box[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.list-heading[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 16px 0 8px;
-}
-
-.resources[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-}
-
-.status-tag[_ngcontent-%COMP%] {
-  flex: none;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 16px;
-  padding: 0 8px;
-  border: 1px solid;
-  border-radius: 99px;
-}
-
-.tone-ok[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.tone-warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.tone-danger[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tone-neutral[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  border-color: var(--%NS%border-strong);
-}
-
-.detail-panel[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-}
-
-.internals-toggle[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.detail-panel[_ngcontent-%COMP%]   .internals-toggle[_ngcontent-%COMP%]    + ul[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.detail-panel[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  font-size: 13px;
-}
-
-.detail-panel[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], 
-.rel-link[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  min-height: 28px;
-  padding: 4px 8px;
-  color: var(--%NS%text-2);
-  border-radius: 6px;
-}
-
-.detail-panel[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:has(> .rel-link) {
-  padding: 0;
-}
-
-.rel-link[_ngcontent-%COMP%] {
-  width: 100%;
-  font: inherit;
-  text-align: left;
-  background: none;
-  border: 0;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease);
-}
-
-.rel-link[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-.rel-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.jump-note[_ngcontent-%COMP%] {
-  margin: 0;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.jump-note[_ngcontent-%COMP%]:not(:empty) {
-  margin-bottom: 8px;
-}
-
-.rel-label[_ngcontent-%COMP%] {
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-.history-summary[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.history[_ngcontent-%COMP%] {
-  list-style: none;
-  padding: 4px;
-  margin: 0;
-  max-height: 320px;
-  overflow: auto;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: block;
-  padding: 8px;
-  border-radius: 6px;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
-  border-top: 1px solid var(--%NS%border);
-}
-
-.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.history-meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  margin-bottom: 4px;
-  font-size: 11px;
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.history-meta[_ngcontent-%COMP%]   time[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  color: var(--%NS%text);
-}
-
-.source-tag[_ngcontent-%COMP%] {
-  line-height: 16px;
-  padding: 0 8px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  border: 1px solid var(--%NS%border-strong);
-  color: var(--%NS%text);
-}
-
-.source-write[_ngcontent-%COMP%] {
-  color: var(--%NS%hue-info-text);
-  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
-  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
-}
-
-.missed[_ngcontent-%COMP%] {
-  color: var(--%NS%warn);
-}
-
-.restore[_ngcontent-%COMP%] {
-  margin-left: auto;
-  height: 22px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-.restore[_ngcontent-%COMP%]:hover:not([aria-disabled=true]) {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-.restore[aria-disabled=true][_ngcontent-%COMP%] {
-  opacity: 0.6;
-  cursor: progress;
-}
-
-.restore[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.diff[_ngcontent-%COMP%] {
-  margin-top: 6px;
-  font-size: 12px;
-}
-
-.diff[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.diff[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.diff-list[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin: 6px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.diff-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 8px;
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  overflow-wrap: anywhere;
-}
-
-.diff-kind[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 5px;
-  font-size: 10px;
-  line-height: 16px;
-}
-
-.diff-added[_ngcontent-%COMP%]   .diff-kind[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.diff-removed[_ngcontent-%COMP%]   .diff-kind[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.diff-changed[_ngcontent-%COMP%]   .diff-kind[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.diff-path[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.diff-old[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-decoration: line-through;
-}
-
-.diff-new[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.source-matches[_ngcontent-%COMP%] {
-  min-width: 0;
-}
-
-.source-candidates[_ngcontent-%COMP%] {
-  margin: 4px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.hint-inline[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.restore-result[_ngcontent-%COMP%] {
-  margin: 0;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.restore-result.has-text[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-}
-
-.restore-result.restore-error[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .restore[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}
-.graph-section[_ngcontent-%COMP%], 
-.watched[_ngcontent-%COMP%] {
-  margin-bottom: 16px;
-}
-
-.section-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px 12px;
-  margin: 16px 0 8px;
-}
-
-.section-head[_ngcontent-%COMP%]   .list-heading[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.section-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.toggle[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 12.5px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
-}
-
-.toggle[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.toggle[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.toggle[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.toggle[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 16px;
-  font-variant-numeric: tabular-nums;
-}
-
-.graph-hint[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  max-width: none;
-}
-
-.graph-selection[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px 8px;
-  margin: 8px 0 0;
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.link-button[_ngcontent-%COMP%] {
-  min-height: 28px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  color: var(--%NS%accent-text);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.link-button[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.link-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.watched-list[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 0 0 8px;
-  padding: 0;
-  list-style: none;
-}
-
-.watched-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px 8px;
-  min-width: 0;
-  padding: 6px 10px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%accent-line);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.watched-value[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1 120px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.sub-heading[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 12px 0 8px;
-}
-
-.watch-log[_ngcontent-%COMP%] {
-  max-height: 320px;
-  overflow: auto;
-  border-radius: var(--%NS%radius-sm);
-}
-
-.watch-log[_ngcontent-%COMP%]   .history[_ngcontent-%COMP%] {
-  max-height: none;
-  overflow: visible;
-}
-
-.stack[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  padding: 0 0 0 18px;
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  color: var(--%NS%text-2);
-  overflow-wrap: anywhere;
-}
-
-.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .stack[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  padding: 0;
-  border: 0;
-}
-
-.watching-badge[_ngcontent-%COMP%], 
-.framework-badge[_ngcontent-%COMP%] {
-  flex: none;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 16px;
-  padding: 0 8px;
-  border: 1px solid;
-  border-radius: 99px;
-}
-
-.watching-badge[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.framework-badge[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  border-color: var(--%NS%border-strong);
-}
-
-.watch-toggle[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-}
-
-.watch-toggle[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-@media (max-width: 480px) {
-  .toolbar[_ngcontent-%COMP%] {
-    padding: 8px;
-  }
-  .toolbar[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], 
-   .picker[_ngcontent-%COMP%] {
-    flex-basis: 100%;
-  }
-  .node-card[_ngcontent-%COMP%], 
-   .detail-panel[_ngcontent-%COMP%] {
-    padding: 12px;
-  }
-  dl[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 4px;
-  }
-  dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
-    margin-top: 8px;
-  }
-}`]})},cW=(e,t)=>t.prop;function lW(e,t){if(e&1){let e=B();F(0,`button`,6),H(`click`,function(){return S(e),C(W().load())}),K(1,` Refresh `),I()}e&2&&k(`aria-label`,`Read the value of `+W().name()+` again`)}function uW(e,t){e&1&&(F(0,`p`,7),K(1,`Reading from the page…`),I())}function dW(e,t){if(e&1&&(F(0,`p`,8),K(1),I()),e&2){let e=W(2);D(),q(e.error())}}function fW(e,t){if(e&1&&(F(0,`p`,9),K(1),I()),e&2){let e=W(3);D(),J(``,e.type(),`, read from the page. Getters never run.`)}}function pW(e,t){e&1&&(F(0,`span`,14),K(1),I()),e&2&&(D(),q(t))}function mW(e,t){if(e&1&&(F(0,`span`,12),K(1),A(2,pW,2,1,`span`,14),I()),e&2){let e,t=W().$implicit,n=W(3);D(),J(``,t.name,` `),D(),j((e=n.kinds()[t.prop])?2:-1,e)}}function hW(e,t){if(e&1&&(F(0,`li`,11),A(1,mW,3,2,`span`,12),L(2,`app-value-tree`,13),I()),e&2){let e=t.$implicit,n=W(3);D(),j(e.prop===n.whole?-1:1),D(),P(`prop`,e)(`store`,n.store)(`componentId`,n.key())(`pageId`,n.pageId())(`rpc`,n.rpc())}}function gW(e,t){if(e&1&&(F(0,`p`,9),K(1),I()),e&2){let e=W(3);D(),J(``,e.more(),` more members are not listed.`)}}function _W(e,t){if(e&1&&(A(0,fW,2,1,`p`,9),F(1,`ul`,10),M(2,hW,3,6,`li`,11,cW),I(),A(4,gW,2,1,`p`,9)),e&2){let e=W(2);j(e.type()?0:-1),D(2),N(e.props()),D(2),j(e.more()?4:-1)}}function vW(e,t){e&1&&(F(0,`p`,9),K(1,`No fields to show: the instance has only methods or getters.`),I())}function yW(e,t){if(e&1&&(F(0,`div`,5),A(1,uW,2,0,`p`,7)(2,dW,2,1,`p`,8)(3,_W,5,2)(4,vW,2,0,`p`,9),I()),e&2){let e=W();P(`id`,e.regionId),k(`aria-label`,`Value of `+e.name()),D(),j(e.loading()?1:e.error()?2:e.props().length?3:4)}}var bW=`$value`,xW=0,SW=class e{rpc=$(null);pageId=$(null);injectorId=$.required();token=$.required();tokenId=$(void 0);index=$.required();position=$(``);name=X(()=>this.position()?`${this.token()} ${this.position()}`:this.token());regionId=`provider-value-${++xW}`;whole=bW;key=X(()=>`${this.pageId()}|${this.injectorId()}|${this.index()}|${this.tokenId()??this.token()}`);open=Q({source:this.key,computation:()=>!1});answer=Q({source:this.key,computation:()=>null});loading=T(!1);error=X(()=>{let e=this.answer();return e&&!e.ok?e.error??`The page did not read it.`:``});type=X(()=>this.answer()?.type??``);more=X(()=>this.answer()?.more??0);props=X(()=>(this.answer()?.members??[]).map(e=>({name:e.name===bW?`value`:e.name,prop:e.name,value:e.value})));kinds=X(()=>Object.fromEntries((this.answer()?.members??[]).filter(e=>e.kind).map(e=>[e.name,e.kind])));store=new vM(e=>this.read({path:[...e.path],limit:e.limit,depth:e.depth}));async read(e){let t=this.pageId();if(!t)return{error:`No live page to read from.`};try{return await oT(this.rpc(),`request-provider-value`,{pageId:t,request:{injectorId:this.injectorId(),token:this.token(),...this.tokenId()?{tokenId:this.tokenId()}:{},index:this.index(),...e}})??{error:`The devtools server is not connected.`}}catch{return{error:`The devtools server did not answer. Try again.`}}}toggle(){let e=!this.open();this.open.set(e),e&&!this.answer()&&this.load()}requests=0;async load(){let e=this.key(),t=++this.requests;this.loading.set(!0),this.store.follow({rpc:null,pageId:null,componentId:`${e}#${Date.now()}`},void 0);let n=await this.read({path:[]});t===this.requests&&e===this.key()&&(this.loading.set(!1),this.answer.set(n))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-provider-value`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],injectorId:[1,`injectorId`],token:[1,`token`],tokenId:[1,`tokenId`],index:[1,`index`],position:[1,`position`]},decls:7,vars:6,consts:[[1,`bar`],[`type`,`button`,1,`toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[`type`,`button`,1,`link`],[`role`,`region`,1,`value`,3,`id`],[`type`,`button`,1,`link`,3,`click`],[`role`,`status`,1,`muted`],[`role`,`alert`,1,`error`],[1,`muted`],[1,`props`],[1,`prop`],[1,`name`,`mono`],[3,`prop`,`store`,`componentId`,`pageId`,`rpc`],[1,`kind`]],template:function(e,t){e&1&&(F(0,`div`,0)(1,`button`,1),H(`click`,function(){return t.toggle()}),w(),F(2,`svg`,2),L(3,`path`,3),I(),K(4),I(),A(5,lW,2,1,`button`,4),I(),A(6,yW,5,3,`div`,5)),e&2&&(D(),k(`aria-expanded`,t.open())(`aria-controls`,t.open()?t.regionId:null)(`aria-label`,(t.open()?`Hide the value of `:`Show the value of `)+t.name()),D(3),J(` `,t.open()?`Hide value`:`Show value`,` `),D(),j(t.open()&&!t.loading()?5:-1),D(),j(t.open()?6:-1))},dependencies:[gM],styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-  margin-top: 6px;
-}
-
-.bar[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.toggle[_ngcontent-%COMP%], 
-.link[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-height: 28px;
-  padding: 0 8px 0 4px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.link[_ngcontent-%COMP%] {
-  padding: 0 8px;
-  border-color: transparent;
-  background: none;
-  text-decoration: underline;
-}
-
-.toggle[_ngcontent-%COMP%]:hover, 
-.link[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.toggle[_ngcontent-%COMP%]:focus-visible, 
-.link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.chevron[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: transform 150ms var(--%NS%ease);
-}
-
-.toggle[aria-expanded=true][_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
-  transform: rotate(90deg);
-}
-
-.value[_ngcontent-%COMP%] {
-  margin-top: 6px;
-  padding: 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-}
-
-.props[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.prop[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-  font-size: 12px;
-}
-
-.name[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  overflow-wrap: anywhere;
-}
-
-.kind[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  margin-left: 4px;
-  padding: 0 6px;
-  border-radius: 999px;
-  font-size: 10px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  margin: 0 0 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.error[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%danger-text);
-  font-size: 12px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chevron[_ngcontent-%COMP%], 
-   .toggle[_ngcontent-%COMP%], 
-   .link[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},CW=(e,t)=>t.label,wW=(e,t)=>t.name;function TW(e,t){if(e&1&&(R(0,`tr`)(1,`td`),K(2),z(),R(3,`td`,7),K(4),z(),R(5,`td`,6),K(6),z()()),e&2){let e=t.$implicit,n=W(2);D(2),q(e.label),D(2),q(n.format(e.at)),D(2),q(e.source)}}function EW(e,t){e&1&&(R(0,`p`,6),K(1,` Load `),R(2,`code`),K(3,`@pangular-inspector/devtools/startup-hook`),z(),K(4,` from the polyfills of the development build to time each provider's construction. `),z())}function DW(e,t){if(e&1&&(R(0,`p`,6),K(1),z()),e&2){let e=W();D(),J(` `,e.providers.note||`Provider timing is unavailable on this page.`,` `)}}function OW(e,t){e&1&&K(0,` Recording until one second after the app is first stable. `)}function kW(e,t){if(e&1&&(R(0,`tr`)(1,`td`,9),K(2),z(),R(3,`td`,7),K(4),z(),R(5,`td`,7),K(6),z(),R(7,`td`,7),K(8),z()()),e&2){let e=t.$implicit,n=W(4);D(2),q(e.name),D(2),q(n.format(e.selfMs)),D(2),q(n.format(e.ms)),D(2),q(e.count)}}function AW(e,t){if(e&1&&(R(0,`div`,8)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,4),K(5,`Provider`),z(),R(6,`th`,4),K(7,`Own time`),z(),R(8,`th`,4),K(9,`Total`),z(),R(10,`th`,4),K(11,`Instances`),z()()(),R(12,`tbody`),M(13,kW,9,4,`tr`,null,wW),z()()()),e&2){let e=W(3);D(13),N(e.slowest())}}function jW(e,t){if(e&1&&(R(0,`p`,6),A(1,OW,1,0),K(2),z(),A(3,AW,15,0,`div`,8)),e&2){let e=W(),t=W();D(),j(e.providers.status===`recording`?1:-1),D(),Y(` `,e.providers.count,` provider instances, `,t.format(e.providers.totalSelfMs),` of construction, from Angular's own profiling. Own time leaves out what each one created. Components and directives show up too, since Angular creates them through injectors. `),D(),j(t.slowest().length?3:-1)}}function MW(e,t){if(e&1&&(R(0,`section`,0)(1,`h2`,1),K(2,`Startup`),z(),R(3,`p`,2),K(4),z(),R(5,`div`,3)(6,`table`)(7,`thead`)(8,`tr`)(9,`th`,4),K(10,`Milestone`),z(),R(11,`th`,4),K(12,`At`),z(),R(13,`th`,4),K(14,`Source`),z()()(),R(15,`tbody`),M(16,TW,7,3,`tr`,null,CW),z()()(),R(18,`h3`,5),K(19,`Slowest providers`),z(),A(20,EW,5,0,`p`,6)(21,DW,2,1,`p`,6)(22,jW,4,4),z()),e&2){let e,n=W();D(4),q(n.intro()),D(12),N(n.steps()),D(4),j((e=t.providers.status)===`needs-hook`?20:e===`unavailable`?21:22)}}function NW(e){return e>=1e3?`${(e/1e3).toFixed(2)} s`:`${Math.round(e*10)/10} ms`}function PW(e){let t=[],n=(e,n,r)=>{typeof n==`number`&&t.push({label:e,at:n,source:r})};return n(`DOM content loaded`,e.navigation.domContentLoaded,`Navigation timing`),n(`First contentful paint`,e.navigation.firstContentfulPaint,`Paint timing`),n(`Angular started`,e.angularStart?.at,e.angularStart?.source===`hook`?`Startup hook`:`First Angular feature mark`),n(`Root component created`,e.bootstrapComponent?.end,`Angular profiler`),n(e.firstStable?.exact===!1?`First stable, at the latest`:`First stable`,e.firstStable?.at,`ApplicationRef.isStable`),n(`Load event`,e.navigation.load,`Navigation timing`),n(`Overlay started`,e.overlayStart,`Overlay`),t.sort((e,t)=>e.at-t.at)}function FW(e){let t=e?.pages;return!t||typeof t!=`object`?[]:Object.values(t).filter(e=>e&&typeof e.pageId==`string`&&e.providers).sort((e,t)=>t.reportedAt-e.reportedAt)}var IW=10,LW=class e{rpc=$(null);pageId=$(null);destroyRef=x(Ss);unsubscribe;format=NW;pages=T([]);page=X(()=>{let e=this.pages(),t=this.pageId();return(t?e.find(e=>e.pageId===t):void 0)??e[0]??null});steps=X(()=>{let e=this.page();return e?PW(e):[]});slowest=X(()=>this.page()?.providers.slowest.slice(0,IW)??[]);intro=X(()=>{let e=this.page(),t=e?.angularVersion?` (Angular ${e.angularVersion})`:``,n=this.total();return`From navigation start to the app's first stable state on the live page${t}${n?`: ${n.exact?``:`at most `}${NW(n.ms)} from Angular's start to stable`:``}.`});total=X(()=>{let e=this.page();return!e?.angularStart||!e.firstStable?null:{ms:Math.max(0,e.firstStable.at-e.angularStart.at),exact:e.firstStable.exact}});constructor(){E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}loadId=0;async load(e){let t=++this.loadId,n=()=>!this.destroyRef.destroyed&&t===this.loadId&&this.rpc()===e;try{let t=await e.scope(`pangular`).rpc.sharedState(`startup`);if(!n())return;let r=e=>this.pages.set(FW(e));r(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,r)}catch{if(!n())return;this.pages.set([])}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-startup-section`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`]},decls:1,vars:1,consts:[[`aria-labelledby`,`startup-title`,1,`startup`],[`id`,`startup-title`],[1,`intro`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Startup milestones`,1,`table-wrap`],[`scope`,`col`],[1,`label`],[1,`muted`],[1,`num`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Slowest providers`,1,`table-wrap`],[1,`mono`]],template:function(e,t){if(e&1&&A(0,MW,23,2,`section`,0),e&2){let e;j((e=t.page())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.startup[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-  margin-top: 16px;
-  padding: 12px;
-  font-size: 13px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 8px 0 0;
-}
-
-.intro[_ngcontent-%COMP%], 
-.muted[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%], 
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  max-width: 100%;
-  overflow-x: auto;
-  border-radius: var(--%NS%radius-sm);
-}
-
-.table-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-td.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.num[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}`]})},RW=`pangular-pref:pane`;function zW(e,t){try{let n=Number(localStorage.getItem(`${RW}:${e}`));return Number.isFinite(n)&&n>0?Math.round(n):t}catch{return t}}function BW(e,t){try{t===null?localStorage.removeItem(`${RW}:${e}`):localStorage.setItem(`${RW}:${e}`,String(Math.round(t)))}catch{}}var VW=class e{view=$.required();pane=$(`after`);size=pv(380);min=$(240);max=$(720);defaultSize=$(380);label=$(`Resize the detail panel`);controls=$(null);valueText=X(()=>`${this.size()} pixels wide`);dragging=T(!1);start=null;clamp(e){return Math.round(Math.min(this.max(),Math.max(this.min(),e)))}set(e,t=!0){let n=this.clamp(e);n!==this.size()&&this.size.set(n),t&&BW(this.view(),n)}onKey(e){let t=e.shiftKey?64:16,n=this.pane()===`before`?1:-1,r={ArrowLeft:-t*n,ArrowRight:t*n};e.key in r?(e.preventDefault(),this.set(this.size()+r[e.key])):(e.key===`Home`||e.key===`End`)&&(e.preventDefault(),this.set(e.key===`Home`?this.min():this.max()))}onPointerDown(e){e.button===0&&(e.preventDefault(),this.start={x:e.clientX,size:this.size()},this.dragging.set(!0),e.currentTarget?.setPointerCapture?.(e.pointerId))}onPointerMove(e){if(!this.start)return;let t=e.clientX-this.start.x;this.set(this.start.size+(this.pane()===`before`?t:-t),!1)}onPointerEnd(e){this.start&&(this.start=null,this.dragging.set(!1),e.currentTarget?.releasePointerCapture?.(e.pointerId),BW(this.view(),this.size()))}reset(){this.size.set(this.clamp(this.defaultSize())),BW(this.view(),null)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-splitter`]],hostAttrs:[`role`,`separator`,`tabindex`,`0`,`aria-orientation`,`vertical`,`title`,`Drag or use the arrow keys to resize. Double click to reset the width.`],hostVars:8,hostBindings:function(e,t){e&1&&H(`keydown`,function(e){return t.onKey(e)})(`pointerdown`,function(e){return t.onPointerDown(e)})(`pointermove`,function(e){return t.onPointerMove(e)})(`pointerup`,function(e){return t.onPointerEnd(e)})(`pointercancel`,function(e){return t.onPointerEnd(e)})(`dblclick`,function(){return t.reset()}),e&2&&(k(`aria-label`,t.label())(`aria-controls`,t.controls())(`aria-valuenow`,t.size())(`aria-valuemin`,t.min())(`aria-valuemax`,t.max())(`aria-valuetext`,t.valueText()),G(`dragging`,t.dragging()))},inputs:{view:[1,`view`],pane:[1,`pane`],size:[1,`size`],min:[1,`min`],max:[1,`max`],defaultSize:[1,`defaultSize`],label:[1,`label`],controls:[1,`controls`]},outputs:{size:`sizeChange`},decls:1,vars:0,consts:[[`aria-hidden`,`true`,1,`grip`]],template:function(e,t){e&1&&dg(0,`span`,0)},styles:[`[_nghost-%COMP%] {
-  position: relative;
-  display: block;
-  align-self: stretch;
-  width: 12px;
-  min-height: 32px;
-  margin: 0 -4px;
-  border-radius: var(--%NS%radius-sm);
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.grip[_ngcontent-%COMP%] {
-  position: absolute;
-  inset: 0 auto 0 50%;
-  width: 2px;
-  transform: translateX(-50%);
-  border-radius: 1px;
-  background: var(--%NS%control-border);
-  transition: background 150ms var(--%NS%ease);
-}
-
-[_nghost-%COMP%]:hover   .grip[_ngcontent-%COMP%], 
-.dragging[_nghost-%COMP%]   .grip[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-}
-
-[_nghost-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-[_nghost-%COMP%]:focus-visible   .grip[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .grip[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},HW=[`queryInput`],UW=(e,t,n,r)=>({kind:`provider`,injectorId:e,token:t,tokenId:n,index:r}),WW=()=>({compact:!1}),GW=()=>({compact:!0}),KW=(e,t)=>t.node.injector.id,qW=(e,t)=>t.id,JW=(e,t)=>t.token+t.file+t.line,YW=(e,t)=>t.from+(t.tokenId??t.token)+e,XW=(e,t)=>t.id+e,ZW=(e,t)=>(t.tokenId??t.token)+e,QW=(e,t)=>t.file+t.line,$W=(e,t)=>t.type;function eG(e,t){if(e&1){let e=B();F(0,`div`,6)(1,`p`,7),K(2),I(),F(3,`p`,8),K(4,` The devtools server did not answer. Check that it is still running, then retry. `),I(),F(5,`button`,9),H(`click`,function(){return S(e),C(W().retry())}),K(6),I()()}if(e&2){let e=t.compact,n=W();G(`compact`,e),D(2),J(` `,e?`Couldn't load the live injector tree`:`Couldn't load DI data`,` `),D(3),k(`aria-disabled`,n.retrying()||null),D(),J(` `,n.retrying()?`Retrying…`:`Retry`,` `)}}function tG(e,t){if(e&1){let e=B();F(0,`div`,10)(1,`span`,11),K(2,`Page`),I(),F(3,`app-select`,12),H(`valueChange`,function(t){return S(e),C(W(2).selectPage(t))}),I()()}if(e&2){let e=W(2);D(3),P(`options`,e.pageOptions())(`value`,e.shownPageId())}}function nG(e,t){e&1&&A(0,tG,4,2,`div`,10),e&2&&j(W().pageOptions().length>1?0:-1)}function rG(e,t){if(e&1){let e=B();F(0,`label`,20)(1,`input`,21),H(`change`,function(){S(e);let t=W(2);return C(t.componentsOnly.set(!t.componentsOnly()))}),I(),K(2,` Components only `),I()}if(e&2){let e=W(2);D(),P(`checked`,e.componentsOnly())}}function iG(e,t){if(e&1&&(F(0,`span`,22),K(1),I()),e&2){let e=W(2);D(),q(e.frameworkHiddenText())}}function aG(e,t){e&1&&(F(0,`span`,23),K(1),I()),e&2&&(D(),J(`Change detection: `,t))}function oG(e,t){if(e&1&&(F(0,`p`,27),w(),F(1,`svg`,25),L(2,`circle`,39)(3,`path`,40),I(),fs(),F(4,`span`)(5,`strong`),K(6,`The page reported only part of its injector tree.`),I(),K(7),I()()),e&2){let e=W(2);D(7),D_(` It keeps at most `,e.limits().elements,` element injectors and `,e.limits().injectors,` in all, and leaves out injectors nested more than `,e.limits().depth,` levels deep, so a lookup path or a provider can point to one that is not listed. `)}}function sG(e,t){if(e&1){let e=B();F(0,`button`,44),H(`click`,function(){let t=S(e).$implicit;return C(W(3).reveal(t.id))}),L(1,`span`,45),F(2,`span`,46),K(3),I(),F(4,`span`,47),K(5),I()()}if(e&2){let e=t.$implicit,n=W(3);D(),t_(`background`,n.tone(e.kind)),D(2),q(e.label),D(2),q(e.tokens)}}function cG(e,t){e&1&&(F(0,`span`,43),K(1),I()),e&2&&(D(),J(`+`,t,` more`))}function lG(e,t){if(e&1&&(F(0,`div`,28)(1,`span`,41),K(2,`Provided by`),I(),M(3,sG,6,4,`button`,42,qW),A(5,cG,2,1,`span`,43),I()),e&2){let e,t=W(2);D(3),N(t.providedBy()),D(2),j((e=t.providedByMore())?5:-1,e)}}function uG(e,t){if(e&1){let e=B();F(0,`div`,29),K(1),F(2,`button`,48),H(`click`,function(){return S(e),C(W(2).clearQuery())}),K(3,`Clear filters`),I()()}if(e&2){let e=W(2);D(),J(` Nothing here matches “`,e.query().trim(),`”. `)}}function dG(e,t){if(e&1&&(F(0,`span`,57),K(1),I()),e&2){let e=W().$implicit;D(),J(`providedIn: `,e.providedIn)}}function fG(e,t){if(e&1&&(F(0,`li`)(1,`span`,56),K(2),I(),A(3,dG,2,1,`span`,57),L(4,`app-source-link`,58),I()),e&2){let e=t.$implicit;D(2),q(e.token),D(),j(e.providedIn?3:-1),D(),P(`file`,e.file)(`line`,e.line)}}function pG(e,t){if(e&1){let e=B();F(0,`div`,30)(1,`button`,49),H(`click`,function(){S(e);let t=W(2);return C(t.orphansOpen.set(!t.orphansOpen()))}),w(),F(2,`svg`,50),L(3,`path`,51),I(),fs(),F(4,`span`,52),K(5,`Hint`),I(),K(6),I(),F(7,`div`,53)(8,`p`,54),K(9,` Provided in your source, but nothing on this page has injected them so far. This is not an error: a guard, an interceptor or code that has not run yet may still use them. `),I(),F(10,`ul`,55),M(11,fG,5,4,`li`,null,JW),I()()()}if(e&2){let e=W(2);D(),k(`aria-expanded`,e.orphansOpen()),D(),G(`open`,e.orphansOpen()),D(4),J(` `,e.orphanedText(),` `),D(),P(`hidden`,!e.orphansOpen()),D(4),N(e.orphaned())}}function mG(e,t){e&1&&K(0,` Turn off “Hide framework” to see Angular's own injectors. `)}function hG(e,t){e&1&&K(0,` None of them provide anything themselves. `)}function gG(e,t){e&1&&K(0,` Turn off “Components only” to see directives. `)}function _G(e,t){e&1&&K(0,` Try a different search. `)}function vG(e,t){if(e&1&&(F(0,`div`,32)(1,`p`,7),K(2,`No injectors to show`),I(),F(3,`p`,8),A(4,mG,1,0)(5,hG,1,0)(6,gG,1,0)(7,_G,1,0),I()()),e&2){let e=W(2);D(4),j(e.hideFramework()&&e.frameworkHiddenCount().injectors>0?4:e.onlyProviding()?5:e.componentsOnly()&&e.view()===`element`?6:7)}}function yG(e,t){if(e&1){let e=B();F(0,`span`,70),H(`click`,function(t){S(e);let n=W().$implicit;return C(W(2).toggle(n.node.injector.id,t))}),w(),F(1,`svg`,71),L(2,`path`,51),I()()}if(e&2){let e=W().$implicit;G(`open`,e.expanded)}}function bG(e,t){e&1&&L(0,`span`,61)}function xG(e,t){e&1&&(F(0,`span`,65),K(1,`inactive`),I())}function SG(e,t){if(e&1&&(F(0,`span`,66),K(1),I()),e&2){let e=W().$implicit;D(),q(e.node.injector.component)}}function CG(e,t){if(e&1&&(F(0,`span`,66),K(1),I()),e&2){let e=W().$implicit;D(),q(e.node.injector.directives.join(`, `))}}function wG(e,t){if(e&1&&(F(0,`span`,68),w(),F(1,`svg`,25),L(2,`path`,72),I(),fs(),F(3,`span`,63),K(4,`injects`),I(),K(5),I()),e&2){let e=W().$implicit;k(`title`,e.node.dependencies.length+` injected`),D(5),J(` `,e.node.dependencies.length,` `)}}function TG(e,t){if(e&1&&(F(0,`span`,69),w(),F(1,`svg`,25),L(2,`path`,73),I(),fs(),F(3,`span`,63),K(4,`provides`),I(),K(5),I()),e&2){let e=t;k(`title`,e+` provided`),D(5),J(` `,e,` `)}}function EG(e,t){if(e&1){let e=B();F(0,`div`,59),H(`click`,function(){let t=S(e).$implicit;return C(W(2).select(t.node.injector.id))})(`focus`,function(){let t=S(e).$implicit,n=W(2);return n.focusId.set(t.node.injector.id),C(n.highlight(t.node))})(`blur`,function(){return S(e),C(W(2).highlight(null))})(`mouseenter`,function(){let t=S(e).$implicit;return C(W(2).highlight(t.node))})(`mouseleave`,function(){return S(e),C(W(2).highlight(null))}),A(1,yG,3,2,`span`,60)(2,bG,1,0,`span`,61),F(3,`span`,62),K(4),I(),F(5,`span`,63),K(6),I(),F(7,`span`,64),K(8),I(),A(9,xG,2,0,`span`,65),A(10,SG,2,1,`span`,66)(11,CG,2,1,`span`,66),F(12,`span`,67),A(13,wG,6,2,`span`,68),A(14,TG,6,2,`span`,69),I()()}if(e&2){let e,n=t.$implicit,r=W(2);t_(`--%NS%depth`,n.depth),G(`selected`,r.selected()?.injector?.id===n.node.injector.id),k(`aria-level`,n.depth+1)(`aria-expanded`,n.hasChildren?n.expanded:null)(`aria-selected`,r.selected()?.injector?.id===n.node.injector.id)(`tabindex`,r.rovingId()===n.node.injector.id?0:-1)(`data-id`,n.node.injector.id),D(),j(n.hasChildren?1:2),D(2),t_(`--%NS%tone`,r.tone(r.kind(n.node))),k(`title`,r.kind(n.node)),D(),q(r.kind(n.node)[0].toUpperCase()),D(2),q(r.kind(n.node)),D(2),q(r.label(n.node)),D(),j(n.node.injector.inactive?9:-1),D(),j(n.node.injector.component?10:n.node.injector.directives?.length?11:-1),D(3),j((n.node.dependencies?.length??0)>0?13:-1),D(),j((e=r.providerCount(n.node))?14:-1,e)}}function DG(e,t){if(e&1){let e=B();F(0,`button`,9),H(`click`,function(){let t=S(e);return C(W(3).reveal(t.node.injector.id))}),K(1),I()}if(e&2){let e=W(3);D(),J(` Show `,e.label(t.node),` `)}}function OG(e,t){if(e&1&&(F(0,`section`,36)(1,`header`,74)(2,`h2`,75),K(3),I()(),F(4,`div`,76)(5,`p`,8),K(6,` This injector is no longer on the page. Its component or directive was destroyed. `),I(),A(7,DG,2,1,`button`,77),I()()),e&2){let e,n=W(2);D(3),q(t),D(4),j((e=n.rows()[0])?7:-1,e)}}function kG(e,t){if(e&1&&(F(0,`li`),K(1),I()),e&2){let e=t.$implicit;G(`is-component`,e===W(2).injector.component),D(),q(e)}}function AG(e,t){if(e&1&&(F(0,`ul`,79),M(1,kG,2,3,`li`,88,eg),I()),e&2){let e=W();D(),N(e.injector.directives)}}function jG(e,t){if(e&1){let e=B();F(0,`button`,89),H(`click`,function(){let t=S(e);return C(W(3).openComponent(t))}),K(1,` Show in Components `),F(2,`span`,63),K(3),I()()}if(e&2){let e=W();D(3),J(`: `,e.injector.component)}}function MG(e,t){e&1&&(F(0,`p`,81),K(1,` Inactive: the router loaded this route's injector, but no element on the page uses it now. It keeps the services it created until the app is reloaded. `),I())}function NG(e,t){if(e&1&&(F(0,`span`,90),L(1,`span`,45),K(2,` Null injector `),F(3,`span`,92),K(4,`throws NullInjectorError`),I()()),e&2){let e=W(4);D(),t_(`background`,e.tone(`null`))}}function PG(e,t){if(e&1&&(F(0,`span`,94),K(1),F(2,`span`,63),K(3),I()()),e&2){let e=W(2).$implicit;D(),J(` `,e.providers,` `),D(2),q(e.providers===1?`provider`:`providers`)}}function FG(e,t){if(e&1){let e=B();F(0,`button`,93),H(`click`,function(){S(e);let t=W().$implicit;return C(W(3).reveal(t.id))}),L(1,`span`,45),F(2,`span`,46),K(3),I(),A(4,PG,4,2,`span`,94),I()}if(e&2){let e=W().$implicit,t=W(3);D(),t_(`background`,t.tone(e.kind)),D(2),q(e.label),D(),j(e.providers?4:-1)}}function IG(e,t){if(e&1&&(F(0,`li`),A(1,NG,5,2,`span`,90)(2,FG,5,4,`button`,91),I()),e&2){let e=t.$implicit,n=t.$index,r=W(3);G(`current`,n===0),D(),j(e.id===r.nullId?1:2)}}function LG(e,t){e&1&&(F(0,`p`,54),K(1,`Only services this injector has already created are listed.`),I())}function RG(e,t){if(e&1&&(F(0,`span`,57),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function zG(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),J(`for `,e.from)}}function BG(e,t){if(e&1){let e=B();F(0,`button`,106),H(`click`,function(){let t=S(e);return C(W(6).reveal(t))}),L(1,`span`,45),K(2,` from `),F(3,`span`,46),K(4),I()()}if(e&2){let e=t,n=W(6);D(),t_(`background`,n.tone(n.kindById(e))),D(3),q(n.labelById(e))}}function VG(e,t){e&1&&(F(0,`span`,101),K(1,`optional, not provided`),I())}function HG(e,t){e&1&&(F(0,`span`,102),K(1,`not provided anywhere`),I())}function UG(e,t){e&1&&(F(0,`span`,46),K(1,`Null injector`),I())}function WG(e,t){if(e&1){let e=B();F(0,`button`,93),H(`click`,function(){S(e);let t=W().$implicit;return C(W(7).reveal(t.id))}),F(1,`span`,46),K(2),I()()}if(e&2){let e=W().$implicit;D(2),q(e.label)}}function GG(e,t){if(e&1&&(F(0,`li`),L(1,`span`,108),A(2,UG,2,0,`span`,46)(3,WG,3,1,`button`,91),F(4,`span`,109),K(5),I()()),e&2){let e=t.$implicit,n=W(7);n_(`resolve-`+e.state),D(2),j(e.id===n.nullId?2:3),D(3),q(e.text)}}function KG(e,t){if(e&1&&(F(0,`ol`,105),M(1,GG,6,4,`li`,107,XW),I()),e&2){let e=W().$implicit,t=W(5);k(`aria-label`,`How Angular resolves `+e.token),D(),N(t.resolution(e))}}function qG(e,t){if(e&1){let e=B();F(0,`li`,97)(1,`div`,98)(2,`span`,56),K(3),I(),M(4,RG,2,1,`span`,57,eg),I(),F(6,`div`,99),A(7,zG,2,1,`span`),A(8,BG,5,3,`button`,100)(9,VG,2,0,`span`,101)(10,HG,2,0,`span`,102),F(11,`button`,103),H(`click`,function(){let t=S(e),n=t.$implicit,r=t.$index,i=W(5);return C(i.toggleResolve(i.depKey(n,r)))}),K(12,` Resolution `),F(13,`span`,63),K(14),I()()(),F(15,`div`,104),A(16,KG,3,1,`ol`,105),I()()}if(e&2){let e,n=t.$implicit,r=t.$index,i=W(3),a=W(2);G(`hit`,a.matches(n.token)),D(3),q(n.token),D(),N(n.flags),D(3),j(i.injector.type!==`element`||i.injector.directives&&i.injector.directives.length>1?7:-1),D(),j((e=n.providedBy)?8:n.flags.includes(`optional`)?9:10,e),D(3),k(`aria-expanded`,a.resolvingKey()===a.depKey(n,r))(`aria-controls`,`di-resolve-`+r),D(3),J(`of `,n.token),D(),P(`id`,`di-resolve-`+r)(`hidden`,a.resolvingKey()!==a.depKey(n,r)),D(),j(a.resolvingKey()===a.depKey(n,r)?16:-1)}}function JG(e,t){if(e&1&&(F(0,`ul`,95),M(1,qG,17,11,`li`,96,YW),I()),e&2){let e=W(2);D(),N(e.dependencies)}}function YG(e,t){e&1&&(F(0,`p`,87),K(1,`Nothing is injected through the constructor or inject().`),I())}function XG(e,t){e&1&&(F(0,`p`,87),K(1,`No service created here has injected anything yet.`),I())}function ZG(e,t){if(e&1&&(F(0,`div`,82)(1,`h3`),K(2),F(3,`span`,17),K(4),I()(),A(5,LG,2,0,`p`,54),A(6,JG,3,0,`ul`,95)(7,YG,2,0,`p`,87)(8,XG,2,0,`p`,87),I()),e&2){let e=W();D(2),J(` `,e.injector.type===`element`?`Injected here`:`Injected by its services`,` `),D(2),q(e.dependencies?.length??0),D(),j(e.injector.type===`element`?-1:5),D(),j(e.dependencies?.length?6:e.injector.type===`element`?7:8)}}function QG(e,t){if(e&1){let e=B();F(0,`p`,85),K(1),F(2,`button`,48),H(`click`,function(){return S(e),C(W(3).setHideFramework(!1))}),K(3,` Show them `),I()()}if(e&2){let e=t;D(),Y(` `,e,` framework `,e===1?`provider`:`providers`,` hidden. `)}}function $G(e,t){e&1&&(F(0,`span`,57),K(1,`viewProviders`),I())}function eK(e,t){e&1&&(F(0,`span`,57),K(1,`multi`),I())}function tK(e,t){e&1&&(F(0,`span`,57),K(1,`Angular`),I())}function nK(e,t){if(e&1&&(F(0,`div`,99),K(1),I()),e&2){let e=W(2).$implicit;D(),J(`via `,e.importPath.join(` › `))}}function rK(e,t){if(e&1&&L(0,`app-source-link`,116),e&2){let e=t.$implicit;P(`file`,e.file)(`line`,e.line)}}function iK(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W();D(),J(`+`,e.more,` more`)}}function aK(e,t){if(e&1&&(F(0,`div`,113)(1,`span`),K(2,`Declared in`),I(),M(3,rK,1,2,`app-source-link`,116,QW),A(5,iK,2,1,`span`),I()),e&2){let e=t;D(3),N(e.shown),D(2),j(e.more?5:-1)}}function oK(e,t){if(e&1&&(F(0,`li`,111)(1,`div`,98)(2,`span`,56),K(3),I(),F(4,`span`,112),K(5),I(),A(6,$G,2,0,`span`,57),A(7,eK,2,0,`span`,57),A(8,tK,2,0,`span`,57),I(),A(9,nK,2,1,`div`,99),A(10,aK,6,1,`div`,113),L(11,`app-store-global`,114)(12,`app-provider-value`,115),I()),e&2){let e,t=W(),n=t.$implicit,r=t.$index,i=W(2),a=W(2);G(`hit`,a.matches(n.token)),D(3),q(n.token),D(2),q(n.type===`unknown`?`provider`:`use`+a.capital(n.type)),D(),j(n.isViewProvider?6:-1),D(),j(n.multi?7:-1),D(),j(n.framework?8:-1),D(),j(n.importPath?.length?9:-1),D(),j((e=a.sourceOf(n.token))?10:-1,e),D(),P(`rpc`,a.rpc())(`pageId`,a.shownPageId())(`target`,rne(21,UW,i.injector.id,n.token,n.tokenId,r))(`label`,n.token+a.positionSuffix(i.providers,r))(`canLog`,!0),D(),P(`rpc`,a.rpc())(`pageId`,a.shownPageId())(`injectorId`,i.injector.id)(`token`,n.token)(`tokenId`,n.tokenId)(`index`,r)(`position`,a.tokenPosition(i.providers,r))}}function sK(e,t){if(e&1&&A(0,oK,13,26,`li`,110),e&2){let e=t.$implicit;j(W(4).isHidden(e)?-1:0)}}function cK(e,t){if(e&1&&(F(0,`ul`,86),M(1,sK,1,1,null,null,ZW),I()),e&2){let e=W();D(),N(e.providers)}}function lK(e,t){e&1&&K(0,` No providers or viewProviders on this element. `)}function uK(e,t){e&1&&K(0,` This injector has no providers of its own. `)}function dK(e,t){if(e&1&&(F(0,`p`,87),A(1,lK,1,0)(2,uK,1,0),I()),e&2){let e=W();D(),j(e.injector.type===`element`?1:2)}}function fK(e,t){if(e&1&&(F(0,`section`,37)(1,`header`,74)(2,`span`,78),K(3),I(),F(4,`h2`,75),K(5),I(),A(6,AG,3,0,`ul`,79),A(7,jG,4,1,`button`,80),I(),A(8,MG,2,0,`p`,81),F(9,`div`,82)(10,`h3`),K(11,`Lookup path`),I(),F(12,`p`,54),K(13,`Angular asks these injectors in order until one has the token.`),I(),F(14,`ol`,83),M(15,IG,3,3,`li`,84,qW),I()(),A(17,ZG,9,4,`div`,82),F(18,`div`,82)(19,`h3`),K(20,` Provides `),F(21,`span`,17),K(22),I()(),A(23,QG,4,2,`p`,85),A(24,cK,3,0,`ul`,86)(25,dK,3,1,`p`,87),I()()),e&2){let e,n,r=t,i=W(2);D(2),t_(`--%NS%tone`,i.tone(i.kind(r))),D(),q(i.kind(r)),D(2),q(i.label(r)),D(),j(r.injector.directives?.length?6:-1),D(),j((e=i.canShowComponent()&&r.injector.componentId)?7:-1,e),D(),j(r.injector.inactive?8:-1),D(7),N(i.path()),D(2),j(r.injector.type===`element`||r.dependencies?17:-1),D(5),q(i.providerCount(r)),D(),j((n=i.hiddenProviders(r))?23:-1,n),D(),j(i.providerCount(r)?24:i.hiddenProviders(r)?-1:25)}}function pK(e,t){if(e&1){let e=B();F(0,`p`,13),K(1,` Every component and directive gets an injector. When it asks for a token, Angular walks up this tree, then through the environment injectors, until something provides it. `),I(),F(2,`app-angular-unavailable`,14),K(3,` This tree shows the element injectors the page reports, with providers and environment injectors only where its Angular exposes them. `),I(),F(4,`div`,15)(5,`div`,16)(6,`button`,9),H(`click`,function(){return S(e),C(W().setView(`element`))}),K(7,` Elements `),F(8,`span`,17),K(9),I()(),F(10,`button`,9),H(`click`,function(){return S(e),C(W().setView(`environment`))}),K(11,` Environment `),F(12,`span`,17),K(13),I()()(),F(14,`app-search-field`,18,2),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.query,t)||(n.query=t),C(t)}),I(),hg(16,19),A(17,rG,3,1,`label`,20),F(18,`label`,20)(19,`input`,21),H(`change`,function(){S(e);let t=W();return C(t.onlyProviding.set(!t.onlyProviding()))}),I(),K(20,` With providers `),I(),F(21,`label`,20)(22,`input`,21),H(`change`,function(){S(e);let t=W();return C(t.setHideFramework(!t.hideFramework()))}),I(),K(23,` Hide framework `),I(),A(24,iG,2,1,`span`,22),A(25,aG,2,1,`span`,23),F(26,`button`,24),H(`click`,function(){return S(e),C(W().refresh())}),w(),F(27,`svg`,25),L(28,`path`,26),I(),K(29,` Refresh `),I()(),A(30,oG,8,3,`p`,27),A(31,lG,6,1,`div`,28)(32,uG,4,1,`div`,29),A(33,pG,13,5,`div`,30),fs(),F(34,`div`,31),A(35,vG,8,1,`div`,32),F(36,`div`,33),H(`keydown`,function(t){return S(e),C(W().onTreeKey(t))}),M(37,EG,15,20,`div`,34,KW),I(),F(39,`app-splitter`,35),M_(`sizeChange`,function(t){S(e);let n=W();return j_(n.detailSize,t)||(n.detailSize=t),C(t)}),I(),A(40,OG,8,2,`section`,36)(41,fK,26,11,`section`,37),I(),L(42,`app-startup-section`,38)}if(e&2){let e,t,n=W(),r=Pg(5);D(2),P(`page`,n.angularPage()),D(4),G(`active`,n.view()===`element`),k(`aria-pressed`,n.view()===`element`),D(3),q(n.elementCount()),D(),G(`active`,n.view()===`environment`),k(`aria-pressed`,n.view()===`environment`),D(3),q(n.environmentCount()),D(),A_(`value`,n.query),D(2),P(`ngTemplateOutlet`,r),D(),j(n.view()===`element`?17:-1),D(2),P(`checked`,n.onlyProviding()),D(3),P(`checked`,n.hideFramework()),D(2),j(n.hideFramework()?24:-1),D(),j((e=n.zone())?25:-1,e),D(),k(`aria-disabled`,!n.shownPageId()||null),D(4),j(n.truncated()?30:-1),D(),j(n.providedBy().length?31:n.query().trim()&&!n.rows().length?32:-1),D(2),j(n.orphaned().length?33:-1),D(),t_(`--%NS%detail-size`,n.detailSize(),`px`),D(),j(n.rows().length?-1:35),D(),P(`hidden`,!n.rows().length),k(`aria-label`,n.view()===`element`?`Element injectors`:`Environment injectors`),D(),N(n.rows()),D(2),P(`min`,300)(`max`,900)(`defaultSize`,420),A_(`size`,n.detailSize),D(),j((t=n.gone())?40:(t=n.selected())?41:-1,t),D(2),P(`rpc`,n.rpc())(`pageId`,n.shownPageId())}}function mK(e,t){e&1&&(F(0,`div`,4),L(1,`span`,117),F(2,`p`,7),K(3,`Loading dependency injection data…`),I()())}function hK(e,t){e&1&&hg(0,5),e&2&&(W(),P(`ngTemplateOutlet`,Pg(3))(`ngTemplateOutletContext`,G_(2,WW)))}function gK(e,t){if(e&1&&(F(0,`div`,15),hg(1,19),I()),e&2){W(2);let e=Pg(5);D(),P(`ngTemplateOutlet`,e)}}function _K(e,t){e&1&&(A(0,gK,2,1,`div`,15),F(1,`div`,32)(2,`p`,7),K(3,`No DI data found`),I(),F(4,`p`,8),K(5,` Open the app in a browser with the devtools connected to see its live injectors. No providers, injectables or inject() calls were found in the source either. `),I()()),e&2&&j(W().pageOptions().length>1?0:-1)}function vK(e,t){e&1&&hg(0,5),e&2&&(W(2),P(`ngTemplateOutlet`,Pg(3))(`ngTemplateOutletContext`,G_(2,GW)))}function yK(e,t){if(e&1){let e=B();F(0,`div`,32)(1,`p`,7),K(2),I(),F(3,`p`,8),K(4,`Try part of a token name or a file path.`),I(),F(5,`button`,9),H(`click`,function(){return S(e),C(W(2).clearQuery())}),K(6,`Clear filters`),I()()}if(e&2){let e=W(2);D(2),J(`No providers match “`,e.query(),`”`)}}function bK(e,t){if(e&1){let e=B();F(0,`h2`)(1,`button`,125),H(`click`,function(){S(e);let t=W(4);return C(t.helpersOpen.set(!t.helpersOpen()))}),w(),F(2,`svg`,50),L(3,`path`,51),I(),K(4),fs(),F(5,`span`,126),K(6),I()()(),F(7,`p`,127),K(8,` provide*() calls the scan can't resolve to the tokens they register, such as your own provider functions. `),I()}if(e&2){let e=W().$implicit,t=W(3);D(),k(`aria-expanded`,t.helpersShown()),D(),G(`open`,t.helpersShown()),D(2),J(` `,e.label,` `),D(2),q(e.items.length),D(),P(`hidden`,!t.helpersShown())}}function xK(e,t){if(e&1&&(F(0,`h2`),K(1),F(2,`span`,126),K(3),I()()),e&2){let e=W().$implicit;D(),J(` `,e.label,` `),D(2),q(e.items.length)}}function SK(e,t){if(e&1&&(F(0,`span`,130),K(1),I()),e&2){let e=W().$implicit;D(),J(`providedIn: `,e.providedIn)}}function CK(e,t){e&1&&(F(0,`span`,57),K(1,`helper (unresolved)`),I())}function wK(e,t){if(e&1&&(F(0,`span`,133),K(1),I()),e&2){let e=W().$implicit;D(),J(`as `,e.source)}}function TK(e,t){if(e&1&&(F(0,`li`,124)(1,`div`,128)(2,`span`,129),K(3),I(),A(4,SK,2,1,`span`,130),A(5,CK,2,0,`span`,57),I(),F(6,`div`,131),L(7,`app-source-link`,132),A(8,wK,2,1,`span`,133),I()()),e&2){let e=t.$implicit,n=W(4);D(3),q(e.token),D(),j(e.providedIn?4:-1),D(),j(e.type===n.helperType?5:-1),D(2),P(`file`,e.file)(`line`,e.line),D(),j(e.source!==`class`&&e.source!==`providers array`&&e.type!==n.helperType?8:-1)}}function EK(e,t){if(e&1&&(F(0,`section`,122),A(1,bK,9,6)(2,xK,4,2,`h2`),F(3,`ul`,123),M(4,TK,9,6,`li`,124,JW),I()()),e&2){let e=t.$implicit,n=W(3);D(),j(e.type===n.helperType?1:2),D(2),P(`hidden`,e.type===n.helperType&&!n.helpersShown()),k(`id`,e.type===n.helperType?`di-helpers`:null),D(),N(e.items)}}function DK(e,t){if(e&1&&(F(0,`div`,121),M(1,EK,6,3,`section`,122,$W),I()),e&2){let e=W(2);D(),N(e.groupedProviders())}}function OK(e,t){if(e&1){let e=B();F(0,`div`,15)(1,`app-search-field`,118,2),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.query,t)||(n.query=t),C(t)}),I(),hg(3,19),F(4,`span`,119),K(5),I()(),A(6,vK,1,3,`ng-container`,5),F(7,`p`,27),w(),F(8,`svg`,25),L(9,`circle`,39)(10,`path`,40),I(),fs(),F(11,`span`)(12,`strong`),K(13,`DI from the source scan.`),I(),K(14,` Connect the overlay to a development build to see the live injector tree. `),I()(),L(15,`app-angular-unavailable`,120),A(16,yK,7,1,`div`,32)(17,DK,3,0,`div`,121)}if(e&2){let e=W(),t=Pg(5);D(),A_(`value`,e.query),D(2),P(`ngTemplateOutlet`,t),D(2),Y(` `,e.sourceMatchCount(),` of `,e.sourceProviders().length,` `),D(),j(e.loadFailed()?6:-1),D(9),P(`page`,e.angularPage()),D(),j(e.groupedProviders().length===0?16:17)}}var kK=`inj-null`,AK=`injectors.hideFramework`,jK=12,MK=`helper`,NK=new Set([`provider`,`injectable`]),PK=600,FK={component:`var(--accent-text)`,directive:`var(--directive)`,environment:`var(--ok-text)`,null:`var(--text-3)`};function IK(e){return e.injector.type===`element`?e.injector.component?`component`:`directive`:`environment`}function LK(e){return e.injector.type===`element`?`<${e.injector.name}>`:e.injector.name}function RK(e){return Array.isArray(e)}var zK=class e{rpc=$(null);focus=$(null);canShowComponent=$(!1);focusHandled=cv();showComponent=cv();injector=x(bs);nullId=kK;hostPage=tT();angularPages=oD(()=>this.rpc());angularPage=X(()=>sD(this.angularPages(),this.shownPageId()||this.hostPage));treeState=T(null);pageTitles=T({});chosenPageId=T(null);treePages=X(()=>{let e=this.treeState();if(!e)return{};let t=e.pages&&typeof e.pages==`object`?e.pages:{};return Object.keys(t).length||this.hostPage?t:{"":e}});shownPageId=Q({source:()=>({pages:this.treePages(),chosen:this.chosenPageId()}),computation:({pages:e,chosen:t},n)=>{let r={};for(let[t,n]of Object.entries(e))r[t]={pageId:t,reportedAt:typeof n?.reportedAt==`number`?n.reportedAt:0};return nT(r,{chosen:t,host:this.hostPage,previous:n?.value??null})}});shownPage=X(()=>{let e=this.shownPageId();return e===null?null:this.treePages()[e]??null});roots=X(()=>{let e=this.shownPage()?.roots;return RK(e)?e:[]});environment=X(()=>{let e=this.shownPage()?.environment;return RK(e)?e:[]});truncated=X(()=>this.shownPage()?.truncated===!0);limits=X(()=>{let e=this.shownPage()?.limits,t=(e,t)=>typeof e==`number`&&Number.isInteger(e)&&e>0?e:t;return{elements:t(e?.elements,2e3),injectors:t(e?.injectors,2500),depth:t(e?.depth,1e3)}});zone=X(()=>{let e=this.shownPage()?.zone;return typeof e==`string`?CE(e):null});multiPage=X(()=>!this.hostPage&&Object.keys(this.treePages()).length>1);pageOptions=X(()=>{if(!this.multiPage())return[];let e=this.pageTitles();return Object.keys(this.treePages()).map(t=>{let n=e[t];return{value:t,label:n?.title||n?.url||`Page ${t}`,hint:n?.url}})});pageKey=X(()=>this.shownPageId()??``);perPage(e){let t=new Map;return Q({source:this.pageKey,computation:(n,r)=>(r&&t.set(r.source,r.value),t.has(n)?t.get(n):e())})}sourceProviders=T([]);loaded=T(!1);treeFailed=T(!1);sourceFailed=T(!1);loadFailed=X(()=>this.treeFailed()||this.sourceFailed());retrying=T(!1);host=x(Ml);view=T(`element`);query=T(``);detailSize=T(zW(`injectors`,420));queryInput=hv(`queryInput`);onlyProviding=T(!1);componentsOnly=T(!0);hideFramework=T(vR(AK)??!1);collapsed=this.perPage(()=>new Set);selectedId=this.perPage(()=>null);focusId=this.perPage(()=>null);announcement=T(``);selectedLabel=this.perPage(()=>null);wasGone=!1;index=X(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.set(a.injector.id,a),i&&t.set(a.injector.id,i),n(a.children,a.injector.id)};n(this.roots(),null),n(this.environment(),null);let r=new Map;for(let t of e.values()){let e=t.injector.componentId;e&&t.injector.type===`element`&&r.set(e,t.injector.id)}return{map:e,parents:t,byComponent:r}});shownRoots=X(()=>this.withoutFramework(this.roots()));shownEnvironment=X(()=>this.withoutFramework(this.environment()));elementCount=X(()=>this.count(this.shownRoots()));environmentCount=X(()=>this.count(this.shownEnvironment()));frameworkHiddenCount=X(()=>{let e=this.view()===`element`?this.roots():this.environment(),t=0,n=0,r=e=>{for(let i of e)i.injector.framework?t++:n+=i.providers.filter(e=>e.framework).length,r(i.children)};return r(e),{injectors:t,providers:n}});frameworkHiddenText=X(()=>{let{injectors:e,providers:t}=this.frameworkHiddenCount(),n=(e,t)=>`${e} ${t}${e===1?``:`s`}`;return!e&&!t?`Nothing hidden`:t?e?`${n(e,`injector`)} and ${n(t,`provider`)} hidden`:`${n(t,`provider`)} hidden`:`${n(e,`injector`)} hidden`});visible=X(()=>{let e=this.view()===`element`?this.shownRoots():this.shownEnvironment();this.view()===`element`&&this.componentsOnly()&&(e=this.prune(e,e=>!!e.injector.component)),this.onlyProviding()&&(e=this.prune(e,e=>this.providerCount(e)>0));let t=this.normalizedQuery();return t&&(e=this.prune(e,e=>this.nodeMatches(e,t))),e});rows=X(()=>{let e=[],t=this.collapsed(),n=!!this.normalizedQuery(),r=(i,a)=>{for(let o of i){let i=n||!t.has(o.injector.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:i}),i&&r(o.children,a+1)}};return r(this.visible(),0),e});selected=X(()=>{let e=this.selectedId();return e?this.index().map.get(e)??null:this.rows()[0]?.node??null});gone=X(()=>{let e=this.selectedId();return e&&!this.index().map.has(e)?this.selectedLabel()??`The injector`:null});rovingId=X(()=>{let e=this.rows(),t=this.focusId()??this.selected()?.injector.id;return t&&e.some(e=>e.node.injector.id===t)?t:e[0]?.node.injector.id??null});path=X(()=>{let e=this.selected();if(!e)return[];let{map:t,parents:n}=this.index(),r=e.injector.path??[];if(!r.length){r=[e.injector.id];let t=n.get(e.injector.id);for(;t;)r.push(t),t=n.get(t);r.push(kK)}return r.map(e=>{let n=t.get(e);return{id:e,label:n?LK(n):e===kK?`Null injector`:`Not listed`,kind:n?IK(n):`null`,providers:n?this.providerCount(n):0}})});providerHits=X(()=>{let e=this.normalizedQuery();if(!e)return[];let t=[];for(let n of this.index().map.values()){if(this.isHiddenInjector(n))continue;let r=n.providers.filter(t=>!this.isHidden(t)&&t.token.toLowerCase().includes(e));r.length&&t.push({id:n.injector.id,label:LK(n),kind:IK(n),tokens:r.map(e=>e.token).join(`, `)})}return t});providedBy=X(()=>this.providerHits().slice(0,jK));providedByMore=X(()=>Math.max(0,this.providerHits().length-jK));groupedProviders=X(()=>{let e=this.normalizedQuery(),t=e?this.sourceProviders().filter(t=>t.token.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):this.sourceProviders(),n=[{type:`root-provider`,label:`Root Providers (provide*)`,items:[]},{type:`injectable`,label:`Injectable Services`,items:[]},{type:`injection`,label:`inject() Calls`,items:[]},{type:`provider`,label:`Component Providers`,items:[]},{type:MK,label:`Helpers (unresolved)`,items:[]}];for(let e of t)n.find(t=>t.type===e.type)?.items.push(e);return n.filter(e=>e.items.length>0)});sourceMatchCount=X(()=>this.groupedProviders().reduce((e,t)=>e+t.items.length,0));helperType=MK;helpersOpen=T(!1);helpersShown=X(()=>this.helpersOpen()||!!this.normalizedQuery());orphaned=X(()=>{if(!this.roots().length)return[];let e=new Set,t=new Set;for(let n of this.index().map.values()){for(let t of n.dependencies??[])e.add(t.token);if(n.injector.type!==`element`)for(let e of n.providers)t.add(e.token)}let n=[],r=new Set;for(let i of this.sourceProviders()){if(!NK.has(i.type))continue;let a=i.token.slice(i.token.lastIndexOf(`.`)+1);if(e.has(a)||i.providedIn&&t.has(a))continue;let o=`${i.token}|${i.file}|${i.line}`;r.has(o)||(r.add(o),n.push(i))}return n});orphansOpen=T(!1);sourceByToken=X(()=>{let e=new Map;for(let t of this.sourceProviders()){if(!NK.has(t.type)&&t.type!==`root-provider`)continue;let n=t.token.slice(t.token.lastIndexOf(`.`)+1),r=e.get(n);r||e.set(n,r=[]),r.some(e=>e.file===t.file&&e.line===t.line)||r.push(t)}return e});sourceOf(e){let t=this.sourceByToken().get(e);return t?.length?{shown:t.slice(0,3),more:Math.max(0,t.length-3)}:null}resolvingKey=T(null);depKey(e,t){return`${t}|${e.from}|${e.tokenId??e.token}`}toggleResolve(e){this.resolvingKey.update(t=>t===e?null:e)}resolution(e){let t=this.path(),n=e.providedBy?t.findIndex(t=>t.id===e.providedBy):-1,r=e.flags.includes(`self`),i=e.flags.includes(`skipSelf`),a=e.flags.includes(`optional`);return t.map((e,t)=>{let o;o=t===0&&i?`skipped`:n>=0?t<n?`asked`:t===n?`provides`:`not-asked`:r&&t>+!!i?`not-asked`:e.id===kK?a?`null`:`throws`:`asked`;let s={asked:`asked, not here`,provides:`provides it`,skipped:`skipped (skipSelf)`,"not-asked":`not asked`,throws:`throws NullInjectorError`,null:`gives null (optional)`}[o];return{...e,state:o,text:s}})}orphanedText=X(()=>{let e=new Set(this.orphaned().map(e=>e.token)).size;return e===1?`1 provider in source is never injected on this page`:`${e} providers in source are never injected on this page`});searchSummary=X(()=>{let e=this.query().trim();if(!e)return``;let t=this.providerHits().length;return t===1?`1 injector provides “${e}”.`:t>1?`${t} injectors provide “${e}”.`:this.rows().length?`No injector provides “${e}”.`:`Nothing here matches “${e}”.`});normalizedQuery=X(()=>this.query().trim().toLowerCase());destroyRef=x(Ss);stopTree=null;treeLoad=0;lastSearchMessage=``;refreshedKey=null;constructor(){E(e=>{let t=this.searchSummary();if(!t){this.lastSearchMessage=``;return}if(t===this.lastSearchMessage)return;let n=setTimeout(()=>{this.lastSearchMessage=t,this.announcement.set(t)},PK);e(()=>clearTimeout(n))}),E(()=>{let e=this.rpc();e&&(this.loadInjectorTree(e),this.loadSourceProviders(e))}),E(()=>{let e=this.selected(),t=this.shownPageId(),n=e?.injector.type===`element`?e.injector.id:null,r=n&&t?`${t}|${n}`:null;r&&r!==this.refreshedKey&&(this.refreshedKey=r,Z(()=>this.requestRefresh(t,n)))}),E(e=>{let t=this.rpc();if(!t||!this.multiPage())return;let n=!0,r=null;e(()=>{n=!1,r?.()}),t.scope(`pangular`).rpc.sharedState(`component-tree`).then(e=>{if(!n)return;let t=e=>{let t=e?.pages;this.pageTitles.set(t&&typeof t==`object`?t:{})};t(e.value()),r=e.on(`updated`,t)}).catch(()=>{})}),E(()=>{let e=this.focus();if(!e)return;let t=this.treePages(),n=this.shownPageId();if(e.pageId&&n!==e.pageId&&t[e.pageId]){Z(()=>this.selectPage(e.pageId));return}(this.treeState()||this.treeFailed())&&Z(()=>{let t=!e.pageId||n===e.pageId?this.index().byComponent.get(e.componentId):void 0,r=t?this.index().map.get(t):void 0;t&&r?(this.reveal(t),this.announcement.set(`Showing the injector of ${LK(r)}.`)):this.announcement.set(`That component's injector is not on this page.`),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.stopTree?.(),this.highlight(null)})}setHideFramework(e){this.hideFramework.set(e),yR(AK,e)}openComponent(e){let t=this.shownPageId();this.showComponent.emit(t?{id:e,pageId:t}:{id:e})}tokenPosition(e,t){let n=e[t]?.token,r=0,i=0;return e.forEach((e,a)=>{e.token!==n||this.isHidden(e)||(i++,a<=t&&r++)}),i>1?`(${r} of ${i})`:``}positionSuffix(e,t){let n=this.tokenPosition(e,t);return n?` ${n}`:``}isHidden(e){return this.hideFramework()&&e.framework===!0}isHiddenInjector(e){return this.hideFramework()&&e.injector.framework===!0}providerCount(e){if(!this.hideFramework())return e.injector.providerCount;let t=e.providers.filter(e=>e.framework).length;return Math.max(0,e.injector.providerCount-t)}hiddenProviders(e){return this.hideFramework()?e.providers.filter(e=>e.framework).length:0}async retry(){let e=this.rpc();if(!e||this.retrying())return;let t=document.activeElement;this.retrying.set(!0);try{await Promise.all([this.loadInjectorTree(e),this.loadSourceProviders(e)])}finally{this.retrying.set(!1)}this.destroyRef.destroyed||cd(()=>{t?.isConnected&&document.activeElement!==document.body||this.host.nativeElement.querySelector(`.toolbar input, .toolbar button`)?.focus()},{injector:this.injector})}refresh(){let e=this.shownPageId();e&&(this.requestRefresh(e),this.announcement.set(`Reading the injectors again.`))}requestRefresh(e,t){let n=this.rpc();n&&n.scope(`pangular`).rpc.call(`request-injector-refresh`,t?{pageId:e,injectorId:t}:{pageId:e}).catch(()=>{})}clearQuery(){this.query.set(``),this.queryInput()?.focus()}label(e){return LK(e)}kind(e){return IK(e)}tone(e){return FK[e]??FK.null}kindById(e){let t=this.index().map.get(e);return t?IK(t):`null`}labelById(e){let t=this.index().map.get(e);return t?LK(t):e===kK?`Null injector`:`not listed`}capital(e){return e.charAt(0).toUpperCase()+e.slice(1)}matches(e){let t=this.normalizedQuery();return!!t&&e.toLowerCase().includes(t)}setView(e){this.view()!==e&&(this.view.set(e),this.choose(null),this.focusId.set(null))}select(e){this.choose(e),this.focusId.set(e)}choose(e){let t=e?this.index().map.get(e):void 0;this.selectedId.set(e),this.selectedLabel.set(t?LK(t):null),this.wasGone=!1}syncGone(){let e=this.gone()!==null;if(e&&!this.wasGone){let e=`The selected injector is no longer on the page.`;this.announcement.update(t=>t===e?`${e}\u00a0`:e)}this.wasGone=e}selectPage(e){if(!e||e===this.shownPageId())return;this.chosenPageId.set(e),this.wasGone=this.gone()!==null;let t=this.pageOptions().find(t=>t.value===e)?.label??e;this.announcement.set(`Showing the injectors of ${t}.`)}notePageGone(e){let t=this.chosenPageId();if(!t||e?.[t])return;let n=this.pageOptions().find(e=>e.value===t)?.label??`The chosen page`;this.chosenPageId.set(null),this.announcement.set(`${n} closed, so this shows another page.`),this.wasGone=!0}toggle(e,t){t?.stopPropagation(),!this.normalizedQuery()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}reveal(e){let t=this.index().map.get(e);if(!t)return;this.setView(t.injector.type===`element`?`element`:`environment`);let{parents:n}=this.index();this.collapsed.update(t=>{let r=new Set(t),i=n.get(e);for(;i;)r.delete(i),i=n.get(i);return r}),this.onlyProviding()&&this.providerCount(t)===0&&this.onlyProviding.set(!1),t.injector.type===`element`&&!t.injector.component&&this.componentsOnly.set(!1),this.isHiddenInjector(t)&&this.hideFramework.set(!1);let r=this.normalizedQuery();r&&!this.nodeMatches(t,r)&&this.query.set(``),this.select(e),cd(()=>this.focusRow(e,!1),{injector:this.injector})}highlight(e){let t=this.rpc();if(!t)return;let n=e?.injector.type===`element`?e.injector.selector??null:null,r=n?{pageId:this.shownPageId()||null,selector:n}:null;t.scope(`pangular`).rpc.call(`request-page-highlight`,r).catch(()=>{})}onTreeKey(e){let t=this.rows();if(!t.length)return;let n=this.rovingId(),r=t.findIndex(e=>e.node.injector.id===n),i=Math.max(r,0),a=t[i],o=-1;switch(e.key){case`ArrowDown`:o=Math.min(i+1,t.length-1);break;case`ArrowUp`:o=Math.max(i-1,0);break;case`Home`:o=0;break;case`End`:o=t.length-1;break;case`ArrowRight`:a.hasChildren&&!a.expanded?this.toggle(a.node.injector.id):a.hasChildren&&(o=i+1);break;case`ArrowLeft`:if(a.hasChildren&&a.expanded&&!this.normalizedQuery())this.toggle(a.node.injector.id);else{let{parents:e}=this.index(),n=e.get(a.node.injector.id);for(o=-1;n&&o<0;){let r=n;o=t.findIndex(e=>e.node.injector.id===r),n=e.get(n)}}break;case`Enter`:case` `:this.select(a.node.injector.id);break;default:return}if(e.preventDefault(),o>=0){let e=t[o].node.injector.id;this.focusId.set(e),this.choose(e),queueMicrotask(()=>this.focusRow(e,!0))}}focusRow(e,t){let n=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);n&&(t&&n.focus(),n.scrollIntoView({block:`nearest`}))}clearTree(){this.stopTree?.(),this.stopTree=null}async loadInjectorTree(e){let t=++this.treeLoad;this.clearTree();let n=e.scope(`pangular`),r;try{r=await n.rpc.sharedState(`injector-tree`)}catch{t===this.treeLoad&&this.treeFailed.set(!0);return}if(this.destroyRef.destroyed||this.rpc()!==e||t!==this.treeLoad)return;this.treeFailed.set(!1);let i=e=>{let t=e&&typeof e==`object`?e:null;this.notePageGone(t?.pages),this.treeState.set(t),this.syncGone()};i(r.value()),this.clearTree(),this.stopTree=r.on(`updated`,i)}async loadSourceProviders(e){let t=e.scope(`pangular`);try{this.sourceProviders.set(await t.rpc.call(`get-providers`)),this.sourceFailed.set(!1)}catch{this.sourceProviders.set([]),this.sourceFailed.set(!0)}finally{this.loaded.set(!0)}}count(e){return e.reduce((e,t)=>e+1+this.count(t.children),0)}nodeMatches(e,t){let n=e.injector;return n.name.toLowerCase().includes(t)||!!n.component?.toLowerCase().includes(t)||!!n.directives?.some(e=>e.toLowerCase().includes(t))||e.providers.some(e=>e.token.toLowerCase().includes(t))||!!e.dependencies?.some(e=>e.token.toLowerCase().includes(t))}withoutFramework(e){if(!this.hideFramework())return e;let t=e=>e.flatMap(e=>e.injector.framework?t(e.children):[{...e,children:t(e.children)}]);return t(e)}prune(e,t){let n=[];for(let r of e){let e=this.prune(r.children,t);(t(r)||e.length)&&n.push({...r,children:e})}return n}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-di-inspector`]],viewQuery:function(e,t){e&1&&Mg(t.queryInput,HW,5),e&2&&Ng()},inputs:{rpc:[1,`rpc`],focus:[1,`focus`],canShowComponent:[1,`canShowComponent`]},outputs:{focusHandled:`focusHandled`,showComponent:`showComponent`},decls:11,vars:2,consts:[[`loadError`,``],[`pagePicker`,``],[`queryInput`,``],[`role`,`status`,1,`sr-only`],[`role`,`status`,1,`state`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[`role`,`alert`,1,`state`,`load-error`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[1,`page-picker`],[`id`,`di-page-label`,1,`label-key`],[`labelledBy`,`di-page-label`,3,`valueChange`,`options`,`value`],[1,`intro`],[`capability`,`injectorMetadata`,`compact`,``,3,`page`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Injector tree`,1,`segmented`],[1,`pill`],[`placeholder`,`Filter by token, component or injector`,`saveKey`,`injectors`,1,`search`,3,`valueChange`,`value`],[3,`ngTemplateOutlet`],[1,`checkbox`],[`type`,`checkbox`,3,`change`,`checked`],[1,`total`,`framework-hidden`],[1,`total`],[`type`,`button`,1,`refresh`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7`],[1,`notice`],[1,`where`],[1,`where`,`muted`],[1,`orphans`],[1,`layout`],[1,`state`],[`role`,`tree`,1,`tree`,3,`keydown`,`hidden`],[`role`,`treeitem`,1,`row`,3,`selected`,`--%NS%depth`],[`view`,`injectors`,`label`,`Resize the injector detail`,3,`sizeChange`,`min`,`max`,`defaultSize`,`size`],[`aria-labelledby`,`di-detail-title`,1,`detail`,`gone`],[`aria-labelledby`,`di-detail-title`,1,`detail`],[3,`rpc`,`pageId`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[1,`where-label`],[`type`,`button`,1,`chip`],[1,`more`],[`type`,`button`,1,`chip`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`mono`],[1,`chip-tokens`],[`type`,`button`,1,`link`,3,`click`],[`type`,`button`,`aria-controls`,`di-orphans`,1,`orphans-toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[1,`hint-tag`],[`id`,`di-orphans`,1,`orphans-body`,3,`hidden`],[1,`hint`],[1,`orphan-list`],[1,`token`,`mono`],[1,`flag`],[1,`orphan-file`,3,`file`,`line`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[`aria-hidden`,`true`,1,`kind`],[1,`sr-only`],[1,`name`,`mono`],[1,`flag`,`inactive-flag`],[1,`sub`],[1,`meta`],[1,`count`],[1,`count`,`provides`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`M12 5v14M5 12l7 7 7-7`],[`d`,`M21 8 12 3 3 8v8l9 5 9-5z`],[1,`detail-head`],[`id`,`di-detail-title`,1,`mono`],[1,`state`,`compact`],[`type`,`button`],[1,`badge`],[`aria-label`,`Classes on this element`,1,`classes`],[`type`,`button`,1,`show-component`],[1,`hint`,`inactive-note`],[1,`block`],[1,`path`],[3,`current`],[1,`hint`,`framework-note`],[1,`providers`],[1,`empty-line`],[3,`is-component`],[`type`,`button`,1,`show-component`,3,`click`],[1,`step`,`null`],[`type`,`button`,1,`step`],[1,`hint-inline`],[`type`,`button`,1,`step`,3,`click`],[1,`step-count`],[1,`deps`],[1,`dep`,3,`hit`],[1,`dep`],[1,`dep-main`],[1,`dep-meta`],[`type`,`button`,1,`from`],[1,`from`,`absent`],[1,`from`,`missing`],[`type`,`button`,1,`link`,`resolve-toggle`,3,`click`],[1,`resolution`,3,`id`,`hidden`],[1,`resolve-graph`],[`type`,`button`,1,`from`,3,`click`],[3,`class`],[`aria-hidden`,`true`,1,`resolve-dot`],[1,`resolve-state`],[1,`provider`,3,`hit`],[1,`provider`],[1,`flag`,`kind-flag`],[1,`dep-meta`,`declared`],[1,`provider-global`,3,`rpc`,`pageId`,`target`,`label`,`canLog`],[3,`rpc`,`pageId`,`injectorId`,`token`,`tokenId`,`index`,`position`],[1,`decl-file`,3,`file`,`line`],[`aria-hidden`,`true`,1,`spinner`],[`placeholder`,`Filter by token or file`,`saveKey`,`injectors-source`,1,`search`,3,`valueChange`,`value`],[`aria-live`,`polite`,1,`total`],[`capability`,`debugApi`,`compact`,``,3,`page`],[1,`source-providers`],[1,`provider-group`],[`role`,`list`,1,`provider-list`,3,`hidden`],[1,`provider-card`],[`type`,`button`,`aria-controls`,`di-helpers`,1,`group-toggle`,3,`click`],[1,`section-count`],[1,`hint`,`helper-hint`,3,`hidden`],[1,`provider-header`],[1,`token`],[1,`provided-in`],[1,`provider-meta`],[1,`path`,3,`file`,`line`],[1,`as`]],template:function(e,t){e&1&&(F(0,`p`,3),K(1),I(),jh(2,eG,7,5,`ng-template`,null,0,tv)(4,nG,1,1,`ng-template`,null,1,tv),A(6,pK,43,32)(7,mK,4,0,`div`,4)(8,hK,1,3,`ng-container`,5)(9,_K,6,1)(10,OK,18,7)),e&2&&(D(),q(t.announcement()),D(5),j(t.roots().length>0?6:t.loaded()?t.loadFailed()&&t.sourceProviders().length===0?8:t.sourceProviders().length===0?9:10:7))},dependencies:[$N,VW,dD,Zv,SW,wD,bj,LW,CM],styles:[`[_nghost-%COMP%] {
-  --%NS%directive: #7cb4ff;
-  display: block;
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%] {
-    --%NS%directive: #1e40af;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%] {
-  --%NS%directive: #1e40af;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.intro[_ngcontent-%COMP%] {
-  max-width: 720px;
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 12px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.page-picker[_ngcontent-%COMP%] {
-  display: flex;
-  flex: 0 1 240px;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.page-picker[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.label-key[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.segmented[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  height: var(--%NS%control-h);
-  padding: 3px;
-  gap: 2px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-}
-
-.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 100%;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease);
-}
-
-.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.segmented[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-}
-
-.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.pill[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  justify-content: center;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-.segmented[_ngcontent-%COMP%]   .active[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%accent);
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: 34px;
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-input[type=search][_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[type=search][_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.checkbox[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 34px;
-  color: var(--%NS%text-2);
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.checkbox[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.checkbox[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-.checkbox[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.total[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.where[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 12px;
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%accent-line);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%accent-soft);
-  animation: enter 0.2s var(--%NS%ease) both;
-}
-
-.where.muted[_ngcontent-%COMP%] {
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-}
-
-.where-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-right: 4px;
-  color: var(--%NS%accent);
-}
-
-.chip[_ngcontent-%COMP%], 
-.from[_ngcontent-%COMP%], 
-.step[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  max-width: 100%;
-  height: 26px;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 99px;
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font-size: 12px;
-  cursor: pointer;
-  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
-}
-
-.chip[_ngcontent-%COMP%]:hover, 
-.from[_ngcontent-%COMP%]:hover, 
-.step[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-2);
-}
-
-.chip[_ngcontent-%COMP%]:focus-visible, 
-.from[_ngcontent-%COMP%]:focus-visible, 
-.step[_ngcontent-%COMP%]:focus-visible, 
-.link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.chip-tokens[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.more[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.link[_ngcontent-%COMP%] {
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--%NS%accent);
-  font-size: 13px;
-  cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.dot[_ngcontent-%COMP%] {
-  flex: none;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-}
-
-.layout[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 12px;
-  align-items: start;
-}
-
-.layout[_ngcontent-%COMP%]    > app-splitter[_ngcontent-%COMP%] {
-  display: none;
-}
-
-@media (min-width: 880px) {
-  .layout[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr) auto min(var(--%NS%detail-size, 420px), 70%);
-  }
-  .layout[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {
-    grid-column: 1;
-    grid-row: 1;
-  }
-  .layout[_ngcontent-%COMP%]    > app-splitter[_ngcontent-%COMP%] {
-    display: block;
-    grid-column: 2;
-  }
-  .layout[_ngcontent-%COMP%]    > .detail[_ngcontent-%COMP%] {
-    grid-column: 3;
-  }
-  .detail[_ngcontent-%COMP%] {
-    position: sticky;
-    top: 64px;
-    max-height: calc(100vh - 150px);
-    overflow: auto;
-  }
-}
-.tree[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 6px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.row[_ngcontent-%COMP%] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-height: 32px;
-  padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px);
-  border-radius: var(--%NS%radius-sm);
-  cursor: pointer;
-  transition: background-color 120ms var(--%NS%ease);
-}
-
-.row[_ngcontent-%COMP%]::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 14px;
-  width: calc(var(--%NS%depth, 0) * 18px);
-  background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px);
-  pointer-events: none;
-}
-
-.row[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.row.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.twisty[_ngcontent-%COMP%], 
-.twisty-space[_ngcontent-%COMP%] {
-  flex: none;
-  width: 20px;
-  height: 20px;
-}
-
-.twisty[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text-3);
-  cursor: pointer;
-}
-
-.twisty[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-  background: var(--%NS%surface-3);
-}
-
-.twisty[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: transform 150ms var(--%NS%ease);
-}
-
-.twisty.open[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  transform: rotate(90deg);
-}
-
-.kind[_ngcontent-%COMP%] {
-  flex: none;
-  display: grid;
-  place-items: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 5px;
-  background: color-mix(in srgb, var(--%NS%tone) 16%, transparent);
-  color: var(--%NS%tone);
-  font-size: 10px;
-  font-weight: 700;
-}
-
-.name[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text);
-  font-size: 12px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.row.selected[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-.sub[_ngcontent-%COMP%] {
-  flex: 0 1 auto;
-  min-width: 0;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.meta[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  gap: 4px;
-  margin-left: auto;
-  padding-left: 8px;
-}
-
-.count[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  height: 20px;
-  padding: 0 7px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.count.provides[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.count[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  width: 11px;
-  height: 11px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.detail[_ngcontent-%COMP%] {
-  min-width: 0;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.detail-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 10px;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.badge[_ngcontent-%COMP%] {
-  padding: 2px 8px;
-  border-radius: 99px;
-  background: color-mix(in srgb, var(--%NS%tone) 14%, transparent);
-  color: var(--%NS%tone);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.classes[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.classes[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 6px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-}
-
-.classes[_ngcontent-%COMP%]   li.is-component[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%accent);
-}
-
-.block[_ngcontent-%COMP%] {
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.block[_ngcontent-%COMP%]:last-child {
-  border-bottom: 0;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 8px;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: -4px 0 10px;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-}
-
-.path[_ngcontent-%COMP%] {
-  position: relative;
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0 0 0 18px;
-  list-style: none;
-}
-
-.path[_ngcontent-%COMP%]::before {
-  content: "";
-  position: absolute;
-  top: 13px;
-  bottom: 13px;
-  left: 5px;
-  width: 1px;
-  background: var(--%NS%border-strong);
-}
-
-.path[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  position: relative;
-  min-width: 0;
-}
-
-.path[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]::before {
-  content: "";
-  position: absolute;
-  top: 12px;
-  left: -16px;
-  width: 9px;
-  height: 1px;
-  background: var(--%NS%border-strong);
-}
-
-.path[_ngcontent-%COMP%]   li.current[_ngcontent-%COMP%]   .step[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent-soft);
-}
-
-.step.null[_ngcontent-%COMP%] {
-  cursor: default;
-  color: var(--%NS%text-2);
-}
-
-.step.null[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface);
-}
-
-.hint-inline[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.step-count[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-}
-
-.deps[_ngcontent-%COMP%], 
-.providers[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.dep[_ngcontent-%COMP%], 
-.provider[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-}
-
-.dep.hit[_ngcontent-%COMP%], 
-.provider.hit[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.provider-global[_ngcontent-%COMP%] {
-  margin-top: 6px;
-}
-
-.show-component[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-.show-component[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-.show-component[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.framework-note[_ngcontent-%COMP%] {
-  margin: 0 0 10px;
-  color: var(--%NS%text-2);
-}
-
-.dep-main[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-}
-
-.token[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.flag[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 5px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 10px;
-  line-height: 16px;
-}
-
-.kind-flag[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.dep-meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 10px;
-  margin-top: 6px;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.from[_ngcontent-%COMP%] {
-  height: 22px;
-  padding: 0 8px;
-  color: var(--%NS%text-2);
-}
-
-.from[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.from.absent[_ngcontent-%COMP%] {
-  cursor: default;
-  background: none;
-}
-
-.from.missing[_ngcontent-%COMP%] {
-  cursor: default;
-  border-color: color-mix(in srgb, var(--%NS%warn) 40%, transparent);
-  background: none;
-  color: var(--%NS%warn);
-}
-
-.empty-line[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.state[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 40px 16px;
-  text-align: center;
-  background: var(--%NS%surface);
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.state.compact[_ngcontent-%COMP%] {
-  padding: 24px 12px;
-  border: 0;
-}
-
-.state-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.state-hint[_ngcontent-%COMP%] {
-  max-width: 440px;
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-button[_ngcontent-%COMP%] {
-  font: inherit;
-}
-
-.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%], 
-.provider-group[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.load-error.compact[_ngcontent-%COMP%] {
-  margin: 0 0 16px;
-  border: 1px solid var(--%NS%border);
-  background: var(--%NS%surface);
-}
-
-.state-title[_ngcontent-%COMP%]    + .state-hint[_ngcontent-%COMP%]    + button[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.gone[_ngcontent-%COMP%]   .state[_ngcontent-%COMP%] {
-  align-items: flex-start;
-  text-align: left;
-}
-
-.notice[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin: 0 0 16px;
-  padding: 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.notice[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 600;
-}
-
-.notice[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
-  fill: none;
-  stroke: var(--%NS%accent);
-  stroke-width: 2;
-  stroke-linecap: round;
-}
-
-.resolve-toggle[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.resolution[hidden][_ngcontent-%COMP%] {
-  display: none;
-}
-
-.resolve-graph[_ngcontent-%COMP%] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin: 8px 0 0;
-  padding: 0 0 0 4px;
-  list-style: none;
-}
-
-.resolve-graph[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px 8px;
-  min-width: 0;
-  padding-left: 18px;
-  font-size: 12px;
-}
-
-.resolve-graph[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]::before {
-  content: "";
-  position: absolute;
-  left: 4px;
-  top: -6px;
-  bottom: 50%;
-  width: 2px;
-  background: var(--%NS%border-strong);
-}
-
-.resolve-graph[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:first-child::before {
-  display: none;
-}
-
-.resolve-dot[_ngcontent-%COMP%] {
-  position: absolute;
-  left: 0;
-  width: 10px;
-  height: 10px;
-  border: 2px solid var(--%NS%border-strong);
-  border-radius: 50%;
-  background: var(--%NS%surface);
-}
-
-.resolve-provides[_ngcontent-%COMP%]   .resolve-dot[_ngcontent-%COMP%] {
-  border-color: var(--%NS%ok);
-  background: var(--%NS%ok);
-}
-
-.resolve-throws[_ngcontent-%COMP%]   .resolve-dot[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  background: var(--%NS%danger);
-}
-
-.resolve-state[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.resolve-provides[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%] {
-  color: var(--%NS%ok-text);
-  font-weight: 600;
-}
-
-.resolve-throws[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}
-
-.resolve-not-asked[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%], 
-.resolve-skipped[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.declared[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.decl-file[_ngcontent-%COMP%] {
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  overflow-wrap: anywhere;
-}
-
-.refresh[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: var(--%NS%control-h);
-  margin-left: auto;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 12px;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-.refresh[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-
-.refresh[aria-disabled=true][_ngcontent-%COMP%] {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.refresh[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.refresh[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%], 
-.chevron[_ngcontent-%COMP%] {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.chevron[_ngcontent-%COMP%] {
-  transition: transform 150ms var(--%NS%ease);
-}
-
-.chevron.open[_ngcontent-%COMP%] {
-  transform: rotate(90deg);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chevron[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}
-.inactive-flag[_ngcontent-%COMP%] {
-  flex: none;
-}
-
-.inactive-note[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-}
-
-.orphans[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-}
-
-.orphans-toggle[_ngcontent-%COMP%], 
-.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 0;
-  border-radius: var(--%NS%radius-sm);
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%] {
-  width: auto;
-  height: auto;
-  min-height: 0;
-  padding: 2px 4px;
-  margin-left: -4px;
-  color: inherit;
-  font: inherit;
-  letter-spacing: inherit;
-  text-transform: inherit;
-}
-
-.orphans-toggle[_ngcontent-%COMP%]:hover, 
-.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.orphans-toggle[_ngcontent-%COMP%]:focus-visible, 
-.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.hint-tag[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 5px;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  font-size: 10px;
-  line-height: 16px;
-}
-
-.orphans-body[_ngcontent-%COMP%] {
-  padding: 0 12px 12px;
-}
-
-.orphan-list[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.orphan-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px 8px;
-  min-width: 0;
-  font-size: 12px;
-}
-
-.orphans-body[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.orphan-list[_ngcontent-%COMP%]   .orphan-file[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  overflow-wrap: anywhere;
-}
-
-.helper-hint[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.provider-list[hidden][_ngcontent-%COMP%], 
-.orphans-body[hidden][_ngcontent-%COMP%], 
-.helper-hint[hidden][_ngcontent-%COMP%] {
-  display: none;
-}
-
-.source-providers[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.provider-group[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 8px;
-}
-
-.section-count[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  letter-spacing: 0;
-  line-height: 16px;
-  font-variant-numeric: tabular-nums;
-}
-
-.provider-list[_ngcontent-%COMP%] {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.provider-card[_ngcontent-%COMP%] {
-  min-width: 0;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  padding: 8px 12px;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-.provider-card[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-  border-color: var(--%NS%border-strong);
-}
-
-.provider-header[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-}
-
-.provider-header[_ngcontent-%COMP%]   .token[_ngcontent-%COMP%] {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.provided-in[_ngcontent-%COMP%] {
-  font-size: 11px;
-  padding: 1px 8px;
-  border-radius: 99px;
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-  border-width: 1px;
-  border-style: solid;
-}
-
-.provider-meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0 8px;
-  margin-top: 4px;
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  color: var(--%NS%text-3);
-}
-
-.provider-meta[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.provider-meta[_ngcontent-%COMP%]   .as[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}`]})};function BK(e){let t=/^(.*?)\s*\((.+?):(\d+)(?::\d+)?\)$/.exec(e)??/^()(.+?):(\d+)(?::\d+)?$/.exec(e);return t?{name:t[1],file:t[2],line:Number(t[3])}:{name:e}}var VK=1e3;function HK(e){return`${e>=1e3?`${VK}+`:String(e)} more ${e===1?`change`:`changes`} not shown`}function UK(e){let t=e.diffTruncated??0,n=e.diff.length+t;return n===0?`no change`:`${t>=1e3?`${n}+`:String(n)} ${n===1?`change`:`changes`}`}function WK(e,t){if(e.pageId!==t.pageId)return!1;let n=e.log.at(-1);if(!n)return!0;let r=t.log.at(-1);if(!r||r.seq<n.seq)return!1;let i=t.log.find(e=>e.seq===n.seq);return!i||i.timestamp===n.timestamp}var GK=`@type`,KK=new Set([`undefined`,`number`,`bigint`,`symbol`,`function`,`Date`,`RegExp`,`Error`,`Element`,`Map`,`Set`]);function qK(e){return!!e&&typeof e==`object`&&!Array.isArray(e)&&GK in e&&KK.has(e[GK])}function JK(e){return/^[A-Za-z_$][\w$]*$/.test(e)?e:JSON.stringify(e)}function YK(e,t=``){if(e===null)return`null`;if(typeof e==`string`)return JSON.stringify(e);if(typeof e!=`object`)return String(e);let n=t+`  `;if(Array.isArray(e))return e.length?`[\n${e.map(e=>n+YK(e,n)).join(`,
-`)}\n${t}]`:`[]`;if(qK(e)){let r=e;switch(r[GK]){case`undefined`:return`undefined`;case`Date`:return`Date(${r.value})`;case`bigint`:return`${r.value}n`;case`symbol`:return`Symbol(${r.value})`;case`function`:return`ƒ ${r.name}()`;case`Error`:return`${r.name??`Error`}: ${r.message}`;case`Element`:return`<${r.value}>`;case`Map`:{let e=r.entries??[];if(!e.length)return`Map(${r.size}) {}`;let i=e.map(([e,t])=>`${n}${YK(e,n)} => ${YK(t,n)}`);return`Map(${r.size}) {\n${i.join(`,
-`)}\n${t}}`}case`Set`:{let e=r.values??[];return e.length?`Set(${r.size}) {\n${e.map(e=>n+YK(e,n)).join(`,
-`)}\n${t}}`:`Set(${r.size}) {}`}default:return String(r.value??r[GK])}}let r=Object.entries(e);return r.length?`{\n${r.map(([e,t])=>`${n}${JK(e)}: ${YK(t,n)}`).join(`,
-`)}\n${t}}`:`{}`}function XK(e,t=120){let n=YK(e).replace(/\s*\n\s*/g,` `);return n.length>t?`${n.slice(0,t-1)}…`:n}var ZK=[[[``,`tab-action`,``]],[[``,`tab-diff`,``]]],QK=[`[tab-action]`,`[tab-diff]`],$K=(e,t)=>t.id,eq=(e,t)=>t.path+e;function tq(e,t){if(e&1){let e=B();R(0,`button`,5),U(`click`,function(){let t=S(e).$implicit;return C(W().select(t.id))}),K(1),z()}if(e&2){let e=t.$implicit,n=W();V(`id`,n.idPrefix()+`-tab-`+e.id),k(`aria-selected`,n.active()===e.id)(`aria-controls`,n.idPrefix()+`-panel-`+e.id)(`tabindex`,n.active()===e.id?0:-1),D(),J(` `,e.label,` `)}}function nq(e,t){e&1&&(R(0,`p`,9),K(1,`The state did not change.`),z())}function rq(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W().$implicit,t=W(3);D(),q(t.shortText(e.before))}}function iq(e,t){e&1&&(R(0,`span`,13),K(1,`→`),z(),R(2,`span`,14),K(3,`became`),z())}function aq(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W().$implicit,t=W(3);D(),q(t.shortText(e.after))}}function oq(e,t){if(e&1&&(R(0,`li`)(1,`code`,11),K(2),z(),R(3,`span`,12),K(4),z(),A(5,rq,2,1,`code`),A(6,iq,4,0),A(7,aq,2,1,`code`),z()),e&2){let e=t.$implicit;D(2),q(e.path),D(2),q(e.op),D(),j(e.op===`add`?-1:5),D(),j(e.op===`change`?6:-1),D(),j(e.op===`remove`?-1:7)}}function sq(e,t){if(e&1&&(R(0,`p`,9),K(1),z()),e&2){let e=W(),t=W(2);D(),q(t.moreChanges(e.diffTruncated))}}function cq(e,t){if(e&1&&(R(0,`p`,8),K(1),z(),A(2,nq,2,0,`p`,9),R(3,`ul`,10),M(4,oq,8,5,`li`,null,eq),z(),A(6,sq,2,1,`p`,9)),e&2){let e=t;D(),J(`All changes (`,e.diff.length+(e.diffTruncated??0),`)`),D(),j(e.diff.length?-1:2),D(2),N(e.diff),D(2),j(e.diffTruncated?6:-1)}}function lq(e,t){if(e&1&&(R(0,`p`,6),K(1),z()),e&2){let e=W(2);D(),q(e.error())}}function uq(e,t){if(e&1){let e=B();R(0,`button`,15),U(`click`,function(){return S(e),C(W(2).load())}),K(1,` Show all changes `),z()}e&2&&V(`disabled`,W(2).loading())}function dq(e,t){if(e&1&&A(0,cq,7,3)(1,lq,2,1,`p`,6)(2,uq,2,1,`button`,7),e&2){let e,t=W();j((e=t.detail())?0:t.error()?1:2,e)}}function fq(e,t){e&1&&(R(0,`p`,3),K(1,`Reading the state…`),z())}function pq(e,t){if(e&1){let e=B();R(0,`div`,4)(1,`p`),K(2),z(),R(3,`button`,16),U(`click`,function(){return S(e),C(W().load())}),K(4,`Retry`),z()()}if(e&2){let e=W();D(2),q(e.error())}}function mq(e,t){if(e&1&&(R(0,`p`,3),K(1),z()),e&2){let e=W(2);D(),q(e.copied())}}function hq(e,t){if(e&1){let e=B();R(0,`div`,17)(1,`div`,18)(2,`button`,19),U(`click`,function(){return S(e),C(W().showBefore.set(!1))}),K(3),z(),R(4,`button`,19),U(`click`,function(){return S(e),C(W().showBefore.set(!0))}),K(5),z()(),R(6,`button`,16),U(`click`,function(){return S(e),C(W().copy())}),K(7,` Copy `),z()(),R(8,`pre`,20),K(9),z(),R(10,`p`,21),K(11,`Secret-looking fields are redacted, and very large values are cut.`),z(),A(12,mq,2,1,`p`,3)}if(e&2){let e=t,n=W();D(2),k(`aria-pressed`,!n.showBefore()),D(),J(` After #`,e.seq,` `),D(),k(`aria-pressed`,n.showBefore()),D(),J(` Before #`,e.seq,` `),D(),k(`aria-label`,`Copy the state `+(n.showBefore()?`before`:`after`)+` #`+e.seq),D(2),k(`aria-label`,n.stateLabel()),D(),q(n.stateText()),D(3),j(n.copied()?12:-1)}}var gq=[{id:`action`,label:`Action`},{id:`diff`,label:`Diff`},{id:`state`,label:`State`}],_q=class e{seq=$.required();diffTruncated=$(void 0);idPrefix=$.required();loader=$.required();loadDiff=$(!1);tabs=gq;host=x(Ml);active=Q({source:this.seq,computation:()=>`diff`});detail=Q({source:this.seq,computation:()=>null});error=Q({source:this.seq,computation:()=>``});loading=Q({source:this.seq,computation:()=>!1});showBefore=T(!1);copied=T(``);truncated=X(()=>(this.diffTruncated()??0)>0);constructor(){E(()=>{this.loadDiff()&&(this.seq(),Z(()=>void this.load()))})}stateText=X(()=>{let e=this.detail();return e?YK(this.showBefore()?e.before:e.after):``});stateLabel=X(()=>`State ${this.showBefore()?`before`:`after`} entry #${this.seq()}`);select(e){this.active.set(e),e===`state`&&!this.detail()&&!this.loading()&&this.load()}request=0;async load(){let e=this.seq(),t=++this.request;this.loading.set(!0),this.error.set(``);let n;try{n=await this.loader()(e)}catch{n={error:`The devtools server did not answer. Try again.`}}t===this.request&&e===this.seq()&&(this.loading.set(!1),n.ok&&n.detail?this.detail.set(n.detail):this.error.set(n.error??`The page sent no state for this entry.`))}onKey(e){let t=gq.findIndex(e=>e.id===this.active()),n=e.key===`ArrowRight`?(t+1)%gq.length:e.key===`ArrowLeft`?(t+gq.length-1)%gq.length:e.key===`Home`?0:e.key===`End`?gq.length-1:-1;n<0||(e.preventDefault(),this.select(gq[n].id),this.host.nativeElement.querySelector(`#${this.idPrefix()}-tab-${gq[n].id}`)?.focus())}async copy(){try{await navigator.clipboard.writeText(this.stateText()),this.copied.set(`Copied the state.`)}catch{this.copied.set(`The clipboard is not available here.`)}}shortText(e){return XK(e,80)}moreChanges(e){return HK(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-entry-tabs`]],inputs:{seq:[1,`seq`],diffTruncated:[1,`diffTruncated`],idPrefix:[1,`idPrefix`],loader:[1,`loader`],loadDiff:[1,`loadDiff`]},ngContentSelectors:QK,decls:12,vars:12,consts:[[`role`,`tablist`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,1,`tab`,3,`id`],[`role`,`tabpanel`,`tabindex`,`0`,1,`panel`,3,`id`,`hidden`],[`role`,`status`,1,`muted`],[`role`,`alert`,1,`error-box`],[`type`,`button`,`role`,`tab`,1,`tab`,3,`click`,`id`],[`role`,`alert`,1,`error-text`],[`type`,`button`,1,`btn`,3,`disabled`],[1,`sub`],[1,`muted`],[1,`all-diff`],[1,`path`],[1,`op`],[`aria-hidden`,`true`],[1,`visually-hidden`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,3,`click`],[1,`state-head`],[`role`,`group`,`aria-label`,`Which state to show`,1,`segmented`],[`type`,`button`,3,`click`],[`tabindex`,`0`,1,`state`],[1,`hint`]],template:function(e,t){if(e&1&&(kg(ZK),R(0,`div`,0),U(`keydown`,function(e){return t.onKey(e)}),M(1,tq,2,5,`button`,1,$K),z(),R(3,`div`,2),Ag(4),z(),R(5,`div`,2),Ag(6,1),A(7,dq,3,1),z(),R(8,`div`,2),A(9,fq,2,0,`p`,3)(10,pq,5,1,`div`,4)(11,hq,13,8),z()),e&2){let e;k(`aria-label`,`Entry #`+t.seq()+` details`),D(),N(t.tabs),D(2),V(`id`,t.idPrefix()+`-panel-action`)(`hidden`,t.active()!==`action`),k(`aria-labelledby`,t.idPrefix()+`-tab-action`),D(2),V(`id`,t.idPrefix()+`-panel-diff`)(`hidden`,t.active()!==`diff`),k(`aria-labelledby`,t.idPrefix()+`-tab-diff`),D(2),j(t.truncated()||t.loadDiff()?7:-1),D(),V(`id`,t.idPrefix()+`-panel-state`)(`hidden`,t.active()!==`state`),k(`aria-labelledby`,t.idPrefix()+`-tab-state`),D(),j(t.loading()?9:t.error()?10:(e=t.detail())?11:-1,e)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-  margin-top: 10px;
-}
-
-.tabs[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 2px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.tab[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-.tab[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.tab[aria-selected=true][_ngcontent-%COMP%] {
-  border-bottom-color: var(--%NS%accent);
-  color: var(--%NS%text-strong);
-}
-
-.tab[_ngcontent-%COMP%]:focus-visible, 
-.panel[_ngcontent-%COMP%]:focus-visible, 
-.state[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.panel[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding-top: 8px;
-}
-
-.sub[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 12px 0 6px;
-}
-
-.all-diff[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  max-height: 320px;
-  margin: 0;
-  padding: 0;
-  overflow: auto;
-  list-style: none;
-  font-size: 12px;
-}
-
-.all-diff[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.op[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.state-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.segmented[_ngcontent-%COMP%] {
-  display: inline-flex;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  overflow: hidden;
-}
-
-.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: none;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]    + button[_ngcontent-%COMP%] {
-  border-left: 1px solid var(--%NS%border-strong);
-}
-
-.segmented[_ngcontent-%COMP%]   button[aria-pressed=true][_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.state[_ngcontent-%COMP%] {
-  max-height: 360px;
-  margin: 0;
-  padding: 10px 12px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.hint[_ngcontent-%COMP%], 
-.muted[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.error-text[_ngcontent-%COMP%], 
-.error-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  color: var(--%NS%danger-text);
-}
-
-.visually-hidden[_ngcontent-%COMP%] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tab[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},vq=[`generateLive`],yq=[`generateImported`],bq=[`importButton`],xq=[`testHeading`],Sq=(e,t)=>t.seq;function Cq(e,t){if(e&1){let e=B();F(0,`div`,8)(1,`div`,18)(2,`span`,19),K(3,`From`),I(),F(4,`app-select`,20),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.from,t)||(n.from=t),C(t)}),I()(),F(5,`div`,18)(6,`span`,21),K(7,`To`),I(),F(8,`app-select`,22),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.to,t)||(n.to=t),C(t)}),I()()()}if(e&2){let e=W();D(4),P(`options`,e.options()),A_(`value`,e.from),D(4),P(`options`,e.options()),A_(`value`,e.to)}}function wq(e,t){e&1&&(F(0,`p`,9),K(1,`No recorded changes on this store yet, so there is nothing to export.`),I())}function Tq(e,t){if(e&1&&(F(0,`p`,15),K(1),I()),e&2){let e=W();D(),q(e.error())}}function Eq(e,t){if(e&1&&(F(0,`li`),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function Dq(e,t){if(e&1&&(F(0,`ul`,25),M(1,Eq,2,1,`li`,null,eg),I()),e&2){let e=W();D(),N(e.notes)}}function Oq(e,t){if(e&1){let e=B();F(0,`div`,16)(1,`div`,23)(2,`h5`,24,3),K(4),I(),F(5,`div`,10)(6,`button`,12),H(`click`,function(){return S(e),C(W().copyTest())}),K(7,`Copy`),I(),F(8,`button`,12),H(`click`,function(){return S(e),C(W().downloadTest())}),K(9,`Download`),I(),F(10,`button`,12),H(`click`,function(){return S(e),C(W().closeTest())}),K(11,`Close`),I()()(),A(12,Dq,3,0,`ul`,25),F(13,`pre`,26),K(14),I()()}if(e&2){let e=t;D(4),J(` Generated test (`,e.framework,`) `),D(8),j(e.notes.length?12:-1),D(),k(`aria-label`,`Test code, `+e.file),D(),q(e.code)}}function kq(e,t){e&1&&(F(0,`p`,9),K(1),I()),e&2&&(D(),J(`Recorded on `,t))}function Aq(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,31),H(`click`,function(){let t=S(e).$implicit;return C(W(2).importedSeq.set(t.seq))}),F(2,`span`,32),K(3),I(),F(4,`span`,33),K(5),I()()()}if(e&2){let e=t.$implicit,n=W(2);D(),k(`aria-pressed`,e.seq===n.importedSeq()),D(2),J(`#`,e.seq),D(2),q(e.type)}}function jq(e,t){if(e&1&&(F(0,`p`,35),K(1,`Action`),I(),F(2,`pre`,36),K(3),I()),e&2){let e=W(),t=W(2);D(3),q(t.prettyText(e.action))}}function Mq(e,t){if(e&1&&(F(0,`p`,35),K(1,`Arguments`),I(),F(2,`pre`,36),K(3),I()),e&2){let e=W(),t=W(2);D(3),q(t.prettyText(e.args))}}function Nq(e,t){e&1&&(F(0,`p`,9),K(1,`No action or arguments were recorded for this entry.`),I())}function Pq(e,t){if(e&1&&(F(0,`app-entry-tabs`,30)(1,`div`,34),A(2,jq,4,1),A(3,Mq,4,1),A(4,Nq,2,0,`p`,9),I()()),e&2){let e=t,n=W(2);P(`seq`,e.seq)(`loadDiff`,!0)(`loader`,n.importedLoader),D(2),j(e.action===void 0?-1:2),D(),j(e.args?.length?3:-1),D(),j(e.action===void 0&&!e.args?.length?4:-1)}}function Fq(e,t){if(e&1){let e=B();F(0,`div`,17)(1,`div`,23)(2,`h5`,27),K(3),F(4,`span`,28),K(5),I()(),F(6,`div`,10)(7,`button`,12,4),H(`click`,function(){let t=S(e);return C(W().generate(t.id))}),K(9,` Generate test `),I(),F(10,`button`,12),H(`click`,function(){return S(e),C(W().closeImported())}),K(11,`Close`),I()()(),A(12,kq,2,1,`p`,9),F(13,`ul`,29),M(14,Aq,6,3,`li`,null,Sq),I(),A(16,Pq,5,6,`app-entry-tabs`,30),I()}if(e&2){let e,n,r=t,i=W();D(3),J(` Imported: `,r.store.name??r.store.id,` `),D(2),q(r.entries.length),D(2),k(`aria-disabled`,i.busy()?`true`:null),D(5),j((e=r.page?.url)?12:-1,e),D(2),N(r.entries),D(2),j((n=i.importedEntry())?16:-1,n)}}function Iq(e,t,n){let r=new Blob([e],{type:n}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=t,document.body.append(a),a.click(),a.remove(),setTimeout(()=>URL.revokeObjectURL(i),0)}var Lq=class e{rpc=$(null);pageId=$(null);storeId=$(null);entries=$([]);framework=`Vitest`;options=X(()=>this.entries().map(e=>({value:String(e.seq),label:`#${e.seq} ${e.type}`})));from=Q({source:this.entries,computation:(e,t)=>t?.value&&e.some(e=>String(e.seq)===t.value)?t.value:e[0]?String(e[0].seq):null});to=Q({source:this.entries,computation:(e,t)=>{let n=e.at(-1),r=t?.value&&e.some(e=>String(e.seq)===t.value),i=t&&t.value===String(t.source.at(-1)?.seq);return r&&!i?t.value:n?String(n.seq):null}});injector=x(bs);generateLive=hv(`generateLive`);generateImported=hv(`generateImported`);importButton=hv(`importButton`);testHeading=hv(`testHeading`);testFrom=`live`;busy=T(!1);message=T(``);error=T(``);test=T(null);imported=T(null);importedSeq=T(null);canExport=X(()=>!!this.rpc()&&!!this.pageId()&&!!this.storeId()&&this.entries().length>0);importedEntry=X(()=>{let e=this.imported(),t=this.importedSeq();return e?.entries.find(e=>e.seq===t)??null});range(){let e=Number(this.from()),t=Number(this.to()),[n,r]=e<=t?[e,t]:[t,e];return{storeId:this.storeId()??void 0,...Number.isFinite(n)?{from:n}:{},...Number.isFinite(r)?{to:r}:{}}}async ask(e){try{return await oT(this.rpc(),`request-ngrx-history`,e)??{error:`The devtools server is not connected.`}}catch{return{error:`The devtools server did not answer. Try again.`}}}importedLoader=e=>{let t=this.imported()?.id;return t?this.ask({session:t,request:{type:`entry`,seq:e}}):Promise.resolve({error:`No session is imported.`})};focusAfterRender(e){cd(()=>e()?.nativeElement.focus(),{injector:this.injector})}async exportLive(){if(this.busy()||!this.canExport())return;this.busy.set(!0),this.error.set(``),this.message.set(``);let e=await this.ask({pageId:this.pageId(),request:{type:`export`,...this.range()}});if(this.busy.set(!1),!e.ok||!e.session){this.error.set(e.error??`Nothing was exported.`);return}Iq(JSON.stringify(e.session,null,2),`ngrx-session-${this.storeId()}.json`,`application/json`),this.message.set(e.message??`Exported the session.`)}async generate(e){if(this.busy()||!e&&!this.canExport())return;this.busy.set(!0),this.error.set(``),this.message.set(``);let t=await this.ask(e?{session:e,request:{type:`test`}}:{pageId:this.pageId(),request:{type:`test`,...this.range()}});if(this.busy.set(!1),!t.ok||!t.test){this.error.set(t.error??`No test was generated.`);return}this.test.set(t.test),this.testFrom=e?`imported`:`live`,this.message.set(`Generated ${t.test.file}.`),this.focusAfterRender(()=>this.testHeading())}pickFile(e){this.busy()||e.click()}async read(e){let t=e.files?.[0];if(e.value=``,!t)return;if(this.error.set(``),this.message.set(``),t.size>4e6){this.error.set(`The file is larger than 4 MB, so it was not imported.`);return}this.busy.set(!0);let n;try{n=await oT(this.rpc(),`import-ngrx-session`,{session:await t.text()})}catch{n={error:`The devtools server did not answer. Try again.`}}if(this.busy.set(!1),!n||!(`id`in n)||!n.ok){this.error.set(`Not imported: ${n?.error??`the devtools server is not connected.`}`);return}this.imported.set(n),this.importedSeq.set(n.entries[0]?.seq??null),this.message.set(`Imported ${n.entries.length} entries from ${t.name}.`)}closeImported(){this.imported.set(null),this.importedSeq.set(null),this.testFrom===`imported`&&(this.testFrom=`live`),this.focusAfterRender(()=>this.importButton())}closeTest(){this.test.set(null);let e=this.testFrom;this.focusAfterRender(()=>{let t=this.generateLive(),n=this.generateImported();return e===`imported`&&n?n:t&&!t.nativeElement.disabled?t:this.importButton()})}async copyTest(){let e=this.test();if(e)try{await navigator.clipboard.writeText(e.code),this.message.set(`Copied the test.`)}catch{this.message.set(`The clipboard is not available here.`)}}downloadTest(){let e=this.test();e&&Iq(e.code,e.file,`text/plain`)}prettyText(e){return YK(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-store-session`]],viewQuery:function(e,t){e&1&&Mg(t.generateLive,vq,5)(t.generateImported,yq,5)(t.importButton,bq,5)(t.testHeading,xq,5),e&2&&Ng(4)},inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],storeId:[1,`storeId`],entries:[1,`entries`]},decls:23,vars:11,consts:[[`generateLive`,``],[`importButton`,``],[`file`,``],[`testHeading`,``],[`generateImported`,``],[`aria-labelledby`,`ngrx-session-heading`,1,`session`],[`id`,`ngrx-session-heading`],[1,`intro`],[1,`range`],[1,`muted`],[1,`actions`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,3,`click`],[`type`,`file`,`accept`,`.json,application/json`,`hidden`,``,`aria-label`,`Session file`,3,`change`],[`role`,`status`,1,`session-message`],[`role`,`alert`,1,`error`],[`role`,`region`,`aria-labelledby`,`ngrx-test-heading`,1,`test`],[`role`,`region`,`aria-labelledby`,`ngrx-imported-heading`,1,`imported`],[1,`field`],[`id`,`ngrx-range-from`,1,`label`],[`labelledBy`,`ngrx-range-from`,3,`valueChange`,`options`,`value`],[`id`,`ngrx-range-to`,1,`label`],[`labelledBy`,`ngrx-range-to`,3,`valueChange`,`options`,`value`],[1,`head`],[`id`,`ngrx-test-heading`,`tabindex`,`-1`],[1,`notes`],[`tabindex`,`0`,1,`code`],[`id`,`ngrx-imported-heading`],[1,`pill`],[`aria-label`,`Imported entries`,1,`entries`],[`idPrefix`,`ngrx-imported`,3,`seq`,`loadDiff`,`loader`],[`type`,`button`,1,`entry`,3,`click`],[1,`seq`],[1,`type`],[`tab-action`,``],[1,`label`],[1,`code`]],template:function(e,t){if(e&1){let e=B();F(0,`section`,5)(1,`h4`,6),K(2,`Session`),I(),F(3,`p`,7),K(4),I(),A(5,Cq,9,4,`div`,8)(6,wq,2,0,`p`,9),F(7,`div`,10)(8,`button`,11),H(`click`,function(){return t.exportLive()}),K(9,` Export session `),I(),F(10,`button`,11,0),H(`click`,function(){return t.generate(null)}),K(12,` Generate test `),I(),F(13,`button`,12,1),H(`click`,function(){S(e);let n=Pg(17);return C(t.pickFile(n))}),K(15,` Import session `),I(),F(16,`input`,13,2),H(`change`,function(){S(e);let n=Pg(17);return C(t.read(n))}),I()(),F(18,`p`,14),K(19),I(),A(20,Tq,2,1,`p`,15),A(21,Oq,15,4,`div`,16),A(22,Fq,17,5,`div`,17),I()}if(e&2){let e,n;D(4),J(` Export a range of this store's log with the state it produced, import a session file to read it here, or turn the range into a `,t.framework,` spec. Values are redacted like the rest of the page. `),D(),j(t.options().length?5:6),D(3),P(`disabled`,!t.canExport()),k(`aria-disabled`,t.busy()?`true`:null),D(2),P(`disabled`,!t.canExport()),k(`aria-disabled`,t.busy()?`true`:null),D(3),k(`aria-disabled`,t.busy()?`true`:null),D(6),q(t.message()),D(),j(t.error()?20:-1),D(),j((e=t.test())?21:-1,e),D(),j((n=t.imported())?22:-1,n)}},dependencies:[wD,_q],styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.session[_ngcontent-%COMP%] {
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid var(--%NS%border);
-}
-
-h4[_ngcontent-%COMP%], 
-h5[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-}
-
-h5[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%], 
-.muted[_ngcontent-%COMP%] {
-  margin: 6px 0 10px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.range[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-}
-
-.field[_ngcontent-%COMP%] {
-  display: grid;
-  flex: 1 1 160px;
-  gap: 4px;
-  min-width: 0;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 10px;
-}
-
-.head[_ngcontent-%COMP%]   .actions[_ngcontent-%COMP%] {
-  margin-top: 0;
-}
-
-.btn[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.btn[_ngcontent-%COMP%]:disabled, 
-.btn[aria-disabled=true][_ngcontent-%COMP%] {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-h5[tabindex="-1"][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.session-message[_ngcontent-%COMP%] {
-  min-height: 1em;
-  margin: 8px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.error[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  color: var(--%NS%danger-text);
-  font-size: 12px;
-}
-
-.test[_ngcontent-%COMP%], 
-.imported[_ngcontent-%COMP%] {
-  margin-top: 12px;
-  padding: 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.notes[_ngcontent-%COMP%] {
-  margin: 8px 0;
-  padding-left: 18px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.code[_ngcontent-%COMP%] {
-  max-height: 360px;
-  margin: 8px 0 0;
-  padding: 10px 12px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  white-space: pre;
-}
-
-.code[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.pill[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  padding: 0 8px;
-  border-radius: 999px;
-  font-size: 11px;
-}
-
-.entries[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  max-height: 240px;
-  margin: 8px 0 0;
-  padding: 0;
-  overflow: auto;
-  list-style: none;
-}
-
-.entry[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-  min-height: var(--%NS%control-h);
-  padding: 4px 8px;
-  border: 1px solid transparent;
-  border-radius: var(--%NS%radius-sm);
-  background: none;
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.entry[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.entry[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-}
-
-.entry[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.seq[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.type[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .btn[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},Rq=[`box`],zq=(e,t)=>t.path;function Bq(e,t){if(e&1&&(F(0,`span`,4),K(1),I()),e&2){let e=W();D(),Y(``,e.matches(),` `,e.matches()===1?`match`:`matches`)}}function Vq(e,t){if(e&1&&(F(0,`p`,6),K(1),I()),e&2){let e=W();D(),q(e.query()?`No key or value matches.`:`The state is empty.`)}}function Hq(e,t){if(e&1){let e=B();F(0,`button`,15),H(`click`,function(){S(e);let t=W().$implicit;return C(W().toggle(t))}),F(1,`span`,16),K(2),I(),F(3,`span`,17),K(4),I(),F(5,`span`,18),K(6),I()()}if(e&2){let e=W().$implicit;k(`aria-expanded`,e.open)(`aria-label`,e.key+` `+e.text),D(2),q(e.open?`▾`:`▸`),D(2),q(e.key),D(2),q(e.text)}}function Uq(e,t){if(e&1&&(F(0,`span`,11)(1,`span`,17),K(2),F(3,`span`,19),K(4,`:`),I()(),F(5,`code`,20),K(6),I()()),e&2){let e=W().$implicit;D(2),q(e.key),D(4),q(e.text)}}function Wq(e,t){e&1&&(F(0,`span`,12),K(1,`changed`),I())}function Gq(e,t){e&1&&(F(0,`span`,13),K(1,`holds a change`),I())}function Kq(e,t){if(e&1){let e=B();F(0,`li`,9),A(1,Hq,7,5,`button`,10)(2,Uq,7,2,`span`,11),A(3,Wq,2,0,`span`,12)(4,Gq,2,0,`span`,13),F(5,`button`,14),H(`click`,function(){let t=S(e).$implicit;return C(W().copied.emit(t.path))}),K(6,` Copy path `),I()()}if(e&2){let e=t.$implicit;t_(`padding-left`,e.depth*14,`px`),G(`changed`,e.changed),D(),j(e.node?1:2),D(2),j(e.changed?3:e.holdsChange&&!e.open?4:-1),D(2),P(`title`,`Copy path `+e.path),k(`aria-label`,`Copy path `+e.path)}}function qq(e,t){if(e&1&&(F(0,`p`,6),K(1),I()),e&2){let e=W();D(),J(` `,e.view().rows.length-e.shown().length,` more rows not shown. Search to narrow the tree. `)}}var Jq=`@type`;function Yq(e){return Array.isArray(e)?!0:!!e&&typeof e==`object`&&!Object.hasOwn(e,Jq)}function Xq(e,t){if(typeof t==`number`)return`${e}[${t}]`;let n=/^[A-Za-z_$][\w$]*$/.test(t)?t:JSON.stringify(t);return e?n.startsWith(`"`)?`${e}[${n}]`:`${e}.${n}`:n}function Zq(e,t){return t.startsWith(`${e}.`)||t.startsWith(`${e}[`)}function Qq(e){return Array.isArray(e)?e.map((e,t)=>[t,e]):Object.entries(e)}function $q(e){return Array.isArray(e)?`[${e.length}]`:`{${Object.keys(e).length}}`}function eJ(e,t={}){let n=t.query?.trim().toLowerCase()??``,r=t.changed??[],i=[],a=0,o=(e,s,c,l)=>{let u=Yq(e),d=r.some(e=>e===s||Zq(e,s)),f=r.some(e=>Zq(s,e)),p=u?$q(e):XK(e,160),m=!!n&&(c.toLowerCase().includes(n)||!u&&p.toLowerCase().includes(n));m&&a++;let ee=u?n?!0:!t.closed?.has(s)&&(l<1||f||!!t.opened?.has(s)):!1,h=i.length;if(i.push({path:s,key:c,depth:l,node:u,open:ee,text:p,changed:d,holdsChange:f}),ee&&u)for(let[t,n]of Qq(e))o(n,Xq(s,t),String(t),l+1);n&&!m&&i.length===h+1&&(i.length=h)};if(Yq(e))for(let[t,n]of Qq(e))o(n,Xq(``,t),String(t),0);else e!==void 0&&o(e,`(root)`,`(root)`,0);return{rows:i,matches:a}}var tJ=class e{value=$(void 0);changed=$([]);label=$(`State`);copied=cv();query=T(``);opened=Q({source:()=>this.label(),computation:()=>new Set});closed=Q({source:()=>this.label(),computation:()=>new Set});box=hv(`box`);view=X(()=>eJ(this.value(),{query:this.query(),changed:this.changed(),opened:this.opened(),closed:this.closed()}));shown=X(()=>this.view().rows.slice(0,400));matches=X(()=>this.view().matches);toggle(e){let t=new Set(this.opened()),n=new Set(this.closed());e.open?(t.delete(e.path),n.add(e.path)):(n.delete(e.path),t.add(e.path)),this.opened.set(t),this.closed.set(n)}focus(){this.box()?.nativeElement.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-state-tree`]],viewQuery:function(e,t){e&1&&Mg(t.box,Rq,5),e&2&&Ng()},inputs:{value:[1,`value`],changed:[1,`changed`],label:[1,`label`]},outputs:{copied:`copied`},decls:11,vars:7,consts:[[`box`,``],[3,`value`],[1,`tree-tools`],[`placeholder`,`Filter by key or value`,1,`tree-search`,3,`valueChange`,`label`,`value`],[1,`count`],[`tabindex`,`-1`,`role`,`group`,1,`tree`],[1,`muted`],[1,`rows`],[1,`row`,3,`changed`,`padding-left`],[1,`row`],[`type`,`button`,1,`toggle`],[1,`leaf`],[1,`mark`],[1,`mark`,`soft`],[`type`,`button`,1,`copy-path`,3,`click`,`title`],[`type`,`button`,1,`toggle`,3,`click`],[`aria-hidden`,`true`,1,`caret`],[1,`key`],[`aria-hidden`,`true`,1,`summary`],[1,`colon`],[1,`value`]],template:function(e,t){if(e&1){let e=B();L(0,`app-redaction-count`,1),F(1,`div`,2)(2,`app-search-field`,3),M_(`valueChange`,function(n){return S(e),j_(t.query,n)||(t.query=n),C(n)}),I(),A(3,Bq,2,2,`span`,4),I(),F(4,`div`,5,0),A(6,Vq,2,1,`p`,6),F(7,`ul`,7),M(8,Kq,7,8,`li`,8,zq),I(),A(10,qq,2,1,`p`,6),I()}e&2&&(P(`value`,t.value()),D(2),P(`label`,`Filter `+t.label()),A_(`value`,t.query),D(),j(t.query()?3:-1),D(),k(`aria-label`,t.label()),D(2),j(t.view().rows.length?-1:6),D(2),N(t.shown()),D(2),j(t.view().rows.length>t.shown().length?10:-1))},dependencies:[$N,aP],styles:[`[_nghost-%COMP%] {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-}
-
-.tree-tools[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tree-search[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.tree[_ngcontent-%COMP%] {
-  max-height: 360px;
-  overflow: auto;
-  padding: 6px 8px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  line-height: 1.55;
-}
-
-.tree[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.rows[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  border-radius: 4px;
-}
-
-.row.changed[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-}
-
-.toggle[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 4px;
-  min-width: 0;
-  padding: 1px 2px;
-  border: 0;
-  background: none;
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.toggle[_ngcontent-%COMP%]:focus-visible, 
-.copy-path[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.caret[_ngcontent-%COMP%] {
-  width: 10px;
-  color: var(--%NS%text-2);
-}
-
-.leaf[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 4px;
-  min-width: 0;
-  padding: 1px 2px 1px 16px;
-}
-
-.key[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.colon[_ngcontent-%COMP%], 
-.summary[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.value[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  font-family: inherit;
-  color: var(--%NS%text);
-}
-
-.mark[_ngcontent-%COMP%] {
-  flex: none;
-  padding: 0 5px;
-  border-radius: 4px;
-  font-family: var(--%NS%font-sans, inherit);
-  font-size: 10.5px;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.mark.soft[_ngcontent-%COMP%] {
-  background: none;
-  color: var(--%NS%text-2);
-}
-
-.copy-path[_ngcontent-%COMP%] {
-  flex: none;
-  margin-left: auto;
-  padding: 0 6px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-sans, inherit);
-  font-size: 11px;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.row[_ngcontent-%COMP%]:hover   .copy-path[_ngcontent-%COMP%], 
-.copy-path[_ngcontent-%COMP%]:focus-visible {
-  opacity: 1;
-  border-color: var(--%NS%control-border);
-}
-
-@media (hover: none) {
-  .copy-path[_ngcontent-%COMP%] {
-    opacity: 1;
-  }
-}
-.muted[_ngcontent-%COMP%] {
-  margin: 4px 2px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-sans, inherit);
-}`]})},nJ=`redux:`;function rJ(e){let t=e;return!!t&&typeof t.id==`string`&&typeof t.name==`string`&&typeof t.library==`string`}function iJ(e){let t=e?.pages;return!t||typeof t!=`object`||Array.isArray(t)?[]:Object.values(t).filter(e=>{let t=e;return!!t&&typeof t.pageId==`string`&&Array.isArray(t.stores)&&t.stores.every(rJ)&&Array.isArray(t.log)}).sort((e,t)=>t.reportedAt-e.reportedAt)}function aJ(e){return(e?.stores??[]).map(e=>({id:nJ+e.id,label:e.name,kind:`redux`,scope:e.library,redux:e}))}function oJ(e,t){if(!e||!t?.startsWith(`redux:`))return[];let n=t.slice(6);return e.log.filter(e=>e.storeId===n).map(e=>({seq:e.seq,source:`redux`,storeId:t,type:e.type,...e.action===void 0?{}:{action:e.action},timestamp:e.timestamp,diff:e.diff,restorable:!1,...e.diffTruncated?{diffTruncated:e.diffTruncated}:{}}))}var sJ=`pangular-view`,cJ=class e{values=new Map;view=()=>`panel`;useView(e){this.view=e}key(e){return`${sJ}:${Z(this.view)}:${tT()??``}:${e}`}read(e){let t=this.key(e);try{let e=sessionStorage.getItem(t);return e===null?void 0:JSON.parse(e)}catch{return this.values.get(t)}}write(e,t){let n=this.key(e);try{t==null?sessionStorage.removeItem(n):sessionStorage.setItem(n,JSON.stringify(t))}catch{this.values.set(n,t)}}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})};function lJ(e,t,n=`selection`){let r=x(cJ),i=`${e}:${n}`,a=r.read(i);a!=null&&t.set(a),E(()=>r.write(i,t()))}function uJ(e,t,n=120,r){let i=n,a=0,o=!1,s=[`wheel`,`touchstart`,`pointerdown`,`keydown`],c=()=>{if(!o){o=!0,cancelAnimationFrame(a);for(let t of s)e.removeEventListener(t,c);r?.()}};for(let t of s)e.addEventListener(t,c,{passive:!0});let l=()=>{o||(e.scrollTop=t,Math.abs(e.scrollTop-t)<2||--i<=0?c():a=requestAnimationFrame(l))};return t>0?l():(e.scrollTop=0,c()),c}var dJ=[`eventDetailHeading`],fJ=[`cancelButton`],pJ=[`restoreButton`],mJ=[`resetButton`],hJ=[`resetCancel`],gJ=[`filterInput`],_J=[`latestButton`],vJ=[`logList`],yJ=[`eventsList`],bJ=e=>({kind:`ngrx`,storeId:e}),xJ=e=>({selected:e,headingLevel:5,idPrefix:`ngrx-change`}),SJ=e=>({selected:e,headingLevel:3,idPrefix:`ngrx-event`}),CJ=e=>({selected:e}),wJ=(e,t)=>t.id,TJ=(e,t)=>t.entry.seq,EJ=(e,t)=>t.key,DJ=(e,t)=>t.name,OJ=(e,t)=>t.idsKey,kJ=(e,t)=>t.type,AJ=(e,t)=>t.path,jJ=(e,t)=>t.kind,MJ=(e,t)=>t.name+t.file+t.line;function NJ(e,t){if(e&1){let e=B();F(0,`span`,31),K(1,`Page`),I(),F(2,`app-select`,32),H(`valueChange`,function(t){return S(e),C(W().selectPage(t))}),I()}if(e&2){let e=W();D(2),P(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function PJ(e,t){if(e&1&&(F(0,`span`,20),K(1),I()),e&2){let e=W();D(),q(e.liveStores().length)}}function FJ(e,t){if(e&1){let e=B();F(0,`app-state`,33),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Could not load the live store state. `),F(2,`p`,34),K(3,`Check that the dev server with Pangular Inspector is still running.`),I()()}}function IJ(e,t){e&1&&(F(0,`app-state`,22),K(1,`Loading the live stores…`),I())}function LJ(e,t){e&1&&(F(0,`app-state`,23),K(1,` No page is reporting store state yet. `),F(2,`p`,34),K(3,` Open the app in a browser. Stores show up here as soon as the page creates them. `),I()())}function RJ(e,t){e&1&&(F(0,`p`,37),K(1,`No signal store instance on this page yet.`),I(),F(2,`p`,38),K(3,` A `),F(4,`code`),K(5,`signalStore`),I(),K(6,` is created the first time something injects it. Navigate to a page that uses the store and it appears here. `),I())}function zJ(e,t){e&1&&(F(0,`p`,37),K(1,`The @ngrx/store Store was not found on this page.`),I(),F(2,`p`,38),K(3,` Check that `),F(4,`code`),K(5,`provideStore()`),I(),K(6,` or `),F(7,`code`),K(8,`StoreModule.forRoot()`),I(),K(9,` is part of the providers of the running app. `),I())}function BJ(e,t){e&1&&(F(0,`p`,37),K(1,`This page has no store.`),I(),F(2,`p`,38),K(3,` Stores from `),F(4,`code`),K(5,`@ngrx/signals`),I(),K(6,` (`),F(7,`code`),K(8,`signalStore`),I(),K(9,`, `),F(10,`code`),K(11,`signalState`),I(),K(12,`) and `),F(13,`code`),K(14,`@ngrx/store`),I(),K(15,` are listed here once the app creates them. NGXS, Elf and MiniRx stores show up through their Redux DevTools integration when the app loads `),F(16,`code`),K(17,`@pangular-inspector/devtools/store-hook`),I(),K(18,` first. `),I())}function VJ(e,t){if(e&1&&(F(0,`app-angular-unavailable`,35),K(1,` The overlay finds stores through the injectors, so stores it can't reach from a component are not listed. `),I(),F(2,`div`,36),A(3,RJ,7,0)(4,zJ,10,0)(5,BJ,19,0),I()),e&2){let e=W();P(`page`,e.angularPage()),D(3),j(e.usesSignals()?3:e.usesClassic()?4:5)}}function HJ(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,42),H(`click`,function(){let t=S(e).$implicit;return C(W(2).selectStore(t.id))}),F(2,`span`,43),L(3,`span`,44),F(4,`span`,45),K(5),I()(),F(6,`span`,46),K(7),I()()()}if(e&2){let e=t.$implicit,n=W(2);D(),G(`selected`,e.id===n.store()?.id),k(`aria-pressed`,e.id===n.store()?.id),D(2),t_(`background`,n.kindColor(e.kind)),D(2),q(e.label),D(2),D_(` `,n.kindLabel(e.kind),` · `,e.scope,` · `,n.countText(e),` `)}}function UJ(e,t){e&1&&(F(0,`li`,40),K(1,`No stores match this filter.`),I())}function WJ(e,t){e&1&&(F(0,`span`,49),K(1),I()),e&2&&(D(),q(t.library))}function GJ(e,t){if(e&1&&(F(0,`span`,49),K(1),I()),e&2){let e=W();D(),J(`scope: `,e.scope)}}function KJ(e,t){e&1&&L(0,`app-source-link`,50),e&2&&P(`file`,t)}function qJ(e,t){if(e&1&&(F(0,`span`,49),K(1),I()),e&2){let e=W();D(),q(e.classic.devtools?`Store DevTools on`:`Store DevTools off`)}}function JJ(e,t){e&1&&(F(0,`span`,49),K(1,`withDevtools: watched only`),I())}function YJ(e,t){e&1&&(F(0,`p`,51),K(1,` This store uses `),F(2,`code`),K(3,`withDevtools()`),I(),K(4,`, so the inspector does not wrap its methods or signals. Changes are logged as `),F(5,`code`),K(6,`patchState`),I(),K(7,` entries, and method calls are not counted. `),I())}function XJ(e,t){if(e&1&&(F(0,`code`),K(1),I(),K(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;D(),q(e),D(),J(``,n===r-1?``:`, `,` `)}}function ZJ(e,t){if(e&1&&(F(0,`p`,52),K(1,` Referenced by `),M(2,XJ,3,2,null,null,eg),I()),e&2){let e=W();D(2),N(e.signal.references)}}function QJ(e,t){if(e&1&&(F(0,`p`,76),K(1),I()),e&2){let e=W(4);D(),q(e.restoreOff)}}function $J(e,t){if(e&1){let e=B();F(0,`div`,53)(1,`p`)(2,`strong`),K(3,`Viewing a past state.`),I(),K(4,` New actions are logged but do not change the state until you go back to the latest state. `),I(),F(5,`button`,75,3),H(`click`,function(){return S(e),C(W(3).backToLatest())}),K(7,` Back to latest `),I(),A(8,QJ,2,1,`p`,76),I()}if(e&2){let e=W(3);D(5),P(`disabled`,e.busy()||!e.canRestore()),k(`aria-describedby`,e.canRestore()?null:`store-latest-off`),D(3),j(e.canRestore()?-1:8)}}function eY(e,t){if(e&1&&L(0,`app-store-global`,59),e&2){let e=W(),t=W(2);P(`rpc`,t.rpc())(`pageId`,t.page()?.pageId)(`target`,K_(4,bJ,e.id))(`label`,e.label+` state`)}}function tY(e,t){if(e&1&&(F(0,`dt`),K(1),I(),F(2,`dd`)(3,`code`,84),K(4),I()()),e&2){let e=t.$implicit;D(),q(e.key),D(2),P(`title`,e.full),D(),q(e.value)}}function nY(e,t){if(e&1&&(F(0,`dl`,79),M(1,tY,5,3,null,null,EJ),I()),e&2){let e=W(4);D(),N(e.computedEntries())}}function rY(e,t){e&1&&(F(0,`p`,80),K(1,`No computed signals.`),I())}function iY(e,t){e&1&&(F(0,`span`,86),K(1,`signalMethod`),I())}function aY(e,t){e&1&&(F(0,`span`,86),K(1,`rxMethod`),I())}function oY(e,t){if(e&1&&(F(0,`li`,85),K(1),A(2,iY,2,0,`span`,86)(3,aY,2,0,`span`,86),F(4,`span`,87),K(5),I()()),e&2){let e=t.$implicit,n=W(5);D(),J(` `,e.name,` `),D(),j(e.signalMethod?2:e.rx?3:-1),D(3),D_(``,e.calls,` `,e.calls===1?`call`:`calls`,``,n.methodDuration(e))}}function sY(e,t){if(e&1&&(F(0,`ul`,82),M(1,oY,6,5,`li`,85,DJ),I()),e&2){let e=W();D(),N(e.methods)}}function cY(e,t){e&1&&(F(0,`p`,80),K(1,`No methods.`),I())}function lY(e,t){if(e&1&&(F(0,`li`,85),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function uY(e,t){if(e&1&&(F(0,`li`,94),K(1),I()),e&2){let e=W().$implicit;P(`title`,W(5).entityOverflowTitle(e.ids,e.count)),D(),J(` +`,e.count-30,` more `)}}function dY(e,t){if(e&1&&(F(0,`code`,84),K(1),I()),e&2){let e=W(2).$implicit,t=W(5);P(`title`,t.prettyText(e.selected)),D(),q(t.shortText(e.selected))}}function fY(e,t){e&1&&(F(0,`span`,80),K(1,`None selected`),I())}function pY(e,t){if(e&1&&(F(0,`dl`,79)(1,`dt`),K(2,`Selected`),I(),F(3,`dd`),A(4,dY,2,2,`code`,84)(5,fY,2,0,`span`,80),I()()),e&2){let e=W().$implicit;D(4),j(e.selected===void 0?5:4)}}function mY(e,t){if(e&1&&(F(0,`div`,90)(1,`div`,91)(2,`span`,85),K(3),I(),F(4,`span`,92),K(5),I()(),F(6,`ul`,93),M(7,lY,2,1,`li`,85,eg),A(9,uY,2,2,`li`,94),I(),A(10,pY,6,1,`dl`,79),I()),e&2){let e=t.$implicit,n=W(5);D(3),q(e.collection??`entities`),D(2),Y(``,e.count,` `,e.count===1?`entity`:`entities`),D(),k(`aria-label`,(e.collection??`entities`)+` ids`),D(),N(n.entityIds(e.ids)),D(2),j(e.count>30?9:-1),D(),j(e.selectedId===void 0?-1:10)}}function hY(e,t){if(e&1&&(F(0,`section`,83)(1,`h4`,88),K(2,`Entities`),I(),F(3,`div`,89),M(4,mY,11,6,`div`,90,OJ),I()()),e&2){let e=W();D(4),N(e.entities)}}function gY(e,t){if(e&1&&(F(0,`section`,77)(1,`h4`,78),K(2,`Computed`),I(),A(3,nY,3,0,`dl`,79)(4,rY,2,0,`p`,80),F(5,`h4`,81),K(6,`Methods`),I(),A(7,sY,3,0,`ul`,82)(8,cY,2,0,`p`,80),I(),A(9,hY,6,0,`section`,83)),e&2){let e=t,n=W(3);D(3),j(n.computedEntries().length?3:4),D(4),j(e.methods.length?7:8),D(2),j(e.entities?.length?9:-1)}}function _Y(e,t){if(e&1&&K(0),e&2){let e=t;Y(` `,e,` skipped `,e===1?`action is`:`actions are`,` left out of the state. `)}}function vY(e,t){if(e&1){let e=B();F(0,`div`,99),H(`keydown.escape`,function(t){return S(e),C(W(4).cancelReset(t))}),F(1,`p`,100),K(2,` Reset puts the store back on its initial state and empties the Store DevTools history. Entries logged so far can no longer be restored. `),I(),F(3,`div`,97)(4,`button`,75),H(`click`,function(){return S(e),C(W(4).devtoolsOp({op:`reset`}))}),K(5,` Reset history `),I(),F(6,`button`,101,4),H(`click`,function(){return S(e),C(W(4).cancelReset())}),K(8,` Cancel `),I()()()}if(e&2){let e=W(4);D(4),P(`disabled`,e.busy())}}function yY(e,t){if(e&1){let e=B();F(0,`div`,97)(1,`button`,102),H(`click`,function(){S(e);let t=W(2);return C(W(2).devtoolsOp({op:`pause`,paused:!t.classic.recordingPaused}))}),K(2),I(),F(3,`button`,102),H(`click`,function(){return S(e),C(W(4).devtoolsOp({op:`jump`,index:0}))}),K(4,` Jump to committed state `),I(),F(5,`button`,102),H(`click`,function(){return S(e),C(W(4).devtoolsOp({op:`commit`}))}),K(6,` Commit `),I(),F(7,`button`,102,5),H(`click`,function(){return S(e),C(W(4).askReset())}),K(9,` Reset… `),I()()}if(e&2){let e=W(2),t=W(2);D(),P(`disabled`,t.busy()||!t.canRestore()),k(`aria-describedby`,t.canRestore()?null:`store-history-off`),D(),J(` `,e.classic.recordingPaused?`Resume recording`:`Pause recording`,` `),D(),P(`disabled`,t.busy()||!t.canRestore()),k(`aria-describedby`,t.canRestore()?null:`store-history-off`),D(2),P(`disabled`,t.busy()||!t.canRestore()),k(`aria-describedby`,t.canRestore()?null:`store-history-off`),D(2),P(`disabled`,t.busy()||!t.canRestore()),k(`aria-describedby`,t.canRestore()?null:`store-history-off`)}}function bY(e,t){if(e&1&&(F(0,`p`,98),K(1),I()),e&2){let e=W(4);D(),q(e.restoreOff)}}function xY(e,t){if(e&1&&(F(0,`section`,62)(1,`h4`,95),K(2,`Store DevTools history`),I(),F(3,`p`,51),K(4),A(5,_Y,1,2),I(),A(6,vY,9,1,`div`,96)(7,yY,10,9,`div`,97),A(8,bY,2,1,`p`,98),I()),e&2){let e,t=W(),n=W(2);D(4),J(` `,t.classic.recordingPaused?`Recording is paused: new actions change the state but are not recorded.`:`Recording new actions.`,` `),D(),j((e=t.classic.skipped?.length)?5:-1,e),D(),j(n.confirmReset()?6:7),D(2),j(n.canRestore()?-1:8)}}function SY(e,t){if(e&1&&(F(0,`span`,107),K(1),I()),e&2){let e=t;P(`title`,`Caused by `+W(4).kindLabel(`event`)+`: `+e.type),D(),q(e.type)}}function CY(e,t){e&1&&(F(0,`span`,86),K(1,`skipped`),I())}function wY(e,t){if(e&1&&(F(0,`span`,86),K(1),I()),e&2){W();let e=I_(0);D(),q(e.origin)}}function TY(e,t){if(e&1&&K(0),e&2){W();let e=I_(0);J(` · `,W(3).formatDuration(e.durationMs),` `)}}function EY(e,t){if(e&1){let e=B();P_(0),F(1,`li`)(2,`button`,103),H(`click`,function(){S(e);let t=I_(0);return C(W(3).selectChange(t.seq))}),F(3,`span`,104),K(4),I(),F(5,`span`,105)(6,`span`,106),K(7),I(),A(8,SY,2,2,`span`,107),I(),F(9,`span`,108),A(10,CY,2,0,`span`,86),A(11,wY,2,1,`span`,86),K(12),A(13,TY,1,1),I()()()}if(e&2){let e,n=t.$implicit,r=W(3),i=F_(n.entry);D(),k(`data-vindex`,n.index)(`aria-setsize`,r.logWindow.enabled()?r.storeLog().length:null)(`aria-posinset`,r.logWindow.enabled()?n.index+1:null),D(),G(`selected`,i.seq===r.selectedChangeSeq()),k(`aria-pressed`,i.seq===r.selectedChangeSeq())(`aria-controls`,i.seq===r.selectedChangeSeq()?`ngrx-change-detail`:null),D(2),J(`#`,i.seq),D(2),P(`title`,i.type),D(),q(i.type),D(),j((e=i.causedByEvent)?8:-1,e),D(2),j(r.isSkipped(i.seq)?10:-1),D(),j(i.origin?11:-1),D(),Y(` `,r.changesLabel(i),` · `,r.formatTime(i.timestamp),` `),D(),j(i.durationMs===void 0?-1:13)}}function DY(e,t){e&1&&K(0,` No entries match this filter. `)}function OY(e,t){e&1&&K(0,` No actions dispatched since the page connected. `)}function kY(e,t){e&1&&K(0,` No state changes yet. Method calls and patchState writes that change the state are recorded here. `)}function AY(e,t){if(e&1&&(F(0,`li`,40),A(1,DY,1,0)(2,OY,1,0)(3,kY,1,0),I()),e&2){let e=W(),t=W(2);D(),j(t.filter()?1:e.classic||e.redux?2:3)}}function jY(e,t){if(e&1&&(F(0,`div`,71),hg(1,109),I()),e&2){W(3);let e=Pg(23);D(),P(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,K_(2,xJ,t))}}function MY(e,t){e&1&&(F(0,`span`,115),K(1,`Possible effect loop`),I())}function NY(e,t){if(e&1&&(F(0,`tr`)(1,`th`,114),K(2),A(3,MY,2,0,`span`,115),I(),F(4,`td`,116),K(5),I(),F(6,`td`,116),K(7),I(),F(8,`td`,116),K(9),I(),F(10,`td`,116),K(11),I()()),e&2){let e=t.$implicit,n=W(4);D(2),J(` `,e.type,` `),D(),j(e.loop?3:-1),D(2),q(e.count),D(2),J(` `,e.avgMs===void 0?`n/a`:n.formatDuration(e.avgMs),` `),D(2),J(` `,e.maxMs===void 0?`n/a`:n.formatDuration(e.maxMs),` `),D(2),q(e.burst)}}function PY(e,t){if(e&1&&(F(0,`p`,51),K(1),I()),e&2){let e=W(4);D(),J(` A possible effect loop is an action an NgRx effect dispatched `,e.loopBurst,` or more times within one second. Check the effect that dispatches it for a missing filter or a dispatch of its own trigger. `)}}function FY(e,t){if(e&1&&(F(0,`div`,72)(1,`h4`,110),K(2,`Action frequency`),I(),F(3,`p`,51),K(4),I(),F(5,`div`,111)(6,`table`)(7,`thead`)(8,`tr`)(9,`th`,112),K(10),I(),F(11,`th`,113),K(12,`Count`),I(),F(13,`th`,113),K(14,`Avg`),I(),F(15,`th`,113),K(16,`Longest`),I(),F(17,`th`,113),K(18,`Peak per second`),I()()(),F(19,`tbody`),M(20,NY,12,6,`tr`,null,kJ),I()()(),A(22,PY,2,1,`p`,51),I()),e&2){let e=W(),t=W(2);D(4),J(` How often each `,e.classic?`action`:`change`,` ran since the page loaded, including entries the log no longer keeps. `),D(6),q(e.classic?`Action`:`Method or write`),D(10),N(t.storeStats()),D(2),j(t.hasLoop()?22:-1)}}function IY(e,t){if(e&1&&L(0,`app-store-session`,73),e&2){let e=W(),t=W(2);P(`rpc`,t.rpc())(`pageId`,t.page()?.pageId??null)(`storeId`,e.id)(`entries`,t.sessionEntries())}}function LY(e,t){if(e&1&&L(0,`option`,121),e&2){let e=t.$implicit;P(`value`,e)}}function RY(e,t){if(e&1&&(F(0,`p`,126),K(1),I()),e&2){let e=W(4);D(),q(e.restoreOff)}}function zY(e,t){if(e&1){let e=B();F(0,`section`,74)(1,`h4`,117),K(2,`Dispatch an action`),I(),F(3,`form`,118),H(`submit`,function(t){return S(e),C(W(3).dispatchAction(t))}),F(4,`label`)(5,`span`),K(6,`Type`),I(),F(7,`input`,119),H(`input`,function(t){return S(e),C(W(3).dispatchType.set(t.target.value))}),I()(),F(8,`datalist`,120),M(9,LY,1,1,`option`,121,eg),I(),F(11,`label`)(12,`span`),K(13,`Payload `),F(14,`span`,122),K(15,`(JSON object, optional)`),I()(),F(16,`textarea`,123),H(`input`,function(t){return S(e),C(W(3).dispatchPayload.set(t.target.value))}),I()(),F(17,`p`,124),K(18),I(),F(19,`div`,97)(20,`button`,125),K(21,` Dispatch `),I()(),A(22,RY,2,1,`p`,126),I()()}if(e&2){let e=W(3);D(7),P(`value`,e.dispatchType()),D(2),N(e.actionTypes()),D(7),P(`value`,e.dispatchPayload()),k(`aria-invalid`,e.payloadError()?`true`:null),D(2),q(e.payloadError()),D(2),P(`disabled`,e.busy()||!e.canRestore()||!e.dispatchRequest()),k(`aria-describedby`,e.canRestore()?null:`store-dispatch-off`),D(2),j(e.canRestore()?-1:22)}}function BY(e,t){if(e&1){let e=B();F(0,`div`,41)(1,`div`,47)(2,`h3`),K(3),I(),F(4,`div`,48)(5,`span`,49),K(6),I(),A(7,WJ,2,1,`span`,49)(8,GJ,2,1,`span`,49),A(9,KJ,1,1,`app-source-link`,50),A(10,qJ,2,1,`span`,49),A(11,JJ,2,0,`span`,49),I(),A(12,YJ,8,0,`p`,51),A(13,ZJ,4,0,`p`,52),I(),A(14,$J,9,3,`div`,53),F(15,`div`,54)(16,`section`,55)(17,`div`,56)(18,`h4`,57),K(19,`State`),I(),F(20,`div`,58),A(21,eY,1,6,`app-store-global`,59),F(22,`button`,60),H(`click`,function(){return S(e),C(W(2).copyState())}),K(23,` Copy `),I()()(),F(24,`app-state-tree`,61),H(`copied`,function(t){return S(e),C(W(2).copyPath(t))}),I()(),A(25,gY,10,3),I(),A(26,xY,9,4,`section`,62),F(27,`section`,63)(28,`h4`,64),K(29),F(30,`span`,20),K(31),I()(),F(32,`div`,65),L(33,`app-live-controls`,66),I(),L(34,`app-limit-note`,67),F(35,`div`,68)(36,`ul`,69,2),M(38,EY,14,17,`li`,null,TJ,!1,AY,4,1,`li`,40),I(),F(41,`app-splitter`,70),M_(`sizeChange`,function(t){S(e);let n=W(2);return j_(n.logListSize,t)||(n.logListSize=t),C(t)}),I(),A(42,jY,2,4,`div`,71),I()(),A(43,FY,23,3,`div`,72),A(44,IY,1,4,`app-store-session`,73),A(45,zY,23,7,`section`,74),I()}if(e&2){let e,n,r,i,a=t,o=W(2);D(3),q(a.label),D(3),q(o.kindLabel(a.kind)),D(),j((e=a.redux)?7:8,e),D(2),j((n=a.signal?.declaredIn)?9:-1,n),D(),j(a.classic?10:-1),D(),j(a.signal?.watchOnly?11:-1),D(),j(a.signal?.watchOnly?12:-1),D(),j(a.signal?.references?.length?13:-1),D(),j(a.classic?.paused?14:-1),D(7),j(a.redux?-1:21),D(3),P(`value`,o.stateValue())(`changed`,o.changedPaths())(`label`,a.label+` state`),D(),j((r=a.signal)?25:-1,r),D(),j(a.classic?.devtools?26:-1),D(3),J(` `,a.classic||a.redux?`Action log`:`Change log`,` `),D(2),q(o.storeLog().length),D(2),P(`feed`,o.logFeed)(`what`,a.classic||a.redux?`actions`:`changes`),D(),P(`dropped`,(a.redux?o.reduxPage()?.dropped:o.page()?.dropped)??0)(`max`,o.maxLog()),D(),t_(`--%NS%log-list-size`,o.logListSize(),`px`),D(),t_(`padding-top`,o.logWindow.enabled()?2+o.logWindow.padTop():null,`px`)(`padding-bottom`,o.logWindow.enabled()?2+o.logWindow.padBottom():null,`px`),P(`rovingWindow`,o.logWindow),k(`aria-label`,a.classic||a.redux?`Actions`:`Changes`),D(2),N(o.shownLog()),D(3),P(`min`,200)(`max`,640)(`defaultSize`,300),A_(`size`,o.logListSize),D(),j((i=o.changeEntry())?42:-1,i),D(),j(o.storeStats().length?43:-1),D(),j(a.redux?-1:44),D(),j(a.classic?45:-1)}}function VY(e,t){if(e&1&&(F(0,`div`,24)(1,`ul`,39),M(2,HJ,8,9,`li`,null,wJ,!1,UJ,2,0,`li`,40),I(),A(5,BY,46,38,`div`,41),I()),e&2){let e,t=W();D(2),N(t.filteredStores()),D(3),j((e=t.store())?5:-1,e)}}function HY(e,t){if(e&1&&(F(0,`code`,133),K(1),I()),e&2){W();let e=I_(0),t=W(2);P(`title`,t.prettyText(e.payload)),D(),q(t.shortText(e.payload))}}function UY(e,t){if(e&1){let e=B();P_(0),F(1,`li`)(2,`button`,131),H(`click`,function(){S(e);let t=I_(0);return C(W(2).selectEvent(t.seq))}),L(3,`span`,44),F(4,`span`,132),K(5),I(),A(6,HY,2,2,`code`,133),F(7,`span`,134),K(8),I()()()}if(e&2){let e=t.$implicit,n=W(2),r=F_(e.entry);D(),k(`data-vindex`,e.index)(`aria-setsize`,n.eventWindow.enabled()?n.pageEvents().length:null)(`aria-posinset`,n.eventWindow.enabled()?e.index+1:null),D(),G(`selected`,r.seq===n.selectedEventSeq()),k(`aria-pressed`,r.seq===n.selectedEventSeq())(`aria-controls`,r.seq===n.selectedEventSeq()?`ngrx-event-detail`:null),D(),t_(`background`,n.kindColor(`event`)),D(),P(`title`,r.eventType??r.type),D(),q(r.eventType??r.type),D(),j(r.payload===void 0?-1:6),D(2),q(n.formatTime(r.timestamp))}}function WY(e,t){e&1&&(F(0,`li`,40),K(1,`No events match this filter.`),I())}function GY(e,t){if(e&1&&(F(0,`div`,130,7),hg(2,109),I()),e&2){W(2);let e=Pg(23);D(2),P(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,K_(2,SJ,t))}}function KY(e,t){if(e&1&&(F(0,`section`,26)(1,`div`,18)(2,`h2`,127),K(3,`Events`),I(),F(4,`span`,20),K(5),I()(),F(6,`p`,128),K(7,` Events dispatched through @ngrx/signals/events, across every store on this page. `),I(),F(8,`ul`,129,6),M(10,UY,9,14,`li`,null,TJ,!1,WY,2,0,`li`,40),I(),A(13,GY,3,4,`div`,130),I()),e&2){let e,t=W();D(5),q(t.pageEvents().length),D(3),t_(`padding-top`,t.eventWindow.enabled()?6+t.eventWindow.padTop():null,`px`)(`padding-bottom`,t.eventWindow.enabled()?6+t.eventWindow.padBottom():null,`px`),P(`rovingWindow`,t.eventWindow),D(2),N(t.shownEvents()),D(3),j((e=t.eventEntry())?13:-1,e)}}function qY(e,t){if(e&1&&(F(0,`dt`),K(1,`Origin`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().selected,t=W();D(3),q(t.originText(e.origin))}}function JY(e,t){if(e&1&&(F(0,`dt`),K(1,`Duration`),I(),F(2,`dd`),K(3),I()),e&2){let e=W().selected,t=W();D(3),q(t.formatDuration(e.durationMs))}}function YY(e,t){if(e&1&&(F(0,`app-source-link`,140),K(1),I()),e&2){let e=W().$implicit;P(`file`,e.file)(`line`,e.line),D(),D_(``,e.name?e.name+` `:``,`(`,e.file,`:`,e.line,`)`)}}function XY(e,t){if(e&1&&(F(0,`code`),K(1),I()),e&2){let e=W().$implicit;D(),q(e.name)}}function ZY(e,t){if(e&1&&(F(0,`li`),A(1,YY,2,5,`app-source-link`,140)(2,XY,2,1,`code`),I()),e&2){let e=t.$implicit;D(),j(e.file?1:2)}}function QY(e,t){if(e&1&&(F(0,`dt`),K(1,`Called from`),I(),F(2,`dd`)(3,`ol`,139),M(4,ZY,3,1,`li`,null,$h),I()()),e&2){let e=W().selected,t=W();D(4),N(t.traceFrames(e.trace))}}function $Y(e,t){if(e&1&&hg(0,109),e&2){let e=W().selected;P(`ngTemplateOutlet`,Pg(13))(`ngTemplateOutletContext`,K_(2,CJ,e))}}function eX(e,t){if(e&1&&(F(0,`dt`),K(1,`Action`),I(),F(2,`dd`)(3,`pre`,141),K(4),I()()),e&2){let e=W().selected,t=W(2);D(4),q(t.prettyText(e.action))}}function tX(e,t){if(e&1&&(F(0,`dt`),K(1,`Arguments`),I(),F(2,`dd`)(3,`pre`,141),K(4),I()()),e&2){let e=W().selected,t=W(2);D(4),q(t.prettyText(e.args))}}function nX(e,t){if(e&1&&(F(0,`dt`),K(1,`Payload`),I(),F(2,`dd`)(3,`pre`,141),K(4),I()()),e&2){let e=W().selected,t=W(2);D(4),q(t.prettyText(e.payload))}}function rX(e,t){if(e&1&&(F(0,`pre`,141),K(1),I()),e&2){let e=W(),t=W(3);D(),q(t.prettyText(e.payload))}}function iX(e,t){if(e&1&&(F(0,`dt`),K(1,`Caused by event`),I(),F(2,`dd`)(3,`code`,142),K(4),I(),A(5,rX,2,1,`pre`,141),I()),e&2){let e=t;D(4),q(e.type),D(),j(e.payload===void 0?-1:5)}}function aX(e,t){if(e&1&&(A(0,eX,5,1),A(1,tX,5,1),A(2,nX,5,1),A(3,iX,6,2)),e&2){let e,n=t.selected;j(n.action===void 0?-1:0),D(),j(n.args?.length?1:-1),D(),j(n.source===`event`&&n.payload!==void 0?2:-1),D(),j((e=n.causedByEvent)?3:-1,e)}}function oX(e,t){if(e&1){let e=B();F(0,`button`,146),H(`click`,function(){S(e);let t=W().selected;return C(W(2).copyDiff(t))}),K(1,` Copy `),I()}if(e&2){let e=W().selected;k(`aria-label`,`Copy the state diff of #`+e.seq)}}function sX(e,t){if(e&1&&(F(0,`code`,152),K(1),I()),e&2){let e=W().$implicit,t=W(4);D(),q(t.shortText(e.before))}}function cX(e,t){e&1&&(F(0,`span`,154),K(1,`→`),I(),F(2,`span`,155),K(3,`became`),I())}function lX(e,t){if(e&1&&(F(0,`code`,153),K(1),I()),e&2){let e=W().$implicit,t=W(4);D(),q(t.shortText(e.after))}}function uX(e,t){if(e&1&&(F(0,`li`)(1,`span`,149),K(2),I(),F(3,`code`,150),K(4),I(),F(5,`span`,151),A(6,sX,2,1,`code`,152),A(7,cX,4,0),A(8,lX,2,1,`code`,153),I()()),e&2){let e=t.$implicit,n=W(4);n_(`diff-row `+e.op),D(2),q(n.opLabel(e.op)),D(2),q(e.path),D(2),j(e.op===`add`?-1:6),D(),j(e.op===`change`?7:-1),D(),j(e.op===`remove`?-1:8)}}function dX(e,t){if(e&1&&(F(0,`p`,80),K(1),I()),e&2){let e=W(2).selected,t=W(2);D(),q(t.moreChanges(e.diffTruncated))}}function fX(e,t){if(e&1&&(F(0,`ul`,147),M(1,uX,9,7,`li`,148,AJ),I(),A(3,dX,2,1,`p`,80)),e&2){let e=W().selected;D(),N(e.diff),D(2),j(e.diffTruncated?3:-1)}}function pX(e,t){e&1&&(F(0,`p`,80),K(1,`The state did not change.`),I())}function mX(e,t){if(e&1&&(F(0,`div`,143)(1,`div`,144),K(2,`State diff`),I(),A(3,oX,2,1,`button`,145),I(),A(4,fX,4,1)(5,pX,2,0,`p`,80)),e&2){let e=t.selected,n=W().headingLevel;D(),k(`aria-level`,n+1),D(2),j(e.diff.length?3:-1),D(),j(e.diff.length?4:5)}}function hX(e,t){if(e&1&&(F(0,`dl`,156),hg(1,109),I()),e&2){let e=W(2).selected,t=Pg(13);D(),P(`ngTemplateOutlet`,t)(`ngTemplateOutletContext`,K_(2,CJ,e))}}function gX(e,t){if(e&1&&(A(0,hX,2,4,`dl`,156),hg(1,109)),e&2){let e=W().selected,t=Pg(15);j(e.action===void 0?-1:0),D(),P(`ngTemplateOutlet`,t)(`ngTemplateOutletContext`,K_(3,CJ,e))}}function _X(e,t){if(e&1&&(F(0,`dl`,79),hg(1,109),I()),e&2){let e=W(2).selected,t=Pg(13);D(),P(`ngTemplateOutlet`,t)(`ngTemplateOutletContext`,K_(2,CJ,e))}}function vX(e,t){e&1&&(F(0,`p`,80),K(1,` No action or arguments: a restore, or a patchState write outside a method. `),I())}function yX(e,t){if(e&1&&(F(0,`app-entry-tabs`,137)(1,`div`,157),A(2,_X,2,4,`dl`,79)(3,vX,2,0,`p`,80),I(),F(4,`div`,158),hg(5,109),I()()),e&2){let e=W(),t=e.selected,n=e.idPrefix,r=Pg(15),i=W();P(`idPrefix`,n+`-`+t.seq)(`seq`,t.seq)(`diffTruncated`,t.diffTruncated)(`loader`,i.loadEntry),D(2),j(t.action!==void 0||t.args?.length||t.causedByEvent?2:3),D(3),P(`ngTemplateOutlet`,r)(`ngTemplateOutletContext`,K_(7,CJ,t))}}function bX(e,t){if(e&1&&K(0),e&2){let e=W(2).selected;J(` Store DevTools jumps the app state to the state right after action #`,e.seq,`. Until you go back to the latest state, new actions are logged but do not change the state. `)}}function xX(e,t){if(e&1&&K(0),e&2){let e=W(3).selected;Y(` This sets every state key of `,t.label,` back to its value right after change #`,e.seq,`. Components that read the store update at once, and a new "Restore" entry is added to the log. `)}}function SX(e,t){if(e&1&&K(0),e&2){let e=W(3).selected;J(` This sets every state key of the store back to its value right after change #`,e.seq,`. Components that read the store update at once, and a new "Restore" entry is added to the log. `)}}function CX(e,t){if(e&1&&A(0,xX,1,2)(1,SX,1,1),e&2){let e;j((e=W(3).store())?0:1,e)}}function wX(e,t){if(e&1){let e=B();F(0,`div`,159),H(`keydown.escape`,function(t){return S(e),C(W(2).cancelRestore(t))}),F(1,`p`,160),A(2,bX,1,1)(3,CX,2,1),I(),F(4,`div`,97)(5,`button`,75),H(`click`,function(){S(e);let t=W().selected;return C(W().restore(t.seq,t.source===`store`))}),K(6,` Restore `),I(),F(7,`button`,101,10),H(`click`,function(){return S(e),C(W(2).cancelRestore())}),K(9,` Cancel `),I()()()}if(e&2){let e=W(),t=e.selected,n=e.idPrefix,r=W();k(`aria-labelledby`,n+`-confirm-text`),D(),P(`id`,n+`-confirm-text`),D(),j(t.source===`store`?2:3),D(3),P(`disabled`,r.busy())}}function TX(e,t){if(e&1){let e=B();F(0,`button`,102),H(`click`,function(){S(e);let t=W(2).selected;return C(W().devtoolsOp({op:`toggle`,seq:t.seq}))}),K(1),I()}if(e&2){let e=W(2),t=e.selected,n=e.idPrefix,r=W();P(`disabled`,r.busy()||!r.canRestore()),k(`aria-describedby`,r.canRestore()?null:n+`-writes-off`),D(),J(` `,r.isSkipped(t.seq)?`Include this action`:`Skip this action`,` `)}}function EX(e,t){if(e&1){let e=B();F(0,`button`,165,11),H(`click`,function(){S(e);let t=W(2).selected;return C(W().askRestore(t.seq))}),K(2,` Restore this state `),I()}if(e&2){let e=W(2).idPrefix,t=W();P(`disabled`,!t.canRestore()),k(`aria-describedby`,t.canRestore()?null:e+`-writes-off`)}}function DX(e,t){if(e&1){let e=B();F(0,`button`,102),H(`click`,function(){S(e);let t=W(2).selected;return C(W().dispatchAgain(t.seq))}),K(1,` Dispatch again `),I()}if(e&2){let e=W(2).idPrefix,t=W();P(`disabled`,t.busy()||!t.canRestore()),k(`aria-describedby`,t.canRestore()?null:e+`-writes-off`)}}function OX(e,t){if(e&1&&(F(0,`p`,164),K(1),I()),e&2){let e=W(2).idPrefix,t=W();P(`id`,e+`-writes-off`),D(),q(t.restoreOff)}}function kX(e,t){if(e&1&&(F(0,`div`,161),A(1,TX,2,3,`button`,162),A(2,EX,3,2,`button`,163),A(3,DX,2,2,`button`,162),I(),A(4,OX,2,2,`p`,164)),e&2){let e=W().selected,t=W();D(),j(t.canToggle(e)?1:-1),D(),j(e.restorable?2:-1),D(),j(t.canAgain(e)?3:-1),D(),j(t.canRestore()?-1:4)}}function AX(e,t){e&1&&(F(0,`p`,51),K(1,` This store reports through its Redux DevTools integration, which the panel reads but does not write to, so its state cannot be restored from here. `),I())}function jX(e,t){e&1&&(K(0,` Store DevTools no longer holds this action, so this state cannot be restored. It was dropped past `),F(1,`code`),K(2,`maxAge`),I(),K(3,`, or the Store DevTools history was committed, reset or imported. `))}function MX(e,t){e&1&&(K(0,` Store DevTools never recorded this action, so this state cannot be restored. An `),F(1,`code`),K(2,`actionsBlocklist`),I(),K(3,`, `),F(4,`code`),K(5,`actionsSafelist`),I(),K(6,` or `),F(7,`code`),K(8,`predicate`),I(),K(9,` option filtered it out, or recording was paused. `))}function NX(e,t){e&1&&(K(0,` Time travel for @ngrx/store needs `),F(1,`code`),K(2,`provideStoreDevtools()`),I(),K(3,`. Without it, entries cannot be restored. `))}function PX(e,t){if(e&1&&(F(0,`p`,51),A(1,jX,4,0)(2,MX,10,0)(3,NX,4,0),I()),e&2){let e=W().selected;D(),j(e.unrestorable===`dropped`?1:e.unrestorable===`not-recorded`?2:3)}}function FX(e,t){if(e&1&&(F(0,`section`,135)(1,`div`,136),K(2),I(),F(3,`dl`,79)(4,`dt`),K(5,`Time`),I(),F(6,`dd`),K(7),I(),A(8,qY,4,1),A(9,JY,4,1),A(10,QY,6,0),A(11,$Y,1,4,`ng-container`,109),I(),jh(12,aX,4,4,`ng-template`,null,8,tv)(14,mX,6,3,`ng-template`,null,9,tv),A(16,gX,2,5)(17,yX,6,9,`app-entry-tabs`,137),A(18,wX,10,4,`div`,138),A(19,kX,5,4),A(20,AX,2,0,`p`,51),A(21,PX,4,1,`p`,51),I()),e&2){let e=t.selected,n=t.headingLevel,r=t.idPrefix,i=W();k(`aria-labelledby`,r+`-entry-heading`),D(),P(`id`,r+`-entry-heading`),k(`aria-level`,n),D(),Y(` #`,e.seq,` `,e.type,` `),D(5),q(i.formatTime(e.timestamp)),D(),j(e.origin?8:-1),D(),j(e.durationMs===void 0?-1:9),D(),j(e.trace?.length?10:-1),D(),j(e.source===`event`?11:-1),D(5),j(e.source===`redux`?16:e.source===`event`?-1:17),D(2),j(e.restorable&&i.confirmSeq()===e.seq?18:-1),D(),j(i.confirmSeq()!==e.seq&&(e.restorable||i.canAgain(e)||i.canToggle(e))?19:-1),D(),j(e.source===`redux`?20:-1),D(),j(!e.restorable&&e.source===`store`?21:-1)}}function IX(e,t){if(e&1&&(F(0,`span`,20),K(1),I()),e&2){let e=W();D(),q(e.sourceEntries().length)}}function LX(e,t){e&1&&(F(0,`div`,29),L(1,`span`,166),F(2,`p`,37),K(3,`Scanning source for NgRx declarations…`),I()())}function RX(e,t){e&1&&(F(0,`div`,30)(1,`p`,37),K(2,`No NgRx declarations found in source.`),I(),F(3,`p`,38),K(4,` The scan looks for `),F(5,`code`),K(6,`signalStore`),I(),K(7,`, `),F(8,`code`),K(9,`signalState`),I(),K(10,`, `),F(11,`code`),K(12,`signalMethod`),I(),K(13,`, `),F(14,`code`),K(15,`createAction`),I(),K(16,`, `),F(17,`code`),K(18,`createReducer`),I(),K(19,`, `),F(20,`code`),K(21,`createEffect`),I(),K(22,`, `),F(23,`code`),K(24,`createSelector`),I(),K(25,` and `),F(26,`code`),K(27,`createFeature`),I(),K(28,`. `),I()())}function zX(e,t){if(e&1){let e=B();F(0,`button`,168),H(`click`,function(){let t=S(e).$implicit,n=W(2);return C(n.kind.set(n.kind()===t.kind?null:t.kind))}),L(1,`span`,44),F(2,`span`,173),K(3),I(),F(4,`span`,169),K(5),I()()}if(e&2){let e=t.$implicit,n=W(2);G(`active`,n.kind()===e.kind),k(`aria-pressed`,n.kind()===e.kind),D(),t_(`background`,n.kindColor(e.kind)),D(2),q(n.kindLabel(e.kind)),D(2),q(e.count)}}function BX(e,t){if(e&1&&(F(0,`p`,178),K(1),I()),e&2){let e=W().$implicit;D(),q(e.detail)}}function VX(e,t){if(e&1&&(F(0,`li`,172)(1,`div`,174),L(2,`span`,44),F(3,`span`,175),K(4),I(),F(5,`span`,49),K(6),I()(),F(7,`div`,176),L(8,`app-source-link`,177),I(),A(9,BX,2,1,`p`,178),I()),e&2){let e=t.$implicit,n=W(2);D(2),t_(`background`,n.kindColor(e.kind)),D(2),q(e.name),D(2),q(n.kindLabel(e.kind)),D(2),P(`file`,e.file)(`line`,e.line),D(),j(e.detail?9:-1)}}function HX(e,t){if(e&1){let e=B();F(0,`li`)(1,`div`,29)(2,`p`,37),K(3,`No declarations match.`),I(),F(4,`button`,101),H(`click`,function(){return S(e),C(W(2).clearFilters())}),K(5,`Clear filters`),I()()()}}function UX(e,t){if(e&1){let e=B();F(0,`div`,167)(1,`button`,168),H(`click`,function(){return S(e),C(W().kind.set(null))}),K(2,` All `),F(3,`span`,169),K(4),I()(),M(5,zX,6,7,`button`,170,jJ),I(),F(7,`ul`,171),M(8,VX,10,7,`li`,172,MJ,!1,HX,6,0,`li`),I()}if(e&2){let e=W();D(),G(`active`,!e.kind()),k(`aria-pressed`,!e.kind()),D(3),q(e.sourceEntries().length),D(),N(e.groupedEntries()),D(3),N(e.filteredEntries())}}var WX={action:`#f59e0b`,reducer:`#a78bfa`,effect:`#fb923c`,selector:`#60a5fa`,feature:`#34d399`,"store-setup":`#94a3b8`,"signal-store":`#e879f9`,"signal-state":`#22d3ee`,"signal-method":`#fb7185`,store:`#a78bfa`,event:`var(--warn)`,redux:`#38bdf8`},GX={"signal-store":`signalStore`,"signal-state":`signalState`,"signal-method":`signalMethod`,"store-setup":`store setup`,store:`@ngrx/store`,event:`event`,redux:`Redux DevTools`},KX={dispatch:`store.dispatch(action)`,effect:`NgRx effect (Store.next)`,reactive:`store.dispatch(() => action)`};function qX(e){if(!e.trim())return{};let t;try{t=JSON.parse(e)}catch{return{error:`The payload is not valid JSON.`}}return!t||typeof t!=`object`||Array.isArray(t)?{error:`The payload must be a JSON object, like {"id": 7}.`}:Object.prototype.hasOwnProperty.call(t,`type`)?{error:`The payload cannot have a "type" key. Put the action type in the Type field.`}:{payload:t}}var JX=new Set([`action`,`reducer`,`effect`,`selector`,`feature`,`store-setup`]),YX=class e{rpc=$(null);canRestore=X(()=>OT(this.rpc(),`ngrx`));restoreOff=Mw(`ngrx`);filter=T(``);logListSize=T(zW(`store-log`,300));kind=T(null);sourceEntries=T([]);sourceLoaded=T(!1);pages=T([]);reduxPages=T([]);allPages=X(()=>{let e=this.pages(),t=new Set(e.map(e=>e.pageId)),n=this.reduxPages().filter(e=>!t.has(e.pageId)).map(e=>({pageId:e.pageId,url:e.url,title:e.title,stores:[],classic:null,log:[],reportedAt:e.reportedAt}));return[...e,...n]});failed=T(!1);stateLoaded=T(!1);selectedPageId=T(null);hostPageId=tT();angularPages=oD(()=>this.rpc());angularPage=X(()=>sD(this.angularPages(),this.page()?.pageId??this.hostPageId));maxLog=X(()=>TT(this.rpc()).limits.changeLog);selectedStoreId=T(null);focusEventSeq=T(null);eventDetailHeading=hv(`eventDetailHeading`);busy=T(!1);focusLatest=T(!1);focusConfirm=T(null);cancelButton=hv(`cancelButton`);restoreButton=hv(`restoreButton`);stateTree=hv(tJ);resetButton=hv(`resetButton`);resetCancel=hv(`resetCancel`);confirmReset=Q({source:()=>this.store()?.id,computation:()=>!1});focusReset=T(null);loopBurst=20;filterInput=hv(`filterInput`);latestButton=hv(`latestButton`);message=T(``);destroyRef=x(Ss);unsubscribe=null;unsubscribeOthers=null;page=X(()=>{let e=this.allPages();return e.find(e=>e.pageId===this.selectedPageId())??e.find(e=>e.pageId===this.hostPageId)??e[0]??null});pageConnected=X(()=>!!this.page()||!!this.angularPage());reduxPage=X(()=>this.reduxPages().find(e=>e.pageId===this.page()?.pageId)??null);logKey=X(()=>{let e=this.page(),t=this.store();return t?.redux?{pageId:`${e?.pageId}/${t.id}`,log:oJ(this.reduxPage(),t.id)}:{pageId:e?.pageId??null,log:e?.log??[]}});logSession=Q({source:this.logKey,computation:(e,t)=>t?WK(t.source,e)?t.value:t.value+1:0});selectedChangeSeq=Q({source:this.logSession,computation:()=>null});selectedEventSeq=Q({source:this.logSession,computation:()=>null});confirmSeq=Q({source:this.logSession,computation:()=>null});pageOptions=X(()=>this.allPages().map(e=>({value:e.pageId,label:e.title||e.url,hint:e.url})));liveStores=X(()=>{let e=this.page();if(!e)return[];let t=e.stores.map(e=>({id:e.id,label:e.name??e.references[0]??e.className,kind:e.kind,scope:e.scope,signal:e}));return e.classic&&t.push({id:`store`,label:`Store`,kind:`store`,scope:e.classic.scope,classic:e.classic}),t.push(...aJ(this.reduxPage())),t});filteredStores=X(()=>{let e=this.filter().trim().toLowerCase();return e?this.liveStores().filter(t=>t.label.toLowerCase().includes(e)||t.kind.includes(e)||(t.signal?.stateKeys??[]).some(t=>t.toLowerCase().includes(e))||this.logOf(t).some(t=>t.type.toLowerCase().includes(e))):this.liveStores()});store=X(()=>{let e=this.liveStores();return e.find(e=>e.id===this.selectedStoreId())??e[0]??null});stateText=X(()=>{let e=this.store();return e?YK(e.signal?e.signal.state:e.redux?e.redux.state:e.classic?.state):``});stateValue=X(()=>{let e=this.store();if(e)return e.signal?e.signal.state:e.redux?e.redux.state:e.classic?.state});changedPaths=X(()=>{let e=this.store(),t=e?this.logOf(e):[],n;for(let e=t.length-1;e>=0&&!n;e--)t[e].diff.length&&(n=t[e]);return(n?.diff??[]).map(e=>e.path)});storeStats=X(()=>{let e=this.store();if(!e||e.redux)return[];let t=this.page()?.stats;return Array.isArray(t)?t.filter(t=>t.storeId===e.id):[]});hasLoop=X(()=>this.storeStats().some(e=>e.loop));skippedSeqs=X(()=>new Set(Array.isArray(this.page()?.classic?.skipped)?this.page().classic.skipped:[]));computedEntries=X(()=>Object.entries(this.store()?.signal?.computed??{}).map(([e,t])=>({key:e,value:XK(t,160),full:YK(t)})));logFeed=new xR({name:`store-log`,source:()=>{let e=this.store();return e?this.logOf(e):[]},key:e=>e.seq,newest:`last`,scope:()=>`${this.store()?.id??``}:${this.logSession()}`});storeLog=X(()=>{let e=this.filter().trim().toLowerCase();return this.logFeed.items().filter(t=>!e||t.type.toLowerCase().includes(e)||this.storeMatches(e)).slice().reverse()});sessionEntries=X(()=>{let e=this.store();return!e||e.redux?[]:(this.page()?.log??[]).filter(t=>t.storeId===e.id&&t.source!==`event`)});loadEntry=async e=>{let t=this.page()?.pageId;return t?await oT(this.rpc(),`request-ngrx-history`,{pageId:t,request:{type:`entry`,seq:e}})??{error:`The devtools server is not connected.`}:{error:`No live page to read from.`}};logOf(e){return e.redux?oJ(this.reduxPage(),e.id):(this.page()?.log??[]).filter(t=>t.storeId===e.id)}hasEvents=X(()=>(this.page()?.log??[]).some(e=>e.source===`event`));pageEvents=X(()=>{let e=this.filter().trim().toLowerCase();return(this.page()?.log??[]).filter(t=>t.source===`event`&&(!e||t.type.toLowerCase().includes(e))).slice().reverse()});logWindow=new zN({count:X(()=>this.storeLog().length),estimate:56});shownLog=X(()=>XX(this.storeLog(),this.logWindow));eventWindow=new zN({count:X(()=>this.pageEvents().length),estimate:36});shownEvents=X(()=>XX(this.pageEvents(),this.eventWindow));logList=hv(`logList`);eventsList=hv(`eventsList`);changeEntry=X(()=>{let e=this.selectedChangeSeq();return e===null?null:this.storeLog().find(t=>t.seq===e)??null});eventEntry=X(()=>{let e=this.selectedEventSeq();return e===null?null:this.pageEvents().find(t=>t.seq===e)??null});dispatchType=T(``);dispatchPayload=T(``);actionTypes=X(()=>{let e=new Set;for(let t of this.sourceEntries())for(let n of t.types??[])e.add(n);for(let t of this.page()?.log??[])t.source===`store`&&t.action!==void 0&&e.add(t.type);return[...e].sort().slice(0,200)});payloadError=X(()=>qX(this.dispatchPayload()).error??``);dispatchRequest=X(()=>{let e=this.dispatchType().trim(),{payload:t,error:n}=qX(this.dispatchPayload());return!e||n?null:{type:`dispatch`,action:e,...t?{payload:t}:{}}});usesSignals=X(()=>this.sourceEntries().some(e=>e.kind===`signal-store`||e.kind===`signal-state`));usesClassic=X(()=>this.sourceEntries().some(e=>JX.has(e.kind)));filteredEntries=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.kind();return this.sourceEntries().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.includes(e)||(n.detail??``).toLowerCase().includes(e)))});groupedEntries=X(()=>{let e=new Map;for(let t of this.sourceEntries())e.set(t.kind,(e.get(t.kind)??0)+1);return[...e.entries()].map(([e,t])=>({kind:e,count:t}))});constructor(){lJ(`store`,this.selectedStoreId),SR(this.logFeed,()=>{let e=this.logList()?.nativeElement;e&&(e.scrollTop=0)}),E(()=>{let e=this.logList()?.nativeElement;e&&this.logWindow.attach(e)}),E(()=>{let e=this.eventsList()?.nativeElement;e&&this.eventWindow.attach(e)}),E(()=>{let e=this.rpc();e&&this.load(e)}),Sv(()=>{let e=this.latestButton();e&&this.focusLatest()&&!this.busy()&&(this.focusLatest.set(!1),e.nativeElement.focus())}),E(()=>{let e=this.focusConfirm(),t=e===`cancel`?this.cancelButton():this.restoreButton();e&&t&&(this.focusConfirm.set(null),t.nativeElement.focus())}),Sv(()=>{let e=this.focusReset(),t=e===`cancel`?this.resetCancel():this.resetButton();e&&t&&(this.focusReset.set(null),t.nativeElement.focus())}),Sv(()=>{let e=this.focusEventSeq(),t=this.eventDetailHeading();e!==null&&t&&(this.focusEventSeq.set(null),t.nativeElement.focus())}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.unsubscribeOthers?.()})}storeMatches(e){let t=this.store();return!!t&&t.label.toLowerCase().includes(e)}async load(e){this.failed.set(!1),oT(e,`get-ngrx-store`).then(e=>this.sourceEntries.set(Array.isArray(e)?e:[])).catch(()=>this.sourceEntries.set([])).finally(()=>this.sourceLoaded.set(!0));try{let t=await e.scope(`pangular`).rpc.sharedState(`ngrx-store`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.pages.set(Array.isArray(t?.pages)?t.pages:[]),e!==void 0&&this.stateLoaded.set(!0)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}try{let t=await e.scope(`pangular`).rpc.sharedState(`redux-stores`);if(this.destroyRef.destroyed)return;let n=e=>this.reduxPages.set(iJ(e));n(t.value()),this.unsubscribeOthers?.(),this.unsubscribeOthers=t.on(`updated`,n)}catch{this.reduxPages.set([])}}retry(){let e=this.rpc();e&&this.load(e)}selectPage(e){this.selectedPageId.set(e),this.selectedStoreId.set(null),this.selectedChangeSeq.set(null),this.selectedEventSeq.set(null),this.confirmSeq.set(null),this.message.set(``)}selectStore(e){this.selectedStoreId.set(e),this.selectedChangeSeq.set(null),this.confirmSeq.set(null),this.message.set(``)}selectChange(e){this.selectedChangeSeq.set(this.selectedChangeSeq()===e?null:e),this.confirmSeq.set(null),this.message.set(``)}copyState(){return this.copyText(this.stateText())}copyPath(e){return this.copyText(e,`Copied the path ${e}.`)}copyDiff(e){return this.copyText(YK(e.diff))}async copyText(e,t=`Copied.`){try{await navigator.clipboard.writeText(e),this.message.set(t)}catch{this.message.set(`The clipboard is not available here.`)}}askRestore(e){this.confirmSeq.set(e),this.focusConfirm.set(`cancel`)}cancelRestore(e){e?.preventDefault(),this.confirmSeq.set(null),this.focusConfirm.set(`restore`)}async restore(e,t){let n=this.page();if(!n)return;this.busy.set(!0),this.focusLatest.set(!1);let r=!1;try{let i=await oT(this.rpc(),`request-ngrx-action`,{pageId:n.pageId,request:{type:`restore`,seq:e}});this.message.set(i?.error??i?.message??`Restored.`),r=t&&!i?.error&&!!i?.paused}catch{this.message.set(`Could not reach the page to restore the state.`)}finally{this.busy.set(!1),this.confirmSeq.set(null),this.focusLatest.set(r),r||this.stateTree()?.focus()}}selectEvent(e){let t=this.selectedEventSeq()===e?null:e;this.selectedEventSeq.set(t),t!==null&&this.focusEventSeq.set(t)}async backToLatest(){let e=this.page();if(e){this.busy.set(!0);try{let t=await oT(this.rpc(),`request-ngrx-action`,{pageId:e.pageId,request:{type:`latest`}});this.focusLatest.set(!1),this.stateTree()?.focus(),this.message.set(t?.error??t?.message??`Back on the latest state.`)}catch{this.message.set(`Could not reach the page to go back to the latest state.`)}finally{this.busy.set(!1)}}}isSkipped(e){return this.skippedSeqs().has(e)}canToggle(e){return e.source===`store`&&e.action!==void 0&&!!this.page()?.classic?.devtools&&(e.restorable||this.isSkipped(e.seq))}traceFrames(e){return e.map(BK)}askReset(){this.confirmReset.set(!0),this.focusReset.set(`cancel`)}cancelReset(e){e?.preventDefault(),this.confirmReset.set(!1),this.focusReset.set(`reset`)}async devtoolsOp(e){let t=this.page();if(!t||this.busy())return;let n=e.op===`reset`;this.busy.set(!0);try{let n=await oT(this.rpc(),`request-ngrx-action`,{pageId:t.pageId,request:{type:`devtools`,...e}});this.message.set(n?.error??n?.message??`Done.`)}catch{this.message.set(`Could not reach the page to change the Store DevTools history.`)}finally{this.busy.set(!1),n&&(this.confirmReset.set(!1),this.focusReset.set(`reset`))}}canAgain(e){return e.source===`store`&&e.action!==void 0}async dispatchAction(e){e.preventDefault();let t=this.dispatchRequest();t&&await this.send(t,`Could not reach the page to dispatch the action.`)}dispatchAgain(e){return this.send({type:`dispatch-again`,seq:e},`Could not reach the page to dispatch the action again.`)}async send(e,t){let n=this.page();if(!n||this.busy())return;let r=this.logSession();this.busy.set(!0);try{let t=await oT(this.rpc(),`request-ngrx-action`,{pageId:n.pageId,request:e});this.message.set(t?.error??t?.message??`Dispatched.`),t?.entry&&this.logSession()===r&&(this.selectedStoreId.set(`store`),this.selectedChangeSeq.set(t.entry.seq))}catch{this.message.set(t)}finally{this.busy.set(!1)}}clearFilters(){this.filter.set(``),this.kind.set(null),this.filterInput()?.focus()}countText(e){let t=this.changeCount(e.id);return`${t} ${e.redux?t===1?`action`:`actions`:t===1?`change`:`changes`}`}changeCount(e){let t=this.liveStores().find(t=>t.id===e);return t?this.logOf(t).length:0}entityIds(e){return e.slice(0,30)}entityOverflowTitle(e,t){let n=e.slice(30).join(`, `);return t>e.length?`${n} (first ${e.length} of ${t} shown)`:n}kindColor(e){return WX[e]??`var(--text-3)`}kindLabel(e){return GX[e]??e}originText(e){return KX[e]??e}changesLabel=UK;moreChanges=HK;opLabel(e){return e===`add`?`added`:e===`remove`?`removed`:`changed`}prettyText(e){return YK(e)}shortText(e){return XK(e)}formatTime=VE;formatDuration(e){return e<=0?`<1ms`:`${Math.round(e)}ms`}methodDuration(e){let t=[];return e.avgDurationMs!==void 0&&t.push(`avg ${this.formatDuration(e.avgDurationMs)}`),e.lastDurationMs!==void 0&&t.push(`last ${this.formatDuration(e.lastDurationMs)}`),t.length?` · ${t.join(` · `)}`:``}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-store-inspector`]],viewQuery:function(e,t){e&1&&Mg(t.eventDetailHeading,dJ,5)(t.cancelButton,fJ,5)(t.restoreButton,pJ,5)(t.stateTree,tJ,5)(t.resetButton,mJ,5)(t.resetCancel,hJ,5)(t.filterInput,gJ,5)(t.latestButton,_J,5)(t.logList,vJ,5)(t.eventsList,yJ,5),e&2&&Ng(10)},inputs:{rpc:[1,`rpc`]},decls:32,vars:11,consts:[[`filterInput`,``],[`entryDetailTpl`,``],[`logList`,``],[`latestButton`,``],[`resetCancel`,``],[`resetButton`,``],[`eventsList`,``],[`eventDetailHeading`,``],[`actionRowsTpl`,``],[`diffTpl`,``],[`cancelButton`,``],[`restoreButton`,``],[1,`page-intro`],[1,`toolbar`],[`placeholder`,`Filter stores, changes and declarations`,`saveKey`,`store`,1,`search`,3,`valueChange`,`value`],[1,`status`],[`aria-hidden`,`true`,1,`live-dot`],[`aria-labelledby`,`ngrx-live-heading`,1,`block`],[1,`section-head`],[`id`,`ngrx-live-heading`],[1,`pill`],[`kind`,`error`],[`kind`,`loading`],[`kind`,`empty`],[1,`live-layout`],[`role`,`status`,1,`message`],[`aria-labelledby`,`ngrx-events-heading`,1,`block`],[`aria-labelledby`,`ngrx-source-heading`,1,`block`],[`id`,`ngrx-source-heading`],[`role`,`status`,1,`empty`,`compact`],[1,`empty`,`compact`],[`id`,`ngrx-page-label`,1,`visually-hidden`],[`labelledBy`,`ngrx-page-label`,1,`page-select`,3,`valueChange`,`options`,`value`],[`kind`,`error`,3,`retry`],[`detail`,``],[`capability`,`injectorProviders`,`compact`,``,3,`page`],[1,`empty`],[1,`empty-title`],[1,`hint`],[`aria-label`,`Stores on this page`,1,`store-list`],[1,`muted`,`pad`],[1,`store-detail`],[`type`,`button`,1,`store-item`,3,`click`],[1,`store-top`],[`aria-hidden`,`true`,1,`dot`],[1,`store-name`],[1,`store-meta`],[1,`detail-head`],[1,`chips`],[1,`chip`],[1,`chip`,`mono`,3,`file`],[1,`hint`,`small`],[1,`refs`],[1,`paused`],[1,`facts`],[`aria-labelledby`,`ngrx-state-heading`,1,`fact`],[1,`fact-head`],[`id`,`ngrx-state-heading`],[1,`state-actions`],[3,`rpc`,`pageId`,`target`,`label`],[`type`,`button`,`aria-label`,`Copy state`,1,`btn`,`copy`,3,`click`],[3,`copied`,`value`,`changed`,`label`],[`aria-labelledby`,`ngrx-devtools-heading`,1,`history`],[`aria-labelledby`,`ngrx-log-heading`,1,`log`],[`id`,`ngrx-log-heading`],[1,`live-row`],[3,`feed`,`what`],[`what`,`changes on this page`,`limit`,`changeLog`,3,`dropped`,`max`],[1,`log-layout`],[`appRovingList`,`button.log-item`,1,`log-list`,3,`rovingWindow`],[`view`,`store-log`,`pane`,`before`,`label`,`Resize the change list`,3,`sizeChange`,`min`,`max`,`defaultSize`,`size`],[`id`,`ngrx-change-detail`],[1,`stats`],[3,`rpc`,`pageId`,`storeId`,`entries`],[`aria-labelledby`,`ngrx-dispatch-heading`,1,`dispatch`],[`type`,`button`,1,`btn`,`primary`,3,`click`,`disabled`],[`id`,`store-latest-off`,1,`hint`,`small`],[`aria-labelledby`,`ngrx-computed-heading`,1,`fact`],[`id`,`ngrx-computed-heading`],[1,`kv`],[1,`muted`],[`id`,`ngrx-methods-heading`,1,`spaced`],[`aria-labelledby`,`ngrx-methods-heading`,1,`methods`],[`aria-labelledby`,`ngrx-entities-heading`,1,`fact`],[3,`title`],[1,`chip`,`mono`],[1,`tag`],[1,`calls`],[`id`,`ngrx-entities-heading`],[1,`entities`],[1,`entity-group`],[1,`entity-head`],[1,`entity-count`],[1,`chips`,`entity-ids`],[1,`chip`,`more`,3,`title`],[`id`,`ngrx-devtools-heading`],[`role`,`group`,`aria-labelledby`,`ngrx-reset-text`,1,`confirm`],[1,`actions`],[`id`,`store-history-off`,1,`hint`,`small`],[`role`,`group`,`aria-labelledby`,`ngrx-reset-text`,1,`confirm`,3,`keydown.escape`],[`id`,`ngrx-reset-text`],[`type`,`button`,1,`btn`,3,`click`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`type`,`button`,1,`log-item`,3,`click`],[1,`seq`],[1,`log-type-row`],[1,`log-type`,3,`title`],[1,`tag`,3,`title`],[1,`log-meta`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[`id`,`ngrx-stats-heading`],[`tabindex`,`0`,`role`,`region`,`aria-labelledby`,`ngrx-stats-heading`,1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[`scope`,`row`,1,`mono`],[1,`loop`],[1,`num`],[`id`,`ngrx-dispatch-heading`],[1,`dispatch-form`,3,`submit`],[`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`list`,`ngrx-action-types`,`placeholder`,`e.g. [Cart] Add Item`,3,`input`,`value`],[`id`,`ngrx-action-types`],[3,`value`],[1,`optional`],[`rows`,`3`,`spellcheck`,`false`,`placeholder`,`e.g. {"id": 7}`,`aria-describedby`,`ngrx-payload-error`,3,`input`,`value`],[`id`,`ngrx-payload-error`,1,`field-error`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`id`,`store-dispatch-off`,1,`hint`,`small`],[`id`,`ngrx-events-heading`],[1,`intro`],[`appRovingList`,`button.event-item`,`aria-label`,`Dispatched events`,1,`events-list`,3,`rovingWindow`],[`id`,`ngrx-event-detail`,`tabindex`,`-1`,1,`event-detail-focus`],[`type`,`button`,1,`event-item`,3,`click`],[1,`event-type`,`mono`,3,`title`],[1,`event-payload`,3,`title`],[1,`event-time`],[1,`entry`],[`role`,`heading`,1,`entry-heading`,3,`id`],[3,`idPrefix`,`seq`,`diffTruncated`,`loader`],[`role`,`group`,1,`confirm`],[1,`trace`],[3,`file`,`line`],[1,`code`],[1,`mono`],[1,`sub-head`],[`role`,`heading`,1,`sub`],[`type`,`button`,1,`btn`,`copy`],[`type`,`button`,1,`btn`,`copy`,3,`click`],[1,`diff`],[3,`class`],[1,`op`],[1,`path`],[1,`values`],[1,`before`],[1,`after`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[1,`kv`,`redux-action`],[`tab-action`,``],[`tab-diff`,``],[`role`,`group`,1,`confirm`,3,`keydown.escape`],[3,`id`],[1,`entry-actions`],[`type`,`button`,1,`btn`,3,`disabled`],[`type`,`button`,1,`btn`,`restore`,3,`disabled`],[1,`hint`,`small`,3,`id`],[`type`,`button`,1,`btn`,`restore`,3,`click`,`disabled`],[`aria-hidden`,`true`,1,`spinner`],[`role`,`group`,`aria-label`,`Filter declarations by kind`,1,`kinds`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[1,`nodes`],[1,`node-card`],[1,`chip-text`],[1,`node-header`],[1,`node-label`],[1,`node-meta`],[1,`file`,3,`file`,`line`],[1,`detail`]],template:function(e,t){if(e&1){let e=B();F(0,`p`,12),K(1,` NgRx signal stores and @ngrx/store state from the live page, with every change, plus NGXS, Elf and MiniRx stores. Source declarations lists the stores your files declare. `),I(),F(2,`div`,13)(3,`app-search-field`,14,0),M_(`valueChange`,function(n){return S(e),j_(t.filter,n)||(t.filter=n),C(n)}),I(),A(5,NJ,3,2),F(6,`span`,15),L(7,`span`,16),K(8),I()(),F(9,`section`,17)(10,`div`,18)(11,`h2`,19),K(12,`Live stores`),I(),A(13,PJ,2,1,`span`,20),I(),A(14,FJ,4,0,`app-state`,21)(15,IJ,2,0,`app-state`,22)(16,LJ,4,0,`app-state`,23)(17,VJ,6,2)(18,VY,6,2,`div`,24),F(19,`p`,25),K(20),I()(),A(21,KY,14,8,`section`,26),jh(22,FX,22,15,`ng-template`,null,1,tv),F(24,`section`,27)(25,`div`,18)(26,`h2`,28),K(27,`Source declarations`),I(),A(28,IX,2,1,`span`,20),I(),A(29,LX,4,0,`div`,29)(30,RX,29,0,`div`,30)(31,UX,11,5),I()}e&2&&(D(3),A_(`value`,t.filter),D(2),j(t.allPages().length>1?5:-1),D(),G(`on`,t.pageConnected()),D(2),J(` `,t.stateLoaded()?t.pageConnected()?`Live`:`No page connected`:`Loading…`,` `),D(5),j(t.liveStores().length?13:-1),D(),j(t.failed()?14:t.stateLoaded()?t.page()?t.liveStores().length?18:17:16:15),D(6),q(t.message()),D(),j(t.hasEvents()?21:-1),D(7),j(t.sourceEntries().length?28:-1),D(),j(t.sourceLoaded()?t.sourceEntries().length===0?30:31:29))},dependencies:[$N,VW,dD,XD,NV,wD,Zv,bj,CM,_q,Lq,tJ,HL,CR],styles:[`.page-intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  display: flex;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search[_ngcontent-%COMP%]    > input[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  width: 100%;
-  padding-left: 34px;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 24px;
-  min-width: 0;
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%] {
-  max-width: 720px;
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  padding: 10px 12px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-input[_ngcontent-%COMP%] {
-  flex: 1 1 220px;
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.page-select[_ngcontent-%COMP%] {
-  flex: 0 1 220px;
-  min-width: 0;
-}
-
-.status[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.live-dot[_ngcontent-%COMP%] {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--%NS%text-3);
-}
-
-.status.on[_ngcontent-%COMP%]   .live-dot[_ngcontent-%COMP%] {
-  background: var(--%NS%ok);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 20%, transparent);
-  animation: _ngcontent-%COMP%_pulse 2s infinite;
-}
-
-@keyframes _ngcontent-%COMP%_pulse {
-  50% {
-    opacity: 0.4;
-  }
-}
-.block[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.section-head[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 24px;
-}
-
-h2[_ngcontent-%COMP%], 
-h4[_ngcontent-%COMP%], 
-.sub[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-}
-
-h4[_ngcontent-%COMP%] {
-  margin-bottom: 10px;
-}
-
-.spaced[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.sub[_ngcontent-%COMP%] {
-  margin: 14px 0 8px;
-}
-
-.fact-head[_ngcontent-%COMP%], 
-.sub-head[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  min-width: 0;
-}
-
-.fact-head[_ngcontent-%COMP%] {
-  margin-bottom: 10px;
-}
-
-.state-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.sub-head[_ngcontent-%COMP%] {
-  margin: 14px 0 8px;
-}
-
-.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.btn.copy[_ngcontent-%COMP%] {
-  flex: none;
-  height: var(--%NS%control-h);
-  padding: 0 10px;
-  font-size: 12px;
-}
-
-.pill[_ngcontent-%COMP%] {
-  min-width: 20px;
-  padding: 0 7px;
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: 18px;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  text-align: center;
-  padding: 36px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty.compact[_ngcontent-%COMP%] {
-  padding: 24px 16px;
-  border-style: dashed;
-  background: transparent;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.hint[_ngcontent-%COMP%] {
-  max-width: 520px;
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.55;
-  overflow-wrap: anywhere;
-}
-
-.hint.small[_ngcontent-%COMP%] {
-  margin-top: 12px;
-  font-size: 12px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
-.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  padding: 1px 5px;
-  color: var(--%NS%text);
-  background: var(--%NS%surface-3);
-  border: 1px solid var(--%NS%border);
-  border-radius: 5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.pad[_ngcontent-%COMP%] {
-  padding: 20px 12px;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.btn[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.btn.primary[_ngcontent-%COMP%], 
-.btn.restore[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.btn.restore[_ngcontent-%COMP%] {
-  margin-top: 14px;
-}
-
-.live-layout[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
-  min-width: 0;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  box-shadow: var(--%NS%shadow);
-  overflow: hidden;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-ul[_ngcontent-%COMP%] {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.store-list[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px;
-  border-right: 1px solid var(--%NS%border);
-  background: var(--%NS%surface-2);
-}
-
-.store-item[_ngcontent-%COMP%], 
-.log-item[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 3px;
-  width: 100%;
-  padding: 8px 10px;
-  border: none;
-  border-radius: var(--%NS%radius-sm);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-.store-item[_ngcontent-%COMP%]:hover, 
-.log-item[_ngcontent-%COMP%]:hover, 
-.event-item[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.store-item[_ngcontent-%COMP%]:focus-visible, 
-.log-item[_ngcontent-%COMP%]:focus-visible, 
-.event-item[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.store-item.selected[_ngcontent-%COMP%], 
-.log-item.selected[_ngcontent-%COMP%], 
-.event-item.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.store-top[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.store-name[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.store-meta[_ngcontent-%COMP%], 
-.log-meta[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-}
-
-.dot[_ngcontent-%COMP%] {
-  flex: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.store-detail[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  padding: 16px;
-}
-
-.detail-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  color: var(--%NS%accent);
-  font-family: var(--%NS%font-mono);
-  font-size: 15px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 100%;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11.5px;
-  line-height: 18px;
-  overflow-wrap: anywhere;
-}
-
-.chip.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.refs[_ngcontent-%COMP%] {
-  margin: 10px 0 0;
-  color: var(--%NS%text-2);
-  line-height: 1.8;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 16px;
-  min-width: 0;
-}
-
-.fact[_ngcontent-%COMP%] {
-  min-width: 0;
-}
-
-pre[_ngcontent-%COMP%] {
-  margin: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  color: var(--%NS%text);
-}
-
-.tree[_ngcontent-%COMP%], 
-.code[_ngcontent-%COMP%] {
-  max-height: 360px;
-  overflow: auto;
-  padding: 10px 12px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.code[_ngcontent-%COMP%] {
-  max-height: 220px;
-}
-
-.tree[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.kv[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 6px 14px;
-  margin: 0;
-}
-
-
-.kv.redux-action[_ngcontent-%COMP%] {
-  margin-top: 10px;
-}
-
-.kv[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  color: var(--%NS%text-2);
-}
-
-.kv[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.methods[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.methods[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  flex-wrap: wrap;
-  row-gap: 2px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  padding: 0 5px;
-  border-radius: 4px;
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-  font-size: 10.5px;
-}
-
-.calls[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans, inherit);
-  font-size: 11px;
-}
-
-.entities[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 14px;
-}
-
-.entity-group[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-}
-
-.entity-head[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.entity-count[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-}
-
-.entity-ids[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.chip.more[_ngcontent-%COMP%] {
-  border-style: dashed;
-  color: var(--%NS%text-3);
-}
-
-.events-list[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: 260px;
-  overflow: auto;
-  padding: 6px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.event-item[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px 10px;
-  width: 100%;
-  min-width: 0;
-  padding: 7px 10px;
-  border: none;
-  border-radius: var(--%NS%radius-sm);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-.event-type[_ngcontent-%COMP%] {
-  flex: none;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-  font-size: 12.5px;
-}
-
-.event-payload[_ngcontent-%COMP%] {
-  flex: 1 1 160px;
-  min-width: 0;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--%NS%text-2);
-}
-
-.event-time[_ngcontent-%COMP%] {
-  flex: none;
-  margin-left: auto;
-  color: var(--%NS%text-3);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-}
-
-.log[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding-top: 16px;
-  border-top: 1px solid var(--%NS%border);
-}
-
-.live-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin: 0 0 8px;
-}
-
-.log-layout[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: min(var(--%NS%log-list-size, 300px), 60%) auto minmax(0, 1fr);
-  gap: 16px;
-  min-width: 0;
-}
-
-.log-list[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  max-height: 420px;
-  overflow: auto;
-  padding: 2px;
-}
-
-.log-item[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  column-gap: 8px;
-  row-gap: 2px;
-}
-
-.seq[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-}
-
-.log-type-row[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.log-type[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-}
-
-.log-meta[_ngcontent-%COMP%] {
-  grid-column: 2;
-}
-
-.entry[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 14px;
-  border: 1px solid var(--%NS%accent-line);
-  border-radius: var(--%NS%radius-sm);
-  animation: enter 0.25s var(--%NS%ease) both;
-}
-
-.entry[_ngcontent-%COMP%]   .entry-heading[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.diff[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-}
-
-.diff-row[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
-  gap: 8px;
-  align-items: baseline;
-  padding: 5px 8px;
-  border-radius: 6px;
-  background: var(--%NS%surface-2);
-}
-
-.op[_ngcontent-%COMP%] {
-  font-size: 10.5px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--%NS%text-2);
-}
-
-.diff-row.add[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.diff-row.remove[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.values[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 6px;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.before[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-decoration: line-through;
-}
-
-.after[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.arrow[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.confirm[_ngcontent-%COMP%] {
-  margin-top: 14px;
-  padding: 12px;
-  border: 1px solid var(--%NS%accent-line);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%accent-soft);
-}
-
-.confirm[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 10px;
-  line-height: 1.5;
-}
-
-.actions[_ngcontent-%COMP%], 
-.entry-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.entry-actions[_ngcontent-%COMP%] {
-  margin-top: 14px;
-}
-
-.entry-actions[_ngcontent-%COMP%]   .btn.restore[_ngcontent-%COMP%] {
-  margin-top: 0;
-}
-
-.dispatch[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid var(--%NS%border);
-}
-
-.dispatch-form[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 10px;
-  max-width: 560px;
-}
-
-.dispatch-form[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.optional[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-.dispatch-form[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 100%;
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  resize: vertical;
-  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
-}
-
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-.field-error[_ngcontent-%COMP%] {
-  margin: -4px 0 0;
-  color: var(--%NS%danger);
-  font-size: 12px;
-}
-
-.field-error[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.history[_ngcontent-%COMP%], 
-.stats[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin-top: 16px;
-}
-
-.history[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], 
-.stats[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
-  margin: 0 0 6px;
-}
-
-.history[_ngcontent-%COMP%]   .actions[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  max-height: 280px;
-  overflow: auto;
-  margin-top: 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.table-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.stats[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.stats[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
-.stats[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  padding: 5px 8px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: baseline;
-}
-
-.stats[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-weight: 600;
-}
-
-.stats[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  font-weight: 400;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.stats[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] {
-  text-align: right;
-  white-space: nowrap;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.loop[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin-left: 6px;
-  padding: 0 5px;
-  border: 1px solid;
-  border-radius: 4px;
-  font-family: var(--%NS%font-sans, inherit);
-  font-size: 10.5px;
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.trace[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  margin: 0;
-  padding-left: 18px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.paused[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px 14px;
-  margin-bottom: 14px;
-  padding: 10px 12px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 40%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
-}
-
-.paused[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  flex: 1 1 240px;
-  margin: 0;
-  line-height: 1.5;
-}
-
-.paused[_ngcontent-%COMP%]   .hint.small[_ngcontent-%COMP%] {
-  flex-basis: 100%;
-  margin-top: 0;
-}
-
-.message[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.message[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.kinds[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.kind-chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 100%;
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease);
-}
-
-.kind-chip[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%text-3);
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text);
-}
-
-.kind-chip.active[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.kind-chip[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.chip-text[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kind-chip[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
-  flex: none;
-  min-width: 18px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 16px;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-.nodes[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.node-card[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.node-header[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 8px;
-  min-width: 0;
-}
-
-.node-label[_ngcontent-%COMP%] {
-  min-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-weight: 500;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.node-meta[_ngcontent-%COMP%] {
-  margin-top: 6px;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-  overflow-wrap: anywhere;
-}
-
-.detail[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner[_ngcontent-%COMP%], 
-   .status.on[_ngcontent-%COMP%]   .live-dot[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-@media (max-width: 760px) {
-  .live-layout[_ngcontent-%COMP%], 
-   .log-layout[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .log-layout[_ngcontent-%COMP%]    > app-splitter[_ngcontent-%COMP%] {
-    display: none;
-  }
-  .store-list[_ngcontent-%COMP%] {
-    border-right: none;
-    border-bottom: 1px solid var(--%NS%border);
-  }
-}
-@media (max-width: 480px) {
-  .toolbar[_ngcontent-%COMP%] {
-    padding: 8px;
-  }
-  .toolbar[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], 
-   .page-select[_ngcontent-%COMP%] {
-    flex-basis: 100%;
-  }
-  .store-detail[_ngcontent-%COMP%] {
-    padding: 12px;
-  }
-  .kv[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}`]})};function XX(e,t){let{start:n,end:r}=t.range();return e.slice(n,r).map((e,t)=>({entry:e,index:n+t}))}function ZX(e){let t=e?.pages;return!t||typeof t!=`object`||Array.isArray(t)?[]:Object.values(t).filter(e=>{let t=e;return!!t&&typeof t.pageId==`string`&&Array.isArray(t.clients)&&Array.isArray(t.queries)&&Array.isArray(t.mutations)}).sort((e,t)=>t.reportedAt-e.reportedAt)}function QX(e){return e.invalidated?`invalidated`:e.stale?`stale`:`fresh`}function $X(e,t){if(!t)return`never`;let n=Math.max(0,Math.round(e/1e3));return n<60?`${n} s ago`:n<3600?`${Math.round(n/60)} min ago`:`${Math.round(n/3600)} h ago`}function eZ(e){return e===void 0?`not set`:e===null?`Infinity`:e===`static`?`static`:e<1e3?`${e} ms`:e<6e4?`${Math.round(e/100)/10} s`:`${Math.round(e/6e3)/10} min`}function tZ(e,t){return t===`fetching`?`accent`:t===`paused`?`warn`:e===`error`?`danger`:e===`success`?`ok`:e===`pending`?`warn`:`plain`}function nZ(e,t){switch(t){case`all`:return!0;case`fetching`:return e.fetchStatus===`fetching`;case`stale`:return e.stale||e.invalidated;case`inactive`:return e.observers===0;default:return e.status===t}}var rZ=[`detailPanel`],iZ=(e,t)=>({preview:e,id:t}),aZ=(e,t)=>t.id;function oZ(e,t){e&1&&(F(0,`app-state`,3),K(1,`Loading queries…`),I())}function sZ(e,t){if(e&1){let e=B();F(0,`app-state`,5),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Can't read TanStack Query from the devtools server. `),I()}}function cZ(e,t){e&1&&(F(0,`app-state`,6),K(1,` The connected page has no QueryClient yet. `),F(2,`p`,7),K(3,` Add `),F(4,`code`),K(5,`provideTanStackQuery(new QueryClient())`),I(),K(6,` to the app's providers. The tab reads it once something in the app injects it, such as `),F(7,`code`),K(8,`injectQuery()`),I(),K(9,`. `),I()())}function lZ(e,t){e&1&&(F(0,`app-state`,6),K(1,` No page reports a QueryClient yet. `),F(2,`p`,7),K(3,` Open the app with the overlay loaded. The tab reads the `),F(4,`code`),K(5,`QueryClient`),I(),K(6,` that `),F(7,`code`),K(8,`provideTanStackQuery()`),I(),K(9,` registers, once something in the app injects it. `),I()())}function uZ(e,t){e&1&&A(0,cZ,10,0,`app-state`,6)(1,lZ,10,0,`app-state`,6),e&2&&j(+!W().connected())}function dZ(e,t){if(e&1){let e=B();F(0,`app-select`,19),H(`valueChange`,function(t){return S(e),C(W(2).status.set(t??`all`))}),I()}if(e&2){let e=W(2);P(`options`,e.filters)(`value`,e.status())}}function fZ(e,t){if(e&1){let e=B();F(0,`app-select`,20),H(`valueChange`,function(t){return S(e),C(W(2).selectPage(t))}),I()}if(e&2){let e=W(2);P(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function pZ(e,t){if(e&1&&(F(0,`p`,21),K(1),I()),e&2){let e=W(),t=W(2);D(),Y(` The page reports the `,t.view()===`queries`?`300 queries`:`100 mutations`,` it updated last and leaves out `,t.view()===`queries`?e.queries:e.mutations,` more. `)}}function mZ(e,t){if(e&1&&A(0,pZ,2,2,`p`,21),e&2){let e=t;j(e.queries||e.mutations?0:-1)}}function hZ(e,t){e&1&&(F(0,`p`,22),K(1,`No query in the cache yet.`),I(),F(2,`p`),K(3,`Queries show up here when the app creates them with `),F(4,`code`),K(5,`injectQuery()`),I(),K(6,`.`),I())}function gZ(e,t){e&1&&(F(0,`p`,22),K(1,`No mutation yet.`),I(),F(2,`p`),K(3,`Mutations show up here once the app calls `),F(4,`code`),K(5,`mutate()`),I(),K(6,`.`),I())}function _Z(e,t){if(e&1&&(F(0,`div`,17),A(1,hZ,7,0)(2,gZ,7,0),I()),e&2){let e=W(2);D(),j(e.view()===`queries`?1:2)}}function vZ(e,t){if(e&1){let e=B();F(0,`div`,17)(1,`p`,22),K(2,`Nothing matches the filters.`),I(),F(3,`button`,23),H(`click`,function(){S(e),W();let t=Pg(13);return W().clearFilters(),C(t.focus())}),K(4,` Clear filters `),I()()}}function yZ(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,27),H(`click`,function(){let t=S(e).$implicit;return C(W(3).select(t.id))}),F(2,`span`,28)(3,`code`,29),K(4),I(),F(5,`span`,30),K(6),I()(),F(7,`span`,31),K(8),I()()()}if(e&2){let e=t.$implicit,n=W(3);D(),G(`selected`,e.id===n.selected()?.id),k(`aria-pressed`,e.id===n.selected()?.id),D(2),P(`title`,e.label),D(),q(e.label),D(),k(`data-tone`,e.tone),D(),q(e.status),D(2),q(e.meta)}}function bZ(e,t){if(e&1&&(F(0,`span`,34),K(1),I()),e&2){let e=W();D(),Y(`(`,e.dataUpdateCount,` `,e.dataUpdateCount===1?`update`:`updates`,`)`)}}function xZ(e,t){e&1&&(F(0,`span`,34),K(1,`(disabled)`),I())}function SZ(e,t){if(e&1&&(F(0,`dt`),K(1,`Failures`),I(),F(2,`dd`),K(3),I()),e&2){let e=W();D(3),q(e.failureCount)}}function CZ(e,t){if(e&1&&(F(0,`dt`),K(1,`Error`),I(),F(2,`dd`)(3,`code`,40),K(4),I()()),e&2){let e=W();D(4),q(e.error)}}function wZ(e,t){if(e&1&&(F(0,`p`,37),K(1),I()),e&2){let e=W(4);D(),q(e.writesOff)}}function TZ(e,t){e&1&&(F(0,`p`,34),K(1,`No data yet.`),I())}function EZ(e,t){if(e&1&&hg(0,39),e&2){let e=W();W(3),P(`ngTemplateOutlet`,Pg(5))(`ngTemplateOutletContext`,q_(2,iZ,e.preview,e.id))}}function DZ(e,t){if(e&1){let e=B();F(0,`h2`,32)(1,`code`),K(2),I()(),F(3,`dl`,33)(4,`dt`),K(5,`Status`),I(),F(6,`dd`)(7,`span`,30),K(8),I()(),F(9,`dt`),K(10,`Fetch status`),I(),F(11,`dd`),K(12),I(),F(13,`dt`),K(14,`Freshness`),I(),F(15,`dd`),K(16),I(),F(17,`dt`),K(18,`Data updated`),I(),F(19,`dd`),K(20),A(21,bZ,2,2,`span`,34),I(),F(22,`dt`),K(23,`Observers`),I(),F(24,`dd`),K(25),A(26,xZ,2,0,`span`,34),I(),F(27,`dt`),K(28,`staleTime`),I(),F(29,`dd`),K(30),I(),F(31,`dt`),K(32,`gcTime`),I(),F(33,`dd`),K(34),I(),A(35,SZ,4,1),A(36,CZ,5,1),I(),F(37,`div`,35)(38,`button`,36),H(`click`,function(){let t=S(e);return C(W(3).act(`invalidate`,t.id))}),K(39,` Invalidate `),I(),F(40,`button`,36),H(`click`,function(){let t=S(e);return C(W(3).act(`refetch`,t.id))}),K(41,` Refetch `),I()(),A(42,wZ,2,1,`p`,37),F(43,`h3`,38),K(44,`Data`),I(),A(45,TZ,2,0,`p`,34)(46,EZ,1,5,`ng-container`,39)}if(e&2){let e=t,n=W(3);D(2),q(e.keyText),D(5),k(`data-tone`,n.tone(e.status)),D(),q(e.status),D(4),q(e.fetchStatus),D(4),q(n.freshnessOf(e)),D(4),J(` `,n.age(e.dataUpdatedAt),` `),D(),j(e.dataUpdateCount?21:-1),D(4),J(` `,e.observers,` `),D(),j(e.disabled?26:-1),D(4),q(n.duration(e.staleTime)),D(4),q(n.duration(e.gcTime)),D(),j(e.failureCount?35:-1),D(),j(e.error?36:-1),D(2),P(`disabled`,n.busy()||!n.canWrite()),k(`aria-describedby`,n.canWrite()?null:`query-writes-off`),D(2),P(`disabled`,n.busy()||!n.canWrite()),k(`aria-describedby`,n.canWrite()?null:`query-writes-off`),D(2),j(n.canWrite()?-1:42),D(3),j(e.hasData?46:45)}}function OZ(e,t){e&1&&(F(0,`span`,34),K(1,`(paused)`),I())}function kZ(e,t){if(e&1&&(F(0,`dt`),K(1,`Failures`),I(),F(2,`dd`),K(3),I()),e&2){let e=W();D(3),q(e.failureCount)}}function AZ(e,t){if(e&1&&(F(0,`dt`),K(1,`Error`),I(),F(2,`dd`)(3,`code`,40),K(4),I()()),e&2){let e=W();D(4),q(e.error)}}function jZ(e,t){if(e&1&&(F(0,`h2`,32)(1,`code`),K(2),I()(),F(3,`dl`,33)(4,`dt`),K(5,`Status`),I(),F(6,`dd`)(7,`span`,30),K(8),I(),A(9,OZ,2,0,`span`,34),I(),F(10,`dt`),K(11,`Submitted`),I(),F(12,`dd`),K(13),I(),A(14,kZ,4,1),A(15,AZ,5,1),I(),F(16,`h3`,38),K(17,`Variables and data`),I(),hg(18,39)),e&2){let e=t,n=W(3),r=Pg(5);D(2),q(n.mutationLabel(e)),D(5),k(`data-tone`,n.tone(e.status)),D(),q(e.status),D(),j(e.isPaused?9:-1),D(4),q(n.age(e.submittedAt)),D(),j(e.failureCount?14:-1),D(),j(e.error?15:-1),D(3),P(`ngTemplateOutlet`,r)(`ngTemplateOutletContext`,q_(9,iZ,e.variables,e.id))}}function MZ(e,t){if(e&1&&(F(0,`h2`,41),K(1,`Details`),I(),F(2,`p`,34),K(3),I()),e&2){let e=W(3);D(3),J(` Select a `,e.view()===`queries`?`query`:`mutation`,` to see its details. `)}}function NZ(e,t){if(e&1&&(F(0,`div`,18)(1,`ul`,24),M(2,yZ,9,8,`li`,null,aZ),I(),F(4,`section`,25,2),A(6,DZ,47,19)(7,jZ,19,12)(8,MZ,4,1),F(9,`p`,26),K(10),I()()()),e&2){let e,t=W(2);D(),k(`aria-label`,t.view()===`queries`?`Queries`:`Mutations`),D(),N(t.rows()),D(4),j((e=t.selectedQuery())?6:(e=t.selectedMutation())?7:8,e),D(4),q(t.message())}}function PZ(e,t){if(e&1){let e=B();F(0,`p`,8),K(1,` The queries and mutations of the TanStack Query client the app provides, read from the live page. Keys, errors and data are masked like other live data. `),I(),F(2,`div`,9)(3,`div`,10)(4,`button`,11),H(`click`,function(){return S(e),C(W().setView(`queries`))}),K(5,` Queries `),F(6,`span`,12),K(7),I()(),F(8,`button`,11),H(`click`,function(){return S(e),C(W().setView(`mutations`))}),K(9,` Mutations `),F(10,`span`,12),K(11),I()()(),F(12,`app-search-field`,13,1),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.filter,t)||(n.filter=t),C(t)}),I(),A(14,dZ,1,2,`app-select`,14),A(15,fZ,1,2,`app-select`,15),F(16,`span`,16),K(17),I()(),A(18,mZ,1,1),A(19,_Z,3,1,`div`,17)(20,vZ,5,0,`div`,17)(21,NZ,11,3,`div`,18)}if(e&2){let e,t=W();D(4),k(`aria-pressed`,t.view()===`queries`),D(3),q(t.page()?.queries.length??0),D(),k(`aria-pressed`,t.view()===`mutations`),D(3),q(t.page()?.mutations.length??0),D(),A_(`value`,t.filter),D(2),j(t.view()===`queries`?14:-1),D(),j(t.pages().length>1?15:-1),D(2),q(t.countText()),D(),j((e=t.page()?.more)?18:-1,e),D(),j(t.allRows().length?t.rows().length?21:20:19)}}function FZ(e,t){if(e&1&&(F(0,`p`,42),K(1,`Variables`),I(),F(2,`pre`,44),K(3),I()),e&2){let e=W(),t=W(3);D(3),q(t.prettyText(e.variables))}}function IZ(e,t){if(e&1&&(A(0,FZ,4,1),F(1,`p`,42),K(2,`Data`),I(),F(3,`pre`,43),K(4),I()),e&2){let e=t,n=W(3);j(e.variables===void 0?-1:0),D(4),q(e.data===void 0?`No data.`:n.prettyText(e.data))}}function LZ(e,t){if(e&1&&(F(0,`p`,34),K(1),I()),e&2){let e=W(3);D(),q(e.full().result.error??`The page did not send the data.`)}}function RZ(e,t){if(e&1&&A(0,IZ,5,2)(1,LZ,2,1,`p`,34),e&2){let e;j((e=W(2).full().result.detail)?0:1,e)}}function zZ(e,t){if(e&1&&(F(0,`pre`,45),K(1),I()),e&2){let e=W(2).preview,t=W();D(),q(t.prettyText(e))}}function BZ(e,t){if(e&1){let e=B();A(0,zZ,2,1,`pre`,45),F(1,`button`,36),H(`click`,function(){S(e);let t=W().id;return C(W().loadData(t))}),K(2),I()}if(e&2){let e=W().preview,t=W();j(e===void 0?-1:0),D(),P(`disabled`,t.loadingData()),D(),J(` `,t.loadingData()?`Loading…`:`Show all data`,` `)}}function VZ(e,t){if(e&1&&A(0,RZ,2,1)(1,BZ,3,3),e&2){let e=t.id;j(W().full()?.id===e?0:1)}}var HZ=[{value:`all`,label:`All statuses`},{value:`fetching`,label:`Fetching`},{value:`success`,label:`Success`},{value:`error`,label:`Error`},{value:`pending`,label:`Pending`},{value:`stale`,label:`Stale or invalidated`},{value:`inactive`,label:`No observers`}],UZ=class e{rpc=$(null);angularPages=oD(()=>this.rpc());connected=X(()=>Object.keys(this.angularPages()).length>0);destroyRef=x(Ss);hostPageId=tT();unsubscribe;detailPanel=hv(`detailPanel`);filters=HZ;writesOff=Mw(`tanstackQuery`);canWrite=X(()=>OT(this.rpc(),`tanstackQuery`));pages=T([]);loaded=T(!1);failed=T(!1);view=T(`queries`);filter=T(``);status=T(`all`);selectedPageId=T(null);selectedId=T(null);busy=T(!1);message=T(``);loadingData=T(!1);full=Q({source:()=>this.selectedId(),computation:()=>null});now=T(Date.now());page=X(()=>{let e=this.pages();return e.find(e=>e.pageId===this.selectedPageId())??e.find(e=>e.pageId===this.hostPageId)??e[0]??null});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url})));queries=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.status();return(this.page()?.queries??[]).filter(n=>nZ(n,t)&&(!e||n.keyText.toLowerCase().includes(e)))});mutations=X(()=>{let e=this.filter().trim().toLowerCase();return(this.page()?.mutations??[]).filter(t=>!e||this.mutationLabel(t).toLowerCase().includes(e))});allRows=X(()=>this.view()===`queries`?this.page()?.queries??[]:this.page()?.mutations??[]);rows=X(()=>(this.now(),this.view()===`queries`?this.queries().map(e=>({id:e.id,label:e.keyText,status:e.fetchStatus===`idle`?e.status:e.fetchStatus,tone:tZ(e.status,e.fetchStatus),meta:`${QX(e)} · ${e.observers} ${e.observers===1?`observer`:`observers`} · ${this.age(e.dataUpdatedAt)}`})):this.mutations().map(e=>({id:e.id,label:this.mutationLabel(e),status:e.isPaused?`paused`:e.status,tone:e.isPaused?`warn`:tZ(e.status),meta:`submitted ${this.age(e.submittedAt)}`}))));countText=X(()=>{let e=this.allRows().length;return`${this.rows().length} of ${e} ${this.view()===`queries`?`queries`:`mutations`}`});selectedQuery=X(()=>this.view()===`queries`?this.page()?.queries.find(e=>e.id===this.selectedId())??null:null);selectedMutation=X(()=>this.view()===`mutations`?this.page()?.mutations.find(e=>e.id===this.selectedId())??null:null);selected=X(()=>this.selectedQuery()??this.selectedMutation());constructor(){lJ(`queries`,this.selectedId),E(()=>{let e=this.rpc();e&&this.load(e)});let e=setInterval(()=>this.now.set(Date.now()),1e3);this.destroyRef.onDestroy(()=>{clearInterval(e),this.unsubscribe?.()})}age(e){let t=this.page();if(!t)return $X(0,e);let n=t.at-t.reportedAt;return $X(this.now()+n-e,e)}freshnessOf(e){return QX(e)}duration(e){return eZ(e)}tone(e){return tZ(e)}prettyText(e){return YK(e)}mutationLabel(e){return e.keyText??`Mutation ${e.id}`}setView(e){this.view.set(e),this.selectedId.set(null),this.message.set(``)}selectPage(e){this.selectedPageId.set(e),this.selectedId.set(null),this.message.set(``)}select(e){this.selectedId.set(e),this.message.set(``),typeof matchMedia==`function`&&matchMedia(`(max-width: 880px)`).matches&&this.detailPanel()?.nativeElement.scrollIntoView?.({block:`nearest`})}clearFilters(){this.filter.set(``),this.status.set(`all`)}retry(){let e=this.rpc();e&&this.load(e)}async loadData(e){let t=this.page();if(t&&!this.loadingData()){this.loadingData.set(!0);try{let n=await oT(this.rpc(),`request-tanstack-query`,{pageId:t.pageId,request:{type:`detail`,id:e}});this.selectedId()===e&&this.full.set({id:e,result:n??{}})}catch{this.selectedId()===e&&this.full.set({id:e,result:{error:`Could not reach the page to read the data.`}})}finally{this.loadingData.set(!1)}}}async act(e,t){let n=this.page();if(n&&!this.busy()){this.busy.set(!0);try{let r=await oT(this.rpc(),`request-tanstack-query`,{pageId:n.pageId,request:{type:e,id:t}});this.message.set(r?.error??r?.message??`Done.`),this.full.set(null)}catch{this.message.set(`Could not reach the page.`)}finally{this.busy.set(!1)}}}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`tanstack-query`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(ZX(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-query-inspector`]],viewQuery:function(e,t){e&1&&Mg(t.detailPanel,rZ,5),e&2&&Ng()},inputs:{rpc:[1,`rpc`]},decls:6,vars:1,consts:[[`dataTpl`,``],[`search`,``],[`detailPanel`,``],[`kind`,`loading`],[`kind`,`error`],[`kind`,`error`,3,`retry`],[`kind`,`empty`],[`detail`,``],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Show`,1,`views`],[`type`,`button`,1,`view`,3,`click`],[1,`badge`],[`placeholder`,`Filter by key`,`saveKey`,`query`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Status`,1,`filter-select`,3,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[`role`,`status`,1,`count`],[`role`,`status`,1,`state`,`empty-card`],[1,`layout`],[`ariaLabel`,`Status`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[1,`notice`],[1,`state-title`],[`type`,`button`,1,`btn`,3,`click`],[`appRovingList`,`button.row`,1,`rows`],[`aria-labelledby`,`query-detail-heading`,1,`detail`],[`role`,`status`,1,`message`],[`type`,`button`,1,`row`,3,`click`],[1,`row-top`],[1,`key`,3,`title`],[1,`pill`],[1,`row-meta`],[`id`,`query-detail-heading`,1,`detail-title`],[1,`kv`],[1,`muted`],[1,`actions`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`id`,`query-writes-off`,1,`hint`],[1,`sub`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[1,`error`],[`id`,`query-detail-heading`,1,`sr-only`],[1,`label`],[`tabindex`,`0`,`aria-label`,`Data`],[`tabindex`,`0`,`aria-label`,`Variables`],[`tabindex`,`0`,`aria-label`,`Preview`]],template:function(e,t){e&1&&(A(0,oZ,2,0,`app-state`,3)(1,sZ,2,0,`app-state`,4)(2,uZ,2,1)(3,PZ,22,10),jh(4,VZ,2,1,`ng-template`,null,0,tv)),e&2&&j(t.loaded()?t.failed()?1:t.pages().length?3:2:0)},dependencies:[$N,Zv,NV,wD,HL],styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-  font-size: 13px;
-  color: var(--%NS%text);
-}
-
-code[_ngcontent-%COMP%], 
-pre[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.intro[_ngcontent-%COMP%] {
-  max-width: 720px;
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.sr-only[_ngcontent-%COMP%] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 12px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.views[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 4px;
-}
-
-.view[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.view[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.view[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.view[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.badge[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-input[type=search][_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.filter-select[_ngcontent-%COMP%], 
-.page-select[_ngcontent-%COMP%] {
-  flex: 0 1 200px;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.layout[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(220px, 2fr) minmax(0, 3fr);
-  gap: 12px;
-  align-items: start;
-  min-width: 0;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-ul[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.rows[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-  padding: 6px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  width: 100%;
-  min-width: 0;
-  padding: 8px 10px;
-  border: 0;
-  border-radius: var(--%NS%radius-sm);
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.row[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.row.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.row-top[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  min-width: 0;
-}
-
-.key[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.row-meta[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-}
-
-.pill[_ngcontent-%COMP%] {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 18px;
-}
-
-.pill[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: transparent;
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.pill[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: transparent;
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.pill[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: transparent;
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.pill[data-tone=accent][_ngcontent-%COMP%] {
-  border-color: transparent;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.detail[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 64px;
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  padding: 14px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.detail-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.kv[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 6px 14px;
-  margin: 0;
-}
-
-.kv[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.kv[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.error[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-  white-space: pre-wrap;
-}
-
-.sub[_ngcontent-%COMP%], 
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 4px 0 0;
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-pre[_ngcontent-%COMP%] {
-  max-height: 320px;
-  margin: 0;
-  padding: 8px 10px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-pre[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  justify-self: start;
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.message[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.message[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  line-height: 1.5;
-}
-
-.empty-card[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  padding: 32px 20px;
-  text-align: center;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.state-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-@media (max-width: 880px) {
-  .layout[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .detail[_ngcontent-%COMP%] {
-    position: static;
-  }
-}
-@media (max-width: 480px) {
-  .search[_ngcontent-%COMP%], 
-   .filter-select[_ngcontent-%COMP%], 
-   .page-select[_ngcontent-%COMP%] {
-    flex-basis: 100%;
-  }
-  .count[_ngcontent-%COMP%] {
-    margin-left: 0;
-  }
-  .kv[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}`]})};function WZ(e,t){if(e&1){let e=B();R(0,`button`,2),U(`click`,function(){return S(e),C(W().confirmAct.emit(`restore`))}),K(1),z()}if(e&2){let e=W();G(`armed`,e.armed()===`restore`),V(`disabled`,!e.canWrite()),k(`aria-describedby`,e.canWrite()?null:`forms-writes-off`)(`title`,`Restore `+e.snapshot()),D(),J(` `,e.armed()===`restore`?`Confirm restore`:`Restore `+e.snapshot(),` `)}}function GZ(e,t){if(e&1&&(R(0,`p`,9),K(1),z()),e&2){let e=W();D(),q(e.writesOff())}}var KZ=class e{canWrite=$(!1);writesOff=$(``);picking=$(null);snapshot=$(null);armed=$(null);message=$(``);act=cv();confirmAct=cv();pick=cv();cancelPick=cv();static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-action-bar`]],inputs:{canWrite:[1,`canWrite`],writesOff:[1,`writesOff`],picking:[1,`picking`],snapshot:[1,`snapshot`],armed:[1,`armed`],message:[1,`message`]},outputs:{act:`act`,confirmAct:`confirmAct`,pick:`pick`,cancelPick:`cancelPick`},decls:22,vars:21,consts:[[1,`action-bar`],[`role`,`group`,`aria-label`,`Form actions`,1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`button`,1,`small`,3,`click`],[`aria-hidden`,`true`,1,`divider`],[`type`,`button`,1,`small`,3,`armed`,`disabled`],[`aria-hidden`,`true`,1,`spacer`],[`type`,`button`,1,`small`,`danger`,3,`click`,`disabled`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`id`,`forms-writes-off`,1,`muted`],[`role`,`status`,1,`status`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`div`,1)(2,`button`,2),U(`click`,function(){return t.act.emit(`touch-all`)}),K(3,` Touch all `),z(),R(4,`button`,2),U(`click`,function(){return t.act.emit(`revalidate`)}),K(5,` Revalidate `),z(),R(6,`button`,3),U(`click`,function(){return t.act.emit(`focus-first-invalid`)}),K(7,` Focus first invalid `),z(),R(8,`button`,3),U(`click`,function(){return t.picking()?t.cancelPick.emit():t.pick.emit()}),K(9),z(),dg(10,`span`,4),R(11,`button`,3),U(`click`,function(){return t.act.emit(`snapshot`)}),K(12,`Snapshot`),z(),A(13,WZ,2,6,`button`,5),dg(14,`span`,6),R(15,`button`,7),U(`click`,function(){return t.confirmAct.emit(`reset`)}),K(16),z(),R(17,`button`,8),U(`click`,function(){return t.confirmAct.emit(`submit`)}),K(18),z()(),A(19,GZ,2,1,`p`,9),R(20,`p`,10),K(21),z()()),e&2&&(D(2),V(`disabled`,!t.canWrite()),k(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),D(2),V(`disabled`,!t.canWrite()),k(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),D(4),G(`on`,t.picking()),k(`aria-pressed`,!!t.picking()),D(),J(` `,t.picking()?`Cancel picking`:`Pick field on page`,` `),D(4),j(t.snapshot()?13:-1),D(2),G(`armed`,t.armed()===`reset`),V(`disabled`,!t.canWrite()),k(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),D(),J(` `,t.armed()===`reset`?`Confirm reset`:`Reset`,` `),D(),G(`armed`,t.armed()===`submit`),V(`disabled`,!t.canWrite()),k(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),D(),J(` `,t.armed()===`submit`?`Confirm submit`:`Submit`,` `),D(),j(t.canWrite()?-1:19),D(2),q(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.action-bar[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.divider[_ngcontent-%COMP%] {
-  width: 1px;
-  height: 20px;
-  background: var(--%NS%border-strong);
-}
-
-.spacer[_ngcontent-%COMP%] {
-  flex: 1 1 0;
-}
-
-.actions[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%]:not(.primary):not(.danger) {
-  max-width: 240px;
-}
-
-.small.on[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%text-strong);
-}
-
-.status[_ngcontent-%COMP%]:empty {
-  height: 0;
-  margin-top: -8px;
-}
-
-@media (max-width: 480px) {
-  .spacer[_ngcontent-%COMP%], 
-   .divider[_ngcontent-%COMP%] {
-    display: none;
-  }
-}`]})};function qZ(e){return(e??``).match(/```ts\n([\s\S]*)```\s*$/)?.[1]??null}function JZ(e){return`${e.split(`@`)[0].replace(/[^a-zA-Z0-9]+/g,`-`).replace(/([a-z0-9])([A-Z])/g,`$1-$2`).replace(/^-+|-+$/g,``).toLowerCase()||`form`}.spec.ts`}var YZ=class e{formId=$.required();rpc=$(null);message=Q({source:this.formId,computation:()=>``});async run(e){let t=this.formId(),n=await mT(this.rpc(),`forms-explain`,{kind:`playwright`,form:t});if(this.formId()!==t)return;if(n===null){this.message.set(`The devtools server did not answer. Try again.`);return}let r=qZ(n);if(!r){this.message.set(xT(n));return}if(e===`download`){let e=URL.createObjectURL(new Blob([r],{type:`text/typescript`})),n=document.createElement(`a`);n.href=e,n.download=JZ(t),n.click(),setTimeout(()=>URL.revokeObjectURL(e),0),this.message.set(`Downloaded ${n.download}.`);return}try{await navigator.clipboard.writeText(r),this.message.set(`Copied.`)}catch{this.message.set(`Clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-export-test`]],inputs:{formId:[1,`formId`],rpc:[1,`rpc`]},decls:9,vars:1,consts:[[`role`,`group`,`aria-label`,`Export the history as a test`,1,`export`],[1,`label`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`span`,1),K(2,`Playwright test`),z(),R(3,`button`,2),U(`click`,function(){return t.run(`copy`)}),K(4,`Copy Playwright test`),z(),R(5,`button`,2),U(`click`,function(){return t.run(`download`)}),K(6,`Download test`),z(),R(7,`span`,3),K(8),z()()),e&2&&(D(8),q(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.export[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.status[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-}`]})},XZ=[`heading`];function ZZ(e,t){if(e&1){let e=B();R(0,`div`,6)(1,`p`,9),K(2,`Could not explain this field. The devtools server did not answer.`),z(),R(3,`button`,11),U(`click`,function(){return S(e),C(W().retry())}),K(4,`Try again`),z()()}}function QZ(e,t){if(e&1&&(R(0,`pre`,7),K(1),z()),e&2){let e=W();k(`aria-busy`,e.text()===null?`true`:null),D(),q(e.text()??`Loading…`)}}function $Z(e,t){if(e&1){let e=B();R(0,`div`,8)(1,`label`,15),K(2),z(),R(3,`input`,16),U(`input`,function(t){return S(e),C(W().draft.set(t.target.value))})(`keydown.enter`,function(){return S(e),C(W().setValue())}),z(),R(4,`button`,17),U(`click`,function(){return S(e),C(W().setValue())}),K(5,` Set `),z()()}if(e&2){let e=W();D(2),J(`New value for `,e.node().path),D(),V(`value`,e.draft()),D(),V(`disabled`,!e.canWrite()),k(`aria-describedby`,e.canWrite()?null:`field-writes-off`)}}function eQ(e,t){if(e&1&&(R(0,`p`,9),K(1),R(2,`a`,18),K(3,`How to unmask it`),z()()),e&2){let e=W();D(),J(` No Set editor: this field is redacted (`,e.redactLabel(e.node().redacted),`). `),D(),V(`href`,e.unmaskDocsUrl,Du)}}function tQ(e,t){if(e&1&&(R(0,`p`,13),K(1),z()),e&2){let e=W();D(),q(e.writesOff)}}var nQ=class e{form=$.required();node=$.required();version=$(0);rpc=$(null);closed=cv();canWrite=X(()=>OT(this.rpc(),`forms`));writesOff=Mw(`forms`);redactLabel=gT;unmaskDocsUrl=_T;target=X(()=>`${this.form().id}|${this.node().path}`);text=Q({source:this.target,computation:()=>null});failed=Q({source:this.target,computation:()=>!1});attempt=T(0);heading=hv.required(`heading`);host=x(Ml);draft=Q({source:this.target,computation:()=>``});message=Q({source:this.target,computation:()=>``});constructor(){E(()=>{let e=this.form().id,t=this.node().path;this.version(),this.attempt();let n=this.rpc();Z(()=>this.load(n,e,t))}),Sv(()=>{this.target();let e=Z(this.heading).nativeElement;this.host.nativeElement.scrollIntoView?.({block:`nearest`}),e.focus({preventScroll:!0})})}async load(e,t,n){if(!e)return;let r=await mT(e,`forms-explain`,{kind:`field`,form:t,path:n});if(this.form().id===t&&this.node().path===n){if(r===null){this.failed.set(!0);return}this.failed.set(!1),this.text.set(xT(r))}}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}async act(e){let t=this.form().id,n=this.node().path,r=await vT(this.rpc(),{action:e,formId:t,path:n});this.form().id===t&&this.node().path===n&&this.message.set(r.expression?`${yT(r)} ${r.expression}`:yT(r))}async setValue(){let e=this.form().id,t=this.node().path,n=await vT(this.rpc(),{action:`set-value`,formId:e,path:t,value:this.draft(),coerce:!0,mode:`user`});this.form().id===e&&this.node().path===t&&this.message.set(yT(n))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-field-detail`]],viewQuery:function(e,t){e&1&&Mg(t.heading,XZ,5),e&2&&Ng()},hostAttrs:[`role`,`region`,`aria-labelledby`,`forms-field-heading`],inputs:{form:[1,`form`],node:[1,`node`],version:[1,`version`],rpc:[1,`rpc`]},outputs:{closed:`closed`},decls:26,vars:11,consts:[[`heading`,``],[1,`head`],[1,`section-label`],[`id`,`forms-field-heading`,`tabindex`,`-1`],[1,`tag`],[`type`,`button`,1,`small`,`close`,3,`click`],[`role`,`alert`,1,`failed`],[1,`explain`],[1,`editor`],[1,`muted`],[`role`,`group`,`aria-label`,`Field actions`,1,`row`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`field-writes-off`,1,`muted`],[`role`,`status`,1,`status`],[`for`,`field-value`,1,`sr-only`],[`id`,`field-value`,`type`,`text`,`placeholder`,`New value, read as the current value's type`,`autocomplete`,`off`,`spellcheck`,`false`,1,`field-input`,3,`input`,`keydown.enter`,`value`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){e&1&&(R(0,`div`,1)(1,`span`,2),K(2,`Field`),z(),R(3,`h3`,3,0),K(5),z(),R(6,`span`,4),K(7),z(),R(8,`button`,5),U(`click`,function(){return t.closed.emit()}),K(9,` Close `),z()(),A(10,ZZ,5,0,`div`,6)(11,QZ,2,2,`pre`,7),A(12,$Z,6,4,`div`,8)(13,eQ,4,2,`p`,9),R(14,`div`,10)(15,`button`,11),U(`click`,function(){return t.act(`focus`)}),K(16,`Focus`),z(),R(17,`button`,12),U(`click`,function(){return t.act(`mark-touched`)}),K(18,` Touch `),z(),R(19,`button`,12),U(`click`,function(){return t.act(`revalidate`)}),K(20,` Revalidate `),z(),R(21,`button`,11),U(`click`,function(){return t.act(`store-as-global`)}),K(22,`Store as global`),z()(),A(23,tQ,2,1,`p`,13),R(24,`p`,14),K(25),z()),e&2&&(D(5),q(t.node().path||`(form)`),D(2),q(t.node().type),D(),k(`aria-label`,`Close details for `+(t.node().path||`the form`)),D(2),j(t.failed()?10:11),D(2),j(t.node().type===`control`&&!t.node().redacted?12:t.node().type===`control`?13:-1),D(5),V(`disabled`,!t.canWrite()),k(`aria-describedby`,t.canWrite()?null:`field-writes-off`),D(2),V(`disabled`,!t.canWrite()),k(`aria-describedby`,t.canWrite()?null:`field-writes-off`),D(4),j(t.canWrite()?-1:23),D(2),q(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-width: 0;
-  padding: 16px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  min-width: 0;
-}
-
-.head[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {
-  flex-basis: 100%;
-}
-
-h3[_ngcontent-%COMP%] {
-  flex: 1 1 0;
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-family: var(--%NS%font-mono);
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.4;
-  overflow-wrap: anywhere;
-  border-radius: 4px;
-}
-
-h3[_ngcontent-%COMP%]:focus {
-  outline: none;
-}
-
-a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  border-radius: 2px;
-}
-
-a[_ngcontent-%COMP%]:focus-visible, 
-h3[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.close[_ngcontent-%COMP%] {
-  margin-left: auto;
-}
-
-.failed[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-}
-
-.failed[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  font-size: 12.5px;
-}
-
-.editor[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.editor[_ngcontent-%COMP%]   .field-input[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.status[_ngcontent-%COMP%] {
-  margin-top: -4px;
-}
-
-.status[_ngcontent-%COMP%]:empty {
-  height: 0;
-  margin: -12px 0 0;
-}`]})},rQ=()=>[],iQ=(e,t)=>t.id,aQ=(e,t)=>t.node.path;function oQ(e,t){if(e&1){let e=B();F(0,`label`)(1,`input`,10),H(`change`,function(){let t=S(e).$implicit;return C(W().toggleChip(t.id))}),I(),K(2),I()}if(e&2){let e=t.$implicit,n=W();D(),P(`checked`,n.active().has(e.id)),D(),J(` `,e.label,` `)}}function sQ(e,t){if(e&1){let e=B();F(0,`button`,25),H(`click`,function(){S(e);let t=W(2).$implicit;return C(W().toggleEdit(t.node))}),K(1,` Edit `),I()}if(e&2){let e=W(2).$implicit,t=W();P(`disabled`,!t.canWrite()),k(`aria-label`,`Edit `+(e.node.path||`the form`))(`aria-expanded`,t.editing()===e.node.path)(`aria-controls`,t.editing()===e.node.path?`forms-inline-editor`:null)(`aria-describedby`,t.canWrite()?null:`forms-writes-off`)}}function cQ(e,t){if(e&1&&(F(0,`div`,17),K(1,` typed `),F(2,`code`),K(3),Z_(4,`json`),I(),K(5,`, not in the model yet `),I()),e&2){let e=W(2).$implicit;D(3),q(Q_(4,1,e.node.uncommitted))}}function lQ(e,t){if(e&1&&(F(0,`div`,17),K(1,` resets to `),F(2,`code`),K(3),Z_(4,`json`),I()()),e&2){let e=W(2).$implicit;D(3),q(Q_(4,1,e.node.defaultValue))}}function uQ(e,t){if(e&1&&(F(0,`code`),K(1),Z_(2,`json`),I(),A(3,sQ,2,5,`button`,24),A(4,cQ,6,3,`div`,17),A(5,lQ,5,3,`div`,17)),e&2){let e=W().$implicit;D(),q(Q_(2,4,e.node.value)),D(2),j(e.node.materialized===!1?-1:3),D(),j(e.node.uncommitted===void 0?-1:4),D(),j(e.node.defaultValue===void 0?-1:5)}}function dQ(e,t){e&1&&(F(0,`span`,17),K(1,`not created yet`),I())}function fQ(e,t){if(e&1&&(F(0,`span`,18),K(1),I()),e&2){let e=W().$implicit;k(`data-status`,e.node.status),D(),q(e.node.status)}}function pQ(e,t){e&1&&(F(0,`span`),K(1,`touched`),I())}function mQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),q(e.node.changed===!1?`dirty, unchanged`:`dirty`)}}function hQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),J(`not validated (`,e.node.skipped,`)`)}}function gQ(e,t){if(e&1&&(F(0,`span`,20),K(1),I()),e&2){let e=W().$implicit;D(),J(`stale: `,e.node.stale.join(`, `))}}function _Q(e,t){e&1&&(F(0,`span`,20),K(1,`view out of sync`),I())}function vQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit,t=W();D(),J(`redacted: `,t.redactLabel(e.node.redacted))}}function yQ(e,t){e&1&&(F(0,`span`),K(1,`required`),I())}function bQ(e,t){e&1&&(F(0,`span`),K(1,`readonly`),I())}function xQ(e,t){e&1&&(F(0,`span`),K(1,`hidden`),I())}function SQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),J(`updates on `,e.node.updateOn)}}function CQ(e,t){e&1&&(F(0,`span`),K(1,`debouncing`),I())}function wQ(e,t){e&1&&(F(0,`span`),K(1,`validators`),I())}function TQ(e,t){e&1&&(F(0,`span`),K(1,`async validator`),I())}function EQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function DQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),q(e.node.accessor)}}function OQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),J(`name `,e.node.name)}}function kQ(e,t){if(e&1&&(F(0,`span`),K(1),Z_(2,`json`),I()),e&2){let e=t.$implicit;D(),J(`metadata `,Q_(2,1,e))}}function AQ(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=t.$implicit;D(),J(`disabled: `,e)}}function jQ(e,t){if(e&1&&(F(0,`span`,27),K(1),I()),e&2){let e=W().$implicit;D(),J(`at `,e.params.path)}}function MQ(e,t){if(e&1&&(F(0,`span`,27),K(1),I()),e&2){let e=W().$implicit,t=W(2);D(),q(t.sourceText(e))}}function NQ(e,t){if(e&1&&(F(0,`div`),K(1),F(2,`code`,26),K(3),I(),A(4,jQ,2,1,`span`,27),A(5,MQ,2,1,`span`,27),I()),e&2){let e=t.$implicit,n=W().$implicit,r=W();D(),J(` `,r.errorText(n.node,e),` `),D(2),q(e.kind),D(),j(e.kind===`standardSchema`&&e.params?.path?4:-1),D(),j(e.source?5:-1)}}function PQ(e,t){e&1&&(F(0,`div`,22),K(1,`not shown to the user`),I())}function FQ(e,t){if(e&1){let e=B();F(0,`label`,34),K(1),I(),F(2,`input`,35),H(`input`,function(t){return S(e),C(W(3).draft.set(t.target.value))})(`keydown.enter`,function(){S(e);let t=W(2).$implicit;return C(W().saveValue(t.node))})(`keydown.escape`,function(t){return S(e),C(W(3).stopEdit(t))}),I(),F(3,`button`,36),H(`click`,function(){S(e);let t=W(2).$implicit;return C(W().saveValue(t.node))}),K(4,` Set value `),I()}if(e&2){let e=W(2).$implicit,t=W();D(),J(`New value for `,e.node.path),D(),P(`value`,t.draft())}}function IQ(e,t){if(e&1&&(F(0,`span`,17),K(1),I()),e&2){let e=W(2).$implicit,t=W();D(),J(`The value is redacted (`,t.redactLabel(e.node.redacted),`), so it cannot be edited here.`)}}function LQ(e,t){if(e&1){let e=B();F(0,`tr`,23)(1,`td`,28)(2,`div`,29),A(3,FQ,5,2)(4,IQ,2,1,`span`,17),F(5,`label`,30)(6,`input`,31),H(`change`,function(t){S(e);let n=W().$implicit;return C(W().mark(n.node,`touched`,t))})(`keydown.escape`,function(t){return S(e),C(W(2).stopEdit(t))}),I(),K(7,` Touched `),I(),F(8,`label`,30)(9,`input`,31),H(`change`,function(t){S(e);let n=W().$implicit;return C(W().mark(n.node,`dirty`,t))})(`keydown.escape`,function(t){return S(e),C(W(2).stopEdit(t))}),I(),K(10,` Dirty `),I(),F(11,`button`,32),H(`click`,function(){return S(e),C(W(2).stopEdit())}),K(12,`Done`),I()(),F(13,`p`,33),K(14),I()()()}if(e&2){let e=W().$implicit,t=W();D(),t_(`padding-left`,28+e.depth*16,`px`),D(),k(`aria-label`,`Edit `+(e.node.path||`the form`)),D(),j(e.node.redacted?4:3),D(3),P(`checked`,e.node.touched),D(3),P(`checked`,e.node.dirty),D(5),q(t.editMessage())}}function RQ(e,t){if(e&1&&(F(0,`tr`)(1,`td`,37),K(2),I()()),e&2){let e=W().$implicit;D(),t_(`padding-left`,28+e.depth*16,`px`),D(),Y(` `,e.node.truncated,` more fields under `,e.node.path||`the form`,` not shown `)}}function zQ(e,t){if(e&1){let e=B();F(0,`tr`,11),H(`mouseenter`,function(){let t=S(e).$implicit,n=W();return C(n.highlight.emit({formId:n.form().id,path:t.node.path}))})(`mouseleave`,function(){return S(e),C(W().highlight.emit(null))}),F(1,`th`,12)(2,`button`,13),H(`focus`,function(){let t=S(e).$implicit,n=W();return C(n.highlight.emit({formId:n.form().id,path:t.node.path}))})(`blur`,function(){return S(e),C(W().highlight.emit(null))})(`click`,function(){let t=S(e).$implicit;return C(W().toggleField.emit(t.node.path))}),K(3),I(),F(4,`span`,14),K(5),I()(),F(6,`td`,15),A(7,uQ,6,6),I(),F(8,`td`,16),A(9,dQ,2,0,`span`,17)(10,fQ,2,2,`span`,18),I(),F(11,`td`,19),A(12,pQ,2,0,`span`),A(13,mQ,2,1,`span`),A(14,hQ,2,1,`span`),A(15,gQ,2,1,`span`,20),A(16,_Q,2,0,`span`,20),A(17,vQ,2,1,`span`),A(18,yQ,2,0,`span`),A(19,bQ,2,0,`span`),A(20,xQ,2,0,`span`),A(21,SQ,2,1,`span`),A(22,CQ,2,0,`span`),A(23,wQ,2,0,`span`),A(24,TQ,2,0,`span`),M(25,EQ,2,1,`span`,null,eg),A(27,DQ,2,1,`span`),A(28,OQ,2,1,`span`),M(29,kQ,3,3,`span`,null,$h),M(31,AQ,2,1,`span`,null,$h),I(),F(33,`td`,21),M(34,NQ,6,4,`div`,null,$h),A(36,PQ,2,0,`div`,22),I()(),A(37,LQ,15,7,`tr`,23),A(38,RQ,3,4,`tr`)}if(e&2){let e=t.$implicit,n=W();G(`invalid`,e.node.errors.length),D(),t_(`padding-left`,12+e.depth*16,`px`),D(),k(`aria-label`,`Show details for `+(e.node.path||`the form`))(`aria-pressed`,e.node.path===n.fieldPath())(`title`,e.node.path||`(form)`),D(),J(` `,e.node.key||`(form)`,` `),D(2),q(e.node.type),D(2),j(e.node.type===`control`?7:-1),D(2),j(e.node.materialized===!1?9:10),D(3),j(e.node.touched?12:-1),D(),j(e.node.dirty?13:-1),D(),j(e.node.skipped?14:-1),D(),j(e.node.stale?.length?15:-1),D(),j(e.node.dom?.drift===void 0?-1:16),D(),j(e.node.redacted?17:-1),D(),j(e.node.required?18:-1),D(),j(e.node.readonly?19:-1),D(),j(e.node.hidden?20:-1),D(),j(e.node.updateOn?21:-1),D(),j(e.node.debouncing?22:-1),D(),j(e.node.validators?.sync?23:-1),D(),j(e.node.validators?.async?24:-1),D(),N(n.constraintList(e.node)),D(2),j(e.node.accessor?27:-1),D(),j(e.node.name?28:-1),D(),N(e.node.metadata??G_(29,rQ)),D(2),N(e.node.disabledReasons??G_(30,rQ)),D(3),N(e.node.errors),D(2),j(e.node.errors.length&&e.node.dom?.errorShown===!1?36:-1),D(),j(n.editing()===e.node.path?37:-1),D(),j(e.node.truncated?38:-1)}}function BQ(e,t){e&1&&K(0),e&2&&J(` No field path matches "`,W(2).filter(),`". `)}function VQ(e,t){e&1&&K(0,` No field matches the selected filters. `)}function HQ(e,t){if(e&1){let e=B();F(0,`button`,32),H(`click`,function(){S(e);let t=W(2),n=Pg(2);return C(t.clearFilters.emit(n))}),K(1,` Clear filters `),I()}}function UQ(e,t){if(e&1&&(F(0,`tr`)(1,`td`,38)(2,`p`),A(3,BQ,1,1)(4,VQ,1,0),I(),A(5,HQ,2,0,`button`,39),I()()),e&2){let e=W();D(3),j(e.filter()?3:4),D(2),j(e.filtering()?5:-1)}}function WQ(e,t){if(e&1){let e=B();F(0,`app-forms-field-detail`,40),H(`closed`,function(){return S(e),C(W().closeField.emit())}),I()}if(e&2){let e=W();P(`form`,e.form())(`node`,t)(`version`,e.version())(`rpc`,e.rpc())}}var GQ=[{id:`invalid`,label:`Invalid`},{id:`dirty`,label:`Dirty`},{id:`touched`,label:`Touched`},{id:`disabled`,label:`Disabled`},{id:`hidden-error`,label:`Error not shown`}];function KQ(e,t){switch(t){case`invalid`:return e.errors.length>0;case`dirty`:return e.dirty&&e.type===`control`;case`touched`:return e.touched&&e.type===`control`;case`disabled`:return e.status===`DISABLED`;case`hidden-error`:return e.dom?.errorShown===!1}}function qQ(e){if(typeof e==`string`)return e;if(e===void 0)return``;try{return JSON.stringify(e)??``}catch{return``}}var JQ=class e{form=$.required();rows=$.required();fieldPath=$(null);selectedNode=$(null);version=$(0);rpc=$(null);filtering=$(!1);filterStatus=$(``);filter=pv(``);active=pv(new Set);toggleField=cv();closeField=cv();clearFilters=cv();highlight=cv();chips=GQ;redactLabel=gT;canWrite=X(()=>OT(this.rpc(),`forms`));formId=X(()=>this.form().id);editing=Q({source:this.formId,computation:()=>null});draft=T(``);editMessage=Q({source:this.editing,computation:()=>``});host=x(Ml);injector=x(bs);toggleEdit(e){if(this.editing()===e.path){this.stopEdit();return}this.draft.set(qQ(e.value)),this.editing.set(e.path),cd(()=>this.host.nativeElement.querySelector(`#forms-inline-editor input`)?.focus(),{injector:this.injector})}stopEdit(e){if(e?.stopPropagation(),this.editing()===null)return;let t=this.host.nativeElement.querySelector(`#forms-inline-editor`)?.closest(`tr`)?.previousElementSibling?.querySelector(`button.edit`);this.editing.set(null),t?.focus()}async saveValue(e){let t=this.form().id,n=await vT(this.rpc(),{action:`set-value`,formId:t,path:e.path,value:this.draft(),coerce:!0,mode:`user`});this.form().id===t&&this.editing()===e.path&&this.editMessage.set(yT(n))}async mark(e,t,n){let r=n.target,i=r.checked,a=t===`touched`?i?`mark-touched`:`mark-untouched`:i?`mark-dirty`:`mark-pristine`,o=this.form().id,s=await vT(this.rpc(),{action:a,formId:o,path:e.path});s.ok||(r.checked=!i),this.form().id===o&&this.editing()===e.path&&this.editMessage.set(yT(s))}toggleChip(e){this.active.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}sourceText(e){let t=pT[e.source??``]??e.source??``;return e.from===void 0?t:`${t} on ${e.from||`the form`}`}constraintList(e){return Object.entries(e.constraints??{}).map(([e,t])=>`${e} ${t}`)}errorText(e,t){return/^[a-z]/.test(t.message)?`${e.key||`The form`} ${t.message}`:t.message}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-fields`]],inputs:{form:[1,`form`],rows:[1,`rows`],fieldPath:[1,`fieldPath`],selectedNode:[1,`selectedNode`],version:[1,`version`],rpc:[1,`rpc`],filtering:[1,`filtering`],filterStatus:[1,`filterStatus`],filter:[1,`filter`],active:[1,`active`]},outputs:{filter:`filterChange`,active:`activeChange`,toggleField:`toggleField`,closeField:`closeField`,clearFilters:`clearFilters`,highlight:`highlight`},decls:29,vars:4,consts:[[`fieldFilter`,``],[1,`filters`],[`placeholder`,`Filter fields by path`,`saveKey`,`forms`,1,`search`,3,`valueChange`,`value`],[1,`chips`],[1,`sr-only`],[`role`,`status`,1,`sr-only`],[`role`,`region`,`aria-label`,`Fields`,`tabindex`,`0`,1,`table-scroll`],[1,`fields`],[`scope`,`col`],[3,`form`,`node`,`version`,`rpc`],[`type`,`checkbox`,3,`change`,`checked`],[3,`mouseenter`,`mouseleave`],[`scope`,`row`,1,`name`],[`type`,`button`,1,`field`,3,`focus`,`blur`,`click`],[1,`type`],[1,`value`],[1,`status-cell`],[1,`muted`],[1,`badge`],[1,`flags`],[1,`warn`],[1,`errors`],[1,`unseen`],[1,`edit-row`],[`type`,`button`,1,`edit`,3,`disabled`],[`type`,`button`,1,`edit`,3,`click`,`disabled`],[1,`kind-tag`],[1,`source`],[`colspan`,`5`],[`id`,`forms-inline-editor`,`role`,`group`,1,`inline-editor`],[1,`check`],[`type`,`checkbox`,3,`change`,`keydown.escape`,`checked`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`],[`for`,`forms-inline-value`,1,`sr-only`],[`id`,`forms-inline-value`,`type`,`text`,`autocomplete`,`off`,`spellcheck`,`false`,1,`filter`,`inline-input`,3,`input`,`keydown.enter`,`keydown.escape`,`value`],[`type`,`button`,1,`small`,`primary`,3,`click`],[`colspan`,`5`,1,`muted`,`truncated`],[`colspan`,`5`,1,`no-match`],[`type`,`button`,1,`small`],[3,`closed`,`form`,`node`,`version`,`rpc`]],template:function(e,t){if(e&1){let e=B();F(0,`div`,1)(1,`app-search-field`,2,0),M_(`valueChange`,function(n){return S(e),j_(t.filter,n)||(t.filter=n),C(n)}),I(),F(3,`fieldset`,3)(4,`legend`,4),K(5,`Show only fields that are`),I(),M(6,oQ,3,2,`label`,null,iQ),I()(),F(8,`p`,5),K(9),I(),F(10,`div`,6)(11,`table`,7)(12,`thead`)(13,`tr`)(14,`th`,8),K(15,`Field`),I(),F(16,`th`,8),K(17,`Value`),I(),F(18,`th`,8),K(19,`Status`),I(),F(20,`th`,8),K(21,`State`),I(),F(22,`th`,8),K(23,`Errors`),I()()(),F(24,`tbody`),M(25,zQ,39,31,null,null,aQ,!1,UQ,6,2,`tr`),I()()(),A(28,WQ,1,4,`app-forms-field-detail`,9)}if(e&2){let e;D(),A_(`value`,t.filter),D(5),N(t.chips),D(3),q(t.filterStatus()),D(16),N(t.rows()),D(3),j((e=t.selectedNode())?28:-1,e)}},dependencies:[$N,nQ,$v],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 0 8px;
-  border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  border-radius: 99px;
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 20px;
-  white-space: nowrap;
-}
-
-.summary[_ngcontent-%COMP%]    > .badge[_ngcontent-%COMP%] {
-  line-height: 22px;
-}
-
-.badge[data-status=INVALID][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.badge[data-status=PENDING][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-status=DISABLED][_ngcontent-%COMP%] {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-[_nghost-%COMP%] {
-  display: contents;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  display: flex;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search[_ngcontent-%COMP%]    > input[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  width: 100%;
-  padding-left: 34px;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-.filters[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  height: 28px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease);
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-  border-color: var(--%NS%text-3);
-}
-
-.chips[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:checked) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%accent);
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:focus-visible) {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.filter[_ngcontent-%COMP%] {
-  flex: 1 1 220px;
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.filter[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.filter[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.filter[_ngcontent-%COMP%]:focus, 
-.filter[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.table-scroll[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.fields[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 680px;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.fields[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
-.fields[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-  line-height: 20px;
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
-  border-bottom: 0;
-}
-
-.fields[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  line-height: 16px;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.invalid[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%] {
-  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true]) {
-  background: var(--%NS%accent-soft);
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true])    > th[_ngcontent-%COMP%] {
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-  color: var(--%NS%text-strong);
-}
-
-.name[_ngcontent-%COMP%] {
-  max-width: 280px;
-}
-
-.field[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 200px;
-  padding: 0;
-  overflow: hidden;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  font-weight: 500;
-  line-height: 20px;
-  text-align: left;
-  text-overflow: ellipsis;
-  vertical-align: top;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: color 150ms var(--%NS%ease);
-}
-
-.field[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%accent-hover);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.field[aria-pressed=true][_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.type[_ngcontent-%COMP%] {
-  margin-left: 8px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 400;
-  vertical-align: top;
-}
-
-.value[_ngcontent-%COMP%] {
-  min-width: 140px;
-  max-width: 320px;
-}
-
-.value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
-.errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  color: #fde68a;
-  overflow-wrap: anywhere;
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
-   :root:not([data-theme=dark])   [_nghost-%COMP%]   .errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-    color: var(--%NS%accent);
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
-:root[data-theme=light]   [_nghost-%COMP%]   .errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-
-.value[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
-  margin-top: 2px;
-  font-size: 12px;
-}
-
-.status-cell[_ngcontent-%COMP%] {
-  white-space: nowrap;
-}
-
-.edit[_ngcontent-%COMP%] {
-  min-width: 24px;
-  height: 24px;
-  margin-left: 8px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 12px;
-  line-height: 22px;
-  vertical-align: middle;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-.edit[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.edit[aria-expanded=true][_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%text-strong);
-}
-
-.edit[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 1px;
-}
-
-.edit[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.edit-row[_ngcontent-%COMP%], 
-.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.edit-row[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.inline-editor[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-}
-
-.inline-input[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  min-height: 24px;
-  color: var(--%NS%text);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.edit-row[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-}
-
-.edit-row[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.flags[_ngcontent-%COMP%] {
-  min-width: 160px;
-}
-
-.flags[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0 4px 4px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.flags[_ngcontent-%COMP%]   span.warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.errors[_ngcontent-%COMP%] {
-  min-width: 180px;
-}
-
-.errors[_ngcontent-%COMP%]   div[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-  overflow-wrap: anywhere;
-}
-
-.errors[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]    + div[_ngcontent-%COMP%] {
-  margin-top: 4px;
-}
-
-.errors[_ngcontent-%COMP%]   .kind-tag[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-}
-
-.source[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.errors[_ngcontent-%COMP%]   .unseen[_ngcontent-%COMP%] {
-  color: var(--%NS%warn);
-  font-size: 11px;
-}
-
-.truncated[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  font-style: italic;
-}
-
-.fields[_ngcontent-%COMP%]   .no-match[_ngcontent-%COMP%] {
-  padding: 24px 12px;
-  color: var(--%NS%text-2);
-  text-align: center;
-}
-
-.fields[_ngcontent-%COMP%]   .no-match[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 10px;
-}
-
-.fields[_ngcontent-%COMP%]   .no-match[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]:last-child {
-  margin-bottom: 0;
-}`]})},YQ=(e,t)=>t.id;function XQ(e,t){if(e&1){let e=B();R(0,`label`,3)(1,`input`,5),U(`change`,function(t){return S(e),C(W().allPages.set(t.target.checked))}),z(),K(2,` All pages `),z()}if(e&2){let e=W();D(),V(`checked`,e.allPages())}}function ZQ(e,t){if(e&1&&(R(0,`span`,12),K(1),R(2,`span`,11),K(3),z()()),e&2){let e=t;D(),q(e),D(2),J(` `,e===1?`error`:`errors`)}}function QQ(e,t){if(e&1){let e=B();R(0,`li`)(1,`button`,6),U(`click`,function(){let t=S(e).$implicit;return C(W().selectForm.emit(t.id))}),dg(2,`span`,7),R(3,`span`,8),K(4),z(),R(5,`span`,9),K(6),R(7,`span`,10),K(8),z(),R(9,`span`,11),K(10),z()(),A(11,ZQ,4,2,`span`,12),z()()}if(e&2){let e,n=t.$implicit,r=W();D(),G(`active`,n.id===r.selectedId()),k(`aria-current`,n.id===r.selectedId()?`true`:null),D(),k(`data-status`,n.root.status),D(),k(`title`,n.label),D(),q(n.label),D(2),J(``,r.kindLabel(n.kind),` · `),D(2),q(n.id),D(2),J(`, `,n.root.status),D(),j((e=r.counts().get(n.id)?.errors)?11:-1,e)}}var $Q=class e{forms=$.required();selectedId=$(null);counts=$.required();showToggle=$(!1);allPages=pv(!1);selectForm=cv();kindLabel(e){return fT[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-list`]],inputs:{forms:[1,`forms`],selectedId:[1,`selectedId`],counts:[1,`counts`],showToggle:[1,`showToggle`],allPages:[1,`allPages`]},outputs:{allPages:`allPagesChange`,selectForm:`selectForm`},decls:9,vars:2,consts:[[1,`sidebar`],[`id`,`forms-list-heading`,1,`list-heading`],[1,`list-count`],[1,`page-toggle`],[`aria-labelledby`,`forms-list-heading`,1,`form-list`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`form-item`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`label`],[1,`kind`],[1,`id`],[1,`sr-only`],[1,`count`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`h2`,1),K(2,` Forms `),R(3,`span`,2),K(4),z()(),A(5,XQ,3,1,`label`,3),R(6,`ul`,4),M(7,QQ,12,10,`li`,null,YQ),z()()),e&2&&(D(4),q(t.forms().length),D(),j(t.showToggle()?5:-1),D(2),N(t.forms()))},styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-width: 0;
-}
-
-.sidebar[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 8px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.list-heading[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 4px 8px 8px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.list-count[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  letter-spacing: 0;
-  line-height: 18px;
-  font-variant-numeric: tabular-nums;
-}
-
-.form-list[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  align-content: start;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.form-list[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
-  
-  content-visibility: auto;
-  contain-intrinsic-size: auto 52px;
-}
-
-.form-item[_ngcontent-%COMP%] {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 8px minmax(0, 1fr) auto;
-  grid-template-areas: "dot label count" ". kind kind";
-  gap: 2px 10px;
-  align-items: center;
-  padding: 8px 10px;
-  border: 0;
-  border-radius: var(--%NS%radius-sm);
-  background: transparent;
-  color: var(--%NS%text);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.form-item[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.form-item[_ngcontent-%COMP%]:active {
-  background: var(--%NS%surface-3);
-}
-
-.form-item.active[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-  color: var(--%NS%text-strong);
-}
-
-.form-item[_ngcontent-%COMP%]:focus-visible {
-  
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.form-item[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
-  grid-area: dot;
-}
-
-.form-item[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {
-  grid-area: label;
-  min-width: 0;
-  overflow: hidden;
-  font-size: 13px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.form-item[_ngcontent-%COMP%]   .kind[_ngcontent-%COMP%] {
-  grid-area: kind;
-  min-width: 0;
-  overflow: hidden;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.form-item[_ngcontent-%COMP%]   .id[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 11.5px;
-}
-
-.form-item.active[_ngcontent-%COMP%]   .kind[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.form-item[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
-  grid-area: count;
-  min-width: 20px;
-  padding: 0 7px;
-  border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  border-radius: 99px;
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-.dot[_ngcontent-%COMP%] {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--%NS%ok);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 15%, transparent);
-}
-
-.dot[data-status=INVALID][_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 15%, transparent);
-}
-
-.dot[data-status=PENDING][_ngcontent-%COMP%] {
-  background: var(--%NS%warn);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%warn) 15%, transparent);
-}
-
-.dot[data-status=DISABLED][_ngcontent-%COMP%] {
-  background: var(--%NS%text-3);
-  box-shadow: none;
-}
-
-.page-toggle[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  min-height: 32px;
-  margin: 0 8px 8px;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.page-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.page-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-@media (max-width: 720px) {
-  .form-list[_ngcontent-%COMP%] {
-    max-height: 240px;
-    overflow-y: auto;
-  }
-}`]})},e$=()=>[],t$=(e,t)=>t.node.path;function n$(e,t){if(e&1&&(R(0,`span`,7),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function r$(e,t){if(e&1&&(R(0,`span`,7),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function i$(e,t){if(e&1&&(R(0,`span`,7),K(1),Z_(2,`json`),z()),e&2){let e=t.$implicit;D(),J(`metadata `,Q_(2,1,e))}}function a$(e,t){if(e&1&&(R(0,`span`,7),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function o$(e,t){if(e&1&&(R(0,`tr`)(1,`th`,5)(2,`code`),K(3),z(),R(4,`span`,6),K(5),z()(),R(6,`td`),M(7,n$,2,1,`span`,7,eg),z(),R(9,`td`),M(10,r$,2,1,`span`,7,eg),M(12,i$,3,3,`span`,7,$h),z(),R(14,`td`),M(15,a$,2,1,`span`,7,eg),z()()),e&2){let e=t.$implicit;D(),t_(`padding-left`,12+e.depth*16,`px`),D(2),q(e.node.key||`(form)`),D(2),q(e.node.type),D(2),N(e.rules),D(3),N(e.constraints),D(2),N(e.node.metadata??G_(4,e$)),D(3),N(e.states)}}function s$(e,t){if(e&1&&(R(0,`div`,1)(1,`table`,3)(2,`thead`)(3,`tr`)(4,`th`,4),K(5,`Field`),z(),R(6,`th`,4),K(7,`Rules`),z(),R(8,`th`,4),K(9,`Constraints`),z(),R(10,`th`,4),K(11,`State now`),z()()(),R(12,`tbody`),M(13,o$,17,5,`tr`,null,t$),z()()()),e&2){let e=W();D(13),N(e.rows())}}function c$(e,t){e&1&&(R(0,`p`,2),K(1,` No field of this form has a schema rule. Pass a schema function as the second argument of `),R(2,`code`),K(3,`form()`),z(),K(4,` to add validators and rules. `),z())}var l$=[[`sync`,`validator`,`validators`],[`tree`,`cross-field rule`,`cross-field rules`],[`async`,`async validator`,`async validators`],[`hidden`,`hidden rule`,`hidden rules`],[`disabled`,`disabled rule`,`disabled rules`],[`readonly`,`readonly rule`,`readonly rules`],[`metadata`,`metadata entry`,`metadata entries`]];function u$(e){let t=e.required?[`required`]:[];for(let[n,r,i]of l$){let a=e.rules?.[n];a&&t.push(`${a} ${a===1?r:i}`)}return t}function d$(e){let t=[];e.hidden&&t.push(e.hiddenBy===`parent`?`hidden by a parent`:`hidden`),e.readonly&&t.push(e.readonlyBy===`parent`?`readonly by a parent`:`readonly`);for(let n of e.disabledReasons??[])t.push(`disabled: ${n}`);return e.debouncing&&t.push(`debouncing`),t}var f$=class e{form=$.required();rows=X(()=>{let e=[],t=(n,r)=>{let i=e.length,a={node:n,depth:r,rules:u$(n),constraints:Object.entries(n.constraints??{}).map(([e,t])=>`${e} ${t}`),states:d$(n)},o=a.rules.length>0||a.constraints.length>0||a.states.length>0||!!n.metadata?.length;for(let e of n.children??[])o=t(e,r+1)||o;return o&&e.splice(i,0,a),o};return t(this.form().root,0),e});static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-schema`]],inputs:{form:[1,`form`]},decls:7,vars:1,consts:[[1,`intro`],[`role`,`region`,`aria-label`,`Schema rules`,`tabindex`,`0`,1,`table-scroll`],[1,`empty`],[1,`schema`],[`scope`,`col`],[`scope`,`row`],[1,`type`],[1,`chip`]],template:function(e,t){e&1&&(R(0,`p`,0),K(1,` The rules the schema function of `),R(2,`code`),K(3,`form()`),z(),K(4,` sets on each field, read from Angular's logic tree, with the constraints and states they produce right now. Fields without rules are left out. `),z(),A(5,s$,15,0,`div`,1)(6,c$,5,0,`p`,2)),e&2&&(D(5),j(t.rows().length?5:6))},dependencies:[$v],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.intro[_ngcontent-%COMP%], 
-.empty[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.table-scroll[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.table-scroll[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.schema[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-.schema[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
-.schema[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-.schema[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
-  border-bottom: 0;
-}
-
-.schema[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.schema[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.type[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 2px 4px 2px 0;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 12px;
-  line-height: 20px;
-  overflow-wrap: anywhere;
-}`]})};function p$(e,t){if(e&1){let e=B();R(0,`div`,0)(1,`p`,4),K(2,`Could not explain this form`),z(),R(3,`p`),K(4,`The devtools server did not answer. Check that the app is running, then try again.`),z(),R(5,`button`,2),U(`click`,function(){return S(e),C(W().retry())}),K(6,`Try again`),z()()}}function m$(e,t){if(e&1&&(R(0,`section`,5)(1,`h3`,6),K(2,`Submit`),z(),R(3,`pre`,7),K(4),z()(),R(5,`section`,8)(6,`h3`,9),K(7,`Payload`),z(),R(8,`pre`,7),K(9),z()()),e&2){let e=W();D(3),k(`aria-busy`,e.submit()===null?`true`:null),D(),q(e.submit()??`Loading…`),D(4),k(`aria-busy`,e.payload()===null?`true`:null),D(),q(e.payload()??`Loading…`)}}function h$(e,t){if(e&1){let e=B();R(0,`div`,0)(1,`p`,3),K(2,`Could not check this form`),z(),R(3,`p`),K(4,`The devtools server did not answer. Check that the app is running, then try again.`),z(),R(5,`button`,4),U(`click`,function(){return S(e),C(W().retry())}),K(6,`Try again`),z()()}}function g$(e,t){e&1&&(R(0,`div`,1),dg(1,`span`,5),R(2,`p`),K(3,`Checking the form for problems…`),z()())}function _$(e,t){e&1&&(R(0,`div`,2)(1,`span`,6),w(),R(2,`svg`,7),dg(3,`path`,8),z()(),fs(),R(4,`p`,3),K(5,`No problems found`),z(),R(6,`p`),K(7,`For generic accessibility checks, run axe on the page.`),z()())}function v$(e,t){if(e&1){let e=B();R(0,`span`,15),K(1,`at `),R(2,`button`,19),U(`click`,function(){let t=S(e);return C(W(3).showField.emit(t))}),R(3,`span`,20),K(4,`Show field `),z(),R(5,`code`),K(6),z()()()}e&2&&(D(6),q(t))}function y$(e,t){if(e&1&&(R(0,`li`)(1,`div`,12)(2,`span`,13),K(3),z(),R(4,`code`,14),K(5),z(),A(6,v$,7,1,`span`,15),z(),R(7,`p`,16),K(8),z(),R(9,`p`,17)(10,`span`,18),K(11,`Fix`),z(),K(12),z()()),e&2){let e,n=t.$implicit;k(`data-severity`,n.severity),D(2),k(`data-tone`,n.severity===`info`?``:n.severity===`error`?`bad`:`warn`),D(),q(n.severity),D(2),q(n.rule),D(),j((e=n.path)?6:-1,e),D(2),q(n.message),D(4),J(` `,n.fix)}}function b$(e,t){if(e&1&&(R(0,`p`,9)(1,`span`,10),K(2),z(),K(3),z(),R(4,`ul`,11),M(5,y$,13,7,`li`,null,$h),z()),e&2){let e=W();D(2),q(e.findings().length),D(),J(` `,e.findings().length===1?`finding`:`findings`,` `),D(2),N(e.findings())}}var x$=class e{formId=$.required();version=$(0);rpc=$(null);submit=Q({source:this.formId,computation:()=>null});payload=Q({source:this.formId,computation:()=>null});failed=Q({source:this.formId,computation:()=>!1});message=T(``);attempt=T(0);constructor(){E(()=>{let e=this.formId();this.version(),this.attempt();let t=this.rpc();t&&Z(async()=>{let[n,r]=await Promise.all([mT(t,`forms-explain`,{kind:`submit`,form:e}),mT(t,`forms-explain`,{kind:`payload`,form:e})]);if(this.formId()===e){if(n===null||r===null){this.failed.set(!0);return}this.failed.set(!1),this.submit.set(xT(n)),this.payload.set(xT(r))}})})}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}async copyFixture(){let e=(await mT(this.rpc(),`forms-explain`,{kind:`fixture`,form:this.formId()})??``).match(/```ts\n([\s\S]*)```\s*$/)?.[1];if(!e){this.message.set(`No test fixture is available for this form.`);return}try{await navigator.clipboard.writeText(e),this.message.set(`Copied.`)}catch{this.message.set(`Clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-submit`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},decls:7,vars:2,consts:[[`role`,`alert`,1,`empty-state`],[1,`fixture`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`],[1,`empty-title`],[`aria-labelledby`,`forms-submit-title`,1,`block`],[`id`,`forms-submit-title`,1,`section-label`],[1,`explain`],[`aria-labelledby`,`forms-payload-title`,1,`block`],[`id`,`forms-payload-title`,1,`section-label`]],template:function(e,t){e&1&&(A(0,p$,7,0,`div`,0)(1,m$,10,4),R(2,`div`,1)(3,`button`,2),U(`click`,function(){return t.copyFixture()}),K(4,`Copy test fixture`),z(),R(5,`span`,3),K(6),z()()),e&2&&(j(+!t.failed()),D(6),q(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.block[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-}
-
-.explain[_ngcontent-%COMP%] {
-  max-height: 420px;
-  overflow: auto;
-}
-
-.fixture[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-}`]})},S$=class e{formId=$.required();version=$(0);rpc=$(null);showField=cv();findings=Q({source:this.formId,computation:()=>null});failed=Q({source:this.formId,computation:()=>!1});attempt=T(0);constructor(){E(()=>{let e=this.formId();this.version(),this.attempt();let t=this.rpc();t&&Z(async()=>{let n=await mT(t,`forms-lint`,{form:e});this.formId()===e&&(this.failed.set(n===null),n&&this.findings.set(n))})})}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-lint`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},outputs:{showField:`showField`},decls:4,vars:1,consts:[[`role`,`alert`,1,`empty-state`],[`role`,`status`,1,`empty-state`],[1,`empty-state`],[1,`empty-title`],[`type`,`button`,1,`small`,3,`click`],[`aria-hidden`,`true`,1,`spinner`],[`aria-hidden`,`true`,1,`ok-icon`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`],[1,`summary`],[1,`tabular`],[1,`findings`],[1,`meta`],[1,`tag`,`severity`],[1,`rule`],[1,`muted`,`path`],[1,`message`],[1,`fix`],[1,`fix-label`],[`type`,`button`,1,`summary-link`,3,`click`],[1,`sr-only`]],template:function(e,t){e&1&&A(0,h$,7,0,`div`,0)(1,g$,4,0,`div`,1)(2,_$,8,0,`div`,2)(3,b$,7,2),e&2&&j(t.failed()?0:t.findings()===null?1:t.findings().length?3:2)},styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.ok-icon[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  margin-bottom: 4px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.summary[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-}
-
-.tabular[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.findings[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  color: var(--%NS%text);
-  font-size: 13px;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding: 12px 16px;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  box-shadow: inset 3px 0 0 var(--%NS%border-strong);
-  transition: border-color 150ms var(--%NS%ease);
-}
-
-.findings[_ngcontent-%COMP%]   li[data-severity=error][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%danger);
-}
-
-.findings[_ngcontent-%COMP%]   li[data-severity=warning][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%warn);
-}
-
-.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  min-width: 0;
-}
-
-.severity[_ngcontent-%COMP%] {
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.rule[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.path[_ngcontent-%COMP%] {
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-.message[_ngcontent-%COMP%], 
-.fix[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.fix[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-}
-
-.fix-label[_ngcontent-%COMP%] {
-  margin-right: 4px;
-  color: var(--%NS%accent);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}`]})};function C$(e,t){if(e&1&&(R(0,`span`,3),K(1),z()),e&2){let e=W().$implicit;D(),J(`on page `,e.pageId)}}function w$(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z(),A(3,C$,2,1,`span`,3),z()),e&2){let e=t.$implicit,n=W();D(2),q(e.message),D(),j(n.showPages()?3:-1)}}var T$=class e{errors=$.required();showPages=$(!1);static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-setup-errors`]],inputs:{errors:[1,`errors`],showPages:[1,`showPages`]},decls:8,vars:2,consts:[[`role`,`status`,1,`setup-errors`],[1,`setup-title`],[1,`setup-hint`],[1,`setup-page`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`p`,1),K(2),z(),R(3,`p`,2),K(4,` A form with a setup error can be missing from the list or behave unlike its template. Check the directives and value accessors it names. `),z(),R(5,`ul`),M(6,w$,4,2,`li`,null,$h),z()()),e&2&&(D(2),Y(` Angular reported `,t.errors().length,` forms setup `,t.errors().length===1?`error`:`errors`,` `),D(4),N(t.errors()))},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.setup-errors[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0 0 12px;
-  padding: 10px 12px;
-  border: 1px solid;
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-  border-radius: var(--%NS%radius-sm);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.setup-errors[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.setup-title[_ngcontent-%COMP%] {
-  font-weight: 600;
-}
-
-.setup-errors[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  margin: 0;
-  padding: 0 0 0 16px;
-  min-width: 0;
-}
-
-.setup-errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-.setup-page[_ngcontent-%COMP%] {
-  margin-left: 6px;
-}`]})},E$=[`pathInput`],D$=()=>[],O$=(e,t)=>t.formId+`#`+t.seq;function k$(e,t){e&1&&L(0,`span`,6)}function A$(e,t){if(e&1){let e=B();F(0,`label`)(1,`input`,17),H(`change`,function(){let t=S(e).$implicit;return C(W().filter.set(t))}),I(),K(2),I()}if(e&2){let e=t.$implicit,n=W();D(),P(`value`,e)(`checked`,e===n.filter()),D(),J(` `,e,` `)}}function j$(e,t){if(e&1&&(F(0,`span`,22),K(1),I()),e&2){let e=W().$implicit;k(`data-tone`,e.outcome===`ran`?``:`bad`),D(),q(e.outcome)}}function M$(e,t){if(e&1&&(F(0,`span`,22),K(1),I()),e&2){let e=W().$implicit;D(),J(`×`,e.count)}}function N$(e,t){if(e&1&&(F(0,`span`,22),K(1),I()),e&2){let e=W().$implicit;D(),q(e.origin)}}function P$(e,t){if(e&1&&(F(0,`span`,22),K(1),I()),e&2){let e=W().$implicit;k(`data-tone`,e.ms>1e3?`warn`:``),D(),J(`pending `,e.ms,`ms`)}}function F$(e,t){if(e&1&&(F(0,`span`,22),K(1),I()),e&2){let e=W().$implicit;k(`data-tone`,e.renders>20?`warn`:``),D(),Y(``,e.renders,` renders: `,(e.rendered??G_(3,D$)).join(`, `))}}function I$(e,t){if(e&1&&(F(0,`span`,25),K(1),I(),F(2,`span`,26),K(3,`→`),I(),F(4,`span`,9),K(5,`changed to`),I()),e&2){let e=W(2).$implicit;D(),q(e.prev)}}function L$(e,t){if(e&1&&(F(0,`div`,23),A(1,I$,6,1),K(2),I()),e&2){let e=W().$implicit;D(),j(e.prev===void 0?-1:1),D(),J(` `,e.detail,` `)}}function R$(e,t){if(e&1&&(F(0,`span`,24),K(1),I()),e&2){let e=W().$implicit;D(),J(`from `,e.caller)}}function z$(e,t){if(e&1&&(F(0,`li`)(1,`time`),K(2),I(),F(3,`div`,18)(4,`div`,19)(5,`code`,20),K(6),I(),F(7,`span`,21),K(8),I(),A(9,j$,2,2,`span`,22),A(10,M$,2,1,`span`,22),A(11,N$,2,1,`span`,22),A(12,P$,2,2,`span`,22),A(13,F$,2,4,`span`,22),I(),A(14,L$,3,2,`div`,23),A(15,R$,2,1,`span`,24),I()()),e&2){let e=t.$implicit,n=W(2);k(`data-type`,e.type),D(),k(`datetime`,n.iso(e.timestamp)),D(),q(n.time(e.timestamp)),D(4),q(e.path||`(form)`),D(2),q(e.type),D(),j(e.outcome?9:-1),D(),j(e.count&&e.count>1?10:-1),D(),j(e.origin?11:-1),D(),j(e.ms===void 0?-1:12),D(),j(e.renders?13:-1),D(),j(e.prev!==void 0||e.detail?14:-1),D(),j(e.caller?15:-1)}}function B$(e,t){if(e&1&&(F(0,`ol`,15),M(1,z$,16,12,`li`,null,O$),I()),e&2){let e=W();D(),N(e.shown())}}function V$(e,t){if(e&1){let e=B();F(0,`div`,16)(1,`p`,27),K(2,`No events match these filters`),I(),F(3,`p`),K(4,`Change the path, type or origin, or interact with the form to record more.`),I(),F(5,`button`,28),H(`click`,function(){return S(e),C(W().clearFilters())}),K(6,`Clear filters`),I()()}}function H$(e,t){e&1&&(F(0,`div`,16)(1,`p`,27),K(2,`No changes yet`),I(),F(3,`p`),K(4,`Type into the form to see them here.`),I()())}var U$=[`all`,`user`,`code`,`agent`,`devtools`],W$=[`value`,`status`,`touched`,`dirty`,`submit`,`reset`,`added`,`removed`,`moved`,`validators`],G$=class e{events=$.required();recording=$(!1);record=cv();toggle(e){let t=e.target;t.checked=this.recording(),this.record.emit(!this.recording())}origins=U$;filter=T(`all`);pathFilter=T(``);typeFilter=T(`all`);pathInput=hv(`pathInput`);typeOptions=X(()=>{let e=new Set(this.events().map(e=>e.type)),t=this.typeFilter();t&&t!==`all`&&e.add(t);let n=W$.filter(t=>e.has(t)),r=[...e].filter(e=>!W$.includes(e)).sort();return[{value:`all`,label:`All types`},...[...n,...r].map(e=>({value:e,label:e}))]});matching=X(()=>{let e=this.filter(),t=this.typeFilter()??`all`,n=this.pathFilter().trim().toLowerCase();return this.events().filter(r=>(e===`all`||r.origin===e)&&(t===`all`||r.type===t)&&(!n||r.path.toLowerCase().includes(n)))});shown=X(()=>this.matching().slice(-100).reverse());filtered=X(()=>this.filter()!==`all`||(this.typeFilter()??`all`)!==`all`||!!this.pathFilter().trim());summary=X(()=>{let e=this.events().length,t=this.matching().length,n=e=>e===1?`event`:`events`,r=this.filtered()?` matching ${n(t)}`:` ${n(t)}`;return t>100?`Showing the latest 100 of ${t}${r}`:this.filtered()?`${t} of ${e} ${n(e)}`:`${e} ${n(e)}`});filterStatus=X(()=>(this.filter(),this.typeFilter(),this.pathFilter(),Z(()=>this.summary())));clearFilters(){this.pathFilter.set(``),this.typeFilter.set(`all`),this.filter.set(`all`),this.pathInput()?.focus()}iso(e){return new Date(e).toISOString()}time=VE;static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-timeline`]],viewQuery:function(e,t){e&1&&Mg(t.pathInput,E$,5),e&2&&Ng()},inputs:{events:[1,`events`],recording:[1,`recording`]},outputs:{record:`record`},decls:25,vars:10,consts:[[`pathInput`,``],[1,`toolbar`],[1,`record`],[`type`,`checkbox`,3,`change`,`checked`],[1,`record-text`],[1,`record-title`],[`aria-hidden`,`true`,1,`rec-dot`],[1,`record-hint`],[1,`chips`],[1,`sr-only`],[1,`filters`],[`placeholder`,`Filter by field path`,`saveKey`,`forms-timeline`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Event type`,3,`valueChange`,`options`,`value`],[1,`total`],[`role`,`status`,1,`sr-only`],[1,`events`],[1,`empty-state`],[`type`,`radio`,`name`,`timeline-origin`,3,`change`,`value`,`checked`],[1,`body`],[1,`line`],[1,`path`],[1,`event-type`],[1,`tag`],[1,`detail`],[1,`caller`],[1,`prev`],[`aria-hidden`,`true`,1,`arrow`],[1,`empty-title`],[`type`,`button`,1,`small`,3,`click`]],template:function(e,t){if(e&1){let e=B();F(0,`div`,1)(1,`label`,2)(2,`input`,3),H(`change`,function(e){return t.toggle(e)}),I(),F(3,`span`,4)(4,`span`,5),A(5,k$,1,0,`span`,6),K(6,` Record details `),I(),F(7,`span`,7),K(8,`Record calling code, validator changes and renders per keystroke`),I()()(),F(9,`fieldset`,8)(10,`legend`,9),K(11,`Show changes from`),I(),M(12,A$,3,3,`label`,null,eg),I()(),F(14,`div`,10)(15,`app-search-field`,11,0),M_(`valueChange`,function(n){return S(e),j_(t.pathFilter,n)||(t.pathFilter=n),C(n)}),I(),F(17,`app-select`,12),M_(`valueChange`,function(n){return S(e),j_(t.typeFilter,n)||(t.typeFilter=n),C(n)}),I(),F(18,`span`,13),K(19),I(),F(20,`span`,14),K(21),I()(),A(22,B$,3,0,`ol`,15)(23,V$,7,0,`div`,16)(24,H$,5,0,`div`,16)}e&2&&(D(),G(`on`,t.recording()),D(),P(`checked`,t.recording()),D(3),j(t.recording()?5:-1),D(7),N(t.origins),D(3),A_(`value`,t.pathFilter),D(2),P(`options`,t.typeOptions()),A_(`value`,t.typeFilter),D(2),q(t.summary()),D(2),q(t.filterStatus()),D(),j(t.shown().length?22:t.events().length?23:24))},dependencies:[$N,wD],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.record[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: 1 1 260px;
-  gap: 10px;
-  align-items: flex-start;
-  min-width: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  cursor: pointer;
-  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
-}
-
-.record[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.record.on[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-}
-
-.record[_ngcontent-%COMP%]:has(input:focus-visible) {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.record[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 2px 0 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-.record[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-}
-
-.record-text[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
-
-.record-title[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.record-hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.rec-dot[_ngcontent-%COMP%] {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--%NS%danger);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 20%, transparent);
-  animation: _ngcontent-%COMP%_rec-pulse 1.6s ease-in-out infinite;
-}
-
-@keyframes _ngcontent-%COMP%_rec-pulse {
-  50% {
-    opacity: 0.45;
-  }
-}
-.chips[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: none;
-  gap: 2px;
-  min-width: 0;
-  height: 34px;
-  margin: 0;
-  padding: 2px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  height: 28px;
-  padding: 0 12px;
-  border-radius: 7px;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  font-weight: 500;
-  text-transform: capitalize;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-  background: var(--%NS%surface-2);
-}
-
-.chips[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:checked) {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
-}
-
-.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:focus-visible) {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.filters[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  min-width: 0;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-input[type=search][_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[type=search][_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.filters[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  width: 150px;
-}
-
-.total[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.empty-state[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 6px;
-}
-
-.events[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  margin: 0;
-  padding: 4px;
-  list-style: none;
-  background: var(--%NS%surface-2);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  font-size: 13px;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.events[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: 11ch minmax(0, 1fr);
-  gap: 12px;
-  align-items: baseline;
-  padding: 8px 12px;
-  border-radius: 6px;
-  color: var(--%NS%text);
-  transition: background-color 150ms var(--%NS%ease);
-  
-  content-visibility: auto;
-  contain-intrinsic-size: auto 52px;
-}
-
-.events[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.events[_ngcontent-%COMP%]   li[data-type=submit][_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-  color: var(--%NS%text-strong);
-}
-
-.events[_ngcontent-%COMP%]   li[data-type=submit][_ngcontent-%COMP%]   time[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-time[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.body[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-}
-
-.line[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  min-width: 0;
-}
-
-.path[_ngcontent-%COMP%] {
-  color: #fde68a;
-  overflow-wrap: anywhere;
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .path[_ngcontent-%COMP%] {
-    color: var(--%NS%accent);
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .path[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-
-.event-type[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.tag[_ngcontent-%COMP%] {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.detail[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-.prev[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-decoration: line-through;
-  text-decoration-color: color-mix(in srgb, var(--%NS%text-2) 50%, transparent);
-}
-
-.arrow[_ngcontent-%COMP%] {
-  margin: 0 6px;
-  color: var(--%NS%text-3);
-}
-
-.caller[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-@media (max-width: 480px) {
-  .events[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 4px;
-  }
-  .chips[_ngcontent-%COMP%] {
-    width: 100%;
-  }
-  .filters[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-    flex: 1 1 140px;
-    width: auto;
-  }
-  .total[_ngcontent-%COMP%] {
-    flex: 1 1 100%;
-  }
-  .chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
-    flex: 1;
-    justify-content: center;
-    padding: 0 8px;
-  }
-}`]})},K$=(e,t)=>t.path;function q$(e,t){e&1&&(R(0,`span`,6),K(1,`duplicate name`),z())}function J$(e,t){if(e&1&&(R(0,`p`,7),K(1),z()),e&2){let e=W();D(),q(e.description)}}function Y$(e,t){if(e&1&&(R(0,`p`,8),K(1),z()),e&2){let e=W();D(),q(e.error)}}function X$(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z(),K(3),z()),e&2){let e=t.$implicit;D(2),q(e.path),D(),J(` is `,e.reason,` `)}}function Z$(e,t){if(e&1&&(R(0,`div`,9)(1,`p`,10),K(2,`Angular could not infer an input schema. These fields block it:`),z(),R(3,`ul`),M(4,X$,4,2,`li`,null,K$),z()()),e&2){let e=W();D(4),N(e.blocking)}}function Q$(e,t){e&1&&(R(0,`span`,14),K(1,`required`),z())}function $$(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z(),A(3,Q$,2,0,`span`,14),z()),e&2){let e=t.$implicit,n=W(3);D(2),q(e),D(),j(n.isRequired(e)?3:-1)}}function e1(e,t){if(e&1&&(R(0,`div`,9)(1,`p`,10),K(2,`Inputs`),z(),R(3,`ul`,13),M(4,$$,4,2,`li`,null,eg),z()()),e&2){let e=W();D(4),N(e.inputs)}}function t1(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z(),K(3),z()),e&2){let e=t.$implicit;D(2),q(e.path),D(),J(` is now `,e.now?`required`:`optional`,` `)}}function n1(e,t){if(e&1&&(R(0,`div`,9)(1,`p`,10),K(2,` Required changed since registration. Angular reads it once, so agents still see the old schema: `),z(),R(3,`ul`),M(4,t1,4,2,`li`,null,K$),z()()),e&2){let e=W();D(4),N(e.requiredChanged)}}function r1(e,t){e&1&&(R(0,`span`,14),K(1,`tried from the panel`),z())}function i1(e,t){if(e&1&&(R(0,`span`,10),K(1),z()),e&2){let e=W().$implicit;D(),J(``,e.ms,` ms`)}}function a1(e,t){if(e&1&&(R(0,`span`,10),K(1),z()),e&2){let e=W().$implicit;D(),J(`fields `,e.fields.join(`, `))}}function o1(e,t){if(e&1&&(R(0,`pre`,15),K(1),z()),e&2){let e=W().$implicit;D(),q(e.detail)}}function s1(e,t){if(e&1&&(R(0,`li`)(1,`time`),K(2),Z_(3,`date`),z(),R(4,`span`,5),K(5),z(),A(6,r1,2,0,`span`,14),A(7,i1,2,1,`span`,10),A(8,a1,2,1,`span`,10),A(9,o1,2,1,`pre`,15),z()),e&2){let e=t.$implicit,n=W(3);D(),k(`datetime`,n.iso(e.at)),D(),q($_(3,8,e.at,`HH:mm:ss`)),D(2),k(`data-state`,e.outcome),D(),q(n.outcome(e.outcome)),D(),j(e.tried?6:-1),D(),j(e.ms===void 0?-1:7),D(),j(e.fields?.length?8:-1),D(),j(e.detail?9:-1)}}function c1(e,t){if(e&1&&(R(0,`ul`),M(1,s1,10,11,`li`,null,$h),z()),e&2){let e=W();D(),N(e.calls)}}function l1(e,t){e&1&&(R(0,`p`,10),K(1,` Calls are not recorded for a tool registered before the inspector attached. `),z())}function u1(e,t){e&1&&(R(0,`p`,10),K(1,`No agent has called this tool since the inspector attached.`),z())}function d1(e,t){if(e&1&&(R(0,`details`,11)(1,`summary`),K(2,`Input schema`),z(),R(3,`pre`,15),K(4),Z_(5,`json`),z()()),e&2){let e=W();D(4),q(Q_(5,1,e.schema))}}function f1(e,t){if(e&1&&(R(0,`p`,18),K(1),z()),e&2){let e=W(3);V(`id`,e.uid+`-try-off`),D(),q(e.writesOff)}}function p1(e,t){if(e&1){let e=B();R(0,`div`,12)(1,`label`,16),K(2,`Tool input (JSON)`),z(),R(3,`textarea`,17),U(`input`,function(t){return S(e),C(W(2).draft.set(t.target.value))}),z(),R(4,`p`,18),K(5,` Runs the tool in the app the way an agent call does: it fills the form and submits it. `),z(),R(6,`div`,19)(7,`button`,20),U(`click`,function(){return S(e),C(W(2).tryTool())}),K(8),z()(),A(9,f1,2,2,`p`,18),R(10,`p`,21),K(11),z()()}if(e&2){let e=W(2);k(`aria-labelledby`,e.uid+`-try-label`),D(),V(`id`,e.uid+`-try-label`)(`htmlFor`,e.uid+`-try-input`),D(2),V(`id`,e.uid+`-try-input`)(`value`,e.draft()),k(`aria-describedby`,e.uid+`-try-hint`),D(),V(`id`,e.uid+`-try-hint`),D(3),G(`armed`,e.armed()),V(`disabled`,!e.canWrite()||e.running()),k(`aria-describedby`,e.canWrite()?null:e.uid+`-try-off`),D(),J(` `,e.armed()?`Confirm try`:`Try this tool`,` `),D(),j(e.canWrite()?-1:9),D(2),q(e.message())}}function m1(e,t){if(e&1&&(R(0,`section`,0)(1,`div`,2)(2,`h3`,3),K(3,`WebMCP tool`),z(),R(4,`code`,4),K(5),z(),R(6,`span`,5),K(7),z(),A(8,q$,2,0,`span`,6),z(),A(9,J$,2,1,`p`,7),A(10,Y$,2,1,`p`,8),A(11,Z$,6,0,`div`,9),A(12,e1,6,0,`div`,9),A(13,n1,6,0,`div`,9),R(14,`div`,9)(15,`p`,10),K(16,`Recent calls`),z(),A(17,c1,3,0,`ul`)(18,l1,2,0,`p`,10)(19,u1,2,0,`p`,10),z(),A(20,d1,6,3,`details`,11),A(21,p1,12,14,`div`,12),z()),e&2){let e=t,n=W();k(`aria-labelledby`,n.uid+`-title `+n.uid+`-name`),D(2),V(`id`,n.uid+`-title`),D(2),V(`id`,n.uid+`-name`),D(),q(e.name),D(),k(`data-state`,e.status),D(),q(n.statusText()),D(),j(e.duplicate?8:-1),D(),j(e.description?9:-1),D(),j(e.status===`failed`&&e.error&&e.error!==`schema`?10:-1),D(),j(e.blocking?.length?11:-1),D(),j(e.inputs?.length?12:-1),D(),j(e.requiredChanged?.length?13:-1),D(4),j(e.calls?.length?17:e.seen===`list`?18:19),D(3),j(e.schema?20:-1),D(),j(n.formId()&&e.status===`registered`?21:-1)}}function h1(e,t){e&1&&(R(0,`p`,1),K(1,` This app uses `),R(2,`code`),K(3,`provideExperimentalWebMcpForms()`),z(),K(4,`, but the browser has no `),R(5,`code`),K(6,`modelContext`),z(),K(7,`, so Angular registers no WebMCP tool for this form. `),z())}function g1(e,t){if(e&1&&(F(0,`p`,5),K(1,` Page `),F(2,`code`),K(3),I()()),e&2){let e=W().$implicit;D(3),q(e.pageId)}}function _1(e,t){if(e&1&&(F(0,`li`),A(1,g1,4,1,`p`,5),L(2,`app-forms-webmcp`,6),I()),e&2){let e=t.$implicit,n=W(2);D(),j(n.manyPages()?1:-1),D(),P(`tool`,e.tool)}}function v1(e,t){if(e&1&&(F(0,`section`,0)(1,`h2`,1),K(2,` Other WebMCP tools `),F(3,`span`,2),K(4),I()(),F(5,`p`,3),K(6,` Tools registered on the page that are not linked to a form in the list, such as tools the app registers itself. `),I(),F(7,`ul`,4),M(8,_1,3,2,`li`,null,$h),I()()),e&2){let e=W();D(4),q(e.tools().length),D(4),N(e.tools())}}var y1=0,b1={running:`running`,submitted:`submitted`,failed:`submit failed`,done:`done`,threw:`threw`};function x1(e,t=0){if(!e||typeof e!=`object`||t>10)return null;let n=e;switch(n.type){case`object`:{let e={},r=n.properties??{};for(let[n,i]of Object.entries(r))e[n]=x1(i,t+1);return e}case`array`:return[x1(n.items,t+1)];case`string`:return``;case`number`:case`integer`:return 0;case`boolean`:return!1;default:return null}}var S1=class e{uid=`forms-webmcp-${++y1}`;tool=$();page=$();signalForm=$(!1);formId=$();rpc=$(null);canWrite=X(()=>OT(this.rpc(),`forms`));writesOff=Mw(`forms`);target=X(()=>`${this.formId()??``}|${this.tool()?.name??``}`);schemaText=X(()=>JSON.stringify(x1(this.tool()?.schema)??{},null,2));draft=Q({source:()=>({target:this.target(),sample:this.schemaText()}),computation:(e,t)=>t&&t.source.target===e.target?t.value:e.sample});armed=Q({source:this.target,computation:()=>!1});running=Q({source:this.target,computation:()=>!1});message=Q({source:this.target,computation:()=>``});async tryTool(){let e=this.formId();if(!e||this.running())return;let t;try{t=JSON.parse(this.draft())}catch{this.message.set(`The tool input is not valid JSON.`);return}if(!t||typeof t!=`object`||Array.isArray(t)){this.message.set(`The tool input must be a JSON object.`);return}if(!this.armed()){this.armed.set(!0),this.message.set(`Press "Confirm try" to run the tool in the app. It submits the form.`);return}this.armed.set(!1);let n=this.target();this.running.set(!0);try{let r=await vT(this.rpc(),{action:`try-webmcp`,formId:e,value:t,confirm:!0});if(this.target()!==n)return;this.message.set(yT(r))}finally{this.target()===n&&this.running.set(!1)}}statusText=X(()=>{let e=this.tool();return e?e.status===`failed`?`not registered`:e.status===`registering`?`registering`:e.seen===`list`?`registered before the inspector attached`:`registered`:``});noModelContext=X(()=>{let e=this.page();return this.signalForm()&&!!e&&!e.modelContext&&!!e.provided});isRequired(e){let t=e.slice(0,e.lastIndexOf(`:`));return this.tool()?.required?.includes(t)??!1}outcome(e){return b1[e]??e}iso(e){return new Date(e).toISOString()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-webmcp`]],inputs:{tool:[1,`tool`],page:[1,`page`],signalForm:[1,`signalForm`],formId:[1,`formId`],rpc:[1,`rpc`]},decls:2,vars:1,consts:[[1,`webmcp`],[1,`note`],[1,`head`],[1,`section-label`,3,`id`],[1,`name`,3,`id`],[1,`state`],[`data-state`,`failed`,1,`state`],[1,`description`],[1,`problem`],[1,`group`],[1,`muted`],[1,`schema`],[`role`,`group`,1,`try`],[1,`inputs`],[1,`tag`],[1,`detail`],[1,`muted`,3,`id`,`for`],[`rows`,`4`,`spellcheck`,`false`,`autocomplete`,`off`,1,`try-input`,3,`input`,`id`,`value`],[1,`muted`,3,`id`],[1,`try-row`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`role`,`status`,1,`status`]],template:function(e,t){if(e&1&&A(0,m1,22,15,`section`,0)(1,h1,8,0,`p`,1),e&2){let e;j((e=t.tool())?0:t.noModelContext()?1:-1,e)}},dependencies:[Qv,$v],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-[_nghost-%COMP%] {
-  display: contents;
-}
-
-.webmcp[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-size: 13px;
-  color: var(--%NS%text);
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  align-items: center;
-}
-
-.section-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-.name[_ngcontent-%COMP%] {
-  font-weight: 600;
-}
-
-.state[_ngcontent-%COMP%] {
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 999px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 20px;
-}
-
-.state[data-state=failed][_ngcontent-%COMP%], 
-.state[data-state=threw][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 45%, transparent);
-  color: var(--%NS%danger);
-}
-
-.state[data-state=registered][_ngcontent-%COMP%], 
-.state[data-state=submitted][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%text);
-}
-
-.description[_ngcontent-%COMP%], 
-.problem[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.problem[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.note[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 13px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.group[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-}
-
-ul[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0 0 0 16px;
-  overflow-wrap: anywhere;
-}
-
-li[_ngcontent-%COMP%] {
-  min-width: 0;
-}
-
-li[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%]    + *[_ngcontent-%COMP%] {
-  margin-left: 6px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.detail[_ngcontent-%COMP%] {
-  margin: 4px 0 0;
-  padding: 6px 8px;
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.schema[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.schema[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.try[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-}
-
-.try-input[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 6px 8px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  resize: vertical;
-}
-
-.try-input[_ngcontent-%COMP%]:focus, 
-.try-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.try-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.status[_ngcontent-%COMP%]:empty {
-  display: none;
-}`]})},C1=class e{pages=$([]);tools=X(()=>this.pages().flatMap(e=>e.tools.map(t=>({tool:t,pageId:e.pageId}))));manyPages=X(()=>new Set(this.tools().map(e=>e.pageId)).size>1);static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-webmcp-others`]],inputs:{pages:[1,`pages`]},decls:1,vars:1,consts:[[`aria-labelledby`,`forms-webmcp-others-title`,1,`others`],[`id`,`forms-webmcp-others-title`],[1,`count`],[1,`muted`],[1,`tools`],[1,`page`],[3,`tool`]],template:function(e,t){e&1&&A(0,v1,10,1,`section`,0),e&2&&j(t.tools().length?0:-1)},dependencies:[S1],styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.others[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-  margin-top: 16px;
-  padding: 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-h2[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.count[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  letter-spacing: 0;
-  line-height: 18px;
-  font-variant-numeric: tabular-nums;
-}
-
-.muted[_ngcontent-%COMP%], 
-.page[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-.tools[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.tools[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-}`]})},w1=(e,t)=>t.id;function T1(e,t){if(e&1&&L(0,`app-forms-setup-errors`,1),e&2){let e=W();P(`errors`,e.pageSetupErrors())(`showPages`,e.setupErrorPages())}}function E1(e,t){e&1&&(F(0,`div`,2),L(1,`span`,7),F(2,`p`),K(3,`Connecting to the devtools server…`),I()())}function D1(e,t){if(e&1){let e=B();F(0,`div`,3)(1,`p`,8),K(2,`Could not load forms`),I(),F(3,`p`,9),K(4,` The devtools server did not answer. Check that the app is running, then try again. `),I(),F(5,`button`,10),H(`click`,function(){return S(e),C(W().retry())}),K(6,`Try again`),I()()}}function O1(e,t){e&1&&(F(0,`div`,2),L(1,`span`,7),F(2,`p`),K(3,`Loading forms…`),I()())}function k1(e,t){e&1&&(F(0,`div`,4)(1,`p`,8),K(2,`No forms on the page yet`),I(),F(3,`p`,9),K(4,` Open a page that renders a form. Signal Forms, reactive and template-driven forms all show up here, in development builds. `),I()())}function A1(e,t){if(e&1){let e=B();F(0,`div`,4)(1,`p`,8),K(2,`No forms on this page`),I(),F(3,`p`,9),K(4),I(),F(5,`button`,10),H(`click`,function(){return S(e),C(W().allPages.set(!0))}),K(6,` Show forms from all pages `),I()()}if(e&2){let e=W();D(4),Y(` Other connected tabs report `,e.forms().length,` `,e.forms().length===1?`form`:`forms`,`. `)}}function j1(e,t){if(e&1){let e=B();F(0,`section`,12)(1,`h2`,14),K(2),I(),F(3,`p`,15),K(4,` This form is no longer on the page. It comes back here if the page renders it again. `),I(),F(5,`button`,10),H(`click`,function(){S(e);let t=W(2);return C(t.selectForm(t.visible()[0].id))}),K(6),I()()}if(e&2){let e=W(2);D(2),q(t),D(4),J(` Show `,e.visible()[0].label,` `)}}function M1(e,t){if(e&1){let e=B();F(0,`section`,12)(1,`h2`,14),K(2),I(),F(3,`p`,9),K(4,`This form is on another page. Tick "All pages" to see it again.`),I(),F(5,`button`,10),H(`click`,function(){return S(e),C(W(2).allPages.set(!0))}),K(6,` Show forms from all pages `),I()()}e&2&&(D(2),q(t))}function N1(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W();D(),q(e.submitted?`submitted`:`not submitted`)}}function P1(e,t){e&1&&(F(0,`span`),K(1,`submitting`),I())}function F1(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,29),H(`click`,function(){let t=S(e).$implicit;return C(W(4).showField(t.path))}),F(2,`span`,30),K(3,`Show field `),I(),F(4,`code`),K(5),I(),F(6,`span`,30),K(7,`:`),I(),K(8),F(9,`code`,31),K(10),I()()()}if(e&2){let e=t.$implicit;D(5),q(e.path||`(form)`),D(3),J(` `,e.message,` `),D(2),q(e.kind)}}function Hre(e,t){if(e&1&&(F(0,`details`,21)(1,`summary`),K(2),I(),F(3,`ul`),M(4,F1,11,3,`li`,null,$h),I()()),e&2){let e=W();D(2),J(`Error summary (`,e.errorSummary.length,`)`),D(2),N(e.errorSummary)}}function I1(e,t){if(e&1){let e=B();F(0,`button`,32),H(`click`,function(){let t=S(e).$implicit;return C(W(3).tab_.set(t.id))}),K(1),I()}if(e&2){let e=t.$implicit,n=W(3);P(`id`,`forms-tab-`+e.id),k(`aria-selected`,e.id===n.tab_())(`aria-controls`,`forms-panel-`+e.id)(`tabindex`,e.id===n.tab_()?0:-1),D(),J(` `,e.label,` `)}}function L1(e,t){if(e&1){let e=B();L(0,`app-redaction-count`,33),F(1,`app-forms-fields`,34),M_(`filterChange`,function(t){S(e);let n=W(3);return j_(n.filter,t)||(n.filter=t),C(t)})(`activeChange`,function(t){S(e);let n=W(3);return j_(n.active,t)||(n.active=t),C(t)}),H(`toggleField`,function(t){return S(e),C(W(3).toggleField(t))})(`closeField`,function(){return S(e),C(W(3).closeField())})(`clearFilters`,function(t){return S(e),C(W(3).clearFilters(t))})(`highlight`,function(t){return S(e),C(W(3).highlight(t?.formId??null,t?.path??``))}),I()}if(e&2){let e=W(),t=W(2);P(`value`,e),D(),P(`form`,e)(`rows`,t.rows())(`fieldPath`,t.fieldPath())(`selectedNode`,t.selectedNode())(`version`,t.version())(`rpc`,t.rpc())(`filtering`,t.filtering())(`filterStatus`,t.filterStatus()),A_(`filter`,t.filter)(`active`,t.active)}}function R1(e,t){e&1&&L(0,`app-forms-schema`,27),e&2&&P(`form`,W())}function z1(e,t){if(e&1){let e=B();L(0,`app-forms-export-test`,35)(1,`app-limit-note`,36),F(2,`app-forms-timeline`,37),H(`record`,function(t){return S(e),C(W(3).setRecording(t))}),I()}if(e&2){let e=W(),t=W(2);P(`formId`,e.id)(`rpc`,t.rpc()),D(),P(`dropped`,t.droppedEvents())(`max`,t.maxEvents()),D(),P(`events`,t.selectedEvents())(`recording`,t.recording())}}function B1(e,t){if(e&1&&L(0,`app-forms-submit`,28),e&2){let e=W(),t=W(2);P(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function V1(e,t){if(e&1){let e=B();F(0,`app-forms-lint`,38),H(`showField`,function(t){return S(e),C(W(3).showField(t))}),I()}if(e&2){let e=W(),t=W(2);P(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function H1(e,t){if(e&1){let e=B();F(0,`section`,13)(1,`div`,16)(2,`h2`,14),K(3),I(),F(4,`p`,17),K(5),F(6,`code`),K(7),I()()(),F(8,`div`,18)(9,`span`,19),K(10),I(),F(11,`span`),K(12),I(),F(13,`span`),K(14),I(),A(15,N1,2,1,`span`),A(16,P1,2,0,`span`),F(17,`span`,20)(18,`b`),K(19),I(),K(20,` fields · `),F(21,`b`),K(22),I(),K(23,` errors`),I()(),A(24,Hre,6,1,`details`,21),L(25,`app-forms-webmcp`,22),F(26,`app-forms-action-bar`,23),H(`act`,function(t){return S(e),C(W(2).act(t))})(`confirmAct`,function(t){return S(e),C(W(2).confirmAct(t))})(`pick`,function(){return S(e),C(W(2).pick())})(`cancelPick`,function(){return S(e),C(W(2).cancelPick())}),I(),F(27,`div`,24),H(`keydown`,function(t){return S(e),C(W(2).onKey(t))}),M(28,I1,2,5,`button`,25,w1),I(),F(30,`div`,26),A(31,L1,2,11)(32,R1,1,1,`app-forms-schema`,27)(33,z1,3,6)(34,B1,1,3,`app-forms-submit`,28)(35,V1,1,3,`app-forms-lint`,28),I()()}if(e&2){let e,n=t,r=W(2);D(3),q(n.label),D(2),J(` `,r.kindLabel(n.kind),` · `),D(2),q(n.id),D(2),k(`data-status`,n.root.status),D(),q(n.root.status),D(2),q(n.root.dirty?`dirty`:`pristine`),D(2),q(n.root.touched?`touched`:`untouched`),D(),j(n.submitted===void 0?-1:15),D(),j(n.root.submitting?16:-1),D(3),q(r.counts().get(n.id)?.fields),D(2),G(`has-errors`,r.counts().get(n.id)?.errors),D(),q(r.counts().get(n.id)?.errors),D(2),j(n.errorSummary?.length?24:-1),D(),P(`tool`,n.webMcp)(`page`,r.webMcpPage(n.id))(`signalForm`,n.kind===`signal`)(`formId`,n.id)(`rpc`,r.rpc()),D(),P(`canWrite`,r.canWrite())(`writesOff`,r.writesOff)(`picking`,r.picking())(`snapshot`,r.snapshot())(`armed`,r.armed())(`message`,r.message()),D(2),N(r.tabs()),D(2),P(`id`,`forms-panel-`+r.tab_()),k(`aria-labelledby`,`forms-tab-`+r.tab_()),D(),j((e=r.tab_())===`fields`?31:e===`schema`?32:e===`timeline`?33:e===`submit`?34:e===`lint`?35:-1)}}function U1(e,t){if(e&1){let e=B();F(0,`div`,5)(1,`app-forms-list`,11),M_(`allPagesChange`,function(t){S(e);let n=W();return j_(n.allPages,t)||(n.allPages=t),C(t)}),H(`selectForm`,function(t){return S(e),C(W().selectForm(t))}),I(),A(2,j1,7,2,`section`,12)(3,M1,7,1,`section`,12)(4,H1,36,28,`section`,13),I()}if(e&2){let e,t=W();D(),P(`forms`,t.visible())(`selectedId`,t.selected()?.id)(`counts`,t.counts())(`showToggle`,!!t.hostPageId&&(t.allPages()||t.otherPages())),A_(`allPages`,t.allPages),D(),j((e=t.missing())?2:(e=t.hidden())?3:(e=t.selected())?4:-1,e)}}function W1(e,t){e&1&&L(0,`app-forms-webmcp-others`,6),e&2&&P(`pages`,W().pageWebMcp())}var G1=[{id:`fields`,label:`Fields`},{id:`schema`,label:`Schema`},{id:`timeline`,label:`Timeline`},{id:`submit`,label:`Submit`},{id:`lint`,label:`Lint`}];function K1(e){return e.errors.length+(e.children??[]).reduce((e,t)=>e+K1(t),0)}function q1(e){return e.children?e.children.reduce((e,t)=>e+q1(t),0):+(e.type===`control`&&e.materialized!==!1)}var J1=class e{rpc=$(null);focus=$(null);canWrite=X(()=>OT(this.rpc(),`forms`));writesOff=Mw(`forms`);focusHandled=cv();forms=T([]);webMcp=T([]);events=T([]);loading=T(!0);failed=T(!1);selectedId=T(null);selectedLabel=T(null);hostPageId=tT();allPages=T(!1);visible=X(()=>{let e=this.forms(),t=this.hostPageId;return t&&!this.allPages()?e.filter(e=>dT(e.id)===t):e});otherPages=X(()=>this.forms().some(e=>dT(e.id)!==this.hostPageId));instrumented=T([]);recording=X(()=>{let e=this.selected()?.id??``;return this.instrumented().some(t=>e.endsWith(`@${t}`))});filter=T(``);tabs=X(()=>this.selected()?.kind===`signal`?G1:G1.filter(e=>e.id!==`schema`));tab_=Q({source:this.tabs,computation:(e,t)=>t&&e.some(e=>e.id===t.value)?t.value:`fields`});active=T(new Set);filtering=X(()=>!!this.filter()||this.active().size>0);filterStatus=T(``);version=T(0);message=T(``);setupErrors=T([]);pageSetupErrors=X(()=>this.onShownPages(this.setupErrors()));setupErrorPages=X(()=>new Set(this.pageSetupErrors().map(e=>e.pageId)).size>1);pageWebMcp=X(()=>this.onShownPages(this.webMcp()).filter(e=>e.tools.length));onShownPages(e){let t=this.hostPageId;return t&&!this.allPages()?e.filter(e=>e.pageId===t):e}webMcpPage(e){let t=dT(e);return this.webMcp().find(e=>e.pageId===t)}picking=T(null);pickSeq=0;unsubscribe=null;destroyRef=x(Ss);host=x(Ml);injector=x(bs);counts=X(()=>new Map(this.visible().map(e=>[e.id,{fields:q1(e.root),errors:K1(e.root)}])));chosen=X(()=>{let e=this.selectedId();if(e===null)return null;let t=this.forms(),n=this.selectedLabel(),r=dT(e);return t.find(t=>t.id===e)??t.find(e=>e.label===n&&dT(e.id)===r)??null});selected=X(()=>{let e=this.visible();if(this.selectedId()===null)return e[0]??null;let t=this.chosen();return t&&e.includes(t)?t:null});missing=X(()=>this.selectedId()!==null&&!this.chosen()&&this.visible().length?this.selectedLabel()??this.selectedId():null);hidden=X(()=>{let e=this.chosen();return e&&!this.selected()&&this.visible().length?e.label:null});selectedFormId=X(()=>this.selected()?.id??null);fieldPath=Q({source:this.selectedFormId,computation:()=>null});armed=Q({source:this.selectedFormId,computation:()=>null});snapshot=Q({source:this.selectedFormId,computation:()=>null});rows=X(()=>{let e=this.selected();if(!e)return[];let t=this.filter().toLowerCase(),n=Array.from(this.active()),r=[],i=(e,a)=>{let o=r.length,s=(!t||e.path.toLowerCase().includes(t))&&n.every(t=>KQ(e,t));for(let t of e.children??[])s=i(t,a+1)||s;return s&&r.splice(o,0,{node:e,depth:a}),s};return i(e.root,0),r});selectedNode=X(()=>{let e=this.fieldPath(),t=this.selected();if(e===null||!t)return null;let n=t=>t.path===e?t:(t.children??[]).map(n).find(Boolean)??null;return n(t.root)});dropped=T({});droppedEvents=X(()=>{let e=this.selected()?.id;return e?this.dropped()[dT(e)]??0:0});maxEvents=X(()=>TT(this.rpc()).limits.formTimeline);selectedEvents=X(()=>{let e=this.selected()?.id;return this.events().filter(t=>t.formId===e)});constructor(){lJ(`forms`,this.selectedId),lJ(`forms`,this.selectedLabel,`label`),E(()=>{let e=this.rpc();e&&this.load(e)}),E(()=>{let e=this.focus();e&&Z(()=>{this.selectForm(e.id),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.highlight(null,``)})}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`forms`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.forms.set(t?.forms??[]),this.events.set(t?.events??[]),this.instrumented.set(t?.instrumented??[]),this.dropped.set(t?.dropped??{}),this.webMcp.set(t?.webMcp??[]),this.setupErrors.set(t?.setupErrors??[]),this.version.update(e=>e+1)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}async pick(){let e=this.selected();if(!e)return;let t=++this.pickSeq;this.picking.set(e.id),this.message.set(`Click a field in the app. Press Escape or Cancel picking to stop.`);let n=await vT(this.rpc(),{action:`pick`,formId:e.id});if(t!==this.pickSeq)return;this.picking.set(null);let r=n;if(!n.ok||!r.formId){this.message.set(yT(n));return}this.selectForm(r.formId),this.tab_.set(`fields`),this.fieldPath.set(r.path??``),this.message.set(`Picked ${r.path||`(form)`}.`)}cancelPick(){let e=this.picking();e&&vT(this.rpc(),{action:`cancel-pick`,formId:e})}async setRecording(e){let t=this.selected();if(!t)return;let n=await vT(this.rpc(),{action:`instrument`,formId:t.id,value:e});this.message.set(yT(n))}selectForm(e){this.hostPageId&&dT(e)&&dT(e)!==this.hostPageId&&this.allPages.set(!0),this.selectedId.set(e),this.selectedLabel.set(this.forms().find(t=>t.id===e)?.label??null),this.filter.set(``),this.fieldPath.set(null),this.snapshot.set(null),this.armed.set(null)}toggleField(e){this.fieldPath.update(t=>t===e?null:e)}closeField(){let e=this.host.nativeElement,t=e.querySelector(`button.field[aria-pressed="true"]`)??e.querySelector(`.table-scroll`);this.fieldPath.set(null),t?.focus()}showField(e){this.tab_.set(`fields`);let t=()=>this.rows().some(t=>t.node.path===e);t()||this.filter.set(``),t()||this.active.set(new Set),this.fieldPath.set(e),cd(()=>{let e=this.host.nativeElement;e.querySelector(`button.field[aria-pressed="true"]`)?.scrollIntoView?.({block:`nearest`}),(e.querySelector(`#forms-field-heading`)??e.querySelector(`.table-scroll`))?.focus()},{injector:this.injector})}async act(e,t={}){let n=this.selected();if(!n)return;this.armed.set(null);let r=await vT(this.rpc(),{action:e,formId:n.id,...t});r.snapshot&&this.selected()?.id===n.id&&this.snapshot.set(r.snapshot),this.message.set(yT(r))}confirmAct(e){if(this.armed()!==e){this.armed.set(e),this.message.set(`Press "Confirm ${e}" to ${e} the form in the app.`);return}this.act(e,{confirm:!0,snapshot:this.snapshot()??void 0})}onKey(e){let t=this.tabs().map(e=>e.id),n=t.indexOf(this.tab_()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.tab_.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#forms-tab-${t[r]}`)?.focus())}clearFilters(e){this.filter.set(``),this.active.set(new Set);let t=this.rows().length,n=`Filters cleared. Showing ${t} ${t===1?`field`:`fields`}.`;this.filterStatus.update(e=>e===n?`${n}\u00a0`:n),e.focus()}highlight(e,t){let n=this.rpc();n&&n.scope(`pangular`).rpc.callEvent(`request-form-highlight`,e?{formId:e,path:t}:null)}kindLabel(e){return fT[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-forms-inspector`]],hostBindings:function(e,t){e&1&&H(`keydown.escape`,function(){return t.cancelPick()})},inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},outputs:{focusHandled:`focusHandled`},decls:10,vars:3,consts:[[1,`page-intro`],[3,`errors`,`showPages`],[`role`,`status`,1,`empty`],[`role`,`alert`,1,`empty`],[1,`empty`],[1,`layout`],[3,`pages`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`small`,3,`click`],[3,`allPagesChange`,`selectForm`,`forms`,`selectedId`,`counts`,`showToggle`,`allPages`],[`aria-labelledby`,`forms-detail-title`,1,`detail`,`gone`],[`aria-labelledby`,`forms-detail-title`,1,`detail`],[`id`,`forms-detail-title`],[`role`,`status`,1,`muted`],[1,`detail-head`],[1,`detail-meta`],[1,`summary`],[1,`badge`],[1,`totals`],[1,`error-summary`],[3,`tool`,`page`,`signalForm`,`formId`,`rpc`],[3,`act`,`confirmAct`,`pick`,`cancelPick`,`canWrite`,`writesOff`,`picking`,`snapshot`,`armed`,`message`],[`role`,`tablist`,`aria-label`,`Form views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[3,`form`],[3,`formId`,`version`,`rpc`],[`type`,`button`,1,`summary-link`,3,`click`],[1,`sr-only`],[1,`kind-tag`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[3,`value`],[3,`filterChange`,`activeChange`,`toggleField`,`closeField`,`clearFilters`,`highlight`,`form`,`rows`,`fieldPath`,`selectedNode`,`version`,`rpc`,`filtering`,`filterStatus`,`filter`,`active`],[3,`formId`,`rpc`],[`what`,`form events on this page`,`limit`,`formTimeline`,3,`dropped`,`max`],[3,`record`,`events`,`recording`],[3,`showField`,`formId`,`version`,`rpc`]],template:function(e,t){e&1&&(F(0,`p`,0),K(1,` Signal Forms, reactive and template-driven forms on the live page, with each field's state and errors, a change timeline, submit explanations and a lint. Development builds only. `),I(),A(2,T1,1,2,`app-forms-setup-errors`,1),A(3,E1,4,0,`div`,2)(4,D1,7,0,`div`,3)(5,O1,4,0,`div`,2)(6,k1,5,0,`div`,4)(7,A1,7,2,`div`,4)(8,U1,5,6,`div`,5),A(9,W1,1,1,`app-forms-webmcp-others`,6)),e&2&&(D(2),j(t.pageSetupErrors().length?2:-1),D(),j(t.rpc()?t.failed()?4:t.loading()?5:t.forms().length?t.visible().length?8:7:6:3),D(6),j(t.rpc()&&!t.failed()&&!t.loading()?9:-1))},dependencies:[aP,KZ,YZ,JQ,$Q,f$,T$,G$,x$,S$,S1,C1,XD],styles:[`.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-}
-
-.small[_ngcontent-%COMP%] {
-  display: inline-block;
-  max-width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 32px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.small[_ngcontent-%COMP%]:active {
-  background: var(--%NS%border-strong);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  border-color: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.small.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.small.danger[_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-  color: var(--%NS%danger);
-}
-
-.small.danger[_ngcontent-%COMP%]:hover {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  border-color: var(--%NS%danger);
-}
-
-.small.armed[_ngcontent-%COMP%] {
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.small.danger.armed[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  border-color: var(--%NS%danger);
-  color: #1f0707;
-  font-weight: 600;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-    color: #fff;
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
-  color: #fff;
-}
-
-.summary-link[_ngcontent-%COMP%] {
-  display: inline;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
-  color: var(--%NS%accent-hover);
-}
-
-.summary-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.field-input[_ngcontent-%COMP%] {
-  min-width: 0;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.field-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%font-sans);
-}
-
-.field-input[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
-}
-
-.field-input[_ngcontent-%COMP%]:focus, 
-.field-input[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.explain[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  tab-size: 2;
-}
-
-.explain[aria-busy=true][_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.section-label[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-block;
-  margin: 0;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.tag[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-}
-
-.tag[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.tag[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.empty-state[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 6px;
-  margin: 0;
-  padding: 40px 24px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.page-intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-[_nghost-%COMP%] {
-  display: block;
-}
-
-.layout[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
-  gap: 16px;
-  align-items: start;
-}
-
-.detail[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  padding: 16px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.detail-head[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-}
-
-.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.3;
-  overflow-wrap: anywhere;
-}
-
-.detail-meta[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.detail-meta[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 11.5px;
-}
-
-.gone[_ngcontent-%COMP%] {
-  justify-items: start;
-}
-
-.gone[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 16px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-}
-
-.gone[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.error-summary[_ngcontent-%COMP%] {
-  min-width: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-size: 13px;
-}
-
-.error-summary[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.error-summary[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.error-summary[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 8px 0 0;
-  padding: 0 0 0 16px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.error-summary[_ngcontent-%COMP%]   .kind-tag[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.summary[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.summary[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]:not(.badge):not(.totals) {
-  padding: 0 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  line-height: 22px;
-}
-
-.totals[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-3);
-  font-variant-numeric: tabular-nums;
-}
-
-.totals[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 600;
-}
-
-.totals[_ngcontent-%COMP%]   b.has-errors[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-
-.badge[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 0 8px;
-  border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  border-radius: 99px;
-  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
-  color: var(--%NS%ok-text);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 20px;
-  white-space: nowrap;
-}
-
-.summary[_ngcontent-%COMP%]    > .badge[_ngcontent-%COMP%] {
-  line-height: 22px;
-}
-
-.badge[data-status=INVALID][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
-  color: var(--%NS%danger-text);
-}
-
-.badge[data-status=PENDING][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
-  color: var(--%NS%warn-text);
-}
-
-.badge[data-status=DISABLED][_ngcontent-%COMP%] {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-.tabs[_ngcontent-%COMP%] {
-  display: inline-flex;
-  justify-self: start;
-  gap: 2px;
-  max-width: 100%;
-  height: 34px;
-  padding: 2px;
-  overflow-x: auto;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%] {
-  flex: none;
-  height: 28px;
-  padding: 0 14px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-  background: var(--%NS%surface-2);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][aria-selected=true][_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.panel[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  justify-items: center;
-  gap: 8px;
-  margin: 0;
-  padding: 48px 24px;
-  background: var(--%NS%surface);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  color: var(--%NS%text-2);
-  font-size: 13px;
-  line-height: 1.5;
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  max-width: 52ch;
-  margin: 0;
-}
-
-.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 600;
-}
-
-@media (max-width: 720px) {
-  .layout[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-@media (max-width: 480px) {
-  .detail[_ngcontent-%COMP%] {
-    padding: 12px;
-  }
-  .totals[_ngcontent-%COMP%] {
-    flex-basis: 100%;
-    margin-left: 0;
-  }
-}`]})},Y1=[`filterInput`],X1=(e,t)=>t.file+t.name,Z1=(e,t)=>t.file+`:`+t.line,Q1=(e,t)=>t.name;function $1(e,t){e&1&&(F(0,`p`,11),w(),F(1,`svg`,23),L(2,`circle`,24)(3,`path`,25),I(),fs(),F(4,`span`),K(5),I()()),e&2&&(D(5),q(t))}function e0(e,t){if(e&1&&(F(0,`p`,11),w(),F(1,`svg`,23),L(2,`circle`,24)(3,`path`,25),I(),fs(),F(4,`span`)(5,`strong`),K(6),I(),K(7,` Pipe prototypes are patched in the inspected page to count calls and keep the last input and output. Stop recording when you are done. `),I()()),e&2){let e=W();D(6),J(`Recording on `,e.plural(e.instrumentedPages().length,`page`),`.`)}}function t0(e,t){e&1&&(F(0,`div`,12),L(1,`span`,26),F(2,`p`,27),K(3,`Scanning pipes…`),I()())}function n0(e,t){if(e&1){let e=B();F(0,`div`,13)(1,`p`,27),K(2,`Couldn't load pipes`),I(),F(3,`p`,28),K(4,`The devtools server did not answer. Check that it is running.`),I(),F(5,`button`,29),H(`click`,function(){return S(e),C(W().refresh())}),K(6,`Try again`),I()()}}function r0(e,t){e&1&&(F(0,`div`,14)(1,`p`,27),K(2,`No pipes found`),I(),F(3,`p`,28),K(4,` No @Pipe classes were found in the source, and no template uses a built-in pipe yet. `),I()())}function i0(e,t){e&1&&K(0,` Couldn't scan the source again. The list keeps the last scan. `)}function a0(e,t){e&1&&K(0,` Couldn't scan the source. Only pipes seen on the page are listed. `)}function o0(e,t){if(e&1){let e=B();F(0,`div`,30),w(),F(1,`svg`,23),L(2,`circle`,24)(3,`path`,36),I(),fs(),F(4,`span`),A(5,i0,1,0)(6,a0,1,0),I(),F(7,`button`,8),H(`click`,function(){return S(e),C(W(2).refresh())}),K(8,`Try again`),I()()}if(e&2){let e=W(2);D(5),j(e.pipes().length?5:6),D(2),P(`disabled`,e.loading())}}function s0(e,t){e&1&&(F(0,`span`,42),K(1,`churning`),I())}function c0(e,t){e&1&&(F(0,`span`,42),K(1,`stale?`),I())}function l0(e,t){if(e&1&&(F(0,`span`,48),K(1),I()),e&2){let e=W(),t=W(4);D(),q(t.ms(e.totalMs))}}function u0(e,t){if(e&1&&(F(0,`span`,48),K(1),I(),A(2,l0,2,1,`span`,48)),e&2){let e=t,n=W(4);D(),q(n.plural(e.callCount,`call`)),D(),j(e.totalMs===void 0?-1:2)}}function d0(e,t){if(e&1&&(F(0,`span`,43),K(1),I()),e&2){W();let e=I_(0);D(),J(``,e.instanceCount,` live`)}}function f0(e,t){e&1&&(F(0,`span`,44),K(1,`built-in`),I())}function p0(e,t){e&1&&(F(0,`span`,44),K(1,`runtime only`),I())}function m0(e,t){e&1&&(F(0,`span`,44),K(1,`NgModule`),I())}function h0(e,t){e&1&&(F(0,`span`,46),K(1,`No source location`),I())}function g0(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;Y(` `,e.file,`:`,e.line,` `)}}function _0(e,t){if(e&1&&(F(0,`span`,47),K(1),I()),e&2){let e=W().$implicit;D(),J(`+`,(e.usageCount??1)-1,` more`)}}function v0(e,t){if(e&1&&(F(0,`span`,47),K(1),I()),e&2){let e=W().$implicit;D(),Y(``,e.usageCount,` `,e.usageCount===1?`use`:`uses`)}}function y0(e,t){if(e&1){let e=B();P_(0),F(1,`li`)(2,`button`,37),H(`click`,function(){let t=S(e).$implicit;return C(W(3).select(t))})(`mouseenter`,function(){S(e);let t=I_(0);return C(W(3).highlightPipe(t))})(`mouseleave`,function(){return S(e),C(W(3).highlight(null))})(`focus`,function(){S(e);let t=I_(0);return C(W(3).highlightPipe(t))})(`blur`,function(){return S(e),C(W(3).highlight(null))}),F(3,`span`,38)(4,`span`,39),K(5),I(),F(6,`span`,40),K(7),I()(),F(8,`span`,41),A(9,s0,2,0,`span`,42),A(10,c0,2,0,`span`,42),A(11,u0,3,2),A(12,d0,2,1,`span`,43),A(13,f0,2,0,`span`,44),A(14,p0,2,0,`span`,44),A(15,m0,2,0,`span`,44),F(16,`span`,44),K(17),I()(),F(18,`span`,45),A(19,h0,2,0,`span`,46)(20,g0,1,2),A(21,_0,2,1,`span`,47)(22,v0,2,2,`span`,47),I()()()}if(e&2){let e,n=t.$implicit,r=W(3),i=F_(r.liveFor(n.name));D(2),G(`selected`,r.isSelected(n)),k(`aria-current`,r.isSelected(n)||null),D(3),q(n.name),D(2),q(n.className),D(2),j(i?.churn?9:-1),D(),j(i?.stale?10:-1),D(),j((e=i?.call)?11:-1,e),D(),j(i?12:-1),D(),j(n.builtin?13:-1),D(),j(n.runtime?14:-1),D(),j(n.isStandalone?-1:15),D(),G(`impure`,!n.isPure),D(),q(n.isPure?`pure`:`impure`),D(2),j(n.runtime?19:20),D(2),j(n.builtin&&(n.usageCount??0)>1?21:!n.builtin&&n.usageCount?22:-1)}}function b0(e,t){if(e&1&&(F(0,`ul`,33),M(1,y0,23,18,`li`,null,X1),I()),e&2){let e=W(2);D(),N(e.filtered())}}function x0(e,t){e&1&&K(0),e&2&&J(` Nothing matches “`,W(3).filter().trim(),`” in this view. `)}function S0(e,t){e&1&&K(0,` None of the pipes fit this filter. `)}function C0(e,t){if(e&1){let e=B();F(0,`div`,34)(1,`p`,27),K(2,`No pipes match`),I(),F(3,`p`,28),A(4,x0,1,1)(5,S0,1,0),I(),F(6,`button`,29),H(`click`,function(){return S(e),C(W(2).clearFilters())}),K(7,`Clear filters`),I()()}if(e&2){let e=W(2);D(4),j(e.filter().trim()?4:5)}}function w0(e,t){e&1&&(F(0,`span`,44),K(1,`built-in`),I())}function T0(e,t){e&1&&(F(0,`span`,44),K(1,`runtime only`),I())}function E0(e,t){if(e&1&&(F(0,`dt`),K(1,`File`),I(),F(2,`dd`,52),L(3,`app-source-link`,54),I()),e&2){let e=W();D(3),P(`file`,e.file)(`line`,e.line)}}function D0(e,t){if(e&1&&(F(0,`dt`),K(1,`Standalone`),I(),F(2,`dd`),K(3),I()),e&2){let e=W();D(3),q(e.isStandalone?`Yes`:`No, declared in an NgModule`)}}function O0(e,t){if(e&1&&(F(0,`li`,52),L(1,`app-source-link`,54),I()),e&2){let e=t.$implicit;D(),P(`file`,e.file)(`line`,e.line)}}function k0(e,t){if(e&1&&(F(0,`div`,51)(1,`h3`),K(2,` Used in templates `),F(3,`span`,18),K(4),I()(),F(5,`ul`,55),M(6,O0,2,2,`li`,52,Z1),I()()),e&2){let e=W();D(4),q(e.usageCount),D(2),N(e.usages)}}function A0(e,t){e&1&&K(0),e&2&&J(` An instance ran `,W().streak,` times in a row and returned an equal result each time: its input changes reference while its contents stay the same. Keep the input stable, for example in a computed(). `)}function j0(e,t){e&1&&K(0),e&2&&J(` An instance returned an equal object or array as a new reference `,W().streak,` times in a row, so the bindings that read it update for nothing. Return the previous result when it is equal, or use a computed(). `)}function M0(e,t){if(e&1&&(F(0,`p`,56)(1,`span`,42),K(2,`churning`),I(),A(3,A0,1,1)(4,j0,1,1),I()),e&2){let e=W();D(3),j(e.isPure?3:4)}}function N0(e,t){e&1&&(F(0,`p`,56)(1,`span`,42),K(2,`experimental`),I(),K(3,` This pure pipe got an argument whose contents changed while its reference stayed the same, so it may be showing a stale value. `),I())}function P0(e,t){if(e&1){let e=B();F(0,`button`,61),H(`click`,function(){let t=S(e);return C(W(5).highlight(t,!0))})(`mouseenter`,function(){let t=S(e);return C(W(5).highlight(t))})(`mouseleave`,function(){return S(e),C(W(5).highlight(null))})(`focus`,function(){let t=S(e);return C(W(5).highlight(t))})(`blur`,function(){return S(e),C(W(5).highlight(null))}),F(1,`span`,52),K(2),I(),F(3,`span`,62),K(4),I()()}if(e&2){let e=W().$implicit;k(`aria-label`,`Highlight `+e.name+` on the page`),D(2),q(e.name),D(2),q(e.count)}}function F0(e,t){if(e&1&&(F(0,`span`,60)(1,`span`,52),K(2),I(),F(3,`span`,62),K(4),I()()),e&2){let e=W().$implicit;D(2),q(e.name),D(2),q(e.count)}}function I0(e,t){if(e&1&&(F(0,`li`),A(1,P0,5,3,`button`,59)(2,F0,5,2,`span`,60),I()),e&2){let e,n=t.$implicit;D(),j((e=n.targets?.[0])?1:2,e)}}function L0(e,t){if(e&1&&(F(0,`dt`),K(1,`Time`),I(),F(2,`dd`),K(3),I()),e&2){let e=W(),t=W(4);D(3),D_(` `,t.ms(e.totalMs),` total, `,t.ms(e.totalMs/e.callCount),` average, `,t.ms(e.maxMs??0),` slowest `)}}function R0(e,t){if(e&1&&(F(0,`span`,63),K(1),I()),e&2){let e=W(2);D(),q(e.lastError)}}function z0(e,t){if(e&1&&(F(0,`dt`),K(1,`Errors`),I(),F(2,`dd`),K(3),A(4,R0,2,1,`span`,63),I()),e&2){let e=W();D(3),J(` `,e.errorCount,` `),D(),j(e.lastError?4:-1)}}function B0(e,t){if(e&1){let e=B();F(0,`button`,61),H(`click`,function(){let t=S(e);return C(W(7).highlight(t,!0))})(`mouseenter`,function(){let t=S(e);return C(W(7).highlight(t))})(`mouseleave`,function(){return S(e),C(W(7).highlight(null))})(`focus`,function(){let t=S(e);return C(W(7).highlight(t))})(`blur`,function(){return S(e),C(W(7).highlight(null))}),F(1,`span`,52),K(2),I()()}if(e&2){let e=W().$implicit;k(`aria-label`,`Highlight `+e.component+` on the page`),D(2),q(e.component)}}function V0(e,t){if(e&1&&(F(0,`span`,60)(1,`span`,52),K(2),I()()),e&2){let e=W().$implicit;D(2),q(e.component)}}function H0(e,t){if(e&1&&(F(0,`span`,65),K(1),I()),e&2){let e=W().$implicit,t=W(6);D(),q(t.ms(e.totalMs))}}function U0(e,t){if(e&1&&(F(0,`span`,66),K(1),I()),e&2){let e=W().$implicit;D(),q(e.lastCaller)}}function W0(e,t){if(e&1&&(F(0,`li`,64),A(1,B0,3,2,`button`,59)(2,V0,3,1,`span`,60),F(3,`span`,63),K(4),F(5,`span`,65),K(6),I(),A(7,H0,2,1,`span`,65),I(),A(8,U0,2,1,`span`,66),I()),e&2){let e,n=t.$implicit,r=W(6);D(),j((e=n.target)?1:2,e),D(3),Y(` `,r.describe(n.lastArgs),` → `,r.describe(n.lastResult),` `),D(2),J(``,n.callCount,`×`),D(),j(n.totalMs===void 0?-1:7),D(),j(n.lastCaller?8:-1)}}function G0(e,t){if(e&1&&(F(0,`p`,58),K(1),I()),e&2){let e=W(2);D(),Y(` Showing `,e.instances.length,` of `,e.instanceTotal,` instances. `)}}function K0(e,t){if(e&1&&(F(0,`dt`),K(1,`Per instance`),I(),F(2,`dd`)(3,`ul`,55),M(4,W0,9,6,`li`,64,$h),I(),A(6,G0,2,2,`p`,58),I()),e&2){let e=W();D(4),N(e.instances),D(2),j(e.instanceTotal?6:-1)}}function q0(e,t){if(e&1&&(F(0,`dt`),K(1,`Last caller`),I(),F(2,`dd`,63),K(3),I()),e&2){let e=W();D(3),q(e.lastCaller)}}function J0(e,t){if(e&1&&(F(0,`dt`),K(1,`Calls`),I(),F(2,`dd`),K(3),I(),A(4,L0,4,3),A(5,z0,5,2),F(6,`dt`),K(7,`Last input`),I(),F(8,`dd`,63),K(9),I(),F(10,`dt`),K(11,`Last output`),I(),F(12,`dd`,63),K(13),I(),A(14,K0,7,1),A(15,q0,4,1)),e&2){let e=t,n=W(4);D(3),q(e.callCount),D(),j(e.totalMs===void 0?-1:4),D(),j(e.errorCount?5:-1),D(4),q(n.describe(e.lastArgs)),D(4),q(n.describe(e.lastResult)),D(),j(e.instances?.length?14:-1),D(),j(e.lastCaller?15:-1)}}function Y0(e,t){e&1&&(F(0,`dt`),K(1,`Calls`),I(),F(2,`dd`,67),K(3,`None recorded yet.`),I())}function X0(e,t){e&1&&(F(0,`p`,58),K(1,` The stale check is off for this pipe: it couldn't read the compiled template, which happens in minified builds. `),I())}function Z0(e,t){e&1&&(F(0,`p`,58),K(1,`Turn on “Record calls” to see call counts and values.`),I())}function Q0(e,t){if(e&1&&(A(0,M0,5,1,`p`,56),A(1,N0,4,0,`p`,56),F(2,`dl`)(3,`dt`),K(4,`Instances`),I(),F(5,`dd`),K(6),I(),F(7,`dt`),K(8,`Used by`),I(),F(9,`dd`)(10,`ul`,57),M(11,I0,3,1,`li`,null,Q1),I()(),A(13,J0,16,7)(14,Y0,4,0),I(),A(15,X0,2,0,`p`,58),A(16,Z0,2,0,`p`,58)),e&2){let e,n,r=t,i=W(3);j((e=r.churn)?0:-1,e),D(),j(r.stale?1:-1),D(5),q(r.instanceCount),D(5),N(r.components),D(2),j((n=r.call)?13:i.instrumenting()?14:-1,n),D(2),j(r.staleCheck===`unavailable`?15:-1),D(),j(!r.call&&!i.instrumenting()?16:-1)}}function $0(e,t){e&1&&(F(0,`p`,53),K(1,` Not in use on the connected page. Open a view that uses it, or connect the app. `),I())}function e2(e,t){if(e&1&&(F(0,`header`,49)(1,`h2`,50),K(2),I(),F(3,`span`,44),K(4),I(),A(5,w0,2,0,`span`,44),A(6,T0,2,0,`span`,44),I(),F(7,`div`,51)(8,`h3`),K(9,`Declaration`),I(),F(10,`dl`)(11,`dt`),K(12,`Class`),I(),F(13,`dd`,52),K(14),I(),F(15,`dt`),K(16,`Source`),I(),F(17,`dd`),K(18),I(),A(19,E0,4,2),A(20,D0,4,1),F(21,`dt`),K(22,`Pure`),I(),F(23,`dd`),K(24),I()()(),A(25,k0,8,1,`div`,51),F(26,`div`,51)(27,`h3`),K(28,`Live on the page`),I(),A(29,Q0,17,6)(30,$0,2,0,`p`,53),I()),e&2){let e,n=t,r=W(2);D(2),q(n.name),D(),G(`impure`,!n.isPure),D(),q(n.isPure?`pure`:`impure`),D(),j(n.builtin?5:-1),D(),j(n.runtime?6:-1),D(8),q(n.className),D(4),q(r.sourceLabel(n)),D(),j(!n.builtin&&!n.runtime?19:-1),D(),j(n.runtime?-1:20),D(4),J(` `,n.isPure?`Yes, reruns only when an input changes`:`No, reruns on every check`,` `),D(),j(n.usages?.length?25:-1),D(4),j((e=r.liveFor(n.name))?29:30,e)}}function t2(e,t){e&1&&(F(0,`h2`,68),K(1,`Pipe details`),I(),F(2,`div`,69)(3,`p`,27),K(4,`Pick a pipe`),I(),F(5,`p`,28),K(6,` See where it is declared, which components use it and what it last returned. `),I()())}function n2(e,t){if(e&1&&(A(0,o0,9,2,`div`,30),F(1,`div`,31)(2,`div`,32),A(3,b0,3,0,`ul`,33)(4,C0,8,1,`div`,34),I(),F(5,`section`,35),A(6,e2,31,13)(7,t2,7,0),I()()),e&2){let e,t=W();j(t.loadFailed()?0:-1),D(3),j(t.filtered().length?3:4),D(3),j((e=t.selected())?6:7,e)}}function r2(e,t){if(e&1&&(F(0,`p`,58),K(1),I()),e&2){let e=W(2);D(),Y(`Showing `,e.async().length,` of `,t,` subscriptions.`)}}function i2(e,t){if(e&1){let e=B();F(0,`button`,77),H(`click`,function(){let t=S(e);return C(W(3).highlight(t))})(`focus`,function(){let t=S(e);return C(W(3).highlight(t))})(`blur`,function(){return S(e),C(W(3).highlight(null))}),K(1),I()}if(e&2){let e=W().$implicit;k(`aria-label`,`Highlight `+e.component+` on the page`),D(),J(` `,e.component,` `)}}function a2(e,t){if(e&1&&(F(0,`span`,75),K(1),I()),e&2){let e=W().$implicit;D(),q(e.component)}}function o2(e,t){e&1&&(F(0,`span`,44),K(1,`no source`),I())}function s2(e,t){e&1&&(F(0,`span`,42),K(1,`possible duplicate subscription`),I())}function c2(e,t){e&1&&(F(0,`span`,42),K(1,`resubscribing`),I())}function l2(e,t){if(e&1){let e=B();F(0,`li`,73),H(`mouseenter`,function(){let t=S(e).$implicit;return C(W(2).highlight(t.target))})(`mouseleave`,function(){return S(e),C(W(2).highlight(null))}),A(1,i2,2,2,`button`,74)(2,a2,2,1,`span`,75),A(3,o2,2,0,`span`,44),A(4,s2,2,0,`span`,42),A(5,c2,2,0,`span`,42),F(6,`span`,76),K(7),I()()}if(e&2){let e,n=t.$implicit;D(),j((e=n.target)?1:2,e),D(2),j(n.hasSource?-1:3),D(),j(n.duplicate?4:-1),D(),j(n.resubscribing?5:-1),D(2),q(n.latestValue??`no value yet`)}}function u2(e,t){if(e&1&&(F(0,`section`,15)(1,`h2`,70),K(2,` Async subscriptions `),F(3,`span`,18),K(4),I()(),F(5,`p`,58),K(6,` Each `),F(7,`span`,52),K(8,`| async`),I(),K(9,` subscribes on its own. Two on the same source mean the work runs twice. A source that changes on every check, like `),F(10,`span`,52),K(11,`getData() | async`),I(),K(12,`, resubscribes each time. `),I(),A(13,r2,2,2,`p`,58),F(14,`ul`,71),M(15,l2,8,5,`li`,72,$h),I()()),e&2){let e,t=W();D(4),q(t.async().length),D(9),j((e=t.asyncTotal())?13:-1,e),D(2),N(t.async())}}function d2(e,t){e&1&&(F(0,`span`,18),K(1),I()),e&2&&(D(),q(t.length))}function f2(e,t){e&1&&(F(0,`p`,19),K(1,`Couldn't run the lint check. Try Refresh.`),I())}function p2(e,t){e&1&&(F(0,`p`,20),K(1,`Checking…`),I())}function m2(e,t){e&1&&(F(0,`p`,21),K(1,`No problems found.`),I())}function h2(e,t){if(e&1){let e=B();F(0,`button`,87),H(`click`,function(){S(e),W();let t=I_(6);return C(W(2).showPipe(t))}),F(1,`span`,88),K(2,`Show pipe `),I(),K(3),I()}if(e&2){let e=W().$implicit;D(3),J(``,e.pipe,` `)}}function g2(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,e.pipe,` `)}}function _2(e,t){if(e&1&&(F(0,`li`,78)(1,`div`,79)(2,`span`,80),K(3),I(),F(4,`code`,81),K(5),I(),P_(6),F(7,`span`,82),A(8,h2,4,1,`button`,83)(9,g2,1,1),K(10,` · `),L(11,`app-source-link`,54),I()(),F(12,`p`,84),K(13),I(),F(14,`p`,85)(15,`span`,86),K(16,`Fix`),I(),K(17),I()()),e&2){let e=t.$implicit;D(2),k(`data-tone`,e.severity),D(),q(e.severity),D(2),q(e.rule),D();let n=F_(W(2).pipeFor(e));D(2),j(n?8:9),D(3),P(`file`,e.file)(`line`,e.line),D(2),q(e.message),D(4),J(` `,e.fix)}}function v2(e,t){if(e&1&&(F(0,`ul`,22),M(1,_2,18,9,`li`,78,$h),I()),e&2){let e=W();D(),N(e.lint())}}var y2=5e3,b2=[{value:`all`,label:`All pipes`},{value:`custom`,label:`Custom`},{value:`builtin`,label:`Built-in`},{value:`runtime`,label:`Runtime only`},{value:`impure`,label:`Impure`},{value:`live`,label:`On the page`},{value:`called`,label:`Called while recording`}],x2=[{value:`source`,label:`Source order`},{value:`calls`,label:`Most calls`},{value:`time`,label:`Most time`}],S2=class e{plural=WE;destroyRef=x(Ss);host=x(Ml);injector=x(bs);filterInput=hv(`filterInput`);rpc=$(null);focus=$(null);focusHandled=cv();pageId=$(null);kindOptions=b2;sortOptions=x2;pipes=T([]);filter=T(``);kind=T(`all`);sort=T(`source`);loading=T(!1);loadFailed=T(!1);selected=T(null);snapshot=T(void 0);shown=X(()=>{let e=this.snapshot(),t=this.livePageId();return(t?e?.pages?.find(e=>e.pageId===t):void 0)??e});live=X(()=>this.shown()?.pipes??[]);async=X(()=>this.shown()?.async??[]);asyncTotal=X(()=>this.shown()?.asyncTotal);lint=T(null);lintFailed=T(!1);instrumentedPages=T([]);instrumenting=X(()=>this.instrumentedPages().length>0);pendingRecord=T(null);recordMessage=T(null);recordLabel=X(()=>{let e=this.pendingRecord();return e===null?this.instrumenting()?`Stop recording`:`Record calls`:e?`Starting…`:`Stopping…`});pendingTimer;liveByName=X(()=>new Map(this.live().map(e=>[e.name,e])));allPipes=X(()=>{let e=this.pipes(),t=new Set(e.map(e=>e.name)),n=this.live().filter(e=>!t.has(e.name)).map(e=>({name:e.name,className:e.className,file:``,line:0,isStandalone:!0,isPure:e.isPure,runtime:!0}));return n.length?[...e,...n]:e});filtered=X(()=>{let e=this.filter(),t=this.kind()??`all`,n=this.allPipes().filter(n=>this.fitsKind(n,t)&&this.fitsQuery(n,e)),r=this.sort()??`source`;if(r===`source`)return n;let i=e=>{let t=this.liveFor(e.name)?.call;return t?r===`calls`?t.callCount:t.totalMs??0:-1};return n.map((e,t)=>({p:e,index:t,weight:i(e)})).sort((e,t)=>t.weight-e.weight||e.index-t.index).map(({p:e})=>e)});pipesByName=X(()=>{let e=new Map;for(let t of this.allPipes())e.set(t.name,[...e.get(t.name)??[],t]);return e});unsubscribe;constructor(){E(()=>{let e=this.rpc();e&&(this.refresh(),this.loadLive(e))}),E(()=>{let e=this.focus();if(!e)return;let t=this.pipesByName().get(e)?.[0];t&&Z(()=>{this.showPipe(t),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.pendingTimer),this.highlight(null)})}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.loadFailed.set(!1);try{let t=await e.scope(`pangular`).rpc.call(`get-pipes`);this.pipes.set(t);let n=this.selected();if(n){let e=this.allPipes().find(e=>e.name===n.name&&e.file===n.file);this.selected.set(e??null)}}catch{this.loadFailed.set(!0)}finally{this.loading.set(!1)}this.loadLint(e)}}async loadLint(e){this.lintFailed.set(!1);try{let t=await e.scope(`pangular`).rpc.call(`pipe-lint`);this.lint.set(t)}catch{this.lintFailed.set(!0)}}async loadLive(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`pipe-usage`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.snapshot.set(t);let n=this.selected();n?.runtime&&!this.liveByName().has(n.name)&&this.selected.set(null);let r=t?.instrumented??[];this.instrumentedPages.set(r),this.pendingRecord()===r.length>0&&this.settleRecord(null)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}livePageId(){return this.pageId()??tT()}async toggleInstrument(){let e=this.rpc();if(!e||this.pendingRecord()!==null)return;let t=!this.instrumenting();this.recordMessage.set(null),this.pendingRecord.set(t);let n;try{let r=t?{pageId:this.livePageId()??void 0,on:t}:{on:t};n=await e.scope(`pangular`).rpc.call(`request-instrument-pipes`,r)}catch{this.settleRecord(`Couldn't reach the devtools server. Try again.`);return}if(this.pendingRecord()===t){if(n?.pages===0){this.settleRecord(`No page is connected. Open your app in the browser with the devtools running, then record again.`);return}clearTimeout(this.pendingTimer),this.pendingTimer=setTimeout(()=>{this.pendingRecord()===t&&this.settleRecord(t?`No page confirmed recording. Reload the app and try again.`:`No page confirmed it stopped recording. Reload the app to stop it.`)},y2)}}settleRecord(e){clearTimeout(this.pendingTimer),this.pendingRecord.set(null),e!==null&&this.recordMessage.set(e)}sourceLabel(e){return e.builtin?`@angular/common`:e.runtime?`Seen on the page only`:`This project`}liveFor(e){return this.liveByName().get(e)}ms(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}describe(e){if(Array.isArray(e))return e.map(e=>this.describe(e)).join(`, `);if(typeof e==`string`)return e.length>80?`${e.slice(0,80)}…`:e;try{let t=JSON.stringify(e);return t&&t.length>120?`${t.slice(0,120)}…`:t??String(e)}catch{return String(e)}}isSelected(e){let t=this.selected();return t!==null&&t.name===e.name&&t.file===e.file}select(e){this.selected.set(this.isSelected(e)?null:e)}pipeFor(e){let t=this.pipesByName().get(e.pipe);return t?.length?t.find(t=>t.file===e.file)??t[0]:null}showPipe(e){this.fitsQuery(e,this.filter())||this.filter.set(``),this.fitsKind(e,this.kind()??`all`)||this.kind.set(`all`),this.selected.set(e),cd(()=>{let e=this.host.nativeElement;e.querySelector(`.row.selected`)?.scrollIntoView?.({block:`nearest`}),e.querySelector(`#pipe-detail-title`)?.focus()},{injector:this.injector})}fitsKind(e,t){return t===`custom`?!e.builtin&&!e.runtime:t===`builtin`?!!e.builtin:t===`runtime`?!!e.runtime:t===`impure`?!e.isPure:t===`live`?this.liveByName().has(e.name):t!==`called`||!!this.liveByName().get(e.name)?.call}fitsQuery(e,t){let n=t.trim().toLowerCase();return!n||e.name.toLowerCase().includes(n)||e.className.toLowerCase().includes(n)||e.file.toLowerCase().includes(n)}clearFilters(){this.filter.set(``),this.kind.set(`all`),this.filterInput()?.focus()}highlightPipe(e){this.highlight(e?.components.find(e=>e.targets?.length)?.targets?.[0])}highlight(e,t=!1){let n=this.rpc();n&&n.scope(`pangular`).rpc.call(`request-page-highlight`,e?{...e,...t?{reveal:t}:{}}:null).catch(()=>{})}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-pipes-inspector`]],viewQuery:function(e,t){e&1&&Mg(t.filterInput,Y1,5),e&2&&Ng()},inputs:{rpc:[1,`rpc`],focus:[1,`focus`],pageId:[1,`pageId`]},outputs:{focusHandled:`focusHandled`},decls:30,vars:20,consts:[[`filterInput`,``],[1,`intro`],[1,`toolbar`],[`placeholder`,`Filter by pipe, class or file`,`saveKey`,`pipes`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Show pipes`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Sort pipes`,3,`valueChange`,`options`,`value`],[`aria-live`,`polite`,1,`total`],[1,`actions`],[`type`,`button`,3,`click`,`disabled`],[`type`,`button`,1,`record`,3,`click`],[`aria-hidden`,`true`,1,`rec-dot`],[`role`,`status`,1,`notice`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[1,`state`],[`aria-labelledby`,`async-title`,1,`section`],[`aria-labelledby`,`lint-title`,1,`section`],[`id`,`lint-title`],[1,`pill`],[`role`,`alert`,1,`empty-line`],[`role`,`status`,1,`empty-line`],[1,`empty-line`,`ok`],[1,`findings`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[`aria-hidden`,`true`,1,`spinner`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[`role`,`alert`,1,`notice`,`error`],[1,`layout`],[1,`list-wrap`],[`aria-label`,`Pipes`,`appRovingList`,`[data-pipe-row]`,1,`pipe-list`],[`role`,`status`,1,`state`,`compact`],[`id`,`pipe-detail`,`aria-labelledby`,`pipe-detail-title`,1,`detail`],[`d`,`M12 8v5M12 16h.01`],[`type`,`button`,`data-pipe-row`,``,`aria-controls`,`pipe-detail`,1,`row`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`row-main`],[1,`name`,`mono`],[1,`sub`,`mono`],[1,`row-meta`],[1,`chip`,`warn`],[1,`chip`,`live`],[1,`chip`],[1,`row-file`,`mono`],[1,`no-source`],[1,`more`],[1,`chip`,`hot`],[1,`detail-head`],[`id`,`pipe-detail-title`,`tabindex`,`-1`,1,`mono`],[1,`block`],[1,`mono`],[1,`empty-line`],[3,`file`,`line`],[1,`sites`],[`role`,`note`,1,`warning`],[1,`chips`],[1,`hint`],[`type`,`button`,1,`component`],[1,`component`],[`type`,`button`,1,`component`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`count`],[1,`mono`,`value`],[1,`instance`],[1,`calls`],[1,`mono`,`value`,`caller`],[1,`muted`],[`id`,`pipe-detail-title`,1,`visually-hidden`],[1,`state`,`compact`],[`id`,`async-title`],[1,`async-list`],[1,`async-row`],[1,`async-row`,3,`mouseenter`,`mouseleave`],[`type`,`button`,1,`component-name`,`mono`],[1,`mono`,`component-name`],[1,`mono`,`value`,`latest`],[`type`,`button`,1,`component-name`,`mono`,3,`click`,`focus`,`blur`],[1,`finding`],[1,`finding-head`],[1,`severity`],[1,`mono`,`rule`],[1,`where`,`mono`],[`type`,`button`,1,`pipe-link`],[1,`finding-message`],[1,`finding-fix`],[1,`fix-label`],[`type`,`button`,1,`pipe-link`,3,`click`],[1,`sr-only`]],template:function(e,t){if(e&1){let e=B();F(0,`p`,1),K(1,` Pipes declared in your source, the built-in pipes your templates use and library pipes seen on the page. Live data shows which components use each pipe on the page; turn on recording to capture calls and the last input and output. `),I(),F(2,`div`,2)(3,`app-search-field`,3,0),M_(`valueChange`,function(n){return S(e),j_(t.filter,n)||(t.filter=n),C(n)}),I(),F(5,`app-select`,4),M_(`valueChange`,function(n){return S(e),j_(t.kind,n)||(t.kind=n),C(n)}),I(),F(6,`app-select`,5),M_(`valueChange`,function(n){return S(e),j_(t.sort,n)||(t.sort=n),C(n)}),I(),F(7,`span`,6),K(8),I(),F(9,`div`,7)(10,`button`,8),H(`click`,function(){return t.refresh()}),K(11,`Refresh`),I(),F(12,`button`,9),H(`click`,function(){return t.toggleInstrument()}),L(13,`span`,10),K(14),I()()(),A(15,$1,6,1,`p`,11),A(16,e0,8,1,`p`,11),A(17,t0,4,0,`div`,12)(18,n0,7,0,`div`,13)(19,r0,5,0,`div`,14)(20,n2,8,3),A(21,u2,17,2,`section`,15),F(22,`section`,16)(23,`h2`,17),K(24,` Lint `),A(25,d2,2,1,`span`,18),I(),A(26,f2,2,0,`p`,19)(27,p2,2,0,`p`,20)(28,m2,2,0,`p`,21)(29,v2,3,0,`ul`,22),I()}if(e&2){let e,n;D(3),A_(`value`,t.filter),D(2),P(`options`,t.kindOptions),A_(`value`,t.kind),D(),P(`options`,t.sortOptions),A_(`value`,t.sort),D(2),Y(``,t.filtered().length,` of `,t.allPipes().length),D(2),P(`disabled`,t.loading()),D(2),G(`on`,t.instrumenting()),k(`aria-pressed`,t.instrumenting())(`aria-busy`,t.pendingRecord()!==null)(`aria-disabled`,t.pendingRecord()!==null),D(2),J(` `,t.recordLabel(),` `),D(),j((e=t.recordMessage())?15:-1,e),D(),j(t.instrumenting()?16:-1),D(),j(t.loading()&&t.allPipes().length===0?17:t.loadFailed()&&t.allPipes().length===0?18:t.allPipes().length===0?19:20),D(4),j(t.async().length>0?21:-1),D(4),j((n=t.lint())?25:-1,n),D(),j(t.lintFailed()?26:t.lint()===null?27:t.lint().length?29:28)}},dependencies:[NV,$N,wD,bj],styles:[`[_nghost-%COMP%] {
-  display: block;
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.intro[_ngcontent-%COMP%] {
-  max-width: 720px;
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 12px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
-}
-
-input[type=search][_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[type=search][_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.toolbar[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  width: 150px;
-}
-
-.total[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  margin-left: auto;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.record[aria-busy=true][_ngcontent-%COMP%] {
-  cursor: progress;
-}
-
-.rec-dot[_ngcontent-%COMP%] {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--%NS%text-3);
-}
-
-.record.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.record.on[_ngcontent-%COMP%]   .rec-dot[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.notice[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  margin: 0 0 12px;
-  padding: 10px 12px;
-  border: 1px solid var(--%NS%accent-line);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-  animation: enter 0.2s var(--%NS%ease) both;
-}
-
-.notice[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-.notice[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
-  fill: none;
-  stroke: var(--%NS%accent);
-  stroke-width: 2;
-  stroke-linecap: round;
-}
-
-.notice.error[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.notice.error[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  margin-top: 0;
-  stroke: currentColor;
-}
-
-.notice.error[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-}
-
-.layout[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 12px;
-  align-items: start;
-}
-
-@media (min-width: 880px) {
-  .layout[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
-  }
-  .detail[_ngcontent-%COMP%] {
-    position: sticky;
-    top: 64px;
-    max-height: calc(100vh - 150px);
-    overflow: auto;
-  }
-}
-.list-wrap[_ngcontent-%COMP%] {
-  min-width: 0;
-}
-
-.pipe-list[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  margin: 0;
-  padding: 6px;
-  list-style: none;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 2px 12px;
-  width: 100%;
-  height: auto;
-  padding: 8px 10px;
-  border: 0;
-  border-radius: var(--%NS%radius-sm);
-  background: none;
-  text-align: left;
-  font-weight: 400;
-  white-space: normal;
-}
-
-.row[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: transparent;
-  background: var(--%NS%surface-2);
-}
-
-.row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.row.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.row-main[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-}
-
-.name[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.sub[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.row-meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 4px;
-}
-
-.row-file[_ngcontent-%COMP%] {
-  grid-column: 1/-1;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  overflow-wrap: anywhere;
-}
-
-.no-source[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-sans);
-  font-style: italic;
-}
-
-.more[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%text-2);
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 18px;
-  padding: 0 7px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.chip.impure[_ngcontent-%COMP%], 
-.chip.warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.chip.live[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.chip.hot[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-  text-transform: none;
-  font-variant-numeric: tabular-nums;
-}
-
-.pill[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 16px;
-  padding: 0 5px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-.detail[_ngcontent-%COMP%] {
-  min-width: 0;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.detail-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 10px;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 600;
-  overflow-wrap: anywhere;
-  border-radius: 4px;
-}
-
-.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]:focus {
-  outline: none;
-}
-
-.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.block[_ngcontent-%COMP%] {
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.block[_ngcontent-%COMP%]:last-child {
-  border-bottom: 0;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 0 0 10px;
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 6px 14px;
-  margin: 0;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text);
-}
-
-.value[_ngcontent-%COMP%] {
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.sites[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.calls[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%text-3);
-}
-
-.instance[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-}
-
-.instance[_ngcontent-%COMP%]   .component[_ngcontent-%COMP%] {
-  padding-right: 10px;
-}
-
-.caller[_ngcontent-%COMP%] {
-  flex-basis: 100%;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.component[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 24px;
-  padding: 0 4px 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 99px;
-  background: var(--%NS%bg);
-  font-size: 12px;
-  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
-}
-
-button.component[_ngcontent-%COMP%] {
-  height: 24px;
-  padding: 0 4px 0 10px;
-  border-radius: 99px;
-  background: var(--%NS%bg);
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.count[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  line-height: 16px;
-  font-variant-numeric: tabular-nums;
-}
-
-.warning[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 8px;
-  margin: 0 0 12px;
-  padding: 8px 10px;
-  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%warn) 8%, transparent);
-  color: var(--%NS%text);
-  line-height: 1.5;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-}
-
-.empty-line[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.empty-line.ok[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.section[_ngcontent-%COMP%] {
-  margin-top: 20px;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.section[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 8px;
-}
-
-.section[_ngcontent-%COMP%]    > .hint[_ngcontent-%COMP%] {
-  margin: -2px 0 10px;
-}
-
-.async-list[_ngcontent-%COMP%], 
-.findings[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.async-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 8px;
-  min-width: 0;
-  padding: 8px 12px;
-  border-radius: var(--%NS%radius-sm);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-
-.async-row[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-}
-
-.component-name[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-button.component-name[_ngcontent-%COMP%] {
-  height: 24px;
-  padding: 0 8px;
-  margin-left: -8px;
-  border-color: transparent;
-  background: none;
-  font-size: 13px;
-}
-
-.latest[_ngcontent-%COMP%] {
-  flex: 1 1 100%;
-  color: var(--%NS%text-2);
-}
-
-.finding[_ngcontent-%COMP%] {
-  padding: 10px 12px;
-  border-radius: var(--%NS%radius-sm);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.finding-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 8px;
-}
-
-.severity[_ngcontent-%COMP%] {
-  padding: 0 7px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  color: var(--%NS%text-2);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  line-height: 16px;
-  text-transform: uppercase;
-}
-
-.severity[data-tone=warning][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.severity[data-tone=error][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.rule[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-size: 12px;
-}
-
-.where[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  overflow-wrap: anywhere;
-}
-
-button.pipe-link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%accent);
-  font: inherit;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  white-space: normal;
-}
-
-button.pipe-link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%accent-hover);
-}
-
-button.pipe-link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.finding-message[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  color: var(--%NS%text);
-  line-height: 1.5;
-}
-
-.finding-fix[_ngcontent-%COMP%] {
-  margin: 4px 0 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.fix-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-right: 4px;
-}
-
-.state[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 40px 16px;
-  text-align: center;
-  background: var(--%NS%surface);
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.state.compact[_ngcontent-%COMP%] {
-  padding: 28px 16px;
-  border: 0;
-  background: none;
-}
-
-.list-wrap[_ngcontent-%COMP%]   .state.compact[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.state-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.state-hint[_ngcontent-%COMP%] {
-  max-width: 440px;
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}`]})},C2=(e,t)=>t.id,w2=(e,t)=>t[0];function T2(e,t){if(e&1){let e=B();F(0,`div`,2)(1,`span`,17),K(2,`Route`),I(),F(3,`app-select`,18),H(`valueChange`,function(t){return S(e),C(W().pick(t))}),I()()}if(e&2){let e=W();D(3),P(`options`,e.routeOptions())(`value`,e.routeKey())}}function E2(e,t){if(e&1&&(K(0,` Sends `),F(1,`span`,19),K(2),I()),e&2){let e=W();D(2),q(e.url())}}function D2(e,t){if(e&1&&(F(0,`p`,8),K(1),I()),e&2){let e=W();D(),q(e.callsOff)}}function O2(e,t){if(e&1&&(F(0,`p`,9),K(1),I()),e&2){let e=W();D(),J(` Tick "This request can change data on the dev server" below to send a `,e.method(),` request. `)}}function k2(e,t){if(e&1){let e=B();F(0,`div`,2)(1,`label`,21),K(2),I(),F(3,`input`,22),H(`input`,function(t){let n=S(e).$implicit;return C(W(2).setParam(n,t.target.value))}),I()()}if(e&2){let e=t.$implicit,n=t.$index,r=W(2);D(),P(`for`,`param-`+n),D(),q(e===`**`?`rest of the path`:e),D(),P(`id`,`param-`+n)(`value`,r.paramValues()[e]??``)}}function A2(e,t){if(e&1&&(F(0,`fieldset`,10)(1,`legend`,20),K(2,`Path params`),I(),M(3,k2,4,4,`div`,2,eg),I()),e&2){let e=W();D(3),N(e.params())}}function j2(e,t){if(e&1&&(F(0,`span`,23),K(1),I()),e&2){let e=W().$implicit,t=W();D(),q(t.pairs(e).length)}}function M2(e,t){if(e&1){let e=B();F(0,`div`,24)(1,`label`,25),K(2),I(),F(3,`input`,26),H(`input`,function(t){let n=S(e).$implicit,r=W().$implicit;return C(W().editPair(r,n.id,`key`,t.target.value))}),I(),F(4,`label`,25),K(5),I(),F(6,`input`,27),H(`input`,function(t){let n=S(e).$implicit,r=W().$implicit;return C(W().editPair(r,n.id,`value`,t.target.value))}),I(),F(7,`button`,12),H(`click`,function(){let t=S(e).$implicit,n=W().$implicit;return C(W().removePair(n,t.id))}),K(8,` Remove `),I()()}if(e&2){let e=t.$implicit,n=t.$index,r=W().$implicit,i=W();D(),P(`for`,r+`-key-`+e.id),D(),Y(``,i.labels[r].key,` `,n+1,` name`),D(),P(`id`,r+`-key-`+e.id)(`placeholder`,i.labels[r].key)(`value`,e.key),D(),P(`for`,r+`-value-`+e.id),D(),Y(``,i.labels[r].key,` `,n+1,` value`),D(),P(`id`,r+`-value-`+e.id)(`value`,e.value),D(),k(`aria-label`,`Remove `+i.labels[r].key.toLowerCase()+` `+(n+1))}}function N2(e,t){if(e&1){let e=B();F(0,`details`,11)(1,`summary`),K(2),A(3,j2,2,1,`span`,23),I(),M(4,M2,9,12,`div`,24,C2),F(6,`button`,12),H(`click`,function(){let t=S(e).$implicit;return C(W().addPair(t))}),K(7),I()()}if(e&2){let e=t.$implicit,n=W();P(`open`,n.pairs(e).length>0),D(2),J(` `,n.labels[e].title,` `),D(),j(n.pairs(e).length?3:-1),D(),N(n.pairs(e)),D(3),J(` `,n.labels[e].add,` `)}}function P2(e,t){if(e&1){let e=B();F(0,`label`,28),K(1,`JSON body`),I(),F(2,`textarea`,29),H(`input`,function(t){return S(e),C(W().body.set(t.target.value))}),I(),F(3,`label`,30)(4,`input`,31),H(`change`,function(){S(e);let t=W();return C(t.confirmSend.set(!t.confirmSend()))}),I(),K(5,` This request can change data on the dev server`),I()}if(e&2){let e=W();D(2),P(`value`,e.body()),D(2),P(`checked`,e.confirmSend())}}function F2(e,t){if(e&1&&(F(0,`p`,14),K(1),I()),e&2){let e=W();D(),Y(`Sending `,e.method(),` `,e.url(),`…`)}}function I2(e,t){if(e&1&&(F(0,`div`,2)(1,`span`,32),K(2,`Refused`),I(),F(3,`span`),K(4),I()()),e&2){let e=W();D(4),q(e.error)}}function L2(e,t){e&1&&K(0),e&2&&J(` · headers after `,W(2).headersMs,` ms `)}function R2(e,t){if(e&1&&(F(0,`dt`,19),K(1),I(),F(2,`dd`,19),K(3),I()),e&2){let e=t.$implicit;D(),q(e[0]),D(2),q(e[1])}}function z2(e,t){if(e&1&&(F(0,`details`)(1,`summary`),K(2),I(),F(3,`dl`,36),M(4,R2,4,2,null,null,w2),I()()),e&2){let e=W(2),t=W();D(2),J(`Response headers (`,t.headerList(e).length,`)`),D(2),N(t.headerList(e))}}function B2(e,t){if(e&1&&(F(0,`div`,2)(1,`span`,33),K(2),I(),F(3,`span`,34),K(4),A(5,L2,1,1),K(6),I()(),A(7,z2,6,1,`details`),F(8,`pre`,35),K(9),I()),e&2){let e=W(),t=W();D(),k(`data-status`,t.statusClass(e.status??0)),D(),q(e.status),D(2),J(``,e.ms,` ms total `),D(),j(e.headersMs===void 0?-1:5),D(),Y(` · `,t.sizeText(e.size),` · `,e.type||`no content type`),D(),j(t.headerList(e).length?7:-1),D(2),q(t.pretty(e.body??``))}}function V2(e,t){e&1&&(F(0,`div`,15),A(1,I2,5,1,`div`,2)(2,B2,10,8),I()),e&2&&(D(),j(t.error?1:2))}function H2(e,t){if(e&1&&(F(0,`span`,39),K(1),I()),e&2){let e=W().$implicit;D(),J(``,e.ms,` ms`)}}function U2(e,t){if(e&1){let e=B();F(0,`li`,2)(1,`span`,33),K(2),I(),F(3,`span`,38),K(4),I(),A(5,H2,2,1,`span`,39),F(6,`button`,12),H(`click`,function(){let t=S(e).$implicit;return C(W(2).restore(t))}),K(7,` Load `),I()()}if(e&2){let e=t.$implicit,n=W(2);D(),k(`data-status`,e.error?`bad`:n.statusClass(e.status??0)),D(),q(e.error?`Refused`:e.status),D(2),Y(``,e.method,` `,e.url),D(),j(e.ms===void 0?-1:5),D(),k(`aria-label`,`Load `+e.method+` `+e.url+` again`)}}function W2(e,t){if(e&1&&(F(0,`div`,16)(1,`h3`),K(2),I(),F(3,`ul`,37),M(4,U2,8,6,`li`,2,$h),I()()),e&2){let e=W();D(2),J(`History for `,e.template().trim()||`/`),D(2),N(e.history())}}var G2=10,K2={query:{title:`Query`,key:`Name`,add:`Add query parameter`},headers:{title:`Headers`,key:`Header`,add:`Add header`},cookies:{title:`Cookies`,key:`Cookie`,add:`Add cookie`}},q2=0;function J2(e){let t=Array.from(e.matchAll(/:(\w+)/g),e=>e[1]);return/(^|\/)\*\*(\/|$)/.test(e)&&t.push(`**`),[...new Set(t)]}function Y2(e,t){return e.replace(/:(\w+)/g,(e,n)=>t[n]?encodeURIComponent(t[n]):e).replace(/(^|\/)\*\*(?=\/|$)/,(e,n)=>t[`**`]?`${n}${t[`**`].split(`/`).map(encodeURIComponent).join(`/`)}`:e)}function X2(e){return`'${e.replace(/'/g,`'\\''`)}'`}var Z2=class e{rpc=$(null);routes=$([]);target=$(null);origin=$(``);canCall=X(()=>OT(this.rpc(),`analog`));callsOff=Mw(`analog`);labels=K2;pairLists=[`query`,`headers`,`cookies`];methodOptions=[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`].map(e=>({value:e,label:e}));method=T(`GET`);template=T(``);paramValues=T({});query=T([]);headers=T([]);cookies=T([]);body=T(``);response=T(null);sending=T(!1);copied=T(``);historyByRoute=T({});params=X(()=>J2(this.template()));url=X(()=>{let e=Y2(this.template().trim(),this.paramValues()),t=new URLSearchParams;for(let e of this.query())e.key.trim()&&t.append(e.key.trim(),e.value);let n=t.toString();return n?`${e}${e.includes(`?`)?`&`:`?`}${n}`:e});confirmSend=Q({source:()=>`${this.method()} ${this.url()}`,computation:()=>!1});needsConfirm=X(()=>this.method()!==`GET`&&!this.confirmSend());canSend=X(()=>this.canCall()&&!this.sending()&&!this.needsConfirm()&&!!this.template().trim());sendHintId=X(()=>this.canCall()?this.needsConfirm()?`analog-confirm-hint`:null:`analog-calls-off`);history=X(()=>this.historyByRoute()[this.template().trim()]??[]);routeOptions=X(()=>this.routes().map(e=>({value:`${e.method} ${e.path}`,label:`${e.method} ${e.path}`})));routeKey=X(()=>{let e=`${this.method()} ${this.template().trim()}`;return this.routeOptions().some(t=>t.value===e)?e:null});lastNonce=-1;constructor(){E(()=>{let e=this.target();e&&e.nonce!==this.lastNonce&&(this.lastNonce=e.nonce,Z(()=>this.load(e.route)))})}load(e){this.method.set(e.method===`ANY`?`GET`:e.method),this.template.set(e.path),this.paramValues.set({}),this.confirmSend.set(!1),this.response.set(null),queueMicrotask(()=>{let e=this.params().length?`param-0`:`api-path`;document.getElementById(e)?.focus()})}pick(e){let t=this.routes().find(t=>`${t.method} ${t.path}`===e);t&&this.load(t)}setParam(e,t){this.paramValues.update(n=>({...n,[e]:t}))}pairs(e){return this[e]()}addPair(e){let t=q2++;this[e].update(e=>[...e,{id:t,key:``,value:``}]),queueMicrotask(()=>document.getElementById(`${e}-key-${t}`)?.focus())}editPair(e,t,n,r){this[e].update(e=>e.map(e=>e.id===t?{...e,[n]:r}:e))}removePair(e,t){this[e].update(e=>e.filter(e=>e.id!==t))}record(e){let t={};for(let n of this[e]())n.key.trim()&&(t[n.key.trim()]=n.value);return Object.keys(t).length?t:void 0}parsedBody(){if(this.method()===`GET`||!this.body().trim())return{};try{return{body:JSON.parse(this.body())}}catch{return{error:`The body is not valid JSON.`}}}snapshot(){return{method:this.method(),template:this.template().trim(),params:{...this.paramValues()},query:this.query(),headers:this.headers(),cookies:this.cookies(),body:this.body()}}restore(e){let t=e.snapshot;this.method.set(t.method),this.template.set(t.template),this.paramValues.set({...t.params}),this.query.set(t.query),this.headers.set(t.headers),this.cookies.set(t.cookies),this.body.set(t.body),this.response.set(null)}async send(){let e=this.url();if(!this.template().trim()||this.sending()||this.needsConfirm())return;let t=this.parsedBody();if(t.error){this.response.set({error:t.error});return}let n=this.snapshot();this.response.set(null),this.sending.set(!0);try{let r=await sT(this.rpc(),`analog-call-api`,{method:this.method(),path:e,body:t.body,headers:this.record(`headers`),cookies:this.record(`cookies`),confirm:this.confirmSend()})??{error:`No answer from the devtools server.`};this.response.set(r);let i={at:Date.now(),url:e,method:n.method,snapshot:n,...r.error?{error:r.error}:{status:r.status,ms:r.ms}};this.historyByRoute.update(e=>({...e,[n.template]:[i,...e[n.template]??[]].slice(0,G2)}))}finally{this.sending.set(!1),this.confirmSend.set(!1)}}command(e){let t=`${this.origin()||`http://localhost:5173`}${this.url()}`,n={...this.record(`headers`)},r=this.record(`cookies`);r&&(n.cookie=Object.entries(r).map(([e,t])=>`${e}=${t}`).join(`; `));let i=this.method()!==`GET`&&this.body().trim()?this.body().trim():void 0;if(i&&(n[`content-type`]??=`application/json`),e===`curl`)return[`curl -X ${this.method()} ${X2(t)}`,...Object.entries(n).map(([e,t])=>`-H ${X2(`${e}: ${t}`)}`),...i?[`--data ${X2(i)}`]:[]].join(` \\
-  `);let a={method:this.method()};return Object.keys(n).length&&(a.headers=n),i&&(a.body=i),`await fetch(${JSON.stringify(t)}, ${JSON.stringify(a,null,2)});`}async copy(e){try{await navigator.clipboard.writeText(this.command(e)),this.copied.set(e===`curl`?`Copied as curl.`:`Copied as fetch.`)}catch{this.copied.set(`Could not copy. The browser blocked the clipboard.`)}}headerList(e){return Object.entries(e.headers??{})}sizeText(e){return e===void 0?`size unknown`:e<1024?`${e} B`:`${(e/1024).toFixed(1)} kB`}statusClass(e){return e>=500||e===0?`bad`:e>=400?`warn`:`good`}pretty(e){try{return JSON.stringify(JSON.parse(e),null,2)}catch{return e}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-playground`]],inputs:{rpc:[1,`rpc`],routes:[1,`routes`],target:[1,`target`],origin:[1,`origin`]},decls:36,vars:14,consts:[[1,`card`,`playground`,3,`submit`],[`id`,`playground-heading`],[1,`row`],[`ariaLabel`,`Method`,1,`method-select`,3,`valueChange`,`options`,`value`],[`for`,`api-path`,1,`sr-only`],[`id`,`api-path`,`type`,`text`,`placeholder`,`/api/v1/products/:id`,`aria-describedby`,`api-path-hint`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`id`,`api-path-hint`,1,`muted`,`small`],[`id`,`analog-calls-off`,1,`muted`],[`id`,`analog-confirm-hint`,1,`muted`],[1,`group`],[1,`group`,3,`open`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`role`,`status`,1,`muted`,`small`],[`role`,`status`,1,`muted`],[`role`,`status`,1,`response`],[1,`history`],[`id`,`playground-route-label`,1,`label`],[`labelledBy`,`playground-route-label`,`placeholder`,`Pick an API route`,1,`grow`,3,`valueChange`,`options`,`value`],[1,`mono`],[1,`label`],[1,`pair-key`,`mono`,3,`for`],[`type`,`text`,1,`field`,`grow`,`mono`,3,`input`,`id`,`value`],[1,`pill`],[1,`row`,`pair`],[1,`sr-only`,3,`for`],[`type`,`text`,1,`field`,`mono`,`pair-input`,3,`input`,`id`,`placeholder`,`value`],[`type`,`text`,`placeholder`,`Value`,1,`field`,`grow`,`mono`,3,`input`,`id`,`value`],[`for`,`api-body`,1,`label`],[`id`,`api-body`,`rows`,`3`,`placeholder`,`{"name": "Ada"}`,1,`field`,`mono`,3,`input`,`value`],[1,`check`,`confirm-send`],[`type`,`checkbox`,3,`change`,`checked`],[`data-status`,`bad`,1,`status`],[1,`status`],[1,`muted`,`tnum`],[1,`code`],[1,`facts`,`headers`],[1,`plain`],[1,`mono`,`path`],[1,`muted`,`small`,`tnum`]],template:function(e,t){if(e&1&&(F(0,`form`,0),H(`submit`,function(e){return e.preventDefault(),t.send()}),F(1,`h2`,1),K(2,`Request playground`),I(),A(3,T2,4,2,`div`,2),F(4,`div`,2)(5,`app-select`,3),H(`valueChange`,function(e){return t.method.set(e??`GET`)}),I(),F(6,`label`,4),K(7,`Path`),I(),F(8,`input`,5),H(`input`,function(e){return t.template.set(e.target.value)}),I(),F(9,`button`,6),K(10),I()(),F(11,`p`,7),K(12,` Write `),F(13,`code`),K(14,`:name`),I(),K(15,` or `),F(16,`code`),K(17,`**`),I(),K(18,` in the path to fill it in below. `),A(19,E2,3,1),I(),A(20,D2,2,1,`p`,8)(21,O2,2,1,`p`,9),A(22,A2,5,0,`fieldset`,10),M(23,N2,8,4,`details`,11,eg),A(25,P2,6,2),F(26,`div`,2)(27,`button`,12),H(`click`,function(){return t.copy(`curl`)}),K(28,`Copy as curl`),I(),F(29,`button`,12),H(`click`,function(){return t.copy(`fetch`)}),K(30,`Copy as fetch`),I(),F(31,`span`,13),K(32),I()(),A(33,F2,2,2,`p`,14)(34,V2,3,1,`div`,15),A(35,W2,6,1,`div`,16),I()),e&2){let e;D(3),j(t.routeOptions().length?3:-1),D(2),P(`options`,t.methodOptions)(`value`,t.method()),D(3),P(`value`,t.template()),D(),P(`disabled`,!t.canSend()),k(`aria-describedby`,t.sendHintId()),D(),J(` `,t.sending()?`Sending…`:`Send`,` `),D(9),j(t.template().trim()?19:-1),D(),j(t.canCall()?t.needsConfirm()?21:-1:20),D(2),j(t.params().length?22:-1),D(),N(t.pairLists),D(2),j(t.method()===`GET`?-1:25),D(7),q(t.copied()),D(),j(t.sending()?33:(e=t.response())?34:-1,e),D(2),j(t.history().length?35:-1)}},dependencies:[wD],styles:[`h2[_ngcontent-%COMP%], 
-h3[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.tnum[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.55;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.grow[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.field[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.field.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-}
-
-.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.field[_ngcontent-%COMP%]:focus, 
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea.field[_ngcontent-%COMP%] {
-  height: auto;
-  padding: 8px 12px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.btn.primary[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-.btn.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.btn.danger[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible, 
-.table-wrap[_ngcontent-%COMP%]:focus-visible, 
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 480px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.path[_ngcontent-%COMP%], 
-.file[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.pill[_ngcontent-%COMP%], 
-.chip[_ngcontent-%COMP%], 
-.status[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin: 0 4px 4px 0;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-[data-tone=good].pill[_ngcontent-%COMP%], 
-[data-status=good].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-[data-tone=warn].pill[_ngcontent-%COMP%], 
-[data-tone=warn].chip[_ngcontent-%COMP%], 
-[data-status=warn].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-[data-tone=bad].pill[_ngcontent-%COMP%], 
-[data-tone=bad].chip[_ngcontent-%COMP%], 
-[data-status=bad].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.code[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 260px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.note[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.note[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 16px;
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  padding-top: 2px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-summary[_ngcontent-%COMP%] {
-  cursor: pointer;
-  color: var(--%NS%text-2);
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-@media (max-width: 560px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: 1fr;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .card[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-[_nghost-%COMP%] {
-  display: block;
-}
-
-.method-select[_ngcontent-%COMP%] {
-  width: 112px;
-  font-family: var(--%NS%mono);
-}
-
-.group[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 10px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-details.group[_ngcontent-%COMP%]    > summary[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-details.group[open][_ngcontent-%COMP%]    > summary[_ngcontent-%COMP%] {
-  margin-bottom: 4px;
-}
-
-.group[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%] {
-  padding: 0 4px;
-}
-
-.pair-key[_ngcontent-%COMP%] {
-  min-width: 120px;
-  color: var(--%NS%text-2);
-}
-
-.pair-input[_ngcontent-%COMP%] {
-  flex: 0 1 180px;
-  min-width: 0;
-}
-
-.response[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  padding: 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-}
-
-.headers[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  padding: 1px 6px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 4px;
-  font-family: var(--%NS%mono);
-  font-size: 12px;
-}
-
-.history[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-}
-
-.plain[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-@media (max-width: 560px) {
-  .pair-input[_ngcontent-%COMP%] {
-    flex: 1 1 100%;
-  }
-}`]})},Q2=(e,t)=>t.file;function $2(e,t){e&1&&(R(0,`p`,4),K(1,`Reading the build output…`),z())}function e4(e,t){e&1&&(R(0,`p`,5),K(1,`Could not read the build output.`),z())}function t4(e,t){e&1&&(R(0,`p`,6),K(1,` No client build yet. Run `),R(2,`code`),K(3,`analog build`),z(),K(4,` to see each page's chunk sizes here. `),z())}function n4(e,t){if(e&1&&(R(0,`dt`),K(1,`Entry`),z(),R(2,`dd`)(3,`span`,8),K(4),z(),R(5,`span`,15),K(6),z()()),e&2){W();let e=I_(0),t=W();D(4),q(e.entry.chunk),D(2),Y(` loads `,t.size(e.entry.size),` (`,t.size(e.entry.gzip),` gzip) with its imports`)}}function r4(e,t){if(e&1&&(R(0,`div`,17),K(1),z()),e&2){let e=W(2).$implicit;D(),Y(` + `,e.shared.length,` shared chunk`,e.shared.length===1?``:`s`,` `)}}function i4(e,t){if(e&1&&(R(0,`span`,16),K(1),z(),A(2,r4,2,2,`div`,17)),e&2){let e=W().$implicit;D(),q(e.chunk),D(),j(e.shared.length?2:-1)}}function a4(e,t){e&1&&(R(0,`span`,17),K(1,`not found`),z())}function o4(e,t){if(e&1&&(K(0),R(1,`div`,17),K(2),z()),e&2){let e=W().$implicit,t=W(2);J(` `,t.size(e.size),` `),D(2),J(``,t.size(e.gzip),` gzip`)}}function s4(e,t){if(e&1&&(R(0,`span`,19),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function c4(e,t){if(e&1&&(R(0,`tr`)(1,`td`,16),K(2),z(),R(3,`td`),A(4,i4,3,2)(5,a4,2,0,`span`,17),z(),R(6,`td`,18),A(7,o4,3,2),z(),R(8,`td`),M(9,s4,2,1,`span`,19,eg),z()()),e&2){let e=t.$implicit;D(2),q(e.path),D(2),j(e.chunk?4:5),D(3),j(e.chunk?7:-1),D(2),N(e.lazy)}}function l4(e,t){e&1&&(R(0,`tr`)(1,`td`,20),K(2,`No pages to match with the build.`),z()())}function u4(e,t){if(e&1&&(R(0,`li`)(1,`span`,16),K(2),z(),R(3,`span`,21),K(4),z()()),e&2){let e=t.$implicit,n=W(2);D(2),q(e.file),D(2),Y(``,n.size(e.size),` · `,n.size(e.gzip),` gzip`)}}function d4(e,t){if(e&1&&(R(0,`p`,14),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function f4(e,t){if(e&1&&(P_(0),R(1,`dl`,7)(2,`dt`),K(3,`Output`),z(),R(4,`dd`,8),K(5),z(),R(6,`dt`),K(7,`JavaScript`),z(),R(8,`dd`,9),K(9),z(),R(10,`dt`),K(11,`CSS`),z(),R(12,`dd`,9),K(13),z(),A(14,n4,7,3),z(),R(15,`div`,10)(16,`table`)(17,`thead`)(18,`tr`)(19,`th`,11),K(20,`Route`),z(),R(21,`th`,11),K(22,`Page chunk`),z(),R(23,`th`,12),K(24,`Beyond the entry`),z(),R(25,`th`,11),K(26,`Lazy chunks`),z()()(),R(27,`tbody`),M(28,c4,11,3,`tr`,null,Q2,!1,l4,3,0,`tr`),z()()(),R(31,`details`)(32,`summary`),K(33),z(),R(34,`ul`,13),M(35,u4,5,3,`li`,null,Q2),z()(),M(37,d4,2,1,`p`,14,eg)),e&2){let e=W(),t=F_(e.analysis());D(5),Y(``,t.dir,` · `,t.totals.chunks,` files`),D(4),Y(``,e.size(t.totals.js),` (`,e.size(t.totals.jsGzip),` gzip)`),D(4),Y(``,e.size(t.totals.css),` (`,e.size(t.totals.cssGzip),` gzip)`),D(),j(t.entry?14:-1),D(14),N(t.routes),D(5),J(`Largest files (`,t.chunks.length,`)`),D(2),N(t.chunks),D(2),N(t.notes)}}function p4(e){return e<1024?`${e} B`:e<1048576?`${(e/1024).toFixed(1)} kB`:`${(e/1024/1024).toFixed(2)} MB`}var m4=class e{rpc=$(null);analysis=T(null);loading=T(!0);size=p4;hasBuild=X(()=>!!this.analysis()?.found);constructor(){E(()=>{let e=this.rpc();Z(()=>void this.fetch(e))})}reload(){this.fetch(this.rpc())}async fetch(e){this.loading.set(!0);let t=await sT(e,`analog-build`);this.analysis.set(t),this.loading.set(!1)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-build`]],inputs:{rpc:[1,`rpc`]},decls:10,vars:3,consts:[[`aria-labelledby`,`build-heading`,1,`card`],[1,`row`,`head`],[`id`,`build-heading`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[1,`muted`],[1,`facts`],[1,`mono`],[1,`tnum`],[`role`,`region`,`aria-label`,`Page chunks`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`plain`],[1,`note`],[1,`muted`,`tnum`],[1,`mono`,`path`],[1,`muted`,`small`],[1,`num`],[1,`chip`,`mono`],[`colspan`,`4`,1,`muted`],[1,`muted`,`small`,`tnum`]],template:function(e,t){e&1&&(R(0,`section`,0)(1,`div`,1)(2,`h2`,2),K(3,`Build analysis`),z(),R(4,`button`,3),U(`click`,function(){return t.reload()}),K(5),z()(),A(6,$2,2,0,`p`,4)(7,e4,2,0,`p`,5)(8,t4,5,0,`p`,6)(9,f4,39,10),z()),e&2&&(D(4),V(`disabled`,t.loading()),D(),J(` `,t.loading()?`Reading…`:`Read again`,` `),D(),j(t.loading()&&!t.analysis()?6:t.analysis()?t.analysis().found?9:8:7))},styles:[`h2[_ngcontent-%COMP%], 
-h3[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.tnum[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.55;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.grow[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.field[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.field.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-}
-
-.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.field[_ngcontent-%COMP%]:focus, 
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea.field[_ngcontent-%COMP%] {
-  height: auto;
-  padding: 8px 12px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.btn.primary[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-.btn.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.btn.danger[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible, 
-.table-wrap[_ngcontent-%COMP%]:focus-visible, 
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 480px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.path[_ngcontent-%COMP%], 
-.file[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.pill[_ngcontent-%COMP%], 
-.chip[_ngcontent-%COMP%], 
-.status[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin: 0 4px 4px 0;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-[data-tone=good].pill[_ngcontent-%COMP%], 
-[data-status=good].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-[data-tone=warn].pill[_ngcontent-%COMP%], 
-[data-tone=warn].chip[_ngcontent-%COMP%], 
-[data-status=warn].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-[data-tone=bad].pill[_ngcontent-%COMP%], 
-[data-tone=bad].chip[_ngcontent-%COMP%], 
-[data-status=bad].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.code[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 260px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.note[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.note[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 16px;
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  padding-top: 2px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-summary[_ngcontent-%COMP%] {
-  cursor: pointer;
-  color: var(--%NS%text-2);
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-@media (max-width: 560px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: 1fr;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .card[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-[_nghost-%COMP%] {
-  display: block;
-}
-
-.head[_ngcontent-%COMP%] {
-  justify-content: space-between;
-}
-
-.plain[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 8px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: space-between;
-}
-
-code[_ngcontent-%COMP%] {
-  padding: 1px 6px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 4px;
-  font-family: var(--%NS%mono);
-  font-size: 12px;
-}`]})},h4=(e,t)=>t[0];function g4(e,t){if(e&1&&(F(0,`li`),L(1,`app-analog-value-node`,6),I()),e&2){let e=t.$implicit;D(),P(`name`,e[0])(`value`,e[1])}}function _4(e,t){if(e&1&&(F(0,`li`,4),K(1),I()),e&2){let e=W(3);D(),J(``,e.hidden(),` more not shown`)}}function v4(e,t){if(e&1&&(F(0,`ul`,5),M(1,g4,2,2,`li`,null,h4),A(3,_4,2,1,`li`,4),I()),e&2){let e=W(2);D(),N(e.entries()),D(2),j(e.hidden()?3:-1)}}function y4(e,t){if(e&1){let e=B();F(0,`details`,2),H(`toggle`,function(t){return S(e),C(W().open.set(t.target.open))}),F(1,`summary`)(2,`span`,3),K(3),I(),F(4,`span`,4),K(5),I()(),A(6,v4,4,1,`ul`,5),I()}if(e&2){let e=W();P(`open`,e.open()),D(3),q(e.name()),D(2),q(e.summary()),D(),j(e.open()?6:-1)}}function b4(e,t){if(e&1&&(F(0,`span`,1)(1,`span`,3),K(2),I(),K(3,`: `),F(4,`span`,7),K(5),I()()),e&2){let e=W();D(2),q(e.name()),D(2),k(`data-type`,e.type()),D(),q(e.text())}}var x4=200,S4=class e{name=$(`value`);value=$(void 0);open=T(!1);isBranch=X(()=>{let e=this.value();return!!e&&typeof e==`object`});all=X(()=>{let e=this.value();return!e||typeof e!=`object`?[]:Array.isArray(e)?e.map((e,t)=>[String(t),e]):Object.entries(e)});entries=X(()=>this.all().slice(0,x4));hidden=X(()=>Math.max(0,this.all().length-x4));summary=X(()=>{let e=this.all().length;return Array.isArray(this.value())?`[${e}]`:`{${e} key${e===1?``:`s`}}`});type=X(()=>this.value()===null?`null`:typeof this.value());text=X(()=>{let e=this.value();return typeof e==`string`?JSON.stringify(e):String(e)});static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-value-node`]],inputs:{name:[1,`name`],value:[1,`value`]},decls:2,vars:1,consts:[[3,`open`],[1,`leaf`],[3,`toggle`,`open`],[1,`key`],[1,`muted`,`small`],[`role`,`list`],[3,`name`,`value`],[1,`value`]],template:function(e,t){e&1&&A(0,y4,7,4,`details`,0)(1,b4,6,3,`span`,1),e&2&&j(+!t.isBranch())},dependencies:[e],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.6;
-}
-
-ul[_ngcontent-%COMP%] {
-  margin: 0;
-  padding-left: 18px;
-  list-style: none;
-  border-left: 1px solid var(--%NS%border);
-}
-
-summary[_ngcontent-%COMP%] {
-  cursor: pointer;
-  color: var(--%NS%text);
-}
-
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.key[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.muted[_ngcontent-%COMP%] {
-  margin-left: 6px;
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.value[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-  color: var(--%NS%text);
-}
-
-.value[data-type=string][_ngcontent-%COMP%] {
-  color: var(--%NS%ok-text, var(--%NS%text));
-}`]})},C4=(e,t)=>t.key;function w4(e,t){e&1&&(F(0,`p`,3),K(1,`Open a page of the app to see the data its load() returned.`),I())}function T4(e,t){if(e&1&&(F(0,`p`,3),K(1),I()),e&2){let e=W();D(),J(``,e.page().url,` has no load() data.`)}}function E4(e,t){if(e&1&&(F(0,`span`,9),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function D4(e,t){if(e&1&&(F(0,`p`,14),K(1),I()),e&2){let e=W();D(),q(e.error)}}function O4(e,t){if(e&1&&(F(0,`div`,15),L(1,`app-analog-value-node`,16),I()),e&2){let e=W();D(),P(`value`,e.value)}}function k4(e,t){e&1&&(F(0,`p`,3),K(1,`The page has no load() data now.`),I())}function A4(e,t){if(e&1&&A(0,D4,2,1,`p`,14)(1,O4,2,1,`div`,15)(2,k4,2,0,`p`,3),e&2){let e=t;j(e.error?0:e.found?1:2)}}function j4(e,t){if(e&1&&(F(0,`pre`,10),K(1),I()),e&2){W();let e=I_(0);D(),q(e.preview)}}function M4(e,t){if(e&1){let e=B();P_(0),F(1,`dl`,6)(2,`dt`),K(3,`Page`),I(),F(4,`dd`,7),K(5),I(),F(6,`dt`),K(7,`Size`),I(),F(8,`dd`,8),K(9),I(),F(10,`dt`),K(11,`Keys`),I(),F(12,`dd`),M(13,E4,2,1,`span`,9,eg),I()(),A(15,A4,3,1)(16,j4,2,1,`pre`,10),F(17,`div`,11)(18,`button`,12),H(`click`,function(){return S(e),C(W().loadFull())}),K(19),I(),F(20,`span`,13),K(21,`Masked by the redaction rules, up to 200 KB.`),I()()}if(e&2){let e,t=W(),n=F_(t.page().load);D(5),q(t.page().url),D(4),q(t.size(n.bytes)),D(4),N(n.keys),D(2),j((e=t.full())?15:16,e),D(3),P(`disabled`,t.loading()),D(),J(` `,t.loading()?`Asking the page…`:t.full()?`Read again`:`Load the full value`,` `)}}function N4(e,t){e&1&&(F(0,`p`,3),K(1,` No payload from this page. It shows once a server rendered page reports its TransferState (the SSR & HTTP inspector must be on). `),I())}function P4(e,t){e&1&&(F(0,`p`,3),K(1,`The page has no TransferState script, so it was not server rendered.`),I())}function F4(e,t){e&1&&K(0),e&2&&J(` · `,W(2).refetchedCount(),` fetched again by the browser `)}function I4(e,t){if(e&1&&(F(0,`p`,18),K(1),I()),e&2){let e=W(2);D(),q(e.payload().error)}}function L4(e,t){if(e&1&&(F(0,`div`,24),K(1),I()),e&2){let e=W().$implicit;D(),q(e.file)}}function R4(e,t){e&1&&(F(0,`span`,26),K(1,`fetched again`),I())}function z4(e,t){e&1&&(F(0,`span`,27),K(1,`reused`),I())}function B4(e,t){if(e&1&&(F(0,`tr`)(1,`td`,22),K(2),I(),F(3,`td`)(4,`span`,23),K(5),I(),F(6,`span`,22),K(7),I(),A(8,L4,2,1,`div`,24),I(),F(9,`td`,25),K(10),I(),F(11,`td`),A(12,R4,2,0,`span`,26)(13,z4,2,0,`span`,27),I()()),e&2){let e=t.$implicit,n=W(2);D(2),q(e.key),D(3),q(n.kindLabel(e.kind)),D(2),q(e.label),D(),j(e.file?8:-1),D(2),q(n.size(e.size)),D(2),j(e.reuse===`refetched`?12:e.reuse===`reused`?13:-1)}}function V4(e,t){e&1&&(F(0,`tr`)(1,`td`,28),K(2,`The payload is empty.`),I()())}function H4(e,t){if(e&1&&(F(0,`p`,17),K(1),A(2,F4,1,1),I(),A(3,I4,2,1,`p`,18),F(4,`div`,19)(5,`table`)(6,`thead`)(7,`tr`)(8,`th`,20),K(9,`Key`),I(),F(10,`th`,20),K(11,`From`),I(),F(12,`th`,21),K(13,`Size`),I(),F(14,`th`,20),K(15,`In the browser`),I()()(),F(16,`tbody`),M(17,B4,14,6,`tr`,null,C4,!1,V4,3,0,`tr`),I()()()),e&2){let e=W();D(),D_(` `,e.rows().length,` entr`,e.rows().length===1?`y`:`ies`,`, `,e.size(e.payload().size),` `),D(),j(e.refetchedCount()?2:-1),D(),j(e.payload().error?3:-1),D(14),N(e.rows())}}function U4(e){if(!e)return;let t=e.replace(/^[a-z]+:\/\/[^/]+/i,``).split(/[?#]/)[0],n=t.indexOf(`/_analog/pages`);if(!(n<0))return(t.slice(n+14)||`/`).replace(/\/\([^/]*\)(?=\/|$)/g,``).replace(/\/-[^/]+-$/,``).replace(/\/index$/,``)||`/`}function W4(e,t,n,r){return e.map(e=>{if(e.fn){let n=t.find(t=>t.id===e.fn.id);return{key:e.key,kind:`fn`,label:`${e.fn.name??n?.name??e.fn.id}()`,file:e.fn.file??n?.file,size:e.size,reuse:r.some(t=>t.id===e.fn.id)?`refetched`:`reused`}}let i=U4(e.http?.url);return i?{key:e.key,kind:`load`,label:`load() of ${i}`,size:e.size,reuse:n.some(e=>e.route===i)?`refetched`:`reused`}:e.source===`hydration`?{key:e.key,kind:`hydration`,label:`Hydration data`,size:e.size}:e.http?{key:e.key,kind:`http`,label:e.http.url??`HTTP response`,size:e.size}:{key:e.key,kind:`state`,label:`App state`,size:e.size}})}var G4={load:`load()`,fn:`server function`,http:`HttpClient`,hydration:`hydration`,state:`state`},K4=class e{rpc=$(null);page=$(null);serverFns=$([]);duplicates=$([]);refetches=$([]);payloads=T({});full=T(null);loading=T(!1);size=p4;destroyRef=x(Ss);unsubscribe=null;pageKey=X(()=>`${this.page()?.pageId??``} ${this.page()?.url??``}`);payload=X(()=>{let e=this.page()?.pageId;return e?this.payloads()[e]??null:null});rows=X(()=>W4(this.payload()?.entries??[],this.serverFns(),this.duplicates(),this.refetches()));refetchedCount=X(()=>this.rows().filter(e=>e.reuse===`refetched`).length);constructor(){E(()=>{let e=this.rpc();Z(()=>void this.subscribe(e))}),E(()=>{this.pageKey(),Z(()=>this.full.set(null))}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async subscribe(e){if(this.unsubscribe?.(),this.unsubscribe=null,e)try{let t=await e.scope(`pangular`).rpc.sharedState(`http-payloads`);if(this.destroyRef.destroyed)return;let n=e=>this.payloads.set(e?.pages??{});n(t.value()),this.unsubscribe=t.on(`updated`,n)}catch{this.payloads.set({})}}async loadFull(){let e=this.page();if(!e)return;let t=this.pageKey();this.loading.set(!0);try{let n=await sT(this.rpc(),`analog-load-data`,e.pageId);if(t!==this.pageKey())return;this.full.set(n??{found:!1,error:`No answer from the devtools server.`})}finally{this.loading.set(!1)}}kindLabel(e){return G4[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-data`]],inputs:{rpc:[1,`rpc`],page:[1,`page`],serverFns:[1,`serverFns`],duplicates:[1,`duplicates`],refetches:[1,`refetches`]},decls:13,vars:2,consts:[[1,`stack`],[`aria-labelledby`,`data-load-heading`,1,`card`],[`id`,`data-load-heading`],[1,`muted`],[`aria-labelledby`,`data-payload-heading`,1,`card`],[`id`,`data-payload-heading`],[1,`facts`],[1,`mono`],[1,`tnum`],[1,`chip`,`mono`],[1,`code`],[1,`row`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[1,`muted`,`small`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[`role`,`region`,`aria-label`,`Full load() value`,`tabindex`,`0`,1,`tree`],[`name`,`load()`,3,`value`],[1,`muted`,`small`,`tnum`],[`data-tone`,`bad`,1,`note`],[`role`,`region`,`aria-label`,`TransferState entries`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`mono`,`path`],[1,`pill`],[1,`muted`,`small`,`file`],[1,`num`],[`data-tone`,`warn`,1,`pill`],[`data-tone`,`good`,1,`pill`],[`colspan`,`4`,1,`muted`]],template:function(e,t){e&1&&(F(0,`div`,0)(1,`section`,1)(2,`h2`,2),K(3,`load() data of the open page`),I(),A(4,w4,2,0,`p`,3)(5,T4,2,1,`p`,3)(6,M4,22,6),I(),F(7,`section`,4)(8,`h2`,5),K(9,`TransferState payload`),I(),A(10,N4,2,0,`p`,3)(11,P4,2,0,`p`,3)(12,H4,20,6),I()()),e&2&&(D(4),j(t.page()?t.page().load?6:5:4),D(6),j(t.payload()?t.payload().found?12:11:10))},dependencies:[S4],styles:[`h2[_ngcontent-%COMP%], 
-h3[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.tnum[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.55;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.grow[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.field[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.field.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-}
-
-.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.field[_ngcontent-%COMP%]:focus, 
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea.field[_ngcontent-%COMP%] {
-  height: auto;
-  padding: 8px 12px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.btn.primary[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-.btn.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.btn.danger[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible, 
-.table-wrap[_ngcontent-%COMP%]:focus-visible, 
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 480px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.path[_ngcontent-%COMP%], 
-.file[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.pill[_ngcontent-%COMP%], 
-.chip[_ngcontent-%COMP%], 
-.status[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin: 0 4px 4px 0;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-[data-tone=good].pill[_ngcontent-%COMP%], 
-[data-status=good].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-[data-tone=warn].pill[_ngcontent-%COMP%], 
-[data-tone=warn].chip[_ngcontent-%COMP%], 
-[data-status=warn].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-[data-tone=bad].pill[_ngcontent-%COMP%], 
-[data-tone=bad].chip[_ngcontent-%COMP%], 
-[data-status=bad].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.code[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 260px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.note[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.note[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 16px;
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  padding-top: 2px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-summary[_ngcontent-%COMP%] {
-  cursor: pointer;
-  color: var(--%NS%text-2);
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-@media (max-width: 560px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: 1fr;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .card[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-[_nghost-%COMP%] {
-  display: block;
-}
-
-.stack[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 16px;
-}
-
-.tree[_ngcontent-%COMP%] {
-  max-height: 420px;
-  overflow: auto;
-  padding: 10px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-}
-
-.tree[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}`]})},q4=400;function J4(e){let t=[];for(let[n,r]of e.split(/(`[^`]+`)/).entries())r&&(n%2==1?t.push({text:r.slice(1,-1),code:!0}):t.push(...X4(Y4(r))));return t}function Y4(e){return e.replace(/!\[([^\]]*)\]\([^)]*\)/g,`$1`).replace(/\[([^\]]+)\]\([^)]*\)/g,`$1`).replace(/<[^>]+>/g,``)}function X4(e){let t=[],n=/(\*\*[^*]+\*\*|__[^_]+__|\*[^*\s][^*]*\*|_[^_\s][^_]*_)/g,r=0;for(let i of e.matchAll(n)){i.index>r&&t.push({text:e.slice(r,i.index)});let n=i[0];n.startsWith(`**`)||n.startsWith(`__`)?t.push({text:n.slice(2,-2),strong:!0}):t.push({text:n.slice(1,-1),em:!0}),r=i.index+n.length}return r<e.length&&t.push({text:e.slice(r)}),t}function Z4(e){let t=[],n=e.replace(/\r/g,``).split(`
-`),r=[],i=()=>{r.length&&t.push({kind:`paragraph`,parts:J4(r.join(` `))}),r=[]};for(let e=0;e<n.length&&t.length<q4;e++){let a=n[e],o=a.match(/^\s*(```|~~~)\s*([\w-]*)/);if(o){i();let r=[];for(e++;e<n.length&&!n[e].trim().startsWith(o[1]);e++)r.push(n[e]);t.push({kind:`code`,lang:o[2],text:r.join(`
-`)});continue}let s=a.match(/^(#{1,6})\s+(.*?)\s*#*\s*$/);if(s){i();let e=s[1].length;t.push({kind:`heading`,level:e,parts:J4(s[2])});continue}if(/^\s*([-*_])(\s*\1){2,}\s*$/.test(a)){i(),t.push({kind:`rule`});continue}let c=a.match(/^\s*([-*+]|\d+[.)])\s+(.*)$/);if(c){i();let r=/\d/.test(c[1]),a=[J4(c[2])];for(;e+1<n.length;){let t=n[e+1].match(/^\s*([-*+]|\d+[.)])\s+(.*)$/);if(!t||/\d/.test(t[1])!==r)break;a.push(J4(t[2])),e++}t.push({kind:`list`,ordered:r,items:a});continue}let l=a.match(/^\s*>\s?(.*)$/);if(l){i();let r=[l[1]];for(;e+1<n.length&&/^\s*>/.test(n[e+1]);)r.push(n[++e].replace(/^\s*>\s?/,``));t.push({kind:`quote`,parts:J4(r.join(` `))});continue}a.trim()?r.push(a.trim()):i()}return i(),t}function Q4(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function $4(e,t){if(e&1&&(R(0,`strong`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function e3(e,t){if(e&1&&(R(0,`em`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function t3(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,e.text,` `)}}function n3(e,t){if(e&1&&A(0,Q4,2,1,`code`)(1,$4,2,1,`strong`)(2,e3,2,1,`em`)(3,t3,1,1),e&2){let e=t.$implicit;j(e.code?0:e.strong?1:e.em?2:3)}}var r3=(e,t)=>t[0];function i3(e,t){if(e&1&&(F(0,`p`,5),K(1),I()),e&2){let e=W();D(),J(`Reading `,e.file(),`…`)}}function a3(e,t){if(e&1&&(F(0,`p`,6),K(1),I()),e&2){let e=W();D(),q(e.error)}}function o3(e,t){if(e&1&&(F(0,`li`),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function s3(e,t){if(e&1&&(F(0,`div`,7)(1,`p`)(2,`strong`),K(3,`Does not match the content schema`),I()(),F(4,`ul`,12),M(5,o3,2,1,`li`,null,eg),I()()),e&2){let e=W();D(5),N(e.schemaErrors)}}function c3(e,t){if(e&1&&(F(0,`p`,8),K(1),I()),e&2){let e=W(2);D(),J(`Matches `,e.schema(),`.`)}}function l3(e,t){if(e&1&&(F(0,`dt`,13),K(1),I(),F(2,`dd`,13),K(3),I()),e&2){let e=t.$implicit;D(),q(e[0]),D(2),q(e[1])}}function u3(e,t){if(e&1&&(F(0,`dl`,9),M(1,l3,4,2,null,null,r3),I()),e&2){let e=W(2);D(),N(e.frontmatter())}}function d3(e,t){if(e&1&&(F(0,`p`,14),L(1,`app-md-inline`,16),I()),e&2){let e=W().$implicit;k(`data-level`,e.level),D(),P(`parts`,e.parts)}}function f3(e,t){if(e&1&&(F(0,`p`),L(1,`app-md-inline`,16),I()),e&2){let e=W().$implicit;D(),P(`parts`,e.parts)}}function p3(e,t){if(e&1&&(F(0,`blockquote`),L(1,`app-md-inline`,16),I()),e&2){let e=W().$implicit;D(),P(`parts`,e.parts)}}function m3(e,t){if(e&1&&(F(0,`li`),L(1,`app-md-inline`,16),I()),e&2){let e=t.$implicit;D(),P(`parts`,e)}}function h3(e,t){if(e&1&&(F(0,`ol`),M(1,m3,2,1,`li`,null,$h),I()),e&2){let e=W(2).$implicit;D(),N(e.items)}}function g3(e,t){if(e&1&&(F(0,`li`),L(1,`app-md-inline`,16),I()),e&2){let e=t.$implicit;D(),P(`parts`,e)}}function _3(e,t){if(e&1&&(F(0,`ul`),M(1,g3,2,1,`li`,null,$h),I()),e&2){let e=W(2).$implicit;D(),N(e.items)}}function v3(e,t){if(e&1&&A(0,h3,3,0,`ol`)(1,_3,3,0,`ul`),e&2){let e=W().$implicit;j(+!e.ordered)}}function y3(e,t){if(e&1&&(F(0,`pre`,15),K(1),I()),e&2){let e=W().$implicit;D(),q(e.text)}}function b3(e,t){e&1&&L(0,`hr`)}function x3(e,t){if(e&1&&A(0,d3,2,2,`p`,14)(1,f3,2,1,`p`)(2,p3,2,1,`blockquote`)(3,v3,2,1)(4,y3,2,1,`pre`,15)(5,b3,1,0,`hr`),e&2){let e,n=t.$implicit;j((e=n.kind)===`heading`?0:e===`paragraph`?1:e===`quote`?2:e===`list`?3:e===`code`?4:e===`rule`?5:-1)}}function S3(e,t){e&1&&(F(0,`p`,11),K(1,`The file has no markdown after its frontmatter.`),I())}function C3(e,t){e&1&&(F(0,`p`,8),K(1,`The preview stops after 20,000 characters.`),I())}function w3(e,t){if(e&1&&(A(0,a3,2,1,`p`,6),A(1,s3,7,0,`div`,7)(2,c3,2,1,`p`,8),A(3,u3,3,0,`dl`,9),F(4,`div`,10),M(5,x3,6,1,null,null,$h,!1,S3,2,0,`p`,11),A(8,C3,2,0,`p`,8),I()),e&2){let e=t,n=W();j(e.error?0:-1),D(),j(e.schemaErrors?.length?1:n.schema()&&!e.error?2:-1),D(2),j(n.frontmatter().length?3:-1),D(),k(`aria-label`,`Rendered markdown of `+n.file()),D(),N(n.blocks()),D(3),j(e.truncated?8:-1)}}function T3(e,t){if(e&1&&(F(0,`p`,6),K(1),I()),e&2){let e=W();D(),J(`Could not read `,e.file(),`.`)}}var E3=class e{parts=$([]);static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-md-inline`]],inputs:{parts:[1,`parts`]},decls:2,vars:0,template:function(e,t){e&1&&M(0,n3,4,1,null,null,$h),e&2&&N(t.parts())},styles:[`code[_ngcontent-%COMP%] {
-  padding: 1px 5px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 4px;
-  font-family: var(--%NS%mono);
-  font-size: 12px;
-}`]})},D3=class e{rpc=$(null);file=$.required();schema=$(void 0);closed=cv();data=T(null);loading=T(!0);blocks=X(()=>Z4(this.data()?.body??``));frontmatter=X(()=>Object.entries(this.data()?.values??{}).map(([e,t])=>[e,typeof t==`string`?t:JSON.stringify(t)]));run=0;constructor(){E(()=>{let e=this.file(),t=this.rpc();Z(()=>void this.fetch(t,e))})}async fetch(e,t){let n=++this.run;this.loading.set(!0);let r=await sT(e,`analog-content-preview`,t);n===this.run&&(this.data.set(r),this.loading.set(!1))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-content-preview`]],inputs:{rpc:[1,`rpc`],file:[1,`file`],schema:[1,`schema`]},outputs:{closed:`closed`},decls:11,vars:2,consts:[[`aria-labelledby`,`content-preview-heading`,1,`card`],[1,`row`,`head`],[`id`,`content-preview-heading`],[1,`file`,`grow`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[`data-tone`,`bad`,`role`,`status`,1,`note`],[1,`muted`,`small`],[1,`facts`],[`role`,`region`,`tabindex`,`0`,1,`md`],[1,`muted`],[1,`plain`],[1,`mono`],[1,`md-heading`],[1,`code`],[3,`parts`]],template:function(e,t){if(e&1&&(F(0,`section`,0)(1,`div`,1)(2,`h2`,2),K(3,`Preview`),I(),F(4,`span`,3),K(5),I(),F(6,`button`,4),H(`click`,function(){return t.closed.emit()}),K(7,`Close preview`),I()(),A(8,i3,2,1,`p`,5)(9,w3,9,6)(10,T3,2,1,`p`,6),I()),e&2){let e;D(5),q(t.file()),D(3),j(t.loading()?8:(e=t.data())?9:10,e)}},dependencies:[E3],styles:[`h2[_ngcontent-%COMP%], 
-h3[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.tnum[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.55;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.grow[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.field[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.field.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-}
-
-.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.field[_ngcontent-%COMP%]:focus, 
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea.field[_ngcontent-%COMP%] {
-  height: auto;
-  padding: 8px 12px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.btn.primary[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-.btn.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.btn.danger[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible, 
-.table-wrap[_ngcontent-%COMP%]:focus-visible, 
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 480px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.path[_ngcontent-%COMP%], 
-.file[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.pill[_ngcontent-%COMP%], 
-.chip[_ngcontent-%COMP%], 
-.status[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin: 0 4px 4px 0;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-[data-tone=good].pill[_ngcontent-%COMP%], 
-[data-status=good].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-[data-tone=warn].pill[_ngcontent-%COMP%], 
-[data-tone=warn].chip[_ngcontent-%COMP%], 
-[data-status=warn].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-[data-tone=bad].pill[_ngcontent-%COMP%], 
-[data-tone=bad].chip[_ngcontent-%COMP%], 
-[data-status=bad].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.code[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 260px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.note[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.note[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 16px;
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  padding-top: 2px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-summary[_ngcontent-%COMP%] {
-  cursor: pointer;
-  color: var(--%NS%text-2);
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-@media (max-width: 560px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: 1fr;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .card[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-[_nghost-%COMP%] {
-  display: block;
-}
-
-.head[_ngcontent-%COMP%] {
-  justify-content: space-between;
-}
-
-.plain[_ngcontent-%COMP%] {
-  margin: 4px 0 0;
-  padding-left: 18px;
-}
-
-.md[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 10px;
-  max-height: 420px;
-  overflow: auto;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  line-height: 1.6;
-}
-
-.md[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.md[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], 
-.md[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {
-  margin: 0;
-  padding-left: 22px;
-}
-
-.md-heading[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 650;
-}
-
-.md-heading[data-level="1"][_ngcontent-%COMP%] {
-  font-size: 20px;
-}
-
-.md-heading[data-level="2"][_ngcontent-%COMP%] {
-  font-size: 17px;
-}
-
-.md-heading[data-level="3"][_ngcontent-%COMP%] {
-  font-size: 15px;
-}
-
-blockquote[_ngcontent-%COMP%] {
-  margin: 0;
-  padding-left: 12px;
-  border-left: 3px solid var(--%NS%border-strong);
-  color: var(--%NS%text-2);
-}
-
-hr[_ngcontent-%COMP%] {
-  width: 100%;
-  border: none;
-  border-top: 1px solid var(--%NS%border);
-}`]})},O3=(e,t)=>t.id,k3=(e,t)=>t.key,A3=(e,t)=>t.from+t.name,j3=(e,t)=>t.path,M3=(e,t)=>t.name,N3=(e,t)=>t.file;function P3(e,t){e&1&&(R(0,`p`,2),K(1,`Reading the runtime config…`),z())}function F3(e,t){if(e&1){let e=B();R(0,`div`,3)(1,`p`),K(2,`Could not read the runtime config.`),z(),R(3,`button`,4),U(`click`,function(){return S(e),C(W().reload())}),K(4,`Retry`),z()()}}function I3(e,t){e&1&&(R(0,`span`,11),K(1,`masked`),z())}function L3(e,t){e&1&&(R(0,`span`,11),K(1,`code`),z())}function R3(e,t){if(e&1&&(R(0,`tr`)(1,`td`,10),K(2),z(),R(3,`td`,10),K(4),A(5,I3,2,0,`span`,11),A(6,L3,2,0,`span`,11),z(),R(7,`td`,12),K(8),z()()),e&2){let e=t.$implicit;D(2),q(e.key),D(2),J(` `,e.value,` `),D(),j(e.masked?5:-1),D(),j(e.expression?6:-1),D(2),q(e.from)}}function z3(e,t){if(e&1&&(R(0,`div`,8)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,9),K(5,`Key`),z(),R(6,`th`,9),K(7,`Value`),z(),R(8,`th`,9),K(9,`From`),z()()(),R(10,`tbody`),M(11,R3,9,5,`tr`,null,k3),z()()()),e&2){let e=W().$implicit;k(`aria-label`,e.title+` values`),D(11),N(e.values)}}function B3(e,t){if(e&1&&(R(0,`p`,1),K(1),z()),e&2){let e=W().$implicit;D(),q(e.empty)}}function V3(e,t){if(e&1&&(R(0,`section`,5)(1,`h2`,7),K(2),z(),A(3,z3,13,1,`div`,8)(4,B3,2,1,`p`,1),z()),e&2){let e=t.$implicit;k(`aria-labelledby`,`runtime-`+e.id),D(),V(`id`,`runtime-`+e.id),D(),q(e.title),D(),j(e.values.length?3:4)}}function H3(e,t){if(e&1&&(R(0,`span`,15),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function U3(e,t){e&1&&(R(0,`span`,12),K(1,`none under src/server/plugins`),z())}function W3(e,t){if(e&1&&(R(0,`span`,15),K(1),z()),e&2){let e=t.$implicit;D(),D_(``,e.name,`: `,e.driver??`computed`,``,e.from===`devStorage`?` (dev)`:``)}}function G3(e,t){e&1&&(R(0,`span`,12),K(1,`no mounts in nitro.storage or nitro.devStorage`),z())}function K3(e,t){if(e&1&&(R(0,`span`,15),K(1),z()),e&2){let e=t.$implicit;D(),Y(``,e.path,` · `,e.rule)}}function q3(e,t){e&1&&(R(0,`span`,12),K(1,`no isr, swr or cache rule`),z())}function J3(e,t){if(e&1){let e=B();R(0,`div`,29)(1,`p`,7),K(2),z(),R(3,`label`,31),K(4,`Payload (JSON, optional)`),z(),R(5,`textarea`,32),U(`input`,function(t){return S(e),C(W(5).taskPayload.set(t.target.value))}),z(),R(6,`div`,26)(7,`button`,33),U(`click`,function(){S(e);let t=W().$implicit;return C(W(4).runTask(t.name))}),K(8,` Run task `),z(),R(9,`button`,4),U(`click`,function(){return S(e),C(W(5).taskConfirm.set(null))}),K(10,` Cancel `),z()()()}if(e&2){let e=W(),t=e.$implicit,n=e.$index,r=W(4);k(`aria-labelledby`,`task-confirm-`+n),D(),V(`id`,`task-confirm-`+n),D(),J(` Run `,t.name,` on the dev server? A task can change data. `),D(),V(`htmlFor`,`task-payload-`+n),D(2),V(`id`,`task-payload-`+n)(`value`,r.taskPayload()),D(2),V(`disabled`,r.runningTask()!==null)}}function Y3(e,t){if(e&1&&(R(0,`span`,34),K(1),z()),e&2){let e=W();k(`data-status`,e.ok?`good`:`bad`),D(),q(e.status)}}function X3(e,t){if(e&1&&(R(0,`span`,35),K(1),z()),e&2){let e=W();D(),J(` `,e.ms,` ms`)}}function Z3(e,t){if(e&1&&(R(0,`span`),K(1),z()),e&2){let e=W();D(),J(` `,e.error)}}function Q3(e,t){if(e&1&&(R(0,`pre`,36),K(1),z()),e&2){let e=W();D(),q(e.output)}}function $3(e,t){if(e&1&&(R(0,`div`,30)(1,`p`),A(2,Y3,2,2,`span`,34),A(3,X3,2,1,`span`,35),A(4,Z3,2,1,`span`),z(),A(5,Q3,2,1,`pre`,36),z()),e&2){let e=t;D(2),j(e.status===void 0?-1:2),D(),j(e.ms===void 0?-1:3),D(),j(e.error?4:-1),D(),j(e.output?5:-1)}}function e6(e,t){if(e&1){let e=B();R(0,`li`)(1,`div`,26)(2,`span`,10),K(3),z(),R(4,`span`,27),K(5),z(),R(6,`button`,28),U(`click`,function(){let t=S(e).$implicit;return C(W(4).askTask(t.name))}),K(7),z()(),A(8,J3,11,7,`div`,29),A(9,$3,6,4,`div`,30),z()}if(e&2){let e,n=t.$implicit,r=W(4);D(3),q(n.name),D(2),q(n.file),D(),V(`disabled`,!r.canPurge()||r.runningTask()!==null),k(`aria-describedby`,r.canPurge()?null:`nitro-purge-off`)(`aria-label`,`Run the task `+n.name),D(),J(` `,r.runningTask()===n.name?`Running…`:`Run`,` `),D(),j(r.taskConfirm()===n.name?8:-1),D(),j((e=r.taskResults()[n.name])?9:-1,e)}}function t6(e,t){if(e&1&&(R(0,`ul`,17),M(1,e6,10,8,`li`,null,M3),z()),e&2){let e=W();D(),N(e.tasks)}}function n6(e,t){e&1&&(R(0,`p`,12),K(1,`No tasks under src/server/tasks.`),z())}function r6(e,t){if(e&1){let e=B();R(0,`button`,37),U(`click`,function(){return S(e),C(W(3).ask(null))}),K(1,` Purge all `),z()}if(e&2){let e=W(3);V(`disabled`,!e.canPurge()||e.purging()),k(`aria-describedby`,e.canPurge()?null:`nitro-purge-off`)}}function i6(e,t){if(e&1&&(R(0,`p`,21),K(1),z()),e&2){let e=W(3);D(),q(e.purgeOff)}}function a6(e,t){if(e&1){let e=B();R(0,`div`,22)(1,`p`,38),K(2),z(),R(3,`div`,26)(4,`button`,39),U(`click`,function(){let t=S(e);return C(W(3).purge(t))}),K(5,` Delete `),z(),R(6,`button`,4),U(`click`,function(){return S(e),C(W(3).confirming.set(null))}),K(7,` Cancel `),z()()()}if(e&2){let e=t;D(2),J(` Delete `,e.length===1?`this cache entry`:e.length+` cache entries`,`? The next request renders those routes again. `)}}function o6(e,t){if(e&1){let e=B();R(0,`tr`)(1,`td`,42),K(2),z(),R(3,`td`),K(4),z(),R(5,`td`,43),K(6),z(),R(7,`td`,43)(8,`button`,28),U(`click`,function(){let t=S(e).$implicit;return C(W(4).ask([t.file]))}),K(9,` Purge `),z()()()}if(e&2){let e=t.$implicit,n=W(4);D(),V(`title`,e.file),D(),q(e.key),D(2),q(e.group),D(2),q(n.size(e.size)),D(2),V(`disabled`,!n.canPurge()||n.purging()),k(`aria-label`,`Purge `+e.key)}}function s6(e,t){if(e&1&&(R(0,`div`,24)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,9),K(5,`Key`),z(),R(6,`th`,9),K(7,`Group`),z(),R(8,`th`,40),K(9,`Size`),z(),R(10,`th`,9)(11,`span`,41),K(12,`Actions`),z()()()(),R(13,`tbody`),M(14,o6,10,6,`tr`,null,N3),z()()()),e&2){let e=W();D(14),N(e.entries)}}function c6(e,t){e&1&&K(0),e&2&&J(` The cache folders (`,W(2).cacheDirs.join(`, `),`) hold no entries yet. `)}function l6(e,t){e&1&&K(0,` No Nitro cache folder in the project. `)}function u6(e,t){if(e&1&&(R(0,`p`,1),A(1,c6,1,1)(2,l6,1,0),z()),e&2){let e=W();D(),j(e.cacheDirs.length?1:2)}}function d6(e,t){if(e&1&&(R(0,`p`,25),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function f6(e,t){if(e&1&&(R(0,`section`,6)(1,`h2`,13),K(2,`Nitro`),z(),R(3,`dl`,14)(4,`dt`),K(5,`Plugins`),z(),R(6,`dd`),M(7,H3,2,1,`span`,15,eg,!1,U3,2,0,`span`,12),z(),R(10,`dt`),K(11,`Storage`),z(),R(12,`dd`),M(13,W3,2,3,`span`,15,A3,!1,G3,2,0,`span`,12),z(),R(16,`dt`),K(17,`Cached routes`),z(),R(18,`dd`),M(19,K3,2,2,`span`,15,j3,!1,q3,2,0,`span`,12),z()(),R(22,`h3`,16),K(23),z(),A(24,t6,3,0,`ul`,17)(25,n6,2,0,`p`,12),R(26,`div`,18)(27,`h3`,19),K(28),z(),A(29,r6,2,2,`button`,20),z(),A(30,i6,2,1,`p`,21),A(31,a6,8,1,`div`,22),R(32,`p`,23),K(33),z(),A(34,s6,16,0,`div`,24)(35,u6,3,1,`p`,1),M(36,d6,2,1,`p`,25,eg),z()),e&2){let e,n=t,r=W(2);D(7),N(n.plugins),D(6),N(n.storage),D(6),N(n.cachedRules),D(4),J(`Tasks (`,n.tasks.length,`)`),D(),j(n.tasks.length?24:25),D(4),J(`Cache entries on disk (`,n.entries.length,`)`),D(),j(n.entries.length?29:-1),D(),j(r.canPurge()?-1:30),D(),j((e=r.confirming())?31:-1,e),D(2),q(r.message()),D(),j(n.entries.length?34:35),D(2),N(n.notes)}}function p6(e,t){if(e&1&&(M(0,V3,5,4,`section`,5,O3),A(2,f6,38,11,`section`,6)),e&2){let e,t=W();N(t.sections()),D(2),j((e=t.nitro())?2:-1,e)}}var m6=class e{rpc=$(null);config=T(null);injector=x(bs);nitro=T(null);loading=T(!0);failed=T(!1);purging=T(!1);message=T(``);confirming=T(null);taskConfirm=T(null);taskPayload=T(``);runningTask=T(null);taskResults=T({});canPurge=X(()=>OT(this.rpc(),`analog`));purgeOff=Mw(`analog`);size=p4;sections=X(()=>{let e=this.config();return e?[{id:`env`,title:`import.meta.env`,values:e.env,empty:`No VITE_ or ANALOG_ keys in the .env files.`},{id:`runtime-config`,title:`Nitro runtimeConfig`,values:e.runtimeConfig,empty:`No nitro.runtimeConfig in ${e.configFile??`vite.config`}.`},{id:`options`,title:`analog() options`,values:e.options,empty:``}]:[]});constructor(){E(()=>{let e=this.rpc();Z(()=>void this.fetch(e))})}reload(){this.fetch(this.rpc())}async fetch(e){this.loading.set(!0);let[t,n]=await Promise.all([sT(e,`analog-runtime-config`),sT(e,`analog-nitro`)]);this.config.set(t),this.nitro.set(n),this.failed.set(!t),this.loading.set(!1)}askTask(e){this.taskConfirm.set(e),this.taskPayload.set(``),this.focusAfterRender(`task-run-confirm`)}async runTask(e){if(this.runningTask()!==null)return;let t;if(this.taskPayload().trim())try{t=JSON.parse(this.taskPayload())}catch{this.taskResults.update(t=>({...t,[e]:{ok:!1,name:e,error:`The payload is not valid JSON.`}}));return}this.runningTask.set(e);try{let n=await sT(this.rpc(),`analog-run-nitro-task`,{name:e,payload:t,confirm:!0});this.taskResults.update(t=>({...t,[e]:n??{ok:!1,name:e,error:`No answer from the devtools server.`}})),n?.ok&&this.taskConfirm()===e&&this.taskConfirm.set(null)}finally{this.runningTask.set(null)}}focusAfterRender(e){cd(()=>document.getElementById(e)?.focus(),{injector:this.injector})}ask(e){let t=this.nitro()?.entries.map(e=>e.file)??[];this.confirming.set(e??t),this.message.set(``),this.focusAfterRender(`nitro-confirm`)}async purge(e){this.purging.set(!0),this.confirming.set(null);try{let t=e.length===(this.nitro()?.entries.length??-1),n=await sT(this.rpc(),`analog-nitro-purge`,{files:t?void 0:e,confirm:!0});n?.ok?this.message.set(`Deleted ${n.removed} cache entr${n.removed===1?`y`:`ies`}.`):this.message.set(n?.error??`Could not purge the cache.`),this.nitro.set(await sT(this.rpc(),`analog-nitro`))}finally{this.purging.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-runtime`]],inputs:{rpc:[1,`rpc`]},decls:9,vars:1,consts:[[1,`stack`],[1,`muted`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[1,`card`],[`aria-labelledby`,`runtime-nitro`,1,`card`],[3,`id`],[`role`,`region`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[1,`mono`,`path`],[1,`pill`],[1,`muted`,`small`],[`id`,`runtime-nitro`],[1,`facts`],[1,`chip`,`mono`],[`id`,`nitro-tasks-heading`],[`aria-labelledby`,`nitro-tasks-heading`,1,`tasks`],[1,`row`,`head`],[`id`,`nitro-cache-heading`],[`type`,`button`,1,`btn`,`ghost`,`danger`,3,`disabled`],[`id`,`nitro-purge-off`,1,`muted`,`small`],[`role`,`alertdialog`,`aria-labelledby`,`nitro-confirm-text`,1,`note`,`confirm`],[`role`,`status`,1,`muted`,`small`],[`role`,`region`,`aria-labelledby`,`nitro-cache-heading`,`tabindex`,`0`,1,`table-wrap`],[1,`note`],[1,`row`],[1,`muted`,`small`,`file`,`grow`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`alertdialog`,1,`note`,`confirm`],[`role`,`status`,1,`task-result`],[1,`label`,3,`for`],[`rows`,`2`,`placeholder`,`{"dryRun": true}`,1,`field`,`mono`,3,`input`,`id`,`value`],[`type`,`button`,`id`,`task-run-confirm`,1,`btn`,`primary`,3,`click`,`disabled`],[1,`status`],[1,`muted`,`small`,`tnum`],[1,`code`],[`type`,`button`,1,`btn`,`ghost`,`danger`,3,`click`,`disabled`],[`id`,`nitro-confirm-text`],[`type`,`button`,`id`,`nitro-confirm`,1,`btn`,`danger`,3,`click`],[`scope`,`col`,1,`num`],[1,`sr-only`],[1,`mono`,`path`,3,`title`],[1,`num`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`p`,1),K(2,` What the app reads at runtime and what Nitro keeps between requests. Secret names, tokens and the names in `),R(3,`code`),K(4,`redaction.secretNames`),z(),K(5,` are masked. `),z(),A(6,P3,2,0,`p`,2)(7,F3,5,0,`div`,3)(8,p6,3,1),z()),e&2&&(D(6),j(t.loading()&&!t.config()?6:t.failed()?7:8))},styles:[`h2[_ngcontent-%COMP%], 
-h3[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.tnum[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.55;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.grow[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.field[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.field.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-}
-
-.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.field[_ngcontent-%COMP%]:focus, 
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea.field[_ngcontent-%COMP%] {
-  height: auto;
-  padding: 8px 12px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.btn.primary[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-.btn.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.btn.danger[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible, 
-.table-wrap[_ngcontent-%COMP%]:focus-visible, 
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 480px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.path[_ngcontent-%COMP%], 
-.file[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.pill[_ngcontent-%COMP%], 
-.chip[_ngcontent-%COMP%], 
-.status[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin: 0 4px 4px 0;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-[data-tone=good].pill[_ngcontent-%COMP%], 
-[data-status=good].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-[data-tone=warn].pill[_ngcontent-%COMP%], 
-[data-tone=warn].chip[_ngcontent-%COMP%], 
-[data-status=warn].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-[data-tone=bad].pill[_ngcontent-%COMP%], 
-[data-tone=bad].chip[_ngcontent-%COMP%], 
-[data-status=bad].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.code[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 260px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.note[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.note[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 16px;
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  padding-top: 2px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-summary[_ngcontent-%COMP%] {
-  cursor: pointer;
-  color: var(--%NS%text-2);
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-@media (max-width: 560px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: 1fr;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .card[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-[_nghost-%COMP%] {
-  display: block;
-}
-
-.stack[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 16px;
-}
-
-.head[_ngcontent-%COMP%] {
-  justify-content: space-between;
-}
-
-.confirm[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.tasks[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.task-result[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin-top: 6px;
-}
-
-code[_ngcontent-%COMP%] {
-  padding: 1px 6px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 4px;
-  font-family: var(--%NS%mono);
-  font-size: 12px;
-}`]})},h6=(e,t)=>t.id;function g6(e,t){if(e&1&&(R(0,`p`,9),K(1),z()),e&2){let e=W();D(),J(`Transforming `,e.file(),`…`)}}function _6(e,t){if(e&1&&(R(0,`p`,10),K(1),z()),e&2){let e=W();D(),q(e.error)}}function v6(e,t){if(e&1&&(R(0,`p`,11)(1,`a`,13),K(2,`Open in vite-plugin-inspect`),z()()),e&2){let e=W();D(),V(`href`,e.inspectUrl,Du)}}function y6(e,t){e&1&&(R(0,`p`,8),K(1,`Clipped to the first 20,000 characters.`),z())}function b6(e,t){if(e&1&&(R(0,`li`)(1,`details`)(2,`summary`)(3,`span`,15),K(4),z(),R(5,`span`,16),K(6),z()(),R(7,`pre`,17),K(8),z(),A(9,y6,2,0,`p`,8),z()()),e&2){let e=t.$implicit;D(4),q(e.plugin),D(2),Y(``,e.ms,` ms · `,e.size,` chars`),D(2),q(e.code),D(),j(e.truncated?9:-1)}}function x6(e,t){if(e&1&&(R(0,`p`,8),K(1),z()),e&2){let e=W(3);D(),J(``,e.unchanged(),` more plugins ran without changing it.`)}}function S6(e,t){if(e&1&&(R(0,`ol`,14),M(1,b6,10,5,`li`,null,$h),z(),A(3,x6,2,1,`p`,8)),e&2){let e=W(2);D(),N(e.changed()),D(2),j(e.unchanged()?3:-1)}}function C6(e,t){e&1&&(R(0,`p`,12),K(1,`No plugin changed this file.`),z())}function w6(e,t){if(e&1&&(R(0,`li`)(1,`span`,15),K(2),z(),R(3,`span`,19),K(4),z(),R(5,`span`,20),K(6),z()()),e&2){let e=t.$implicit;D(2),q(e.name),D(2),q(e.id),D(),k(`data-tone`,e.found?`good`:`warn`),D(),q(e.found?`in the output`:`not in the output`)}}function T6(e,t){if(e&1&&(R(0,`div`)(1,`h3`),K(2,`Server function ids`),z(),R(3,`ul`,18),M(4,w6,7,4,`li`,null,h6),z()()),e&2){let e=W(2);D(4),N(e.ids())}}function E6(e,t){if(e&1&&(R(0,`details`)(1,`summary`),K(2,`Code Vite serves`),z(),R(3,`pre`,17),K(4),z()()),e&2){let e=W();D(4),q(e.code)}}function D6(e,t){if(e&1&&(A(0,_6,2,1,`p`,10),A(1,v6,3,1,`p`,11),A(2,S6,4,1)(3,C6,2,0,`p`,12),A(4,T6,6,0,`div`),A(5,E6,5,1,`details`)),e&2){let e=t,n=W();j(e.error?0:-1),D(),j(e.inspectUrl?1:-1),D(),j(n.changed().length?2:e.error?-1:3),D(2),j(n.ids().length?4:-1),D(),j(e.code?5:-1)}}var O6=class e{rpc=$(null);file=$.required();serverFns=$([]);closed=cv();ssr=T(!1);trace=T(null);loading=T(!0);changed=X(()=>(this.trace()?.steps??[]).filter(e=>e.changed));unchanged=X(()=>(this.trace()?.steps.length??0)-this.changed().length);ids=X(()=>{let e=this.trace();return e?this.serverFns().filter(t=>t.file===e.file).map(t=>({...t,found:e.code.includes(t.id)})):[]});run=0;constructor(){E(()=>{let e=this.file(),t=this.ssr();Z(()=>void this.fetch(e,t))})}reload(){this.fetch(this.file(),this.ssr())}async fetch(e,t){let n=++this.run;this.loading.set(!0);let r=await sT(this.rpc(),`analog-transform`,{file:e,ssr:t});n===this.run&&(this.trace.set(r??{file:e,ssr:t,steps:[],code:``,error:`No answer from the devtools server.`}),this.loading.set(!1))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-transform`]],inputs:{rpc:[1,`rpc`],file:[1,`file`],serverFns:[1,`serverFns`]},outputs:{closed:`closed`},decls:17,vars:4,consts:[[`aria-labelledby`,`transform-heading`,1,`card`],[1,`row`,`head`],[`id`,`transform-heading`],[1,`file`,`grow`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[1,`muted`,`small`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[1,`small`],[1,`muted`],[`target`,`_blank`,`rel`,`noopener`,3,`href`],[1,`steps`],[1,`mono`],[1,`muted`,`small`,`tnum`],[1,`code`],[1,`plain`],[1,`mono`,`muted`],[1,`pill`]],template:function(e,t){if(e&1&&(R(0,`section`,0)(1,`div`,1)(2,`h2`,2),K(3,`Vite transform stack`),z(),R(4,`span`,3),K(5),z(),R(6,`label`,4)(7,`input`,5),U(`change`,function(){return t.ssr.set(!t.ssr())}),z(),K(8,` Server build (SSR)`),z(),R(9,`button`,6),U(`click`,function(){return t.reload()}),K(10,` Run again `),z(),R(11,`button`,7),U(`click`,function(){return t.closed.emit()}),K(12,`Close`),z()(),R(13,`p`,8),K(14,` Transforms the file again on the dev server and lists each plugin that changed it, in order. `),z(),A(15,g6,2,1,`p`,9)(16,D6,6,5),z()),e&2){let e;D(5),q(t.file()),D(2),V(`checked`,t.ssr()),D(2),V(`disabled`,t.loading()),D(6),j(t.loading()?15:(e=t.trace())?16:-1,e)}},styles:[`h2[_ngcontent-%COMP%], 
-h3[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-transform: none;
-  letter-spacing: 0;
-  font-size: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.tnum[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.55;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.grow[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.field[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.field.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-}
-
-.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.field[_ngcontent-%COMP%]:focus, 
-.field[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea.field[_ngcontent-%COMP%] {
-  height: auto;
-  padding: 8px 12px;
-}
-
-.btn[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: var(--%NS%control-h, 34px);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.btn.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.btn.primary[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-.btn.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.btn.danger[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn[_ngcontent-%COMP%]:focus-visible, 
-.table-wrap[_ngcontent-%COMP%]:focus-visible, 
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 480px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-.path[_ngcontent-%COMP%], 
-.file[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.pill[_ngcontent-%COMP%], 
-.chip[_ngcontent-%COMP%], 
-.status[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin: 0 4px 4px 0;
-  color: var(--%NS%text);
-  font-size: 12px;
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-[data-tone=good].pill[_ngcontent-%COMP%], 
-[data-status=good].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-[data-tone=warn].pill[_ngcontent-%COMP%], 
-[data-tone=warn].chip[_ngcontent-%COMP%], 
-[data-status=warn].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-[data-tone=bad].pill[_ngcontent-%COMP%], 
-[data-tone=bad].chip[_ngcontent-%COMP%], 
-[data-status=bad].status[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.code[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 260px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.note[_ngcontent-%COMP%] {
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.note[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 8px 16px;
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  padding-top: 2px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-summary[_ngcontent-%COMP%] {
-  cursor: pointer;
-  color: var(--%NS%text-2);
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-@media (max-width: 560px) {
-  .facts[_ngcontent-%COMP%] {
-    grid-template-columns: 1fr;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .card[_ngcontent-%COMP%] {
-    animation: none;
-  }
-}
-[_nghost-%COMP%] {
-  display: block;
-}
-
-.steps[_ngcontent-%COMP%], 
-.plain[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding-left: 22px;
-}
-
-.plain[_ngcontent-%COMP%] {
-  padding: 0;
-  list-style: none;
-}
-
-.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-summary[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-details[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {
-  margin-top: 6px;
-}
-
-a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent-text, var(--%NS%accent));
-}
-
-a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},k6=()=>[],A6=()=>[`/`],j6=(e,t)=>t.id,M6=(e,t)=>t.route.id,N6=(e,t)=>t[0],P6=(e,t)=>t.file+t.method,F6=(e,t)=>t.path,I6=(e,t)=>t.mode,L6=(e,t)=>t.file,R6=(e,t)=>t.file+t.line,z6=(e,t)=>t.rule;function B6(e,t){if(e&1){let e=B();F(0,`div`,0)(1,`h2`,3),K(2,`Could not read the project.`),I(),F(3,`p`,4),K(4,` Check that the dev server with Pangular Inspector is still running, then retry. `),I(),F(5,`button`,5),H(`click`,function(){return S(e),C(W().retry())}),K(6,`Retry`),I()()}}function V6(e,t){e&1&&(F(0,`div`,1),L(1,`span`,6),F(2,`span`),K(3,`Reading the project…`),I()())}function H6(e,t){e&1&&(F(0,`div`,2)(1,`h2`,3),K(2,`This app is not an Analog app.`),I(),F(3,`p`,4),K(4,` Add `),F(5,`code`),K(6,`pangular()`),I(),K(7,` from `),F(8,`code`),K(9,`@pangular-inspector/devtools/vite`),I(),K(10,` next to `),F(11,`code`),K(12,`analog()`),I(),K(13,` in vite.config.ts and run the Analog dev server. `),I()())}function U6(e,t){if(e&1&&(F(0,`div`,11)(1,`span`,9),K(2,`Open in the browser`),I(),F(3,`span`,17),K(4),I()()),e&2){let e=t;D(3),P(`title`,e.url),D(),q(e.url)}}function W6(e,t){if(e&1&&(F(0,`span`,19),K(1),I()),e&2){let e=W().$implicit;k(`data-tone`,e.tone),D(),q(e.count)}}function G6(e,t){if(e&1){let e=B();F(0,`button`,18),H(`click`,function(){let t=S(e).$implicit;return C(W(2).view.set(t.id))}),K(1),A(2,W6,2,2,`span`,19),I()}if(e&2){let e=t.$implicit,n=W(2);P(`id`,`analog-tab-`+e.id),k(`aria-selected`,e.id===n.view())(`aria-controls`,`analog-panel-`+e.id)(`tabindex`,e.id===n.view()?0:-1),D(),J(` `,e.label,` `),D(),j(e.count===null?-1:2)}}function K6(e,t){e&1&&(F(0,`div`,27),K(1),I()),e&2&&(D(),q(t))}function q6(e,t){if(e&1&&(F(0,`app-source-link`,37),K(1),I()),e&2){let e=W().$implicit,t=W(5);P(`file`,e.file),D(),q(t.short(e.file))}}function J6(e,t){if(e&1&&(F(0,`span`,34),K(1),I()),e&2){let e=W().$implicit;D(),q(e.fullPath)}}function Y6(e,t){if(e&1&&(F(0,`li`),A(1,q6,2,2,`app-source-link`,37)(2,J6,2,1,`span`,34),F(3,`span`,38),K(4),I()()),e&2){let e=t.$implicit;D(),j(e.file?1:2),D(2),k(`data-kind`,e.kind),D(),q(e.kind)}}function X6(e,t){if(e&1&&(F(0,`span`,39),K(1),I()),e&2){let e=t.$implicit;D(),Y(``,e[0],` = `,e[1])}}function Z6(e,t){if(e&1&&(F(0,`div`,36),M(1,X6,2,2,`span`,39,N6),I()),e&2){let e=W(2),t=W(3);D(),N(t.paramList(e.match.params))}}function Q6(e,t){if(e&1&&(F(0,`strong`,34),K(1),I(),K(2,` renders `),F(3,`ol`,35),M(4,Y6,5,3,`li`,null,j6),I(),A(6,Z6,3,0,`div`,36)),e&2){let e=W(),t=W(3);D(),q(e.url),D(3),N(e.match.chain),D(2),j(t.paramList(e.match.params).length?6:-1)}}function $6(e,t){if(e&1&&(F(0,`app-source-link`,37),K(1),I()),e&2){let e=W().$implicit,t=W(6);P(`file`,e.file),D(),q(t.short(e.file))}}function e8(e,t){if(e&1&&(F(0,`span`,34),K(1),I()),e&2){let e=W().$implicit;D(),q(e.path)}}function t8(e,t){if(e&1&&(F(0,`li`),A(1,$6,2,2,`app-source-link`,37)(2,e8,2,1,`span`,34),F(3,`span`,4),K(4),I()()),e&2){let e=t.$implicit;D(),j(e.file?1:2),D(3),q(e.reason)}}function n8(e,t){if(e&1&&(F(0,`ul`,40),M(1,t8,5,2,`li`,null,$h),I()),e&2){let e=W(2);D(),N(e.match.rejected.slice(0,5))}}function r8(e,t){if(e&1&&(F(0,`strong`,34),K(1),I(),K(2,` matches no file route. Angular throws NG04002 "Cannot match any routes". `),A(3,n8,3,0,`ul`,40)),e&2){let e=W();D(),q(e.url),D(2),j(e.match.rejected.length?3:-1)}}function i8(e,t){if(e&1&&(F(0,`div`,28),A(1,Q6,7,2)(2,r8,4,2),I()),e&2){let e=t;k(`data-tone`,e.match.matched?`good`:`bad`),D(),j(e.match.matched?1:2)}}function a8(e,t){e&1&&(F(0,`span`,42),K(1,`└`),I())}function o8(e,t){if(e&1&&(F(0,`span`,44),K(1),I()),e&2){let e=W().$implicit,t=W(3);D(),q(t.openText(e.route))}}function s8(e,t){if(e&1&&(F(0,`app-source-link`,45)(1,`span`,51),K(2),I(),K(3),I()),e&2){let e=W().$implicit,t=W(3);P(`file`,e.route.file),D(2),q(t.dir(e.route.file)),D(),q(t.base(e.route.file))}}function c8(e,t){e&1&&(F(0,`span`,4),K(1,`folder only`),I())}function l8(e,t){if(e&1&&(F(0,`span`,47),K(1),I()),e&2){let e=t.$implicit;D(),J(``,e,`()`)}}function u8(e,t){if(e&1&&(F(0,`span`,48),K(1),I()),e&2){let e=W().$implicit;D(),J(`"`,e.route.title,`"`)}}function d8(e,t){if(e&1&&(F(0,`span`,39),K(1),I()),e&2){let e=W().$implicit;D(),q(e)}}function Ure(e,t){if(e&1&&A(0,d8,2,1,`span`,39),e&2){let e=t.$implicit;j(e===`title`?-1:0)}}function Wre(e,t){if(e&1){let e=B();F(0,`button`,52),H(`click`,function(){S(e);let t=W().$implicit;return C(W(3).showTransform(t.route.file))}),K(1,` Transform `),I()}if(e&2){let e=W().$implicit,t=W(3);k(`aria-label`,`Show the Vite transform stack of `+e.route.file)(`aria-pressed`,t.transformFile()===e.route.file)}}function Gre(e,t){if(e&1&&(F(0,`tr`)(1,`td`)(2,`div`,41),A(3,a8,2,0,`span`,42),F(4,`span`,43),K(5),I(),F(6,`span`,38),K(7),I(),A(8,o8,2,1,`span`,44),I()(),F(9,`td`),A(10,s8,4,3,`app-source-link`,45)(11,c8,2,0,`span`,4),I(),F(12,`td`)(13,`div`,46),M(14,l8,2,1,`span`,47,eg),I()(),F(16,`td`),A(17,u8,2,1,`span`,48),M(18,Ure,1,1,null,null,eg),I(),F(20,`td`,49),A(21,Wre,2,2,`button`,50),I()()),e&2){let e=t.$implicit,n=W(3);G(`open`,n.isOpen(e.route))(`dim`,e.route.kind===`group`||e.route.kind===`implicit`),D(2),t_(`padding-left`,e.depth*16,`px`),D(),j(e.depth?3:-1),D(2),q(e.route.fullPath),D(),k(`data-kind`,e.route.kind),D(),q(n.kindText(e.route)),D(),j(n.isOpen(e.route)?8:-1),D(2),j(e.route.file?10:11),D(4),N(n.serverExports(e.route)),D(3),j(e.route.title?17:-1),D(),N(e.route.routeMeta??G_(14,k6)),D(3),j(e.route.file&&e.route.kind!==`markdown`?21:-1)}}function Kre(e,t){e&1&&K(0,` No route matches the filter. Try part of a path or a file name. `)}function qre(e,t){e&1&&K(0,` No file routes yet. Add a .page.ts file under src/app/pages. `)}function Jre(e,t){if(e&1&&(F(0,`tr`)(1,`td`,53),A(2,Kre,1,0)(3,qre,1,0),I()()),e&2){let e=W(3);D(2),j(e.filter().trim()?2:3)}}function Yre(e,t){if(e&1){let e=B();F(0,`app-analog-transform`,54),H(`closed`,function(){let t=S(e);return C(W(3).closeTransform(t))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`file`,t)(`serverFns`,e.serverFns())}}function Xre(e,t){if(e&1){let e=B();F(0,`div`,20)(1,`form`,21),H(`submit`,function(t){S(e);let n=W(2);return t.preventDefault(),C(n.explain())}),F(2,`label`,22),K(3,`Test a URL`),I(),F(4,`input`,23),H(`input`,function(t){return S(e),C(W(2).testUrl.set(t.target.value))}),I(),F(5,`button`,24),K(6),I()(),F(7,`app-search-field`,25),M_(`valueChange`,function(t){S(e);let n=W(2);return j_(n.filter,t)||(n.filter=t),C(t)}),I()(),F(8,`div`,26),A(9,K6,2,1,`div`,27)(10,i8,3,2,`div`,28),I(),F(11,`div`,29)(12,`table`)(13,`thead`)(14,`tr`)(15,`th`,30),K(16,`Route`),I(),F(17,`th`,30),K(18,`File`),I(),F(19,`th`,30),K(20,`Data`),I(),F(21,`th`,30),K(22,`Route meta`),I(),F(23,`th`,30)(24,`span`,31),K(25,`Actions`),I()()()(),F(26,`tbody`),M(27,Gre,22,15,`tr`,32,M6,!1,Jre,4,1,`tr`),I()()(),A(30,Yre,1,3,`app-analog-transform`,33)}if(e&2){let e,t,n=W(2);D(4),P(`value`,n.testUrl()),D(),P(`disabled`,n.explaining()),D(),J(` `,n.explaining()?`Explaining…`:`Explain`,` `),D(),A_(`value`,n.filter),D(2),j((e=n.explainError())?9:(e=n.explained())?10:-1,e),D(18),N(n.routeRows()),D(3),j((t=n.transformFile())?30:-1,t)}}function Zre(e,t){if(e&1&&(F(0,`span`,34),K(1),I(),K(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;D(),q(e),D(),J(``,n===r-1?``:`, `,` `)}}function Qre(e,t){if(e&1&&(F(0,`div`,55)(1,`strong`),K(2,`load() ran twice`),I(),K(3,` for `),M(4,Zre,3,2,null,null,eg),K(6,` : once while server rendering, again in the browser. TransferState did not serve the server result. `),I()),e&2){let e=W(3);D(4),N(e.duplicates())}}function $re(e,t){if(e&1&&(F(0,`span`,34),K(1),I(),K(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;D(),q(e),D(),J(``,n===r-1?``:`, `,` `)}}function eie(e,t){if(e&1&&(F(0,`div`,55)(1,`strong`),K(2,`Server function read ran twice`),I(),K(3,`: `),M(4,$re,3,2,null,null,eg),K(6,` ran while server rendering, then again in the browser. The browser did not use the TransferState seed. `),I()),e&2){let e=W(3);D(4),N(e.refetchedFns())}}function tie(e,t){if(e&1){let e=B();F(0,`label`)(1,`input`,74),H(`change`,function(){let t=S(e).$implicit;return C(W(3).kind.set(t))}),I(),K(2),F(3,`span`,4),K(4),I()()}if(e&2){let e=t.$implicit,n=W(3);G(`on`,n.kind()===e),D(),P(`checked`,n.kind()===e),k(`data-kind`,e),D(),J(` `,n.kindLabel(e),` `),D(2),q(n.kindCount(e))}}function nie(e,t){if(e&1){let e=B();F(0,`label`,65)(1,`input`,75),H(`change`,function(t){return S(e),C(W(3).allTabs.set(t.target.checked))}),I(),K(2,` All tabs (including untagged) `),I()}if(e&2){let e=W(3);D(),P(`checked`,e.allTabs())}}function rie(e,t){if(e&1&&K(0),e&2){let e=W(4);Y(` Showing the newest `,e.shownCount(),` of `,e.matchingCalls().length,`. `)}}function iie(e,t){e&1&&K(0),e&2&&J(` The dev server keeps only the newest `,W(4).maxServerCalls,` calls and drops older ones. `)}function aie(e,t){if(e&1&&(F(0,`p`,68),A(1,rie,1,2),A(2,iie,1,1),I()),e&2){let e=W(3);D(),j(e.shownCount()<e.matchingCalls().length?1:-1),D(),j(e.serverFull()?2:-1)}}function oie(e,t){if(e&1&&(F(0,`app-source-link`,83),K(1),I()),e&2){let e=W(),t=W(5);P(`file`,e.file),D(),q(t.short(e.file))}}function sie(e,t){if(e&1&&(F(0,`strong`,80),K(1),I(),A(2,oie,2,2,`app-source-link`,83)),e&2){let e=t;D(),q(e.name),D(),j(e.file?2:-1)}}function cie(e,t){if(e&1&&(F(0,`span`,80),K(1),I()),e&2){let e=W().$implicit;D(),q(e.url)}}function lie(e,t){e&1&&(F(0,`span`,38),K(1,`ran during server rendering`),I())}function uie(e,t){if(e&1&&K(0),e&2){let e=W(2).$implicit;J(` to `,e.location,` `)}}function die(e,t){if(e&1&&(F(0,`span`,38),K(1),A(2,uie,1,1),I()),e&2){let e=W().$implicit,t=W(4);k(`data-tone`,t.outcomeTone(e.outcome)),D(),J(``,t.outcomeLabel(e.outcome),` `),D(),j(e.location?2:-1)}}function fie(e,t){if(e&1&&(F(0,`span`,38),K(1),I()),e&2){let e=W().$implicit;k(`data-mode`,e.render===`ssr`?`ssr`:`client`),D(),q(e.render===`ssr`?`server rendered`:`client only`)}}function pie(e,t){if(e&1&&(F(0,`details`)(1,`summary`),K(2,`Response`),I(),F(3,`pre`,84),K(4),I()()),e&2){let e=W().$implicit,t=W(4);D(4),q(t.pretty(e.preview))}}function mie(e,t){e&1&&(F(0,`span`,4),K(1,`in process`),I())}function hie(e,t){if(e&1&&K(0),e&2){let e=W().$implicit;J(` `,e.ms,` ms `)}}function gie(e,t){if(e&1&&(F(0,`tr`)(1,`td`,77),K(2),I(),F(3,`td`)(4,`span`,38),K(5),I()(),F(6,`td`,78)(7,`div`,46)(8,`span`,79),K(9),I(),A(10,sie,3,2)(11,cie,2,1,`span`,80),A(12,lie,2,0,`span`,38),A(13,die,3,3,`span`,38),A(14,fie,2,2,`span`,38),I(),A(15,pie,5,1,`details`),I(),F(16,`td`)(17,`span`,81),K(18),I()(),F(19,`td`,82),A(20,mie,2,0,`span`,4)(21,hie,1,1),I(),F(22,`td`,4),K(23),I()()),e&2){let e,n=t.$implicit,r=W(4);D(2),q(r.time(n.at)),D(2),k(`data-call`,n.kind),D(),q(r.kindLabel(n.kind)),D(3),k(`data-method`,n.method),D(),q(n.method),D(),j((e=r.fnOf(n))?10:11,e),D(2),j(n.seeded?12:-1),D(),j(n.outcome?13:-1),D(),j(n.render?14:-1),D(),j(n.preview?15:-1),D(2),k(`data-status`,r.statusClass(n.status)),D(),q(n.status),D(2),j(n.seeded?20:21),D(3),q(n.from)}}function _ie(e,t){if(e&1&&(F(0,`div`,69)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,30),K(5,`At`),I(),F(6,`th`,30),K(7,`Kind`),I(),F(8,`th`,30),K(9,`Request`),I(),F(10,`th`,30),K(11,`Status`),I(),F(12,`th`,76),K(13,`Duration`),I(),F(14,`th`,30),K(15,`From`),I()()(),F(16,`tbody`),M(17,gie,24,14,`tr`,null,j6),I()()()),e&2){let e=W(3);D(17),N(e.calls())}}function vie(e,t){e&1&&K(0),e&2&&J(` Nothing matches “`,W(4).callQuery().trim(),`” with these filters. `)}function yie(e,t){e&1&&K(0),e&2&&J(` None of the `,W(4).tabCalls().length,` calls fit these filters. `)}function bie(e,t){if(e&1){let e=B();F(0,`div`,70)(1,`p`,85),K(2,`No calls match.`),I(),F(3,`p`,4),A(4,vie,1,1)(5,yie,1,1),I(),F(6,`div`,86)(7,`button`,52),H(`click`,function(){return S(e),C(W(3).clearCallFilters())}),K(8,` Clear filters `),I()()()}if(e&2){let e=W(3);D(4),j(e.callQuery().trim()?4:5)}}function xie(e,t){e&1&&K(0,` No calls of this kind yet. `)}function Sie(e,t){e&1&&K(0,` No calls from this tab yet. `)}function Cie(e,t){e&1&&K(0,` No calls yet. `)}function wie(e,t){e&1&&K(0),e&2&&J(` Tick “All tabs (including untagged)” to see the `,W(4).allCalls().length,` calls from other tabs or tied to no tab. `)}function Tie(e,t){if(e&1&&(F(0,`div`,71)(1,`p`,85),A(2,xie,1,0)(3,Sie,1,0)(4,Cie,1,0),I(),F(5,`p`,4),K(6,` Navigate in the app to see page renders, load() fetches, form actions, server functions and API calls. `),A(7,wie,1,1),I()()),e&2){let e=W(3);D(2),j(e.tabCalls().length?2:e.allCalls().length?3:4),D(5),j(!e.tabCalls().length&&e.allCalls().length?7:-1)}}function Eie(e,t){if(e&1){let e=B();F(0,`tr`)(1,`td`)(2,`span`,79),K(3),I()(),F(4,`td`,34),K(5),I(),F(6,`td`)(7,`app-source-link`,45)(8,`span`,51),K(9),I(),K(10),I()(),F(11,`td`,49)(12,`button`,52),H(`click`,function(){let t=S(e).$implicit;return C(W(3).tryApi(t))}),K(13,` Try `),I()()()}if(e&2){let e=t.$implicit,n=W(3);D(2),k(`data-method`,e.method),D(),q(e.method),D(2),q(e.path),D(2),P(`file`,e.file),D(2),q(n.dir(e.file)),D(),q(n.base(e.file)),D(2),k(`aria-label`,`Try `+e.method+` `+e.path)}}function Die(e,t){e&1&&(F(0,`tr`)(1,`td`,87),K(2,` No API routes. Add a handler under src/server/routes to test it here. `),I()())}function Oie(e,t){if(e&1&&(F(0,`tr`)(1,`td`)(2,`span`,79),K(3),I()(),F(4,`td`,34),K(5),I(),F(6,`td`)(7,`app-source-link`,45)(8,`span`,51),K(9),I(),K(10),I()(),F(11,`td`,89),K(12),I()()),e&2){let e=t.$implicit,n=W(4);D(2),k(`data-method`,e.method),D(),q(e.method),D(2),q(e.name),D(2),P(`file`,e.file),D(2),q(n.dir(e.file)),D(),q(n.base(e.file)),D(2),q(n.fnCalls(e.id))}}function kie(e,t){if(e&1&&(F(0,`h2`),K(1,`Server functions`),I(),F(2,`div`,88)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,30),K(7,`Method`),I(),F(8,`th`,30),K(9,`Name`),I(),F(10,`th`,30),K(11,`File`),I(),F(12,`th`,76),K(13,`Calls`),I()()(),F(14,`tbody`),M(15,Oie,13,7,`tr`,null,j6),I()()()),e&2){let e=W(3);D(15),N(e.serverFns())}}function Aie(e,t){if(e&1){let e=B();A(0,Qre,7,0,`div`,55),A(1,eie,7,0,`div`,55),F(2,`h2`,56),K(3,`Server calls`),I(),F(4,`div`,57)(5,`fieldset`,58)(6,`legend`,31),K(7,`Show calls of kind`),I(),M(8,tie,5,6,`label`,59,eg),I(),F(10,`div`,60)(11,`button`,61),H(`click`,function(){return S(e),C(W(2).clearCalls())}),K(12,` Clear calls `),I(),F(13,`span`,62),K(14),I()()(),F(15,`div`,63)(16,`app-search-field`,64),M_(`valueChange`,function(t){S(e);let n=W(2);return j_(n.callQuery,t)||(n.callQuery=t),C(t)}),I(),F(17,`label`,65)(18,`input`,66),H(`change`,function(t){return S(e),C(W(2).failedOnly.set(t.target.checked))}),I(),K(19,` Failed only `),I(),A(20,nie,3,1,`label`,65),F(21,`span`,67),K(22),I()(),A(23,aie,3,2,`p`,68),A(24,_ie,19,0,`div`,69)(25,bie,9,1,`div`,70)(26,Tie,8,2,`div`,71),F(27,`h2`),K(28,`API routes`),I(),F(29,`div`,72)(30,`table`)(31,`thead`)(32,`tr`)(33,`th`,30),K(34,`Method`),I(),F(35,`th`,30),K(36,`Path`),I(),F(37,`th`,30),K(38,`File`),I(),F(39,`th`,30)(40,`span`,31),K(41,`Actions`),I()()()(),F(42,`tbody`),M(43,Eie,14,7,`tr`,null,P6,!1,Die,3,0,`tr`),I()()(),A(46,kie,17,0),L(47,`app-analog-playground`,73)}if(e&2){let e=W(2);j(e.duplicates().length?0:-1),D(),j(e.refetchedFns().length?1:-1),D(7),N(e.kinds),D(3),P(`disabled`,!e.allCalls().length),D(3),q(e.callsMessage()),D(2),A_(`value`,e.callQuery),D(2),P(`checked`,e.failedOnly()),D(2),j(e.scopePageId()?20:-1),D(2),Y(``,e.matchingCalls().length,` of `,e.tabCalls().length),D(),j(e.shownCount()<e.matchingCalls().length||e.serverFull()?23:-1),D(),j(e.calls().length?24:e.tabCalls().length&&e.callFiltered()?25:26),D(19),N(e.project().api),D(3),j(e.serverFns().length?46:-1),D(),P(`rpc`,e.rpc())(`routes`,e.project().api)(`target`,e.tryTarget())(`origin`,e.devOrigin())}}function jie(e,t){if(e&1&&K(0),e&2){let e=t.$implicit;J(` `,e,` `)}}function Mie(e,t){if(e&1&&(F(0,`p`,90),K(1,` The analog() options in vite.config could not be read in full, so these modes and the prerender plan may be incomplete. `),M(2,jie,1,1,null,null,eg),I()),e&2){let e=W(3);D(2),N(e.plan().configPartial)}}function Nie(e,t){if(e&1&&(F(0,`span`,38),K(1),I()),e&2){let e=t.$implicit;k(`data-mode`,e.mode),D(),Y(``,e.label,` · `,e.count)}}function Pie(e,t){if(e&1&&(F(0,`div`,36),M(1,Nie,2,3,`span`,38,I6),I()),e&2){let e=W(3);D(),N(e.modeCounts())}}function Fie(e,t){e&1&&(F(0,`span`,95),K(1,`differs from config`),I())}function Iie(e,t){if(e&1&&(F(0,`div`,46)(1,`span`,81),K(2),I(),F(3,`span`,94),K(4),I(),A(5,Fie,2,0,`span`,95),I()),e&2){let e=t,n=W().$implicit,r=W(3);D(),k(`data-status`,r.statusClass(e.status)),D(),q(e.status),D(2),Y(``,e.render===`client`?`client only`:`server rendered`,` · `,e.ms,` ms`),D(),j(r.mismatch(n)?5:-1)}}function Lie(e,t){e&1&&(F(0,`span`,93),K(1,`not requested yet`),I())}function Rie(e,t){e&1&&(F(0,`span`,96),K(1,`Checking…`),I())}function zie(e,t){if(e&1&&(F(0,`span`,97),K(1),I()),e&2){let e=W();D(),q(e.error)}}function Bie(e,t){if(e&1&&(F(0,`span`,93),K(1),I()),e&2){let e=W(2);D(),q(e.note)}}function Vie(e,t){if(e&1&&(F(0,`div`,46)(1,`span`,38),K(2),I(),F(3,`span`,38),K(4),I(),A(5,Bie,2,1,`span`,93),I()),e&2){let e=W(),t=W(4);D(),k(`data-mode`,e.observed),D(),q(t.modeLabel(e.observed)),D(),k(`data-tone`,e.matches?`good`:`warn`),D(),q(e.matches?`fits the config`:`differs from config`),D(),j(e.note?5:-1)}}function Hie(e,t){if(e&1&&A(0,Rie,2,0,`span`,96)(1,zie,2,1,`span`,97)(2,Vie,6,5,`div`,46),e&2){let e=t;j(e===`running`?0:e.error?1:2)}}function Uie(e,t){if(e&1&&(F(0,`app-source-link`,45)(1,`span`,51),K(2),I(),K(3),I()),e&2){let e=W().$implicit,t=W(3);P(`file`,e.file),D(2),q(t.dir(e.file)),D(),q(t.base(e.file))}}function Wie(e,t){if(e&1){let e=B();F(0,`tr`)(1,`td`,43),K(2),I(),F(3,`td`)(4,`div`,46)(5,`span`,38),K(6),I(),F(7,`span`,93),K(8),I()()(),F(9,`td`),A(10,Iie,6,5,`div`,46)(11,Lie,2,0,`span`,93),I(),F(12,`td`),A(13,Hie,3,1),F(14,`button`,61),H(`click`,function(){let t=S(e).$implicit;return C(W(3).checkRender(t.path))}),K(15,` Check `),I()(),F(16,`td`),A(17,Uie,4,3,`app-source-link`,45),I()()}if(e&2){let e,n,r=t.$implicit,i=W(3);D(2),q(r.path),D(3),k(`data-mode`,r.mode),D(),q(i.modeLabel(r.mode)),D(2),q(r.reason),D(2),j((e=r.last)?10:11,e),D(3),j((n=i.checks()[r.path])?13:-1,n),D(),P(`disabled`,i.checks()[r.path]===`running`),k(`aria-label`,`Request `+r.path+` and check its render mode`),D(3),j(r.file?17:-1)}}function Gie(e,t){e&1&&(F(0,`tr`)(1,`td`,53),K(2,` No page routes to render yet. Add a .page.ts file under src/app/pages. `),I()())}function Kie(e,t){e&1&&(F(0,`p`,4),K(1,` prerender.routes is a function, so the list is known only at build time. `),I())}function qie(e,t){if(e&1&&(F(0,`span`,39),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function Jie(e,t){e&1&&(F(0,`span`,93),K(1,`default, nothing configured`),I())}function Yie(e,t){if(e&1&&(F(0,`span`,39),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function Xie(e,t){if(e&1&&(F(0,`dt`),K(1,`From routeRules`),I(),F(2,`dd`),M(3,Yie,2,1,`span`,39,eg),I()),e&2){let e=W(2);D(3),N(e.fromRules)}}function Zie(e,t){if(e&1&&(F(0,`span`,100),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function Qie(e,t){if(e&1&&(F(0,`dt`),K(1,`Static, not listed`),I(),F(2,`dd`),M(3,Zie,2,1,`span`,100,eg),I()),e&2){let e=W(2);D(3),N(e.staticMissing)}}function $ie(e,t){if(e&1&&(F(0,`span`,39),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function eae(e,t){if(e&1&&(F(0,`dt`),K(1,`Need explicit entries`),I(),F(2,`dd`),M(3,$ie,2,1,`span`,39,eg),I()),e&2){let e=W(2);D(3),N(e.dynamic)}}function tae(e,t){if(e&1&&(F(0,`span`,101),K(1),I()),e&2){let e=t.$implicit;D(),q(e)}}function nae(e,t){if(e&1&&(K(0,` · missing `),M(1,tae,2,1,`span`,101,eg)),e&2){let e=W(3);D(),N(e.notBuilt)}}function rae(e,t){if(e&1&&(K(0),A(1,nae,3,0)),e&2){let e=W(2);J(` `,W(3).plural(e.built.length,`page`),` in dist/analog/public `),D(),j(e.notBuilt.length?1:-1)}}function iae(e,t){e&1&&(F(0,`span`,93),K(1,`no build yet`),I())}function aae(e,t){if(e&1&&(F(0,`dl`,98)(1,`dt`),K(2,`Listed`),I(),F(3,`dd`),M(4,qie,2,1,`span`,39,eg),A(6,Jie,2,0,`span`,93),I(),A(7,Xie,5,0),A(8,Qie,5,0),A(9,eae,5,0),F(10,`dt`),K(11,`Build output`),I(),F(12,`dd`,99),A(13,rae,2,2)(14,iae,2,0,`span`,93),I()()),e&2){let e=W();D(4),N(e.listed??G_(5,A6)),D(2),j(e.listed?-1:6),D(),j(e.fromRules?.length?7:-1),D(),j(e.staticMissing.length?8:-1),D(),j(e.dynamic.length?9:-1),D(4),j(e.built.length?13:14)}}function oae(e,t){e&1&&(F(0,`div`,92)(1,`h2`),K(2,`Prerender plan`),I(),A(3,Kie,2,0,`p`,4)(4,aae,15,6,`dl`,98),I()),e&2&&(D(3),j(t.dynamicConfig?3:4))}function sae(e,t){if(e&1&&(A(0,Mie,4,0,`p`,90),A(1,Pie,3,0,`div`,36),F(2,`div`,91)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,30),K(7,`Route`),I(),F(8,`th`,30),K(9,`Configured`),I(),F(10,`th`,30),K(11,`Last request`),I(),F(12,`th`,30),K(13,`Dev server check`),I(),F(14,`th`,30),K(15,`File`),I()()(),F(16,`tbody`),M(17,Wie,18,9,`tr`,null,F6,!1,Gie,3,0,`tr`),I()()(),A(20,oae,5,1,`div`,92),L(21,`app-analog-build`,16)),e&2){let e,t=W(2);j(t.plan()?.configPartial?.length?0:-1),D(),j(t.modeCounts().length?1:-1),D(16),N(t.renderRows()),D(3),j((e=t.plan())?20:-1,e),D(),P(`rpc`,t.rpc())}}function cae(e,t){if(e&1&&(F(0,`div`)(1,`span`,97),K(2),I()()),e&2){let e=W().$implicit;D(2),q(e.error)}}function lae(e,t){if(e&1&&(F(0,`div`)(1,`span`,95),K(2),I()()),e&2){let e=W(5);D(2),J(`takes over `,e.base(t))}}function uae(e,t){if(e&1&&(F(0,`div`)(1,`span`,95),K(2),I()()),e&2){let e=W().$implicit,t=W(4);D(2),q(t.plural(e.schemaErrors.length,`schema problem`))}}function dae(e,t){if(e&1){let e=B();F(0,`tr`)(1,`td`)(2,`strong`),K(3),I(),A(4,cae,3,1,`div`),A(5,lae,3,1,`div`),A(6,uae,3,1,`div`),I(),F(7,`td`,43),K(8),I(),F(9,`td`,34),K(10),I(),F(11,`td`,105),K(12),I(),F(13,`td`)(14,`app-source-link`,45)(15,`span`,51),K(16),I(),K(17),I()(),F(18,`td`,49)(19,`button`,52),H(`click`,function(){let t=S(e).$implicit;return C(W(4).showPreview(t.file))}),K(20,` Preview `),I()()()}if(e&2){let e,n=t.$implicit,r=W(4);D(3),q(n.attributes.title||`(no title)`),D(),j(n.error?4:-1),D(),j((e=r.shadowed(n.file))?5:-1,e),D(),j(n.schemaErrors?.length?6:-1),D(2),q(r.contentUrl(n.file)??``),D(2),q(n.slug),D(2),q(n.attributes.date||``),D(2),P(`file`,n.file),D(2),q(r.dir(n.file)),D(),q(r.base(n.file)),D(2),k(`aria-label`,`Preview `+n.file)(`aria-pressed`,r.previewFile()===n.file)}}function fae(e,t){if(e&1&&(F(0,`div`,102)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,30),K(5,`Title`),I(),F(6,`th`,30),K(7,`URL`),I(),F(8,`th`,30),K(9,`Slug`),I(),F(10,`th`,30),K(11,`Date`),I(),F(12,`th`,30),K(13,`File`),I(),F(14,`th`,30)(15,`span`,31),K(16,`Actions`),I()()()(),F(17,`tbody`),M(18,dae,21,12,`tr`,null,L6),I()()()),e&2){let e=W(3);D(18),N(e.project().content)}}function pae(e,t){e&1&&(F(0,`div`,71)(1,`p`,85),K(2,`No markdown files under src/content.`),I(),F(3,`p`,4),K(4,` Add a .md file there to see its title, slug, date and the URL it serves. `),I()())}function mae(e,t){if(e&1&&(F(0,`span`,97),K(1),I()),e&2){let e=W();D(),q(e.error)}}function hae(e,t){if(e&1&&(F(0,`span`,93),K(1),I()),e&2){let e=W(2);D(),J(` (skips `,e.unsupported.join(`, `),`)`)}}function gae(e,t){if(e&1&&(F(0,`span`,34),K(1),I(),A(2,hae,2,1,`span`,93)),e&2){let e=W();D(),q(e.file),D(),j(e.unsupported?.length?2:-1)}}function _ae(e,t){e&1&&A(0,mae,2,1,`span`,97)(1,gae,3,2),e&2&&j(+!t.error)}function vae(e,t){e&1&&(F(0,`span`,93),K(1,`none; set `),F(2,`code`),K(3,`analog.contentSchema`),I(),K(4,` to check frontmatter`),I())}function yae(e,t){if(e&1&&(F(0,`app-source-link`,106),K(1),I()),e&2){let e=t.$implicit,n=W(4);P(`file`,e.file)(`line`,e.line),D(),D_(``,e.api,` · `,n.base(e.file),`:`,e.line)}}function bae(e,t){e&1&&(F(0,`span`,93),K(1,`no injectContentFiles, injectContent or contentFilesSource call under src`),I())}function xae(e,t){if(e&1&&(F(0,`dl`,103)(1,`dt`),K(2,`Schema`),I(),F(3,`dd`),A(4,_ae,2,1)(5,vae,5,0,`span`,93),I(),F(6,`dt`),K(7,`Read by`),I(),F(8,`dd`),M(9,yae,2,5,`app-source-link`,106,R6,!1,bae,2,0,`span`,93),I()()),e&2){let e,t=W(3);D(4),j((e=t.project().contentSchema)?4:5,e),D(5),N(t.project().contentUsage??G_(2,k6))}}function Sae(e,t){if(e&1){let e=B();F(0,`app-analog-content-preview`,107),H(`closed`,function(){let t=S(e);return C(W(3).closePreview(t))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`file`,t)(`schema`,e.project().contentSchema?.error?void 0:e.project().contentSchema?.file)}}function Cae(e,t){if(e&1&&(A(0,fae,20,0,`div`,102)(1,pae,5,0,`div`,71),A(2,xae,12,3,`dl`,103),A(3,Sae,1,3,`app-analog-content-preview`,104)),e&2){let e,t=W(2);j(+!t.project().content.length),D(2),j(t.project().content.length?2:-1),D(),j((e=t.previewFile())?3:-1,e)}}function wae(e,t){if(e&1&&L(0,`app-analog-data`,15),e&2){let e=W(2);P(`rpc`,e.rpc())(`page`,e.page())(`serverFns`,e.serverFns())(`duplicates`,e.state().duplicates??G_(5,k6))(`refetches`,e.state().refetches??G_(6,k6))}}function Tae(e,t){e&1&&L(0,`app-analog-runtime`,16),e&2&&P(`rpc`,W(2).rpc())}function Eae(e,t){if(e&1&&(F(0,`span`,19),K(1),I()),e&2){let e=W().$implicit;D(),q(e.items.length)}}function Dae(e,t){if(e&1&&(F(0,`app-source-link`,45)(1,`span`,51),K(2),I(),K(3),I()),e&2){let e=W().$implicit,t=W(5);P(`file`,e.file),D(2),q(t.dir(e.file)),D(),q(t.base(e.file))}}function Oae(e,t){if(e&1&&(F(0,`span`,43),K(1),I()),e&2){let e=W().$implicit;D(),q(e.path)}}function kae(e,t){if(e&1&&(F(0,`p`,115),K(1),I()),e&2){let e=W().$implicit;D(),q(e.message)}}function Aae(e,t){if(e&1&&(F(0,`li`),A(1,Dae,4,3,`app-source-link`,45),A(2,Oae,2,1,`span`,43),A(3,kae,2,1,`p`,115),I()),e&2){let e=t.$implicit;D(),j(e.file?1:-1),D(),j(e.path&&e.path!==e.file?2:-1),D(),j(e.message?3:-1)}}function jae(e,t){if(e&1&&(F(0,`li`)(1,`div`,110)(2,`span`,38),K(3),I(),F(4,`strong`,111),K(5),I(),A(6,Eae,2,1,`span`,19),I(),F(7,`p`),K(8),I(),F(9,`ul`,112),M(10,Aae,4,3,`li`,null,$h),I(),F(12,`div`,113)(13,`strong`),K(14,`How to fix`),I(),K(15),I(),F(16,`span`,114),K(17),I()()),e&2){let e=t.$implicit,n=W(4);k(`data-tone`,n.tone(e.severity)),D(2),k(`data-tone`,n.tone(e.severity)),D(),q(e.severity),D(2),q(e.title),D(),j(e.items.length>1?6:-1),D(2),q(e.summary),D(2),N(e.items),D(5),J(` `,e.fix),D(2),q(e.rule)}}function Mae(e,t){if(e&1&&(F(0,`p`,4),K(1),I(),F(2,`ul`,109),M(3,jae,18,8,`li`,null,z6),I()),e&2){let e=W(3);D(),Y(` `,e.plural(e.findings().length,`issue`),` in `,e.plural(e.lintCards().length,`group`),`. Each card says what is wrong, where, and how to fix it. `),D(2),N(e.lintCards())}}function Nae(e,t){e&1&&(F(0,`div`,108)(1,`strong`),K(2,`No Analog problems found.`),I(),K(3,` Routes, server files, prerender config and content all check out. `),I())}function Pae(e,t){e&1&&A(0,Mae,5,2)(1,Nae,4,0,`div`,108),e&2&&j(+!W(2).findings().length)}function Fae(e,t){if(e&1){let e=B();F(0,`section`,7)(1,`div`,8)(2,`span`,9),K(3,`Analog`),I(),F(4,`span`,10),K(5),I()(),F(6,`div`,8)(7,`span`,9),K(8,`Pages`),I(),F(9,`span`,10),K(10),I()(),F(11,`div`,8)(12,`span`,9),K(13,`API routes`),I(),F(14,`span`,10),K(15),I()(),F(16,`div`,8)(17,`span`,9),K(18,`Server calls`),I(),F(19,`span`,10),K(20),I()(),F(21,`div`,8)(22,`span`,9),K(23,`Issues`),I(),F(24,`span`,10),K(25),I()(),A(26,U6,5,2,`div`,11),I(),F(27,`div`,12),H(`keydown`,function(t){return S(e),C(W().onKey(t))}),M(28,G6,3,6,`button`,13,j6),I(),F(30,`div`,14),A(31,Xre,31,7)(32,Aie,48,17)(33,sae,22,5)(34,Cae,4,3)(35,wae,1,7,`app-analog-data`,15)(36,Tae,1,1,`app-analog-runtime`,16)(37,Pae,2,1),I()}if(e&2){let e,t,n=W();D(5),q(n.project().version||`unknown`),D(5),q(n.pageCount()),D(5),q(n.project().api.length),D(5),q(n.tabCalls().length),D(),k(`data-tone`,n.lintTone()||`good`),D(4),q(n.lintCount().errors+n.lintCount().warnings),D(),j((e=n.page())?26:-1,e),D(2),N(n.views()),D(2),P(`id`,`analog-panel-`+n.view()),k(`aria-labelledby`,`analog-tab-`+n.view()),D(),j((t=n.view())===`routes`?31:t===`server`?32:t===`render`?33:t===`content`?34:t===`data`?35:t===`runtime`?36:t===`lint`?37:-1)}}var Iae={"scan-error":{title:`A folder could not be read`,summary:`Its files are missing from routes, API routes and lint results.`},"duplicate-url":{title:`Two files serve the same URL`,summary:`Only one of them is reachable; the other never renders.`},"sibling-params":{title:`Two dynamic pages in one folder`,summary:`Both are [param] pages at the same level, so the first one always wins.`},"missing-default-export":{title:`Page has no default export`,summary:`Analog needs the component as the default export, so the page renders nothing.`},"redirect-with-component":{title:`Redirect page also exports a component`,summary:`The redirect runs first, so the component never shows.`},"redirect-path-match":{title:`Redirect matches too much`,summary:`An empty-path redirect without pathMatch "full" catches every URL below it.`},"layout-without-outlet":{title:`Layout has no router-outlet`,summary:`The layout has child pages, but without <router-outlet> they never render.`},"server-without-load":{title:`.server.ts without load or action`,summary:`The server file exports no load, action or server function, so Analog calls nothing.`},"orphan-server-file":{title:`.server.ts without a page`,summary:`No page file sits next to it, so its load never runs.`},"api-method-suffix":{title:`Unknown method suffix on an API file`,summary:`The suffix is not an HTTP method, so it becomes part of the URL.`},"duplicate-api-route":{title:`Two handlers for one API route`,summary:`Two files answer the same method and path.`},"api-outside-prefix":{title:`Server route outside the API prefix`,summary:`During vite dev only routes under the prefix reach Nitro.`},"prerender-unknown-route":{title:`Prerender entry matches no page`,summary:`prerender.routes lists a path that no page file serves.`},"prerender-missing-root":{title:`Home page is not prerendered`,summary:`static is on, but prerender.routes leaves out /.`},"content-frontmatter":{title:`Broken frontmatter`,summary:`The markdown frontmatter cannot be read.`},"content-schema":{title:`Frontmatter does not match the content schema`,summary:`The keys or values differ from the JSON Schema that analog.contentSchema names.`},"content-schema-unreadable":{title:`The content schema could not be used`,summary:`analog.contentSchema names a file that is missing, outside the project or not JSON.`},"duplicate-slug":{title:`Two posts share a slug`,summary:`injectContent picks one of them at random.`},"content-shadows-page":{title:`Markdown file takes over a page`,summary:`Files under src/content are routes too, so these URLs render the markdown file instead of the [param] page.`},"load-fetched-twice":{title:`load() runs twice`,summary:`These pages fetched their data while rendering on the server and again in the browser.`},"fn-fetched-twice":{title:`Server function read runs twice`,summary:`These reads ran while rendering on the server and again in the browser right after hydration.`},"restart-needed":{title:`New pages need a restart`,summary:`These page files exist, but the running router does not know them yet.`},"hydration-error":{title:`Hydration error`,summary:`The browser DOM did not match the server HTML.`},"api-not-found":{title:`API call failed with 404 or 405`,summary:`A request hit a path or method that no server route handles.`}},f8=200,Lae=new Set([`missing-default-export`,`redirect-with-component`,`redirect-path-match`,`layout-without-outlet`,`server-without-load`,`orphan-server-file`,`load-fetched-twice`,`restart-needed`,`prerender-missing-root`]),p8={ssr:`SSR`,ssg:`Prerendered`,client:`Client only`,cached:`Cached`,redirect:`Redirect`},Rae={all:`All`,page:`Pages`,load:`load()`,action:`Actions`,fn:`Server fn`,api:`API`},zae={success:`succeeded`,redirect:`redirected`,invalid:`validation errors`,error:`failed`},Bae={success:`good`,redirect:`info`,invalid:`warn`,error:`bad`};function m8(e,t=0,n=[]){for(let r of e)n.push({route:r,depth:t}),m8(r.children,t+1,n);return n}var Vae=class e{plural=WE;rpc=$(null);kinds=[`all`,`page`,`load`,`action`,`fn`,`api`];view=T(`routes`);project=T(null);loadFailed=T(!1);state=T({});findings=T([]);renderRows=T([]);plan=T(null);filter=T(``);testUrl=T(``);explained=T(null);explainError=T(``);explaining=T(!1);kind=T(`all`);devOrigin=X(()=>{let e=this.page()?.url??``;if(/^https?:\/\//.test(e))try{return new URL(e).origin}catch{return``}return/^https?:$/.test(location.protocol)?location.origin:``});transformFile=T(null);previewFile=T(null);checks=T({});tryTarget=Q({source:this.view,computation:()=>null});tryNonce=0;unsubscribe=null;refreshTimer;refreshRun=0;destroyRef=x(Ss);host=x(Ml);hostPageId=tT();page=X(()=>{let e=this.state().pages??[];return(this.hostPageId?e.find(e=>e.pageId===this.hostPageId):e[0])??null});openFiles=X(()=>{let e=new Map;for(let t of this.page()?.chain??[])t.file&&(!e.has(t.file)||!t.outlet)&&e.set(t.file,t.outlet??``);return e});allCalls=X(()=>this.state().calls??[]);scopePageId=X(()=>this.page()?.pageId);allTabs=T(!1);tabCalls=X(()=>{let e=this.scopePageId(),t=this.allCalls();return this.allTabs()||!e?t:t.filter(t=>t.pageId===e)});maxServerCalls=f8;callQuery=T(``);failedOnly=T(!1);callsMessage=T(``);callFiltered=X(()=>!!this.callQuery().trim()||this.failedOnly());matchingCalls=X(()=>{let e=this.kind(),t=this.callQuery().trim().toLowerCase(),n=this.failedOnly();return this.tabCalls().filter(r=>(e===`all`||r.kind===e)&&(!n||this.isFailed(r))&&(!t||this.callText(r).includes(t)))});calls=X(()=>this.matchingCalls().slice(-150).reverse());shownCount=X(()=>this.calls().length);serverFull=X(()=>this.allCalls().length>=f8);allRoutes=X(()=>m8(this.project()?.routes??[]));pageCount=X(()=>this.allRoutes().filter(e=>e.route.file&&e.route.kind!==`layout`).length);routeRows=X(()=>{let e=this.filter().trim().toLowerCase();return e?this.allRoutes().filter(t=>t.route.fullPath.toLowerCase().includes(e)||!!t.route.file?.toLowerCase().includes(e)):this.allRoutes()});serverFns=X(()=>this.project()?.serverFns??[]);fnById=X(()=>new Map(this.serverFns().map(e=>[e.id,e])));shownRoutes=X(()=>new Set(this.tabCalls().map(e=>`${e.kind} ${e.route??``}`)));refetchedFns=X(()=>Array.from(new Set((this.state().refetches??[]).filter(e=>this.shownRoutes().has(`fn ${e.id}`)).map(e=>this.fnById().get(e.id)?.name??e.id))));duplicates=X(()=>Array.from(new Set((this.state().duplicates??[]).filter(e=>this.shownRoutes().has(`load ${e.route}`)).map(e=>e.route))));modeCounts=X(()=>[`ssr`,`ssg`,`cached`,`client`,`redirect`].map(e=>({mode:e,label:p8[e],count:this.renderRows().filter(t=>t.mode===e).length})).filter(e=>e.count));lintCards=X(()=>{let e={error:0,warning:1,info:2},t=new Map;for(let e of this.findings()){let n=t.get(e.rule);if(!n){let r=Iae[e.rule];n={rule:e.rule,severity:e.severity,title:r?.title??e.rule,summary:r?.summary??e.message,fix:e.fix,items:[]},t.set(e.rule,n)}let r=Lae.has(e.rule)||e.message===n.summary?void 0:e.message;n.items.some(t=>t.file===e.file&&t.path===e.path&&t.message===r)||n.items.push({file:e.file,path:e.path,message:r})}return Array.from(t.values()).sort((t,n)=>e[t.severity]-e[n.severity])});lintCount=X(()=>{let e=this.findings();return{errors:e.filter(e=>e.severity===`error`).length,warnings:e.filter(e=>e.severity===`warning`).length}});lintTone=X(()=>{let{errors:e,warnings:t}=this.lintCount();return e?`bad`:t?`warn`:``});views=X(()=>{let{errors:e,warnings:t}=this.lintCount();return[{id:`routes`,label:`Routes`,count:this.pageCount(),tone:``},{id:`server`,label:`Server`,count:this.tabCalls().length,tone:``},{id:`render`,label:`Render`,count:this.renderRows().length,tone:``},{id:`content`,label:`Content`,count:this.project()?.content.length??0,tone:``},{id:`data`,label:`Data`,count:null,tone:``},{id:`runtime`,label:`Runtime`,count:null,tone:``},{id:`lint`,label:`Lint`,count:e+t,tone:this.lintTone()}]});constructor(){E(()=>{let e=this.rpc();e&&Z(()=>void this.load(e))}),E(()=>{let e=this.view();this.state(),Z(()=>this.scheduleRefresh(e))}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.refreshTimer)})}async load(e){let t=await sT(e,`analog-project`);if(!this.destroyRef.destroyed){this.project.set(t),this.loadFailed.set(t===null);try{let t=await e.scope(`pangular`).rpc.sharedState(`analog`);if(this.destroyRef.destroyed)return;let n=e=>this.state.set(e??{});n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.state.set({})}this.destroyRef.destroyed||await this.refresh(this.view())}}retry(){let e=this.rpc();e&&(this.loadFailed.set(!1),this.load(e))}scheduleRefresh(e){clearTimeout(this.refreshTimer),this.refreshTimer=setTimeout(()=>void this.refresh(e),300)}async refresh(e){let t=this.rpc();if(!t)return;let n=++this.refreshRun,[r,i]=await Promise.all([sT(t,`analog-lint`,this.hostPageId??void 0),sT(t,`analog-render`)]);if(n===this.refreshRun&&(this.findings.set(r??[]),this.renderRows.set(i?.rows??[]),this.plan.set(i?.plan??null),e===`routes`||e===`content`||this.project()===null)){let e=await sT(t,`analog-project`);e&&n===this.refreshRun&&(this.project.set(e),this.loadFailed.set(!1))}}isOpen(e){return!!e.file&&this.openFiles().has(e.file)}openText(e){let t=e.file?this.openFiles().get(e.file):void 0;return t?`open in ${t}`:`open`}kindText(e){return e.catchAll?e.catchAll===`optional`?`optional catch-all`:`catch-all`:e.kind===`implicit`?`folder`:e.kind}serverExports(e){return(e.serverExports??[]).filter(e=>e===`load`||e===`action`)}short(e){return e?.replace(/^\/src\/app\//,``).replace(/^\//,``)}dir(e){let t=this.short(e)??e;return t.includes(`/`)?t.slice(0,t.lastIndexOf(`/`)+1):``}base(e){return e.slice(e.lastIndexOf(`/`)+1)}paramList(e){return Object.entries(e)}kindLabel(e){return Rae[e]}kindCount(e){return e===`all`?this.tabCalls().length:this.tabCalls().filter(t=>t.kind===e).length}modeLabel(e){return p8[e]}mismatch(e){return!e.last?.render||e.mode===`redirect`?!1:e.mode===`client`?e.last.render!==`client`:e.last.render===`client`}fnOf(e){return e.kind===`fn`&&e.route?this.fnById().get(e.route):void 0}fnCalls(e){return this.tabCalls().filter(t=>t.kind===`fn`&&t.route===e).length}outcomeLabel(e){return zae[e]}outcomeTone(e){return Bae[e]}statusClass(e){return e>=500||e===0?`bad`:e>=400?`warn`:`good`}tone(e){return e===`error`?`bad`:e===`warning`?`warn`:`info`}shadowed(e){return this.findings().find(t=>t.rule===`content-shadows-page`&&t.file===e)?.relatedFile}contentUrl(e){return this.allRoutes().find(t=>t.route.file===e)?.route.fullPath}pretty(e){try{return JSON.stringify(JSON.parse(e),null,2)}catch{return e}}time=VE;showTransform(e){this.transformFile.set(this.transformFile()===e?null:e)}closeTransform(e){this.transformFile.set(null),this.refocus(`Show the Vite transform stack of ${e}`)}showPreview(e){this.previewFile.set(this.previewFile()===e?null:e)}closePreview(e){this.previewFile.set(null),this.refocus(`Preview ${e}`)}refocus(e){queueMicrotask(()=>this.host.nativeElement.querySelector(`button[aria-label="${CSS.escape(e)}"]`)?.focus())}async checkRender(e){this.checks.update(t=>({...t,[e]:`running`}));let t=await sT(this.rpc(),`analog-render-check`,e);this.checks.update(n=>({...n,[e]:t??{path:e,error:`No answer from the devtools server.`}}))}tryApi(e){this.tryTarget.set({route:e,nonce:++this.tryNonce})}isFailed(e){return!e.status||e.status>=400||e.outcome===`error`}callText(e){let t=this.fnOf(e);return[e.url,e.route,t?.name,t?.file].filter(Boolean).join(` `).toLowerCase()}clearCallFilters(){this.callQuery.set(``),this.failedOnly.set(!1),this.kind.set(`all`),queueMicrotask(()=>this.host.nativeElement.querySelector(`#analog-call-search`)?.focus())}async clearCalls(){let e=this.rpc();try{if(!e)throw Error(`No devtools server`);await oT(e,`analog-clear-calls`),this.callsMessage.set(`Calls cleared.`),queueMicrotask(()=>this.host.nativeElement.querySelector(`input[name="analog-kind"]:checked`)?.focus())}catch{this.callsMessage.set(`Could not clear the calls.`)}}async explain(){let e=this.testUrl().trim();if(!e){this.explained.set(null),this.explainError.set(`Type a URL to explain, for example /products/42.`);return}this.explaining.set(!0),this.explainError.set(``);try{let t=await oT(this.rpc(),`analog-explain-url`,e);if(!t)throw Error(`The devtools server did not answer`);this.explained.set({url:e,match:t})}catch(t){let n=String(t?.message||`The devtools server did not answer`);this.explained.set(null),this.explainError.set(`Could not explain ${e}. ${n.replace(/\.?$/,`.`)}`)}finally{this.explaining.set(!1)}}onKey(e){let t=this.views().map(e=>e.id),n=t.indexOf(this.view()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.view.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#analog-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-analog-inspector`]],inputs:{rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`role`,`alert`,1,`empty`],[`role`,`status`,1,`loading`],[1,`empty`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`btn`,3,`click`],[`aria-hidden`,`true`,1,`spinner`],[`aria-label`,`Analog summary`,1,`summary`],[1,`stat`],[1,`label`],[1,`value`],[1,`stat`,`wide`],[`role`,`tablist`,`aria-label`,`Analog views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[3,`rpc`,`page`,`serverFns`,`duplicates`,`refetches`],[3,`rpc`],[1,`value`,`mono`,3,`title`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`count`],[1,`toolbar`],[1,`inline`,`explain`,3,`submit`],[`for`,`analog-url`],[`id`,`analog-url`,`type`,`text`,`placeholder`,`/products/42`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`inputId`,`route-filter`,`placeholder`,`Filter by path or file`,`saveKey`,`analog-routes`,1,`filter`,3,`valueChange`,`value`],[`role`,`status`,1,`explain-result`],[`data-tone`,`bad`,1,`callout`],[1,`callout`],[`role`,`region`,`aria-label`,`File routes`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[1,`sr-only`],[3,`open`,`dim`],[3,`rpc`,`file`,`serverFns`],[1,`mono`],[1,`chain`],[1,`chips`],[1,`mono`,3,`file`],[1,`pill`],[1,`chip`,`mono`],[1,`plain`],[1,`route`],[`aria-hidden`,`true`,1,`guide`],[1,`mono`,`path`],[1,`pill`,`live`],[1,`file`,3,`file`],[1,`meta`],[`data-kind`,`load`,1,`pill`],[1,`chip`],[1,`actions`],[`type`,`button`,1,`btn`,`ghost`],[1,`dir`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`colspan`,`5`,1,`empty-row`],[3,`closed`,`rpc`,`file`,`serverFns`],[`data-tone`,`warn`,`role`,`note`,1,`callout`],[`id`,`analog-calls-heading`],[1,`calls-bar`],[1,`segmented`],[3,`on`],[1,`calls-actions`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`status`,1,`calls-message`],[`role`,`group`,`aria-label`,`Filter the server calls`,1,`call-filters`],[`inputId`,`analog-call-search`,`placeholder`,`Filter by URL, path or function`,`saveKey`,`analog-calls`,1,`search`,3,`valueChange`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`aria-live`,`polite`,1,`total`],[1,`note`],[`role`,`region`,`aria-label`,`Server calls`,`tabindex`,`0`,1,`table-wrap`],[`role`,`status`,1,`empty-box`,`no-match`],[1,`empty-box`],[`role`,`region`,`aria-label`,`API routes`,`tabindex`,`0`,1,`table-wrap`],[3,`rpc`,`routes`,`target`,`origin`],[`type`,`radio`,`name`,`analog-kind`,1,`sr-only`,3,`change`,`checked`],[`type`,`checkbox`,`data-testid`,`analog-all-tabs`,3,`change`,`checked`],[`scope`,`col`,1,`num`],[1,`muted`,`nowrap`],[1,`request`],[1,`method`],[1,`mono`,`url`],[1,`status`],[1,`num`,`nowrap`],[1,`mono`,`muted`,3,`file`],[1,`code`],[1,`empty-lead`],[1,`empty-actions`],[`colspan`,`4`,1,`empty-row`],[`role`,`region`,`aria-label`,`Server functions`,`tabindex`,`0`,1,`table-wrap`],[1,`num`,`tnum`],[`role`,`status`,1,`note`],[`role`,`region`,`aria-label`,`Render modes`,`tabindex`,`0`,1,`table-wrap`],[1,`card`],[1,`muted`,`small`],[1,`muted`,`small`,`tnum`],[`data-tone`,`warn`,1,`pill`],[`role`,`status`,1,`muted`,`small`],[`data-tone`,`bad`,1,`pill`],[1,`facts`],[1,`tnum`],[`data-tone`,`warn`,1,`chip`,`mono`],[`data-tone`,`bad`,1,`chip`,`mono`],[`role`,`region`,`aria-label`,`Content files`,`tabindex`,`0`,1,`table-wrap`],[1,`facts`,`content-facts`],[3,`rpc`,`file`,`schema`],[1,`muted`,`nowrap`,`tnum`],[1,`chip`,`mono`,3,`file`,`line`],[3,`closed`,`rpc`,`file`,`schema`],[`data-tone`,`good`,`role`,`status`,1,`callout`],[1,`findings`],[1,`finding-head`],[1,`finding-title`],[1,`where`],[1,`fix`],[1,`rule`,`mono`],[1,`detail`]],template:function(e,t){e&1&&A(0,B6,7,0,`div`,0)(1,V6,4,0,`div`,1)(2,H6,14,0,`div`,2)(3,Fae,38,10),e&2&&j(t.project()===null&&t.loadFailed()?0:t.project()===null?1:t.project().analog?3:2)},dependencies:[$N,bj,Z2,m4,K4,D3,m6,O6],styles:[`@charset "UTF-8";
-[_nghost-%COMP%] {
-  --%NS%good: var(--%NS%ok);
-  --%NS%bad: var(--%NS%danger);
-}
-
-[_nghost-%COMP%] {
-  --%NS%mono: var(--%NS%font-mono);
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.loading[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  flex: none;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner[_ngcontent-%COMP%] {
-    animation: none;
-    border-color: var(--%NS%accent-line);
-  }
-}
-.tnum[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-.meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 8px;
-  align-items: center;
-  min-width: 0;
-}
-
-.empty-row[_ngcontent-%COMP%] {
-  padding: 24px 16px;
-  color: var(--%NS%text-2);
-  text-align: center;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td.empty-row[_ngcontent-%COMP%] {
-  background: transparent;
-}
-
-.empty-box[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius);
-  text-align: center;
-}
-
-.empty-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  line-height: 1.55;
-}
-
-.empty-lead[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.nowrap[_ngcontent-%COMP%] {
-  white-space: nowrap;
-}
-
-code[_ngcontent-%COMP%] {
-  padding: 1px 6px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 6px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-strong);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-}
-
-.summary[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-  gap: 12px;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.stat[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  align-content: start;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  transition: border-color 180ms var(--%NS%ease), background-color 180ms var(--%NS%ease);
-}
-
-.stat[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.stat.wide[_ngcontent-%COMP%] {
-  grid-column: span 2;
-  min-width: 0;
-}
-
-@media (max-width: 340px) {
-  .stat.wide[_ngcontent-%COMP%] {
-    grid-column: 1/-1;
-  }
-}
-.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  font-variant-numeric: tabular-nums;
-  overflow-wrap: anywhere;
-}
-
-.stat[_ngcontent-%COMP%]   .value.mono[_ngcontent-%COMP%] {
-  overflow: hidden;
-  color: var(--%NS%text);
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 24px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.stat[data-tone=warn][_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
-  color: var(--%NS%warn);
-}
-
-.stat[data-tone=good][_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.stat[data-tone=bad][_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}
-
-.tabs[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  justify-self: start;
-  max-width: 100%;
-  padding: 3px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 10px;
-  background: var(--%NS%bg);
-}
-
-[role=tab][_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  min-height: 28px;
-  padding: 4px 12px;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-[role=tab][_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-[role=tab][aria-selected=true][_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
-}
-
-.count[_ngcontent-%COMP%] {
-  min-width: 20px;
-  padding: 0 6px;
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-}
-
-[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
-  background: var(--%NS%border-strong);
-  color: var(--%NS%text);
-}
-
-.count[data-tone=warn][_ngcontent-%COMP%], 
-[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[data-tone=warn][_ngcontent-%COMP%] {
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.count[data-tone=bad][_ngcontent-%COMP%], 
-[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[data-tone=bad][_ngcontent-%COMP%] {
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.panel[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 16px;
-  min-width: 0;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-}
-
-.explain[_ngcontent-%COMP%] {
-  flex: 1 1 320px;
-  min-width: 0;
-}
-
-.filter[_ngcontent-%COMP%] {
-  flex: 0 1 240px;
-  min-width: 0;
-}
-
-@media (max-width: 560px) {
-  .filter[_ngcontent-%COMP%] {
-    flex: 1 1 100%;
-  }
-}
-.inline[_ngcontent-%COMP%], 
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.inline[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%], 
-.playground[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:not(.check) {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.field[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.field.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 13px;
-}
-
-.field[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-.field[_ngcontent-%COMP%]:focus, 
-.field[_ngcontent-%COMP%]:focus-visible {
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-  outline: none;
-}
-
-.method-select[_ngcontent-%COMP%] {
-  width: 112px;
-  font-family: var(--%NS%mono);
-}
-
-textarea.field[_ngcontent-%COMP%] {
-  height: auto;
-  padding: 8px 12px;
-}
-
-.grow[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.btn[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
-}
-
-.btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%control-border);
-}
-
-.btn[_ngcontent-%COMP%]:active {
-  transform: translateY(1px);
-}
-
-.btn.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.btn.primary[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-.btn.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12px;
-}
-
-.btn.ghost[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%accent-line);
-  color: var(--%NS%text-strong);
-}
-
-td.actions[_ngcontent-%COMP%] {
-  width: 1%;
-  text-align: right;
-  vertical-align: middle;
-}
-
-.btn[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-[role=tab][_ngcontent-%COMP%]:focus-visible, 
-.btn[_ngcontent-%COMP%]:focus-visible, 
-.table-wrap[_ngcontent-%COMP%]:focus-visible, 
-summary[_ngcontent-%COMP%]:focus-visible, 
-.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:focus-within {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.callout[_ngcontent-%COMP%] {
-  padding: 12px 16px;
-  border: 1px solid color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
-  border-radius: var(--%NS%radius);
-  background: color-mix(in srgb, var(--%NS%hue-info) 8%, var(--%NS%surface));
-  line-height: 1.6;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.callout[data-tone=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-}
-
-.callout[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-}
-
-.callout[data-tone=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-}
-
-.callout[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.callout[_ngcontent-%COMP%]   strong.mono[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.chain[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 8px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(:last-child)::after {
-  content: "›";
-  margin-left: 2px;
-  color: var(--%NS%text-3);
-}
-
-.callout[_ngcontent-%COMP%]   .chips[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.plain[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  padding-left: 18px;
-}
-
-.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 560px;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
-  border-bottom: none;
-}
-
-th[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  background: var(--%NS%surface);
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-td.nowrap[_ngcontent-%COMP%] {
-  font-variant-numeric: tabular-nums;
-}
-
-tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  transition: background-color 160ms var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-tr.open[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
-}
-
-tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-tr.dim[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.route[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.guide[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-family: var(--%NS%mono);
-}
-
-.path[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.file[_ngcontent-%COMP%] {
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.dir[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.pill[_ngcontent-%COMP%], 
-.chip[_ngcontent-%COMP%], 
-.status[_ngcontent-%COMP%], 
-.method[_ngcontent-%COMP%] {
-  display: inline-block;
-  padding: 1px 8px;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.pill[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin: 0 4px 4px 0;
-  padding: 3px 10px;
-  border: 1px solid var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 12px;
-  line-height: 16px;
-}
-
-.chip.mono[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.chips[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.chips[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
-  padding: 3px 10px;
-  font-size: 12px;
-}
-
-.pill.live[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, var(--%NS%surface));
-  color: var(--%NS%accent-text);
-}
-
-.pill[data-kind=layout][_ngcontent-%COMP%], 
-.pill[data-mode=redirect][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-slate);
-  color: var(--%NS%hue-slate-text);
-}
-
-.pill[data-kind=markdown][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-sky);
-  color: var(--%NS%hue-sky-text);
-}
-
-.pill[data-kind=load][_ngcontent-%COMP%], 
-.pill[data-call=load][_ngcontent-%COMP%], 
-.pill[data-call=fn][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-teal);
-  color: var(--%NS%hue-teal-text);
-}
-
-.pill[data-mode=ssr][_ngcontent-%COMP%], 
-.pill[data-call=page][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-blue);
-  color: var(--%NS%hue-blue-text);
-}
-
-.pill[data-mode=ssg][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-green);
-  color: var(--%NS%hue-green-text);
-}
-
-.pill[data-mode=client][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-yellow);
-  color: var(--%NS%hue-yellow-text);
-}
-
-.pill[data-mode=cached][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-purple);
-  color: var(--%NS%hue-purple-text);
-}
-
-.pill[data-call=api][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-orange);
-  color: var(--%NS%hue-orange-text);
-}
-
-.pill[data-call=action][_ngcontent-%COMP%] {
-  border-color: var(--%NS%hue-pink);
-  color: var(--%NS%hue-pink-text);
-}
-
-[data-tone=good].pill[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-[data-tone=warn].pill[_ngcontent-%COMP%], 
-[data-tone=warn].chip[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-[data-tone=bad].pill[_ngcontent-%COMP%], 
-[data-tone=bad].chip[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-[data-tone=info].pill[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
-  color: var(--%NS%hue-info-text);
-}
-
-.status[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border-strong);
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.status[data-status=good][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.status[data-status=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.status[data-status=bad][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.method[_ngcontent-%COMP%] {
-  min-width: 52px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 6px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-weight: 600;
-  text-align: center;
-}
-
-.method[data-method=GET][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%hue-sky) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%hue-sky) 12%, transparent);
-  color: var(--%NS%hue-sky-text);
-}
-
-.method[data-method=POST][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.method[data-method=PUT][_ngcontent-%COMP%], 
-.method[data-method=PATCH][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.method[data-method=DELETE][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.request[_ngcontent-%COMP%] {
-  min-width: 260px;
-}
-
-.request[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-details[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-summary[_ngcontent-%COMP%] {
-  width: fit-content;
-  border-radius: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  cursor: pointer;
-  transition: color 160ms var(--%NS%ease);
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.code[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  padding: 10px 12px;
-  max-height: 220px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%mono);
-  font-size: 12.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.calls-bar[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.calls-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-}
-
-.calls-message[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12.5px;
-}
-
-.call-filters[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search[_ngcontent-%COMP%]   .field[_ngcontent-%COMP%] {
-  width: 100%;
-  padding-left: 34px;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-.call-filters[_ngcontent-%COMP%]   .check[_ngcontent-%COMP%] {
-  flex: none;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.total[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-.segmented[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  justify-self: start;
-  margin: 0;
-  padding: 3px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 10px;
-  background: var(--%NS%bg);
-}
-
-.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  padding: 5px 12px;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--%NS%text-2);
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
-}
-
-.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-}
-
-.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.segmented[_ngcontent-%COMP%]   label.on[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
-}
-
-.segmented[_ngcontent-%COMP%]   label.on[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-h2[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 8px 0 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.card[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: var(--%NS%shadow);
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.card[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--%NS%text-2);
-  cursor: pointer;
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.response[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  padding: 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-}
-
-.response[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 10px 16px;
-  margin: 0;
-}
-
-.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  padding-top: 3px;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.findings[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.findings[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
-  position: relative;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: inset 3px 0 0 var(--%NS%hue-info), var(--%NS%shadow);
-  transition: border-color 180ms var(--%NS%ease);
-}
-
-.findings[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.findings[_ngcontent-%COMP%]    > li[data-tone=bad][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%danger), var(--%NS%shadow);
-}
-
-.findings[_ngcontent-%COMP%]    > li[data-tone=warn][_ngcontent-%COMP%] {
-  box-shadow: inset 3px 0 0 var(--%NS%warn), var(--%NS%shadow);
-}
-
-.findings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  line-height: 1.55;
-}
-
-.findings[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]    > p[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.finding-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.finding-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.where[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 12px 0 0;
-  padding: 10px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  list-style: none;
-}
-
-.where[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-}
-
-.where[_ngcontent-%COMP%]   .detail[_ngcontent-%COMP%] {
-  flex-basis: 100%;
-  margin: 0;
-  color: var(--%NS%text-2);
-  overflow-wrap: anywhere;
-}
-
-.fix[_ngcontent-%COMP%] {
-  margin-top: 12px;
-  color: var(--%NS%text);
-  line-height: 1.55;
-}
-
-.fix[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  display: block;
-  margin-bottom: 4px;
-  color: var(--%NS%ok);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.rule[_ngcontent-%COMP%] {
-  display: block;
-  margin-top: 12px;
-  color: var(--%NS%text-3);
-  font-size: 12px;
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  justify-items: center;
-  padding: 40px 24px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  text-align: center;
-  animation: enter 0.35s var(--%NS%ease) both;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-  max-width: 520px;
-  line-height: 1.6;
-}
-
-.empty-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 600;
-}`]})},Hae=(e,t)=>t.key,Uae=(e,t)=>t.call.id;function Wae(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,14),H(`click`,function(){let t=S(e).$implicit;return C(W(3).open.emit(t.call.id))}),F(2,`span`,15)(3,`span`,16),K(4),I(),F(5,`span`,17),K(6),I()(),F(7,`span`,18),L(8,`span`),I(),F(9,`span`,19)(10,`span`),K(11),I(),K(12),I()()()}if(e&2){let e=t.$implicit,n=W(3);D(),G(`selected`,n.selectedId()===e.call.id),k(`data-call-id`,e.call.id)(`aria-pressed`,n.selectedId()===e.call.id)(`aria-label`,e.label)(`aria-controls`,n.selectedId()?`call-preview`:null),D(3),q(e.call.method),D(),P(`title`,e.call.url),D(),q(n.pathOf(e.call.url)),D(2),n_(`bar `+e.tone),t_(`left`,e.left,`%`)(`width`,e.width,`%`),D(2),n_(`status status-`+e.tone),D(),q(e.status),D(),Y(` · +`,e.offsetMs,` ms · `,e.call.durationMs,` ms`)}}function Gae(e,t){if(e&1&&(F(0,`section`,7)(1,`h3`,8)(2,`span`,9),K(3),I(),F(4,`span`,10),K(5,`, `),I(),F(6,`span`,11),K(7),I(),F(8,`span`,10),K(9,`, `),I(),F(10,`span`,12),K(11),I()(),F(12,`ul`,13),M(13,Wae,13,20,`li`,null,Uae),I()()),e&2){let e=t.$implicit;k(`aria-labelledby`,`wf-`+e.key),D(),P(`id`,`wf-`+e.key),D(2),J(`Navigation `,e.index),D(3),P(`title`,e.url),D(),q(e.url||`Unknown page`),D(4),D_(``,e.rows.length,` `,e.rows.length===1?`call`:`calls`,`, `,e.spanMs,` ms`),D(2),N(e.rows)}}function Kae(e,t){if(e&1&&(F(0,`div`,1)(1,`span`),L(2,`i`,2),K(3,`Network`),I(),F(4,`span`),L(5,`i`,3),K(6,`Transfer cache`),I(),F(7,`span`),L(8,`i`,4),K(9,`Failed`),I(),F(10,`span`),L(11,`i`,5),K(12,`Cancelled`),I()(),F(13,`div`,6),M(14,Gae,15,8,`section`,7,Hae),I()),e&2){let e=W();D(14),N(e.groups())}}function qae(e,t){e&1&&(F(0,`div`,0)(1,`p`),K(2,`No client calls to show.`),I(),F(3,`p`,20),K(4,` The waterfall shows calls made in the browser. Clear the filters or pick All sides, then use the page. `),I()())}function h8(e){try{let t=new URL(e,`http://x`);return t.pathname+t.search}catch{return e}}function g8(e){return e.cancelled?`cancelled`:e.status?String(e.status):`ERR`}function Jae(e){return e.cancelled?`neutral`:!e.status||e.status>=400||e.error?`bad`:e.cacheHit?`cache`:`ok`}function Yae(e){let t=[],n=e.filter(e=>e.side===`client`).sort((e,t)=>e.at-t.at),r;for(let e of n){let n=e.pageUrl??``;(!r||r.url!==n)&&(r={key:`${e.at}:${e.id}`,index:t.length+1,url:n,startedAt:e.at,spanMs:0,rows:[]},t.push(r));let i=e.at-r.startedAt;r.spanMs=Math.max(r.spanMs,i+Math.max(e.durationMs,0)),r.rows.push({call:e,offsetMs:i,left:0,width:0,tone:Jae(e),status:g8(e)+(e.cacheHit&&!e.cancelled?` cache`:``),label:``})}for(let e of t){let t=Math.max(e.spanMs,1);for(let n of e.rows)n.left=n.offsetMs/t*100,n.width=Math.max(Math.max(n.call.durationMs,0)/t*100,.8),n.label=`${n.call.method} ${h8(n.call.url)}, starts at +${n.offsetMs} ms, takes ${n.call.durationMs} ms, status ${g8(n.call)}`+(n.call.cacheHit?`, transfer cache`:``)}return t.reverse()}var Xae=class e{calls=$([]);selectedId=$(null);open=cv();groups=X(()=>Yae(this.calls()));pathOf=h8;static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-network-waterfall`]],inputs:{calls:[1,`calls`],selectedId:[1,`selectedId`]},outputs:{open:`open`},decls:2,vars:1,consts:[[`role`,`status`,1,`empty`],[`aria-hidden`,`true`,1,`legend`],[1,`swatch`,`ok`],[1,`swatch`,`cache`],[1,`swatch`,`bad`],[1,`swatch`,`neutral`],[`appRovingList`,`button.wf-row`,1,`groups`],[1,`group`],[1,`group-head`,3,`id`],[1,`group-title`],[1,`sr-only`],[1,`group-url`,3,`title`],[1,`group-meta`],[1,`rows`],[`type`,`button`,1,`wf-row`,3,`click`],[1,`name`],[1,`method`],[1,`path`,3,`title`],[`aria-hidden`,`true`,1,`track`],[`aria-hidden`,`true`,1,`time`],[1,`muted`,`small`]],template:function(e,t){e&1&&A(0,Kae,16,0)(1,qae,5,0,`div`,0),e&2&&j(+!t.groups().length)},dependencies:[NV],styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.legend[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  margin: 0 0 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.legend[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.swatch[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 12px;
-  height: 8px;
-  border-radius: 2px;
-}
-
-.groups[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  max-height: 480px;
-  overflow: auto;
-}
-
-.group-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 2px 8px;
-  margin: 0 0 4px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.group-url[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1 120px;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-weight: 400;
-}
-
-.group-meta[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 400;
-}
-
-.rows[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.wf-row[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 2fr) minmax(80px, 3fr) auto;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  height: auto;
-  min-height: 28px;
-  padding: 4px 8px;
-  border: 1px solid transparent;
-  border-radius: var(--%NS%radius-sm);
-  background: transparent;
-  color: var(--%NS%text);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background 150ms var(--%NS%ease);
-}
-
-.wf-row[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.wf-row.selected[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-}
-
-.wf-row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.name[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  min-width: 0;
-}
-
-.method[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.path[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.track[_ngcontent-%COMP%] {
-  position: relative;
-  height: 10px;
-  border-radius: 2px;
-  background: var(--%NS%surface-3);
-}
-
-.bar[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border-radius: 2px;
-}
-
-.ok[_ngcontent-%COMP%] {
-  background: var(--%NS%accent);
-}
-
-.cache[_ngcontent-%COMP%] {
-  background: var(--%NS%ok);
-}
-
-.bad[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-}
-
-.neutral[_ngcontent-%COMP%] {
-  background: var(--%NS%text-3);
-}
-
-.status[_ngcontent-%COMP%] {
-  padding: 0 4px;
-  border: 1px solid transparent;
-  border-radius: var(--%NS%radius-sm);
-  background: none;
-  color: var(--%NS%text-2);
-}
-
-.status-bad[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.status-cache[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.time[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 4px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-@media (max-width: 480px) {
-  .wf-row[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-  .track[_ngcontent-%COMP%] {
-    grid-column: 1/-1;
-    grid-row: 2;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .wf-row[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})};function Zae(e,t){if(e&1&&(R(0,`span`,0),K(1),z()),e&2){let e=W();V(`title`,e.title()),D(),J(`likely `,e.label())}}var Qae={httpResource:`httpResource()`,resource:`resource()`,defer:`@defer`},$ae=class e{origin=$(void 0);label=X(()=>{let e=this.origin();return e?Qae[e]:``});title=X(()=>`Started by ${this.label()}, guessed from the call stack. Development builds only; it can miss.`);static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-call-origin`]],inputs:{origin:[1,`origin`]},decls:1,vars:1,consts:[[1,`tag`,3,`title`]],template:function(e,t){e&1&&A(0,Zae,2,2,`span`,0),e&2&&j(t.origin()?0:-1)},styles:[`[_nghost-%COMP%] {
-  display: contents;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 8px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}`]})},_8={kind:`render-error`,pattern:``,message:``,key:``,value:``},eoe={"render-error":`Render error`,"client-render":`Client render`,"state-edit":`TransferState edit`},toe={server:`Server`,prerender:`Prerender`,client:`Client`,redirect:`Redirect`,"not-rendered":`Not rendered`,unknown:`Unknown`},v8={pattern:``,method:``,target:`both`,status:``,delayMs:``,body:``,chance:``};function y8(){return`r${Date.now().toString(36)}${Math.random().toString(36).slice(2,6)}`}function b8(e){if(!e.trim())return;let t=Number(e);return Number.isInteger(t)&&t>=1&&t<=99?t:null}function x8(e){try{let t=new URL(e,`http://x`);return t.pathname+t.search}catch{return e}}var noe=/\[redacted\]|%5Bredacted%5D/gi;function roe(e){return(/^([a-z][a-z\d+.-]*:|\/\/)/i.test(e)?x8(e):e).replace(noe,`*`)}function ioe(e){let t=UE(e);if(t!==null)return t;try{return JSON.parse(e),e.trim()}catch{return null}}var S8=[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`];function aoe(e){try{return new URL(e,`http://x`).pathname}catch{return``}}function ooe(e){let t=aoe(e);return t===`/`?``:t}var soe=/\[redacted\]|%5Bredacted%5D/i,coe=1e5,loe=[{value:``,label:`None`},...WC.map(([e,t])=>({value:String(e),label:`${e} ${t}`}))];function C8(e){return e===void 0?`neutral`:e===0||e>=400?`bad`:e>=300?`redirect`:e>=200?`ok`:`neutral`}function w8(e){return e.cancelled?`cancelled`:e.status?String(e.status):`ERR`}function T8(e){return e.cancelled?`neutral`:C8(e.status)}function uoe(e){return!!e.cancelled||!e.status||e.status>=400}function E8(e){if(e.preview!==void 0)return UE(e.preview)??e.preview}function D8(e){return e.target!==`client`&&e.status!==void 0&&e.status>0&&e.status<400}function doe(e){return e===`both`?`SSR + client`:e===`server`?`SSR only`:`Client only`}function O8(e){return eoe[e]??e}function foe(e){return toe[e]??`Unknown`}function k8(e){return UC[e]??``}function poe(e){return e===void 0?`n/a`:`${e} ms`}function moe(e){return e.guards?.passed===!1?e.outcome===`redirected`?`redirected`:`rejected`:``}function hoe(e){if(e.compressedBeforeTrace)return e.headers[`content-encoding`]??`unknown encoding`}function goe(e){return e.source===`hydration`?`hydration annotations`:e.fn?`Analog server function ${e.fn.name??e.fn.id}`:e.source===`analog`?`Analog`:null}var A8=class e{rpcSource=T(null);rpc=X(()=>this.rpcSource());canWrite=X(()=>OT(this.rpc(),`http`));writesOff=Mw(`http`);loading=T(!1);failed=T(!1);serverCalls=T([]);pages=T([]);payloads=T({});serverDropped=T(0);requests=T([]);rules=T([]);overrides=T([]);message=T(``);refetching=T(!1);hostPageId=tT();selectedPageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId)?.pageId??e[0]?.pageId??null});selectedCallId=T(null);unsubscribe=[];destroyed=!1;injector=x(bs);host=x(Ml);selected=X(()=>this.pages().find(e=>e.pageId===this.selectedPageId())??null);pageRequestId=X(()=>this.selected()?.ssrRequestId??null);selectedRequestId=Q(()=>this.pageRequestId());selectedPayload=X(()=>{let e=this.selectedPageId();return e?this.payloads()[e]??null:null});maxCalls=X(()=>TT(this.rpc()).limits.httpCalls);droppedCalls=X(()=>(this.selected()?.dropped??0)+this.serverDropped());pageServerCalls=X(()=>{let e=this.selected()?.initialUrl;return e?this.serverCalls().filter(t=>!t.pageUrl||t.pageUrl===e):this.serverCalls()});renderServerCalls=X(()=>{let e=this.pageRequestId();return e?this.serverCalls().filter(t=>t.requestId===e):[]});liveTimeline=X(()=>[...this.pageServerCalls(),...this.selected()?.calls??[]].sort((e,t)=>t.at-e.at));callFeed=new xR({name:`network`,source:this.liveTimeline,key:e=>`${e.side}:${e.id}`,scope:this.selectedPageId});timeline=X(()=>[...this.callFeed.items()]);callSort=T(null);callQuery=T(``);timelineView=T(`table`);waterfallCalls=X(()=>this.visibleCalls().filter(e=>e.side===`client`));sideFilter=T(`all`);failedOnly=T(!1);sideOptions=[{value:`all`,label:`All sides`},{value:`server`,label:`SSR`},{value:`client`,label:`Client`}];visibleCalls=X(()=>{let e=this.callQuery().trim().toLowerCase(),t=this.sideFilter()??`all`,n=this.failedOnly();return lV(this.timeline().filter(r=>(t===`all`||r.side===t)&&(!n||uoe(r))&&(!e||`${r.method} ${r.url}`.toLowerCase().includes(e)||`${r.method} ${x8(r.url)}`.toLowerCase().includes(e))),this.callSort(),{method:e=>e.method,url:e=>e.url,status:e=>e.cancelled||!e.status?void 0:e.status,time:e=>e.durationMs})});countText=X(()=>{let e=this.timeline().length;if(this.timelineView()!==`waterfall`)return`${this.visibleCalls().length} of ${e}`;let t=this.waterfallCalls().length;return`${t} client ${t===1?`call`:`calls`} of ${e}`});filterStatus=X(()=>{this.callQuery(),this.sideFilter(),this.failedOnly(),this.timelineView(),this.filterFlip=!this.filterFlip;let e=Z(()=>this.countText());return this.filterFlip?`${e} `:e});filterFlip=!0;selectedCall=X(()=>this.visibleCalls().find(e=>e.id===this.selectedCallId())??null);pageSsrRequest=X(()=>this.requests().find(e=>e.id===this.pageRequestId())??null);selectedRequest=X(()=>this.requests().find(e=>e.id===this.selectedRequestId())??null);requestCalls=X(()=>{let e=this.selectedRequest()?.id;return e?this.serverCalls().filter(t=>t.requestId===e):[]});requestPage=X(()=>{let e=this.selectedRequest()?.id;return e?this.pages().find(t=>t.ssrRequestId===e)??null:null});refetched=X(()=>{let e=this.selectedRequest(),t=this.requestPage();if(!e||!t)return[];let n=new Set(this.requestCalls().filter(e=>e.status).map(e=>`${e.method} ${x8(e.url)}`));return t.calls.filter(t=>t.side===`client`&&!t.nativeFetch&&!t.cacheHit&&!t.mocked&&t.at>=e.at&&n.has(`${t.method} ${x8(t.url)}`))});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url})));connect(e){this.rpcSource=e}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=e.scope(`pangular`).rpc,[n,r]=await Promise.all([t.sharedState(`http`),t.sharedState(`http-payloads`)]);if(this.destroyed)return;let i=e=>{let t=e;this.serverCalls.set(t?.serverCalls??[]),this.serverDropped.set(t?.serverDropped??0),this.requests.set([...t?.requests??[]].reverse()),this.pages.set(t?.pages??[]),this.rules.set(t?.rules??[]),this.overrides.set(t?.ssrOverrides??[])},a=e=>this.payloads.set(e?.pages??{});i(n.value()),a(r.value()),this.stopListening(),this.unsubscribe=[n.on(`updated`,i),r.on(`updated`,a)]}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}ngOnDestroy(){this.destroyed=!0,this.stopListening()}stopListening(){for(let e of this.unsubscribe.splice(0))e()}refetchReason(e){let t=`${e.method} ${x8(e.url)}`,n=this.requestCalls().filter(e=>`${e.method} ${x8(e.url)}`===t),r=n[0];return r?.cacheSkip&&n.every(e=>e.cacheSkip===r.cacheSkip)?k8(r.cacheSkip):``}rulePatternOf(e){return e.rulePattern?e.rulePattern:e.ruleId?this.rules().find(t=>t.id===e.ruleId)?.pattern??null:null}clearCallFilters(){this.callQuery.set(``),this.sideFilter.set(`all`),this.failedOnly.set(!1),this.query(`#timeline-search`)?.focus()}openCall(e){this.selectedCallId.set(e),this.afterRender(()=>this.query(`#preview-heading`)?.focus())}closePreview(){let e=this.selectedCallId();this.selectedCallId.set(null),e&&[...this.host.nativeElement.querySelectorAll(`button[data-call-id]`)].find(t=>t.dataset.callId===e)?.focus()}async copyPreview(e){let t=E8(e);t&&await this.copy(t)}async copyKey(e){await this.copy(e)}async copy(e){try{await navigator.clipboard.writeText(e),this.message.set(`Copied.`)}catch{this.message.set(`The clipboard is not available here.`)}}async clearCalls(){try{await oT(this.rpc(),`clear-http-calls`),this.callFeed.resume(),this.selectedCallId.set(null),this.message.set(`Timeline cleared.`)}catch{this.message.set(`Could not clear the timeline.`)}}async refetchPayload(e){if(!this.refetching()){this.refetching.set(!0);try{let t=await oT(this.rpc(),`request-http-payload-refetch`,{pageId:e});if(!t)this.announce(`Could not reach the devtools server.`);else if(t.error)this.announce(t.error);else if(!t.found)this.announce(`The server answered ${t.status} without a TransferState payload.`);else{let e=t.entries??0;this.announce(`Refetched: ${e} entr${e===1?`y`:`ies`}.`)}}catch{this.announce(`Could not refetch the payload.`)}finally{this.refetching.set(!1)}}}announce(e){if(this.message()!==e){this.message.set(e);return}this.message.set(``),this.afterRender(()=>{this.message()===``&&this.message.set(e)})}query(e){return this.host.nativeElement.querySelector(e)}focusAfterRemove(e,t,n){this.afterRender(()=>{let r=this.host.nativeElement,i=r.querySelectorAll(e);(i[Math.min(t,i.length-1)]??r.querySelector(n))?.focus()})}afterRender(e){cd(e,{injector:this.injector})}static ɵfac=function(t){return new(t||e)};static ɵprov=bi({token:e,factory:e.ɵfac})},_oe=(e,t)=>t.id,voe=(e,t)=>t.name;function yoe(e,t){if(e&1&&(R(0,`div`,5)(1,`dt`),K(2),z(),R(3,`dd`),K(4),z()()),e&2){let e=t.$implicit;D(2),q(e.name),D(),G(`masked`,e.masked),D(),q(e.value)}}function boe(e,t){if(e&1&&(R(0,`dl`),M(1,yoe,5,4,`div`,5,voe),z()),e&2){let e=W().$implicit;D(),N(e.rows)}}function xoe(e,t){if(e&1&&(R(0,`p`,4),K(1),z()),e&2){let e=W().$implicit;D(),q(e.none)}}function Soe(e,t){if(e&1&&(R(0,`section`,1)(1,`h4`,3),K(2),z(),A(3,boe,3,0,`dl`)(4,xoe,2,1,`p`,4),z()),e&2){let e=t.$implicit;k(`aria-labelledby`,e.id),D(),V(`id`,e.id),D(),Y(``,e.title,` (`,e.rows.length,`)`),D(),j(e.rows.length?3:4)}}var Coe=class e{callId=$(``);request=$(void 0);response=$(void 0);sides=X(()=>[{id:`req-headers-${this.callId()}`,title:`Request headers`,rows:j8(this.request()),none:`None recorded.`},{id:`res-headers-${this.callId()}`,title:`Response headers`,rows:j8(this.response()),none:`None recorded. A cross-origin response shows only the headers CORS exposes.`}]);static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-http-headers`]],inputs:{callId:[1,`callId`],request:[1,`request`],response:[1,`response`]},decls:8,vars:0,consts:[[1,`headers`],[1,`side`],[1,`note`],[3,`id`],[1,`none`],[1,`row`]],template:function(e,t){e&1&&(R(0,`div`,0),M(1,Soe,5,5,`section`,1,_oe),z(),R(3,`p`,2),K(4,` Request headers are the ones the call had when it reached `),R(5,`code`),K(6,`withPangular()`),z(),K(7,`, before later interceptors added theirs. Credentials, cookies and secret values are masked. `),z()),e&2&&(D(),N(t.sides()))},styles:[`[_nghost-%COMP%] {
-  display: block;
-  margin-top: 12px;
-}
-
-.headers[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-@media (max-width: 640px) {
-  .headers[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-h4[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 6px;
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  margin: 0;
-  padding: 6px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  font: 12px/1.5 var(--%NS%font-mono);
-}
-
-.row[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
-  gap: 8px;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  overflow-wrap: anywhere;
-}
-
-dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-dd.masked[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-style: italic;
-}
-
-.none[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.note[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}`]})};function j8(e){return Object.entries(e??{}).sort(([e],[t])=>e.localeCompare(t)).map(([e,t])=>({name:e,value:t,masked:t.includes(`[redacted]`)}))}function woe(e){let t=/^[a-z][a-z\d+.-]*:\/\/[^/?#]*/i.exec(e);if(t)return t[0].length;let n=/^\/\/[^/?#]*/.exec(e);return n?n[0].length:0}function Toe(e,t){let n=t.startsWith(`^`),r=(n?t.slice(1):t).split(`*`),i=n?woe(e):0;for(let[t,a]of r.entries()){if(!a)continue;let r=e.indexOf(a,i);if(r<0||n&&t===0&&r!==i)return!1;i=r+a.length}return!0}function Eoe(e,t){let n=e.pattern.trim();return!!n&&(e.target===`both`||e.target===t.side)&&(!e.method||e.method.toUpperCase()===t.method.toUpperCase())&&Toe(t.url,n)}function Doe(e,t){return t.pattern.trim()?e.filter(e=>Eoe(t,e)):[]}var M8=[{id:`offline`,label:`Offline`,description:`Fails every browser request with a network error (status 0).`,rules:[{pattern:`*`,target:`client`,status:0}]},{id:`slow-3g`,label:`Slow 3G`,description:`Holds every browser request back 2000 ms before it is sent.`,rules:[{pattern:`*`,target:`client`,delayMs:2e3}]},{id:`flaky`,label:`Flaky`,description:`Fails 30% of browser requests with 503 Service Unavailable.`,rules:[{pattern:`*`,target:`client`,status:503,chance:30}]}];function Ooe(e,t){let n=M8.find(t=>t.id===e);return n?n.rules.map(e=>({...e,id:t(),enabled:!0})):[]}var N8=`page_1`,P8=2e3;function F8(e){return Object.entries(e??{}).map(([e,t])=>({name:e,value:t}))}function I8(e,t){if(!t||/^[a-z][a-z\d+.-]*:/i.test(e))return e;try{return new URL(e,t).href}catch{return e}}function L8(e){try{return[...new URL(e,`http://x`).searchParams].map(([e,t])=>({name:e,value:t}))}catch{return[]}}function R8(e){let t=new Date(Number.isFinite(e)?e:0);return Number.isNaN(t.getTime())?new Date(0).toISOString():t.toISOString()}function koe(e){let t=[];return e.cacheHit&&t.push(`transfer cache`),e.mocked&&t.push(`mocked by a fault rule`),e.faulted&&t.push(`failed by a fault rule`),e.delayMs&&t.push(`delayed ${e.delayMs} ms by a fault rule`),e.cancelled&&t.push(`cancelled`),e.requestId&&t.push(`SSR request ${e.requestId}`),e.origin&&t.push(`likely started by ${e.origin===`defer`?`@defer`:`${e.origin}()`}`),t}function Aoe(e,t){let n=I8(e.url,e.side===`client`?t:void 0),r=e.responseHeaders?.[`content-type`]??`x-unknown`,i=koe(e),a=e.error&&!e.preview?void 0:e.preview,o=Math.max(0,e.durationMs);return{pageref:N8,startedDateTime:R8(e.at),time:o,request:{method:e.method,url:n,httpVersion:`HTTP/1.1`,cookies:[],headers:F8(e.requestHeaders),queryString:L8(n),headersSize:-1,bodySize:-1},response:{status:e.status,statusText:e.cancelled?`cancelled`:e.error??``,httpVersion:`HTTP/1.1`,cookies:[],headers:F8(e.responseHeaders),content:{size:a?.length??0,mimeType:r,...a===void 0?{}:{text:a},...a!==void 0&&a.length>=P8?{comment:`Clipped at ${P8} characters.`}:{}},redirectURL:e.redirectedTo??``,headersSize:-1,bodySize:-1},cache:{},timings:{send:0,wait:o,receive:0},...i.length?{comment:i.join(`, `)}:{},_side:e.side,...i.length?{_notes:i}:{}}}function joe(e,t){let n=I8(e.url,t),r=Math.max(0,e.renderMs);return{pageref:N8,startedDateTime:R8(e.at),time:Math.max(0,e.durationMs),request:{method:e.method,url:n,httpVersion:`HTTP/1.1`,cookies:[],headers:[],queryString:L8(n),headersSize:-1,bodySize:-1},response:{status:e.status,statusText:``,httpVersion:`HTTP/1.1`,cookies:[],headers:F8(e.headers),content:{size:0,mimeType:e.headers[`content-type`]??`text/html`},redirectURL:e.headers.location??``,headersSize:-1,bodySize:-1},cache:{},timings:{send:0,wait:r,receive:Math.max(0,e.durationMs-r)},comment:`SSR request ${e.id}: the server render that served the page`,_side:`document`}}function Moe(e){let t=[...e.ssrRequest?[joe(e.ssrRequest,e.origin)]:[],...e.calls.map(t=>Aoe(t,e.origin))].sort((e,t)=>e.startedDateTime.localeCompare(t.startedDateTime)),n=t[0]?.startedDateTime??R8(Date.now());return{log:{version:`1.2`,creator:e.creator??{name:`Pangular Inspector`,version:`unknown`},pages:[{startedDateTime:n,id:N8,title:e.title??``,pageTimings:{}}],entries:t,comment:`Exported by Pangular Inspector. Secrets are masked as [redacted]. Request bodies are not recorded and response bodies are clipped previews.`}}}var Noe=new Set([`POST`,`PUT`,`PATCH`,`DELETE`]);function z8(e,t,n){let r=[],i=/\[redacted\]|%5Bredacted%5D/i;return(i.test(t)||Object.values(e.requestHeaders??{}).some(e=>i.test(e)))&&r.push(`${n} Masked values ([redacted]) must be filled in before it runs.`),Noe.has(e.method.toUpperCase())&&r.push(`${n} The request body was not recorded.`),r}function Poe(e,t){let n=I8(e.url,e.side===`client`?t:void 0),r=e.method.toUpperCase(),i=e.requestHeaders??{},a={...r===`GET`?{}:{method:r},...Object.keys(i).length?{headers:i}:{}},o=Object.keys(a).length?`${JSON.stringify(n)}, ${JSON.stringify(a,null,2)}`:JSON.stringify(n);return[...z8(e,n,`//`),`await fetch(${o});`].join(`
-`)}function B8(e){return`'${e.replace(/'/g,`'\\''`)}'`}function Foe(e,t){let n=I8(e.url,e.side===`client`?t:void 0),r=e.method.toUpperCase(),i=[`curl ${B8(n)}`];r===`HEAD`?i.push(`--head`):r!==`GET`&&i.push(`-X ${B8(r)}`);for(let[t,n]of Object.entries(e.requestHeaders??{}))i.push(`-H ${B8(`${t}: ${n}`)}`);return[...z8(e,n,`#`),i.join(` \\
-  `)].join(`
-`)}function Ioe(e,t={}){let n=t.budget??102400,r=e.entries.reduce((e,t)=>e+Math.max(t.size,0),0),i=[...e.entries].filter(e=>e.size>0).sort((e,t)=>t.size-e.size).slice(0,t.top??5).map(e=>({key:e.key,label:e.http?.url??e.key,size:e.size,share:r?Math.round(e.size/r*1e3)/10:0})),a=new Map;for(let t of e.entries){let e=t.http?.url;e&&a.set(e,[...a.get(e)??[],t])}let o=[...a].filter(([,e])=>e.length>1).map(([e,t])=>({url:e,keys:t.map(e=>e.key),size:t.reduce((e,t)=>e+t.size,0)})).sort((e,t)=>t.size-e.size);return{size:e.size,budget:n,overBudget:e.size>n,largest:i,sameUrl:o}}function Loe(e){return e<1024?`${e} B`:e<1048576?`${Number((e/1024).toFixed(1))} KB`:`${Number((e/1024/1024).toFixed(1))} MB`}var V8={duplicateWindowMs:2e3,chainGapMs:50,minChain:3};function H8(e){try{let t=new URL(e,`http://x`);return t.pathname+t.search}catch{return e}}function Roe(e){return e.filter(e=>e.side===`client`&&!e.cacheHit&&!e.mocked&&!e.cancelled).sort((e,t)=>e.at-t.at)}function U8(e){return`${e.method} ${H8(e.url)}`}function zoe(e,t){let n=new Map;for(let t of e){if(t.method.toUpperCase()!==`GET`)continue;let e=`${t.pageUrl??``} ${t.method.toUpperCase()} ${t.url}`;n.set(e,[...n.get(e)??[],t])}let r=[];for(let e of n.values()){let n=[],i=()=>{if(n.length>1){let e=n[n.length-1].at-n[0].at;r.push({kind:`duplicate`,message:`${U8(n[0])} ran ${n.length} times within ${e} ms.`,hint:`Share one request (a service with shareReplay, one resource, or a signal store) instead of fetching it from each place that needs it.`,callIds:n.map(e=>e.id),wastedMs:n.slice(1).reduce((e,t)=>e+Math.max(t.durationMs,0),0)})}};for(let r of e)n.length&&r.at-n[n.length-1].at>t&&(i(),n=[]),n.push(r);i()}return r}function Boe(e,t,n){let r=[];for(let n of e){let e=r.find(e=>{let r=e[e.length-1],i=r.at+Math.max(r.durationMs,0);return(r.pageUrl??``)===(n.pageUrl??``)&&n.at>=i&&n.at-i<=t});e?e.push(n):r.push([n])}return r.filter(e=>e.length>=n).map(e=>{let t=e[0],n=e[e.length-1],r=n.at+Math.max(n.durationMs,0)-t.at,i=Math.max(...e.map(e=>Math.max(e.durationMs,0)));return{kind:`waterfall`,message:`${e.length} calls ran one after another, ${r} ms in all: ${e.map(U8).join(` → `)}.`,hint:`If a call does not need the response before it, start them together (forkJoin, Promise.all, or separate resources). Run in parallel they would take about as long as the slowest one.`,callIds:e.map(e=>e.id),wastedMs:Math.max(0,r-i)}})}function Voe(e,t){let n=new Map;for(let e of t)e.side!==`server`||e.status===0||e.status>=400||n.set(`${e.method.toUpperCase()} ${H8(e.url)}`,e);let r=new Set,i=[];for(let t of e){let e=`${t.method.toUpperCase()} ${H8(t.url)}`,a=n.get(e);a&&!r.has(e)&&(r.add(e),i.push({kind:`refetch`,message:`${U8(t)} ran on the server and again in the browser.`,hint:`The transfer cache did not answer it. Check that the browser request matches the server one (URL, params, headers) and that Angular may cache it; explain-ssr-request says why it was not stored.`,callIds:[a.id,t.id],wastedMs:Math.max(t.durationMs,0)}))}return i}function Hoe(e,t={}){let n=Roe(e);return[...zoe(n,t.duplicateWindowMs??V8.duplicateWindowMs),...Boe(n,t.chainGapMs??V8.chainGapMs,t.minChain??V8.minChain),...t.serverCalls?Voe(n,t.serverCalls):[]]}function Uoe(e,t){if(e&1){let e=B();R(0,`button`,0),U(`click`,function(){return S(e),C(W().copy(`fetch`))}),K(1,` Copy as fetch `),z(),R(2,`button`,0),U(`click`,function(){return S(e),C(W().copy(`curl`))}),K(3,` Copy as cURL `),z()}if(e&2){let e=t;k(`aria-label`,`Copy `+e.method+` `+e.url+` as fetch`),D(2),k(`aria-label`,`Copy `+e.method+` `+e.url+` as cURL`)}}var Woe=class e{call=$(null);done=cv();document=x(xs);async copy(e){let t=this.call();if(!t)return;let n=this.document.defaultView?.location,r=/^https?:$/.test(n?.protocol??``)?n.origin:void 0,i=e===`fetch`?Poe(t,r):Foe(t,r);try{await this.document.defaultView.navigator.clipboard.writeText(i);let t=i.includes(`[redacted]`)?` Fill in the masked values first.`:``;this.done.emit(`Copied as ${e===`fetch`?`fetch`:`cURL`}.${t}`)}catch{this.done.emit(`The clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-call-copy`]],inputs:{call:[1,`call`]},outputs:{done:`done`},decls:1,vars:1,consts:[[`type`,`button`,3,`click`]],template:function(e,t){if(e&1&&A(0,Uoe,4,2),e&2){let e;j((e=t.call())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
-  display: contents;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid transparent;
-  border-radius: var(--%NS%radius-sm);
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease);
-}
-button[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  button[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},W8=class e{state=x(A8);draft=T({...v8});addingRule=T(!1);ruleSaves=Promise.resolve(!0);draftMocksOnServer=X(()=>{let e=this.draftRule();return!!e&&D8(e)});draftRule=X(()=>{let e=this.draft(),t=e.pattern.trim();if(!t||t.length>500||this.bodyError()||this.state.rules().length>=50)return null;let n=e.body.trim(),r=Math.min(Math.max(Math.round(Number(e.delayMs))||0,0),1e4),i=e.status.trim()?Number(e.status):n?200:void 0;if(i!==void 0&&!GC(i)||i===void 0&&!r)return null;let a=b8(e.chance);return a===null?null:{pattern:t,enabled:!0,target:e.target,...e.method?{method:e.method}:{},...i===void 0?{}:{status:i},...r?{delayMs:r}:{},...n?{body:n}:{},...a===void 0?{}:{chance:a}}});draftHint=X(()=>{let e=this.draft();return this.state.rules().length>=50?`You can add up to 50 rules. Remove one to add another.`:e.pattern.trim()?e.pattern.trim().length>500?`The URL pattern is limited to 500 characters.`:this.bodyError()?``:e.status.trim()&&!GC(Number(e.status))?`Pick a status from the list.`:b8(e.chance)===null?`Chance is a whole percent from 1 to 99.`:this.draftRule()?!e.status.trim()&&e.body.trim()?`With no status, the mock body returns 200.`:``:`Set a status, a delay or a mock body.`:`Enter a URL pattern to add a rule.`});bodyError=X(()=>{let e=this.draft().body.trim();if(!e)return``;if(e.length>1e5)return`The mock body is limited to ${coe} characters.`;try{return JSON.parse(e),``}catch{return`The mock body must be valid JSON.`}});methodOptions=X(()=>{let e=this.draft().method;return[{value:``,label:`Any`},...(e&&!S8.includes(e)?[...S8,e]:S8).map(e=>({value:e,label:e}))]});setDraft(e,t){this.draft.update(n=>({...n,[e]:t}))}patch(e,t){let n=t.target.value;this.draft.update(t=>({...t,[e]:n}))}mockCall(e){let t=e.method.toUpperCase(),n=roe(e.url),r=e.error||!e.preview?null:ioe(e.preview);this.draft.set({...v8,pattern:n,method:t,body:r??``});let i=`${t} ${n}`;this.state.message.set(r?`Filled in a rule for ${i} with the preview as its body. Check it, then add the rule.`:e.preview&&!e.error?`Filled in a rule for ${i}. The preview is not complete JSON, so it is not used as the body.`:`Filled in a rule for ${i}. Set a status, a delay or a body, then add the rule.`),this.state.afterRender(()=>this.state.query(`#rule-pattern`)?.focus())}async addRule(e){e.preventDefault();let t=this.draftRule();if(!t||this.addingRule())return;let n={id:y8(),...t};this.addingRule.set(!0);let r=await this.saveRules(e=>[[...e,n],n],`Rule added.`);this.addingRule.set(!1),r&&(this.draft.set({...v8}),this.state.query(`#rule-pattern`)?.focus())}async addPreset(e){let t=Ooe(e,y8);if(t.length){if(this.state.rules().length+t.length>50){this.state.message.set(`You can add up to 50 rules. Remove one to add the preset.`);return}await this.saveRules(e=>[[...e,...t],t[0]],`Added ${t.length===1?`a rule`:`${t.length} rules`} for every browser request.`)}}toggleRule(e){this.saveRules(t=>{let n=t.find(t=>t.id===e);return n?[t.map(t=>t.id===e?{...t,enabled:!t.enabled}:t),n]:null},`Rule updated.`)}async removeRule(e){let t=-1;await this.saveRules(n=>(t=n.findIndex(t=>t.id===e),t<0?null:[n.filter(t=>t.id!==e),n[t]]),`Rule removed.`)&&this.state.focusAfterRemove(`[data-remove-rule]`,t,`#rule-list-heading`)}saveRules(e,t){let n=this.ruleSaves.then(async()=>{let n=e(this.state.rules());if(!n)return!1;let[r,i]=n;try{let e=await oT(this.state.rpc(),`set-http-rules`,r);return this.state.rules.set(Array.isArray(e)?e:r),this.state.announce(i.target===`client`?t:`${t} Reload the page to apply it to SSR.`),!0}catch{return this.state.message.set(`Could not save the rules.`),!1}});return this.ruleSaves=n,n}static ɵfac=function(t){return new(t||e)};static ɵprov=bi({token:e,factory:e.ɵfac})};function Goe(e,t){if(e&1){let e=B();F(0,`button`,6),H(`click`,function(){S(e);let t=W(),n=I_(0);return C(t.copyPreview(n))}),K(1,` Copy `),I()}if(e&2){W();let e=I_(0);k(`aria-label`,`Copy the response of `+e.method+` `+e.url)}}function Koe(e,t){if(e&1){let e=B();F(0,`button`,16),H(`click`,function(){S(e);let t=W(),n=I_(0);return C(t.mockCall(n))}),K(1,` Mock this request `),I()}if(e&2){let e=W();P(`disabled`,!e.canWrite()),k(`aria-describedby`,e.canWrite()?null:`http-writes-off`)}}function qoe(e,t){e&1&&(F(0,`p`,11),K(1,` Made with `),F(2,`code`),K(3,`fetch()`),I(),K(4,` directly, which skips the HttpClient interceptor, so a fault rule cannot mock it. `),I())}function Joe(e,t){e&1&&(F(0,`p`,12),K(1,` Matched rule `),F(2,`code`),K(3),I()()),e&2&&(D(3),q(t))}var Yoe=class e{call=$.required();state=x(A8);ruleState=x(W8);canWrite=this.state.canWrite;message=this.state.message;callTone=T8;previewText=E8;statusLabel=w8;rulePatternOf(e){return this.state.rulePatternOf(e)}copyPreview(e){this.state.copyPreview(e)}mockCall(e){this.ruleState.mockCall(e)}closePreview(){this.state.closePreview()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`div`,`appResponsePreview`,``]],inputs:{call:[1,`call`]},decls:23,vars:24,consts:[[1,`preview-head`],[`id`,`preview-heading`,`tabindex`,`-1`],[1,`preview-actions`],[`type`,`button`,1,`ghost`],[3,`done`,`call`],[`type`,`button`,`aria-controls`,`rule-form`,1,`ghost`,3,`disabled`],[`type`,`button`,1,`ghost`,3,`click`],[1,`preview-meta`],[1,`method`],[1,`status`],[1,`preview-url`,3,`title`],[1,`muted`,`small`],[1,`preview-rule`],[3,`value`],[`tabindex`,`0`,`role`,`region`,1,`preview-body`],[3,`callId`,`request`,`response`],[`type`,`button`,`aria-controls`,`rule-form`,1,`ghost`,3,`click`,`disabled`]],template:function(e,t){if(e&1&&(P_(0),F(1,`div`,0)(2,`h3`,1),K(3,`Response preview`),I(),F(4,`div`,2),A(5,Goe,2,1,`button`,3),F(6,`app-call-copy`,4),H(`done`,function(e){return t.message.set(e)}),I(),A(7,Koe,2,2,`button`,5),F(8,`button`,6),H(`click`,function(){return t.closePreview()}),K(9,`Close`),I()()(),F(10,`p`,7)(11,`span`,8),K(12),I(),F(13,`span`,9),K(14),I(),F(15,`span`,10),K(16),I()(),A(17,qoe,5,0,`p`,11),A(18,Joe,4,1,`p`,12),L(19,`app-redaction-count`,13),F(20,`pre`,14),K(21),I(),L(22,`app-http-headers`,15)),e&2){let e,n=F_(t.call());D(5),j(!n.error&&n.preview?5:-1),D(),P(`call`,n),D(),j(n.nativeFetch?-1:7),D(5),q(n.method),D(),G(`ok`,t.callTone(n)===`ok`)(`redirect`,t.callTone(n)===`redirect`)(`bad`,t.callTone(n)===`bad`),D(),q(t.statusLabel(n)),D(),P(`title`,n.url),D(),q(n.url),D(),j(n.nativeFetch?17:-1),D(),j((e=t.rulePatternOf(n))?18:-1,e),D(),P(`value`,n),D(),G(`error`,!!n.error&&!n.cancelled),k(`aria-label`,n.error?`Response error`:`Response body`),D(),q(n.error??t.previewText(n)??`(no body)`),D(),P(`callId`,n.id)(`request`,n.requestHeaders)(`response`,n.responseHeaders)}},dependencies:[Woe,Coe,aP],styles:[`h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.method[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-2);
-}
-
-.status.ok[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.status.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.dot[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  vertical-align: middle;
-}
-
-.notes[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 4px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.tag.server[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.fault[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tag.mock[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.rule-ref[_ngcontent-%COMP%] {
-  gap: 4px;
-  max-width: 220px;
-}
-
-.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-}
-
-.tag.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.tag.off-tag[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-pre[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 240px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text-2);
-  font: 12px/1.5 var(--%NS%font-mono);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-pre[_ngcontent-%COMP%]    + pre[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-pre.warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  color: var(--%NS%warn);
-}
-
-pre.error[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  color: var(--%NS%danger);
-}
-
-.preview[_ngcontent-%COMP%] {
-  animation: enter 0.2s var(--%NS%ease) both;
-  margin-top: 16px;
-}
-
-.preview-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px 8px;
-  margin-bottom: 4px;
-}
-
-.preview-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-pre.preview-body[_ngcontent-%COMP%] {
-  max-height: 320px;
-}
-
-.preview-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.preview-meta[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-  margin-bottom: 8px;
-}
-
-.request-call[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-  margin: 0 0 4px;
-}
-
-.request-call[_ngcontent-%COMP%]   .preview-url[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-}
-
-.skip-reason[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.nav-stats[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-}
-
-.preview-rule[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.preview-url[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}`]})},Xoe=[`callsBody`],Zoe=(e,t)=>t.entry.side+t.entry.id;function Qoe(e,t){if(e&1){let e=B();F(0,`app-network-waterfall`,18),H(`open`,function(t){return S(e),C(W().openCall(t))}),I()}if(e&2){let e=W();P(`calls`,e.waterfallCalls())(`selectedId`,e.selectedCall()?.id??null)}}function $oe(e,t){e&1&&(F(0,`p`,19),K(1,` Rows render as you scroll, so the browser's find only sees the ones near view; the search field searches them all. `),I())}function ese(e,t){if(e&1&&(F(0,`tr`,28),L(1,`td`,30),I()),e&2){let e=W(2);D(),t_(`height`,e.callWindow.padTop(),`px`)}}function tse(e,t){e&1&&(F(0,`span`,41),K(1,`fetch()`),I())}function nse(e,t){e&1&&L(0,`app-call-origin`,42),e&2&&(W(),P(`origin`,I_(0).origin))}function rse(e,t){e&1&&(F(0,`span`,32),K(1,`transfer cache`),I())}function ise(e,t){if(e&1&&(F(0,`span`,32),K(1),I()),e&2){W();let e=I_(0);D(),J(`delayed `,e.delayMs,` ms`)}}function ase(e,t){e&1&&(F(0,`span`,43),K(1,`mocked`),I())}function ose(e,t){e&1&&(F(0,`span`,44),K(1,`faulted`),I())}function sse(e,t){if(e&1&&(F(0,`span`,45),K(1,`rule `),F(2,`code`),K(3),I()()),e&2){let e=t;P(`title`,`Matched rule: `+e),D(3),q(e)}}function cse(e,t){if(e&1){let e=B();P_(0),F(1,`tr`,31),H(`click`,function(){S(e);let t=I_(0);return C(W(2).openCall(t.id))}),F(2,`td`)(3,`span`,32),K(4),I()(),F(5,`td`,33),K(6),I(),F(7,`td`,34)(8,`button`,35),K(9),I()(),F(10,`td`,36),K(11),I(),F(12,`td`,37),L(13,`span`,38),K(14),I(),F(15,`td`,39),K(16),I(),F(17,`td`)(18,`div`,40),A(19,tse,2,0,`span`,41),A(20,nse,1,1,`app-call-origin`,42),A(21,rse,2,0,`span`,32),A(22,ise,2,1,`span`,32),A(23,ase,2,0,`span`,43),A(24,ose,2,0,`span`,44),A(25,sse,4,2,`span`,45),I()()()}if(e&2){let e,n=t.$implicit,r=W(2),i=F_(n.entry);D(),G(`selected`,r.selectedCall()?.id===i.id),k(`aria-rowindex`,n.index+2)(`data-vindex`,n.index),D(2),G(`server`,i.side===`server`),D(),q(i.side===`server`?`SSR`:`Client`),D(2),q(i.method),D(2),P(`title`,i.url),k(`data-call-id`,i.id)(`aria-pressed`,r.selectedCall()?.id===i.id)(`aria-controls`,r.selectedCall()?`call-preview`:null),D(),J(` `,i.url,` `),D(),P(`title`,i.pageUrl??``),D(),J(` `,i.pageUrl??``,` `),D(),G(`ok`,r.callTone(i)===`ok`)(`redirect`,r.callTone(i)===`redirect`)(`bad`,r.callTone(i)===`bad`),D(2),J(``,r.statusLabel(i),` `),D(2),J(``,i.durationMs,` ms`),D(3),j(i.nativeFetch?19:-1),D(),j(i.origin?20:-1),D(),j(i.cacheHit?21:-1),D(),j(i.delayMs?22:-1),D(),j(i.mocked?23:-1),D(),j(i.faulted?24:-1),D(),j((e=r.rulePatternOf(i))?25:-1,e)}}function lse(e,t){if(e&1&&(F(0,`tr`,28),L(1,`td`,30),I()),e&2){let e=W(2);D(),t_(`height`,e.callWindow.padBottom(),`px`)}}function use(e,t){if(e&1){let e=B();A(0,$oe,2,0,`p`,19),F(1,`div`,20)(2,`table`)(3,`thead`)(4,`tr`,21)(5,`th`,22),K(6,`Side`),I(),F(7,`th`,23),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.callSort,t)||(n.callSort=t),C(t)}),K(8,`Method`),I(),F(9,`th`,24),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.callSort,t)||(n.callSort=t),C(t)}),K(10,`URL`),I(),F(11,`th`,22),K(12,`Page`),I(),F(13,`th`,25),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.callSort,t)||(n.callSort=t),C(t)}),K(14,`Status`),I(),F(15,`th`,26),M_(`sortChange`,function(t){S(e);let n=W();return j_(n.callSort,t)||(n.callSort=t),C(t)}),K(16,`Time`),I(),F(17,`th`,22),K(18,`Notes`),I()()(),F(19,`tbody`,27,0),A(21,ese,2,2,`tr`,28),M(22,cse,26,31,`tr`,29,Zoe),A(24,lse,2,2,`tr`,28),I()()()}if(e&2){let e=W();j(e.callWindow.enabled()?0:-1),D(2),k(`aria-rowcount`,e.visibleCalls().length+1),D(5),A_(`sort`,e.callSort),D(2),A_(`sort`,e.callSort),D(4),A_(`sort`,e.callSort),D(2),A_(`sort`,e.callSort),D(4),P(`rovingWindow`,e.callWindow),D(2),j(e.callWindow.padTop()?21:-1),D(),N(e.shownCalls()),D(2),j(e.callWindow.padBottom()?24:-1)}}function dse(e,t){e&1&&K(0),e&2&&J(` Nothing matches “`,W(2).callQuery().trim(),`” with these filters. `)}function fse(e,t){e&1&&K(0),e&2&&J(` None of the `,W(2).timeline().length,` requests fit these filters. `)}function pse(e,t){if(e&1){let e=B();F(0,`div`,15)(1,`p`),K(2,`No requests match.`),I(),F(3,`p`,46),A(4,dse,1,1)(5,fse,1,1),I(),F(6,`div`,47)(7,`button`,9),H(`click`,function(){return S(e),C(W().clearCallFilters())}),K(8,`Clear filters`),I()()()}if(e&2){let e=W();D(4),j(e.callQuery().trim()?4:5)}}function mse(e,t){e&1&&(F(0,`div`,16)(1,`p`),K(2,`No requests yet.`),I(),F(3,`p`,46),K(4,` Add `),F(5,`code`),K(6,`withPangular()`),I(),K(7,` to `),F(8,`code`),K(9,`provideHttpClient`),I(),K(10,`, then load a page of the app. `),I()())}function hse(e,t){if(e&1){let e=B();F(0,`div`,48),H(`keydown.escape`,function(){return S(e),C(W().closePreview())}),I()}e&2&&P(`call`,t)}var gse=class e{state=x(A8);timeline=this.state.timeline;droppedCalls=this.state.droppedCalls;maxCalls=this.state.maxCalls;callFeed=this.state.callFeed;callQuery=this.state.callQuery;callSort=this.state.callSort;sideFilter=this.state.sideFilter;sideOptions=this.state.sideOptions;failedOnly=this.state.failedOnly;timelineView=this.state.timelineView;countText=this.state.countText;filterStatus=this.state.filterStatus;visibleCalls=this.state.visibleCalls;waterfallCalls=this.state.waterfallCalls;selectedCall=this.state.selectedCall;callTone=T8;statusLabel=w8;callWindow=new zN({count:X(()=>this.visibleCalls().length),estimate:37});shownCalls=X(()=>{let{start:e,end:t}=this.callWindow.range();return this.visibleCalls().slice(e,t).map((t,n)=>({entry:t,index:e+n}))});callsBody=hv(`callsBody`);constructor(){SR(this.callFeed,()=>{if(this.callSort())return;let e=this.callsBody()?.nativeElement.closest(`.table-wrap`);e&&(e.scrollTop=0)}),E(()=>{let e=this.callsBody()?.nativeElement;e&&this.callWindow.attach(e)})}rulePatternOf(e){return this.state.rulePatternOf(e)}openCall(e){this.state.openCall(e)}closePreview(){this.state.closePreview()}clearCallFilters(){this.state.clearCallFilters()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`section`,`appCallTimeline`,``]],viewQuery:function(e,t){e&1&&Mg(t.callsBody,Xoe,5),e&2&&Ng()},decls:25,vars:16,consts:[[`callsBody`,``],[`id`,`timeline-heading`],[`what`,`HTTP calls`,`limit`,`httpCalls`,3,`dropped`,`max`],[`role`,`group`,`aria-label`,`Filter the HTTP timeline`,1,`filters`],[`inputId`,`timeline-search`,`placeholder`,`Filter by URL or method`,`saveKey`,`network`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Side`,1,`side-filter`,3,`valueChange`,`options`,`value`],[1,`inline`,`failed-toggle`],[`type`,`checkbox`,3,`change`,`checked`],[`role`,`group`,`aria-label`,`Timeline view`,1,`view-toggle`],[`type`,`button`,3,`click`],[1,`total`],[`role`,`status`,1,`sr-only`],[1,`live-row`],[`what`,`calls`,3,`feed`],[3,`calls`,`selectedId`],[`role`,`status`,1,`empty`,`no-match`],[1,`empty`],[`appResponsePreview`,``,`id`,`call-preview`,`role`,`region`,`aria-labelledby`,`preview-heading`,1,`preview`,3,`call`],[3,`open`,`calls`,`selectedId`],[1,`muted`,`small`,`window-note`],[1,`table-wrap`],[`aria-rowindex`,`1`],[`scope`,`col`],[`scope`,`col`,`appSortHeader`,`method`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`url`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`status`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`time`,1,`num`,3,`sortChange`,`sort`],[`appRovingList`,`button[data-call-id]`,3,`rovingWindow`],[`aria-hidden`,`true`,1,`spacer`],[3,`selected`],[`colspan`,`7`],[3,`click`],[1,`tag`],[1,`method`],[1,`url`],[`type`,`button`,1,`link`,3,`title`],[1,`page-url`,3,`title`],[1,`status`],[`aria-hidden`,`true`,1,`dot`],[1,`num`],[1,`notes`],[`title`,`Made with fetch() directly, not through HttpClient`,1,`tag`],[3,`origin`],[1,`tag`,`mock`],[1,`tag`,`fault`],[1,`tag`,`rule-ref`,3,`title`],[1,`muted`,`small`],[1,`empty-actions`],[`appResponsePreview`,``,`id`,`call-preview`,`role`,`region`,`aria-labelledby`,`preview-heading`,1,`preview`,3,`keydown.escape`,`call`]],template:function(e,t){if(e&1&&(F(0,`h2`,1),K(1),I(),L(2,`app-limit-note`,2),F(3,`div`,3)(4,`app-search-field`,4),M_(`valueChange`,function(e){return j_(t.callQuery,e)||(t.callQuery=e),e}),I(),F(5,`app-select`,5),M_(`valueChange`,function(e){return j_(t.sideFilter,e)||(t.sideFilter=e),e}),I(),F(6,`label`,6)(7,`input`,7),H(`change`,function(e){return t.failedOnly.set(e.target.checked)}),I(),K(8,` Failed only `),I(),F(9,`div`,8)(10,`button`,9),H(`click`,function(){return t.timelineView.set(`table`)}),K(11,` Table `),I(),F(12,`button`,9),H(`click`,function(){return t.timelineView.set(`waterfall`)}),K(13,` Waterfall `),I()(),F(14,`span`,10),K(15),I(),F(16,`span`,11),K(17),I()(),F(18,`div`,12),L(19,`app-live-controls`,13),I(),A(20,Qoe,1,2,`app-network-waterfall`,14)(21,use,25,9)(22,pse,9,1,`div`,15)(23,mse,11,0,`div`,16),A(24,hse,1,1,`div`,17)),e&2){let e;D(),J(`HTTP timeline (`,t.timeline().length,`)`),D(),P(`dropped`,t.droppedCalls())(`max`,t.maxCalls()),D(),G(`no-calls`,!t.timeline().length),D(),A_(`value`,t.callQuery),D(),P(`options`,t.sideOptions),A_(`value`,t.sideFilter),D(2),P(`checked`,t.failedOnly()),D(3),k(`aria-pressed`,t.timelineView()===`table`),D(2),k(`aria-pressed`,t.timelineView()===`waterfall`),D(3),q(t.countText()),D(2),q(t.filterStatus()),D(2),P(`feed`,t.callFeed),D(),j(t.visibleCalls().length&&t.timelineView()===`waterfall`?20:t.visibleCalls().length?21:t.timeline().length?22:23),D(4),j((e=t.selectedCall())?24:-1,e)}},dependencies:[$ae,XD,CR,Xae,Yoe,NV,$N,wD,uV],styles:[`h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.filters[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin: 0 0 12px;
-}
-
-.live-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin: -4px 0 12px;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
-  stroke: var(--%NS%accent);
-}
-
-.filters[_ngcontent-%COMP%]   input[type=search][_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding-left: 34px;
-}
-
-.filters[_ngcontent-%COMP%]   .side-filter[_ngcontent-%COMP%] {
-  flex: 0 0 140px;
-}
-
-.failed-toggle[_ngcontent-%COMP%] {
-  flex: none;
-  height: var(--%NS%control-h);
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.total[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  white-space: nowrap;
-  font-variant-numeric: tabular-nums;
-}
-
-
-.filters.no-calls[_ngcontent-%COMP%]   .total[_ngcontent-%COMP%] {
-  display: none;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  max-height: min(420px, 60vh);
-  overflow: auto;
-  margin: 0 -16px;
-  padding: 0 16px;
-}
-
-.table-wrap[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 560px;
-  border-collapse: collapse;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  height: 36px;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-th[_ngcontent-%COMP%]:first-child, 
-td[_ngcontent-%COMP%]:first-child {
-  padding-left: 8px;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  height: 32px;
-  border-bottom-color: var(--%NS%border-strong);
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-}
-
-td.num[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {
-  cursor: pointer;
-}
-
-tbody[_ngcontent-%COMP%]   tr.spacer[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  padding: 0;
-  border: 0;
-}
-
-.window-note[_ngcontent-%COMP%] {
-  margin: 0 0 6px;
-}
-
-tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], 
-tr.selected[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-}
-
-tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-td.url[_ngcontent-%COMP%] {
-  width: 100%;
-  max-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-tr.selected[_ngcontent-%COMP%]   td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-td.page-url[_ngcontent-%COMP%] {
-  max-width: 160px;
-  overflow: hidden;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.method[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-2);
-}
-
-.status.ok[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.status.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.dot[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  vertical-align: middle;
-}
-
-.notes[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 4px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.tag.server[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.fault[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tag.mock[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.rule-ref[_ngcontent-%COMP%] {
-  gap: 4px;
-  max-width: 220px;
-}
-
-.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-}
-
-.tag.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.tag.off-tag[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.view-toggle[_ngcontent-%COMP%] {
-  display: inline-flex;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  overflow: hidden;
-}
-
-.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  height: calc(var(--%NS%control-h) - 2px);
-  padding: 0 10px;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--%NS%text-2);
-}
-
-.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]    + button[_ngcontent-%COMP%] {
-  border-left: 1px solid var(--%NS%border-strong);
-}
-
-.view-toggle[_ngcontent-%COMP%]   button[aria-pressed=true][_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.preview[_ngcontent-%COMP%] {
-  animation: enter 0.2s var(--%NS%ease) both;
-  margin-top: 16px;
-}
-
-.preview-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px 8px;
-  margin-bottom: 4px;
-}
-
-.preview-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-pre.preview-body[_ngcontent-%COMP%] {
-  max-height: 320px;
-}
-
-.preview-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.preview-meta[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-  margin-bottom: 8px;
-}
-
-.request-call[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-  margin: 0 0 4px;
-}
-
-.request-call[_ngcontent-%COMP%]   .preview-url[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-}
-
-.skip-reason[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.nav-stats[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-}
-
-.preview-rule[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.preview-url[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}`]})},_se=class e{calls=$([]);pattern=$(``);method=$(``);target=$(`both`);matched=X(()=>{let e=this.pattern().trim();return e?Doe(this.calls(),{pattern:e,method:this.method()||void 0,target:this.target()}).length:null});text=X(()=>{let e=this.matched();if(e===null)return``;let t=this.calls().length;if(!t)return`No calls recorded yet to check the pattern against.`;if(t===1)return e?`Matches the only recorded call.`:`Does not match the only recorded call. It can still match later requests.`;let n=`${t} recorded calls`;return e===0?`Matches none of the ${n}. It can still match later requests.`:e===t?`Matches all ${n}.`:`Matches ${e} of the ${n}.`});static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-rule-match-count`]],inputs:{calls:[1,`calls`],pattern:[1,`pattern`],method:[1,`method`],target:[1,`target`]},decls:2,vars:1,consts:[[`role`,`status`,1,`match`]],template:function(e,t){e&1&&(R(0,`p`,0),K(1),z()),e&2&&(D(),q(t.text()))},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.match[_ngcontent-%COMP%] {
-  margin: 0;
-  min-height: 1.5em;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}`]})},vse=(e,t)=>t.id;function yse(e,t){if(e&1){let e=B();R(0,`li`)(1,`button`,3),U(`click`,function(){let t=S(e).$implicit;return C(W().add.emit(t.id))}),K(2),z(),R(3,`span`,4),K(4),z()()}if(e&2){let e=t.$implicit,n=W();D(),V(`disabled`,n.disabled()),k(`data-preset`,e.id)(`aria-describedby`,`preset-`+e.id+` `+n.describedBy()),D(),J(` `,e.label,` `),D(),V(`id`,`preset-`+e.id),D(),q(e.description)}}var bse=class e{disabled=$(!1);describedBy=$(``);add=cv();presets=M8;static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-rule-presets`]],inputs:{disabled:[1,`disabled`],describedBy:[1,`describedBy`]},outputs:{add:`add`},decls:8,vars:0,consts:[[`role`,`group`,`aria-labelledby`,`rule-presets-label`,1,`presets`],[`id`,`rule-presets-label`,1,`label`],[1,`note`],[`type`,`button`,1,`ghost`,3,`click`,`disabled`],[1,`what`,3,`id`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`span`,1),K(2,`Presets`),z(),R(3,`ul`),M(4,yse,5,6,`li`,null,vse),z(),R(6,`p`,2),K(7,` A preset adds plain rules for every browser request. Rules above it match first. Remove the rules to stop it. `),z()()),e&2&&(D(4),N(t.presets))},styles:[`[_nghost-%COMP%] {
-  display: block;
-  margin-bottom: 12px;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  display: block;
-  margin-bottom: 6px;
-}
-
-ul[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-li[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: 7.5em minmax(0, 1fr);
-  align-items: center;
-  gap: 8px;
-}
-
-button[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-2);
-}
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-button[_ngcontent-%COMP%]:disabled {
-  cursor: not-allowed;
-  color: var(--%NS%text-2);
-}
-
-.what[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  button[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},xse=(e,t)=>t.id;function Sse(e,t){if(e&1&&(F(0,`p`,1),K(1),I()),e&2){let e=W();D(),q(e.writesOff)}}function Cse(e,t){e&1&&(F(0,`p`,19),K(1,` SSR mocks are not transferred to the client: the browser requests the URL again and gets the real response unless the rule also applies on the client. `),I())}function wse(e,t){e&1&&(F(0,`span`),K(1,`passthrough`),I())}function Tse(e,t){e&1&&(F(0,`span`,33),K(1,`network error`),I())}function Ese(e,t){if(e&1&&(F(0,`span`,36),K(1),I()),e&2){let e=W().$implicit,t=W();G(`ok`,t.statusTone(e.status)===`ok`)(`redirect`,t.statusTone(e.status)===`redirect`)(`bad`,t.statusTone(e.status)===`bad`),D(),q(e.status)}}function Dse(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),J(``,e.delayMs,` ms`)}}function Ose(e,t){e&1&&(F(0,`span`),K(1,`mock body`),I())}function kse(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),J(``,e.chance,`% of requests`)}}function Ase(e,t){e&1&&(F(0,`p`,35),K(1,` The SSR mock is not written to TransferState, so the browser requests this URL again. `),I())}function jse(e,t){if(e&1){let e=B();F(0,`li`)(1,`label`,27)(2,`input`,28),H(`change`,function(){let t=S(e).$implicit;return C(W().toggleRule(t.id))}),I(),F(3,`code`,29)(4,`span`,30),K(5),I(),K(6),I()(),F(7,`button`,31),H(`click`,function(){let t=S(e).$implicit;return C(W().removeRule(t.id))}),K(8,` Remove `),I(),F(9,`span`,32)(10,`span`),K(11),I(),A(12,wse,2,0,`span`)(13,Tse,2,0,`span`,33)(14,Ese,2,7,`span`,34),A(15,Dse,2,1,`span`),A(16,Ose,2,0,`span`),A(17,kse,2,1,`span`),I(),A(18,Ase,2,0,`p`,35),I()}if(e&2){let e=t.$implicit,n=W();G(`off`,!e.enabled),D(2),P(`checked`,e.enabled)(`disabled`,!n.canWrite()),k(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Enable rule for `+e.pattern),D(),P(`title`,e.pattern),D(2),q(e.method||`ANY`),D(),J(` `,e.pattern),D(),P(`disabled`,!n.canWrite()),k(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Remove rule for `+e.pattern),D(4),q(n.targetLabel(e.target)),D(),j(e.status===void 0?12:e.status===0?13:14),D(3),j(e.delayMs?15:-1),D(),j(e.body?16:-1),D(),j(e.chance?17:-1),D(),j(n.mocksOnServer(e)?18:-1)}}function Mse(e,t){e&1&&(F(0,`li`,26),K(1,`No rules. SSR rules apply on the next page load.`),I())}var Nse=class e{state=x(A8);ruleState=x(W8);canWrite=this.state.canWrite;writesOff=this.state.writesOff;timeline=this.state.timeline;rules=this.state.rules;draft=this.ruleState.draft;draftRule=this.ruleState.draftRule;draftHint=this.ruleState.draftHint;draftMocksOnServer=this.ruleState.draftMocksOnServer;bodyError=this.ruleState.bodyError;addingRule=this.ruleState.addingRule;methodOptions=this.ruleState.methodOptions;bodyPlaceholder=`{ "error": "Service unavailable" }`;statusOptions=loe;targetOptions=[{value:`both`,label:`SSR + client`},{value:`server`,label:`SSR only`},{value:`client`,label:`Client only`}];mocksOnServer=D8;statusTone=C8;targetLabel=doe;setDraft(e,t){this.ruleState.setDraft(e,t)}patch(e,t){this.ruleState.patch(e,t)}addRule(e){this.ruleState.addRule(e)}addPreset(e){this.ruleState.addPreset(e)}toggleRule(e){this.ruleState.toggleRule(e)}removeRule(e){this.ruleState.removeRule(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`section`,`appFaultRules`,``]],decls:55,vars:29,consts:[[`id`,`rules-heading`],[`id`,`http-writes-off`,1,`muted`,`small`],[3,`add`,`disabled`,`describedBy`],[`id`,`rule-form`,1,`rule-form`,3,`submit`],[1,`hint`],[`id`,`rule-pattern`,`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`placeholder`,`e.g. /api/products`,3,`input`,`value`],[3,`calls`,`pattern`,`method`,`target`],[1,`row`],[1,`field-group`],[`id`,`rule-method-label`],[`labelledBy`,`rule-method-label`,3,`valueChange`,`options`,`value`],[`id`,`rule-target-label`],[`labelledBy`,`rule-target-label`,3,`valueChange`,`describedBy`,`options`,`value`],[`id`,`rule-status-label`],[`labelledBy`,`rule-status-label`,3,`valueChange`,`describedBy`,`options`,`value`],[`type`,`number`,`inputmode`,`numeric`,`min`,`0`,`max`,`10000`,`placeholder`,`0`,3,`input`,`value`],[`id`,`rule-chance`,`type`,`number`,`inputmode`,`numeric`,`min`,`1`,`max`,`99`,`step`,`1`,`placeholder`,`100`,3,`input`,`value`],[`rows`,`3`,`spellcheck`,`false`,`aria-describedby`,`body-error`,3,`input`,`placeholder`,`value`],[`id`,`body-error`,1,`field-error`],[`id`,`rule-ssr-note`,1,`muted`,`small`],[`id`,`rule-hint`,1,`muted`,`small`],[1,`form-actions`],[`type`,`submit`,3,`disabled`],[`id`,`rule-list-heading`,`tabindex`,`-1`,1,`rules-heading`],[1,`rules`],[3,`off`],[1,`empty-rule`],[1,`inline`],[`type`,`checkbox`,3,`change`,`checked`,`disabled`],[1,`rule-pattern`,3,`title`],[1,`rule-method`],[`type`,`button`,`data-remove-rule`,``,1,`link`,`remove`,3,`click`,`disabled`],[1,`rule-meta`],[1,`status`,`bad`],[1,`status`,3,`ok`,`redirect`,`bad`],[1,`rule-note`],[1,`status`]],template:function(e,t){e&1&&(F(0,`h2`,0),K(1,`Fault injection`),I(),A(2,Sse,2,1,`p`,1),F(3,`app-rule-presets`,2),H(`add`,function(e){return t.addPreset(e)}),I(),F(4,`form`,3),H(`submit`,function(e){return t.addRule(e)}),F(5,`label`)(6,`span`),K(7,`URL pattern `),F(8,`span`,4),K(9,`(substring or * glob, ^ anchors the path)`),I()(),F(10,`input`,5),H(`input`,function(e){return t.patch(`pattern`,e)}),I()(),L(11,`app-rule-match-count`,6),F(12,`div`,7)(13,`div`,8)(14,`span`,9),K(15,`Method`),I(),F(16,`app-select`,10),H(`valueChange`,function(e){return t.setDraft(`method`,e??``)}),I()(),F(17,`div`,8)(18,`span`,11),K(19,`Apply on`),I(),F(20,`app-select`,12),H(`valueChange`,function(e){return t.setDraft(`target`,e??`both`)}),I()()(),F(21,`div`,7)(22,`div`,8)(23,`span`,13),K(24,`Status`),I(),F(25,`app-select`,14),H(`valueChange`,function(e){return t.setDraft(`status`,e??``)}),I()(),F(26,`label`),K(27,` Delay (ms) `),F(28,`input`,15),H(`input`,function(e){return t.patch(`delayMs`,e)}),I()()(),F(29,`label`)(30,`span`),K(31,`Chance (%) `),F(32,`span`,4),K(33,`(optional, share of matching requests)`),I()(),F(34,`input`,16),H(`input`,function(e){return t.patch(`chance`,e)}),I()(),F(35,`label`)(36,`span`),K(37,`Mock JSON body `),F(38,`span`,4),K(39,`(optional)`),I()(),F(40,`textarea`,17),H(`input`,function(e){return t.patch(`body`,e)}),I()(),F(41,`p`,18),K(42),I(),A(43,Cse,2,0,`p`,19),F(44,`p`,20),K(45),I(),F(46,`div`,21)(47,`button`,22),K(48,` Add rule `),I()()(),F(49,`h3`,23),K(50),I(),F(51,`ul`,24),M(52,jse,19,18,`li`,25,xse,!1,Mse,2,0,`li`,26),I()),e&2&&(D(2),j(t.canWrite()?-1:2),D(),P(`disabled`,!t.canWrite())(`describedBy`,t.canWrite()?``:`http-writes-off`),D(7),P(`value`,t.draft().pattern),D(),P(`calls`,t.timeline())(`pattern`,t.draft().pattern)(`method`,t.draft().method)(`target`,t.draft().target),D(5),P(`options`,t.methodOptions())(`value`,t.draft().method),D(4),P(`describedBy`,t.draftMocksOnServer()?`rule-ssr-note`:``)(`options`,t.targetOptions)(`value`,t.draft().target),D(5),P(`describedBy`,t.draftMocksOnServer()?`rule-ssr-note`:``)(`options`,t.statusOptions)(`value`,t.draft().status),D(3),P(`value`,t.draft().delayMs),D(6),P(`value`,t.draft().chance),D(6),P(`placeholder`,t.bodyPlaceholder)(`value`,t.draft().body),k(`aria-invalid`,t.bodyError()?`true`:null),D(2),q(t.bodyError()),D(),j(t.draftMocksOnServer()?43:-1),D(2),q(t.draftHint()),D(2),P(`disabled`,!t.canWrite()||!t.draftRule()),k(`aria-disabled`,t.addingRule()||null)(`aria-describedby`,t.canWrite()?`rule-hint`:`http-writes-off`),D(3),J(`Rules (`,t.rules().length,`)`),D(2),N(t.rules()))},dependencies:[_se,bse,wD],styles:[`@charset "UTF-8";
-h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.method[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-2);
-}
-
-.status.ok[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.status.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.dot[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  vertical-align: middle;
-}
-
-.notes[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 4px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.tag.server[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.fault[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tag.mock[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.rule-ref[_ngcontent-%COMP%] {
-  gap: 4px;
-  max-width: 220px;
-}
-
-.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-}
-
-.tag.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.tag.off-tag[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.field-group[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.field-group[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  width: 100%;
-}
-
-.rule-note[_ngcontent-%COMP%] {
-  grid-column: 1/-1;
-  margin: 0;
-  padding-left: 24px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.rule-form[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-@media (max-width: 420px) {
-  .row[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-.field-error[_ngcontent-%COMP%] {
-  margin-top: -4px;
-  color: var(--%NS%danger);
-  font-size: 12px;
-}
-
-.field-error[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.form-actions[_ngcontent-%COMP%] {
-  display: flex;
-}
-
-.rules-heading[_ngcontent-%COMP%] {
-  margin-top: 24px;
-}
-
-.rules[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 4px 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  transition: border-color 0.2s var(--%NS%ease), opacity 0.2s var(--%NS%ease);
-}
-
-.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-pattern[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-decoration: line-through;
-}
-
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-method[_ngcontent-%COMP%], 
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%], 
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.rules[_ngcontent-%COMP%]   li.empty-rule[_ngcontent-%COMP%] {
-  display: block;
-  padding: 16px 12px;
-  border-style: dashed;
-  border-color: var(--%NS%border-strong);
-  background: none;
-  color: var(--%NS%text-2);
-  text-align: center;
-}
-
-.rule-pattern[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--%NS%text-strong);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rule-method[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-weight: 600;
-}
-
-.rule-meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  grid-column: 1/-1;
-  gap: 4px 8px;
-  padding-left: 24px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.rule-meta[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]    + span[_ngcontent-%COMP%]::before {
-  content: "·";
-  margin-right: 8px;
-  color: var(--%NS%text-3);
-}
-
-.rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
-  font-size: 11px;
-}
-
-.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%] {
-  padding: 2px 4px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%]:hover:not(:disabled) {
-  color: var(--%NS%danger);
-}`]})};function Pse(e){return`pangular-${(e??``).replace(/[?#].*$/,``).replace(/[^a-z0-9]+/gi,`-`).replace(/^-+|-+$/g,``).toLowerCase().slice(0,60)||`home`}.har`}var Fse=class e{calls=$([]);ssrRequest=$(null);title=$(``);pageUrl=$(void 0);done=cv();document=x(xs);save(){let e=this.calls();if(!e.length)return;let t=this.document.defaultView?.location,n=/^https?:$/.test(t?.protocol??``)?t.origin:void 0,r=Moe({calls:e,ssrRequest:this.ssrRequest(),title:this.title(),origin:n}),i=this.document.defaultView?.URL?.createObjectURL?.(new Blob([JSON.stringify(r,null,2)],{type:`application/json`}));if(!i){this.done.emit(`Saving files is not available here.`);return}let a=this.document.createElement(`a`);a.href=i,a.download=Pse(this.pageUrl()),a.click(),setTimeout(()=>this.document.defaultView?.URL?.revokeObjectURL?.(i));let o=r.log.entries.length;this.done.emit(`Saved ${o} request${o===1?``:`s`} as ${a.download}.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-har-export`]],inputs:{calls:[1,`calls`],ssrRequest:[1,`ssrRequest`],title:[1,`title`],pageUrl:[1,`pageUrl`]},outputs:{done:`done`},decls:4,vars:1,consts:[[`type`,`button`,`aria-describedby`,`har-export-note`,3,`click`,`disabled`],[`id`,`har-export-note`,1,`sr-only`]],template:function(e,t){e&1&&(R(0,`button`,0),U(`click`,function(){return t.save()}),K(1,` Export HAR `),z(),R(2,`span`,1),K(3,`Saves the timeline as a HAR file with secrets masked.`),z()),e&2&&V(`disabled`,!t.calls().length)},styles:[`[_nghost-%COMP%] {
-  display: contents;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease);
-}
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  button[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},Ise=(e,t)=>t.kind+`:`+t.callIds.join(`,`);function Lse(e,t){e&1&&(R(0,`p`,1),K(1,`No client calls to check yet.`),z())}function Rse(e,t){e&1&&(R(0,`p`,2),K(1,`No duplicate requests, waterfalls or repeated server calls.`),z())}function zse(e,t){if(e&1&&(R(0,`span`,6),K(1),z()),e&2){let e=W().$implicit;D(),J(`About `,e.wastedMs,` ms to win.`)}}function Bse(e,t){if(e&1){let e=B();R(0,`li`)(1,`span`,4),K(2),z(),R(3,`p`,5),K(4),A(5,zse,2,1,`span`,6),z(),R(6,`p`,7),K(7),z(),R(8,`button`,8),U(`click`,function(){let t=S(e).$implicit;return C(W(2).open.emit(t.callIds[0]))}),K(9,` Show first call `),z()()}if(e&2){let e=t.$implicit,n=W(2);D(),k(`data-kind`,e.kind),D(),q(n.kindLabel(e.kind)),D(2),J(` `,e.message,` `),D(),j(e.wastedMs?5:-1),D(2),q(e.hint),D(),k(`aria-label`,`Show the first call of: `+e.message)}}function Vse(e,t){if(e&1&&(R(0,`ul`,3),M(1,Bse,10,6,`li`,null,Ise),z()),e&2){let e=W();D(),N(e.findings())}}var Hse={duplicate:`Duplicate`,waterfall:`Waterfall`,refetch:`Repeated server call`},Use=class e{calls=$([]);serverCalls=$([]);open=cv();defaults=V8;findings=X(()=>Hoe(this.calls(),{serverCalls:this.serverCalls()}));kindLabel(e){return Hse[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-http-lint`]],inputs:{calls:[1,`calls`],serverCalls:[1,`serverCalls`]},outputs:{open:`open`},decls:5,vars:3,consts:[[1,`intro`],[1,`none`],[1,`none`,`ok`],[1,`findings`],[1,`kind`],[1,`message`],[1,`cost`],[1,`hint`],[`type`,`button`,3,`click`]],template:function(e,t){e&1&&(R(0,`p`,0),K(1),z(),A(2,Lse,2,0,`p`,1)(3,Rse,2,0,`p`,2)(4,Vse,3,0,`ul`,3)),e&2&&(D(),Y(` Same GET again within `,t.defaults.duplicateWindowMs,` ms, `,t.defaults.minChain,` or more calls in a row that could start together, and server calls the browser made again. Transfer cache hits, mocks and cancelled calls are left out. `),D(),j(t.calls().length?t.findings().length?4:3:2))},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.intro[_ngcontent-%COMP%], 
-.none[_ngcontent-%COMP%], 
-.hint[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.none[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-.findings[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 10px 0 0;
-  padding: 0;
-  list-style: none;
-}
-
-li[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 4px 12px;
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-}
-
-.kind[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  grid-column: 1;
-}
-
-.message[_ngcontent-%COMP%] {
-  grid-column: 1;
-  margin: 0;
-  color: var(--%NS%text);
-  font-size: 13px;
-  overflow-wrap: anywhere;
-}
-
-.cost[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.hint[_ngcontent-%COMP%] {
-  grid-column: 1;
-}
-
-button[_ngcontent-%COMP%] {
-  grid-column: 2;
-  grid-row: 1/span 3;
-  align-self: center;
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font-size: 12px;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease);
-}
-button[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-@media (max-width: 640px) {
-  li[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  button[_ngcontent-%COMP%] {
-    grid-column: 1;
-    grid-row: auto;
-    justify-self: start;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  button[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})};function Wse(e,t){if(e&1&&(R(0,`div`)(1,`dt`),K(2,`DOM nodes hydrated`),z(),R(3,`dd`),K(4),z()(),R(5,`div`)(6,`dt`),K(7,`DOM nodes skipped`),z(),R(8,`dd`),K(9),z()(),R(10,`div`)(11,`dt`),K(12,`Mismatched components`),z(),R(13,`dd`),K(14),z()()),e&2){let e=t;D(4),q(e.hydrated),D(5),q(e.skipped),D(4),G(`bad`,e.mismatched>0),D(),q(e.mismatched)}}function Gse(e,t){if(e&1&&(R(0,`span`,5)(1,`span`,6),K(2,`Expected`),z(),R(3,`code`),K(4),z()()),e&2){let e=W().$implicit;D(4),q(e.expected)}}function Kse(e,t){if(e&1&&(R(0,`span`,5)(1,`span`,6),K(2,`Actual`),z(),R(3,`code`),K(4),z()()),e&2){let e=W().$implicit;D(4),q(e.actual)}}function qse(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z(),A(3,Gse,5,1,`span`,5),A(4,Kse,5,1,`span`,5),z()),e&2){let e=t.$implicit;D(2),q(e.isClass?e.component:`<`+e.component+`>`),D(),j(e.expected?3:-1),D(),j(e.actual?4:-1)}}function Jse(e,t){if(e&1&&(R(0,`h3`),K(1),z(),R(2,`ul`,4),M(3,qse,5,3,`li`,null,$h),z()),e&2){let e=W();D(),J(`Mismatches (`,e.mismatches.length,`)`),D(2),N(e.mismatches)}}function Yse(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z()()),e&2){let e=t.$implicit;D(2),q(e)}}function Xse(e,t){if(e&1&&(R(0,`h3`),K(1,`ngSkipHydration hosts`),z(),R(2,`ul`,7),M(3,Yse,3,1,`li`,null,$h),z()),e&2){let e=W();D(3),N(e.skipHydrationHosts)}}function Zse(e,t){e&1&&(R(0,`h3`),K(1,`Warnings`),z(),R(2,`p`,8),K(3,` Not captured: add `),R(4,`code`),K(5,`providePangularHttp()`),z(),K(6,` to the app providers. `),z())}function Qse(e,t){if(e&1&&(R(0,`pre`,9),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function $se(e,t){e&1&&(R(0,`p`,10),K(1,`No hydration warnings.`),z())}function ece(e,t){if(e&1&&(R(0,`h3`),K(1),z(),M(2,Qse,2,1,`pre`,9,$h,!1,$se,2,0,`p`,10)),e&2){let e=W();D(),J(`Warnings (`,e.warnings.length,`)`),D(),N(e.warnings)}}function tce(e,t){if(e&1&&(R(0,`dl`,2)(1,`div`)(2,`dt`),K(3,`Enabled`),z(),R(4,`dd`)(5,`span`,3),K(6),z()()(),R(7,`div`)(8,`dt`),K(9,`Hydrated components`),z(),R(10,`dd`),K(11),z()(),R(12,`div`)(13,`dt`),K(14,`Hydrated nodes`),z(),R(15,`dd`),K(16),z()(),R(17,`div`)(18,`dt`),K(19,`Skipped components`),z(),R(20,`dd`),K(21),z()(),R(22,`div`)(23,`dt`),K(24,`App stable after`),z(),R(25,`dd`),K(26),z()(),R(27,`div`)(28,`dt`),K(29,`Incremental defer blocks`),z(),R(30,`dd`),K(31),z()(),A(32,Wse,15,5),z(),A(33,Jse,5,1),A(34,Xse,5,0),A(35,Zse,7,0)(36,ece,5,2)),e&2){let e,n=t;D(5),G(`on`,n.enabled)(`off-tag`,!n.enabled),D(),q(n.enabled?`yes`:`no (client render only)`),D(5),q(n.hydratedComponents??`n/a`),D(5),q(n.hydratedNodes??`n/a`),D(5),q(n.componentsSkippedHydration??`n/a`),D(5),q(n.stableMs===void 0?`n/a`:n.stableMs+` ms`),D(5),q(n.deferBlocksWithIncrementalHydration??`n/a`),D(),j((e=n.nodes)?32:-1,e),D(),j(n.mismatches?.length?33:-1),D(),j(n.skipHydrationHosts.length?34:-1),D(),j(n.warningsCaptured===!1?35:36)}}function nce(e,t){e&1&&(R(0,`div`,1)(1,`p`),K(2,`No hydration data for this page.`),z(),R(3,`p`,8),K(4,`Open a server rendered page of the app to see its stats.`),z()())}var rce=class e{selected=x(A8).selected;static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`section`,`appHydrationStats`,``]],decls:4,vars:1,consts:[[`id`,`hydration-heading`],[1,`empty`],[1,`stats`],[1,`tag`],[1,`plain`,`mismatches`],[1,`mismatch-row`],[1,`mismatch-label`],[1,`plain`],[1,`muted`,`small`],[1,`warn`],[1,`muted`,`small`,`ok-note`]],template:function(e,t){if(e&1&&(R(0,`h2`,0),K(1,`Hydration`),z(),A(2,tce,37,14)(3,nce,5,0,`div`,1)),e&2){let e;D(2),j((e=t.selected()?.hydration)?2:3,e)}},styles:[`h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.mismatches[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-}
-
-.mismatch-row[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  min-width: 0;
-  font-size: 12px;
-}
-
-.mismatch-row[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.mismatch-label[_ngcontent-%COMP%] {
-  flex: none;
-  width: 64px;
-  color: var(--%NS%text-2);
-}
-
-.method[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-2);
-}
-
-.status.ok[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.status.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.dot[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  vertical-align: middle;
-}
-
-.notes[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 4px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.tag.server[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.fault[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tag.mock[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.rule-ref[_ngcontent-%COMP%] {
-  gap: 4px;
-  max-width: 220px;
-}
-
-.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-}
-
-.tag.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.tag.off-tag[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-pre[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 240px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text-2);
-  font: 12px/1.5 var(--%NS%font-mono);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-pre[_ngcontent-%COMP%]    + pre[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-pre.warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  color: var(--%NS%warn);
-}
-
-pre.error[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  color: var(--%NS%danger);
-}
-
-.plain[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.stats[_ngcontent-%COMP%] {
-  display: grid;
-  margin: 0;
-}
-
-.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 36px;
-  padding: 6px 0;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:last-child {
-  border-bottom: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.ok-note[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}`]})},G8=class e{state=x(A8);addingOverride=T(!1);overrideSaves=Promise.resolve(!0);overrideDraft=T({..._8});overrideFromPayload=T(null);overrideKindOptions=[{value:`render-error`,label:`Render error`},{value:`client-render`,label:`Force Client render`},{value:`state-edit`,label:`Edit TransferState entry`}];overrideValueError=X(()=>{let e=this.overrideDraft().value.trim();if(!e)return``;try{return JSON.parse(e),``}catch{return`The value must be valid JSON.`}});overrideReady=X(()=>{let e=this.overrideDraft();return!e.pattern.trim()||this.state.overrides().length>=20?!1:e.kind!==`state-edit`||!!e.key.trim()&&!this.overrideValueError()});setOverrideDraft(e,t){this.overrideDraft.update(n=>({...n,[e]:t})),e===`kind`&&t!==`state-edit`&&this.overrideFromPayload.set(null)}patchOverride(e,t){let n=t.target.value;this.overrideDraft.update(t=>({...t,[e]:n})),e===`key`&&this.overrideFromPayload.set(null)}canEditEntry(e){let{key:t}=e;return this.state.canWrite()&&!!t&&t===t.trim()&&t.length<=200&&!soe.test(t)}editEntry(e){if(!this.canEditEntry(e))return;let t=this.state.selected();this.overrideDraft.set({..._8,kind:`state-edit`,pattern:t?ooe(t.initialUrl??t.url):``,key:e.key}),this.overrideFromPayload.set(e.http?`http`:`other`),this.state.message.set(`Editing the TransferState entry in SSR overrides.`),this.state.afterRender(()=>{let e=this.state.query(this.overrideDraft().pattern?`#override-value`:`#override-pattern`);e?.scrollIntoView?.({block:`center`}),e?.focus()})}async addOverride(e){if(e.preventDefault(),!this.overrideReady()||this.addingOverride())return;let t=this.overrideDraft(),n={id:`o${Date.now().toString(36)}${Math.random().toString(36).slice(2,6)}`,kind:t.kind,pattern:t.pattern.trim(),enabled:!0,...t.kind===`render-error`&&t.message.trim()?{message:t.message.trim()}:{},...t.kind===`state-edit`?{key:t.key.trim()}:{},...t.kind===`state-edit`&&t.value.trim()?{value:t.value.trim()}:{}};this.addingOverride.set(!0);let r=await this.saveOverrides(e=>[...e,n],`Override added. Reload the page.`);this.addingOverride.set(!1),r&&(this.overrideDraft.set({..._8,kind:t.kind}),this.overrideFromPayload.set(null),this.state.query(`#override-pattern`)?.focus())}toggleOverride(e){this.saveOverrides(t=>t.some(t=>t.id===e)?t.map(t=>t.id===e?{...t,enabled:!t.enabled}:t):null,`Override updated. Reload the page.`)}async removeOverride(e){let t=-1;await this.saveOverrides(n=>(t=n.findIndex(t=>t.id===e),t<0?null:n.filter(t=>t.id!==e)),`Override removed.`)&&this.state.focusAfterRemove(`[data-remove-override]`,t,`#override-list-heading`)}saveOverrides(e,t){let n=this.overrideSaves.then(async()=>{let n=e(this.state.overrides());if(!n)return!1;try{let e=await oT(this.state.rpc(),`set-ssr-overrides`,n);return this.state.overrides.set(Array.isArray(e)?e:n),this.state.announce(t),!0}catch{return this.state.message.set(`Could not save the overrides.`),!1}});return this.overrideSaves=n,n}static ɵfac=function(t){return new(t||e)};static ɵprov=bi({token:e,factory:e.ɵfac})},ice=(e,t)=>t.id;function ace(e,t){if(e&1){let e=B();F(0,`p`,8),K(1,` Throws while the server renders, so it needs `),F(2,`code`),K(3,`providePangularHttp()`),I(),K(4,` and a page the engine renders. Prerendered files served as static files skip it. `),I(),F(5,`label`),K(6,` Error message `),F(7,`input`,15),H(`input`,function(t){return S(e),C(W().patchOverride(`message`,t))}),I()()}if(e&2){let e=W();D(7),P(`value`,e.overrideDraft().message)}}function oce(e,t){e&1&&K(0,` For a cached HTTP response this is the whole cache record, not only the response body. `)}function sce(e,t){e&1&&(F(0,`p`,19),K(1,` Filled in from the TransferState payload. The value starts empty because the panel only shows a redacted copy, so type the JSON the server should send. `),A(2,oce,1,0),I()),e&2&&(D(2),j(t===`http`?2:-1))}function cce(e,t){if(e&1){let e=B();F(0,`label`),K(1,` TransferState key `),F(2,`input`,16),H(`input`,function(t){return S(e),C(W().patchOverride(`key`,t))}),I()(),F(3,`label`)(4,`span`),K(5,`New JSON value `),F(6,`span`,6),K(7,`(empty removes the entry)`),I()(),F(8,`textarea`,17),H(`input`,function(t){return S(e),C(W().patchOverride(`value`,t))}),I()(),F(9,`p`,18),K(10),I(),A(11,sce,3,1,`p`,19)}if(e&2){let e,t=W();D(2),P(`value`,t.overrideDraft().key),D(6),P(`value`,t.overrideDraft().value),k(`aria-invalid`,t.overrideValueError()?`true`:null)(`aria-describedby`,t.overrideFromPayload()?`override-value-error override-value-note`:`override-value-error`),D(2),q(t.overrideValueError()),D(),j((e=t.overrideFromPayload())?11:-1,e)}}function lce(e,t){e&1&&(F(0,`p`,8),K(1,` Serves `),F(2,`code`),K(3,`index.csr.html`),I(),K(4,` instead of rendering. Needs `),F(5,`code`),K(6,`browserDistFolder`),I(),K(7,` in `),F(8,`code`),K(9,`initPangularHub()`),I(),K(10,`. `),I())}function uce(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),q(e.message)}}function dce(e,t){if(e&1&&(F(0,`span`),K(1),I()),e&2){let e=W().$implicit;D(),Y(``,e.value===void 0?`remove`:`set`,` `,e.key)}}function fce(e,t){if(e&1){let e=B();F(0,`li`)(1,`label`,20)(2,`input`,21),H(`change`,function(){let t=S(e).$implicit;return C(W().toggleOverride(t.id))}),I(),F(3,`code`,22)(4,`span`,23),K(5),I(),K(6),I()(),F(7,`button`,24),H(`click`,function(){let t=S(e).$implicit;return C(W().removeOverride(t.id))}),K(8,` Remove `),I(),F(9,`span`,25),A(10,uce,2,1,`span`),A(11,dce,2,2,`span`),I()()}if(e&2){let e=t.$implicit,n=W();G(`off`,!e.enabled),D(2),P(`checked`,e.enabled)(`disabled`,!n.canWrite()),k(`aria-label`,`Enable `+n.overrideLabel(e.kind)+` for `+e.pattern),D(),P(`title`,e.pattern),D(2),q(n.overrideLabel(e.kind)),D(),J(` `,e.pattern),D(),P(`disabled`,!n.canWrite()),k(`aria-label`,`Remove `+n.overrideLabel(e.kind)+` for `+e.pattern),D(3),j(e.message?10:-1),D(),j(e.key?11:-1)}}function pce(e,t){e&1&&(F(0,`li`,14),K(1,`No overrides.`),I())}var mce=class e{state=x(A8);overrideState=x(G8);canWrite=this.state.canWrite;overrides=this.state.overrides;overrideDraft=this.overrideState.overrideDraft;overrideKindOptions=this.overrideState.overrideKindOptions;overrideValueError=this.overrideState.overrideValueError;overrideFromPayload=this.overrideState.overrideFromPayload;overrideReady=this.overrideState.overrideReady;addingOverride=this.overrideState.addingOverride;overrideLabel=O8;setOverrideDraft(e,t){this.overrideState.setOverrideDraft(e,t)}patchOverride(e,t){this.overrideState.patchOverride(e,t)}addOverride(e){this.overrideState.addOverride(e)}toggleOverride(e){this.overrideState.toggleOverride(e)}removeOverride(e){this.overrideState.removeOverride(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`section`,`appSsrOverrides`,``]],decls:30,vars:10,consts:[[`id`,`overrides-heading`],[1,`muted`,`small`],[1,`rule-form`,3,`submit`],[1,`field-group`],[`id`,`override-kind-label`],[`labelledBy`,`override-kind-label`,3,`valueChange`,`describedBy`,`options`,`value`],[1,`hint`],[`id`,`override-pattern`,`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`placeholder`,`e.g. /examples/ssr`,3,`input`,`value`],[`id`,`override-kind-help`,1,`muted`,`small`],[1,`form-actions`],[`type`,`submit`,3,`disabled`],[`id`,`override-list-heading`,`tabindex`,`-1`,1,`rules-heading`],[1,`rules`],[3,`off`],[1,`empty-rule`],[`spellcheck`,`false`,`placeholder`,`Simulated render error`,`aria-describedby`,`override-kind-help`,3,`input`,`value`],[`id`,`override-key`,`spellcheck`,`false`,`autocomplete`,`off`,3,`input`,`value`],[`id`,`override-value`,`rows`,`3`,`spellcheck`,`false`,3,`input`,`value`],[`id`,`override-value-error`,1,`field-error`],[`id`,`override-value-note`,1,`muted`,`small`],[1,`inline`],[`type`,`checkbox`,3,`change`,`checked`,`disabled`],[1,`rule-pattern`,3,`title`],[1,`rule-method`],[`type`,`button`,`data-remove-override`,``,1,`link`,`remove`,3,`click`,`disabled`],[1,`rule-meta`]],template:function(e,t){if(e&1&&(F(0,`h2`,0),K(1,`SSR overrides`),I(),F(2,`p`,1),K(3,` Development only. These change what the server sends for matching pages, from the next full page load, and the request is marked `),F(4,`strong`),K(5,`overridden`),I(),K(6,`. `),I(),F(7,`form`,2),H(`submit`,function(e){return t.addOverride(e)}),F(8,`div`,3)(9,`span`,4),K(10,`Override`),I(),F(11,`app-select`,5),H(`valueChange`,function(e){return t.setOverrideDraft(`kind`,e??`render-error`)}),I()(),F(12,`label`)(13,`span`),K(14,`Page pattern `),F(15,`span`,6),K(16,`(substring or * glob, ^ anchors the path)`),I()(),F(17,`input`,7),H(`input`,function(e){return t.patchOverride(`pattern`,e)}),I()(),A(18,ace,8,1)(19,cce,12,6)(20,lce,11,0,`p`,8),F(21,`div`,9)(22,`button`,10),K(23,` Add override `),I()()(),F(24,`h3`,11),K(25),I(),F(26,`ul`,12),M(27,fce,12,12,`li`,13,ice,!1,pce,2,0,`li`,14),I()),e&2){let e;D(11),P(`describedBy`,t.overrideDraft().kind===`state-edit`?``:`override-kind-help`)(`options`,t.overrideKindOptions)(`value`,t.overrideDraft().kind),D(6),P(`value`,t.overrideDraft().pattern),D(),j((e=t.overrideDraft().kind)===`render-error`?18:e===`state-edit`?19:e===`client-render`?20:-1),D(4),P(`disabled`,!t.canWrite()||!t.overrideReady()),k(`aria-disabled`,t.addingOverride()||null)(`aria-describedby`,t.canWrite()?null:`http-writes-off`),D(3),J(` Overrides (`,t.overrides().length,`) `),D(2),N(t.overrides())}},dependencies:[wD],styles:[`@charset "UTF-8";
-h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.field-group[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.field-group[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  width: 100%;
-}
-
-.rule-note[_ngcontent-%COMP%] {
-  grid-column: 1/-1;
-  margin: 0;
-  padding-left: 24px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.rule-form[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-@media (max-width: 420px) {
-  .row[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-.field-error[_ngcontent-%COMP%] {
-  margin-top: -4px;
-  color: var(--%NS%danger);
-  font-size: 12px;
-}
-
-.field-error[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.form-actions[_ngcontent-%COMP%] {
-  display: flex;
-}
-
-.rules-heading[_ngcontent-%COMP%] {
-  margin-top: 24px;
-}
-
-.rules[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 4px 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  transition: border-color 0.2s var(--%NS%ease), opacity 0.2s var(--%NS%ease);
-}
-
-.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
-  border-color: var(--%NS%border-strong);
-}
-
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-pattern[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  text-decoration: line-through;
-}
-
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-method[_ngcontent-%COMP%], 
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%], 
-.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.rules[_ngcontent-%COMP%]   li.empty-rule[_ngcontent-%COMP%] {
-  display: block;
-  padding: 16px 12px;
-  border-style: dashed;
-  border-color: var(--%NS%border-strong);
-  background: none;
-  color: var(--%NS%text-2);
-  text-align: center;
-}
-
-.rule-pattern[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--%NS%text-strong);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.rule-method[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  font-weight: 600;
-}
-
-.rule-meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  grid-column: 1/-1;
-  gap: 4px 8px;
-  padding-left: 24px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.rule-meta[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]    + span[_ngcontent-%COMP%]::before {
-  content: "·";
-  margin-right: 8px;
-  color: var(--%NS%text-3);
-}
-
-.rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
-  font-size: 11px;
-}
-
-.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%] {
-  padding: 2px 4px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%]:hover:not(:disabled) {
-  color: var(--%NS%danger);
-}`]})},K8=(e,t)=>t.id,hce=(e,t)=>t.id+t.kind;function gce(e,t){e&1&&(F(0,`span`,17),K(1,`this page`),I())}function _ce(e,t){e&1&&(F(0,`span`,18),K(1,`overridden`),I())}function vce(e,t){e&1&&(F(0,`span`,19),K(1,`aborted`),I())}function yce(e,t){if(e&1){let e=B();F(0,`tr`,8),H(`click`,function(){let t=S(e).$implicit;return C(W(2).selectedRequestId.set(t.id))}),F(1,`td`,9)(2,`button`,10)(3,`span`,11),K(4),I(),K(5),F(6,`span`,12),K(7),I()()(),F(8,`td`,13),L(9,`span`,14),K(10),I(),F(11,`td`),K(12),I(),F(13,`td`,15),K(14),I(),F(15,`td`,15),K(16),I(),F(17,`td`)(18,`div`,16),A(19,gce,2,0,`span`,17),A(20,_ce,2,0,`span`,18),A(21,vce,2,0,`span`,19),I()()()}if(e&2){let e=t.$implicit,n=W(2);G(`selected`,n.selectedRequest()?.id===e.id),D(2),P(`title`,e.url),k(`aria-pressed`,n.selectedRequest()?.id===e.id),D(2),q(e.method),D(),J(` `,e.url,` `),D(2),Y(`, `,e.status,`, `,n.renderModeLabel(e.renderMode)),D(),G(`ok`,n.statusTone(e.status)===`ok`)(`redirect`,n.statusTone(e.status)===`redirect`)(`bad`,n.statusTone(e.status)===`bad`),D(2),J(``,e.status,` `),D(2),q(n.renderModeLabel(e.renderMode)),D(2),J(``,e.renderMs,` ms`),D(2),Y(``,e.fetches,` (`,e.fetchMs,` ms)`),D(3),j(e.id===n.selected()?.ssrRequestId?19:-1),D(),j(e.overrides?.length?20:-1),D(),j(e.aborted?21:-1)}}function bce(e,t){e&1&&(F(0,`p`,22),K(1),F(2,`code`),K(3,`ssrMiddleware`),I(),K(4,` saw it, so the render mode can't be read and TransferState edits can't apply. Mount `),F(5,`code`),K(6,`ssrMiddleware`),I(),K(7,` after `),F(8,`code`),K(9,`compression()`),I(),K(10,`. `),I()),e&2&&(D(),J(` The body was already compressed (`,t,`) when `))}function xce(e,t){if(e&1&&(F(0,`span`,25),K(1),I()),e&2){let e=W().$implicit;D(),q(e.note)}}function Sce(e,t){if(e&1&&(F(0,`p`,24)(1,`span`,18),K(2),I(),F(3,`span`),K(4),I(),A(5,xce,2,1,`span`,25),I()),e&2){let e=t.$implicit,n=W(4);D(2),q(n.overrideLabel(e.kind)),D(2),q(e.applied?`applied`:`not applied`),D(),j(e.note?5:-1)}}function Cce(e,t){if(e&1&&(F(0,`h3`),K(1,`Overrides from the panel`),I(),F(2,`p`,22),K(3,` This response was changed on purpose, so it is not what the app sends on its own. `),I(),M(4,Sce,6,3,`p`,24,hce)),e&2){let e=W();D(4),N(e.overrides)}}function wce(e,t){if(e&1&&(K(0,` to `),F(1,`code`),K(2),I()),e&2){let e=W().$implicit;D(2),q(e.finalUrl)}}function Tce(e,t){if(e&1&&(F(0,`div`)(1,`dt`),K(2,`Guards`),I(),F(3,`dd`),K(4),I()()),e&2){let e=W().$implicit,t=W(4);D(3),G(`bad`,t.guardVerdict(e)===`rejected`),D(),Y(` `,t.msLabel(e.guards.ms),``,t.guardVerdict(e)?`, `+t.guardVerdict(e):``,` `)}}function Ece(e,t){if(e&1&&(F(0,`div`)(1,`dt`),K(2,`Resolvers`),I(),F(3,`dd`),K(4),I()()),e&2){let e=W().$implicit,t=W(4);D(4),q(t.msLabel(e.resolvers.ms))}}function Dce(e,t){if(e&1&&(F(0,`div`)(1,`dt`),K(2,`Navigation total`),I(),F(3,`dd`),K(4),I()()),e&2){let e=W().$implicit;D(4),J(``,e.durationMs,` ms`)}}function Oce(e,t){if(e&1&&(F(0,`p`,22),K(1),I()),e&2){let e=W().$implicit;D(),q(e.reason)}}function kce(e,t){if(e&1&&(F(0,`dl`,26)(1,`div`)(2,`dt`),K(3,`Navigation`),I(),F(4,`dd`)(5,`code`),K(6),I(),A(7,wce,3,1),K(8),I()(),A(9,Tce,5,4,`div`),A(10,Ece,5,1,`div`),A(11,Dce,5,1,`div`),I(),A(12,Oce,2,1,`p`,22)),e&2){let e=t.$implicit;D(6),q(e.url),D(),j(e.finalUrl?7:-1),D(),J(` (`,e.outcome,`) `),D(),j(e.guards?9:-1),D(),j(e.resolvers?10:-1),D(),j(e.durationMs===void 0?-1:11),D(),j(e.reason?12:-1)}}function Ace(e,t){if(e&1&&(F(0,`h3`),K(1,`Router during the render`),I(),M(2,kce,13,7,null,null,$h)),e&2){let e=W();D(2),N(e.navigations)}}function jce(e,t){e&1&&(F(0,`span`,17),K(1,`cached`),I())}function Mce(e,t){if(e&1&&(F(0,`span`,28),K(1,`not cached`),I()),e&2){let e=W().$implicit;P(`title`,W(3).skipText(e.cacheSkip))}}function Nce(e,t){if(e&1&&(F(0,`p`,29),K(1),I()),e&2){let e=W().$implicit,t=W(3);D(),J(`Not cached: `,t.skipText(e.cacheSkip),`.`)}}function Pce(e,t){if(e&1&&(F(0,`p`,24)(1,`span`,11),K(2),I(),F(3,`span`,27),K(4),I(),F(5,`span`,13),K(6),I(),F(7,`span`,25),K(8),I(),A(9,jce,2,0,`span`,17)(10,Mce,2,1,`span`,28),I(),A(11,Nce,2,1,`p`,29)),e&2){let e=t.$implicit,n=W(3);D(2),q(e.method),D(),P(`title`,e.url),D(),q(e.url),D(),G(`ok`,n.callTone(e)===`ok`)(`bad`,n.callTone(e)===`bad`),D(),q(n.statusLabel(e)),D(2),J(``,e.durationMs,` ms`),D(),j(e.cacheStored?9:e.cacheSkip?10:-1),D(2),j(!e.cacheStored&&e.cacheSkip?11:-1)}}function Fce(e,t){e&1&&(F(0,`p`,22),K(1,`The render made no HttpClient calls.`),I())}function Ice(e,t){e&1&&(F(0,`p`,29),K(1),I()),e&2&&(D(),J(`Why: `,t,`.`))}function Lce(e,t){if(e&1&&(F(0,`p`,24)(1,`span`,11),K(2),I(),F(3,`span`,27),K(4),I(),F(5,`span`,19),K(6,`cache miss`),I()(),A(7,Ice,2,1,`p`,29)),e&2){let e,n=t.$implicit,r=W(4);D(2),q(n.method),D(),P(`title`,n.url),D(),q(n.url),D(3),j((e=r.refetchReason(n))?7:-1,e)}}function Rce(e,t){if(e&1&&(F(0,`h3`),K(1),I(),F(2,`p`,22),K(3,` These calls ran on the server and again after hydration instead of reading the transfer cache. `),I(),M(4,Lce,8,4,null,null,K8)),e&2){let e=W(3);D(),J(`Fetched again in the browser (`,e.refetched().length,`)`),D(3),N(e.refetched())}}function zce(e,t){e&1&&(F(0,`p`,23),K(1,`No server call ran again in the browser.`),I())}function Bce(e,t){if(e&1&&(F(0,`div`,7)(1,`h3`,20),K(2),F(3,`code`),K(4),I()(),F(5,`dl`,21)(6,`div`)(7,`dt`),K(8,`Request id`),I(),F(9,`dd`)(10,`code`),K(11),I()()(),F(12,`div`)(13,`dt`),K(14,`Render`),I(),F(15,`dd`),K(16),I()(),F(17,`div`)(18,`dt`),K(19,`Total`),I(),F(20,`dd`),K(21),I()(),F(22,`div`)(23,`dt`),K(24,`Sent`),I(),F(25,`dd`),K(26),I()(),F(27,`div`)(28,`dt`),K(29,`Browser page`),I(),F(30,`dd`),K(31),I()()(),A(32,bce,11,1,`p`,22),A(33,Cce,6,0),A(34,Ace,4,0),F(35,`h3`),K(36),I(),M(37,Pce,12,11,null,null,K8,!1,Fce,2,0,`p`,22),A(40,Rce,6,1)(41,zce,2,0,`p`,23),I()),e&2){let e,n=t,r=W(2);D(2),J(` `,n.method,` `),D(2),q(n.url),D(7),q(n.id),D(5),J(``,n.renderMs,` ms`),D(5),J(``,n.durationMs,` ms`),D(5),J(``,n.bytes,` B`),D(5),q(r.requestPage()?.title||r.requestPage()?.url||`not connected`),D(),j((e=r.compressedWith(n))?32:-1,e),D(),j(n.overrides?.length?33:-1),D(),j(n.navigations?.length?34:-1),D(2),J(`Server calls (`,r.requestCalls().length,`)`),D(),N(r.requestCalls()),D(3),j(r.refetched().length?40:r.requestPage()&&r.requestCalls().length?41:-1)}}function Vce(e,t){if(e&1&&(F(0,`div`,2)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,3),K(5,`Request`),I(),F(6,`th`,3),K(7,`Status`),I(),F(8,`th`,3),K(9,`Render mode`),I(),F(10,`th`,4),K(11,`Render`),I(),F(12,`th`,4),K(13,`Server calls`),I(),F(14,`th`,3),K(15,`Notes`),I()()(),F(16,`tbody`,5),M(17,yce,22,22,`tr`,6,K8),I()()(),A(19,Bce,42,13,`div`,7)),e&2){let e,t=W();D(17),N(t.requests()),D(2),j((e=t.selectedRequest())?19:-1,e)}}function Hce(e,t){e&1&&(F(0,`div`,1)(1,`p`),K(2,`No SSR requests traced.`),I(),F(3,`p`,22),K(4,` Add `),F(5,`code`),K(6,`app.use(devtools.ssrMiddleware)`),I(),K(7,` before the Angular handler in `),F(8,`code`),K(9,`server.ts`),I(),K(10,`, or wrap a web-standard handler with `),F(11,`code`),K(12,`withPangularSsr()`),I(),K(13,`, then load a server rendered page. `),I()())}var Uce=class e{state=x(A8);requests=this.state.requests;selected=this.state.selected;selectedRequest=this.state.selectedRequest;selectedRequestId=this.state.selectedRequestId;requestCalls=this.state.requestCalls;requestPage=this.state.requestPage;refetched=this.state.refetched;callTone=T8;compressedWith=hoe;guardVerdict=moe;msLabel=poe;overrideLabel=O8;renderModeLabel=foe;skipText=k8;statusLabel=w8;statusTone=C8;refetchReason(e){return this.state.refetchReason(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`section`,`appSsrRequests`,``]],decls:4,vars:2,consts:[[`id`,`ssr-heading`],[1,`empty`],[1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[`appRovingList`,`button.ssr-row`],[3,`selected`],[`id`,`ssr-detail`,`role`,`region`,`aria-labelledby`,`ssr-detail-heading`,1,`preview`],[3,`click`],[1,`url`],[`type`,`button`,`aria-controls`,`ssr-detail`,1,`link`,`ssr-row`,3,`title`],[1,`method`],[1,`sr-only`],[1,`status`],[`aria-hidden`,`true`,1,`dot`],[1,`num`],[1,`notes`],[1,`tag`,`server`],[1,`tag`,`mock`],[1,`tag`,`fault`],[`id`,`ssr-detail-heading`],[1,`stats`],[1,`muted`,`small`],[1,`muted`,`small`,`ok-note`],[1,`request-call`],[1,`muted`],[1,`stats`,`nav-stats`],[1,`preview-url`,3,`title`],[1,`tag`,3,`title`],[1,`muted`,`small`,`skip-reason`]],template:function(e,t){e&1&&(F(0,`h2`,0),K(1),I(),A(2,Vce,20,1)(3,Hce,14,0,`div`,1)),e&2&&(D(),J(`SSR requests (`,t.requests().length,`)`),D(),j(t.requests().length?2:3))},dependencies:[NV],styles:[`h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  max-height: min(420px, 60vh);
-  overflow: auto;
-  margin: 0 -16px;
-  padding: 0 16px;
-}
-
-.table-wrap[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--%NS%surface);
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 560px;
-  border-collapse: collapse;
-  font-variant-numeric: tabular-nums;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  height: 36px;
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-th[_ngcontent-%COMP%]:first-child, 
-td[_ngcontent-%COMP%]:first-child {
-  padding-left: 8px;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  height: 32px;
-  border-bottom-color: var(--%NS%border-strong);
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-}
-
-td.num[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {
-  cursor: pointer;
-}
-
-tbody[_ngcontent-%COMP%]   tr.spacer[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  padding: 0;
-  border: 0;
-}
-
-.window-note[_ngcontent-%COMP%] {
-  margin: 0 0 6px;
-}
-
-tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-2);
-}
-
-tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], 
-tr.selected[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-}
-
-tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-td.url[_ngcontent-%COMP%] {
-  width: 100%;
-  max-width: 0;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
-  display: block;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-tr.selected[_ngcontent-%COMP%]   td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-td.page-url[_ngcontent-%COMP%] {
-  max-width: 160px;
-  overflow: hidden;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.method[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-2);
-}
-
-.status.ok[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.status.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.dot[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  vertical-align: middle;
-}
-
-.notes[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 4px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.tag.server[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.fault[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tag.mock[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.rule-ref[_ngcontent-%COMP%] {
-  gap: 4px;
-  max-width: 220px;
-}
-
-.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-}
-
-.tag.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.tag.off-tag[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.preview[_ngcontent-%COMP%] {
-  animation: enter 0.2s var(--%NS%ease) both;
-  margin-top: 16px;
-}
-
-.preview-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px 8px;
-  margin-bottom: 4px;
-}
-
-.preview-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-pre.preview-body[_ngcontent-%COMP%] {
-  max-height: 320px;
-}
-
-.preview-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.preview-meta[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-  margin-bottom: 8px;
-}
-
-.request-call[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  min-width: 0;
-  margin: 0 0 4px;
-}
-
-.request-call[_ngcontent-%COMP%]   .preview-url[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-}
-
-.skip-reason[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.nav-stats[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-}
-
-.preview-rule[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.preview-url[_ngcontent-%COMP%] {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--%NS%text-2);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.stats[_ngcontent-%COMP%] {
-  display: grid;
-  margin: 0;
-}
-
-.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  min-height: 36px;
-  padding: 6px 0;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:last-child {
-  border-bottom: none;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.ok-note[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}`]})},Wce=(e,t)=>t.key,Gce=(e,t)=>t.url;function Kce(e,t){if(e&1&&(R(0,`p`,0)(1,`strong`),K(2),z(),K(3,` The payload is inlined in the HTML, so it delays the first render. Look at the largest entries below. `),z()),e&2){let e=W(),t=I_(0);D(2),Y(``,e.bytes(t.size),`, over the `,e.bytes(t.budget),` budget.`)}}function qce(e,t){if(e&1&&(R(0,`p`,1),K(1),z()),e&2){let e=W(),t=I_(0);D(),Y(``,e.bytes(t.size),`, within the `,e.bytes(t.budget),` budget.`)}}function Jce(e,t){if(e&1&&(R(0,`li`)(1,`span`,4),K(2),z(),R(3,`span`,5),K(4),z(),R(5,`span`,6),dg(6,`span`),z()()),e&2){let e=t.$implicit,n=W(2);D(),V(`title`,e.key),D(),q(e.label),D(2),Y(``,n.bytes(e.size),`, `,e.share,`%`),D(2),t_(`width`,e.share,`%`)}}function Yce(e,t){if(e&1&&(R(0,`h3`,2),K(1,`Largest entries`),z(),R(2,`ol`,3),M(3,Jce,7,6,`li`,null,Wce),z()),e&2){W();let e=I_(0);D(3),N(e.largest)}}function Xce(e,t){if(e&1&&(R(0,`li`)(1,`code`,10),K(2),z(),R(3,`span`,5),K(4),z()()),e&2){let e=t.$implicit,n=W(2);D(2),q(e.url),D(2),Y(``,e.keys.length,` keys, `,n.bytes(e.size))}}function Zce(e,t){if(e&1&&(R(0,`h3`,7),K(1),z(),R(2,`p`,8),K(3,` Each key holds its own response, because the headers, params or body differ. Check whether one request could serve them all. `),z(),R(4,`ul`,9),M(5,Xce,5,3,`li`,null,Gce),z()),e&2){W();let e=I_(0);D(),J(` Same URL stored more than once (`,e.sameUrl.length,`) `),D(4),N(e.sameUrl)}}var Qce=class e{size=$(0);entries=$([]);insights=X(()=>Ioe({size:this.size(),entries:this.entries()}));bytes(e){return Loe(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-payload-insights`]],inputs:{size:[1,`size`],entries:[1,`entries`]},decls:5,vars:4,consts:[[1,`budget`,`over`],[1,`budget`],[`id`,`payload-largest-heading`],[`aria-labelledby`,`payload-largest-heading`,1,`largest`],[1,`name`,3,`title`],[1,`size`],[`aria-hidden`,`true`,1,`bar`],[`id`,`payload-same-url-heading`],[1,`hint`],[`aria-labelledby`,`payload-same-url-heading`,1,`same-url`],[1,`name`]],template:function(e,t){if(e&1&&(P_(0),A(1,Kce,4,2,`p`,0)(2,qce,2,2,`p`,1),A(3,Yce,5,0),A(4,Zce,7,1)),e&2){let e=F_(t.insights());D(),j(e.overBudget?1:2),D(2),j(e.largest.length?3:-1),D(),j(e.sameUrl.length?4:-1)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-  margin-bottom: 12px;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 12px 0 6px;
-}
-
-.budget[_ngcontent-%COMP%], 
-.hint[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.budget.over[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%border-strong);
-  border-left: 3px solid var(--%NS%warn);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-ol[_ngcontent-%COMP%], 
-ul[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-li[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 2px 8px;
-  font-size: 12px;
-}
-
-.name[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-  color: var(--%NS%text);
-}
-
-.size[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.bar[_ngcontent-%COMP%] {
-  grid-column: 1/-1;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--%NS%surface-3);
-  overflow: hidden;
-}
-.bar[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  display: block;
-  height: 100%;
-  background: var(--%NS%accent);
-}
-
-.same-url[_ngcontent-%COMP%] {
-  margin-top: 6px;
-}`]})},$ce=(e,t)=>t.key;function ele(e,t){if(e&1){let e=B();F(0,`div`,1)(1,`button`,3),H(`click`,function(){let t=S(e);return C(W().refetchPayload(t.pageId))}),K(2),I(),F(3,`span`,4),K(4,` Renders this URL again on the server, with this tab's cookies, and shows the payload it sends now. The tab does not reload. `),I()()}if(e&2){let e=W();D(),P(`disabled`,!e.canWrite()||e.refetching()),k(`aria-describedby`,e.canWrite()?`refetch-hint`:`http-writes-off refetch-hint`),D(),J(` `,e.refetching()?`Refetching…`:`Refetch`,` `)}}function tle(e,t){e&1&&(F(0,`div`,2)(1,`p`),K(2,`No TransferState script: this page was not server rendered.`),I()())}function nle(e,t){e&1&&(F(0,`span`,6),K(1,`Refetched`),I())}function rle(e,t){if(e&1&&(F(0,`p`,7),K(1),I()),e&2){let e=W(2);D(),q(e.error)}}function ile(e,t){e&1&&(F(0,`span`,12),K(1),I()),e&2&&(D(),q(t))}function ale(e,t){if(e&1&&(F(0,`span`,12),K(1),I(),F(2,`span`,13),K(3),I()),e&2){let e=t,n=W().$implicit,r=W(3);G(`server`,r.statusTone(e.status)===`ok`)(`fault`,r.statusTone(e.status)===`bad`),D(),J(`HTTP `,e.status),D(2),q(e.url??n.key)}}function ole(e,t){if(e&1&&(F(0,`span`,13),K(1),I()),e&2){let e=W().$implicit;D(),q(e.key)}}function sle(e,t){if(e&1){let e=B();F(0,`button`,19),H(`click`,function(){S(e);let t=W().$implicit;return C(W(3).editEntry(t))}),K(1,` Edit in SSR overrides `),I()}if(e&2){let e=W().$implicit;k(`aria-label`,`Edit in SSR overrides, key `+e.key)}}function cle(e,t){if(e&1){let e=B();F(0,`details`)(1,`summary`),L(2,`span`,11),A(3,ile,2,1,`span`,12),A(4,ale,4,6)(5,ole,2,1,`span`,13),F(6,`span`,14),K(7),I()(),F(8,`div`,15)(9,`span`,16),K(10,`Key`),I(),F(11,`code`,17),K(12),I(),F(13,`div`,18)(14,`button`,19),H(`click`,function(){let t=S(e).$implicit;return C(W(3).copyKey(t.key))}),K(15,` Copy `),I(),A(16,sle,2,1,`button`,20),I()(),F(17,`pre`,21),K(18),Z_(19,`json`),I()()}if(e&2){let e,n,r=t.$implicit,i=W(3);D(3),j((e=i.payloadLabel(r))?3:-1,e),D(),j((n=r.http)?4:5,n),D(3),J(``,r.size,` B`),D(5),q(r.key),D(2),k(`aria-label`,`Copy key `+r.key),D(2),j(i.canEditEntry(r)?16:-1),D(),k(`aria-label`,`Value of `+r.key),D(),q(Q_(19,8,r.value))}}function lle(e,t){if(e&1&&(F(0,`p`,5),K(1),A(2,nle,2,0,`span`,6),I(),A(3,rle,2,1,`p`,7),L(4,`app-redaction-count`,8)(5,`app-payload-insights`,9),F(6,`div`,10),M(7,cle,20,10,`details`,null,$ce),I()),e&2){let e=W();D(),D_(` `,e.entries.length,` entr`,e.entries.length===1?`y`:`ies`,`, `,e.size,` bytes `),D(),j(e.refetchedAt?2:-1),D(),j(e.error?3:-1),D(),P(`value`,e.entries),D(),P(`size`,e.size)(`entries`,e.entries),D(2),N(e.entries)}}function ule(e,t){e&1&&A(0,tle,3,0,`div`,2)(1,lle,9,8),e&2&&j(+!!t.found)}function dle(e,t){e&1&&(F(0,`div`,2)(1,`p`),K(2,`Open a page of the app to see its payload.`),I()())}var fle=class e{state=x(A8);overrideState=x(G8);canWrite=this.state.canWrite;selected=this.state.selected;selectedPayload=this.state.selectedPayload;refetching=this.state.refetching;payloadLabel=goe;statusTone=C8;refetchPayload(e){this.state.refetchPayload(e)}copyKey(e){this.state.copyKey(e)}canEditEntry(e){return this.overrideState.canEditEntry(e)}editEntry(e){this.overrideState.editEntry(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`section`,`appTransferPayload`,``]],decls:5,vars:2,consts:[[`id`,`payload-heading`],[1,`payload-tools`],[1,`empty`],[`type`,`button`,`data-refetch-payload`,``,3,`click`,`disabled`],[`id`,`refetch-hint`,1,`muted`,`small`],[1,`muted`,`small`,`summary-line`],[`data-refetched`,``,1,`tag`],[`role`,`alert`,1,`bad`],[3,`value`],[3,`size`,`entries`],[1,`entries`],[`aria-hidden`,`true`,1,`chevron`],[1,`tag`],[1,`entry-key`],[1,`entry-size`],[1,`entry-key-row`],[1,`entry-key-label`],[1,`entry-key-text`],[1,`entry-actions`],[`type`,`button`,1,`ghost`,3,`click`],[`type`,`button`,1,`ghost`],[`tabindex`,`0`,`role`,`region`]],template:function(e,t){if(e&1&&(F(0,`h2`,0),K(1,`TransferState payload`),I(),A(2,ele,5,3,`div`,1),A(3,ule,2,1)(4,dle,3,0,`div`,2)),e&2){let e,n;D(2),j((e=t.selected())?2:-1,e),D(),j((n=t.selectedPayload())?3:4,n)}},dependencies:[Qce,aP,$v],styles:[`h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.method[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-strong);
-}
-
-.status[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--%NS%text-2);
-}
-
-.status.ok[_ngcontent-%COMP%] {
-  color: var(--%NS%ok);
-}
-
-.status.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.dot[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  margin-right: 6px;
-  border-radius: 50%;
-  background: currentColor;
-  vertical-align: middle;
-}
-
-.notes[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 4px;
-}
-
-.tag[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  padding: 0 8px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 99px;
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.tag.server[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.fault[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.tag.mock[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.tag.rule-ref[_ngcontent-%COMP%] {
-  gap: 4px;
-  max-width: 220px;
-}
-
-.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--%NS%font-mono);
-}
-
-.tag.on[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.tag.off-tag[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-pre[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 10px 12px;
-  max-height: 240px;
-  overflow: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text-2);
-  font: 12px/1.5 var(--%NS%font-mono);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-pre[_ngcontent-%COMP%]    + pre[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}
-
-pre.warn[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  color: var(--%NS%warn);
-}
-
-pre.error[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  color: var(--%NS%danger);
-}
-
-.summary-line[_ngcontent-%COMP%] {
-  margin-bottom: 8px;
-  font-variant-numeric: tabular-nums;
-}
-
-.payload-tools[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin-bottom: 12px;
-}
-
-.payload-tools[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
-  flex: 1 1 240px;
-  min-width: 0;
-}
-
-.entries[_ngcontent-%COMP%] {
-  border-top: 1px solid var(--%NS%border);
-}
-
-details[_ngcontent-%COMP%] {
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-details[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-}
-
-summary[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 36px;
-  padding: 6px 4px;
-  border-radius: 4px;
-  list-style: none;
-  cursor: pointer;
-  transition: background-color 0.15s var(--%NS%ease);
-}
-
-summary[_ngcontent-%COMP%]::-webkit-details-marker {
-  display: none;
-}
-
-summary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.chevron[_ngcontent-%COMP%] {
-  flex: none;
-  width: 6px;
-  height: 6px;
-  margin: 0 4px;
-  border-right: 1.5px solid var(--%NS%text-3);
-  border-bottom: 1.5px solid var(--%NS%text-3);
-  transform: rotate(-45deg);
-  transition: transform 0.15s var(--%NS%ease);
-}
-
-details[open][_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
-  transform: rotate(45deg);
-}
-
-.entry-key[_ngcontent-%COMP%] {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-summary[_ngcontent-%COMP%]:hover   .entry-key[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-
-.entry-key-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px 8px;
-  min-width: 0;
-  margin: 0 0 8px;
-  padding: 0 4px;
-}
-
-.entry-key-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  flex: none;
-}
-
-.entry-key-text[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-  user-select: text;
-}
-
-.entry-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.entry-size[_ngcontent-%COMP%] {
-  flex: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}`]})},ple=()=>[];function mle(e,t){e&1&&(F(0,`app-state`,1),K(1,`Loading HTTP calls…`),I())}function hle(e,t){if(e&1){let e=B();F(0,`app-state`,20),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Could not reach the devtools server. `),F(2,`p`,21),K(3,`Check that the app's dev server is running with the devtools plugin.`),I()()}}var gle=class e{rpc=$(null);state=x(A8);ruleState=x(W8);overrideState=x(G8);canWrite=this.state.canWrite;loading=this.state.loading;failed=this.state.failed;serverCalls=this.state.serverCalls;pages=this.state.pages;payloads=this.state.payloads;requests=this.state.requests;rules=this.state.rules;overrides=this.state.overrides;message=this.state.message;selected=this.state.selected;selectedCallId=this.state.selectedCallId;selectedCall=this.state.selectedCall;selectedRequestId=this.state.selectedRequestId;refetched=this.state.refetched;timeline=this.state.timeline;sideFilter=this.state.sideFilter;failedOnly=this.state.failedOnly;pageOptions=this.state.pageOptions;pageSsrRequest=this.state.pageSsrRequest;renderServerCalls=this.state.renderServerCalls;draft=this.ruleState.draft;draftRule=this.ruleState.draftRule;methodOptions=this.ruleState.methodOptions;overrideDraft=this.overrideState.overrideDraft;overrideFromPayload=this.overrideState.overrideFromPayload;overrideReady=this.overrideState.overrideReady;overrideValueError=this.overrideState.overrideValueError;mocksOnServer=D8;constructor(){this.state.connect(this.rpc),lJ(`network`,this.selectedCallId),E(()=>{let e=this.rpc();e&&this.state.load(e)})}retry(){this.state.retry()}selectPage(e){e&&this.state.selectedPageId.set(e),this.selectedCallId.set(null),this.overrideFromPayload.set(null)}openCall(e){this.state.openCall(e)}clearCalls(){return this.state.clearCalls()}copyPreview(e){return this.state.copyPreview(e)}copyKey(e){return this.state.copyKey(e)}setDraft(e,t){this.ruleState.setDraft(e,t)}addRule(e){return this.ruleState.addRule(e)}toggleRule(e){this.ruleState.toggleRule(e)}removeRule(e){return this.ruleState.removeRule(e)}setOverrideDraft(e,t){this.overrideState.setOverrideDraft(e,t)}canEditEntry(e){return this.overrideState.canEditEntry(e)}addOverride(e){return this.overrideState.addOverride(e)}toggleOverride(e){this.overrideState.toggleOverride(e)}removeOverride(e){return this.overrideState.removeOverride(e)}announce(e){this.state.announce(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-network-inspector`]],inputs:{rpc:[1,`rpc`]},features:[W_([A8,W8,G8])],decls:25,vars:15,consts:[[1,`page-intro`],[`kind`,`loading`],[`kind`,`error`],[1,`toolbar`,3,`hidden`],[1,`page-picker`],[`id`,`page-picker-label`],[`labelledBy`,`page-picker-label`,`emptyText`,`No connected page`,`placeholder`,`No connected page`,3,`valueChange`,`options`,`value`],[`type`,`button`,3,`click`,`disabled`],[3,`done`,`calls`,`ssrRequest`,`title`,`pageUrl`],[`role`,`status`,1,`message`],[1,`grid`,3,`hidden`],[`appSsrRequests`,``,`aria-labelledby`,`ssr-heading`,1,`panel`,`wide`],[`appCallTimeline`,``,`aria-labelledby`,`timeline-heading`,1,`panel`,`wide`],[`aria-labelledby`,`lint-heading`,1,`panel`,`wide`],[`id`,`lint-heading`],[3,`open`,`calls`,`serverCalls`],[`appFaultRules`,``,`aria-labelledby`,`rules-heading`,1,`panel`],[`appSsrOverrides`,``,`aria-labelledby`,`overrides-heading`,1,`panel`],[`appHydrationStats`,``,`aria-labelledby`,`hydration-heading`,1,`panel`],[`appTransferPayload`,``,`aria-labelledby`,`payload-heading`,1,`panel`,`wide`],[`kind`,`error`,3,`retry`],[`detail`,``]],template:function(e,t){e&1&&(F(0,`p`,0),K(1,` HttpClient calls made while rendering on the server and in the browser, from the live page and the devtools server, with hydration stats, the TransferState payload and fault injection. `),I(),A(2,mle,2,0,`app-state`,1)(3,hle,4,0,`app-state`,2),F(4,`div`,3)(5,`div`,4)(6,`span`,5),K(7,`Page`),I(),F(8,`app-select`,6),H(`valueChange`,function(e){return t.selectPage(e)}),I()(),F(9,`button`,7),H(`click`,function(){return t.clearCalls()}),K(10,` Clear timeline `),I(),F(11,`app-har-export`,8),H(`done`,function(e){return t.message.set(e)}),I(),F(12,`p`,9),K(13),I()(),F(14,`div`,10),L(15,`section`,11)(16,`section`,12),F(17,`section`,13)(18,`h2`,14),K(19,`HTTP lint`),I(),F(20,`app-http-lint`,15),H(`open`,function(e){return t.openCall(e)}),I()(),L(21,`section`,16)(22,`section`,17)(23,`section`,18)(24,`section`,19),I()),e&2&&(D(2),j(t.loading()?2:t.failed()?3:-1),D(2),P(`hidden`,t.loading()),D(4),P(`options`,t.pageOptions())(`value`,t.selected()?.pageId??null),D(),P(`disabled`,!t.canWrite()),k(`aria-describedby`,t.canWrite()?null:`http-writes-off`),D(2),P(`calls`,t.timeline())(`ssrRequest`,t.pageSsrRequest())(`title`,t.selected()?.title??``)(`pageUrl`,t.selected()?.url),D(2),q(t.message()),D(),P(`hidden`,t.loading()),D(6),P(`calls`,t.selected()?.calls??G_(14,ple))(`serverCalls`,t.renderServerCalls()))},dependencies:[HL,gse,Nse,Fse,Use,rce,wD,mce,Uce,fle],styles:[`.page-intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[hidden][_ngcontent-%COMP%], 
-.grid[hidden][_ngcontent-%COMP%] {
-  display: none;
-}
-
-[_nghost-%COMP%] {
-  display: block;
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.state[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 16px;
-  padding: 10px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-}
-
-.state.error[_ngcontent-%COMP%] {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.state.error[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  font-weight: 600;
-}
-
-.state.error[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.state.error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  margin-top: 4px;
-}
-
-.spinner[_ngcontent-%COMP%] {
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--%NS%border-strong);
-  border-top-color: var(--%NS%accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin: 0 0 16px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-}
-
-.toolbar[_ngcontent-%COMP%]   .page-picker[_ngcontent-%COMP%] {
-  display: flex;
-  flex: 0 1 auto;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.page-picker[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.toolbar[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-  width: 280px;
-  max-width: 420px;
-}
-
-.message[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  text-align: right;
-}
-
-.message[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.grid[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.panel[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  animation: enter 0.35s var(--%NS%ease) both;
-  min-width: 0;
-  padding: 16px;
-}
-
-.wide[_ngcontent-%COMP%] {
-  grid-column: 1/-1;
-}
-
-h2[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 16px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-label[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-label.inline[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.hint[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-weight: 400;
-}
-
-input[_ngcontent-%COMP%], 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%], 
-button[_ngcontent-%COMP%] {
-  font: inherit;
-  color: var(--%NS%text);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%], 
-textarea[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background-color: var(--%NS%bg);
-  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]), 
-select[_ngcontent-%COMP%] {
-  height: 34px;
-}
-
-select[_ngcontent-%COMP%] {
-  padding-right: 36px;
-}
-
-textarea[_ngcontent-%COMP%] {
-  padding: 8px 10px;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-input[_ngcontent-%COMP%]::placeholder, 
-textarea[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
-select[_ngcontent-%COMP%]:hover, 
-textarea[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
-}
-
-input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
-select[_ngcontent-%COMP%]:focus-visible, 
-textarea[_ngcontent-%COMP%]:focus-visible {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-textarea[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
-}
-
-input[type=checkbox][_ngcontent-%COMP%] {
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--%NS%accent);
-  cursor: pointer;
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 34px;
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  font-weight: 500;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
-}
-
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%surface-3);
-}
-
-button[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-button[type=submit][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%accent-hover);
-  background: var(--%NS%accent-hover);
-}
-
-button[_ngcontent-%COMP%]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-button.ghost[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  border-color: transparent;
-  background: none;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border-color: var(--%NS%border-strong);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-button.link[_ngcontent-%COMP%] {
-  display: inline;
-  height: auto;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: none;
-  color: var(--%NS%text);
-  text-align: left;
-}
-
-button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
-  border: none;
-  background: none;
-  color: var(--%NS%accent);
-}
-
-button.link[_ngcontent-%COMP%]:active:not(:disabled) {
-  transform: none;
-}
-
-[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.small[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.bad[_ngcontent-%COMP%] {
-  color: var(--%NS%danger);
-}
-
-.empty[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  padding: 24px 16px;
-  border: 1px dashed var(--%NS%border-strong);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-actions[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: center;
-  margin-top: 8px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-@media (max-width: 760px) {
-  .grid[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .toolbar[_ngcontent-%COMP%]   .page-picker[_ngcontent-%COMP%] {
-    flex: 1 1 100%;
-  }
-  .toolbar[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
-    flex: 1 1 auto;
-    width: auto;
-    max-width: none;
-  }
-  .message[_ngcontent-%COMP%] {
-    text-align: left;
-  }
-}`]})};function _le(e,t){e&1&&(w(),R(0,`svg`,9),dg(1,`path`,21),z())}function vle(e,t){e&1&&(w(),R(0,`svg`,10)(1,`defs`)(2,`linearGradient`,22),dg(3,`stop`,23)(4,`stop`,24),z()(),dg(5,`path`,25),R(6,`g`,26),dg(7,`path`,27)(8,`path`,28)(9,`path`,29)(10,`path`,30),z()())}function yle(e,t){e&1&&(w(),R(0,`svg`,11),dg(1,`path`,31)(2,`path`,32)(3,`path`,33)(4,`path`,34),z())}function ble(e,t){e&1&&(w(),R(0,`svg`,9),dg(1,`path`,35)(2,`path`,36)(3,`path`,37)(4,`path`,38)(5,`path`,39)(6,`path`,40),z())}function xle(e,t){if(e&1&&(R(0,`a`,16)(1,`span`,41)(2,`strong`),K(3),z()(),R(4,`span`,42),K(5,`→`),z(),R(6,`span`,43),K(7,`(opens in a new tab)`),z()()),e&2){let e=t;V(`href`,e.href,Du),D(3),q(e.label)}}function Sle(e,t){if(e&1&&(R(0,`li`),K(1),z()),e&2){let e=t.$implicit,n=t.$index;t_(`animation-delay`,200+n*120,`ms`),D(),q(e)}}function Cle(e,t){if(e&1&&(R(0,`p`,20)(1,`a`,44),K(2,`Supported and planned platforms`),R(3,`span`,43),K(4,` (opens in a new tab)`),z()()()),e&2){let e=W();D(),V(`href`,e.platformsUrl,Du)}}var wle=`https://pangular-inspector.dev/getting-started/platforms/`,Tle=class e{info=$.required();platformsUrl=wle;plansTitle=X(()=>{let e=this.info();return e.plansTitle??(e.link?`In an ${e.name} app`:`On the roadmap`)});static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-coming-soon`]],hostVars:2,hostBindings:function(e,t){e&2&&t_(`--%NS%brand`,t.info().color)},inputs:{info:[1,`info`]},decls:30,vars:7,consts:[[`aria-labelledby`,`soon-title`,1,`soon`],[`aria-hidden`,`true`,1,`stage`],[1,`ring`,`r1`],[1,`ring`,`r2`],[1,`orbit`,`o1`],[1,`dot`],[1,`orbit`,`o2`],[1,`orbit`,`o3`],[1,`logo`],[`viewBox`,`0 0 256 256`,`width`,`96`,`height`,`96`],[`viewBox`,`0 0 32 32`,`width`,`88`,`height`,`88`],[`viewBox`,`0 0 256 182`,`width`,`104`,`height`,`74`],[1,`badge`],[`aria-hidden`,`true`,1,`spark`],[`id`,`soon-title`],[1,`summary`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`author`,`cta`,3,`href`],[1,`plans-title`],[1,`plans`],[3,`animation-delay`],[1,`platforms`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`id`,`an-hero-grad`,`x1`,`0`,`y1`,`0`,`x2`,`1`,`y2`,`1`],[`offset`,`0`,`stop-color`,`#f0224f`],[`offset`,`1`,`stop-color`,`#c4002d`],[`d`,`M16 0C27.2 0 32 4.8 32 16S27.2 32 16 32 0 27.2 0 16 4.8 0 16 0Z`,`fill`,`url(#an-hero-grad)`],[`transform`,`translate(6.4 6.4) scale(0.8)`,`fill`,`#fff`],[`d`,`M14.8486 0L23.138 16.8551L23.9996 3.99892L14.8486 0Z`],[`d`,`M16.9875 17.7114H7.01272L5.73926 20.627L12.0001 24L18.261 20.627L16.9875 17.7114Z`],[`d`,`M8.72168 13.9298H15.2812L11.9997 6.39575L8.72168 13.9298Z`],[`d`,`M9.15103 0L0 3.99892L0.861556 16.8551L9.15103 0Z`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[1,`who`],[`aria-hidden`,`true`,1,`go`],[1,`sr-only`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){if(e&1&&(R(0,`section`,0)(1,`div`,1),dg(2,`span`,2)(3,`span`,3),R(4,`span`,4),dg(5,`span`,5),z(),R(6,`span`,6),dg(7,`span`,5),z(),R(8,`span`,7),dg(9,`span`,5),z(),R(10,`div`,8),A(11,_le,2,0,`:svg:svg`,9)(12,vle,11,0,`:svg:svg`,10)(13,yle,5,0,`:svg:svg`,11)(14,ble,7,0,`:svg:svg`,9),z()(),R(15,`p`,12)(16,`span`,13),K(17,`✦`),z(),K(18),z(),R(19,`h2`,14),K(20),z(),R(21,`p`,15),K(22),z(),A(23,xle,8,2,`a`,16),R(24,`h3`,17),K(25),z(),R(26,`ul`,18),M(27,Sle,2,3,`li`,19,eg),z(),A(29,Cle,5,1,`p`,20),z()),e&2){let e,n;D(11),j((e=t.info().id)===`nativescript`?11:e===`angular-native`?12:e===`analog`?13:e===`capacitor`?14:-1),D(7),J(` `,t.info().badge),D(2),q(t.info().heading),D(2),q(t.info().summary),D(),j((n=t.info().link)?23:-1,n),D(2),J(` `,t.plansTitle(),` `),D(2),N(t.info().plans),D(2),j(t.info().id===`analog`?-1:29)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-  min-height: 100%;
-  background: radial-gradient(60% 50% at 50% 18%, color-mix(in srgb, var(--%NS%brand) 22%, transparent), transparent 70%);
-}
-
-.soon[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 560px;
-  margin: 0 auto;
-  padding: 24px 0 40px;
-  color: var(--%NS%text-2);
-  text-align: center;
-}
-
-.stage[_ngcontent-%COMP%] {
-  position: relative;
-  display: grid;
-  place-items: center;
-  width: 180px;
-  height: 180px;
-  margin: 0 auto 16px;
-}
-
-.logo[_ngcontent-%COMP%] {
-  position: relative;
-  z-index: 2;
-  display: grid;
-  place-items: center;
-  width: 116px;
-  height: 116px;
-  border-radius: 32px;
-  background: var(--%NS%surface-2);
-  box-shadow: 0 0 0 1px color-mix(in srgb, var(--%NS%brand) 45%, transparent), 0 20px 60px -10px color-mix(in srgb, var(--%NS%brand) 70%, transparent);
-  animation: _ngcontent-%COMP%_float 4s ease-in-out infinite;
-}
-
-.ring[_ngcontent-%COMP%] {
-  position: absolute;
-  inset: 30px;
-  border-radius: 50%;
-  border: 1px solid color-mix(in srgb, var(--%NS%brand) 60%, transparent);
-  animation: _ngcontent-%COMP%_pulse 3s ease-out infinite;
-}
-
-.r2[_ngcontent-%COMP%] {
-  animation-delay: 1.5s;
-}
-
-.orbit[_ngcontent-%COMP%] {
-  position: absolute;
-  inset: 0;
-  animation: spin 9s linear infinite;
-}
-
-.o2[_ngcontent-%COMP%] {
-  inset: 18px;
-  animation-duration: 6s;
-  animation-direction: reverse;
-}
-
-.o3[_ngcontent-%COMP%] {
-  inset: 40px;
-  animation-duration: 12s;
-}
-
-.dot[_ngcontent-%COMP%] {
-  position: absolute;
-  top: -4px;
-  left: 50%;
-  width: 8px;
-  height: 8px;
-  margin-left: -4px;
-  border-radius: 50%;
-  background: var(--%NS%brand);
-  box-shadow: 0 0 12px var(--%NS%brand);
-}
-
-.o2[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
-  width: 6px;
-  height: 6px;
-  background: var(--%NS%accent);
-  box-shadow: 0 0 10px var(--%NS%accent);
-}
-
-.o3[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
-  width: 4px;
-  height: 4px;
-  background: var(--%NS%text-strong);
-}
-
-.badge[_ngcontent-%COMP%] {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 24px;
-  margin: 0 0 12px;
-  padding: 0 12px;
-  overflow: hidden;
-  border: 1px solid color-mix(in srgb, var(--%NS%brand) 55%, transparent);
-  border-radius: 99px;
-  background: color-mix(in srgb, var(--%NS%brand) 14%, var(--%NS%surface));
-  color: var(--%NS%text-strong);
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-}
-
-.badge[_ngcontent-%COMP%]::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.2) 50%, transparent 80%);
-  transform: translateX(-100%);
-  animation: _ngcontent-%COMP%_shimmer 2.8s ease-in-out infinite;
-}
-
-.spark[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  animation: _ngcontent-%COMP%_twinkle 1.6s ease-in-out infinite;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 28px;
-  line-height: 1.2;
-  letter-spacing: -0.02em;
-  text-wrap: balance;
-  overflow-wrap: anywhere;
-}
-
-.summary[_ngcontent-%COMP%] {
-  max-width: 480px;
-  margin: 12px 0 24px;
-  font-size: 14px;
-  line-height: 1.6;
-  text-wrap: pretty;
-}
-
-.author[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  max-width: 100%;
-  min-height: 44px;
-  padding: 8px 16px 8px 8px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  text-align: left;
-  text-decoration: none;
-  transition: border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease);
-}
-
-.author[_ngcontent-%COMP%]:hover {
-  border-color: color-mix(in srgb, var(--%NS%brand) 70%, transparent);
-  background: var(--%NS%surface-2);
-  transform: translateY(-2px);
-}
-
-.author[_ngcontent-%COMP%]:active {
-  transform: none;
-}
-
-.author[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.cta[_ngcontent-%COMP%] {
-  padding: 8px 16px;
-}
-
-.who[_ngcontent-%COMP%] {
-  display: grid;
-  min-width: 0;
-  line-height: 1.35;
-}
-
-.who[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  overflow: hidden;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.go[_ngcontent-%COMP%] {
-  flex: none;
-  margin-left: 4px;
-  color: var(--%NS%brand);
-  font-size: 16px;
-  transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease);
-}
-
-.author[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%], 
-.author[_ngcontent-%COMP%]:focus-visible   .go[_ngcontent-%COMP%] {
-  transform: translateX(3px);
-}
-
-.plans-title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  width: 100%;
-  max-width: 440px;
-  margin: 32px 0 12px;
-  text-align: left;
-}
-
-.plans[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 8px;
-  width: 100%;
-  max-width: 440px;
-  margin: 0 auto;
-  padding: 0;
-  list-style: none;
-  text-align: left;
-}
-
-.plans[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  padding: 12px 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font-size: 13px;
-  line-height: 20px;
-  overflow-wrap: anywhere;
-  opacity: 0;
-  animation: _ngcontent-%COMP%_rise 0.5s var(--%NS%ease) forwards;
-}
-
-.plans[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]::before {
-  content: "";
-  flex: none;
-  width: 8px;
-  height: 8px;
-  margin-top: 6px;
-  border-radius: 50%;
-  background: var(--%NS%brand);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%brand) 20%, transparent);
-}
-
-.platforms[_ngcontent-%COMP%] {
-  width: 100%;
-  max-width: 440px;
-  margin: 16px auto 0;
-  font-size: 13px;
-  text-align: left;
-}
-
-.platforms[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent-text);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.platforms[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text-strong);
-}
-
-.platforms[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-@media (max-height: 640px) {
-  .soon[_ngcontent-%COMP%] {
-    padding-top: 12px;
-  }
-  .stage[_ngcontent-%COMP%] {
-    width: 120px;
-    height: 120px;
-    margin-bottom: 8px;
-  }
-  .logo[_ngcontent-%COMP%] {
-    width: 80px;
-    height: 80px;
-    border-radius: 22px;
-  }
-  .logo[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-    width: 60px;
-    height: auto;
-  }
-  .o3[_ngcontent-%COMP%] {
-    display: none;
-  }
-  h2[_ngcontent-%COMP%] {
-    font-size: 22px;
-  }
-}
-@media (max-width: 420px) {
-  h2[_ngcontent-%COMP%] {
-    font-size: 22px;
-  }
-  .author[_ngcontent-%COMP%] {
-    align-self: stretch;
-  }
-  .who[_ngcontent-%COMP%] {
-    flex: 1;
-  }
-}
-@keyframes _ngcontent-%COMP%_float {
-  50% {
-    transform: translateY(-10px) rotate(-2deg);
-  }
-}
-@keyframes _ngcontent-%COMP%_pulse {
-  from {
-    transform: scale(0.8);
-    opacity: 0.9;
-  }
-  to {
-    transform: scale(1.6);
-    opacity: 0;
-  }
-}
-@keyframes _ngcontent-%COMP%_shimmer {
-  60%, 100% {
-    transform: translateX(100%);
-  }
-}
-@keyframes _ngcontent-%COMP%_twinkle {
-  50% {
-    opacity: 0.35;
-    transform: scale(0.8);
-  }
-}
-@keyframes _ngcontent-%COMP%_rise {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .logo[_ngcontent-%COMP%], 
-   .ring[_ngcontent-%COMP%], 
-   .orbit[_ngcontent-%COMP%], 
-   .badge[_ngcontent-%COMP%]::after, 
-   .spark[_ngcontent-%COMP%] {
-    animation: none;
-  }
-  .ring[_ngcontent-%COMP%] {
-    opacity: 0.3;
-  }
-  .plans[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-    opacity: 1;
-    animation: none;
-  }
-  .author[_ngcontent-%COMP%]:hover, 
-   .author[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%] {
-    transform: none;
-  }
-}`]})},Ele=new Set([`CapacitorCookies`,`CapacitorHttp`,`SystemBars`,`WebView`]);function Dle(e){return e==null?`Unknown`:e?`Yes`:`No`}function Ole(e,t){let n=t.size?Math.max(...t.values())+1:0;for(let r of e)t.has(r.pageId)||t.set(r.pageId,n++);let r=new Set(e.map(e=>e.pageId));for(let e of t.keys())r.has(e)||t.delete(e);return[...e].sort((e,n)=>t.get(e.pageId)-t.get(n.pageId))}function kle(e,t){let n=[...e].sort((e,t)=>t.reportedAt-e.reportedAt);return e.find(e=>e.pageId===t)?.pageId??n.find(e=>e.info.bridge)?.pageId??n[0]?.pageId??null}var q8=new WeakMap;function Ale(e){let t=e.calls;if(Array.isArray(t))return e;let n=q8.get(e);if(!n){let r=Object.values(t??{}).filter(e=>!!e&&typeof e.id==`number`);n={...e,calls:r.sort((e,t)=>e.id-t.id)},q8.set(e,n)}return n}function J8(e){let t=e?.pages;return!t||typeof t!=`object`?[]:Object.values(t).filter(e=>e&&typeof e.pageId==`string`&&!!e.info).map(Ale).sort((e,t)=>t.reportedAt-e.reportedAt)}function Y8(e){let t=e.error;return!!t&&(t.code===`UNIMPLEMENTED`||/not implemented/i.test(t.message))}function X8(e,t){return e.durationMs===void 0?e.status===`pending`?Math.max(0,t-e.startedAt):0:e.durationMs}function Z8(e,t,n){return t===`failed`?e.status===`error`:t===`pending`?e.status===`pending`:t!==`slow`||X8(e,n)>=500}function Q8(e){if(e<1e3)return`${Math.max(0,Math.round(e))} ms`;let t=Math.round(e/1e3);if(t<60)return`${t} s`;let n=Math.round(t/60);return n<60?`${n} min`:`${Math.round(n/60)} h`}function jle(e,t){let n=t-e;return n<1e3?`just now`:`${Q8(n)} ago`}function $8(e,t){return Ele.has(e.name)?null:e.registered===!0&&!e.available?t===`android`||t===`ios`?{before:`Not available on ${t}. Run `,command:`npx cap sync ${t}`,after:`, then run the app again.`}:{before:`Not available here. Run `,command:`npx cap sync`,after:` if it should be native.`}:e.native&&e.registered===!1?{before:`Installed, not imported by the app.`}:null}function Mle(e,t){let n=e.info,r=n=>e.calls.filter(e=>Z8(e,n,t)).length,i=n.env.capacitorHttp;return{pageId:e.pageId,platform:n.platform,native:n.native,logsCalls:n.bridge||n.webCalls,calls:e.calls.length,failed:r(`failed`),slow:r(`slow`),pending:r(`pending`),capacitorHttp:i===null?`Unknown`:i?`On`:`Off`,hints:n.plugins.filter(e=>$8(e,n.platform)).length}}function Nle(e){let t=new Map;for(let n of e){if(n.removed)continue;let e=`${n.plugin} ${n.event}`;t.set(e,(t.get(e)??0)+1)}return t}var e5=/^[A-Za-z_$][\w$]*$/;function t5(e,t=``){if(e===void 0)return`undefined`;if(typeof e!=`object`||!e)return JSON.stringify(e)??String(e);let n=`${t}  `;if(Array.isArray(e))return e.length?`[\n${e.map(e=>n+t5(e,n)).join(`,
-`)},\n${t}]`:`[]`;let r=Object.entries(e);return r.length?`{\n${r.map(([e,t])=>`${n}${e5.test(e)?e:JSON.stringify(e)}: ${t5(t,n)}`).join(`,
-`)},\n${t}}`:`{}`}function Ple(e){let t=e5.test(e.plugin)?e.plugin:`Capacitor.Plugins[${JSON.stringify(e.plugin)}]`,n=e5.test(e.method)?`.${e.method}`:`[${JSON.stringify(e.method)}]`,r=e.args===void 0?[]:[t5(e.args)];return e.kind===`callback`&&(r.length||r.push(`{}`),r.push(`(result, error) => {}`)),`await ${t}${n}(${r.join(`, `)});`}function n5(e){if(e===void 0)return`undefined`;try{return JSON.stringify(e,null,2)??`undefined`}catch{return String(e)}}function Fle(e,t=120){let n;try{n=JSON.stringify(e)??`undefined`}catch{n=String(e)}return n.length>t?`${n.slice(0,t-1)}…`:n}function Ile(e,t){if(e&1){let e=B();R(0,`button`,8),U(`click`,function(){let t=S(e).$implicit;return C(W().tab.set(t))}),K(1),z()}if(e&2){let e=t.$implicit,n=W();V(`id`,`cap-tab-`+e),k(`aria-selected`,n.tab()===e)(`aria-controls`,`cap-panel-`+e)(`tabindex`,n.tab()===e?0:-1),D(),J(` `,n.tabLabel(e),` `)}}function Lle(e,t){e&1&&(R(0,`p`,9),K(1,`No arguments.`),z())}function Rle(e,t){if(e&1&&(R(0,`pre`,10),K(1),z()),e&2){let e=W(2),t=I_(0);D(),q(e.json(t.args))}}function zle(e,t){e&1&&A(0,Lle,2,0,`p`,9)(1,Rle,2,1,`pre`,10),e&2&&(W(),j(I_(0).args===void 0?0:1))}function Ble(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W();D(),q(e.code)}}function Vle(e,t){if(e&1&&(R(0,`p`,11),A(1,Ble,2,1,`code`),K(2),z()),e&2){let e=t;D(),j(e.code?1:-1),D(),J(` `,e.message,` `)}}function Hle(e,t){e&1&&(R(0,`p`,9),K(1,`No answer yet.`),z())}function Ule(e,t){if(e&1&&(R(0,`p`,9),K(1),z()),e&2){W(3);let e=I_(0);D(),J(`The latest of `,e.callbacks,` callbacks.`)}}function Wle(e,t){e&1&&(R(0,`p`,9),K(1,`Resolved without a value.`),z())}function Gle(e,t){if(e&1&&(R(0,`pre`,12),K(1),z()),e&2){let e=W(3),t=I_(0);D(),q(e.json(t.result))}}function Kle(e,t){if(e&1&&(A(0,Ule,2,1,`p`,9),A(1,Wle,2,0,`p`,9)(2,Gle,2,1,`pre`,12)),e&2){W(2);let e=I_(0);j(e.callbacks&&e.callbacks>1?0:-1),D(),j(e.result===void 0?1:2)}}function qle(e,t){if(e&1&&A(0,Vle,3,2,`p`,11)(1,Hle,2,0,`p`,9)(2,Kle,3,2),e&2){let e;W();let t=I_(0);j((e=t.error)?0:t.status===`pending`?1:2,e)}}function Jle(e,t){if(e&1&&(R(0,`div`)(1,`dt`),K(2,`Callbacks`),z(),R(3,`dd`),K(4),z()()),e&2){W(2);let e=I_(0);D(4),q(e.callbacks??0)}}function Yle(e,t){if(e&1&&(R(0,`dl`)(1,`div`)(2,`dt`),K(3,`Started`),z(),R(4,`dd`),K(5),z()(),R(6,`div`)(7,`dt`),K(8,`Finished`),z(),R(9,`dd`),K(10),z()(),R(11,`div`)(12,`dt`),K(13),z(),R(14,`dd`),K(15),z()(),A(16,Jle,5,1,`div`),z()),e&2){let e=W(),t=I_(0);D(5),q(e.time(t.startedAt)),D(5),J(` `,t.durationMs===void 0?`Not yet`:e.time(t.startedAt+t.durationMs),` `),D(3),q(t.status===`pending`?`Waiting for`:`Duration`),D(2),q(e.span(e.took(t,e.now()))),D(),j(t.kind===`callback`?16:-1)}}var r5=[`args`,`outcome`,`timing`],Xle=class e{call=$.required();now=$.required();announce=cv();host=x(Ml);tab=T(`args`);tabOrder=r5;json=n5;time=VE;span=Q8;took=X8;statusText=X(()=>{let e=this.call();return e.status===`pending`?`Pending`:e.status===`ok`?`OK`:Y8(e)?`Not implemented`:`Error`});panelHasFocusable=X(()=>{let e=this.call();return this.tab()===`args`?e.args!==void 0:this.tab()===`outcome`&&!e.error&&e.status===`ok`&&e.result!==void 0});tabLabel(e){return e===`args`?`Arguments`:e===`timing`?`Timing`:this.call().status===`error`?`Error`:`Result`}onTabKey(e){let t=r5.indexOf(this.tab()),n;if(e.key===`ArrowRight`)n=(t+1)%r5.length;else if(e.key===`ArrowLeft`)n=(t-1+r5.length)%r5.length;else if(e.key===`Home`)n=0;else if(e.key===`End`)n=r5.length-1;else return;e.preventDefault();let r=r5[n];this.tab.set(r),this.host.nativeElement.querySelector(`#cap-tab-${r}`)?.focus()}async copy(e){let t=this.call(),n=`${t.plugin}.${t.method}()`,r=e===`json`?n5(t):Ple(t);try{await navigator.clipboard.writeText(r),this.announce.emit(`Copied ${n} as ${e===`json`?`JSON`:`code`}.`)}catch{this.announce.emit(`The clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-capacitor-call-detail`]],inputs:{call:[1,`call`],now:[1,`now`]},outputs:{announce:`announce`},decls:19,vars:10,consts:[[`id`,`cap-detail`,`aria-labelledby`,`cap-detail-title`,1,`detail`],[`id`,`cap-detail-title`],[1,`meta`],[1,`actions`],[`type`,`button`,1,`small`,3,`click`],[`role`,`tablist`,`aria-label`,`Call details`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`muted`],[`tabindex`,`0`,`aria-label`,`Arguments`],[1,`error-text`],[`tabindex`,`0`,`aria-label`,`Result`]],template:function(e,t){if(e&1&&(P_(0),R(1,`section`,0)(2,`h3`,1)(3,`code`),K(4),z()(),R(5,`p`,2),K(6),z(),R(7,`div`,3)(8,`button`,4),U(`click`,function(){return t.copy(`json`)}),K(9,`Copy as JSON`),z(),R(10,`button`,4),U(`click`,function(){return t.copy(`code`)}),K(11,`Copy as code`),z()(),R(12,`div`,5),U(`keydown`,function(e){return t.onTabKey(e)}),M(13,Ile,2,5,`button`,6,eg),z(),R(15,`div`,7),A(16,zle,2,1)(17,qle,3,1)(18,Yle,17,5,`dl`),z()()),e&2){let e,n=F_(t.call());D(4),Y(``,n.plugin,`.`,n.method,`()`),D(2),D_(` `,t.statusText(),`, `,n.via,`, `,n.kind===`callback`?`stream`:`promise`,` `),D(7),N(t.tabOrder),D(2),V(`id`,`cap-panel-`+t.tab()),k(`aria-labelledby`,`cap-tab-`+t.tab())(`tabindex`,t.panelHasFocusable()?null:0),D(),j((e=t.tab())===`args`?16:e===`outcome`?17:e===`timing`?18:-1)}},styles:[`.detail[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  position: sticky;
-  top: 64px;
-  min-width: 0;
-  margin: 0;
-  padding: 12px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 0 0 4px;
-  font-size: 14px;
-  overflow-wrap: anywhere;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.meta[_ngcontent-%COMP%], 
-.muted[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 10px 0;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.tabs[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 2px;
-  max-width: 100%;
-  margin: 0 0 8px;
-  padding: 2px;
-  overflow-x: auto;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%] {
-  flex: none;
-  height: 28px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:hover {
-  color: var(--%NS%text);
-  background: var(--%NS%surface-2);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][aria-selected=true][_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
-}
-
-.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.panel[_ngcontent-%COMP%] {
-  min-width: 0;
-  border-radius: var(--%NS%radius-sm);
-}
-
-.panel[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-pre[_ngcontent-%COMP%] {
-  max-height: 280px;
-  margin: 0;
-  padding: 8px;
-  overflow: auto;
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-pre[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.error-text[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-  gap: 8px;
-  margin: 0;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 2px;
-}
-
-dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  font-variant-numeric: tabular-nums;
-}`]})},Zle=(e,t)=>t.id,Qle=(e,t)=>t.elementId;function $le(e,t){e&1&&(R(0,`p`,3),K(1,`This page has no `),R(2,`code`),K(3,`ion-router-outlet`),z(),K(4,`.`),z())}function eue(e,t){if(e&1&&(R(0,`code`,8),K(1),z()),e&2){let e=W().$implicit;D(),q(e.name)}}function tue(e,t){if(e&1&&(R(0,`span`,9),K(1,`in tabs `),R(2,`code`),K(3),z()()),e&2){let e=W().$implicit;D(3),q(e.tabs)}}function nue(e,t){if(e&1&&(R(0,`div`)(1,`dt`),K(2,`Can go back`),z(),R(3,`dd`),K(4),z()()),e&2){let e=W().$implicit;D(4),q(e.canGoBack?`Yes`:`No`)}}function rue(e,t){if(e&1&&(R(0,`code`,14),K(1),z()),e&2){let e=W().$implicit;D(),q(e.url)}}function iue(e,t){e&1&&(R(0,`span`,15),K(1,`Active`),z())}function aue(e,t){if(e&1){let e=B();R(0,`li`)(1,`button`,11),U(`mouseenter`,function(){let t=S(e).$implicit;return C(W(5).highlight(t))})(`mouseleave`,function(){return S(e),C(W(5).highlight(null))})(`focus`,function(){let t=S(e).$implicit;return C(W(5).highlight(t))})(`blur`,function(){return S(e),C(W(5).highlight(null))})(`click`,function(){let t=S(e).$implicit;return C(W(5).highlight(t,!0))}),R(2,`span`,12),K(3),z(),R(4,`code`,13),K(5),z(),A(6,rue,2,1,`code`,14),A(7,iue,2,0,`span`,15),z()()}if(e&2){let e=t.$implicit,n=t.$index;D(),G(`active`,e.active),k(`aria-current`,e.active?`page`:null),D(2),q(n+1),D(2),q(e.component),D(),j(e.url?6:-1),D(),j(e.active?7:-1)}}function oue(e,t){if(e&1&&(R(0,`ol`,10),M(1,aue,8,7,`li`,null,Qle),z()),e&2){let e=W().$implicit;k(`aria-label`,`Page stack of `+W(3).outletLabel(e)),D(),N(e.pages)}}function sue(e,t){e&1&&(R(0,`p`,3),K(1,`No page in this outlet yet.`),z())}function cue(e,t){if(e&1&&(R(0,`p`,6),K(1),z()),e&2){let e=W().$implicit;D(),J(``,e.truncated,` older pages are not listed.`)}}function lue(e,t){e&1&&(R(0,`p`,6),K(1,` Read from the outlet's pages in the DOM, without URLs. The Angular directive was not found: the app may not use `),R(2,`code`),K(3,`@ionic/angular`),z(),K(4,`, or it is not a development build. `),z())}function uue(e,t){if(e&1&&(R(0,`article`,5)(1,`h3`,7)(2,`code`),K(3,`ion-router-outlet`),z(),A(4,eue,2,1,`code`,8),A(5,tue,4,1,`span`,9),z(),R(6,`dl`)(7,`div`)(8,`dt`),K(9,`Pages`),z(),R(10,`dd`),K(11),z()(),R(12,`div`)(13,`dt`),K(14,`Last navigation`),z(),R(15,`dd`),K(16),z()(),A(17,nue,5,1,`div`),z(),A(18,oue,3,1,`ol`,10)(19,sue,2,0,`p`,3),A(20,cue,2,1,`p`,6),A(21,lue,5,0,`p`,6),z()),e&2){let e=t.$implicit,n=W(3);k(`aria-labelledby`,`cap-ionic-`+e.id),D(),V(`id`,`cap-ionic-`+e.id),D(3),j(e.name===`primary`?-1:4),D(),j(e.tabs?5:-1),D(6),q(e.pages.length+(e.truncated??0)),D(5),q(n.directionText(e)),D(),j(e.canGoBack===void 0?-1:17),D(),j(e.pages.length?18:19),D(2),j(e.truncated?20:-1),D(),j(e.source===`dom`?21:-1)}}function due(e,t){if(e&1&&(R(0,`p`,6),K(1),z()),e&2){let e=W(2);D(),J(``,e.truncatedOutlets,` more outlets are not listed.`)}}function fue(e,t){if(e&1&&(R(0,`div`,4),M(1,uue,22,10,`article`,5,Zle),z(),A(3,due,2,1,`p`,6)),e&2){let e=W();D(),N(e.outlets),D(2),j(e.truncatedOutlets?3:-1)}}function pue(e,t){if(e&1&&(R(0,`section`,0)(1,`h2`,1),K(2,`Ionic page stacks`),z(),R(3,`p`,2),K(4,` Each `),R(5,`code`),K(6,`ion-router-outlet`),z(),K(7,` keeps the pages it has shown in a stack, oldest first. Read through `),R(8,`code`),K(9),z(),K(10),z(),A(11,$le,5,0,`p`,3)(12,fue,4,1),z()),e&2){let e=t;D(9),q(e.framework),D(),J(``,e.mode?` in `+e.mode+` mode`:``,`. The panel changes nothing in the app. `),D(),j(e.outlets.length?12:11)}}function mue(e){let t=e?.pages;return t&&typeof t==`object`?Object.values(t):[]}var hue={forward:`Forward`,back:`Back`,root:`Root`};function gue(e){if(!e.direction)return`Not seen yet`;let t=hue[e.direction];if(e.directionSource===`inferred`)return`${t} (from the stack)`;let n=[e.tabSwitch?`tab switch`:null,e.animated===!1?`no animation`:null].filter(Boolean);return n.length?`${t} (${n.join(`, `)})`:t}var _ue=class e{rpc=$(null);pageId=$(null);pages=T([]);page=X(()=>{let e=this.pageId();return e?this.pages().find(t=>t.pageId===e)??null:null});directionText=gue;destroyRef=x(Ss);unsubscribe=null;constructor(){E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.highlight(null)})}async load(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`ionic`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(mue(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.pages.set([])}}outletLabel(e){return e.name===`primary`?`the primary outlet`:`outlet ${e.name}`}highlight(e,t=!1){let n=this.rpc();if(!n)return;let r=e?{pageId:this.pageId(),id:e.elementId,reveal:t}:null;n.scope(`pangular`).rpc.call(`request-page-highlight`,r).catch(()=>{})}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-capacitor-ionic`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`]},decls:1,vars:1,consts:[[`aria-labelledby`,`cap-ionic-title`],[`id`,`cap-ionic-title`],[1,`lead`],[1,`empty`],[1,`cards`],[1,`card`],[1,`note`],[3,`id`],[1,`outlet-name`],[1,`tabs`],[1,`stack`],[`type`,`button`,1,`stack-page`,3,`mouseenter`,`mouseleave`,`focus`,`blur`,`click`],[`aria-hidden`,`true`,1,`index`],[1,`component`],[1,`url`],[1,`chip`]],template:function(e,t){if(e&1&&A(0,pue,13,3,`section`,0),e&2){let e;j((e=t.page())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-section[_ngcontent-%COMP%] {
-  margin: 0 0 24px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-}
-
-.lead[_ngcontent-%COMP%], 
-.note[_ngcontent-%COMP%], 
-.empty[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 8px 0 0;
-  font-size: 12px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.cards[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  padding: 12px;
-  min-width: 0;
-}
-
-h3[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: baseline;
-  margin: 0 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-}
-
-.tabs[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-weight: 400;
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 8px 16px;
-  margin: 0 0 10px;
-}
-
-dl[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
-  min-width: 0;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 2px;
-}
-
-dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.stack[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.stack-page[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  width: 100%;
-  min-height: var(--%NS%control-h);
-  padding: 6px 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.stack-page[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.stack-page.active[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-}
-
-.stack-page[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.index[_ngcontent-%COMP%] {
-  min-width: 18px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.component[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-}
-
-.url[_ngcontent-%COMP%] {
-  flex: 1 1 160px;
-  min-width: 0;
-  color: var(--%NS%text-2);
-}
-
-.chip[_ngcontent-%COMP%] {
-  margin-left: auto;
-  padding: 1px 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .stack-page[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})},vue=(e,t)=>t.plugin,yue=(e,t)=>t.label;function bue(e,t){if(e&1&&(R(0,`span`,5),K(1),z(),K(2,` `),R(3,`span`,6),K(4,`from `),R(5,`code`),K(6),z(),K(7),z()),e&2){let e=W().$implicit,t=W(2);D(),q(e.value),D(5),q(e.from),D(),J(`, `,t.ago(e.at,t.now()))}}function xue(e,t){e&1&&(R(0,`span`,4),K(1,`Not reported yet`),z())}function Sue(e,t){if(e&1&&(R(0,`div`)(1,`dt`),K(2),z(),R(3,`dd`),A(4,bue,8,3)(5,xue,2,0,`span`,4),z()()),e&2){let e=t.$implicit;D(2),q(e.label),D(2),j(e.value===null?5:4)}}function Cue(e,t){if(e&1&&(R(0,`article`,2)(1,`h3`,3)(2,`code`),K(3),z()(),R(4,`dl`),M(5,Sue,6,2,`div`,null,yue),z()()),e&2){let e=t.$implicit;k(`aria-labelledby`,`cap-state-`+e.plugin),D(),V(`id`,`cap-state-`+e.plugin),D(2),q(e.plugin),D(2),N(e.fields)}}function wue(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function i5(e,t=e=>e){return n=>{let r=wue(n)?n[e]:void 0;return typeof r==`string`||typeof r==`number`||typeof r==`boolean`?t(String(r)):null}}function a5(e,t,n){return[...e.map(e=>({method:e,read:n})),...t.map(e=>({event:e,read:n}))]}var Tue=[{plugin:`Foldable`,fields:[{label:`Fold state`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`state`))},{label:`Posture`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`posture`))},{label:`Hinge orientation`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`hingeOrientation`))},{label:`Hinge angle`,sources:a5([`getHingeAngle`],[`hingeAngleChange`],i5(`angle`,e=>`${e}°`))},{label:`Active display`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`activeDisplay`))},{label:`Size class`,sources:a5([`getSizeClass`],[`sizeClassChange`],e=>{let t=i5(`widthClass`)(e),n=i5(`heightClass`)(e);return!t&&!n?null:[t&&`width ${t}`,n&&`height ${n}`].filter(Boolean).join(`, `)})}]}];function Eue(e,t,n){let r=null,i=(e,t,i)=>{if(r&&r.at>=i)return;let a=n.read(e);a!==null&&(r={value:a,from:t,at:i})};if(`method`in n)for(let r of e.calls)r.plugin===t&&r.method===n.method&&r.status===`ok`&&i(r.result,`${n.method}()`,r.startedAt+(r.durationMs??0));else for(let r of e.listeners)r.plugin===t&&r.event===n.event&&r.lastEventAt!==void 0&&r.last!==void 0&&i(r.last,n.event,r.lastEventAt);return r}function Due(e,t=Tue){let n=new Set(e.info.plugins.map(e=>e.name));return t.filter(e=>n.has(e.plugin)).map(t=>({plugin:t.plugin,fields:t.fields.map(n=>{let r=null;for(let i of n.sources){let n=Eue(e,t.plugin,i);n&&(!r||n.at>r.at)&&(r=n)}let i=r;return{label:n.label,value:i?.value??null,from:i?.from??null,at:i?.at??null}})}))}var Oue=class e{cards=$.required();now=$.required();ago=jle;static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-capacitor-state`]],inputs:{cards:[1,`cards`],now:[1,`now`]},decls:5,vars:0,consts:[[1,`lead`],[1,`cards`],[1,`card`],[3,`id`],[1,`missing`],[1,`value`],[1,`source`]],template:function(e,t){e&1&&(R(0,`p`,0),K(1,` Read from the results and events the app already received. The panel calls nothing in the app. `),z(),R(2,`div`,1),M(3,Cue,7,3,`article`,2,vue),z()),e&2&&(D(3),N(t.cards()))},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.lead[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.cards[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 12px;
-}
-
-.card[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  padding: 12px;
-  min-width: 0;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-  gap: 8px 16px;
-  margin: 0;
-}
-
-dl[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
-  min-width: 0;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 2px;
-}
-
-dd[_ngcontent-%COMP%] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.value[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-.source[_ngcontent-%COMP%], 
-.missing[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.missing[_ngcontent-%COMP%] {
-  font-style: italic;
-}`]})},kue=(e,t)=>t.filter,o5=(e,t)=>t.id,Aue=(e,t)=>t.name;function jue(e,t){e&1&&(F(0,`app-state`,1),K(1,`Loading Capacitor data…`),I())}function Mue(e,t){if(e&1){let e=B();F(0,`app-state`,4),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Can't read the Capacitor data from the devtools server. `),I()}}function Nue(e,t){if(e&1){let e=B();F(0,`button`,29),H(`click`,function(){let t=S(e).$implicit;return C(W(4).pickFilter(t.filter))}),F(1,`span`,26),K(2),I(),K(3,` `),F(4,`span`,27),K(5),I()()}if(e&2){let e=t.$implicit,n=W(4);k(`data-filter`,e.filter)(`aria-pressed`,n.callFilter()===e.filter),D(2),q(e.label),D(3),q(e.count)}}function Pue(e,t){if(e&1&&M(0,Nue,6,4,`button`,28,kue),e&2){let e=W();N(W(2).callStats(e))}}function Fue(e,t){if(e&1&&(F(0,`span`,25)(1,`span`,26),K(2,`Platform`),I(),K(3,` `),F(4,`span`,27)(5,`code`),K(6),I(),K(7),I()(),A(8,Pue,2,0),F(9,`span`,25)(10,`span`,26),K(11,`CapacitorHttp`),I(),K(12,` `),F(13,`span`,27),K(14),I()(),F(15,`span`,25)(16,`span`,26),K(17,`Plugin hints`),I(),K(18,` `),F(19,`span`,27),K(20),I()()),e&2){let e=t;D(6),q(e.platform),D(),J(` `,e.native?`native`:`web`),D(),j(e.logsCalls?8:-1),D(6),q(e.capacitorHttp),D(6),q(e.hints)}}function Iue(e,t){if(e&1){let e=B();F(0,`div`,11)(1,`span`,30),K(2,`Page`),I(),F(3,`app-select`,31),H(`valueChange`,function(t){return S(e),C(W(2).selectedPageId.set(t))}),I()()}if(e&2){let e=W(),t=W();D(3),P(`options`,t.pageOptions())(`value`,e.pageId)}}function Lue(e,t){if(e&1&&(F(0,`section`,13)(1,`h2`,32),K(2,`Plugin state`),I(),L(3,`app-capacitor-state`,33),I()),e&2){let e=W(2);D(3),P(`cards`,e.stateCards())(`now`,e.now())}}function Rue(e,t){if(e&1&&(F(0,`p`,17),K(1,` Plugin calls aren't shown on this page. Native calls are logged on iOS and Android, where plugins go through the native bridge. To log calls a web implementation answers, load `),F(2,`code`),K(3,`@pangular-inspector/devtools/capacitor-hook`),I(),K(4,` before `),F(5,`code`),K(6,`@capacitor/core`),I(),K(7,`. `),F(8,`a`,34),K(9,`How to log web calls`),F(10,`span`,7),K(11,` (opens in a new tab)`),I()()()),e&2){let e=W(2);D(8),P(`href`,e.guideUrl,Du)}}function zue(e,t){if(e&1&&(F(0,`p`,17),K(1,` Only native calls are logged. Calls a web implementation answers are left out. `),F(2,`a`,34),K(3,`How to log them too`),F(4,`span`,7),K(5,` (opens in a new tab)`),I()()()),e&2){let e=W(3);D(2),P(`href`,e.guideUrl,Du)}}function Bue(e,t){e&1&&(F(0,`p`,20),K(1,`No plugin calls yet. Use the app and they show up here.`),I())}function Vue(e,t){if(e&1){let e=B();F(0,`div`,20)(1,`p`),K(2,`No call matches the filters.`),I(),F(3,`p`,41),K(4),I(),F(5,`button`,42),H(`click`,function(){S(e),W();let t=Pg(3);return W(2).clearFilters(),C(t.focus())}),K(6,` Clear filters `),I()()}if(e&2){let e=W(2),t=W();D(4),D_(` `,e.calls.length,` `,e.calls.length===1?`call is`:`calls are`,` hidden by `,t.hiddenBy(),`. `)}}function Hue(e,t){e&1&&(w(),L(0,`path`,49))}function Uue(e,t){e&1&&(w(),L(0,`circle`,54)(1,`path`,55))}function Wue(e,t){e&1&&(w(),L(0,`circle`,54)(1,`path`,56))}function Gue(e,t){e&1&&(w(),L(0,`circle`,54)(1,`path`,57))}function Kue(e,t){e&1&&(F(0,`span`,50),K(1,`stream`),I())}function que(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,45),H(`click`,function(){let t=S(e).$implicit;return C(W(4).select(t.id))}),F(2,`code`,46),K(3),I(),F(4,`span`,47),w(),F(5,`svg`,48),A(6,Hue,1,0,`:svg:path`,49)(7,Uue,2,0)(8,Wue,2,0)(9,Gue,2,0),I(),K(10),I(),A(11,Kue,2,0,`span`,50),fs(),F(12,`span`,51)(13,`span`,52),L(14,`span`),I(),K(15),I(),F(16,`span`,50),K(17),I(),F(18,`time`,53),K(19),I()()()}if(e&2){let e,n=t.$implicit,r=W(4);D(),G(`selected`,r.selected()?.id===n.id),k(`aria-pressed`,r.selected()?.id===n.id),D(2),Y(``,n.plugin,`.`,n.method,`()`),D(),k(`data-tone`,r.tone(n)),D(2),j((e=r.tone(n))===`ok`?6:e===`danger`?7:e===`warn`?8:9),D(4),J(` `,r.statusLabel(n),` `),D(),j(n.kind===`callback`?11:-1),D(3),t_(`width`,r.barWidth(n),`%`),D(),J(` `,r.durationText(n),` `),D(2),q(n.via),D(2),q(r.time(n.startedAt))}}function Jue(e,t){if(e&1){let e=B();F(0,`app-capacitor-call-detail`,58),H(`announce`,function(t){return S(e),C(W(4).announce(t))}),I()}if(e&2){let e=W(4);P(`call`,t)(`now`,e.now())}}function Yue(e,t){if(e&1&&(F(0,`div`,40)(1,`ol`,43),M(2,que,20,14,`li`,null,o5),I(),A(4,Jue,1,2,`app-capacitor-call-detail`,44),I()),e&2){let e,t=W(3);D(2),N(t.shownCalls()),D(2),j((e=t.selected())?4:-1,e)}}function Xue(e,t){if(e&1){let e=B();A(0,zue,6,1,`p`,17),F(1,`div`,35)(2,`app-search-field`,36,0),H(`valueChange`,function(t){return S(e),C(W(2).setSearch(t))}),I(),F(4,`app-select`,37),H(`valueChange`,function(t){return S(e),C(W(2).setFilter(t))}),I(),F(5,`span`,38),K(6),I()(),L(7,`app-limit-note`,39),A(8,Bue,2,0,`p`,20)(9,Vue,7,3,`div`,20)(10,Yue,5,1,`div`,40)}if(e&2){let e=W(),t=W();j(e.info.webCalls?-1:0),D(2),P(`value`,t.filter()),D(2),P(`options`,t.filterOptions)(`value`,t.callFilter()),D(2),Y(``,t.shownCalls().length,` of `,e.calls.length,` calls`),D(),P(`dropped`,e.dropped)(`max`,t.maxCalls()),D(),j(e.calls.length?t.shownCalls().length?10:9:8)}}function Zue(e,t){e&1&&(F(0,`p`,20),K(1,`No plugins are registered or installed.`),I())}function Que(e,t){if(e&1&&(F(0,`code`),K(1),I()),e&2){let e=W();D(),q(e.command)}}function $ue(e,t){if(e&1){let e=B();F(0,`button`,64),H(`click`,function(){S(e);let t=W();return C(W(4).copyCommand(t.command))}),K(1,` Copy `),I()}e&2&&k(`aria-label`,`Copy `+W().command)}function ede(e,t){if(e&1&&(F(0,`span`,62),K(1),A(2,Que,2,1,`code`),K(3),I(),A(4,$ue,2,1,`button`,63)),e&2){let e=t;D(),q(e.before),D(),j(e.command?2:-1),D(),q(e.after),D(),j(e.command?4:-1)}}function tde(e,t){if(e&1&&(F(0,`tr`)(1,`th`,60)(2,`code`),K(3),I()(),F(4,`td`),K(5),I(),F(6,`td`),K(7),I(),F(8,`td`),K(9),I(),F(10,`td`,61),A(11,ede,5,4),I()()),e&2){let e,n=t.$implicit,r=W(2),i=W();D(3),q(n.name),D(2),q(n.available?`Yes`:`No`),D(2),q(i.yesNo(n.registered)),D(2),q(n.native?`Yes`:`No`),D(2),j((e=i.pluginHint(n,r.info.platform))?11:-1,e)}}function nde(e,t){if(e&1&&(F(0,`div`,21)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,59),K(5,`Plugin`),I(),F(6,`th`,59),K(7,`Available`),I(),F(8,`th`,59),K(9,`Imported`),I(),F(10,`th`,59),K(11,`Native`),I(),F(12,`th`,59),K(13,`Note`),I()()(),F(14,`tbody`),M(15,tde,12,5,`tr`,null,Aue),I()()()),e&2){let e=W();D(15),N(e.info.plugins)}}function rde(e,t){e&1&&(F(0,`p`,20),K(1,`No plugin listeners. They show up when the app calls addListener.`),I())}function ide(e,t){if(e&1&&(F(0,`code`,67),K(1),I()),e&2){let e=W(2).$implicit,t=W(3);D(),q(t.preview(e.last))}}function ade(e,t){e&1&&(F(0,`span`,67),K(1,`No data`),I())}function ode(e,t){if(e&1&&(A(0,ide,2,1,`code`,67)(1,ade,2,0,`span`,67),F(2,`span`,41),K(3),I()),e&2){let e=W().$implicit,t=W(3);j(+(e.last===void 0)),D(3),J(`at `,t.time(e.lastEventAt))}}function sde(e,t){e&1&&K(0,` None yet `)}function cde(e,t){if(e&1&&(F(0,`span`,66),w(),F(1,`svg`,48),L(2,`path`,68)(3,`path`,69),I(),K(4),I()),e&2){let e=W().$implicit,t=W(3);D(4),J(` `,t.leakCount(e),` active listeners: possible leak `)}}function lde(e,t){if(e&1&&(F(0,`tr`)(1,`th`,60)(2,`code`),K(3),I()(),F(4,`td`)(5,`code`),K(6),I()(),F(7,`td`),K(8),I(),F(9,`td`,65),A(10,ode,4,2)(11,sde,1,0),I(),F(12,`td`),K(13),A(14,cde,5,1,`span`,66),I()()),e&2){let e=t.$implicit,n=W(3);D(3),q(e.plugin),D(3),q(e.event),D(2),q(e.events),D(2),j(e.lastEventAt?10:11),D(3),J(` `,e.removed?`Removed`:`Active`,` `),D(),j(!e.removed&&n.leakCount(e)>1?14:-1)}}function ude(e,t){if(e&1&&(F(0,`div`,24)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,59),K(5,`Plugin`),I(),F(6,`th`,59),K(7,`Event`),I(),F(8,`th`,59),K(9,`Events`),I(),F(10,`th`,59),K(11,`Last event`),I(),F(12,`th`,59),K(13,`State`),I()()(),F(14,`tbody`),M(15,lde,15,6,`tr`,null,o5),I()()()),e&2){let e=W();D(15),N(e.listeners)}}function dde(e,t){if(e&1&&(F(0,`p`,5),K(1,` Plugin calls, plugins and listeners of a Capacitor app, as its WebView reports them. Values are masked like other live data. `),I(),F(2,`div`,6),A(3,Fue,21,5),F(4,`span`,7),K(5),I()(),F(6,`section`,8)(7,`div`,9)(8,`h2`,10),K(9,`Environment`),I(),A(10,Iue,4,2,`div`,11),I(),F(11,`dl`)(12,`div`)(13,`dt`),K(14,`Platform`),I(),F(15,`dd`)(16,`code`),K(17),I(),K(18),I()(),F(19,`div`)(20,`dt`),K(21,`Server URL`),I(),F(22,`dd`)(23,`code`),K(24),I()()(),F(25,`div`)(26,`dt`),K(27,`CapacitorHttp`),I(),F(28,`dd`),K(29),I()(),F(30,`div`)(31,`dt`),K(32,`Calls logged`),I(),F(33,`dd`),K(34),I()(),F(35,`div`,12)(36,`dt`),K(37,`User agent`),I(),F(38,`dd`)(39,`code`),K(40),I()()()()(),A(41,Lue,4,2,`section`,13),L(42,`app-capacitor-ionic`,14),F(43,`section`,15)(44,`h2`,16),K(45,`Plugin calls`),I(),A(46,Rue,12,1,`p`,17)(47,Xue,11,9),I(),F(48,`section`,18)(49,`h2`,19),K(50,`Plugins`),I(),A(51,Zue,2,0,`p`,20)(52,nde,17,0,`div`,21),I(),F(53,`section`,22)(54,`h2`,23),K(55,`Listeners`),I(),A(56,rde,2,0,`p`,20)(57,ude,17,0,`div`,24),I()),e&2){let e,n=t,r=W();D(3),j((e=r.summary())?3:-1,e),D(2),q(r.message()),D(5),j(r.pageOptions().length>1?10:-1),D(7),q(n.info.platform),D(),J(` (`,n.info.native?`native`:`web`,`) `),D(6),q(n.info.env.serverUrl||`none`),D(5),J(` `,n.info.env.capacitorHttp===null?`Unknown`:n.info.env.capacitorHttp?`On`:`Off`,` `),D(5),q(r.loggedLabel()),D(6),q(n.info.env.userAgent||`unknown`),D(),j(r.stateCards().length?41:-1),D(),P(`rpc`,r.rpc())(`pageId`,n.pageId),D(4),j(!n.info.bridge&&!n.info.webCalls?46:47),D(5),j(n.info.plugins.length?52:51),D(5),j(n.listeners.length?57:56)}}function fde(e,t){e&1&&(F(0,`app-state`,3),K(1,` No Capacitor app reports to this server. `),F(2,`p`,70),K(3,`Start the overlay in the app, then use it.`),I()())}var pde=`https://pangular-inspector.dev/inspectors/capacitor/#web-calls`,mde=2e3,s5={all:`All calls`,failed:`Failed`,slow:`Slow (500 ms or more)`,pending:`Pending`},hde=class e{rpc=$(null);destroyRef=x(Ss);host=x(Ml);injector=x(bs);seen=new Map;hostPageId=tT();unsubscribe;time=VE;preview=Fle;pluginHint=$8;guideUrl=pde;yesNo=Dle;filterOptions=Object.keys(s5).map(e=>({value:e,label:s5[e]}));pages=T([]);loaded=T(!1);failed=T(!1);selectedPageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:kle(e,this.hostPageId)});selectedCallId=T(null);filter=T(``);callFilter=T(`all`);now=T(Date.now());message=T(``);page=X(()=>{let e=this.selectedPageId();return this.pages().find(t=>t.pageId===e)??null});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.info.platform})));maxCalls=X(()=>TT(this.rpc()).limits.capacitorCalls);loggedLabel=X(()=>{let e=this.page()?.info;return e?e.bridge&&e.webCalls?`Native and web`:e.bridge?`Native only`:e.webCalls?`Web only`:`None on this platform`:``});shownCalls=X(()=>{let e=this.page();if(!e)return[];let t=this.filter().trim().toLowerCase(),n=this.callFilter(),r=n===`slow`?this.now():0;return[...e.calls].filter(e=>Z8(e,n,r)).filter(e=>!t||`${e.plugin}.${e.method}`.toLowerCase().includes(t)).sort((e,t)=>t.startedAt-e.startedAt)});selected=X(()=>this.shownCalls().find(e=>e.id===this.selectedCallId())??null);slowest=X(()=>{let e=this.now();return Math.max(1,...this.shownCalls().map(t=>X8(t,e)))});hiddenBy=X(()=>{let e=[],t=this.filter().trim();return t&&e.push(`the search “${t}”`),this.callFilter()!==`all`&&e.push(`the ${s5[this.callFilter()]} filter`),e.join(` and `)});stateCards=X(()=>{let e=this.page();return e?Due(e):[]});leaks=X(()=>Nle(this.page()?.listeners??[]));liveSummary=X(()=>{let e=this.page();return e?Mle(e,this.now()):null});summary=T(null);summaryShownAt=0;summaryTimer;messageFlip=!1;constructor(){lJ(`capacitor`,this.selectedCallId),E(()=>{let e=this.rpc();e&&this.load(e)}),E(()=>{let e=this.liveSummary();Z(()=>this.queueSummary(e))});let e=setInterval(()=>this.now.set(Date.now()),1e3);this.destroyRef.onDestroy(()=>{clearInterval(e),clearTimeout(this.summaryTimer),this.unsubscribe?.()})}retry(){let e=this.rpc();e&&this.load(e)}callStats(e){return[{filter:`all`,label:`Calls`,count:e.calls},{filter:`failed`,label:`Failed`,count:e.failed},{filter:`slow`,label:`Slow, 500 ms+`,count:e.slow},{filter:`pending`,label:`Pending`,count:e.pending}]}select(e){this.selectedCallId.set(e),cd(()=>{globalThis.matchMedia?.(`(max-width: 880px)`).matches&&this.host.nativeElement.querySelector(`#cap-detail`)?.scrollIntoView?.({block:`nearest`})},{injector:this.injector})}setSearch(e){e!==this.filter()&&(this.filter.set(e),this.announceCount())}setFilter(e){e!==this.callFilter()&&(this.callFilter.set(e),this.announceCount())}pickFilter(e){this.setFilter(this.callFilter()===e?`all`:e)}clearFilters(){this.filter.set(``),this.callFilter.set(`all`),this.announceCount()}announce(e){this.messageFlip=!this.messageFlip,this.message.set(this.messageFlip?`${e} `:e)}async copyCommand(e){try{await navigator.clipboard.writeText(e),this.announce(`Copied ${e}.`)}catch{this.announce(`The clipboard is not available here.`)}}leakCount(e){return this.leaks().get(`${e.plugin} ${e.event}`)??0}tone(e){return e.status===`pending`?`accent`:e.status===`ok`?`ok`:Y8(e)?`warn`:`danger`}statusLabel(e){return e.status===`pending`?`Pending`:e.status===`ok`?`OK`:Y8(e)?`Not implemented`:`Error`}durationText(e){return e.status===`pending`?`waiting ${Q8(X8(e,this.now()))}`:e.durationMs===void 0?``:`${Math.round(e.durationMs)} ms`}barWidth(e){return Math.min(100,X8(e,this.now())/this.slowest()*100)}announceCount(){let e=this.page();e&&this.announce(`${this.shownCalls().length} of ${e.calls.length} calls shown`)}queueSummary(e){let t=this.summary();if(JSON.stringify(e)===JSON.stringify(t))return;clearTimeout(this.summaryTimer),this.summaryTimer=void 0;let n=this.summaryShownAt+mde-Date.now();if(!t||!e||e.pageId!==t.pageId||n<=0){this.summary.set(e),this.summaryShownAt=Date.now();return}this.summaryTimer=setTimeout(()=>{this.summaryTimer=void 0,this.summary.set(this.liveSummary()),this.summaryShownAt=Date.now()},n)}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`capacitor`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(Ole(J8(e),this.seen));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-capacitor-inspector`]],inputs:{rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`search`,``],[`kind`,`loading`],[`kind`,`error`],[`kind`,`empty`],[`kind`,`error`,3,`retry`],[1,`intro`],[`role`,`status`,`aria-label`,`Capacitor summary`,`aria-atomic`,`false`,1,`strip`],[1,`sr-only`],[`aria-labelledby`,`cap-env-title`,1,`env`],[1,`env-head`],[`id`,`cap-env-title`],[1,`page-picker`],[1,`wide`],[`aria-labelledby`,`cap-state-title`],[3,`rpc`,`pageId`],[`aria-labelledby`,`cap-calls-title`],[`id`,`cap-calls-title`],[1,`notice`],[`aria-labelledby`,`cap-plugins-title`],[`id`,`cap-plugins-title`],[1,`empty`],[`tabindex`,`0`,`role`,`group`,`aria-label`,`Plugins table`,1,`table-wrap`],[`aria-labelledby`,`cap-listeners-title`],[`id`,`cap-listeners-title`],[`tabindex`,`0`,`role`,`group`,`aria-label`,`Listeners table`,1,`table-wrap`],[`aria-atomic`,`true`,1,`stat`],[1,`stat-label`],[1,`stat-value`],[`type`,`button`,`aria-atomic`,`true`,1,`stat`],[`type`,`button`,`aria-atomic`,`true`,1,`stat`,3,`click`],[`id`,`cap-page-label`,1,`label-key`],[`labelledBy`,`cap-page-label`,3,`valueChange`,`options`,`value`],[`id`,`cap-state-title`],[3,`cards`,`now`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`toolbar`],[`placeholder`,`Filter by plugin or method`,`saveKey`,`capacitor`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Show calls`,1,`show`,3,`valueChange`,`options`,`value`],[1,`count`],[`what`,`plugin calls`,`limit`,`capacitorCalls`,3,`dropped`,`max`],[1,`split`],[1,`muted`],[`type`,`button`,1,`small`,3,`click`],[`aria-label`,`Plugin calls, newest first`,`appRovingList`,`[data-cap-call]`,1,`calls`],[3,`call`,`now`],[`type`,`button`,`data-cap-call`,``,1,`call`,3,`click`],[1,`name`],[1,`chip`,`status`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M20 6 9 17l-5-5`],[1,`chip`,`via`],[1,`duration`],[`aria-hidden`,`true`,1,`bar`],[1,`when`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`m15 9-6 6M9 9l6 6`],[`d`,`M5.6 5.6l12.8 12.8`],[`d`,`M12 7v5l3 2`],[3,`announce`,`call`,`now`],[`scope`,`col`],[`scope`,`row`],[1,`note`],[1,`hint`],[`type`,`button`,1,`copy`],[`type`,`button`,1,`copy`,3,`click`],[1,`last`],[`data-tone`,`warn`,1,`chip`,`leak`],[1,`payload`],[`d`,`M12 3 2 21h20z`],[`d`,`M12 10v4M12 17.5v.01`],[`detail`,``]],template:function(e,t){if(e&1&&A(0,jue,2,0,`app-state`,1)(1,Mue,2,0,`app-state`,2)(2,dde,58,15)(3,fde,4,0,`app-state`,3),e&2){let e;j(t.loaded()?t.failed()?1:(e=t.page())?2:3:0,e)}},dependencies:[HL,$N,XD,wD,Xle,_ue,Oue,NV],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-section[_ngcontent-%COMP%] {
-  margin: 0 0 24px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.strip[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 0 0 20px;
-}
-
-.stat[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 88px;
-  min-height: var(--%NS%control-h);
-  padding: 6px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  text-align: left;
-}
-
-button.stat[_ngcontent-%COMP%] {
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-button.stat[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-button.stat[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 0 -2px 0 var(--%NS%accent);
-}
-
-button.stat[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.stat-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-button.stat[aria-pressed=true][_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.stat-value[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.env-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 12px;
-}
-
-.env-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.page-picker[_ngcontent-%COMP%] {
-  display: flex;
-  flex: 0 1 280px;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.label-key[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 8px;
-  margin: 0;
-}
-
-dl[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  padding: 8px 12px;
-  min-width: 0;
-}
-
-dl[_ngcontent-%COMP%]    > .wide[_ngcontent-%COMP%] {
-  grid-column: 1/-1;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 2px;
-}
-
-dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent-text);
-  border-radius: 2px;
-}
-
-a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 12px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 220px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-input[type=search][_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.show[_ngcontent-%COMP%] {
-  flex: 0 1 220px;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.split[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 12px;
-  align-items: start;
-}
-
-@media (max-width: 880px) {
-  .split[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-.calls[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.call[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  width: 100%;
-  min-height: var(--%NS%control-h);
-  padding: 6px 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  text-align: left;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.call[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.call.selected[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-}
-
-.call[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.name[_ngcontent-%COMP%] {
-  flex: 1 1 180px;
-  min-width: 0;
-  color: var(--%NS%text-strong);
-}
-
-.when[_ngcontent-%COMP%], 
-.duration[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.when[_ngcontent-%COMP%] {
-  margin-left: auto;
-}
-
-.duration[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.bar[_ngcontent-%COMP%] {
-  display: inline-block;
-  width: 48px;
-  height: 6px;
-  overflow: hidden;
-  border-radius: 3px;
-  background: var(--%NS%surface-3);
-}
-
-.bar[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {
-  display: block;
-  height: 100%;
-  min-width: 2px;
-  border-radius: 3px;
-  background: var(--%NS%accent);
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  padding: 1px 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.chip[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  width: 12px;
-  height: 12px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.4;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.chip[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.chip.via[_ngcontent-%COMP%] {
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text);
-}
-
-.chip.leak[_ngcontent-%COMP%] {
-  margin-top: 4px;
-  white-space: normal;
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.table-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  min-width: 640px;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-th[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow-wrap: normal;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-  text-align: left;
-  vertical-align: top;
-}
-
-thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  background: var(--%NS%surface);
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
-  border-bottom: 0;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin-right: 6px;
-}
-
-.copy[_ngcontent-%COMP%] {
-  height: 26px;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.copy[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.copy[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-td.note[_ngcontent-%COMP%], 
-td.last[_ngcontent-%COMP%] {
-  min-width: 220px;
-}
-
-.payload[_ngcontent-%COMP%] {
-  display: block;
-  margin: 0 0 2px;
-}
-
-.empty[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}`]})};function c5(e,t,n=600){let r=T(``),i=!0,a;return E(()=>{if(e(),i){i=!1;return}clearTimeout(a),a=setTimeout(()=>{let e=Z(t);r.update(t=>t===e?`${e} `:e)},n)}),x(Ss).onDestroy(()=>clearTimeout(a)),r.asReadonly()}var gde=[`log`,`info`,`warn`,`error`,`debug`];function _de(e){return e.split("`").map((e,t)=>({code:t%2==1,text:e})).filter(e=>e.text)}var vde={handler:`ErrorHandler`,window:`Uncaught`,promise:`Unhandled rejection`};function l5(e){return!!e&&typeof e==`object`}function yde(e){let t=l5(e)?e.pages:void 0;return l5(t)?Object.values(t).filter(e=>l5(e)&&typeof e.pageId==`string`).map(e=>({pageId:e.pageId,url:typeof e.url==`string`?e.url:``,title:typeof e.title==`string`?e.title:``,reportedAt:typeof e.reportedAt==`number`?e.reportedAt:0,handler:e.handler===`wrapped`?`wrapped`:`none`,errors:l5(e.errors)?Object.values(e.errors):[],console:l5(e.console)?Object.values(e.console).sort((e,t)=>e.id-t.id):[],dropped:l5(e.dropped)?{errors:Number(e.dropped.errors)||0,console:Number(e.dropped.console)||0}:{errors:0,console:0}})).sort((e,t)=>t.reportedAt-e.reportedAt):[]}function bde(e,t){return t&&e.some(e=>e.pageId===t)?t:e.length>1?`all`:e[0]?.pageId??`all`}function xde(e,t){return e.filter(e=>t===`all`||e.pageId===t).flatMap(e=>e.errors.map(t=>({...t,pageId:e.pageId}))).sort((e,t)=>t.lastAt-e.lastAt)}function Sde(e,t){return e.filter(e=>t===`all`||e.pageId===t).flatMap(e=>e.console.map(t=>({...t,pageId:e.pageId}))).sort((e,t)=>t.at-e.at||t.id-e.id)}function Cde(e,t){return t?.startsWith(`https://angular.dev/errors/`)?{code:e,href:t}:{code:e}}var wde=(e,t)=>t.signal+t.at,Tde=(e,t)=>t.id+e;function Ede(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W();D(),q(e.binding)}}function Dde(e,t){e&1&&(R(0,`span`,2),K(1,`A text interpolation (Angular doesn't name it)`),z())}function Ode(e,t){if(e&1&&(R(0,`span`,2),K(1,` in `),z(),R(2,`code`),K(3),z()),e&2){let e=W();D(3),q(e.template)}}function kde(e,t){if(e&1&&(R(0,`code`),K(1),z(),K(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;D(),q(e),D(),J(``,n===r-1?``:`, `,` `)}}function Ade(e,t){if(e&1&&(R(0,`dt`),K(1,`Held by`),z(),R(2,`dd`),M(3,kde,3,2,null,null,eg),z()),e&2){let e=W();D(3),N(e.members)}}function jde(e,t){e&1&&(R(0,`p`,4),K(1,` Values are hidden: the binding or a field that holds them has a secret-looking name. `),z())}function Mde(e,t){e&1&&(R(0,`p`,4),K(1,` Angular says this view was created after its parent was checked, so a change detection hook such as `),R(2,`code`),K(3,`ngAfterViewInit`),z(),K(4,` created it. `),z())}function Nde(e,t){if(e&1&&(R(0,`li`)(1,`code`),K(2),z()()),e&2){let e=t.$implicit;D(2),q(e)}}function Pde(e,t){if(e&1&&(R(0,`ol`,6),M(1,Nde,3,1,`li`,null,$h),z()),e&2){let e=W().$implicit;D(),N(e.stack)}}function Fde(e,t){e&1&&(R(0,`span`,2),K(1,` (turn on write stacks in the Signals tab and reproduce to see the code)`),z())}function Ide(e,t){if(e&1&&(R(0,`li`),K(1,` Signal `),R(2,`code`),K(3),z(),K(4),A(5,Pde,3,0,`ol`,6)(6,Fde,2,0,`span`,2),z()),e&2){let e=t.$implicit,n=W(4);D(3),q(e.signal),D(),J(` at `,n.time(e.at),` `),D(),j(e.stack?.length?5:6)}}function Lde(e,t){if(e&1&&(R(0,`h4`,0),K(1,`Written by`),z(),R(2,`ul`,5),M(3,Ide,7,3,`li`,null,wde),z()),e&2){let e=W();D(3),N(e.writes)}}function Rde(e,t){e&1&&(R(0,`p`,4),K(1,` No named signal was written with this value just before the check. Look for code that sets a field the template reads during change detection, such as `),R(2,`code`),K(3,`ngAfterViewInit`),z(),K(4,`, a getter that returns a new value each time, or a child that changes its parent. `),z())}function zde(e,t){e&1&&(R(0,`p`,4),K(1,` Where it was written is unknown: the page doesn't report signal writes (the Signals inspector is off, or Angular is older than 17). `),z())}function Bde(e,t){if(e&1&&(R(0,`h3`,0),K(1,`What changed`),z(),R(2,`dl`,1)(3,`dt`),K(4,`Binding`),z(),R(5,`dd`),A(6,Ede,2,1,`code`)(7,Dde,2,0,`span`,2),A(8,Ode,4,1),z(),R(9,`dt`),K(10,`Previous`),z(),R(11,`dd`)(12,`code`,3),K(13),z()(),R(14,`dt`),K(15,`Current`),z(),R(16,`dd`)(17,`code`,3),K(18),z()(),A(19,Ade,5,0),z(),A(20,jde,2,0,`p`,4),A(21,Mde,5,0,`p`,4),A(22,Lde,5,0)(23,Rde,5,0,`p`,4)(24,zde,2,0,`p`,4)),e&2){let e=t;D(6),j(e.binding?6:7),D(2),j(e.template?8:-1),D(5),q(e.previous),D(5),q(e.current),D(),j(e.members?.length?19:-1),D(),j(e.masked?20:-1),D(),j(e.creation?21:-1),D(),j(e.writes?.length?22:e.writesKnown?23:24)}}function Vde(e,t){if(e&1&&A(0,Bde,25,8),e&2){let e;j((e=W().changed())?0:-1,e)}}function Hde(e,t){if(e&1&&(R(0,`p`,7),K(1),z()),e&2){let e=W();D(),q(e.summary)}}function Ude(e,t){if(e&1&&(R(0,`span`,14),K(1),z()),e&2){let e=W().$implicit;D(),q(e.op===`expected`?`Server only:`:`Client only:`)}}function Wde(e,t){if(e&1&&(R(0,`li`)(1,`span`,13),K(2),z(),A(3,Ude,2,1,`span`,14),R(4,`code`),K(5),z()()),e&2){let e=t.$implicit,n=W(4);k(`data-op`,e.op),D(2),q(n.signOf(e.op)),D(),j(e.op===`same`?-1:3),D(2),q(e.text)}}function Gde(e,t){if(e&1&&(R(0,`p`,8)(1,`span`,9),K(2,`−`),z(),K(3,` server HTML Angular expected `),R(4,`span`,10),K(5,`+`),z(),K(6,` client DOM it found `),z(),R(7,`div`,11)(8,`ol`,12),M(9,Wde,6,4,`li`,null,$h),z()()),e&2){let e=W();D(9),N(e.diff)}}function Kde(e,t){e&1&&(R(0,`p`,4),K(1,`Angular described neither side of the mismatch.`),z())}function qde(e,t){e&1&&(R(0,`p`,4),K(1,` Angular thinks a browser extension or third-party script changed the DOM before hydration. Try a clean browser profile, or add `),R(2,`code`),K(3,`ngSkipHydration`),z(),K(4,` to the host. `),z())}function Jde(e,t){if(e&1&&(R(0,`h3`,0),K(1,`Server vs client DOM`),z(),A(2,Hde,2,1,`p`,7),A(3,Gde,11,0)(4,Kde,2,0,`p`,4),A(5,qde,5,0,`p`,4)),e&2){let e=t;D(2),j(e.summary?2:-1),D(),j(e.diff?.length?3:4),D(2),j(e.external?5:-1)}}function Yde(e,t){if(e&1&&A(0,Jde,6,3),e&2){let e;j((e=W().mismatch())?0:-1,e)}}function Xde(e,t){if(e&1&&(R(0,`code`),K(1),z(),K(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;D(),q(e),D(),J(``,n===r-1?``:` → `,` `)}}function Zde(e,t){if(e&1&&(R(0,`dt`),K(1,`Path`),z(),R(2,`dd`),M(3,Xde,3,2,null,null,$h),z()),e&2){let e=W();D(3),N(e.path)}}function Qde(e,t){if(e&1&&(R(0,`dt`),K(1,`Source`),z(),R(2,`dd`)(3,`code`),K(4),z()()),e&2){let e=W();D(4),q(e.source)}}function $de(e,t){if(e&1){let e=B();R(0,`button`,18),U(`click`,function(){S(e);let t=W();return C(W(2).explainLookup(t.token))}),K(1),z()}if(e&2){let e=W(3);k(`aria-disabled`,e.loading()||null),D(),J(` `,e.lookup()?`Explain lookup again`:`Explain lookup`,` `)}}function efe(e,t){e&1&&(R(0,`p`,4),K(1,` The component that asked for it wasn't found on the page, so the lookup can't be walked from here. `),z())}function tfe(e,t){e&1&&(R(0,`p`,4),K(1,`Walking the lookup…`),z())}function nfe(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function rfe(e,t){if(e&1&&(R(0,`span`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function ife(e,t){if(e&1&&A(0,nfe,2,1,`code`)(1,rfe,2,1,`span`),e&2){let e=t.$implicit;j(+!e.code)}}function afe(e,t){if(e&1&&(R(0,`p`,17),M(1,ife,2,1,null,null,$h),z()),e&2){let e=W(3);D(),N(e.segments(t))}}function ofe(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function sfe(e,t){if(e&1&&(R(0,`span`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function cfe(e,t){if(e&1&&A(0,ofe,2,1,`code`)(1,sfe,2,1,`span`),e&2){let e=t.$implicit;j(+!e.code)}}function lfe(e,t){if(e&1&&(R(0,`p`,7),M(1,cfe,2,1,null,null,$h),z()),e&2){let e=W(3);D(),N(e.segments(t.summary))}}function ufe(e,t){if(e&1&&(R(0,`code`,2),K(1),z()),e&2){let e=W().$implicit;D(),q(e.component)}}function dfe(e,t){if(e&1&&(R(0,`code`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function ffe(e,t){if(e&1&&(R(0,`span`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.text)}}function pfe(e,t){if(e&1&&A(0,dfe,2,1,`code`)(1,ffe,2,1,`span`),e&2){let e=t.$implicit;j(+!e.code)}}function mfe(e,t){if(e&1&&(R(0,`li`)(1,`span`,20)(2,`code`),K(3),z(),A(4,ufe,2,1,`code`,2),z(),R(5,`span`,21),K(6),z(),R(7,`span`,22),M(8,pfe,2,1,null,null,$h),z()()),e&2){let e=t.$implicit,n=W(4);D(3),q(e.name),D(),j(e.component?4:-1),D(),k(`data-tone`,n.stepTone[e.status]),D(),q(n.stepLabel[e.status]),D(2),N(n.segments(e.reason))}}function hfe(e,t){e&1&&K(0,` This Angular version has no resolution path, so the path follows the rendered tree. `)}function gfe(e,t){if(e&1&&(R(0,`ol`,19),M(1,mfe,10,4,`li`,null,Tde),z(),R(3,`p`,4),K(4,` Read from the injector tree the page reported, assuming no `),R(5,`code`),K(6,`self`),z(),K(7,`, `),R(8,`code`),K(9,`skipSelf`),z(),K(10,`, `),R(11,`code`),K(12,`host`),z(),K(13,` or `),R(14,`code`),K(15,`optional`),z(),K(16,`. Agents can pass those to `),R(17,`code`),K(18,`explain-injection`),z(),K(19,`. `),A(20,hfe,1,0),z()),e&2){let e=t;D(),N(e.steps),D(19),j(e.approximate?20:-1)}}function _fe(e,t){if(e&1&&(R(0,`h3`,0),K(1,`Missing provider`),z(),R(2,`dl`,1)(3,`dt`),K(4,`Token`),z(),R(5,`dd`)(6,`code`),K(7),z()(),A(8,Zde,5,0),A(9,Qde,5,1),z(),A(10,$de,2,2,`button`,15)(11,efe,2,0,`p`,4),R(12,`div`,16),A(13,tfe,2,0,`p`,4)(14,afe,3,0,`p`,17)(15,lfe,3,0,`p`,7),z(),A(16,gfe,21,1)),e&2){let e,n,r=t,i=W(2);D(7),q(r.token),D(),j(r.path?.length?8:-1),D(),j(r.source?9:-1),D(),j(i.canExplain()&&i.owner()?10:i.owner()?-1:11),D(3),j(i.loading()?13:(e=i.lookupError())?14:(e=i.lookup())?15:-1,e),D(3),j((n=!i.loading()&&!i.lookupError()&&i.lookup())?16:-1,n)}}function vfe(e,t){if(e&1&&A(0,_fe,17,6),e&2){let e;j((e=W().missing())?0:-1,e)}}var yfe={provides:`Provides it`,missing:`Not provided`,hidden:`Hidden`,skipped:`Skipped`,"not-asked":`Not asked`,unknown:`Unknown`},bfe={provides:`ok`,missing:`plain`,hidden:`warn`,skipped:`plain`,"not-asked":`plain`,unknown:`warn`},xfe=class e{explain=$.required();owner=$(void 0);pageId=$(``);rpc=$(null);canExplain=$(!1);time=VE;segments=_de;stepLabel=yfe;stepTone=bfe;changed=X(()=>{let e=this.explain();return e.kind===`expression-changed`?e:null});mismatch=X(()=>{let e=this.explain();return e.kind===`hydration-mismatch`?e:null});missing=X(()=>{let e=this.explain();return e.kind===`missing-provider`?e:null});loading=T(!1);lookup=T(null);lookupError=T(null);signOf(e){return e===`expected`?`−`:e===`actual`?`+`:` `}async explainLookup(e){let t=this.rpc(),n=this.owner();if(t&&n&&!this.loading()){this.loading.set(!0),this.lookupError.set(null);try{let r=await t.scope(`pangular`).rpc.call(`explain-injection`,{selector:n.id,token:e,pageId:this.pageId()});!r||`error`in r?(this.lookup.set(null),this.lookupError.set(r?.error??`The server didn't answer.`)):this.lookup.set(r)}catch{this.lookup.set(null),this.lookupError.set(`Can't reach the devtools server. Try again.`)}finally{this.loading.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-error-explain`]],inputs:{explain:[1,`explain`],owner:[1,`owner`],pageId:[1,`pageId`],rpc:[1,`rpc`],canExplain:[1,`canExplain`]},decls:3,vars:1,consts:[[1,`label`],[1,`facts`],[1,`muted`],[1,`value`],[1,`note`],[1,`writes`],[`aria-label`,`App frames that wrote it`,1,`frames`],[1,`summary`],[1,`legend`],[`aria-hidden`,`true`,1,`sign`,`expected`],[`aria-hidden`,`true`,1,`sign`,`actual`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Server vs client DOM diff`,1,`diff-wrap`],[1,`diff`],[`aria-hidden`,`true`,1,`sign`],[1,`sr-only`],[`type`,`button`,1,`small`],[`aria-live`,`polite`],[`role`,`alert`,1,`note`],[`type`,`button`,1,`small`,3,`click`],[`aria-label`,`Injectors Angular asks, in order`,1,`steps`],[1,`step-name`],[1,`chip`],[1,`reason`]],template:function(e,t){if(e&1&&A(0,Vde,1,1)(1,Yde,1,1)(2,vfe,1,1),e&2){let e;j((e=t.explain().kind)===`expression-changed`?0:e===`hydration-mismatch`?1:e===`missing-provider`?2:-1)}},styles:[`[_nghost-%COMP%] {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  font-size: 12px;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.facts[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: max-content minmax(0, 1fr);
-  gap: 4px 12px;
-  margin: 0;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-dd[_ngcontent-%COMP%] {
-  min-width: 0;
-  margin: 0;
-}
-
-.value[_ngcontent-%COMP%] {
-  white-space: pre-wrap;
-}
-
-.note[_ngcontent-%COMP%], 
-.summary[_ngcontent-%COMP%], 
-.legend[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.summary[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-}
-
-.writes[_ngcontent-%COMP%], 
-.frames[_ngcontent-%COMP%] {
-  margin: 0;
-  padding-left: 18px;
-}
-
-.diff-wrap[_ngcontent-%COMP%] {
-  max-height: 280px;
-  overflow: auto;
-  border-radius: var(--%NS%radius-sm);
-  border: 1px solid var(--%NS%border);
-}
-
-.diff-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.diff[_ngcontent-%COMP%] {
-  min-width: max-content;
-  margin: 0;
-  padding: 4px 0;
-  list-style: none;
-}
-
-.diff[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  padding: 0 8px;
-  white-space: pre;
-}
-
-.diff[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow-wrap: normal;
-}
-
-.diff[_ngcontent-%COMP%]   li[data-op=expected][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.diff[_ngcontent-%COMP%]   li[data-op=actual][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.sign[_ngcontent-%COMP%] {
-  flex-shrink: 0;
-  width: 1ch;
-  font-family: var(--%NS%font-mono);
-  font-weight: 700;
-}
-
-.legend[_ngcontent-%COMP%]   .sign[_ngcontent-%COMP%] {
-  display: inline-block;
-  text-align: center;
-}
-
-.legend[_ngcontent-%COMP%]   .sign.expected[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}
-
-.legend[_ngcontent-%COMP%]   .sign.actual[_ngcontent-%COMP%] {
-  color: var(--%NS%ok-text);
-}
-
-.small[_ngcontent-%COMP%] {
-  justify-self: start;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.small[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-
-.small[aria-disabled=true][_ngcontent-%COMP%] {
-  cursor: progress;
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.steps[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding-left: 22px;
-}
-
-.steps[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  padding: 2px 0;
-}
-
-.step-name[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-right: 6px;
-}
-
-.reason[_ngcontent-%COMP%] {
-  display: block;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.chip[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.chip[data-tone=plain][_ngcontent-%COMP%] {
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}`]})},Sfe=(e,t)=>t.id;function Cfe(e,t){if(e&1&&(R(0,`span`,11),K(1),z()),e&2){let e=W().$implicit;D(),J(``,e.count,`×`)}}function wfe(e,t){e&1&&(R(0,`code`,6),K(1),z()),e&2&&(D(),q(t))}function Tfe(e,t){if(e&1&&(R(0,`span`,6),K(1),z()),e&2){let e=W().$implicit;D(),q(e.plugin)}}function Efe(e,t){if(e&1&&(R(0,`span`,14),K(1),z()),e&2){let e=W().$implicit;D(),q(e.code)}}function Dfe(e,t){if(e&1&&(R(0,`details`)(1,`summary`),K(2,`Code frame`),z(),R(3,`pre`,15),K(4),z()()),e&2){let e=W().$implicit;D(4),q(e.frame)}}function Ofe(e,t){if(e&1&&(R(0,`details`)(1,`summary`),K(2,`Stack`),z(),R(3,`pre`,16),K(4),z()()),e&2){let e=W().$implicit;D(4),q(e.stack)}}function kfe(e,t){if(e&1&&(R(0,`li`,8)(1,`div`,9)(2,`span`,10),K(3),z(),A(4,Cfe,2,1,`span`,11),R(5,`code`,12),K(6),z()(),R(7,`div`,13),A(8,wfe,2,1,`code`,6),A(9,Tfe,2,1,`span`,6),A(10,Efe,2,1,`span`,14),R(11,`span`,6),K(12),z()(),A(13,Dfe,5,1,`details`),A(14,Ofe,5,1,`details`),z()),e&2){let e,n=t.$implicit,r=W(2);D(2),k(`data-tone`,n.kind===`ssr`?`danger`:`warn`),D(),q(n.kind===`ssr`?`SSR`:`Vite`),D(),j(n.count>1?4:-1),D(2),q(n.message),D(2),j((e=r.place(n))?8:-1,e),D(),j(n.plugin&&n.file?9:-1),D(),j(n.code?10:-1),D(2),J(`Last at `,r.time(n.lastAt)),D(),j(n.frame?13:-1),D(),j(n.stack?14:-1)}}function Afe(e,t){if(e&1){let e=B();R(0,`section`,0)(1,`div`,2)(2,`h2`,3),K(3,` Server errors `),R(4,`span`,4),K(5),z()(),R(6,`button`,5),U(`click`,function(){return S(e),C(W().clear())}),K(7,`Clear server errors`),z()(),R(8,`p`,6),K(9,` From the dev server: SSR renders that logged an error, and Vite transform and compile errors. Masked; each group expires 30 minutes after its last repeat. `),z(),R(10,`ol`,7),M(11,kfe,15,10,`li`,8,Sfe),z()()}if(e&2){let e=W();D(5),q(e.errors().length),D(6),N(e.errors())}}function jfe(e){let t=e?.errors;return Array.isArray(t)?t.filter(e=>!!e&&typeof e==`object`&&typeof e.id==`string`&&typeof e.message==`string`&&(e.kind===`ssr`||e.kind===`vite`)):[]}function Mfe(e){if(e.kind===`ssr`)return e.url?`Render of ${e.url}`:`Server render`;if(!e.file)return e.plugin??``;let t=e.line===void 0?``:`:${e.line}`,n=e.line!==void 0&&e.column!==void 0?`:${e.column}`:``;return`${e.file}${t}${n}`}var Nfe=class e{rpc=$(null);destroyRef=x(Ss);unsubscribe;time=VE;place=Mfe;errors=T([]);status=T(``);constructor(){E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async clear(){let e=this.rpc();if(e)try{await e.scope(`pangular`).rpc.call(`clear-server-errors`),this.status.set(`Server errors cleared.`)}catch{this.status.set(`Couldn't clear the server errors.`)}}async load(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`server-errors`);if(this.destroyRef.destroyed)return;let n=e=>this.errors.set(jfe(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-server-errors-section`]],inputs:{rpc:[1,`rpc`]},decls:3,vars:2,consts:[[`aria-labelledby`,`server-errors-title`,1,`server`],[`role`,`status`,1,`sr-only`],[1,`bar`],[`id`,`server-errors-title`],[1,`badge`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[`aria-label`,`Server errors, most recent first`,1,`list`],[1,`item`],[1,`head`],[1,`chip`],[1,`times`],[1,`message`],[1,`meta`],[1,`chip`,`plain`],[`tabindex`,`0`,`aria-label`,`Code frame`],[`tabindex`,`0`,`aria-label`,`Stack trace`]],template:function(e,t){e&1&&(A(0,Afe,13,1,`section`,0),R(1,`p`,1),K(2),z()),e&2&&(j(t.errors().length?0:-1),D(2),q(t.status()))},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.server[_ngcontent-%COMP%] {
-  margin: 0 0 16px;
-}
-
-.bar[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-h2[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-}
-
-.badge[_ngcontent-%COMP%] {
-  padding: 0 6px;
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-p.muted[_ngcontent-%COMP%] {
-  margin: 6px 0 8px;
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%], 
-pre[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.list[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.item[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding: 8px 12px;
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-  min-width: 0;
-}
-
-.message[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
-
-.times[_ngcontent-%COMP%] {
-  flex-shrink: 0;
-  color: var(--%NS%danger-text);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  align-items: center;
-  min-width: 0;
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.chip.plain[_ngcontent-%COMP%] {
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
-  width: fit-content;
-  border-radius: 2px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-pre[_ngcontent-%COMP%] {
-  max-height: 240px;
-  margin: 6px 0 0;
-  padding: 8px;
-  overflow: auto;
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  white-space: pre;
-}
-
-pre[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},u5=(e,t)=>t.pageId+t.id;function Pfe(e,t){e&1&&(F(0,`app-state`,2),K(1,`Loading errors…`),I())}function Ffe(e,t){if(e&1){let e=B();F(0,`app-state`,5),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Can't read the errors from the devtools server. `),I()}}function Ife(e,t){e&1&&(F(0,`app-state`,4),K(1,` No page reports errors yet. `),F(2,`p`,6),K(3,` Open the app with the overlay loaded. Errors and console calls show up here as they happen. `),I()())}function Lfe(e,t){if(e&1){let e=B();F(0,`app-select`,19),H(`valueChange`,function(t){return S(e),C(W(2).level.set(t))}),I()}if(e&2){let e=W(2);P(`options`,e.levelOptions)(`value`,e.level())}}function Rfe(e,t){if(e&1){let e=B();F(0,`app-select`,20),H(`valueChange`,function(t){S(e);let n=W(2);return C(n.pageId.set(t??n.allPages))}),I()}if(e&2){let e=W(2);P(`options`,e.pageOptions())(`value`,e.pageId())}}function zfe(e,t){e&1&&(F(0,`p`,22),K(1,` Angular's ErrorHandler isn't wrapped on this page yet, so errors Angular catches show up only when the default handler logs them. `),I())}function Bfe(e,t){if(e&1&&(F(0,`p`,22),K(1),I()),e&2){let e=W(3);D(),Y(` `,e.droppedErrors(),` older error `,e.droppedErrors()===1?`group was`:`groups were`,` dropped. Each page keeps its last 100. `)}}function Vfe(e,t){e&1&&(F(0,`p`,23),K(1,` No errors since the page loaded. Errors show up here as the app hits them. `),I())}function Hfe(e,t){if(e&1){let e=B();F(0,`div`,23)(1,`p`),K(2),I(),F(3,`button`,25),H(`click`,function(){S(e),W(2);let t=Pg(13);return W().filter.set(``),C(t.focus())}),K(4,` Clear filters `),I()()}if(e&2){let e=W(3);D(2),J(`No error matches “`,e.filter(),`”.`)}}function Ufe(e,t){if(e&1&&(F(0,`a`,34),K(1),F(2,`span`,36),K(3,` reference (opens in a new tab)`),I()()),e&2){let e=W();P(`href`,t,Du),D(),q(e)}}function Wfe(e,t){if(e&1&&(F(0,`span`,35),K(1),I()),e&2){let e=W();D(),q(e)}}function Gfe(e,t){if(e&1&&A(0,Ufe,4,2,`a`,34)(1,Wfe,2,1,`span`,35),e&2){let e,n=W().$implicit;j((e=W(4).codeLink(t,n.docUrl).href)?0:1,e)}}function Kfe(e,t){if(e&1&&(F(0,`span`,31),K(1),I()),e&2){let e=t.$implicit,n=W(5);D(),q(n.sourceLabels[e])}}function qfe(e,t){if(e&1&&(F(0,`span`,32),K(1),I()),e&2){let e=W().$implicit,t=W(4);D(),q(t.pageLabel(e.pageId))}}function Jfe(e,t){if(e&1){let e=B();F(0,`button`,38),H(`click`,function(){S(e);let t=W(),n=W().$implicit;return C(W(4).showComponent.emit({id:t.id,pageId:n.pageId}))}),K(1,` Show component `),F(2,`code`),K(3),I()()}if(e&2){let e=W();D(3),q(e.name)}}function Yfe(e,t){if(e&1&&(F(0,`span`,32),K(1,`In `),F(2,`code`),K(3),I()()),e&2){let e=W();D(3),q(e.name)}}function Xfe(e,t){e&1&&A(0,Jfe,4,1,`button`,37)(1,Yfe,4,1,`span`,32),e&2&&j(+!W(5).canShowComponent())}function Zfe(e,t){if(e&1&&L(0,`app-error-explain`,33),e&2){let e=W().$implicit,n=W(4);P(`explain`,t)(`owner`,e.owner)(`pageId`,e.pageId)(`rpc`,n.rpc())(`canExplain`,n.canExplainInjection())}}function Qfe(e,t){if(e&1&&(F(0,`details`)(1,`summary`),K(2,`Stack`),I(),F(3,`pre`,39),K(4),I()()),e&2){let e=W().$implicit;D(4),q(e.stack)}}function $fe(e,t){if(e&1&&(F(0,`li`,26)(1,`div`,27)(2,`span`,28),K(3),I(),F(4,`code`,29),K(5),I()(),F(6,`div`,30),A(7,Gfe,2,1),M(8,Kfe,2,1,`span`,31,eg),F(10,`span`,32),K(11),I(),A(12,qfe,2,1,`span`,32),A(13,Xfe,2,1),I(),A(14,Zfe,1,5,`app-error-explain`,33),A(15,Qfe,5,1,`details`),I()),e&2){let e,n,r,i=t.$implicit,a=W(4);D(2),k(`aria-label`,a.timesLabel(i.count)),D(),J(` `,i.count,`× `),D(2),q(i.message),D(2),j((e=i.code)?7:-1,e),D(),N(i.sources),D(3),J(`Last at `,a.time(i.lastAt)),D(),j(a.showPage()?12:-1),D(),j((n=i.owner)?13:-1,n),D(),j((r=i.explain)?14:-1,r),D(),j(i.stack?15:-1)}}function epe(e,t){if(e&1&&(F(0,`ol`,24),M(1,$fe,16,9,`li`,26,u5),I()),e&2){let e=W(3);D(),N(e.shownErrors())}}function tpe(e,t){if(e&1&&(F(0,`section`,17)(1,`h2`,21),K(2,`Errors`),I(),A(3,zfe,2,0,`p`,22),A(4,Bfe,2,2,`p`,22),A(5,Vfe,2,0,`p`,23)(6,Hfe,5,1,`div`,23)(7,epe,3,0,`ol`,24),I()),e&2){let e=W(2);D(3),j(e.unwrapped()?3:-1),D(),j(e.droppedErrors()?4:-1),D(),j(e.errors().length?e.shownErrors().length?7:6:5)}}function npe(e,t){if(e&1&&(F(0,`p`,22),K(1),I()),e&2){let e=W(3);D(),Y(` `,e.droppedConsole(),` older `,e.droppedConsole()===1?`call was`:`calls were`,` dropped. Each page keeps its last 200. `)}}function rpe(e,t){e&1&&(F(0,`p`,23),K(1,` No console calls since the overlay connected. They show up here as the app logs. `),I())}function ipe(e,t){if(e&1){let e=B();F(0,`div`,23)(1,`p`),K(2,`No console call matches the filters.`),I(),F(3,`button`,25),H(`click`,function(){S(e),W(2);let t=Pg(13);return W().clearFilters(),C(t.focus())}),K(4,` Clear filters `),I()()}}function ape(e,t){if(e&1&&(F(0,`span`,28),K(1),I()),e&2){let e=W().$implicit;k(`aria-label`,W(4).timesLabel(e.count)),D(),J(``,e.count,`×`)}}function ope(e,t){if(e&1&&(F(0,`a`,34),K(1),F(2,`span`,36),K(3,` reference (opens in a new tab)`),I()()),e&2){let e=W();P(`href`,t,Du),D(),q(e)}}function spe(e,t){if(e&1&&(F(0,`span`,46),K(1),I()),e&2){let e=W();D(),q(e)}}function cpe(e,t){if(e&1&&A(0,ope,4,2,`a`,34)(1,spe,2,1,`span`,46),e&2){let e,n=W().$implicit;j((e=W(4).codeLink(t,n.docUrl).href)?0:1,e)}}function lpe(e,t){if(e&1&&(F(0,`li`,42)(1,`span`,43),K(2),I(),F(3,`code`,44),K(4),I(),A(5,ape,2,2,`span`,28),A(6,cpe,2,1),F(7,`time`,45),K(8),I()()),e&2){let e,n=t.$implicit,r=W(4);D(),k(`data-tone`,r.levelTone[n.level]),D(),q(n.level),D(2),q(n.text),D(),j(n.count>1?5:-1),D(),j((e=n.code)?6:-1,e),D(2),q(r.time(n.at))}}function upe(e,t){if(e&1&&(F(0,`ol`,41),M(1,lpe,9,6,`li`,42,u5),I()),e&2){let e=W(3);D(),N(e.shownEntries())}}function dpe(e,t){if(e&1&&(F(0,`section`,18)(1,`h2`,40),K(2,`Console`),I(),A(3,npe,2,2,`p`,22),A(4,rpe,2,0,`p`,23)(5,ipe,5,0,`div`,23)(6,upe,3,0,`ol`,41),I()),e&2){let e=W(2);D(3),j(e.droppedConsole()?3:-1),D(),j(e.entries().length?e.shownEntries().length?6:5:4)}}function fpe(e,t){if(e&1){let e=B();F(0,`p`,7),K(1,` Errors from Angular's ErrorHandler, uncaught errors and unhandled promise rejections on the live page, grouped by message, and the page's console calls. Messages and values are masked like other live data. `),I(),F(2,`div`,8)(3,`div`,9)(4,`button`,10),H(`click`,function(){return S(e),C(W().view.set(`errors`))}),K(5,` Errors `),F(6,`span`,11),K(7),I()(),F(8,`button`,10),H(`click`,function(){return S(e),C(W().view.set(`console`))}),K(9,` Console `),F(10,`span`,11),K(11),I()()(),F(12,`app-search-field`,12,0),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.filter,t)||(n.filter=t),C(t)}),I(),A(14,Lfe,1,2,`app-select`,13),A(15,Rfe,1,2,`app-select`,14),F(16,`span`,15),K(17),I(),F(18,`p`,16),K(19),I()(),A(20,tpe,8,3,`section`,17)(21,dpe,7,2,`section`,18)}if(e&2){let e=W();D(4),k(`aria-pressed`,e.view()===`errors`),D(3),q(e.errors().length),D(),k(`aria-pressed`,e.view()===`console`),D(3),q(e.entries().length),D(),P(`placeholder`,e.view()===`errors`?`Filter by message or code`:`Filter by text`)(`saveKey`,`errors-`+e.view()),A_(`value`,e.filter),D(2),j(e.view()===`console`?14:-1),D(),j(e.pageOptions().length>2?15:-1),D(2),q(e.countText()),D(2),q(e.countStatus()),D(),j(e.view()===`errors`?20:21)}}var ppe={error:`danger`,warn:`warn`,info:`accent`,log:`plain`,debug:`plain`},mpe=class e{rpc=$(null);canShowComponent=$(!0);canExplainInjection=$(!1);showComponent=cv();destroyRef=x(Ss);hostPageId=tT();unsubscribe;time=VE;codeLink=Cde;sourceLabels=vde;levelTone=ppe;allPages=`all`;levelOptions=[{value:`all`,label:`All levels`},...gde.map(e=>({value:e,label:e}))];pages=T([]);loaded=T(!1);failed=T(!1);view=T(`errors`);filter=T(``);level=T(`all`);pageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&(t.value===`all`||e.some(e=>e.pageId===t.value))?t.value:bde(e,this.hostPageId)});pageOptions=X(()=>[{value:`all`,label:`All pages`},...this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url}))]);showPage=X(()=>this.pageId()===`all`&&this.pages().length>1);picked=X(()=>this.pages().filter(e=>this.pageId()===`all`||e.pageId===this.pageId()));unwrapped=X(()=>this.picked().some(e=>e.handler!==`wrapped`));droppedErrors=X(()=>this.picked().reduce((e,t)=>e+t.dropped.errors,0));droppedConsole=X(()=>this.picked().reduce((e,t)=>e+t.dropped.console,0));errors=X(()=>xde(this.pages(),this.pageId()));entries=X(()=>Sde(this.pages(),this.pageId()));shownErrors=X(()=>{let e=this.filter().trim().toLowerCase();return e?this.errors().filter(t=>t.message.toLowerCase().includes(e)||(t.code??``).toLowerCase().includes(e)||(t.owner?.name??``).toLowerCase().includes(e)):this.errors()});shownEntries=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.level();return this.entries().filter(n=>(t===`all`||n.level===t)&&(!e||n.text.toLowerCase().includes(e)))});countText=X(()=>{let[e,t,n]=this.view()===`errors`?[this.shownErrors().length,this.errors().length,`error`]:[this.shownEntries().length,this.entries().length,`call`];return`${e} of ${t} ${t===1?n:`${n}s`}`});countStatus=c5(()=>[this.view(),this.filter(),this.level(),this.pageId()],()=>this.countText());constructor(){E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}retry(){let e=this.rpc();e&&this.load(e)}clearFilters(){this.filter.set(``),this.level.set(`all`)}timesLabel(e){return e===1?`Once`:`${e} times`}pageLabel(e){let t=this.pages().find(t=>t.pageId===e);return t?.title||t?.url||e}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`errors`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(yde(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-errors-inspector`]],inputs:{rpc:[1,`rpc`],canShowComponent:[1,`canShowComponent`],canExplainInjection:[1,`canExplainInjection`]},outputs:{showComponent:`showComponent`},decls:5,vars:2,consts:[[`search`,``],[3,`rpc`],[`kind`,`loading`],[`kind`,`error`],[`kind`,`empty`],[`kind`,`error`,3,`retry`],[`detail`,``],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Show`,1,`views`],[`type`,`button`,1,`view`,3,`click`],[1,`badge`],[1,`search`,3,`valueChange`,`placeholder`,`saveKey`,`value`],[`ariaLabel`,`Console level`,1,`level-select`,3,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[1,`count`],[`role`,`status`,1,`sr-only`],[`aria-labelledby`,`errors-title`],[`aria-labelledby`,`console-title`],[`ariaLabel`,`Console level`,1,`level-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[`id`,`errors-title`,1,`sr-only`],[1,`notice`],[1,`empty`],[`aria-label`,`Errors, most recent first`,1,`errors`],[`type`,`button`,1,`small`,3,`click`],[1,`error`],[1,`head`],[1,`times`],[1,`message`],[1,`meta`],[1,`chip`,`source`],[1,`muted`],[3,`explain`,`owner`,`pageId`,`rpc`,`canExplain`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`chip`,`code`,3,`href`],[`title`,`No page in Angular's error reference`,1,`chip`,`code`,`plain`],[1,`sr-only`],[`type`,`button`,1,`link`],[`type`,`button`,1,`link`,3,`click`],[`tabindex`,`0`,`aria-label`,`Stack trace`],[`id`,`console-title`,1,`sr-only`],[`aria-label`,`Console calls, newest first`,1,`console`],[1,`entry`],[1,`chip`,`level`],[1,`text`],[1,`when`],[1,`chip`,`code`,`plain`]],template:function(e,t){e&1&&(L(0,`app-server-errors-section`,1),A(1,Pfe,2,0,`app-state`,2)(2,Ffe,2,0,`app-state`,3)(3,Ife,4,0,`app-state`,4)(4,fpe,22,12)),e&2&&(P(`rpc`,t.rpc()),D(),j(t.loaded()?t.failed()?2:t.pages().length?4:3:1))},dependencies:[HL,$N,wD,xfe,Nfe],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%], 
-pre[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 12px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.views[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 4px;
-}
-
-.view[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.view[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.view[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.view[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.badge[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-input[type=search][_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.level-select[_ngcontent-%COMP%], 
-.page-select[_ngcontent-%COMP%] {
-  flex: 0 1 180px;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.errors[_ngcontent-%COMP%], 
-.console[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.error[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  padding: 8px 12px;
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-  min-width: 0;
-}
-
-.message[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
-
-.times[_ngcontent-%COMP%] {
-  flex-shrink: 0;
-  color: var(--%NS%danger-text);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  align-items: center;
-  font-size: 12px;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.chip.source[_ngcontent-%COMP%], 
-.chip.plain[_ngcontent-%COMP%], 
-.chip[data-tone=plain][_ngcontent-%COMP%] {
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-a.chip[_ngcontent-%COMP%] {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-a.chip[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.link[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 4px;
-  align-items: baseline;
-  padding: 0;
-  border: 0;
-  border-radius: 2px;
-  background: none;
-  color: var(--%NS%accent-text);
-  font: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
-  width: fit-content;
-  border-radius: 2px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-pre[_ngcontent-%COMP%] {
-  max-height: 240px;
-  margin: 6px 0 0;
-  padding: 8px;
-  overflow: auto;
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text);
-  white-space: pre;
-}
-
-pre[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.entry[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: baseline;
-  min-width: 0;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.entry[_ngcontent-%COMP%]   .level[_ngcontent-%COMP%] {
-  min-width: 44px;
-  justify-content: center;
-}
-
-.entry[_ngcontent-%COMP%]   .times[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.text[_ngcontent-%COMP%] {
-  flex: 1 1 240px;
-  min-width: 0;
-  color: var(--%NS%text);
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-}
-
-.when[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.empty[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}`]})},hpe=(e,t)=>t.name;function gpe(e,t){e&1&&(F(0,`p`,0),K(1,`Loading performance…`),I())}function _pe(e,t){if(e&1){let e=B();F(0,`div`,1)(1,`p`),K(2,`Can't read the performance data from the devtools server.`),I(),F(3,`button`,2),H(`click`,function(){return S(e),C(W().retry())}),K(4,`Retry`),I()()}}function vpe(e,t){e&1&&(F(0,`div`,0)(1,`p`),K(2,`No page reports performance yet.`),I(),F(3,`p`,3),K(4,` Open the app with the overlay loaded. The browser measures web vitals as the page loads and as you use it. `),I()())}function ype(e,t){if(e&1){let e=B();F(0,`div`,5)(1,`app-select`,6),H(`valueChange`,function(t){return S(e),C(W(2).pageId.set(t??``))}),I()()}if(e&2){let e=W(2);D(),P(`options`,e.pageOptions())(`value`,e.pageId())}}function bpe(e,t){if(e&1&&(F(0,`code`,22),K(1),I()),e&2){let e=W();D(),Y(``,e.event?e.event+` on `:``,``,e.target)}}function xpe(e,t){if(e&1){let e=B();F(0,`button`,24),H(`click`,function(){S(e);let t=W(),n=W(3);return C(W(2).showComponent.emit({id:t.id,pageId:n.pageId}))}),K(1,` Show component `),F(2,`code`),K(3),I()()}if(e&2){let e=W();D(3),q(e.name)}}function Spe(e,t){if(e&1&&(F(0,`span`,3),K(1,`In `),F(2,`code`),K(3),I()()),e&2){let e=W();D(3),q(e.name)}}function Cpe(e,t){e&1&&A(0,xpe,4,1,`button`,23)(1,Spe,4,1,`span`,3),e&2&&j(+!W(5).canShowComponent())}function wpe(e,t){if(e&1&&(F(0,`span`,20),K(1),I(),F(2,`span`,21),K(3),I(),A(4,bpe,2,2,`code`,22),A(5,Cpe,2,1)),e&2){let e,n=t,r=W().$implicit,i=W(3);D(),q(i.format(r.name,n.value)),D(2),q(i.ratingLabel[n.rating]),D(),j(n.event||n.target?4:-1),D(),j((e=n.owner)?5:-1,e)}}function Tpe(e,t){if(e&1&&(F(0,`span`,25),K(1,`–`),I(),F(2,`span`,26),K(3),I()),e&2){let e=W().$implicit,t=W(),n=W(2);D(3),q(n.missing(t,e.entry))}}function Epe(e,t){if(e&1&&(F(0,`li`,10)(1,`span`,17)(2,`abbr`,18),K(3),I(),F(4,`span`,19),K(5),I()(),A(6,wpe,6,4)(7,Tpe,4,1),I()),e&2){let e,n=t.$implicit,r=W();k(`data-rating`,r.metrics[n.name]?.rating??`none`),D(2),P(`title`,n.label),D(),q(n.name),D(2),q(n.label),D(),j((e=r.metrics[n.name])?6:7,e)}}function Dpe(e,t){e&1&&(F(0,`p`,13),K(1,`No interaction of 40 ms or more yet. Click or type in the app.`),I())}function Ope(e,t){if(e&1&&(F(0,`span`,3),K(1),I()),e&2){let e=W().$implicit;D(),J(` in `,e.owner.name)}}function kpe(e,t){if(e&1&&(F(0,`tr`)(1,`td`)(2,`code`),K(3),I()(),F(4,`td`)(5,`code`),K(6),I(),A(7,Ope,2,1,`span`,3),I(),F(8,`td`,29),K(9),I(),F(10,`td`,29),K(11),I()()),e&2){let e=t.$implicit,n=W(4);D(3),q(e.event),D(3),q(e.target??``),D(),j(e.owner?7:-1),D(2),q(n.formatMs(e.durationMs)),D(2),q(n.formatMs(e.at))}}function Ape(e,t){if(e&1&&(F(0,`table`)(1,`caption`,19),K(2,` Slowest interactions, slowest first `),I(),F(3,`thead`)(4,`tr`)(5,`th`,27),K(6,`Event`),I(),F(7,`th`,27),K(8,`Target`),I(),F(9,`th`,28),K(10,`Duration`),I(),F(11,`th`,28),K(12,`At`),I()()(),F(13,`tbody`),M(14,kpe,12,5,`tr`,null,$h),I()()),e&2){let e=W();D(14),N(e.interactions)}}function jpe(e,t){if(e&1&&(F(0,`tr`)(1,`td`,29),K(2),I(),F(3,`td`,29),K(4),I(),F(5,`td`)(6,`code`),K(7),I()()()),e&2){let e=t.$implicit,n=W(4);D(2),q(n.formatMs(e.at)),D(2),q(n.formatMs(e.durationMs)),D(3),q(e.source??(e.kind===`long-animation-frame`?`long animation frame`:`task`))}}function Mpe(e,t){if(e&1&&(F(0,`table`)(1,`caption`,19),K(2,` Latest long tasks, newest first `),I(),F(3,`thead`)(4,`tr`)(5,`th`,28),K(6,`At`),I(),F(7,`th`,28),K(8,`Duration`),I(),F(9,`th`,27),K(10,`Source`),I()()(),F(11,`tbody`),M(12,jpe,8,3,`tr`,null,$h),I()()),e&2){let e=W(3);D(12),N(e.latestTasks())}}function Npe(e,t){if(e&1&&(F(0,`section`,7)(1,`h2`,8),K(2,`Web vitals`),I(),F(3,`ul`,9),M(4,Epe,8,5,`li`,10,hpe),I()(),F(6,`section`,11)(7,`h2`,12),K(8,`Slowest interactions`),I(),A(9,Dpe,2,0,`p`,13)(10,Ape,16,0,`table`),I(),F(11,`section`,14)(12,`h2`,15),K(13,`Long tasks`),I(),F(14,`p`,16),K(15),I(),A(16,Mpe,14,0,`table`),I()),e&2){let e=t,n=W(2);D(4),N(n.metrics),D(5),j(e.interactions.length?10:9),D(6),D_(` `,e.longTaskCount,` long `,e.longTaskCount===1?`task`:`tasks`,`, total blocking time `,n.formatMs(e.totalBlockingMs),`. `),D(),j(e.longTasks.length?16:-1)}}function Ppe(e,t){if(e&1&&(F(0,`p`,4),K(1,` Web vitals the browser measured since the page loaded, rated by the web.dev thresholds, and the tasks that blocked the main thread. `),I(),A(2,ype,2,2,`div`,5),A(3,Npe,17,5)),e&2){let e,t=W();D(2),j(t.pages().length>1?2:-1),D(),j((e=t.page())?3:-1,e)}}var Fpe=[{name:`LCP`,label:`Largest Contentful Paint`,entry:`largest-contentful-paint`},{name:`INP`,label:`Interaction to Next Paint`,entry:`event`},{name:`CLS`,label:`Cumulative Layout Shift`,entry:`layout-shift`},{name:`FCP`,label:`First Contentful Paint`,entry:`paint`},{name:`TTFB`,label:`Time to First Byte`,entry:`navigation`}],Ipe={good:`Good`,"needs-improvement":`Needs improvement`,poor:`Poor`};function Lpe(e){let t=e?.pages;return!t||typeof t!=`object`?[]:Object.values(t).filter(e=>!!e&&typeof e==`object`&&typeof e.pageId==`string`&&!!e.metrics&&Array.isArray(e.longTasks)).sort((e,t)=>t.reportedAt-e.reportedAt)}function Rpe(e,t){return e===`CLS`?t.toFixed(3):d5(t)}function d5(e){return e>=1e3?`${(e/1e3).toFixed(2)} s`:`${Math.round(e)} ms`}var zpe=class e{rpc=$(null);canShowComponent=$(!0);showComponent=cv();destroyRef=x(Ss);hostPageId=tT();unsubscribe;metrics=Fpe;ratingLabel=Ipe;format=Rpe;formatMs=d5;pages=T([]);loaded=T(!1);failed=T(!1);pageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:(e.find(e=>e.pageId===this.hostPageId)??e[0])?.pageId??``});page=X(()=>this.pages().find(e=>e.pageId===this.pageId()));pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url})));latestTasks=X(()=>[...this.page()?.longTasks??[]].reverse());constructor(){E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}retry(){let e=this.rpc();e&&this.load(e)}missing(e,t){return t!==`navigation`&&!e.supported.includes(t)?`Not measured by this browser`:`Not measured yet`}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`performance`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(Lpe(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-performance-inspector`]],inputs:{rpc:[1,`rpc`],canShowComponent:[1,`canShowComponent`]},outputs:{showComponent:`showComponent`},decls:4,vars:1,consts:[[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[1,`intro`],[1,`toolbar`],[`ariaLabel`,`Page`,3,`valueChange`,`options`,`value`],[`aria-labelledby`,`vitals-title`],[`id`,`vitals-title`],[1,`metrics`],[1,`metric`],[`aria-labelledby`,`interactions-title`],[`id`,`interactions-title`],[1,`empty`],[`aria-labelledby`,`tasks-title`],[`id`,`tasks-title`],[1,`summary`],[1,`name`],[3,`title`],[1,`sr-only`],[1,`value`],[1,`rating`],[1,`where`],[`type`,`button`,1,`link`],[`type`,`button`,1,`link`,3,`click`],[1,`value`,`muted`],[1,`rating`,`muted`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`num`]],template:function(e,t){e&1&&A(0,gpe,2,0,`p`,0)(1,_pe,5,0,`div`,1)(2,vpe,5,0,`div`,0)(3,Ppe,4,2),e&2&&j(t.loaded()?t.failed()?1:t.pages().length?3:2:0)},dependencies:[wD],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%], 
-.summary[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.metrics[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.metric[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: grid;
-  gap: 4px;
-  align-content: start;
-  min-width: 0;
-  padding: 10px 12px;
-  border-left: 3px solid var(--%NS%border);
-}
-
-.metric[data-rating=good][_ngcontent-%COMP%] {
-  border-left-color: var(--%NS%ok);
-}
-
-.metric[data-rating=needs-improvement][_ngcontent-%COMP%] {
-  border-left-color: var(--%NS%warn);
-}
-
-.metric[data-rating=poor][_ngcontent-%COMP%] {
-  border-left-color: var(--%NS%danger);
-}
-
-.name[_ngcontent-%COMP%]   abbr[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-  text-decoration: none;
-}
-
-.value[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-size: 20px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.rating[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-[data-rating=good][_ngcontent-%COMP%]   .rating[_ngcontent-%COMP%] {
-  color: var(--%NS%ok-text);
-}
-
-[data-rating=needs-improvement][_ngcontent-%COMP%]   .rating[_ngcontent-%COMP%] {
-  color: var(--%NS%warn-text);
-}
-
-[data-rating=poor][_ngcontent-%COMP%]   .rating[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}
-
-.link[_ngcontent-%COMP%] {
-  justify-self: start;
-  padding: 0;
-  border: 0;
-  border-radius: 2px;
-  background: none;
-  color: var(--%NS%accent-text);
-  font: inherit;
-  font-size: 12px;
-  text-align: left;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.empty[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},f5=(e,t)=>t.url,Bpe=(e,t)=>t.file;function Vpe(e,t){if(e&1){let e=B();F(0,`div`,5)(1,`p`),K(2,`Can't read the build data from the devtools server.`),I(),F(3,`button`,7),H(`click`,function(){return S(e),C(W().refresh())}),K(4,`Retry`),I()()}}function Hpe(e,t){e&1&&K(0,` The oldest timings were dropped. `)}function Upe(e,t){if(e&1&&(K(0),A(1,Hpe,1,0)),e&2){let e=t;Y(` Time is what the dev server spent on `,e.modules,` `,e.modules===1?`module`:`modules`,`, wall clock: resolving imports to it, and its last load and transform through all plugins. `),D(),j(e.capped?1:-1)}}function Wpe(e,t){e&1&&(F(0,`p`,10),K(1,` No module is loaded with `),F(2,`code`),K(3,`import()`),I(),K(4,` yet. Visit a lazy route to see it here. `),I())}function Gpe(e,t){if(e&1&&(F(0,`tr`)(1,`td`)(2,`code`),K(3),I()(),F(4,`td`)(5,`code`),K(6),I()(),F(7,`td`,21),K(8),I(),F(9,`td`,21),K(10),I()()),e&2){let e=t.$implicit,n=W(4);D(3),q(e.file??e.url),D(3),q(e.importers.join(`, `)),D(2),q(e.modules),D(2),q(n.bytes(e.size))}}function Kpe(e,t){if(e&1&&(F(0,`div`,14)(1,`table`)(2,`caption`,18),K(3,` Modules loaded with import(), biggest first `),I(),F(4,`thead`)(5,`tr`)(6,`th`,19),K(7,`Module`),I(),F(8,`th`,19),K(9,`Imported by`),I(),F(10,`th`,20),K(11,`Own modules`),I(),F(12,`th`,20),K(13,`Own size`),I()()(),F(14,`tbody`),M(15,Gpe,11,4,`tr`,null,f5),I()()()),e&2){let e=W();D(15),N(e.lazy)}}function qpe(e,t){if(e&1){let e=B();F(0,`div`,10)(1,`p`),K(2),I(),F(3,`button`,7),H(`click`,function(){S(e),W();let t=Pg(14);return W(2).filter.set(``),C(t.focus())}),K(4,` Clear filters `),I()()}if(e&2){let e=W(3);D(2),J(`No module matches “`,e.filter(),`”.`)}}function Jpe(e,t){if(e&1&&(F(0,`td`,28),K(1),I()),e&2){let e=t,n=W(5);P(`title`,n.breakdown(e)),D(),q(n.ms(e.total))}}function Ype(e,t){e&1&&L(0,`td`,21)}function Xpe(e,t){if(e&1&&(F(0,`tr`)(1,`td`)(2,`code`),K(3),I()(),F(4,`td`,21),K(5),I(),A(6,Jpe,2,2,`td`,28)(7,Ype,1,0,`td`,21),F(8,`td`,21),K(9),I(),F(10,`td`,21),K(11),I()()),e&2){let e,n=t.$implicit,r=W(4);D(3),q(n.file??n.url),D(2),q(r.bytes(n.size)),D(),j((e=n.time)?6:7,e),D(3),q(n.importers),D(2),q(n.imports)}}function Zpe(e,t){if(e&1){let e=B();F(0,`button`,29),H(`click`,function(){return S(e),C(W(4).allModules.set(!0))}),K(1),I()}if(e&2){let e=W(4);D(),J(` Show all `,e.shownModules().length,` modules `)}}function Qpe(e,t){if(e&1){let e=B();F(0,`div`,14)(1,`table`)(2,`caption`,18),K(3,` Modules, biggest first unless sorted `),I(),F(4,`thead`)(5,`tr`)(6,`th`,22),M_(`sortChange`,function(t){S(e);let n=W(3);return j_(n.moduleSort,t)||(n.moduleSort=t),C(t)}),K(7,`Module`),I(),F(8,`th`,23),M_(`sortChange`,function(t){S(e);let n=W(3);return j_(n.moduleSort,t)||(n.moduleSort=t),C(t)}),K(9,`Size`),I(),F(10,`th`,24),M_(`sortChange`,function(t){S(e);let n=W(3);return j_(n.moduleSort,t)||(n.moduleSort=t),C(t)}),K(11,`Time`),I(),F(12,`th`,25),M_(`sortChange`,function(t){S(e);let n=W(3);return j_(n.moduleSort,t)||(n.moduleSort=t),C(t)}),K(13,` Importers `),I(),F(14,`th`,26),M_(`sortChange`,function(t){S(e);let n=W(3);return j_(n.moduleSort,t)||(n.moduleSort=t),C(t)}),K(15,` Imports `),I()()(),F(16,`tbody`),M(17,Xpe,12,5,`tr`,null,f5),I()()(),A(19,Zpe,2,1,`button`,27)}if(e&2){let e=W(3);D(6),A_(`sort`,e.moduleSort),D(2),A_(`sort`,e.moduleSort),D(2),A_(`sort`,e.moduleSort),D(2),A_(`sort`,e.moduleSort),D(2),A_(`sort`,e.moduleSort),D(3),N(e.visibleModules()),D(2),j(e.shownModules().length>e.visibleModules().length?19:-1)}}function $pe(e,t){if(e&1){let e=B();F(0,`p`,13),K(1),F(2,`code`),K(3,`import()`),I(),K(4),A(5,Upe,2,3),I(),F(6,`h3`),K(7,`Lazy boundaries`),I(),A(8,Wpe,5,0,`p`,10)(9,Kpe,17,0,`div`,14),F(10,`h3`),K(11,`Modules`),I(),F(12,`div`,15)(13,`app-search-field`,16,0),M_(`valueChange`,function(t){S(e);let n=W(2);return j_(n.filter,t)||(n.filter=t),C(t)}),I(),F(15,`span`,17),K(16),I()(),A(17,qpe,5,1,`div`,10)(18,Qpe,20,6)}if(e&2){let e,n=t,r=W(2);D(),D_(` `,n.modules.length,` modules, `,r.bytes(n.totalSize),` transformed (unminified, only what the browser requested). `,r.bytes(n.initialSize),` load without `),D(3),Y(` from `,n.entries.length,` `,n.entries.length===1?`entry`:`entries`,`. `),D(),j((e=n.timings)?5:-1,e),D(3),j(n.lazy.length?9:8),D(5),A_(`value`,r.filter),D(3),Y(``,r.shownModules().length,` of `,n.modules.length),D(),j(r.shownModules().length?18:17)}}function eme(e,t){if(e&1&&(F(0,`p`,10),K(1),I()),e&2){let e=W();D(),q(e.viteNote)}}function tme(e,t){e&1&&(F(0,`p`,30),K(1,` Build with `),F(2,`code`),K(3,`ng build --stats-json`),I(),K(4,` to see the source each chunk starts from. `),I())}function nme(e,t){if(e&1&&(F(0,`tr`)(1,`td`)(2,`code`),K(3),I()(),F(4,`td`),K(5),I(),F(6,`td`,21),K(7),I(),F(8,`td`,21),K(9),I(),F(10,`td`)(11,`code`),K(12),I()()()),e&2){let e=t.$implicit,n=W(3);D(3),q(e.file),D(2),q(e.initial?`Initial`:`Lazy`),D(2),q(n.bytes(e.bytes)),D(2),q(n.bytes(e.gzip)),D(3),q(e.entryPoint??``)}}function rme(e,t){if(e&1&&(F(0,`p`,13)(1,`code`),K(2),I(),K(3),F(4,`code`),K(5,`index.html`),I(),K(6,` loads up front. `),I(),A(7,tme,5,0,`p`,30),F(8,`div`,14)(9,`table`)(10,`caption`,18),K(11,` Chunks of the production build, initial first `),I(),F(12,`thead`)(13,`tr`)(14,`th`,19),K(15,`Chunk`),I(),F(16,`th`,19),K(17,`Loads`),I(),F(18,`th`,20),K(19,`Size`),I(),F(20,`th`,20),K(21,`Gzip`),I(),F(22,`th`,19),K(23,`Entry point`),I()()(),F(24,`tbody`),M(25,nme,13,5,`tr`,null,Bpe),I()()()),e&2){let e=t,n=W(2);D(2),q(e.dir),D(),D_(`: initial `,n.bytes(e.initialBytes),` (`,n.bytes(e.initialGzip),` gzip), lazy `,n.bytes(e.lazyBytes),`. Initial chunks are the ones `),D(4),j(e.stats?-1:7),D(18),N(e.chunks)}}function ime(e,t){if(e&1&&(F(0,`p`,10),K(1),I()),e&2){let e=W();D(),q(e.outputNote)}}function ame(e,t){if(e&1&&(F(0,`section`,8)(1,`h2`,9),K(2,`Module graph`),I(),A(3,$pe,19,11)(4,eme,2,1,`p`,10),I(),F(5,`section`,11)(6,`h2`,12),K(7,`Chunks`),I(),A(8,rme,27,5)(9,ime,2,1,`p`,10),I()),e&2){let e,n,r=t;D(3),j((e=r.vite)?3:4,e),D(5),j((n=r.output)?8:9,n)}}function ome(e,t){e&1&&(F(0,`p`,6),K(1,`Loading the build…`),I())}function sme(e){return e<1e3?`${e} B`:e<1e6?`${(e/1e3).toFixed(1)} kB`:`${(e/1e6).toFixed(2)} MB`}function p5(e){return e<1e3?`${e.toFixed(1)} ms`:`${(e/1e3).toFixed(2)} s`}function cme(e){return`Resolve ${p5(e.resolve)}, load ${p5(e.load)}, transform ${p5(e.transform)}`}var lme=class e{rpc=$(null);bytes=sme;ms=p5;breakdown=cme;graph=T(null);loading=T(!1);failed=T(!1);status=T(``);filter=T(``);allModules=T(!1);moduleSort=T(null);shownModules=X(()=>{let e=this.graph()?.vite?.modules??[],t=this.filter().trim().toLowerCase();return lV(t?e.filter(e=>`${e.url} ${e.file??``}`.toLowerCase().includes(t)):e,this.moduleSort(),{module:e=>e.file??e.url,size:e=>e.size,time:e=>e.time?.total,importers:e=>e.importers,imports:e=>e.imports})});visibleModules=X(()=>this.allModules()?this.shownModules():this.shownModules().slice(0,25));constructor(){E(()=>{let e=this.rpc();e&&this.load(e)})}refresh(){let e=this.rpc();e&&this.load(e,!0)}async load(e,t=!1){this.loading.set(!0),this.failed.set(!1);try{let n=await e.scope(`pangular`).rpc.call(`get-build-graph`);this.graph.set(n&&typeof n==`object`?n:{}),t&&this.status.set(`Build data refreshed.`)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-build-inspector`]],inputs:{rpc:[1,`rpc`]},decls:10,vars:4,consts:[[`search`,``],[1,`intro`],[1,`toolbar`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`sr-only`],[`role`,`alert`,1,`state`],[`role`,`status`,1,`state`],[`type`,`button`,1,`small`,3,`click`],[`aria-labelledby`,`graph-title`],[`id`,`graph-title`],[1,`empty`],[`aria-labelledby`,`chunks-title`],[`id`,`chunks-title`],[1,`summary`],[1,`scroll`],[1,`filter`],[`placeholder`,`Filter by file or URL`,`saveKey`,`build`,1,`search`,3,`valueChange`,`value`],[1,`count`],[1,`sr-only`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`num`],[`scope`,`col`,`appSortHeader`,`module`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`size`,1,`num`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`time`,1,`num`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`importers`,1,`num`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`imports`,1,`num`,3,`sortChange`,`sort`],[`type`,`button`,1,`small`,`more`],[1,`num`,3,`title`],[`type`,`button`,1,`small`,`more`,3,`click`],[1,`notice`]],template:function(e,t){if(e&1&&(F(0,`p`,1),K(1,` What the app loads: the Vite dev server's module graph with its lazy boundaries, and the chunks of the last production build on disk. `),I(),F(2,`div`,2)(3,`button`,3),H(`click`,function(){return t.refresh()}),K(4),I(),F(5,`p`,4),K(6),I()(),A(7,Vpe,5,0,`div`,5)(8,ame,10,2)(9,ome,2,0,`p`,6)),e&2){let e;D(3),P(`disabled`,t.loading()),D(),J(` `,t.loading()?`Loading…`:`Refresh`,` `),D(2),q(t.status()),D(),j(t.failed()?7:(e=t.graph())?8:9,e)}},dependencies:[$N,uV],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%], 
-.summary[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin: 0 0 12px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 16px 0 8px;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-}
-
-h3[_ngcontent-%COMP%] {
-  margin: 12px 0 6px;
-  color: var(--%NS%text-strong);
-  font-size: 13px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.filter[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  margin: 0 0 8px;
-}
-
-.filter[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.scroll[_ngcontent-%COMP%] {
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-}
-
-.num[_ngcontent-%COMP%] {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-}
-
-.empty[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.more[_ngcontent-%COMP%] {
-  margin-top: 8px;
-}`]})},ume=e=>({$implicit:e,depth:0}),dme=(e,t)=>({$implicit:e,depth:t}),m5=(e,t)=>t.key;function fme(e,t){if(e&1&&(F(0,`div`,6)(1,`dt`),K(2),I(),F(3,`dd`),K(4),I()()),e&2){let e=t.$implicit;k(`data-tone`,e.tone??null),D(2),q(e.label),D(2),q(e.value)}}function pme(e,t){if(e&1&&(F(0,`dl`,3),M(1,fme,5,3,`div`,6,$h),I()),e&2){W();let e=I_(0);D(),N(e.items)}}function mme(e,t){if(e&1&&(F(0,`p`,4),K(1),I()),e&2){W();let e=I_(0);D(),q(e.text)}}function hme(e,t){if(e&1&&(F(0,`p`,7),K(1),I()),e&2){W(2);let e=I_(0);D(),q(e.empty??`No rows.`)}}function gme(e,t){e&1&&(F(0,`p`,7),K(1,`No row matches the filter.`),I())}function _me(e,t){if(e&1&&(F(0,`th`,9),K(1),I()),e&2){let e=t.$implicit;D(),q(e.label)}}function vme(e,t){if(e&1&&(F(0,`span`,10),K(1),I()),e&2){W();let e=I_(0),n=W(4);k(`data-tone`,t),D(),q(n.cellText(e))}}function yme(e,t){if(e&1&&K(0),e&2){W();let e=I_(0);J(` `,W(4).cellText(e),` `)}}function bme(e,t){if(e&1&&(P_(0),F(1,`td`),A(2,vme,2,2,`span`,10)(3,yme,1,1),I()),e&2){let e,n=t.$implicit,r=W().$implicit,i=W(3),a=F_(r[n.key]);D(2),j((e=i.toneOf(a))?2:3,e)}}function xme(e,t){if(e&1&&(F(0,`tr`),M(1,bme,4,2,`td`,null,m5),I()),e&2){W(3);let e=I_(0);D(),N(e.columns)}}function Sme(e,t){if(e&1&&(F(0,`div`,8)(1,`table`)(2,`thead`)(3,`tr`),M(4,_me,2,1,`th`,9,m5),I()(),F(6,`tbody`),M(7,xme,3,0,`tr`,null,$h),I()()()),e&2){let e=W(2),t=I_(0);k(`aria-labelledby`,e.headingId()),D(4),N(t.columns),D(3),N(e.rows())}}function Cme(e,t){if(e&1&&A(0,hme,2,1,`p`,7)(1,gme,2,0,`p`,7)(2,Sme,9,1,`div`,8),e&2){let e=W();j(I_(0).rows.length?e.rows().length?2:1:0)}}function wme(e,t){if(e&1&&(F(0,`p`,7),K(1),I()),e&2){W(2);let e=I_(0);D(),q(e.empty??`Nothing listed.`)}}function Tme(e,t){e&1&&(F(0,`p`,7),K(1,`No item matches the filter.`),I())}function Eme(e,t){if(e&1&&(F(0,`span`,10),K(1),I()),e&2){let e=t;k(`data-tone`,e.tone??`neutral`),D(),q(e.label)}}function Dme(e,t){if(e&1&&(F(0,`span`,13),K(1),I()),e&2){let e=W().$implicit;D(),q(e.detail)}}function Ome(e,t){if(e&1&&(F(0,`li`)(1,`span`,12),K(2),I(),A(3,Eme,2,2,`span`,10),A(4,Dme,2,1,`span`,13),I()),e&2){let e,n=t.$implicit;D(2),q(n.label),D(),j((e=n.badge)?3:-1,e),D(),j(n.detail?4:-1)}}function kme(e,t){if(e&1&&(F(0,`ul`,11),M(1,Ome,5,3,`li`,null,$h),I()),e&2){let e=W(2);D(),N(e.items())}}function Ame(e,t){if(e&1&&A(0,wme,2,1,`p`,7)(1,Tme,2,0,`p`,7)(2,kme,3,0,`ul`,11),e&2){let e=W();j(I_(0).items.length?e.items().length?2:1:0)}}function jme(e,t){if(e&1&&hg(0,5),e&2){W();let e=Pg(10),t=I_(0);P(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,K_(2,ume,t.value))}}function Mme(e,t){if(e&1&&(F(0,`code`,14),K(1),I()),e&2){let e=W().$implicit,t=W();D(),q(t.leafText(e))}}function Nme(e,t){if(e&1&&(F(0,`details`,17)(1,`summary`)(2,`span`,18),K(3),I(),F(4,`span`,19),K(5),I()(),hg(6,5),I()),e&2){let e=W().$implicit,t=W(2).depth,n=I_(0);W();let r=Pg(10);P(`open`,t===0&&n.length<=8),D(3),q(e.key),D(2),q(e.summary),D(),P(`ngTemplateOutlet`,r)(`ngTemplateOutletContext`,q_(5,dme,e.value,t+1))}}function Pme(e,t){if(e&1&&(F(0,`span`,18),K(1),I(),F(2,`code`,14),K(3),I()),e&2){let e=W().$implicit;D(),q(e.key),D(2),q(e.summary)}}function Fme(e,t){if(e&1&&(F(0,`li`),A(1,Nme,7,8,`details`,17)(2,Pme,4,2),I()),e&2){let e=t.$implicit,n=W(2).depth,r=W();D(),j(e.nested&&n<r.maxDepth?1:2)}}function Ime(e,t){if(e&1&&(F(0,`ul`,16),M(1,Fme,3,1,`li`,null,m5),I()),e&2){let e=W().depth,t=I_(0);G(`root`,e===0),D(),N(t)}}function Lme(e,t){if(e&1&&(P_(0),A(1,Mme,2,1,`code`,14)(2,Ime,3,2,`ul`,15)),e&2){let e=t.$implicit,n=F_(W().entriesOf(e));D(),j(n.length?2:1)}}function h5(e){return e==null?``:typeof e==`object`?e.text:String(e)}function g5(e,t){return!t||e.toLowerCase().includes(t)}function Rme(e,t){let n=t.trim().toLowerCase();return e.kind===`table`?{shown:e.rows.filter(t=>e.columns.some(e=>g5(h5(t[e.key]),n))).length,total:e.rows.length}:e.kind===`list`?{shown:e.items.filter(e=>g5(`${e.label} ${e.detail??``} ${e.badge?.label??``}`,n)).length,total:e.items.length}:{shown:0,total:0}}var zme=8,Bme=200;function Vme(e){return!e||typeof e!=`object`?[]:(Array.isArray(e)?e.map((e,t)=>[String(t),e]):Object.entries(e)).slice(0,Bme).map(([e,t])=>{let n=!!t&&typeof t==`object`;return{key:e,value:t,nested:n,summary:Array.isArray(t)?`Array(${t.length})`:n?`{${Object.keys(t).length}}`:t===null?`null`:typeof t==`string`?JSON.stringify(t):String(t)}})}var Hme=class e{section=$.required();filter=$(``);index=$(0);maxDepth=zme;cellText=h5;entriesOf=Vme;headingId=X(()=>`plugin-section-${this.index()}`);text=X(()=>this.filter().trim().toLowerCase());rows=X(()=>{let e=this.section();if(e.kind!==`table`)return[];let t=this.text();return e.rows.filter(n=>e.columns.some(e=>g5(h5(n[e.key]),t)))});items=X(()=>{let e=this.section();if(e.kind!==`list`)return[];let t=this.text();return e.items.filter(e=>g5(`${e.label} ${e.detail??``} ${e.badge?.label??``}`,t))});toneOf(e){return e&&typeof e==`object`&&e.tone?e.tone:null}leafText(e){return e==null?String(e):Array.isArray(e)?`[]`:typeof e==`object`?`{}`:typeof e==`string`?JSON.stringify(e):String(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-plugin-section`]],inputs:{section:[1,`section`],filter:[1,`filter`],index:[1,`index`]},decls:11,vars:5,consts:[[`tree`,``],[1,`section`],[1,`title`,3,`id`],[1,`stats`],[1,`text`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[1,`stat`],[1,`empty`],[`tabindex`,`0`,`role`,`region`,1,`table-wrap`],[`scope`,`col`],[1,`chip`],[1,`list`],[1,`label`],[1,`detail`],[1,`leaf`],[1,`tree`,3,`root`],[1,`tree`],[3,`open`],[1,`key`],[1,`summary`]],template:function(e,t){if(e&1&&(P_(0),F(1,`section`,1)(2,`h3`,2),K(3),I(),A(4,pme,3,0,`dl`,3)(5,mme,2,1,`p`,4)(6,Cme,3,1)(7,Ame,3,1)(8,jme,1,4,`ng-container`,5),I(),jh(9,Lme,3,2,`ng-template`,null,0,tv)),e&2){let e,n=F_(t.section());D(),k(`aria-labelledby`,t.headingId()),D(),P(`id`,t.headingId()),D(),q(n.title),D(),j((e=n.kind)===`stats`?4:e===`text`?5:e===`table`?6:e===`list`?7:e===`tree`?8:-1)}},dependencies:[Zv],styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.section[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-  padding: 10px 12px;
-}
-
-.title[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0;
-}
-
-.stats[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: 8px;
-  margin: 0;
-}
-
-.stat[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 2px;
-  padding: 8px 10px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-}
-
-.stat[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.stat[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 18px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  overflow-wrap: anywhere;
-}
-
-.stat[data-tone=ok][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  color: var(--%NS%ok-text);
-}
-
-.stat[data-tone=warn][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  color: var(--%NS%warn-text);
-}
-
-.stat[data-tone=danger][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-}
-
-.stat[data-tone=accent][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  color: var(--%NS%accent-text);
-}
-
-.text[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.empty[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  max-width: 100%;
-  overflow-x: auto;
-  border-radius: var(--%NS%radius-sm);
-}
-
-.table-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  vertical-align: top;
-}
-
-th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-td[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-variant-numeric: tabular-nums;
-  overflow-wrap: anywhere;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 8px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 99px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.chip[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.chip[data-tone=accent][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.list[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: baseline;
-  min-width: 0;
-  padding: 4px 0;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.detail[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-  color: var(--%NS%text-2);
-  overflow-wrap: anywhere;
-}
-
-.tree[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 0 0 0 14px;
-  list-style: none;
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.tree.root[_ngcontent-%COMP%] {
-  padding-left: 0;
-}
-
-.tree[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  padding: 2px 0;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-summary[_ngcontent-%COMP%] {
-  width: fit-content;
-  max-width: 100%;
-  border-radius: 2px;
-  cursor: pointer;
-}
-
-summary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.key[_ngcontent-%COMP%] {
-  margin-right: 6px;
-  color: var(--%NS%accent-text);
-}
-
-.summary[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.leaf[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}`]})},Ume=()=>[],Wme=(e,t)=>t.name,Gme=(e,t)=>t.id;function Kme(e,t){e&1&&(F(0,`app-state`,1),K(1,`Loading plugins…`),I())}function qme(e,t){if(e&1){let e=B();F(0,`app-state`,4),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Can't read the plugins from the devtools server. `),I()}}function Jme(e,t){e&1&&(F(0,`app-state`,3),K(1,` No plugin reports yet. `),F(2,`p`,5),K(3,` A library adds a tab here with `),F(4,`code`),K(5,`registerPangularPlugin()`),I(),K(6,` from `),F(7,`code`),K(8,`@pangular-inspector/devtools/plugin`),I(),K(9,`. Its view shows up once the app runs with the overlay loaded. `),I()())}function Yme(e,t){if(e&1){let e=B();F(0,`button`,16),H(`click`,function(){let t=S(e).$implicit;return C(W(2).pluginId.set(t))}),K(1),I()}if(e&2){let e=t.$implicit,n=W(2);k(`aria-pressed`,n.pluginId()===e),D(),J(` `,n.titleOf(e),` `)}}function Xme(e,t){if(e&1){let e=B();F(0,`app-select`,17),H(`valueChange`,function(t){return S(e),C(W(2).pageId.set(t||null))}),I()}if(e&2){let e=W(2);P(`options`,e.pageOptions())(`value`,e.pageId()??``)}}function Zme(e,t){if(e&1&&(F(0,`span`,20),K(1),I()),e&2){let e=W();D(),q(e.version)}}function Qme(e,t){if(e&1&&(F(0,`span`,21),K(1),I()),e&2){let e=t.$implicit;k(`data-tone`,e.tone??`plain`),D(),q(e.label)}}function $me(e,t){e&1&&(F(0,`p`,22),K(1),I()),e&2&&(D(),q(t))}function ehe(e,t){if(e&1&&(F(0,`p`,23),K(1),I()),e&2){let e=W();D(),q(e.description)}}function the(e,t){if(e&1&&(F(0,`p`,24),K(1),I()),e&2){let e=W();D(),q(e.error)}}function nhe(e,t){if(e&1&&(F(0,`p`,23),K(1,` Actions of this plugin are turned off in the devtools config (`),F(2,`code`),K(3,`actions.plugins`),I(),K(4,` or `),F(5,`code`),K(6),I(),K(7,`). `),I()),e&2){let e=W(2);D(6),J(`plugins.`,e.id,`.actions`)}}function rhe(e,t){if(e&1){let e=B();F(0,`p`,29),K(1),I(),F(2,`button`,30),H(`click`,function(){let t=S(e);return C(W(4).run(t.name))}),K(3),I(),F(4,`button`,31),H(`click`,function(){return S(e),C(W(4).confirming.set(null))}),K(5,`Cancel`),I()}if(e&2){let e=t;D(),q(e.confirm),D(2),J(` `,e.label,` `)}}function ihe(e,t){if(e&1){let e=B();F(0,`button`,31),H(`click`,function(){let t=S(e).$implicit;return C(W(5).ask(t))}),K(1),I()}if(e&2){let e=t.$implicit;k(`aria-disabled`,W(5).running()||null),D(),J(` `,e.label,` `)}}function ahe(e,t){e&1&&M(0,ihe,2,2,`button`,32,Wme),e&2&&N(W(4).actions())}function ohe(e,t){if(e&1&&(F(0,`div`,25),A(1,nhe,8,1,`p`,23)(2,rhe,6,2)(3,ahe,2,0),I()),e&2){let e,t=W(3);D(),j(t.actionsAllowed()?(e=t.confirming())?2:3:1,e)}}function she(e,t){e&1&&(F(0,`p`,27),K(1,` The plugin has not reported a view yet. It reports while this panel is open. `),I())}function che(e,t){e&1&&(F(0,`p`,27),K(1,`The plugin reported no sections.`),I())}function lhe(e,t){if(e&1){let e=B();F(0,`div`,27)(1,`p`),K(2),I(),F(3,`button`,31),H(`click`,function(){S(e),W(2);let t=Pg(7);return W().filter.set(``),C(t.focus())}),K(4,` Clear filters `),I()()}if(e&2){let e=W(3);D(2),J(`No row or item matches “`,e.filter().trim(),`”.`)}}function uhe(e,t){if(e&1&&L(0,`app-plugin-section`,33),e&2){let e=t.$implicit,n=t.$index,r=W(4);P(`section`,e)(`filter`,r.filter())(`index`,n)}}function dhe(e,t){if(e&1&&(F(0,`div`,28),M(1,uhe,1,3,`app-plugin-section`,33,$h),I()),e&2){let e=W();D(),N(e.view.sections)}}function fhe(e,t){if(e&1&&(F(0,`section`,13)(1,`div`,18)(2,`h2`,19),K(3),I(),A(4,Zme,2,1,`span`,20),F(5,`span`,21),K(6),I(),M(7,Qme,2,2,`span`,21,$h),I(),A(9,$me,2,1,`p`,22),A(10,ehe,2,1,`p`,23),A(11,the,2,1,`p`,24),A(12,ohe,4,1,`div`,25),F(13,`p`,26),K(14),I(),A(15,she,2,0,`p`,27)(16,che,2,0,`p`,27)(17,lhe,5,1,`div`,27)(18,dhe,3,0,`div`,28),I()),e&2){let e,n=t,r=W(2);D(3),q(n.title),D(),j(n.version?4:-1),D(),k(`data-tone`,r.statusTone[n.status]),D(),q(r.statusLabel[n.status]),D(),N(n.view?.badges??G_(10,Ume)),D(2),j((e=n.view?.summary)?9:-1,e),D(),j(n.description?10:-1),D(),j(n.error?11:-1),D(),j(r.actions().length?12:-1),D(2),q(r.result()),D(),j(n.view?n.view.sections.length?r.filter().trim()&&!r.filterMatches()?17:18:16:15)}}function phe(e,t){if(e&1&&(F(0,`p`,14),K(1),I()),e&2){let e=W(2);D(),J(` No page reports the `,e.titleOf(e.pluginId()??``),` plugin. Open the app with the plugin registered and the overlay loaded. `)}}function mhe(e,t){e&1&&(F(0,`span`,23),K(1,`Hidden from agents by the config`),I())}function hhe(e,t){if(e&1&&(F(0,`li`)(1,`code`),K(2),I(),F(3,`span`,21),K(4),I(),A(5,mhe,2,0,`span`,23),F(6,`p`,23),K(7),I()()),e&2){let e=t.$implicit;D(2),q(e.id),D(),k(`data-tone`,e.safety===`read`?`plain`:`warn`),D(),q(e.safety),D(),j(e.registered?-1:5),D(2),q(e.description)}}function ghe(e,t){e&1&&(F(0,`li`,23),K(1,`This plugin has no agent tools.`),I())}function _he(e,t){e&1&&(F(0,`section`,15)(1,`h2`,34),K(2,`Agent tools`),I(),F(3,`ul`),M(4,hhe,8,5,`li`,null,Gme,!1,ghe,2,0,`li`,23),I()()),e&2&&(D(4),N(t.tools))}function vhe(e,t){if(e&1){let e=B();F(0,`p`,6),K(1,` Views that libraries report from the live page through the plugin API. The values come from each plugin's code on the page and are masked like other live data. `),I(),F(2,`div`,7)(3,`div`,8),M(4,Yme,2,2,`button`,9,eg),I(),F(6,`app-search-field`,10,0),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.filter,t)||(n.filter=t),C(t)}),I(),A(8,Xme,1,2,`app-select`,11),F(9,`span`,12),K(10),I()(),A(11,fhe,19,11,`section`,13)(12,phe,2,1,`p`,14),A(13,_he,7,1,`section`,15)}if(e&2){let e,t,n=W();D(4),N(n.pluginIds()),D(2),A_(`value`,n.filter),D(2),j(n.pageOptions().length>1?8:-1),D(2),q(n.countText()),D(),j((e=n.entry())?11:12,e),D(2),j((t=n.server())?13:-1,t)}}function _5(e){let t=e??{};return{pages:(t.pages&&typeof t.pages==`object`?Object.values(t.pages).filter(e=>e&&typeof e.pageId==`string`&&Array.isArray(e.plugins)):[]).sort((e,t)=>t.reportedAt-e.reportedAt),server:Array.isArray(t.server)?t.server:[]}}function yhe(e){let t=_5(e);return t.server.length>0||t.pages.some(e=>e.plugins.length>0)}var bhe={running:`Running`,error:`Failed`,unsupported:`Needs a newer Pangular`},xhe={running:`ok`,error:`danger`,unsupported:`warn`},She=class e{rpc=$(null);destroyRef=x(Ss);hostPageId=tT();unsubscribe;statusLabel=bhe;statusTone=xhe;state=T({pages:[],server:[]});loaded=T(!1);failed=T(!1);filter=T(``);running=T(!1);pluginIds=X(()=>{let e=new Set;for(let t of this.state().pages)for(let n of t.plugins)e.add(n.id);for(let t of this.state().server)e.add(t.id);return[...e].sort((e,t)=>this.titleOf(e).localeCompare(this.titleOf(t)))});pluginId=Q({source:()=>this.pluginIds(),computation:(e,t)=>t?.value&&e.includes(t.value)?t.value:e[0]??null});pages=X(()=>this.state().pages.filter(e=>e.plugins.some(e=>e.id===this.pluginId())));pageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId)?.pageId??e[0]?.pageId??null});target=X(()=>`${this.pluginId()}\n${this.pageId()}`);result=Q({source:this.target,computation:()=>``});confirming=Q({source:this.target,computation:()=>null});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url})));entry=X(()=>this.pages().find(e=>e.pageId===this.pageId())?.plugins.find(e=>e.id===this.pluginId())??null);server=X(()=>this.state().server.find(e=>e.id===this.pluginId())??null);actions=X(()=>{let e=this.entry();return(e?.view?.actions??[]).filter(t=>e.actions.includes(t.name))});actionsAllowed=X(()=>{let e=this.pluginId();return!!e&&qC(e,TT(this.rpc())).actions});counts=X(()=>(this.entry()?.view?.sections??[]).reduce((e,t)=>{let{shown:n,total:r}=Rme(t,this.filter());return{shown:e.shown+n,total:e.total+r}},{shown:0,total:0}));filterMatches=X(()=>this.counts().shown>0);countText=X(()=>{let{shown:e,total:t}=this.counts();return t?`${e} of ${t} rows and items`:``});constructor(){E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}titleOf(e){for(let t of this.state().pages){let n=t.plugins.find(t=>t.id===e);if(n)return n.title||e}return this.state().server.find(t=>t.id===e)?.title||e}retry(){let e=this.rpc();e&&this.load(e)}ask(e){if(!this.running()){if(e.confirm){this.confirming.set({name:e.name,label:e.label,confirm:e.confirm});return}this.run(e.name)}}async run(e){let t=this.rpc(),n=this.pluginId(),r=this.pageId();if(this.confirming.set(null),t&&n&&r&&!this.running()&&this.actions().some(t=>t.name===e)){this.running.set(!0),this.result.set(``);try{let i=await t.scope(`pangular`).rpc.call(`request-plugin-action`,{pageId:r,pluginId:n,action:e});this.result.set(i?.ok?`Done.`:i?.error??`The action failed.`)}catch{this.result.set(`The devtools server did not answer. Check that it's still running.`)}finally{this.running.set(!1)}}}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`plugins`);if(this.destroyRef.destroyed)return;let n=e=>this.state.set(_5(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-plugins-inspector`]],inputs:{rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`search`,``],[`kind`,`loading`],[`kind`,`error`],[`kind`,`empty`],[`kind`,`error`,3,`retry`],[`detail`,``],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Plugin`,1,`plugins`],[`type`,`button`,1,`view`],[`placeholder`,`Filter rows and items`,`saveKey`,`plugins`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[`role`,`status`,1,`count`],[`aria-labelledby`,`plugin-title`,1,`plugin`],[1,`notice`],[`aria-labelledby`,`plugin-tools-title`,1,`tools`],[`type`,`button`,1,`view`,3,`click`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[1,`head`],[`id`,`plugin-title`],[1,`chip`,`plain`],[1,`chip`],[1,`summary`],[1,`muted`],[`role`,`alert`,1,`notice`],[`role`,`group`,`aria-label`,`Plugin actions`,1,`actions`],[`role`,`status`,1,`result`],[1,`empty`],[1,`sections`],[1,`confirm`],[`type`,`button`,1,`small`,`primary`,3,`click`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`],[3,`section`,`filter`,`index`],[`id`,`plugin-tools-title`,1,`label`]],template:function(e,t){e&1&&A(0,Kme,2,0,`app-state`,1)(1,qme,2,0,`app-state`,2)(2,Jme,10,0,`app-state`,3)(3,vhe,14,5),e&2&&j(t.loaded()?t.failed()?1:t.pluginIds().length?3:2:0)},dependencies:[HL,$N,wD,Hme],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 12px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.plugins[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  min-width: 0;
-}
-
-.view[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  max-width: 100%;
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.view[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.view[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.view[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 180px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-input[type=search][_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.page-select[_ngcontent-%COMP%] {
-  flex: 0 1 200px;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.plugin[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-}
-
-.head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 8px;
-  align-items: center;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 16px;
-  overflow-wrap: anywhere;
-}
-
-.summary[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.chip.plain[_ngcontent-%COMP%], 
-.chip[data-tone=plain][_ngcontent-%COMP%], 
-.chip[data-tone=neutral][_ngcontent-%COMP%] {
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-.chip[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-}
-
-.confirm[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-}
-
-.result[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-.result[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.small.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-}
-
-.small[aria-disabled=true][_ngcontent-%COMP%] {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.sections[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-}
-
-.empty[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.tools[_ngcontent-%COMP%] {
-  margin-top: 16px;
-}
-
-.label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 8px;
-}
-
-.tools[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.tools[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-  align-items: center;
-  min-width: 0;
-  padding: 8px 12px;
-}
-
-.tools[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.tools[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  flex-basis: 100%;
-}`]})},Che=[`accessibility`,`errors`,`hydration`,`change-detection`,`leaks`,`router`,`forms`,`http`,`pipes`],v5={accessibility:`Accessibility`,"change-detection":`Change detection`,leaks:`Leaks`,errors:`Errors`,router:`Router`,forms:`Forms`,hydration:`Hydration`,http:`HTTP`,pipes:`Pipes`},y5=[{key:`cdCycles`,label:`Change detection cycles`},{key:`cdMeanMs`,label:`Mean cycle time`,unit:`ms`},{key:`cdMaxMs`,label:`Slowest cycle`,unit:`ms`},{key:`wastedChecks`,label:`Wasted checks`},{key:`wastedPercent`,label:`Wasted checks`,unit:`%`},{key:`retained`,label:`Retained components`},{key:`openSubscriptions`,label:`Open subscriptions after destroy`},{key:`errorGroups`,label:`Error groups`},{key:`errors`,label:`Error occurrences`},{key:`axeViolations`,label:`axe rules broken`},{key:`axeNodes`,label:`axe elements`},{key:`httpFailures`,label:`Failed HTTP calls`},{key:`findingsError`,label:`Errors found`},{key:`findingsWarning`,label:`Warnings found`},{key:`findingsInfo`,label:`Info found`}];function whe(e){let t=Object.entries(e.args??{}).filter(([e])=>e!==`page`).map(([e,t])=>`${e}: ${JSON.stringify(t)}`).join(`, `);return`${e.tool.replace(/^pangular:/,``)}${t?` { ${t} }`:``}`}function The(e){let t=e??{};return{pages:Array.isArray(t.pages)?t.pages.filter(e=>typeof e?.pageId==`string`):[],report:t.report&&Array.isArray(t.report.findings)&&Array.isArray(t.report.sources)?t.report:null,session:t.session??{before:null,after:null,diff:null},axe:t.axe??null}}var Ehe=(e,t)=>t.label,b5=(e,t)=>t.key;function Dhe(e,t){if(e&1&&(R(0,`p`,0),K(1),z()),e&2){let e=t.$implicit;D(),q(e)}}function Ohe(e,t){if(e&1&&(R(0,`tr`)(1,`th`,12),K(2),z(),R(3,`td`),K(4),z(),R(5,`td`),K(6),z(),R(7,`td`)(8,`span`,13),K(9),z()()()),e&2){let e=t.$implicit;D(2),q(e.label),D(2),q(e.before),D(2),q(e.after),D(2),k(`data-tone`,e.tone),D(),q(e.change)}}function khe(e,t){if(e&1&&(R(0,`li`)(1,`span`,14),K(2),z(),K(3),z()),e&2){let e=t.$implicit,n=W(2);D(2),q(n.areaLabel[e.area]),D(),J(` `,n.label(e),` `)}}function Ahe(e,t){if(e&1&&(R(0,`ul`),M(1,khe,4,2,`li`,null,b5),z()),e&2){let e=W();D(),N(e.diff().resolved)}}function jhe(e,t){e&1&&(R(0,`p`,7),K(1,`None.`),z())}function Mhe(e,t){if(e&1&&(R(0,`li`)(1,`span`,14),K(2),z(),K(3),z()),e&2){let e=t.$implicit,n=W(2);D(2),q(n.areaLabel[e.area]),D(),J(` `,n.label(e),` `)}}function Nhe(e,t){if(e&1&&(R(0,`ul`),M(1,Mhe,4,2,`li`,null,b5),z()),e&2){let e=W();D(),N(e.diff().added)}}function Phe(e,t){e&1&&(R(0,`p`,7),K(1,`None.`),z())}function Fhe(e,t){if(e&1&&(R(0,`li`)(1,`span`,14),K(2),z(),K(3),z()),e&2){let e=t.$implicit,n=W(2);D(2),q(n.areaLabel[e.area]),D(),D_(` `,n.label(e),`: `,e.countBefore,`× → `,e.count??1,`× `)}}function Ihe(e,t){if(e&1&&(R(0,`ul`),M(1,Fhe,4,4,`li`,null,b5),z()),e&2){let e=W();D(),N(e.changed())}}function Lhe(e,t){if(e&1&&(R(0,`p`,7),K(1),z()),e&2){let e=W();D(),J(``,e.diff().remaining.length,` still there with the same count.`)}}var Rhe=class e{diff=$.required();areaLabel=v5;changed=X(()=>this.diff().remaining.filter(e=>e.countBefore!==void 0&&e.countBefore!==e.count));rows=X(()=>{let e=new Map(this.diff().metrics.map(e=>[e.metric,e]));return y5.filter(t=>e.has(t.key)).map(t=>{let n=e.get(t.key),r=t.unit?` ${t.unit}`:``,i=e=>e===void 0?`Not measured`:`${e}${r}`,a=n.delta;return{label:t.unit===`%`?`${t.label} (%)`:t.label,before:i(n.before),after:i(n.after),change:a===void 0?`Not compared`:a===0?`Same`:`${a>0?`+`:`−`}${Math.abs(a)}${r}, ${a<0?`better`:`worse`}`,tone:a===void 0||a===0?`plain`:a<0?`ok`:`danger`}})});label(e){return`${e.rule}${e.subject?` in ${e.subject}`:``}`}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-audit-diff`]],inputs:{diff:[1,`diff`]},decls:35,vars:6,consts:[[1,`notice`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Numbers before and after`,1,`table-wrap`],[1,`sr-only`],[`scope`,`col`],[1,`lists`],[`aria-labelledby`,`audit-resolved`],[`id`,`audit-resolved`],[1,`muted`],[`aria-labelledby`,`audit-added`],[`id`,`audit-added`],[`aria-labelledby`,`audit-changed`],[`id`,`audit-changed`],[`scope`,`row`],[1,`chip`],[1,`area`]],template:function(e,t){e&1&&(M(0,Dhe,2,1,`p`,0,eg),R(2,`div`,1)(3,`table`)(4,`caption`,2),K(5,` Numbers before and after. Lower is better for each. `),z(),R(6,`thead`)(7,`tr`)(8,`th`,3),K(9,`Number`),z(),R(10,`th`,3),K(11,`Before`),z(),R(12,`th`,3),K(13,`After`),z(),R(14,`th`,3),K(15,`Change`),z()()(),R(16,`tbody`),M(17,Ohe,10,5,`tr`,null,Ehe),z()()(),R(19,`div`,4)(20,`section`,5)(21,`h3`,6),K(22),z(),A(23,Ahe,3,0,`ul`)(24,jhe,2,0,`p`,7),z(),R(25,`section`,8)(26,`h3`,9),K(27),z(),A(28,Nhe,3,0,`ul`)(29,Phe,2,0,`p`,7),z(),R(30,`section`,10)(31,`h3`,11),K(32),z(),A(33,Ihe,3,0,`ul`)(34,Lhe,2,1,`p`,7),z()()),e&2&&(N(t.diff().notes),D(17),N(t.rows()),D(5),J(`Resolved (`,t.diff().resolved.length,`)`),D(),j(t.diff().resolved.length?23:24),D(4),J(`New (`,t.diff().added.length,`)`),D(),j(t.diff().added.length?28:29),D(4),J(`Changed count (`,t.changed().length,`)`),D(),j(t.changed().length?33:34))},styles:[`[_nghost-%COMP%] {
-  display: grid;
-  gap: 12px;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-}
-
-.table-wrap[_ngcontent-%COMP%] {
-  overflow-x: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.table-wrap[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-table[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-th[_ngcontent-%COMP%], 
-td[_ngcontent-%COMP%] {
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--%NS%border);
-  text-align: left;
-  white-space: nowrap;
-}
-
-thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  background: var(--%NS%surface);
-}
-
-tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  font-weight: 500;
-  color: var(--%NS%text);
-}
-
-td[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
-  border-bottom: 0;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  padding: 1px 8px;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border: 1px solid var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-.chip[data-tone=ok][_ngcontent-%COMP%] {
-  border-color: transparent;
-  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
-  color: var(--%NS%ok-text);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: transparent;
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.lists[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 12px;
-}
-
-h3[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin: 0 0 6px;
-}
-
-ul[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.area[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-}
-
-.muted[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}`]})},zhe=(e,t)=>t.label,Bhe=(e,t)=>t.key,Vhe=(e,t)=>t.area;function Hhe(e,t){e&1&&(F(0,`app-state`,1),K(1,` The audit reads a live page, and a static report has none. `),F(2,`p`,4),K(3,`Open the panel from the server that runs the app to audit it.`),I()())}function Uhe(e,t){e&1&&(F(0,`app-state`,2),K(1,`Loading the audit…`),I())}function Whe(e,t){if(e&1){let e=B();F(0,`app-state`,5),H(`retry`,function(){return S(e),C(W().refresh())}),K(1,` Can't read the audit from the devtools server. `),I()}}function Ghe(e,t){e&1&&(F(0,`app-state`,1),K(1,` No page reports live data yet. `),F(2,`p`,4),K(3,` Open the app with the overlay loaded. The audit reads what the other inspectors collect from it. `),I()())}function Khe(e,t){if(e&1){let e=B();F(0,`app-select`,32),H(`valueChange`,function(t){return S(e),C(W(2).pickPage(t))}),I()}if(e&2){let e=W(2);P(`options`,e.pageOptions())(`value`,e.pageId())}}function qhe(e,t){e&1&&(F(0,`p`,16),K(1),I()),e&2&&(D(),q(t))}function Jhe(e,t){if(e&1){let e=B();F(0,`button`,14),H(`click`,function(){return S(e),C(W(2).mark(`clear`))}),K(1,` Clear `),I()}e&2&&P(`disabled`,W(2).busy())}function Yhe(e,t){e&1&&(F(0,`p`,16),K(1),I()),e&2&&(D(),q(t))}function Xhe(e,t){e&1&&L(0,`app-audit-diff`,23),e&2&&P(`diff`,t)}function Zhe(e,t){e&1&&(F(0,`p`,26),K(1,` No finding on this page. Run axe, or record change detection, to check more. `),I())}function Qhe(e,t){if(e&1){let e=B();F(0,`div`,26)(1,`p`),K(2,`No finding matches the filters.`),I(),F(3,`button`,33),H(`click`,function(){S(e),W();let t=Pg(7);return W().clearFilters(),C(t.focus())}),K(4,` Clear filters `),I()()}}function $he(e,t){if(e&1&&(F(0,`code`,39),K(1),I()),e&2){let e=W().$implicit;D(),q(e.subject)}}function ege(e,t){if(e&1&&(F(0,`span`,40),K(1),I()),e&2){let e=W().$implicit;k(`aria-label`,e.count+` times`),D(),J(``,e.count,`×`)}}function tge(e,t){if(e&1){let e=B();F(0,`button`,44),H(`focus`,function(){S(e);let t=W(2).$implicit;return C(W(3).highlight(t))})(`blur`,function(){return S(e),C(W(5).highlight(null))})(`click`,function(){S(e);let t=W(2).$implicit,n=W(3);return C(n.showComponent.emit({id:t.elementId,pageId:n.pageId()}))}),K(1,` Show component `),I()}}function nge(e,t){if(e&1){let e=B();F(0,`button`,44),H(`focus`,function(){S(e);let t=W(2).$implicit;return C(W(3).highlight(t))})(`blur`,function(){return S(e),C(W(5).highlight(null))})(`click`,function(){S(e);let t=W(2).$implicit;return C(W(3).highlight(t,!0))}),K(1,` Show in page `),I()}}function rge(e,t){if(e&1&&A(0,tge,2,0,`button`,43)(1,nge,2,0,`button`,43),e&2){let e=W().$implicit;j(+!W(3).isComponentArea(e.area))}}function ige(e,t){if(e&1){let e=B();F(0,`li`,35),H(`mouseenter`,function(){let t=S(e).$implicit;return C(W(3).highlight(t))})(`mouseleave`,function(){return S(e),C(W(3).highlight(null))}),F(1,`div`,36)(2,`span`,37),K(3),I(),F(4,`span`,38),K(5),I(),A(6,$he,2,1,`code`,39),A(7,ege,2,2,`span`,40),I(),F(8,`p`,41),K(9),I(),F(10,`div`,42)(11,`span`,22),K(12,`Rule `),F(13,`code`),K(14),I()(),F(15,`span`,22),K(16,`Agent tool `),F(17,`code`),K(18),I()(),A(19,rge,2,1),I()()}if(e&2){let e=t.$implicit,n=W(3);D(2),k(`data-tone`,n.tone[e.severity]),D(),q(e.severity),D(2),q(n.areaLabel[e.area]),D(),j(e.subject?6:-1),D(),j((e.count??1)>1?7:-1),D(2),q(e.why),D(5),q(e.rule),D(4),q(n.toolCall(e)),D(),j(e.elementId&&n.canShowComponent()?19:-1)}}function age(e,t){if(e&1&&(F(0,`ol`,27),M(1,ige,20,9,`li`,34,Bhe),I()),e&2){let e=W(2);D(),N(e.shown())}}function oge(e,t){if(e&1&&(F(0,`div`)(1,`dt`),K(2),I(),F(3,`dd`),K(4),I()()),e&2){let e=t.$implicit;D(2),q(e.label),D(2),q(e.value)}}function sge(e,t){if(e&1&&(F(0,`li`)(1,`strong`),K(2),I(),K(3),I()),e&2){let e=t.$implicit,n=W(3);D(2),q(n.areaLabel[e.area]),D(),J(` `,e.state===`off`?`Its inspector is turned off.`:e.note??`Nothing to read yet.`,` `)}}function cge(e,t){if(e&1&&(F(0,`section`,31)(1,`h2`,45),K(2,`Not checked`),I(),F(3,`ul`,46),M(4,sge,4,2,`li`,null,Vhe),I()()),e&2){let e=W(2);D(4),N(e.coverage())}}function lge(e,t){if(e&1){let e=B();F(0,`p`,6),K(1,` One ranked list of what the inspectors found on the live page, with an axe pass over the app when you run one. Take a baseline before a change and an after audit to compare them. Agents get the same list from the `),F(2,`code`),K(3,`audit`),I(),K(4,` tool. `),I(),F(5,`div`,7)(6,`app-search-field`,8,0),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.filter,t)||(n.filter=t),C(t)}),I(),F(8,`app-select`,9),H(`valueChange`,function(t){return S(e),C(W().area.set(t??`all`))}),I(),F(9,`app-select`,10),H(`valueChange`,function(t){return S(e),C(W().severity.set(t??`all`))}),I(),A(10,Khe,1,2,`app-select`,11),F(11,`span`,12),K(12),I(),F(13,`p`,13),K(14),I(),F(15,`button`,14),H(`click`,function(){return S(e),C(W().runAxe())}),K(16),I(),F(17,`button`,14),H(`click`,function(){return S(e),C(W().refresh())}),K(18,`Refresh`),I()(),F(19,`p`,15),K(20),I(),A(21,qhe,2,1,`p`,16),F(22,`section`,17)(23,`div`,18)(24,`h2`,19),K(25,`Before and after`),I(),F(26,`div`,20)(27,`button`,14),H(`click`,function(){return S(e),C(W().mark(`before`))}),K(28,` Take baseline `),I(),F(29,`button`,14),H(`click`,function(){return S(e),C(W().mark(`after`))}),K(30,` Take after audit `),I(),A(31,Jhe,2,1,`button`,21),I()(),F(32,`p`,22),K(33),I(),A(34,Yhe,2,1,`p`,16),A(35,Xhe,1,1,`app-audit-diff`,23),I(),F(36,`section`,24)(37,`h2`,25),K(38,`Findings`),I(),A(39,Zhe,2,0,`p`,26)(40,Qhe,5,0,`div`,26)(41,age,3,0,`ol`,27),I(),F(42,`section`,28)(43,`h2`,29),K(44,`Key numbers`),I(),F(45,`dl`,30),M(46,oge,5,2,`div`,null,zhe),I()(),A(48,cge,6,0,`section`,31)}if(e&2){let e,t,n,r=W();D(6),A_(`value`,r.filter),D(2),P(`options`,r.areaOptions())(`value`,r.area()),D(),P(`options`,r.severityOptions)(`value`,r.severity()),D(),j(r.pageOptions().length>1?10:-1),D(2),q(r.countText()),D(2),q(r.countStatus()),D(),P(`disabled`,r.axeRunning()),D(),J(` `,r.axeRunning()?`Running axe…`:`Run axe`,` `),D(),P(`disabled`,r.busy()),D(3),q(r.axeStatus()),D(),j((e=r.axeError())?21:-1,e),D(6),P(`disabled`,r.busy()),D(2),P(`disabled`,r.busy()||!r.before()),D(2),j(r.before()?31:-1),D(2),q(r.sessionText()),D(),j((t=r.sessionError())?34:-1,t),D(),j((n=r.diff())?35:-1,n),D(4),j(r.findings().length?r.shown().length?41:40:39),D(7),N(r.numbers()),D(2),j(r.coverage().length?48:-1)}}var uge={error:`danger`,warning:`warn`,info:`accent`},x5={error:0,warning:1,info:2},dge=[`errors`,`hydration`],fge=class e{rpc=$(null);canShowComponent=$(!0);showComponent=cv();destroyRef=x(Ss);hostPageId=tT();unsubscribe;seq=0;highlighted=!1;queued;time=VE;toolCall=whe;areaLabel=v5;tone=uge;severityOptions=[{value:`all`,label:`All severities`},{value:`error`,label:`Errors`},{value:`warning`,label:`Warnings and errors`}];data=T(null);loaded=T(!1);failed=T(!1);busy=T(!1);axeRunning=T(!1);axeError=T(null);sessionError=T(null);filter=T(``);area=T(`all`);severity=T(`all`);pageId=Q({source:()=>this.data(),computation:(e,t)=>t?.value&&e?.pages.some(e=>e.pageId===t.value)?t.value:e?.report?.pageId??this.hostPageId??``});staticReport=X(()=>cT(this.rpc()));report=X(()=>this.data()?.report??null);findings=X(()=>this.report()?.findings??[]);before=X(()=>this.data()?.session?.before??null);after=X(()=>this.data()?.session?.after??null);diff=X(()=>this.data()?.session?.diff??null);pageOptions=X(()=>(this.data()?.pages??[]).map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,...e.url&&e.url!==(e.title||e.url)?{hint:e.url}:{}})));areaOptions=X(()=>[{value:`all`,label:`All areas`},...Che.map(e=>({value:e,label:v5[e],hint:String(this.findings().filter(t=>t.area===e).length)}))]);shown=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.area(),n=this.severity()===`all`?2:x5[this.severity()];return this.findings().filter(r=>(t===`all`||r.area===t)&&x5[r.severity]<=n&&(!e||`${r.subject??``} ${r.rule} ${r.why}`.toLowerCase().includes(e)))});countText=X(()=>{let e=this.findings().length;return`${this.shown().length} of ${e} ${e===1?`finding`:`findings`}`});countStatus=c5(()=>[this.filter(),this.area(),this.severity(),this.pageId()],()=>this.countText());numbers=X(()=>{let e=this.report()?.metrics??{};return y5.filter(t=>e[t.key]!==void 0).map(t=>({label:t.unit===`%`?`${t.label} (%)`:t.label,value:`${e[t.key]}${t.unit===`ms`?` ms`:``}`}))});coverage=X(()=>(this.report()?.sources??[]).filter(e=>e.state!==`ok`));axeStatus=X(()=>{if(this.axeRunning())return`Running axe on the page…`;let e=this.data()?.axe;return e?`Last axe pass at ${VE(e.at)}: ${e.violations.length} ${e.violations.length===1?`rule`:`rules`} broken.`:`No axe pass on this page yet. Run axe to check accessibility.`});sessionText=X(()=>{let e=this.before(),t=this.after();if(!e)return`Take a baseline, make your change, then take an after audit. Run axe and record change detection the same way both times, so the numbers compare.`;let n=`Baseline at ${VE(e.at)} with ${e.findings.length} findings.`;return t?`${n} After audit at ${VE(t.at)} with ${t.findings.length} findings.`:`${n} Make your change, then take an after audit.`});constructor(){E(()=>{let e=this.rpc();e&&!cT(e)&&Z(()=>void this.subscribe(e))}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.queued),this.highlight(null)})}isComponentArea(e){return dge.includes(e)}clearFilters(){this.filter.set(``),this.area.set(`all`),this.severity.set(`all`)}pickPage(e){e&&(this.pageId.set(e),this.refresh())}async refresh(){let e=this.rpc();if(!e)return;let t=++this.seq;this.failed.set(!1);try{let n=await oT(e,`get-audit`,{pageId:this.pageId()||void 0});if(t!==this.seq||this.destroyRef.destroyed)return;let r=The(n);if(!r.report&&r.pages.length&&this.pageId())return this.pageId.set(``),this.refresh();this.data.set(r)}catch{t===this.seq&&this.failed.set(!0)}finally{t===this.seq&&this.loaded.set(!0)}}async runAxe(){let e=this.rpc();if(e&&!this.axeRunning()){this.axeRunning.set(!0),this.axeError.set(null);try{let t=await oT(e,`request-axe-run`,{pageId:this.pageId()||void 0});t?.ok||this.axeError.set(t?.error??`The axe pass did not run.`)}catch{this.axeError.set(`Can't reach the devtools server to run axe.`)}finally{this.axeRunning.set(!1)}await this.refresh()}}async mark(e){let t=this.rpc();if(t){this.busy.set(!0),this.sessionError.set(null);try{let n=await oT(t,`audit-session`,{pageId:this.pageId()||void 0,action:e});n?.ok||this.sessionError.set(n?.error??`The session did not change.`)}catch{this.sessionError.set(`Can't reach the devtools server.`)}finally{this.busy.set(!1)}await this.refresh()}}highlight(e,t=!1){let n=this.rpc();if(!n||!this.canShowComponent())return;let r=this.pageId(),i=e?.elementId&&r?{pageId:r,id:e.elementId,...t?{reveal:!0}:{}}:null;(i||this.highlighted)&&(this.highlighted=!!i,oT(n,`request-page-highlight`,i).catch(()=>{}))}refreshSoon(){this.queued===void 0&&(this.queued=setTimeout(()=>{this.queued=void 0,!(this.destroyRef.destroyed||this.axeRunning()||this.busy())&&this.refresh()},150))}async subscribe(e){await this.refresh();try{let t=await e.scope(`pangular`).rpc.sharedState(`audit`);if(this.destroyRef.destroyed)return;this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,()=>this.refreshSoon())}catch{}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-audit-inspector`]],inputs:{rpc:[1,`rpc`],canShowComponent:[1,`canShowComponent`]},outputs:{showComponent:`showComponent`},decls:5,vars:1,consts:[[`search`,``],[`kind`,`empty`],[`kind`,`loading`],[`kind`,`error`],[`detail`,``],[`kind`,`error`,3,`retry`],[1,`intro`],[1,`toolbar`],[`placeholder`,`Filter by component, rule or text`,`saveKey`,`audit`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Area`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Severity`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Page`,1,`filter-select`,3,`options`,`value`],[1,`count`],[`role`,`status`,1,`sr-only`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`axe-status`],[`role`,`alert`,1,`notice`,`error`],[`aria-labelledby`,`audit-session-title`,1,`session`],[1,`session-head`],[`id`,`audit-session-title`],[1,`actions`],[`type`,`button`,1,`small`,3,`disabled`],[1,`muted`],[3,`diff`],[`aria-labelledby`,`audit-findings-title`],[`id`,`audit-findings-title`,1,`section-title`],[1,`empty`],[`aria-label`,`Findings, most severe first`,1,`findings`],[`aria-labelledby`,`audit-numbers-title`],[`id`,`audit-numbers-title`,1,`section-title`],[1,`numbers`],[`aria-labelledby`,`audit-coverage-title`],[`ariaLabel`,`Page`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`type`,`button`,1,`small`,3,`click`],[1,`finding`],[1,`finding`,3,`mouseenter`,`mouseleave`],[1,`head`],[1,`chip`],[1,`chip`,`plain`],[1,`subject`],[1,`times`],[1,`why`],[1,`meta`],[`type`,`button`,1,`link`],[`type`,`button`,1,`link`,3,`focus`,`blur`,`click`],[`id`,`audit-coverage-title`,1,`section-title`],[1,`coverage`]],template:function(e,t){e&1&&A(0,Hhe,4,0,`app-state`,1)(1,Uhe,2,0,`app-state`,2)(2,Whe,2,0,`app-state`,3)(3,Ghe,4,0,`app-state`,1)(4,lge,49,21),e&2&&j(t.staticReport()?0:t.loaded()?t.failed()?2:t.report()?4:3:1)},dependencies:[HL,$N,wD,Rhe],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-size: 13px;
-}
-
-.intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 8px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-input[type=search][_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.filter-select[_ngcontent-%COMP%] {
-  flex: 0 1 170px;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.small[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.small[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  color: var(--%NS%text-2);
-  cursor: default;
-}
-
-.small[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.axe-status[_ngcontent-%COMP%] {
-  min-height: 1.5em;
-  margin: 0 0 8px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.notice.error[_ngcontent-%COMP%] {
-  color: var(--%NS%danger-text);
-  border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent);
-}
-
-section[_ngcontent-%COMP%] {
-  margin: 0 0 16px;
-}
-
-.session[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: grid;
-  gap: 8px;
-  padding: 10px 12px;
-}
-
-.session[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.session-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.section-title[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.findings[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.finding[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-  padding: 8px 12px;
-}
-
-.head[_ngcontent-%COMP%], 
-.meta[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  align-items: center;
-  min-width: 0;
-}
-
-.meta[_ngcontent-%COMP%] {
-  font-size: 12px;
-}
-
-.meta[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  overflow-wrap: anywhere;
-}
-
-.subject[_ngcontent-%COMP%] {
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  overflow-wrap: anywhere;
-}
-
-.times[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.why[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text);
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  padding: 1px 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.chip.plain[_ngcontent-%COMP%] {
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.link[_ngcontent-%COMP%] {
-  padding: 0;
-  border: 0;
-  border-radius: 2px;
-  background: none;
-  color: var(--%NS%accent-text);
-  font: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
-}
-
-.link[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.numbers[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-  gap: 6px;
-  margin: 0;
-}
-
-.numbers[_ngcontent-%COMP%]   div[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  padding: 6px 10px;
-}
-
-.numbers[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.numbers[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-.coverage[_ngcontent-%COMP%] {
-  display: grid;
-  gap: 4px;
-  margin: 0;
-  padding: 0 0 0 18px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.coverage[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-weight: 600;
-}
-
-.empty[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}`]})},S5=[{id:`router`,label:`Router`,tab:`routes`,tabLabel:`Routes`,inspector:`router`,state:`router`},{id:`http`,label:`HTTP`,tab:`network`,tabLabel:`SSR & HTTP`,inspector:`http`,state:`http`},{id:`ngrx`,label:`NgRx`,tab:`store`,tabLabel:`Store`,inspector:`ngrx`,state:`ngrx-store`},{id:`cd`,label:`Change detection`,tab:`components`,tabLabel:`Components`,inspector:`components`,state:`change-detection`},{id:`forms`,label:`Forms`,tab:`forms`,tabLabel:`Forms`,inspector:`forms`,state:`forms`},{id:`signals`,label:`Signals`,tab:`signals`,tabLabel:`Signals`,inspector:`signals`,state:`signal-graph`}],C5=Object.fromEntries(S5.map(e=>[e.id,e]));function pge(e){return S5.filter(t=>e.inspectors[t.inspector])}function w5(e){return Array.isArray(e)?e:[]}function T5(e){return e&&typeof e==`object`&&!Array.isArray(e)?e:{}}function E5(e){let t=T5(e).pages;return Array.isArray(t)?t:Object.values(T5(t))}function D5(e){return typeof e==`number`&&Number.isFinite(e)}function mge(e){try{let t=new URL(e,`http://x`);return e.startsWith(`/`)||t.host===`x`?`${t.pathname}${t.search}`:e.replace(/^[a-z]+:\/\/[^/]+/i,``)||e}catch{return e}}function O5(e){return e<10?`${Math.round(e*10)/10} ms`:`${Math.round(e)} ms`}function hge(e){let t;try{t=typeof e==`string`?JSON.stringify(e):JSON.stringify(e)??``}catch{t=String(e)}return t.length>80?`${t.slice(0,79)}…`:t}function gge(e){let t=[];for(let n of E5(e)){let e=typeof n?.pageId==`string`?n.pageId:``;for(let r of w5(n?.navigations)){if(!D5(r?.startedAt)||r.probe||r.beforeConnect)continue;let n=D5(r.endedAt)?Math.max(0,r.endedAt-r.startedAt):void 0,i=r.finalUrl&&r.finalUrl!==r.url?` to ${r.finalUrl}`:``;t.push({key:`router:${e}:${r.id}`,layer:`router`,pageId:e,at:r.startedAt,...n===void 0?{}:{ms:n},title:`Navigation to ${r.url}`,detail:[`${r.outcome}${i}`,r.trigger,n===void 0?``:O5(n)].filter(Boolean).join(` · `),...r.outcome===`failed`?{tone:`danger`}:r.outcome===`cancelled`||r.outcome===`redirected`?{tone:`warn`}:{},link:{tab:`routes`,...e?{page:e}:{}}})}}return t}function _ge(e){let t=e.status??0;if(e.error||t>=500||t===0&&!e.cancelled)return`danger`;if(t>=400||e.faulted||e.cancelled)return`warn`}function k5(e,t){if(!D5(e?.at))return null;let n=e.side===`server`?`SSR`:`client`,r=e.status?String(e.status):e.cancelled?`cancelled`:`no response`,i=D5(e.durationMs)?e.durationMs:void 0,a=_ge(e);return{key:`http:${e.side===`server`?`server`:t}:${e.id??e.at}`,layer:`http`,pageId:t,at:e.at,...i===void 0?{}:{ms:i},title:`${e.method??`GET`} ${mge(e.url??``)}`,detail:[r,n,i===void 0?``:O5(i),e.cacheHit?`from cache`:``,e.mocked?`mocked`:e.faulted?`fault rule`:``].filter(Boolean).join(` · `),...a?{tone:a}:{},link:{tab:`network`,...t?{page:t}:{}}}}function vge(e){let t=[],n=E5(e);for(let e of n){let n=typeof e?.pageId==`string`?e.pageId:``;for(let r of w5(e?.calls)){let e=k5(r,n);e&&t.push(e)}}for(let r of w5(T5(e).serverCalls)){let e=r?.pageUrl?n.find(e=>e?.initialUrl&&e.initialUrl===r.pageUrl):void 0,i=k5({...r,side:`server`},e?.pageId??``);i&&t.push(i)}return t}function yge(e){let t=[];for(let n of E5(e)){let e=typeof n?.pageId==`string`?n.pageId:``;for(let r of w5(n?.log)){if(!D5(r?.timestamp))continue;let n=w5(r.diff).length+(r.diffTruncated??0),i=D5(r.durationMs)?r.durationMs:void 0;t.push({key:`ngrx:${e}:${r.seq}`,layer:`ngrx`,pageId:e,at:r.timestamp,...i===void 0?{}:{ms:i},title:r.source===`event`?r.eventType??r.type:r.type,detail:[r.storeId,r.source===`event`?`event`:n?`${n} ${n===1?`change`:`changes`}`:`no change`,i===void 0?``:O5(i)].filter(Boolean).join(` · `),link:{tab:`store`,...e?{page:e}:{}}})}}return t}var bge=16;function xge(e){let t=[];for(let n of E5(e)){let e=typeof n?.pageId==`string`?n.pageId:``;for(let r of w5(n?.cycles)){if(!D5(r?.at))continue;let n=D5(r.ms)?r.ms:0;t.push({key:`cd:${e}:${r.id}`,layer:`cd`,pageId:e,at:r.at,ms:n,title:`Change detection cycle ${r.id}`,detail:[O5(n),`${r.checks} ${r.checks===1?`check`:`checks`}`,r.trigger?`after ${r.trigger}`:``].filter(Boolean).join(` · `),...n>bge?{tone:`warn`}:{},link:{tab:`components`,...e?{page:e}:{}}})}}return t}function Sge(e){return w5(T5(e).events).flatMap((e,t)=>{if(!D5(e?.timestamp)||typeof e.formId!=`string`)return[];let n=dT(e.formId),r=[e.detail,e.origin,e.outcome].filter(Boolean).join(` · `);return[{key:`forms:${e.formId}:${e.seq??`i${t}`}`,layer:`forms`,pageId:n,at:e.timestamp,...D5(e.ms)?{ms:e.ms}:{},title:`${e.type} ${e.path||`form`}`,detail:r,...e.type===`submit`&&e.outcome===`invalid`?{tone:`warn`}:{},link:{tab:`forms`,id:e.formId,...n?{page:n}:{}}}]})}var Cge={write:`set`,sample:`sampled`};function wge(e){let t=[],n=T5(T5(e).pages),r=Object.keys(n).length?Object.entries(n):[[``,T5(e).graph]];for(let[e,n]of r){let r=T5(n),i=typeof r.pageId==`string`?r.pageId:String(e),a=new Map(w5(r.nodes).map(e=>[e?.id,e?.label||e?.kind||`signal`]));for(let[e,n]of Object.entries(T5(r.history)))for(let r of w5(n)){if(!D5(r?.at)||r.source===`initial`)continue;let n=a.get(e)??e;t.push({key:`signals:${i}:${e}:${r.epoch??r.at}`,layer:`signals`,pageId:i,at:r.at,title:`${n} ${Cge[r.source??``]??`changed`}`,detail:hge(r.value),link:{tab:`signals`,...i?{page:i}:{}}})}}return t}var Tge={router:gge,http:vge,ngrx:yge,cd:xge,forms:Sge,signals:wge};function Ege(e){let t=[];for(let n of S5){let r=e[n.id];r!=null&&t.push(...Tge[n.id](r))}let n=new Map(S5.map((e,t)=>[e.id,t]));t.sort((e,t)=>e.at-t.at||n.get(e.layer)-n.get(t.layer)||(e.key<t.key?-1:+(e.key>t.key)));let r=new Set;for(let e of t){let t=e.key;for(let n=2;r.has(t);n++)t=`${e.key}#${n}`;e.key=t,r.add(t)}return t}function Dge(e,t){let n=new Map,r=(e,t)=>{typeof e==`string`&&e&&(typeof t==`string`&&t&&!n.get(e)?n.set(e,t):n.has(e)||n.set(e,``))};for(let t of E5(e.http))r(t?.pageId,t?.title||t?.url);for(let t of E5(e.router))r(t?.pageId,t?.snapshot?.url);for(let t of E5(e.ngrx))r(t?.pageId,t?.title||t?.url);for(let e of t)r(e.pageId,``);return[...n].map(([e,t])=>({pageId:e,label:t||e}))}function Oge(e,t){let n=t.query.trim().toLowerCase();return e.filter(e=>t.layers.has(e.layer)&&(t.pageId===`all`||e.pageId===t.pageId)&&(!n||e.title.toLowerCase().includes(n)||e.detail.toLowerCase().includes(n)))}function A5(e,t){return t?e.filter(e=>e.at>=t.start&&e.at<=t.end):e}function kge(e){if(!e.length)return null;let t=1/0,n=-1/0;for(let r of e)t=Math.min(t,r.at),n=Math.max(n,r.at+(r.ms??0));return n-t<20?{start:t-10,end:t+10}:{start:t,end:n}}function Age(e,t,n){let r=Math.max(20,(e.end-e.start)*t);if(r>=n.end-n.start)return null;let i=(e.start+e.end)/2;return j5({start:i-r/2,end:i+r/2},n)}function jge(e,t,n){let r=(e.end-e.start)*t;return j5({start:e.start+r,end:e.end+r},n)}function j5(e,t){let n=e.end-e.start;return e.start<t.start?{start:t.start,end:t.start+n}:e.end>t.end?{start:t.end-n,end:t.end}:e}function Mge(e,t,n){let[r,i]=t<n?[t,n]:[n,t],a=e=>Math.min(1,Math.max(0,e)),o=e.end-e.start,s=e.start+a(r)*o,c=e.start+a(i)*o;return c-s<20?null:{start:s,end:c}}function Nge(e,t,n){let r=Math.max(1,t.end-t.start),i=new Map;for(let a of e){if(a.at<t.start||a.at>t.end)continue;let e=Math.min(n-1,Math.floor((a.at-t.start)/r*n)),o=`${a.layer}:${e}`,s=i.get(o);s||(s={layer:a.layer,slot:e,count:0},i.set(o,s)),s.count++,(a.tone===`danger`||a.tone===`warn`&&s.tone!==`danger`)&&(s.tone=a.tone)}return[...i.values()]}function Pge(e,t,n){let r=null;for(let i of e)i.layer===t&&(!r||Math.abs(i.at-n)<Math.abs(r.at-n))&&(r=i);return r}var M5=`pangular-timeline-hidden-layers`;function Fge(){try{let e=JSON.parse(localStorage.getItem(M5)??`[]`);return Array.isArray(e)?e.filter(e=>S5.some(t=>t.id===e)):[]}catch{return[]}}function N5(e){try{localStorage.setItem(M5,JSON.stringify(e))}catch{}}function P5(e){let t=new Date(e),n=(e,t=2)=>String(e).padStart(t,`0`);return`${n(t.getHours())}:${n(t.getMinutes())}:${n(t.getSeconds())}.${n(t.getMilliseconds(),3)}`}function F5(e){if(e<1e3)return`${Math.round(e)} ms`;if(e<6e4)return`${Math.round(e/100)/10} s`;let t=Math.floor(e/6e4),n=Math.round(e%6e4/1e3);return n?`${t} min ${n} s`:`${t} min`}var Ige=[`tracks`],I5=(e,t)=>t.id,Lge=(e,t)=>t.layer+t.slot,Rge=(e,t)=>t.key;function zge(e,t){e&1&&(F(0,`app-state`,3),K(1,`Loading the timeline…`),I())}function Bge(e,t){if(e&1){let e=B();F(0,`app-state`,5),H(`retry`,function(){return S(e),C(W().retry())}),K(1,` Can't read the timeline from the devtools server. `),I()}}function Vge(e,t){if(e&1){let e=B();F(0,`app-select`,18),H(`valueChange`,function(t){S(e);let n=W(2);return C(n.pageId.set(t??n.allPages))}),I()}if(e&2){let e=W(2);P(`options`,e.pageOptions())(`value`,e.pageId())}}function Hge(e,t){if(e&1){let e=B();F(0,`button`,19),H(`click`,function(){let t=S(e).$implicit;return C(W(2).toggleLayer(t.id))}),L(1,`span`,20),K(2),F(3,`span`,21),K(4),I()()}if(e&2){let e=t.$implicit,n=W(2);k(`aria-pressed`,!n.hidden().includes(e.id)),D(2),J(` `,e.label,` `),D(2),q(n.layerCounts()[e.id])}}function Uge(e,t){e&1&&(F(0,`app-state`,16),K(1,` Nothing on the timeline yet. `),F(2,`p`,22),K(3,` Use the app with the overlay loaded. Navigations, HTTP calls, NgRx actions and form events show up as they happen. Record change detection on the Components tab, and pick a component on the Signals tab to follow its signals. `),I()())}function Wge(e,t){if(e&1){let e=B();F(0,`app-state`,23),H(`clear`,function(){S(e),W();let t=Pg(2);return W().clearFilters(),C(t.focus())}),K(1),I()}if(e&2){let e=W(2);D(),J(` No event matches the filters`,e.range()?` in this range`:``,`. `)}}function Gge(e,t){if(e&1&&(F(0,`li`),K(1),I()),e&2){let e=t.$implicit;D(),q(e.label)}}function Kge(e,t){if(e&1&&(w(),L(0,`line`,32)),e&2){let e=t.$index,n=W(3);k(`x2`,n.chartWidth)(`y1`,e*n.laneHeight+n.laneHeight/2)(`y2`,e*n.laneHeight+n.laneHeight/2)}}function qge(e,t){if(e&1&&(w(),L(0,`rect`,33)),e&2){let e=t.$implicit,n=W(3);k(`data-tone`,e.tone??null)(`x`,e.slot*n.slotWidth)(`y`,n.laneIndex()[e.layer]*n.laneHeight+4)(`width`,n.slotWidth-1)(`height`,n.laneHeight-8)(`opacity`,n.binOpacity(e.count))}}function Jge(e,t){if(e&1&&(w(),L(0,`rect`,34)),e&2){let e=t,n=W(3);k(`x`,e.x-2)(`y`,e.y+1)(`width`,n.slotWidth+3)(`height`,n.laneHeight-2)}}function Yge(e,t){if(e&1&&L(0,`div`,45),e&2){let e=t;t_(`left`,e.left,`%`)(`width`,e.width,`%`)}}function Xge(e,t){if(e&1&&(F(0,`p`,41),K(1),I()),e&2){let e=W(3);D(),Y(` Showing the newest `,e.listed().length,` of `,e.shown().length,` events. Zoom in or filter to see older ones. `)}}function Zge(e,t){if(e&1&&(F(0,`span`,50),K(1),I()),e&2){let e=W().$implicit;D(),q(e.detail)}}function Qge(e,t){if(e&1&&(F(0,`span`,51),K(1),I()),e&2){let e=W().$implicit,t=W(3);D(),q(t.pageLabel(e.pageId))}}function $ge(e,t){if(e&1){let e=B();F(0,`li`)(1,`button`,46),H(`click`,function(){let t=S(e).$implicit;return C(W(3).select(t))})(`dblclick`,function(){let t=S(e).$implicit;return C(W(3).openEvent(t))}),F(2,`time`,47),K(3),I(),F(4,`span`,48),K(5),I(),F(6,`span`,49),K(7),I(),A(8,Zge,2,1,`span`,50),A(9,Qge,2,1,`span`,51),I()()}if(e&2){let e=t.$implicit,n=W(3);D(),G(`selected`,e.key===n.selectedKey()),k(`aria-current`,e.key===n.selectedKey()?`true`:null)(`data-key`,e.key),D(2),q(n.clock(e.at)),D(),k(`data-tone`,e.tone??null),D(),q(n.layerLabel(e.layer)),D(2),q(e.title),D(),j(e.detail?8:-1),D(),j(n.showPage()?9:-1)}}function e_e(e,t){if(e&1&&(F(0,`dt`),K(1,`Took`),I(),F(2,`dd`),K(3),I()),e&2){let e=W(),t=W(3);D(3),q(t.span(e.ms))}}function t_e(e,t){if(e&1&&(F(0,`dt`),K(1,`Detail`),I(),F(2,`dd`,54),K(3),I()),e&2){let e=W();D(3),q(e.detail)}}function n_e(e,t){if(e&1){let e=B();F(0,`p`,52),K(1),I(),F(2,`dl`)(3,`dt`),K(4,`Layer`),I(),F(5,`dd`),K(6),I(),F(7,`dt`),K(8,`Time`),I(),F(9,`dd`),K(10),I(),A(11,e_e,4,1),A(12,t_e,4,1),F(13,`dt`),K(14,`Page`),I(),F(15,`dd`),K(16),I()(),F(17,`button`,53),H(`click`,function(){let t=S(e);return C(W(3).openEvent(t))}),K(18),I()}if(e&2){let e=t,n=W(3);D(),q(e.title),D(5),q(n.layerLabel(e.layer)),D(4),q(n.clock(e.at)),D(),j(e.ms===void 0?-1:11),D(),j(e.detail?12:-1),D(4),q(e.pageId?n.pageLabel(e.pageId):`Server, no page`),D(2),J(` Open in `,n.tabLabel(e.layer),` `)}}function r_e(e,t){e&1&&(F(0,`p`,27),K(1,` Select an event in the list or on the chart to see it here. Double click a row to open it in its own tab. `),I())}function i_e(e,t){if(e&1){let e=B();F(0,`section`,24)(1,`div`,25)(2,`h2`,26),K(3,`Time axis`),I(),F(4,`span`,27),K(5),I()(),F(6,`div`,28)(7,`ul`,29),M(8,Gge,2,1,`li`,null,I5),I(),F(10,`div`,30,1),H(`pointerdown`,function(t){return S(e),C(W(2).onPointerDown(t))})(`pointermove`,function(t){return S(e),C(W(2).onPointerMove(t))})(`pointerup`,function(t){return S(e),C(W(2).onPointerUp(t))})(`pointercancel`,function(){return S(e),C(W(2).brush.set(null))}),w(),F(12,`svg`,31),M(13,Kge,1,3,`:svg:line`,32,I5),M(15,qge,1,6,`:svg:rect`,33,Lge),A(17,Jge,1,4,`:svg:rect`,34),I(),A(18,Yge,1,4,`div`,35),I()(),fs(),F(19,`div`,36)(20,`span`),K(21),I(),F(22,`span`),K(23),I()(),F(24,`p`,37),K(25,` Drag across the chart to look at a range, and click a mark to select the nearest event. The list below holds the same events. `),I()(),F(26,`div`,38)(27,`section`,39)(28,`h2`,40),K(29,`Events`),I(),A(30,Xge,2,2,`p`,41),F(31,`ol`,42),M(32,$ge,10,10,`li`,null,Rge),I()(),F(34,`aside`,43)(35,`h2`,44),K(36,`Selected event`),I(),A(37,n_e,19,7)(38,r_e,2,0,`p`,27),I()()}if(e&2){let e,t,n,r=W(2);D(5),q(r.viewText()),D(3),N(r.lanes()),D(2),t_(`height`,r.lanes().length*r.laneHeight,`px`),k(`aria-label`,r.chartLabel()),D(2),k(`viewBox`,`0 0 `+r.chartWidth+` `+r.lanes().length*r.laneHeight),D(),N(r.lanes()),D(2),N(r.bins()),D(2),j((e=r.selectedMark())?17:-1,e),D(),j((t=r.brushBox())?18:-1,t),D(3),q(r.clock(r.view().start)),D(2),q(r.clock(r.view().end)),D(7),j(r.shown().length>r.listed().length?30:-1),D(2),N(r.listed()),D(5),j((n=r.selected())?37:38,n)}}function a_e(e,t){if(e&1){let e=B();F(0,`div`,6)(1,`app-search-field`,7,0),M_(`valueChange`,function(t){S(e);let n=W();return j_(n.query,t)||(n.query=t),C(t)}),I(),A(3,Vge,1,2,`app-select`,8),F(4,`span`,9),K(5),I(),F(6,`p`,10),K(7),I()(),F(8,`div`,11)(9,`div`,12),M(10,Hge,5,3,`button`,13,I5),I(),F(12,`div`,14)(13,`button`,15),H(`click`,function(){return S(e),C(W().zoom(.5))}),K(14,` Zoom in `),I(),F(15,`button`,15),H(`click`,function(){return S(e),C(W().zoom(2))}),K(16,` Zoom out `),I(),F(17,`button`,15),H(`click`,function(){return S(e),C(W().pan(-1))}),K(18,` Earlier `),I(),F(19,`button`,15),H(`click`,function(){return S(e),C(W().pan(1))}),K(20,` Later `),I(),F(21,`button`,15),H(`click`,function(){return S(e),C(W().range.set(null))}),K(22,` Show all `),I()()(),A(23,Uge,4,0,`app-state`,16)(24,Wge,2,1,`app-state`,17)(25,i_e,39,11)}if(e&2){let e=W();D(),A_(`value`,e.query),D(2),j(e.pageOptions().length>2?3:-1),D(2),q(e.countText()),D(2),q(e.countStatus()),D(3),N(e.layers()),D(3),P(`disabled`,!e.canZoomIn()),D(2),P(`disabled`,!e.range()),D(2),P(`disabled`,!e.canPan(-1)),D(2),P(`disabled`,!e.canPan(1)),D(2),P(`disabled`,!e.range()),D(2),j(e.events().length?e.shown().length?25:24:23)}}var L5=240,R5=1e3,o_e=4,s_e=class e{rpc=$(null);open=cv();destroyRef=x(Ss);tracks=hv(`tracks`);host=x(Ml);hostPageId=tT();cleanups=[];loads=0;allPages=`all`;clock=P5;span=F5;laneHeight=24;chartWidth=R5;slotWidth=R5/L5;loading=T(!0);failed=T(!1);sources=T({});query=T(``);hidden=T(Fge());range=T(null);selectedKey=T(null);brush=T(null);layers=X(()=>pge(TT(this.rpc())));events=X(()=>{let e=new Set(this.layers().map(e=>e.id));return Ege(this.sources()).filter(t=>e.has(t.layer))});pages=X(()=>Dge(this.sources(),this.events()));pageId=Q({source:()=>this.pages().map(e=>e.pageId),computation:(e,t)=>t&&(t.value===`all`||e.includes(t.value))?t.value:this.hostPageId&&e.includes(this.hostPageId)?this.hostPageId:`all`});pageOptions=X(()=>[{value:`all`,label:`All pages`},...this.pages().map(e=>({value:e.pageId,label:e.label,...e.label===e.pageId?{}:{hint:e.pageId}}))]);showPage=X(()=>this.pageId()===`all`&&this.pages().length>1);matching=X(()=>Oge(this.events(),{layers:new Set(S5.map(e=>e.id)),pageId:this.pageId(),query:this.query()}));layerCounts=X(()=>{let e=Object.fromEntries(S5.map(e=>[e.id,0]));for(let t of A5(this.matching(),this.range()))e[t.layer]++;return e});visible=X(()=>{let e=new Set(this.hidden());return this.matching().filter(t=>!e.has(t.layer))});lanes=X(()=>{let e=new Set(this.hidden());return this.layers().filter(t=>!e.has(t.id))});laneIndex=X(()=>Object.fromEntries(this.lanes().map((e,t)=>[e.id,t])));bounds=X(()=>kge(this.visible()));view=X(()=>this.range()??this.bounds());shown=X(()=>A5(this.visible(),this.range()));listed=X(()=>this.shown().slice(-200).reverse());bins=X(()=>{let e=this.view();return e?Nge(this.shown(),e,L5):[]});maxBin=X(()=>this.bins().reduce((e,t)=>Math.max(e,t.count),1));selected=X(()=>this.events().find(e=>e.key===this.selectedKey())??null);selectedMark=X(()=>{let e=this.selected(),t=this.view(),n=e?this.laneIndex()[e.layer]:void 0;if(!e||!t||n===void 0||e.at<t.start||e.at>t.end)return null;let r=Math.max(1,t.end-t.start);return{x:Math.min(239,Math.floor((e.at-t.start)/r*L5))*this.slotWidth,y:n*this.laneHeight}});brushBox=X(()=>{let e=this.brush();if(!e)return null;let t=Math.min(e.from,e.to),n=Math.max(e.from,e.to);return{left:t*100,width:(n-t)*100}});countText=X(()=>{let e=this.events().length;return`${this.shown().length} of ${e} ${e===1?`event`:`events`}`});countStatus=c5(()=>[this.query(),this.hidden(),this.pageId(),this.range()],()=>this.countText());viewText=X(()=>{let e=this.view();if(!e)return``;let t=F5(e.end-e.start);return this.range()?`Range of ${t}`:`All ${t}`});chartLabel=X(()=>{let e=this.view();if(!e)return`Timeline`;let t=this.layerCounts(),n=this.lanes().map(e=>`${e.label} ${t[e.id]}`);return`Timeline from ${P5(e.start)} to ${P5(e.end)}: ${n.join(`, `)}. The Events list holds the same events.`});canZoomIn=X(()=>{let e=this.view();return!!e&&e.end-e.start>40});constructor(){lJ(`timeline`,this.selectedKey),E(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.stop())}layerLabel(e){return C5[e].label}tabLabel(e){return C5[e].tabLabel}pageLabel(e){return e?this.pages().find(t=>t.pageId===e)?.label??e:`Server`}binOpacity(e){return Math.round((.55+.45*Math.min(1,Math.log2(e+1)/Math.log2(this.maxBin()+1)))*100)/100}toggleLayer(e){let t=this.hidden().includes(e)?this.hidden().filter(t=>t!==e):[...this.hidden(),e];this.hidden.set(t),N5(t)}clearFilters(){this.query.set(``),this.range.set(null),this.hidden.set([]),N5([]),this.pageId.set(`all`)}zoom(e){let t=this.view(),n=this.bounds();t&&n&&this.range.set(Age(t,e,n))}canPan(e){let t=this.range(),n=this.bounds();return!t||!n?!1:e<0?t.start>n.start:t.end<n.end}pan(e){let t=this.range(),n=this.bounds();t&&n&&this.range.set(jge(t,e*.5,n))}select(e){this.selectedKey.set(e.key)}openEvent(e){this.open.emit(e.link)}share(e){let t=this.tracks()?.nativeElement.getBoundingClientRect();return!t||t.width<=0?0:Math.min(1,Math.max(0,(e.clientX-t.left)/t.width))}onPointerDown(e){if(e.pointerType===`mouse`&&e.button!==0)return;let t=this.share(e);this.brush.set({from:t,to:t,id:e.pointerId}),this.downX=e.clientX;try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}e.preventDefault()}onPointerMove(e){let t=this.brush();t&&t.id===e.pointerId&&this.brush.set({...t,to:this.share(e)})}onPointerUp(e){let t=this.brush(),n=this.view();if(this.brush.set(null),!t||t.id!==e.pointerId||!n)return;if(Math.abs(e.clientX-this.downX)<o_e){this.pick(e,n);return}let r=Mge(n,t.from,this.share(e));r&&this.range.set(r)}downX=0;pick(e,t){let n=this.tracks()?.nativeElement.getBoundingClientRect(),r=this.lanes();if(!n||!r.length)return;let i=r[Math.min(r.length-1,Math.max(0,Math.floor((e.clientY-n.top)/this.laneHeight)))],a=t.start+this.share(e)*(t.end-t.start),o=Pge(this.shown(),i.id,a);o&&(this.selectedKey.set(o.key),queueMicrotask(()=>{this.host.nativeElement.querySelector(`button.row[data-key="${CSS.escape(o.key)}"]`)?.scrollIntoView?.({block:`nearest`})}))}retry(){let e=this.rpc();e&&this.load(e)}stop(){for(let e of this.cleanups.splice(0))e()}async load(e){this.stop();let t=++this.loads;this.loading.set(!0),this.failed.set(!1);let n=e.scope(`pangular`).rpc,r=await Promise.allSettled(S5.map(async e=>{let r=await n.sharedState(e.state);if(this.destroyRef.destroyed||t!==this.loads)return;let i=t=>this.sources.update(n=>({...n,[e.id]:t}));i(r.value()),this.cleanups.push(r.on(`updated`,i))}));this.destroyRef.destroyed||t!==this.loads||(this.failed.set(r.every(e=>e.status===`rejected`)),this.loading.set(!1))}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-timeline`]],viewQuery:function(e,t){e&1&&Mg(t.tracks,Ige,5),e&2&&Ng()},inputs:{rpc:[1,`rpc`]},outputs:{open:`open`},decls:5,vars:1,consts:[[`search`,``],[`tracks`,``],[1,`intro`],[`kind`,`loading`],[`kind`,`error`],[`kind`,`error`,3,`retry`],[1,`toolbar`],[`placeholder`,`Filter by name, URL or detail`,`saveKey`,`timeline`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[1,`count`],[`role`,`status`,1,`sr-only`],[1,`controls`],[`role`,`group`,`aria-label`,`Layers`,1,`layers`],[`type`,`button`,1,`layer`],[`role`,`group`,`aria-label`,`Time range`,1,`zoom`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`kind`,`empty`],[`kind`,`no-match`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[`type`,`button`,1,`layer`,3,`click`],[`aria-hidden`,`true`,1,`check`],[1,`badge`],[`detail`,``],[`kind`,`no-match`,3,`clear`],[`aria-labelledby`,`timeline-chart-heading`,1,`chart-card`],[1,`chart-head`],[`id`,`timeline-chart-heading`],[1,`muted`],[1,`chart`],[`aria-hidden`,`true`,1,`lane-labels`],[`role`,`img`,1,`tracks`,3,`pointerdown`,`pointermove`,`pointerup`,`pointercancel`],[`preserveAspectRatio`,`none`,`aria-hidden`,`true`],[`x1`,`0`,1,`lane-line`],[1,`mark`],[1,`selected-mark`],[1,`brush`,3,`left`,`width`],[`aria-hidden`,`true`,1,`axis`],[1,`hint`],[1,`split`],[`aria-labelledby`,`timeline-events-heading`,1,`events`],[`id`,`timeline-events-heading`],[1,`note`],[`appRovingList`,`button.row`,`aria-label`,`Events, newest first`,1,`rows`],[`aria-labelledby`,`timeline-detail-heading`,1,`detail-panel`],[`id`,`timeline-detail-heading`],[1,`brush`],[`type`,`button`,1,`row`,3,`click`,`dblclick`],[1,`when`],[1,`chip`],[1,`title`],[1,`detail`],[1,`page`],[1,`detail-title`],[`type`,`button`,1,`primary`,3,`click`],[1,`mono`]],template:function(e,t){e&1&&(F(0,`p`,2),K(1,` Navigations, HTTP calls, NgRx actions, change detection cycles, form events and signal changes from the live page on one time axis. Turn layers on and off, drag across the chart to look at a range, and open an event in its own tab. `),I(),A(2,zge,2,0,`app-state`,3)(3,Bge,2,0,`app-state`,4)(4,a_e,26,10)),e&2&&(D(2),j(t.loading()?2:t.failed()?3:4))},dependencies:[HL,wD,NV,$N],styles:[`[_nghost-%COMP%] {
-  display: block;
-  font-size: 13px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.intro[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.muted[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.toolbar[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 12px;
-  align-items: center;
-  margin: 0 0 8px;
-  padding: 8px;
-  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-}
-
-.search[_ngcontent-%COMP%] {
-  position: relative;
-  flex: 1 1 200px;
-  min-width: 0;
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  width: 14px;
-  height: 14px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  pointer-events: none;
-}
-
-input[type=search][_ngcontent-%COMP%] {
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 34px;
-  background: var(--%NS%bg);
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-input[type=search][_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.page-select[_ngcontent-%COMP%] {
-  flex: 0 1 200px;
-  min-width: 0;
-}
-
-.count[_ngcontent-%COMP%] {
-  margin-left: auto;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.controls[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 16px;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 12px;
-}
-
-.layers[_ngcontent-%COMP%], 
-.zoom[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.layer[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 99px;
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  font: inherit;
-  cursor: pointer;
-  transition: background-color 150ms var(--%NS%ease);
-}
-
-.layer[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.layer[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-
-.layer[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  width: 12px;
-  height: 12px;
-  border: 1.5px solid var(--%NS%control-border);
-  border-radius: 3px;
-}
-
-.layer[aria-pressed=true][_ngcontent-%COMP%]   .check[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  box-shadow: inset 0 0 0 2px var(--%NS%surface);
-}
-
-.badge[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-variant-numeric: tabular-nums;
-}
-
-.small[_ngcontent-%COMP%], 
-.primary[_ngcontent-%COMP%] {
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.small[_ngcontent-%COMP%]:disabled {
-  color: var(--%NS%text-3);
-  cursor: default;
-}
-
-.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-  font-weight: 600;
-}
-
-.primary[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%accent-hover);
-}
-
-.small[_ngcontent-%COMP%]:focus-visible, 
-.primary[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.state[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-}
-
-.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.chart-card[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  margin: 0 0 12px;
-  padding: 10px 12px;
-}
-
-.chart-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 12px;
-  align-items: baseline;
-  justify-content: space-between;
-  margin: 0 0 8px;
-  font-size: 12px;
-}
-
-.chart[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 8px;
-}
-
-.lane-labels[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.lane-labels[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
-  height: 24px;
-  color: var(--%NS%text-2);
-  font-size: 11.5px;
-  line-height: 24px;
-  white-space: nowrap;
-}
-
-.tracks[_ngcontent-%COMP%] {
-  position: relative;
-  min-width: 0;
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  cursor: crosshair;
-  touch-action: none;
-  user-select: none;
-}
-
-.tracks[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.lane-line[_ngcontent-%COMP%] {
-  stroke: var(--%NS%border);
-  stroke-width: 1;
-  vector-effect: non-scaling-stroke;
-}
-
-
-.mark[_ngcontent-%COMP%] {
-  fill: var(--%NS%text-2);
-}
-
-.mark[data-tone=warn][_ngcontent-%COMP%] {
-  fill: var(--%NS%warn);
-}
-
-.mark[data-tone=danger][_ngcontent-%COMP%] {
-  fill: var(--%NS%danger);
-}
-
-.selected-mark[_ngcontent-%COMP%] {
-  fill: none;
-  stroke: var(--%NS%text-strong);
-  stroke-width: 2;
-  vector-effect: non-scaling-stroke;
-}
-
-.brush[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border: 1px solid var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  pointer-events: none;
-}
-
-.axis[_ngcontent-%COMP%] {
-  display: flex;
-  justify-content: space-between;
-  margin: 4px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 6px 0 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.split[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
-  gap: 12px;
-  align-items: start;
-}
-
-@media (max-width: 880px) {
-  .split[_ngcontent-%COMP%] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-.events[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], 
-.detail-panel[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-}
-
-.note[_ngcontent-%COMP%] {
-  margin: 0 0 8px;
-  padding: 8px 12px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.rows[_ngcontent-%COMP%] {
-  display: grid;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  overflow: hidden;
-}
-
-.rows[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
-  border-top: 1px solid var(--%NS%border);
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px 10px;
-  align-items: baseline;
-  width: 100%;
-  min-width: 0;
-  padding: 6px 10px;
-  border: 0;
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.row[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-}
-
-.row.selected[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  box-shadow: inset 3px 0 0 var(--%NS%accent);
-}
-
-.row[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.when[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-.chip[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: 99px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: var(--%NS%border);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-2);
-}
-
-.chip[data-tone=warn][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
-  color: var(--%NS%warn-text);
-}
-
-.chip[data-tone=danger][_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-}
-
-.title[_ngcontent-%COMP%] {
-  flex: 1 1 200px;
-  min-width: 0;
-  color: var(--%NS%text-strong);
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.detail[_ngcontent-%COMP%], 
-.page[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.detail-panel[_ngcontent-%COMP%] {
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  position: sticky;
-  top: 64px;
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-  padding: 12px;
-}
-
-.detail-title[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-strong);
-  font-family: var(--%NS%font-mono);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
-dl[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 4px 12px;
-  margin: 0;
-}
-
-dt[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-dd[_ngcontent-%COMP%] {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-.mono[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-  font-size: 12px;
-}
-
-.detail-panel[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .layer[_ngcontent-%COMP%] {
-    transition: none;
-  }
-}`]})};function c_e(e){let t=e===`light`?`#ffffff`:`#0b0b0e`,n=e===`light`?`#92400e`:`#f5a524`;return`
-  .devframes-dock-entry button {
-    transition: background-color 0.2s, transform 0.3s;
-  }
-  /* Dim the icon of an inactive dock, never its badge, so the count keeps
-     its contrast. hub-ui's own dim classes would fade the whole button. */
-  .devframes-dock-entry button.op50,
-  .devframes-dock-entry button.saturate-0 {
-    opacity: 1;
-    filter: none;
-  }
-  .devframes-dock-entry button > * {
-    transition: opacity 0.2s, filter 0.2s;
-  }
-  .devframes-dock-entry button:not(.scale-120) > :not(.absolute) {
-    opacity: 0.45;
-    filter: saturate(0);
-  }
-  .devframes-dock-entry button:not(.scale-120):hover > :not(.absolute),
-  .devframes-dock-entry button:not(.scale-120):focus-visible > :not(.absolute) {
-    opacity: 1;
-    filter: none;
-  }
-  /* hub-ui's badge palette (blue-500 and red-500 on a pale tint) is below
-     4.5:1, and it sets the colors inline, hence the attribute selectors and
-     !important. blue-600 and red-600 with white text pass. */
-  .devframes-dock-entry .absolute[style*="59, 130, 246"] {
-    background-color: #2563eb !important;
-    color: #ffffff !important;
-  }
-  .devframes-dock-entry .absolute[style*="239, 68, 68"] {
-    background-color: #dc2626 !important;
-    color: #ffffff !important;
-  }
-  /* The group sidebar (the tools of the open group) fades a whole inactive
-     button with op60, badge included, and draws every badge bg-gray-6
-     whatever its variant. Fade the icon only: white on bg-gray-6 (#4b5563)
-     is 7.6:1. The sidebar drops the variant, so the colour comes from the
-     title Pangular gives a dock with a badge, "Angular (2 new, with errors)",
-     which hub-ui puts in aria-label: blue-600 for new items, red-600 with
-     errors or warnings, as on the rail. Other badges stay grey. */
-  .devframes-group-sidebar button.op60 {
-    opacity: 1;
-  }
-  .devframes-group-sidebar button > * {
-    transition: opacity 0.2s, filter 0.2s;
-  }
-  .devframes-group-sidebar button.op60 > :not(.absolute) {
-    opacity: 0.6;
-  }
-  .devframes-group-sidebar button.op60:hover > :not(.absolute),
-  .devframes-group-sidebar button.op60:focus-visible > :not(.absolute) {
-    opacity: 1;
-  }
-  .devframes-group-sidebar .absolute.bg-gray-6 {
-    background-color: #4b5563;
-    color: #ffffff;
-  }
-  .devframes-group-sidebar button[aria-label$=" new)"] > .absolute {
-    background-color: #2563eb;
-  }
-  .devframes-group-sidebar button[aria-label$=" new, with errors)"] > .absolute {
-    background-color: #dc2626;
-  }
-  .devframes-group-sidebar button[aria-label$=" new, with warnings)"] > .absolute {
-    background-color: #dc2626;
-  }
-  .devframes-group-sidebar button:focus-visible {
-    outline: 2px solid ${n};
-    outline-offset: 2px;
-  }
-  .devframes-dock-entry button:focus-visible {
-    outline: 2px solid ${n};
-    outline-offset: 2px;
-  }
-  .devframes-dock-entry button.scale-120 {
-    transform: none;
-    background: ${e===`light`?`rgba(146, 64, 14, 0.12)`:`rgba(245, 165, 36, 0.16)`};
-    box-shadow: inset 0 0 0 1px ${e===`light`?`rgba(146, 64, 14, 0.50)`:`rgba(245, 165, 36, 0.60)`};
-  }
-  iframe {
-    background: ${t};
-    color-scheme: ${e};
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .devframes-dock-entry button,
-    .devframes-dock-entry button > *,
-    .devframes-group-sidebar button > * {
-      transition: none;
-    }
-  }
-`}var z5=new Map;function B5(e,t=`dark`,n=50){let r=e?.querySelector(`devframes-dock-standalone`)?.shadowRoot;if(r){if(e){let t=z5.get(e);t!==void 0&&(clearTimeout(t),z5.delete(e))}let n=r.querySelector(`style[data-pangular]`);n||(n=e.createElement(`style`),n.dataset.pangular=``,r.append(n)),n.textContent=c_e(t);return}if(n>0&&e){let r=z5.get(e);r!==void 0&&clearTimeout(r);let i=setTimeout(()=>{z5.delete(e),B5(e,t,n-1)},100);z5.set(e,i)}}var V5=`pangular-pref`,H5={order:[],hidden:[],pinned:[]};function U5(e){try{return localStorage.getItem(`${V5}:${e}`)}catch{return null}}function W5(e,t){try{t===null?localStorage.removeItem(`${V5}:${e}`):localStorage.setItem(`${V5}:${e}`,t)}catch{}}function l_e(){let e=U5(`theme`);return e===`light`||e===`dark`?e:`system`}function u_e(e){W5(`theme`,e===`system`?null:e)}function G5(e){if(!Array.isArray(e))return[];let t=e.filter(e=>typeof e==`string`&&e.length>0&&e.length<=40);return[...new Set(t)].slice(0,50)}function d_e(){let e=U5(`tabs`);if(!e)return H5;try{let t=JSON.parse(e);if(!t||typeof t!=`object`||Array.isArray(t))return H5;let n=t;return{order:G5(n.order),hidden:G5(n.hidden),pinned:G5(n.pinned)}}catch{return H5}}function f_e(e){W5(`tabs`,!e.order.length&&!e.hidden.length&&!e.pinned.length?null:JSON.stringify(e))}function p_e(){return U5(`passive`)===`true`}function m_e(e){W5(`passive`,e?`true`:null)}function h_e(){return U5(`pill`)===`true`}function g_e(e){W5(`pill`,e?`true`:null)}function K5(e,t){let n=n=>{let r=t.order.indexOf(n);return r<0?t.order.length+e.indexOf(n):r},r=[...e].sort((e,t)=>n(e)-n(t));return[...r.filter(e=>t.pinned.includes(e)),...r.filter(e=>!t.pinned.includes(e))]}function __e(e,t,n){let r=new Map(e.map(e=>[e.id,e]));return K5(e.map(e=>e.id),t).filter(e=>e===n||t.pinned.includes(e)||!t.hidden.includes(e)).map(e=>r.get(e))}function q5(e,t,n,r){let i=K5(e,t),a=i.indexOf(n),o=a+r;if(a<0||o<0||o>=i.length)return t;let s=t.pinned.includes(n);if(t.pinned.includes(i[o])!==s)return t;let c=[...i];return[c[a],c[o]]=[c[o],c[a]],{...t,order:c}}function v_e(e,t,n){let r=e.hidden.filter(e=>e!==t);return{...e,hidden:n?[...r,t]:r,pinned:n?e.pinned.filter(e=>e!==t):e.pinned}}function y_e(e,t,n,r){let i=t.pinned.filter(e=>e!==n);return{order:K5(e,t),pinned:r?[...i,n]:i,hidden:r?t.hidden.filter(e=>e!==n):t.hidden}}function J5(){try{let e=navigator;return/mac|iphone|ipad|ipod/i.test(e.userAgentData?.platform??e.platform??``)}catch{return!1}}function b_e(e=window){try{for(let t=e;t!==t.parent;t=t.parent){let e=t.frameElement?.getRootNode();if(e&&`host`in e&&e.host?.id===`pangular-popup-root`)return!0}}catch{}return!1}var x_e=`pangular-inspector-`;function Y5(e=window){try{let t=e.top??e;return t.name.startsWith(x_e)&&t.opener&&t.opener!==t?t.opener:null}catch{return null}}function S_e(e=window){return X5({type:`pangular:popup-return`},e)}function X5(e,t=window){let n=Y5(t);if(!n)return!1;let r;try{r=n.location.origin}catch{try{r=new URL(t.document.referrer).origin}catch{r=void 0}}if(!r||r===`null`)return!1;try{return n.postMessage(e,r),!0}catch{return!1}}var C_e=class e{current=T(`dark`);preference=T(l_e());source=`dark`;sourceAttr=!1;constructor(){let e=x(Ss),t=T_e(),n=document.documentElement.dataset.theme,r=n===`light`||n===`dark`;if(n===`light`||n===`dark`)this.fromSource(n,!0);else if(t)r=!0,this.fromSource(Z5(t),!0);else{let t=w_e();if(t){this.fromSource(t.matches?`light`:`dark`,!1);let n=e=>{r||this.fromSource(e.matches?`light`:`dark`,!1)};t.addEventListener(`change`,n),e.onDestroy(()=>t.removeEventListener(`change`,n))}else this.resolve()}let i;try{i=new BroadcastChannel(`pangular:theme`)}catch{}E(()=>{let e=this.current();try{i?.postMessage(e)}catch{}for(let{win:t,origin:n}of Q5())try{t.postMessage({type:`pangular:theme-change`,theme:e},n)}catch{}});let a=e=>{if(e.source!==window.parent)return;let t=e.data;t?.type===`pangular:theme-change`&&(r=!0,this.fromSource(t.theme===`dark`?`dark`:`light`,!0))};window.addEventListener(`message`,a);let o;t&&(o=new MutationObserver(()=>this.fromSource(Z5(t),!0)),o.observe(t,{attributes:!0,attributeFilter:[`class`]})),e.onDestroy(()=>{window.removeEventListener(`message`,a),o?.disconnect(),i?.close()})}setPreference(e){this.preference.set(e),u_e(e),this.resolve()}fromSource(e,t){this.source=e,this.sourceAttr=t,this.resolve()}resolve(){let e=this.preference(),t=e===`system`?this.source:e;this.current.set(t);let n=document.documentElement;e!==`system`||this.sourceAttr?n.dataset.theme=t:delete n.dataset.theme}static ɵfac=function(t){return new(t||e)};static ɵprov=kl({token:e,factory:e.ɵfac})};function w_e(){try{return window.matchMedia?.(`(prefers-color-scheme: light)`)??null}catch{return null}}function Z5(e){return e.classList.contains(`dark`)?`dark`:`light`}function T_e(){try{return window.frameElement?.closest(`.devframes-color-root`)??null}catch{return null}}function Q5(e=window){let t=[],n;try{n=e.location.ancestorOrigins}catch{}let r=e;try{for(let i=0;r!==r.parent;i++){r=r.parent;let a=E_e(e,r,i,n);a&&t.push({win:r,origin:a})}}catch{}return t}function E_e(e,t,n,r){let i=e=>e&&e!==`null`?e:void 0,a=i(r?.item(n));if(a)return a;try{let e=i(t.location.origin);if(e)return e}catch{}if(!(n>0))try{return i(new URL(e.document.referrer).origin)}catch{return}}var D_e=`__DEVFRAME_HUB_CLIENT_CONTEXT__`;function $5(){try{return window.parent===window?void 0:window.parent[D_e]}catch{return}}function e7(e,t,n=50){let r=$5();if(!r){if(n<=0||window.parent===window)return()=>{};let r=()=>{},i=setTimeout(()=>r=e7(e,t,n-1),100);return()=>{clearTimeout(i),r()}}let i=e.map(e=>r.docks.getStateById(BC(e))?.events.on(`entry:activated`,()=>t(e))??(()=>{})),a=r.docks.selectedId,o=e.find(e=>BC(e)===a);return o&&t(o),()=>i.forEach(e=>e())}function t7(){return!!$5()}async function n7(e){let t=$5();if(!t)return!1;try{return await t.docks.switchEntry(BC(e))}catch{return!1}}function O_e(){let e=$5()?.commands?.openPalette;if(typeof e!=`function`)return!1;try{return e(),!0}catch{return!1}}function k_e(e,t){let n=new URL(e);return n.searchParams.delete(`view`),n.hash=t?`tab=${t}`:``,n.pathname+n.search+n.hash}function A_e(e){return e.button===0&&!e.metaKey&&!e.ctrlKey&&!e.shiftKey&&!e.altKey}var r7=`pangular-tab`;function i7(e,t,n){let r=new URLSearchParams(e.replace(/^#/,``)).get(`tab`)||t;return n.find(e=>e===r)}function a7(e){try{return sessionStorage.getItem(`${r7}:${e}`)}catch{return null}}function j_e(e,t){try{sessionStorage.setItem(`${r7}:${e}`,t)}catch{}}function M_e(e,t){try{return new URL(e,t.href).origin===t.origin}catch{return!1}}function N_e(e,t){if(t.protocol!==`chrome-extension:`)return!1;try{let{protocol:t}=new URL(e);return t===`http:`||t===`https:`}catch{return!1}}function P_e(e=location){let t=new URLSearchParams(e.search).get(`baseURL`);if(t&&(M_e(t,e)||N_e(t,e)))return t;if(!(e.pathname.includes(`__pangular`)||e.pathname.includes(`__devframes/`)))return[`/__pangular/`,`./`]}var o7=`__DEVFRAME_CONNECTION_AUTH_TOKEN__`,F_e=`pangular-auth-token:`,I_e=`devframe-auth`,L_e={token:void 0,remember:()=>{}};function R_e(e,t=location){if(typeof e!=`string`)return null;try{let n=new URL(e,t.href).origin;return n===t.origin||n===`null`?null:n}catch{return null}}function z_e(e,t=location,n=V_e(),r=globalThis){let i=R_e(e,t);if(!i||(B_e(r),!n))return L_e;let a=F_e+i;try{n.removeItem(o7)}catch{}delete globalThis[o7];let o;try{o=n.getItem(a)||void 0}catch{o=void 0}return{get token(){return o},remember(e){try{if(n.removeItem(o7),!e||e===o)return;o=e,n.setItem(a,e)}catch{}}}}var s7=new WeakSet;function B_e(e=globalThis){let t=e.BroadcastChannel;if(typeof t==`function`&&!s7.has(t)){let n=class extends t{constructor(e){if(String(e)===I_e)throw Error(`The devframe-auth channel is off in a panel on another origin.`);super(e)}};s7.add(n),e.BroadcastChannel=n}let n=e.Storage?.prototype;if(n&&!s7.has(n)){s7.add(n);let{getItem:e,setItem:t}=n;n.getItem=function(t){return String(t)===o7?null:e.call(this,t)},n.setItem=function(e,n){String(e)!==o7&&t.call(this,e,n)}}}function V_e(){try{return typeof localStorage>`u`?null:localStorage}catch{return null}}var c7=(()=>{class e{_renderer;_elementRef;onChange=e=>{};onTouched=()=>{};constructor(e,t){this._renderer=e,this._elementRef=t}setProperty(e,t){this._renderer.setProperty(this._elementRef.nativeElement,e,t)}registerOnTouched(e){this.onTouched=e}registerOnChange(e){this.onChange=e}setDisabledState(e){this.setProperty(`disabled`,e)}static ɵfac=function(t){return new(t||e)(Hp(sp),Hp(Ml))};static ɵdir=dh({type:e})}return e})(),H_e=(()=>{class e extends c7{static ɵfac=(()=>{let t;return function(n){return(t||=Tl(e))(n||e)}})();static ɵdir=dh({type:e,features:[xh]})}return e})(),l7=new Di(``),U_e={provide:l7,useExisting:_i(()=>u7),multi:!0};function W_e(){let e=wv()?wv().getUserAgent():``;return/android (\d+)/.test(e.toLowerCase())}var G_e=new Di(``),u7=(()=>{class e extends c7{_compositionMode;_composing=!1;constructor(e,t,n){super(e,t),this._compositionMode=n,this._compositionMode??=!W_e()}writeValue(e){let t=e??``;this.setProperty(`value`,t)}_handleInput(e){(!this._compositionMode||this._compositionMode&&!this._composing)&&this.onChange(e)}_compositionStart(){this._composing=!0}_compositionEnd(e){this._composing=!1,this._compositionMode&&this.onChange(e)}static ɵfac=function(t){return new(t||e)(Hp(sp),Hp(Ml),Hp(G_e,8))};static ɵdir=dh({type:e,selectors:[[`input`,`formControlName`,``,3,`type`,`checkbox`,3,`ngNoCva`,``],[`textarea`,`formControlName`,``,3,`ngNoCva`,``],[`input`,`formControl`,``,3,`type`,`checkbox`,3,`ngNoCva`,``],[`textarea`,`formControl`,``,3,`ngNoCva`,``],[`input`,`ngModel`,``,3,`type`,`checkbox`,3,`ngNoCva`,``],[`textarea`,`ngModel`,``,3,`ngNoCva`,``],[``,`ngDefaultControl`,``]],hostBindings:function(e,t){e&1&&H(`input`,function(e){return t._handleInput(e.target.value)})(`blur`,function(){return t.onTouched()})(`compositionstart`,function(){return t._compositionStart()})(`compositionend`,function(e){return t._compositionEnd(e.target.value)})},standalone:!1,features:[W_([U_e]),xh]})}return e})();function d7(e){return e==null||f7(e)===0}function f7(e){return e==null?null:Array.isArray(e)||typeof e==`string`?e.length:e instanceof Set?e.size:null}var p7=new Di(``),K_e=/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,m7=class{static min(e){return q_e(e)}static max(e){return J_e(e)}static required(e){return h7(e)}static requiredTrue(e){return Y_e(e)}static email(e){return X_e(e)}static minLength(e){return Z_e(e)}static maxLength(e){return Q_e(e)}static pattern(e){return $_e(e)}static nullValidator(e){return g7()}static compose(e){return S7(e)}static composeAsync(e){return w7(e)}};function q_e(e){return t=>{if(t.value==null||e==null)return null;let n=parseFloat(t.value);return!isNaN(n)&&n<e?{min:{min:e,actual:t.value}}:null}}function J_e(e){return t=>{if(t.value==null||e==null)return null;let n=parseFloat(t.value);return!isNaN(n)&&n>e?{max:{max:e,actual:t.value}}:null}}function h7(e){return d7(e.value)?{required:!0}:null}function Y_e(e){return e.value===!0?null:{required:!0}}function X_e(e){return d7(e.value)||K_e.test(e.value)?null:{email:!0}}function Z_e(e){return t=>{let n=t.value?.length??f7(t.value);return n===null||n===0?null:n<e?{minlength:{requiredLength:e,actualLength:n}}:null}}function Q_e(e){return t=>{let n=t.value?.length??f7(t.value);return n!==null&&n>e?{maxlength:{requiredLength:e,actualLength:n}}:null}}function $_e(e){if(!e)return g7;let t,n;return typeof e==`string`?(n=``,e.charAt(0)!==`^`&&(n+=`^`),n+=e,e.charAt(e.length-1)!==`$`&&(n+=`$`),t=new RegExp(n)):(n=e.toString(),t=e),e=>{if(d7(e.value))return null;let r=e.value;return t.test(r)?null:{pattern:{requiredPattern:n,actualValue:r}}}}function g7(e){return null}function _7(e){return e!=null}function v7(e){return nh(e)?kee(e):e}function y7(e){let t={};return e.forEach(e=>{t=e==null?t:{...t,...e}}),Object.keys(t).length===0?null:t}function b7(e,t){return t.map(t=>t(e))}function eve(e){return!e.validate}function x7(e){return e.map(e=>eve(e)?e:t=>e.validate(t))}function S7(e){if(!e)return null;let t=e.filter(_7);return t.length==0?null:function(e){return y7(b7(e,t))}}function C7(e){return e==null?null:S7(x7(e))}function w7(e){if(!e)return null;let t=e.filter(_7);return t.length==0?null:function(e){return Bee(b7(e,t).map(v7)).pipe(ui(y7))}}function T7(e){return e==null?null:w7(x7(e))}function E7(e){return e?Array.isArray(e)?e:[e]:[]}function D7(e,t){return Array.isArray(e)?e.includes(t):e===t}function O7(e,t){let n=E7(t);return E7(e).forEach(e=>{D7(n,e)||n.push(e)}),n}function k7(e,t){return E7(t).filter(t=>!D7(e,t))}var tve=class{get value(){return this.control?this.control.value:null}get valid(){return this.control?this.control.valid:null}get invalid(){return this.control?this.control.invalid:null}get pending(){return this.control?this.control.pending:null}get disabled(){return this.control?this.control.disabled:null}get enabled(){return this.control?this.control.enabled:null}get errors(){return this.control?this.control.errors:null}get pristine(){return this.control?this.control.pristine:null}get dirty(){return this.control?this.control.dirty:null}get touched(){return this.control?this.control.touched:null}get status(){return this.control?this.control.status:null}get untouched(){return this.control?this.control.untouched:null}get statusChanges(){return this.control?this.control.statusChanges:null}get valueChanges(){return this.control?this.control.valueChanges:null}get path(){return null}_composedValidatorFn;_composedAsyncValidatorFn;_rawValidators=[];_rawAsyncValidators=[];_setValidators(e){this._rawValidators=e||[],this._composedValidatorFn=C7(this._rawValidators)}_setAsyncValidators(e){this._rawAsyncValidators=e||[],this._composedAsyncValidatorFn=T7(this._rawAsyncValidators)}get validator(){return this._composedValidatorFn||null}get asyncValidator(){return this._composedAsyncValidatorFn||null}_onDestroyCallbacks=[];_registerOnDestroy(e){this._onDestroyCallbacks.push(e)}_invokeOnDestroyCallbacks(){this._onDestroyCallbacks.forEach(e=>e()),this._onDestroyCallbacks=[]}reset(e=void 0){this.control?.reset(e)}hasError(e,t){return this.control?this.control.hasError(e,t):!1}getError(e,t){return this.control?this.control.getError(e,t):null}},A7=`VALID`,j7=`INVALID`,M7=`PENDING`,N7=`DISABLED`,P7=class{},F7=class extends P7{value;source;constructor(e,t){super(),this.value=e,this.source=t}},I7=class extends P7{pristine;source;constructor(e,t){super(),this.pristine=e,this.source=t}},L7=class extends P7{touched;source;constructor(e,t){super(),this.touched=e,this.source=t}},R7=class extends P7{status;source;constructor(e,t){super(),this.status=e,this.source=t}},z7=class extends P7{source;constructor(e){super(),this.source=e}};function nve(e){return Array.isArray(e)?C7(e):e||null}function rve(e){return Array.isArray(e)?T7(e):e||null}function ive(e){return e!=null&&!Array.isArray(e)&&typeof e==`object`}var ave=class{_pendingDirty=!1;_hasOwnPendingAsyncValidator=null;_pendingTouched=!1;_onCollectionChange=()=>{};_updateOn;_hasRequired=T(!1);_parent=null;_asyncValidationSubscription;_composedValidatorFn;_composedAsyncValidatorFn;_rawValidators;_rawAsyncValidators;value;constructor(e,t){this._assignValidators(e),this._assignAsyncValidators(t)}get validator(){return this._composedValidatorFn}set validator(e){this._rawValidators=this._composedValidatorFn=e,this._updateHasRequiredValidator()}get asyncValidator(){return this._composedAsyncValidatorFn}set asyncValidator(e){this._rawAsyncValidators=this._composedAsyncValidatorFn=e}get parent(){return this._parent}get status(){return Z(this.statusReactive)}set status(e){Z(()=>this.statusReactive.set(e))}_status=X(()=>this.statusReactive());statusReactive=T(void 0);get valid(){return this.status===A7}get invalid(){return this.status===j7}get pending(){return this.status===M7}get disabled(){return this.status===N7}get enabled(){return this.status!==N7}errors;get pristine(){return Z(this.pristineReactive)}set pristine(e){Z(()=>this.pristineReactive.set(e))}_pristine=X(()=>this.pristineReactive());pristineReactive=T(!0);get dirty(){return!this.pristine}get touched(){return Z(this.touchedReactive)}set touched(e){Z(()=>this.touchedReactive.set(e))}_touched=X(()=>this.touchedReactive());touchedReactive=T(!1);get untouched(){return!this.touched}_events=new Ur;events=this._events.asObservable();valueChanges;statusChanges;get updateOn(){return this._updateOn?this._updateOn:this.parent?this.parent.updateOn:`change`}setValidators(e){this._assignValidators(e)}setAsyncValidators(e){this._assignAsyncValidators(e)}addValidators(e){this.setValidators(O7(e,this._rawValidators))}addAsyncValidators(e){this.setAsyncValidators(O7(e,this._rawAsyncValidators))}removeValidators(e){this.setValidators(k7(e,this._rawValidators))}removeAsyncValidators(e){this.setAsyncValidators(k7(e,this._rawAsyncValidators))}hasValidator(e){return D7(this._rawValidators,e)}hasAsyncValidator(e){return D7(this._rawAsyncValidators,e)}clearValidators(){this.validator=null}clearAsyncValidators(){this.asyncValidator=null}markAsTouched(e={}){let t=this.touched===!1;this.touched=!0;let n=e.sourceControl??this;e.onlySelf||this._parent?.markAsTouched({...e,sourceControl:n}),t&&e.emitEvent!==!1&&this._events.next(new L7(!0,n))}markAllAsDirty(e={}){this.markAsDirty({onlySelf:!0,emitEvent:e.emitEvent,sourceControl:this}),this._forEachChild(t=>t.markAllAsDirty(e))}markAllAsTouched(e={}){this.markAsTouched({onlySelf:!0,emitEvent:e.emitEvent,sourceControl:this}),this._forEachChild(t=>t.markAllAsTouched(e))}markAsUntouched(e={}){let t=this.touched===!0;this.touched=!1,this._pendingTouched=!1;let n=e.sourceControl??this;this._forEachChild(t=>{t.markAsUntouched({onlySelf:!0,emitEvent:e.emitEvent,sourceControl:n})}),e.onlySelf||this._parent?._updateTouched(e,n),t&&e.emitEvent!==!1&&this._events.next(new L7(!1,n))}markAsDirty(e={}){let t=this.pristine===!0;this.pristine=!1;let n=e.sourceControl??this;e.onlySelf||this._parent?.markAsDirty({...e,sourceControl:n}),t&&e.emitEvent!==!1&&this._events.next(new I7(!1,n))}markAsPristine(e={}){let t=this.pristine===!1;this.pristine=!0,this._pendingDirty=!1;let n=e.sourceControl??this;this._forEachChild(t=>{t.markAsPristine({onlySelf:!0,emitEvent:e.emitEvent})}),e.onlySelf||this._parent?._updatePristine(e,n),t&&e.emitEvent!==!1&&this._events.next(new I7(!0,n))}markAsPending(e={}){this.status=M7;let t=e.sourceControl??this;e.emitEvent!==!1&&(this._events.next(new R7(this.status,t)),this.statusChanges.emit(this.status)),e.onlySelf||this._parent?.markAsPending({...e,sourceControl:t})}disable(e={}){let t=this._parentMarkedDirty(e.onlySelf);this.status=N7,this.errors=null,this._forEachChild(t=>{t.disable({...e,onlySelf:!0})}),this._updateValue();let n=e.sourceControl??this;e.emitEvent!==!1&&(this._events.next(new F7(this.value,n)),this._events.next(new R7(this.status,n)),this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),this._updateAncestors({...e,skipPristineCheck:t},this),this._onDisabledChange.forEach(e=>e(!0))}enable(e={}){let t=this._parentMarkedDirty(e.onlySelf);this.status=A7,this._forEachChild(t=>{t.enable({...e,onlySelf:!0})}),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent}),this._updateAncestors({...e,skipPristineCheck:t},this),this._onDisabledChange.forEach(e=>e(!1))}_updateAncestors(e,t){e.onlySelf||(this._parent?.updateValueAndValidity(e),e.skipPristineCheck||this._parent?._updatePristine({},t),this._parent?._updateTouched({},t))}setParent(e){this._parent=e}getRawValue(){return this.value}updateValueAndValidity(e={}){if(this._setInitialStatus(),this._updateValue(),this.enabled){let t=this._cancelExistingSubscription();this.errors=this._runValidator(),this.status=this._calculateStatus(),(this.status===A7||this.status===M7)&&this._runAsyncValidator(t,e.emitEvent)}let t=e.sourceControl??this;e.emitEvent!==!1&&(this._events.next(new F7(this.value,t)),this._events.next(new R7(this.status,t)),this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),e.onlySelf||this._parent?.updateValueAndValidity({...e,sourceControl:t})}_updateTreeValidity(e={emitEvent:!0}){this._forEachChild(t=>t._updateTreeValidity(e)),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent})}_setInitialStatus(){this.status=this._allControlsDisabled()?N7:A7}_runValidator(){return this.validator?this.validator(this):null}_runAsyncValidator(e,t){if(this.asyncValidator){this.status=M7,this._hasOwnPendingAsyncValidator={emitEvent:t!==!1,shouldHaveEmitted:e!==!1};let n=v7(this.asyncValidator(this));this._asyncValidationSubscription=n.subscribe(n=>{this._hasOwnPendingAsyncValidator=null,this.setErrors(n,{emitEvent:t,shouldHaveEmitted:e})})}}_cancelExistingSubscription(){if(this._asyncValidationSubscription){this._asyncValidationSubscription.unsubscribe();let e=(this._hasOwnPendingAsyncValidator?.emitEvent||this._hasOwnPendingAsyncValidator?.shouldHaveEmitted)??!1;return this._hasOwnPendingAsyncValidator=null,e}return!1}setErrors(e,t={}){this.errors=e,this._updateControlsErrors(t.emitEvent!==!1,this,t.shouldHaveEmitted)}get(e){let t=e;return t==null||(Array.isArray(t)||(t=t.split(`.`)),t.length===0)?null:t.reduce((e,t)=>e&&e._find(t),this)}getError(e,t){let n=t?this.get(t):this;return n?.errors?n.errors[e]:null}hasError(e,t){return!!this.getError(e,t)}get root(){let e=this;for(;e._parent;)e=e._parent;return e}_updateControlsErrors(e,t,n){this.status=this._calculateStatus(),e&&this.statusChanges.emit(this.status),(e||n)&&this._events.next(new R7(this.status,t)),this._parent&&this._parent._updateControlsErrors(e,t,n)}_initObservables(){this.valueChanges=new Ds,this.statusChanges=new Ds}_calculateStatus(){return this._allControlsDisabled()?N7:this.errors?j7:this._hasOwnPendingAsyncValidator||this._anyControlsHaveStatus(M7)?M7:this._anyControlsHaveStatus(j7)?j7:A7}_anyControlsHaveStatus(e){return this._anyControls(t=>t.status===e)}_anyControlsDirty(){return this._anyControls(e=>e.dirty)}_anyControlsTouched(){return this._anyControls(e=>e.touched)}_updatePristine(e,t){let n=!this._anyControlsDirty(),r=this.pristine!==n;this.pristine=n,e.onlySelf||this._parent?._updatePristine(e,t),r&&this._events.next(new I7(this.pristine,t))}_updateTouched(e={},t){this.touched=this._anyControlsTouched(),this._events.next(new L7(this.touched,t)),e.onlySelf||this._parent?._updateTouched(e,t)}_onDisabledChange=[];_registerOnCollectionChange(e){this._onCollectionChange=e}_setUpdateStrategy(e){ive(e)&&e.updateOn!=null&&(this._updateOn=e.updateOn)}_parentMarkedDirty(e){return!e&&!!this._parent?.dirty&&!this._parent._anyControlsDirty()}_find(e){return null}_assignValidators(e){this._rawValidators=Array.isArray(e)?e.slice():e,this._composedValidatorFn=nve(this._rawValidators),this._updateHasRequiredValidator()}_assignAsyncValidators(e){this._rawAsyncValidators=Array.isArray(e)?e.slice():e,this._composedAsyncValidatorFn=rve(this._rawAsyncValidators)}_updateHasRequiredValidator(){Z(()=>this._hasRequired.set(this.hasValidator(m7.required)))}};function B7(e){return e.tagName===`INPUT`||e.tagName===`SELECT`||e.tagName===`TEXTAREA`}function V7(e){if(e.tagName!==`INPUT`)return!1;let t=e.type;return t===`number`||t===`range`||t===`date`||t===`month`}function ove(e){return e.tagName===`INPUT`||e.tagName===`TEXTAREA`}function H7(e,t,n,r){switch(n){case`name`:e.setAttribute(t,n,r);break;case`disabled`:case`readonly`:case`required`:r?e.setAttribute(t,n,``):e.removeAttribute(t,n);break;case`max`:case`min`:case`minLength`:case`maxLength`:r===void 0?e.removeAttribute(t,n):e.setAttribute(t,n,r.toString())}}var sve=class{kind;context;control;message;constructor({kind:e,context:t,control:n}){this.kind=e,this.context=t,this.control=n}},cve=(()=>{class e{_validator=g7;_onChange;_enabled;ngOnChanges(e){if(this.inputName in e){let t=this.normalizeInput(e[this.inputName].currentValue);this._enabled=this.enabled(t),this._validator=this._enabled?this.createValidator(t):g7,this._onChange?.()}}validate(e){return this._validator(e)}registerOnValidatorChange(e){this._onChange=e}enabled(e){return e!=null}static ɵfac=function(t){return new(t||e)};static ɵdir=dh({type:e,features:[wc]})}return e})(),lve={provide:p7,useExisting:_i(()=>U7),multi:!0},U7=(()=>{class e extends cve{required;inputName=`required`;normalizeInput=yv;createValidator=e=>h7;enabled(e){return e}static ɵfac=(()=>{let t;return function(n){return(t||=Tl(e))(n||e)}})();static ɵdir=dh({type:e,selectors:[[``,`required`,``,`formControlName`,``,3,`type`,`checkbox`],[``,`required`,``,`formControl`,``,3,`type`,`checkbox`],[``,`required`,``,`ngModel`,``,3,`type`,`checkbox`]],hostVars:1,hostBindings:function(e,t){e&2&&k(`required`,t._enabled?``:null)},inputs:{required:`required`},standalone:!1,features:[W_([lve]),xh]})}return e})(),uve=new Di(``);function dve(e){return Object.getPrototypeOf(e.constructor)===H_e}function W7(e,t){if(!t)return null;let n,r,i;return t.forEach(e=>{e.constructor===u7?n=e:dve(e)?r=e:i=e}),i||r||n||null}var fve=class extends tve{_parent=null;name=null;valueAccessor=null;isCustomControlBased=!1;userOnReset;resetSubscription;set onReset(e){this.userOnReset=e,this.resetSubscription?.unsubscribe(),this.resetSubscription=void 0,this.control&&(this.resetSubscription=this.control.events.subscribe(e=>{e instanceof z7&&this.control&&this.userOnReset?.(this.control.value)}),this.subscription?.add(this.resetSubscription))}isNativeFormElement=!1;rawValueAccessors;_selectedValueAccessor=null;get selectedValueAccessor(){return this._selectedValueAccessor??=W7(this,this.rawValueAccessors)}parseErrorsValidator=null;renderer;injector;requiredValidatorViaDi;subscription;customControlBindings=null;constructor(e,t,n){super(),this.injector=e,this.renderer=t,this.rawValueAccessors=n,this.injector?.get(Ss)?.onDestroy(()=>{this.removeParseErrorsValidator(this.control),this.subscription?.unsubscribe()})}setupCustomControl(){this.subscription?.unsubscribe();let e=this.injector?.get(hne);if(!this.control||!e)return;let t=e.markForCheck.bind(e);this.subscription=new sr,this.subscription.add(this.control.valueChanges.subscribe(t)),this.subscription.add(this.control.statusChanges.subscribe(t)),this.resetSubscription?.unsubscribe(),this.resetSubscription=void 0,this.userOnReset&&(this.resetSubscription=this.control.events.subscribe(e=>{e instanceof z7&&this.control&&this.userOnReset?.(this.control.value)}),this.subscription.add(this.resetSubscription)),this.parseErrorsValidator&&this.control.addValidators(this.parseErrorsValidator)}ngControlCreate(e){!e.nativeElement.hasAttribute?.(`ngNoCva`)&&(this.rawValueAccessors&&this.rawValueAccessors.length>0||this.valueAccessor!==null)||!e.customControl||(this.isCustomControlBased=!0,e.listenToCustomControlModel(e=>{this.control?.markAsDirty(),this.control?.setValue(e,{emitModelToViewChange:!1}),this.viewToModelUpdate(e)}),e.listenToCustomControlOutput(`touch`,()=>{this.control?.markAsTouched()}),this.customControlBindings={},this.isNativeFormElement=B7(e.nativeElement),this.requiredValidatorViaDi=this._rawValidators.find(e=>e instanceof U7))}ngControlUpdate(e,t){if(!this.isCustomControlBased)return;let n=this.control,r=this.customControlBindings;Object.is(r.value,n.value)||(r.value=n.value,e.setCustomControlModelInput(n.value)),this.bindControlProperty(e,r,`touched`,n.touched),this.bindControlProperty(e,r,`dirty`,n.dirty),this.bindControlProperty(e,r,`valid`,n.valid),this.bindControlProperty(e,r,`invalid`,n.invalid),this.bindControlProperty(e,r,`pending`,n.pending),this.bindControlProperty(e,r,`disabled`,n.disabled),this.shouldBindRequired&&this.bindControlProperty(e,r,`required`,this.isRequired);let i=n.errors;if(r.errors!==i){r.errors=i;let t=this._convertErrors(i);e.setInputOnDirectives(`errors`,t)}}get isRequired(){return(this.requiredValidatorViaDi?._enabled||this.control?._hasRequired())??!1}get shouldBindRequired(){return!0}bindControlProperty(e,t,n,r){if(t[n]===r)return;t[n]=r;let i=e.setInputOnDirectives(n,r);this.isNativeFormElement&&!i&&(n===`disabled`||n===`required`)&&this.renderer&&H7(this.renderer,e.nativeElement,n,r)}_convertErrors(e){if(e===null)return[];let t=this.control;return Object.entries(e).map(([e,n])=>new sve({context:n,kind:e,control:t}))}setParseErrorSource(e){if(e===void 0)return;let t=null,n=X(()=>{let t=e();return t.length===0?null:t.reduce((e,t)=>(e[t.kind]=t,e),{})});this.parseErrorsValidator=(()=>t).bind(this),E(()=>{t=n(),this.control?.updateValueAndValidity({emitEvent:!1})},{injector:this.injector})}removeParseErrorsValidator(e){this.parseErrorsValidator&&(e?.removeValidators(this.parseErrorsValidator),e?.updateValueAndValidity({emitEvent:!1}))}},pve=Symbol(`FIELD_TREE`),G7=0;function mve(){return G7}function K7(e,t){return(...n)=>{try{return G7=t,e(...n)}finally{G7=0}}}function hve(e){return!e}function q7(e){return e}function J7(e){return Array.isArray(e)}function Y7(e){return(typeof e==`object`||typeof e==`function`)&&e!=null}var X7=Symbol(),Z7=Symbol(),Q7=class{predicates;fns=[];constructor(e){this.predicates=e}push(e){this.fns.push(t9(this.predicates,e))}mergeIn(e){let t=this.predicates?e.fns.map(e=>t9(this.predicates,e)):e.fns;this.fns.push(...t)}hasRules(){return this.fns.length>0}},$7=class extends Q7{get defaultValue(){return!1}compute(e){return this.fns.some(t=>{let n=t(e);return n&&n!==Z7})}},e9=class e extends Q7{ignore;static ignoreNull(t){return new e(t,e=>e===null)}constructor(e,t){super(e),this.ignore=t}get defaultValue(){return[]}compute(e){return this.fns.reduce((t,n)=>{let r=n(e);return r===void 0||r===Z7?t:J7(r)?[...t,...this.ignore?r.filter(e=>!this.ignore(e)):r]:this.ignore&&this.ignore(r)?t:[...t,r]},[])}},gve=class extends e9{constructor(e){super(e,void 0)}},_ve=class extends Q7{key;get defaultValue(){return this.key.reducer.getInitial()}constructor(e,t){super(e),this.key=t}compute(e){if(this.fns.length===0)return this.key.reducer.getInitial();let t=this.key.reducer.getInitial();for(let n=0;n<this.fns.length;n++){let r=this.fns[n](e);r!==Z7&&(t=this.key.reducer.reduce(t,r))}return t}};function t9(e,t){return e.length===0?t:n=>{for(let t of e){let e=n.stateOf(t.path),r=Z(e.structure.pathKeys).length-t.depth;for(let t=0;t<r;t++)e=e.structure.parent;if(!t.fn(e.context))return Z7}return t(n)}}var n9=class{predicates;hidden;disabledReasons;readonly;syncErrors;syncTreeErrors;asyncErrors;metadata=new Map;constructor(e){this.predicates=e,this.hidden=new $7(e),this.disabledReasons=new gve(e),this.readonly=new $7(e),this.syncErrors=e9.ignoreNull(e),this.syncTreeErrors=e9.ignoreNull(e),this.asyncErrors=e9.ignoreNull(e)}hasAnyLogic(){return this.hidden.hasRules()||this.disabledReasons.hasRules()||this.readonly.hasRules()||this.syncErrors.hasRules()||this.syncTreeErrors.hasRules()||this.asyncErrors.hasRules()||this.metadata.size>0}hasMetadata(e){return this.metadata.has(e)}hasMetadataKeys(){return this.metadata.size>0}getMetadataKeys(){return this.metadata.keys()}getMetadata(e){return this.metadata.has(e)||this.metadata.set(e,new _ve(this.predicates,e)),this.metadata.get(e)}mergeIn(e){this.hidden.mergeIn(e.hidden),this.disabledReasons.mergeIn(e.disabledReasons),this.readonly.mergeIn(e.readonly),this.syncErrors.mergeIn(e.syncErrors),this.syncTreeErrors.mergeIn(e.syncTreeErrors),this.asyncErrors.mergeIn(e.asyncErrors);for(let t of e.getMetadataKeys()){let n=e.metadata.get(t);this.getMetadata(t).mergeIn(n)}}},r9=class{depth;constructor(e){this.depth=e}build(){return new o9(this,[],0)}},i9=class e extends r9{constructor(e){super(e)}current;all=[];addHiddenRule(e){this.getCurrent().addHiddenRule(e)}addDisabledReasonRule(e){this.getCurrent().addDisabledReasonRule(e)}addReadonlyRule(e){this.getCurrent().addReadonlyRule(e)}addSyncErrorRule(e){this.getCurrent().addSyncErrorRule(e)}addSyncTreeErrorRule(e){this.getCurrent().addSyncTreeErrorRule(e)}addAsyncErrorRule(e){this.getCurrent().addAsyncErrorRule(e)}addMetadataRule(e,t){this.getCurrent().addMetadataRule(e,t)}getChild(e){if(e===X7){let e=this.getCurrent().children;e.size>+!!e.has(X7)&&(this.current=void 0)}return this.getCurrent().getChild(e)}hasLogic(e){return this===e||this.all.some(({builder:t})=>t.hasLogic(e))}hasRules(){return this.all.length>0}anyChildHasLogic(){return this.all.some(({builder:e})=>e.anyChildHasLogic())}mergeIn(e,t){t?this.all.push({builder:e,predicate:{fn:K7(t.fn,this.depth),path:t.path}}):this.all.push({builder:e}),this.current=void 0}getCurrent(){return this.current===void 0&&(this.current=new a9(this.depth),this.all.push({builder:this.current})),this.current}static newRoot(){return new e(0)}},a9=class extends r9{logic=new n9([]);children=new Map;constructor(e){super(e)}addHiddenRule(e){this.logic.hidden.push(K7(e,this.depth))}addDisabledReasonRule(e){this.logic.disabledReasons.push(K7(e,this.depth))}addReadonlyRule(e){this.logic.readonly.push(K7(e,this.depth))}addSyncErrorRule(e){this.logic.syncErrors.push(K7(e,this.depth))}addSyncTreeErrorRule(e){this.logic.syncTreeErrors.push(K7(e,this.depth))}addAsyncErrorRule(e){this.logic.asyncErrors.push(K7(e,this.depth))}addMetadataRule(e,t){this.logic.getMetadata(e).push(K7(t,this.depth))}getChild(e){return this.children.has(e)||this.children.set(e,new i9(this.depth+1)),this.children.get(e)}hasLogic(e){return this===e}hasRules(){return this.logic.hasAnyLogic()||this.children.size>0}anyChildHasLogic(){for(let e of this.children.values())if(e.hasRules())return!0;return!1}},o9=class e{builder;predicates;depth;logic;constructor(e,t,n){this.builder=e,this.predicates=t,this.depth=n,this.logic=e?yve(e,t,n):new n9([])}getChild(t){let n=this.builder?s9(this.builder,t):[];if(n.length===0)return new e(void 0,[],this.depth+1);if(n.length===1){let{builder:t,predicates:r}=n[0];return new e(t,[...this.predicates,...r.map(e=>c9(e,this.depth))],this.depth+1)}return new vve(n.map(({builder:t,predicates:n})=>new e(t,[...this.predicates,...n.map(e=>c9(e,this.depth))],this.depth+1)))}hasLogic(e){return this.builder?this.builder.hasLogic(e):!1}hasRules(){return this.builder?this.builder.hasRules():!1}anyChildHasLogic(){return this.builder?this.builder.anyChildHasLogic():!1}},vve=class e{all;logic;constructor(e){this.all=e,this.logic=new n9([]);for(let t of e)this.logic.mergeIn(t.logic)}getChild(t){return new e(this.all.flatMap(e=>e.getChild(t)))}hasLogic(e){return this.all.some(t=>t.hasLogic(e))}hasRules(){return this.all.some(e=>e.hasRules())}anyChildHasLogic(){return this.all.some(e=>e.anyChildHasLogic())}};function s9(e,t){if(e instanceof i9)return e.all.flatMap(({builder:e,predicate:n})=>{let r=s9(e,t);return n?r.map(({builder:e,predicates:t})=>({builder:e,predicates:[...t,n]})):r});if(e instanceof a9)return[...t!==X7&&e.children.has(X7)?[{builder:e.getChild(X7),predicates:[]}]:[],...e.children.has(t)?[{builder:e.getChild(t),predicates:[]}]:[]];throw new fi(1909,!1)}function yve(e,t,n){let r=new n9(t);if(e instanceof i9){let i=e.all.map(({builder:e,predicate:r})=>new o9(e,r?[...t,c9(r,n)]:t,n));for(let e of i)r.mergeIn(e.logic)}else if(e instanceof a9)r.mergeIn(e.logic);else throw new fi(1909,!1);return r}function c9(e,t){return{...e,depth:t}}var l9=Symbol(`PATH`),u9=class e{keys;parent;keyInParent;root;children=new Map;fieldPathProxy=new Proxy(this,bve);logicBuilder;constructor(e,t,n,r){this.keys=e,this.parent=n,this.keyInParent=r,this.root=t??this,n||(this.logicBuilder=i9.newRoot())}get builder(){return this.logicBuilder?this.logicBuilder:this.parent.builder.getChild(this.keyInParent)}getChild(t){return this.children.has(t)||this.children.set(t,new e([...this.keys,t],this.root,this,t)),this.children.get(t)}mergeIn(e,t){let n=e.compile();this.builder.mergeIn(n.builder,t)}static unwrapFieldPath(e){return e[l9]}static newRoot(){return new e([],void 0,void 0,void 0)}},bve={get(e,t){return t===l9?e:e.getChild(t).fieldPathProxy}},d9=void 0,f9=new Map,p9=class e{schemaFn;constructor(e){this.schemaFn=e}compile(){if(f9.has(this))return f9.get(this);let e=u9.newRoot();f9.set(this,e);let t=d9;try{d9=e,this.schemaFn(e.fieldPathProxy)}finally{d9=t}return e}static create(t){return t instanceof e?t:new e(t)}static rootCompile(t){try{return f9.clear(),t===void 0?u9.newRoot():t instanceof e?t.compile():new e(t).compile()}finally{f9.clear()}}};function xve(e){return e instanceof p9||typeof e==`function`}function m9(e){if(d9!==u9.unwrapFieldPath(e).root)throw new fi(1908,!1)}function h9(e,t,n){return m9(e),u9.unwrapFieldPath(e).builder.addMetadataRule(t,n),t}var g9={list(){return{reduce:(e,t)=>t===void 0?e:[...e,t],getInitial:()=>[]}},min(){return{reduce:(e,t)=>e===void 0||t===void 0?e??t:t<e?t:e,getInitial:()=>void 0}},max(){return{reduce:(e,t)=>e===void 0||t===void 0?e??t:t>e?t:e,getInitial:()=>void 0}},or(){return{reduce:(e,t)=>e||t,getInitial:()=>!1}},and(){return{reduce:(e,t)=>e&&t,getInitial:()=>!0}},override:Sve};function Sve(e){return{reduce:(e,t)=>t,getInitial:()=>e?.()}}var _9=Symbol(`IS_ASYNC_VALIDATION_RESOURCE`),Cve=class{reducer;create;brand;[_9];constructor(e,t){this.reducer=e,this.create=t}};function v9(e){return new Cve(e??g9.override())}function y9(){return v9()}var b9=v9(g9.or()),wve=y9(),Tve=y9(),Eve=v9(g9.max()),Dve=v9(g9.min()),Ove=v9(g9.list());function x9(e,t){if(e===t)return!0;if(!e||!t||e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(!Object.is(e[n],t[n]))return!1;return!0}function kve(e){return e.errors().length>0?`invalid`:e.pending()?`unknown`:`valid`}var Ave=class{node;constructor(e){this.node=e}rawSyncTreeErrors=X(()=>this.shouldSkipValidation()?[]:[...this.node.logicNode.logic.syncTreeErrors.compute(this.node.context),...this.node.structure.parent?.validationState.rawSyncTreeErrors()??[]],{equal:x9});syncErrors=X(()=>this.shouldSkipValidation()?[]:[...this.node.logicNode.logic.syncErrors.compute(this.node.context),...this.syncTreeErrors(),...jve(this.node.submitState.submissionErrors())],{equal:x9});syncValid=X(()=>this.shouldSkipValidation()?!0:this.node.structure.reduceChildren(this.syncErrors().length===0,(e,t)=>t&&e.validationState.syncValid(),hve));syncTreeErrors=X(()=>this.rawSyncTreeErrors().filter(e=>e.fieldTree===this.node.fieldTree),{equal:x9});rawAsyncErrors=X(()=>this.shouldSkipValidation()?[]:[...this.node.logicNode.logic.asyncErrors.compute(this.node.context),...this.node.structure.parent?.validationState.rawAsyncErrors()??[]],{equal:x9});asyncErrors=X(()=>this.shouldSkipValidation()?[]:this.rawAsyncErrors().filter(e=>e===`pending`||e.fieldTree===this.node.fieldTree),{equal:x9});parseErrors=X(()=>this.node.formFieldBindings().flatMap(e=>e.parseErrors()),{equal:x9});errors=X(()=>[...this.parseErrors(),...this.syncErrors(),...this.asyncErrors().filter(e=>e!==`pending`)],{equal:x9});errorSummary=X(()=>{let e=this.node.structure.reduceChildren(this.errors(),(e,t)=>[...t,...e.errorSummary()]);return Z(()=>e.sort(Mve)),e},{equal:x9});pending=X(()=>this.node.structure.reduceChildren(this.asyncErrors().includes(`pending`),(e,t)=>t||e.validationState.pending()));status=X(()=>{if(this.shouldSkipValidation())return`valid`;let e=kve(this);return this.node.structure.reduceChildren(e,(e,t)=>t===`invalid`||e.validationState.status()===`invalid`?`invalid`:t===`unknown`||e.validationState.status()===`unknown`?`unknown`:`valid`,e=>e===`invalid`)});valid=X(()=>this.status()===`valid`);invalid=X(()=>this.status()===`invalid`);shouldSkipValidation=X(()=>this.node.hidden()||this.node.disabled()||this.node.readonly()||this.node.structure.isOrphaned())};function jve(e){return e===void 0?[]:J7(e)?e:[e]}function S9(e,t){if(J7(e))for(let n of e)n.fieldTree??=t;else e&&(e.fieldTree??=t);return e}function C9(e){return e.formField?e.formField.element:e.fieldTree().formFieldBindings().reduce((e,t)=>!e||!t.element?e??t.element:e.compareDocumentPosition(t.element)&Node.DOCUMENT_POSITION_PRECEDING?t.element:e,void 0)}function Mve(e,t){let n=C9(e),r=C9(t);return n===r?0:n===void 0||r===void 0?n===void 0?1:-1:n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_PRECEDING?1:-1}var w9=v9(),Nve=class{node;cache=new WeakMap;constructor(e){this.node=e,this.fieldTreeOf=this.fieldTreeOf.bind(this),this.stateOf=this.stateOf.bind(this)}resolve(e){if(!this.cache.has(e)){let t=X(()=>{let t=u9.unwrapFieldPath(e),n=this.node,r=mve();for(;r>0||!n.structure.logic.hasLogic(t.root.builder);)if(r--,n=n.structure.parent,n===void 0)throw new fi(1900,!1);for(let e of t.keys)if(n=n.structure.getChild(e),n===void 0)throw new fi(1901,!1);return n.fieldTree});this.cache.set(e,t)}return this.cache.get(e)()}get fieldTree(){return this.node.fieldProxy}get state(){return this.node}get value(){return this.node.structure.value}get key(){return this.node.structure.keyInParent}get pathKeys(){return this.node.structure.pathKeys}index=X(()=>{let e=this.key();if(!J7(Z(this.node.structure.parent.value)))throw new fi(1906,!1);return Number(e)});fieldTreeOf(e){return this.resolve(e)}stateOf(e){return this.resolve(e)()}valueOf=e=>{let t=this.resolve(e)().value();if(t instanceof ave)throw new fi(1907,!1);return t}},Pve=class{node;metadata=new Map;constructor(e){this.node=e}runMetadataCreateLifecycle(){if(!this.node.logicNode.logic.hasMetadataKeys())return;let e=dne();e&&ov(!1);try{Z(()=>$a(this.node.structure.injector,()=>{for(let e of this.node.logicNode.logic.getMetadataKeys())if(e.create){let t=this.node.logicNode.logic.getMetadata(e),n=e.create(this.node,X(()=>t.compute(this.node.context)));this.metadata.set(e,n)}}))}finally{e&&ov(!0)}}get(e){if(this.has(e)&&!this.metadata.has(e)){if(e.create)throw new fi(1912,!1);let t=this.node.logicNode.logic.getMetadata(e);this.metadata.set(e,X(()=>t.compute(this.node.context)))}return this.metadata.get(e)}has(e){return this.node.logicNode.logic.hasMetadata(e)}},Fve={get(e,t,n){if(t===pve)return!0;let r=e(),i=r.structure.getChild(t);if(i!==void 0)return i.fieldTree;let a=Z(r.value);if(J7(a)){if(t===`length`)return r.value().length;if(t===Symbol.iterator)return()=>(r.value(),Array.prototype[Symbol.iterator].apply(r.fieldTree))}if(Y7(a)&&t===Symbol.iterator)return function*(){for(let e in n)yield[e,n[e]]}},getOwnPropertyDescriptor(e,t){let n=Z(e().value),r=Reflect.getOwnPropertyDescriptor(n,t);return r&&!r.configurable&&(r.configurable=!0),r},ownKeys(e){let t=Z(e().value);return typeof t==`object`&&t?Reflect.ownKeys(t):[]}};function Ive(e,t){let n=X(()=>e()[t()]);return n[nn]=e[nn],n.set=r=>{Object.is(Z(n),r)||e.update(e=>Lve(e,r,t()))},n.update=e=>{n.set(e(Z(n)))},n.asReadonly=()=>n,n}function Lve(e,t,n){if(J7(e)){let r=[...e];return r[n]=t,r}return{...e,[n]:t}}var T9=Symbol(``),E9=X(()=>!1),D9=class{logic;node;createChildNode;identitySymbol=Symbol();_injector=void 0;_anyChildHasLogic;get injector(){return this._injector??=bs.create({providers:[],parent:this.fieldManager.injector}),this._injector}constructor(e,t,n){this.logic=e,this.node=t,this.createChildNode=n}children(){this.ensureChildrenMap();let e=this.childrenMap();return e===void 0?[]:Array.from(e.byPropertyKey.values()).map(e=>Z(e.reader))}materializedChildren(){let e=this.childrenMap();return e===void 0?[]:Array.from(e.byPropertyKey.values()).map(e=>e.node)}_areChildrenMaterialized(){return Z(this.childrenMap)!==void 0}ensureChildrenMap(){this._areChildrenMaterialized()||Z(()=>{this.childrenMap.update(e=>this.computeChildrenMap(this.value(),e,!0))})}getChild(e){this.ensureChildrenMap();let t=e.toString(),n=Z(this.childrenMap)?.byPropertyKey.get(t)?.reader;return n||=this.createReader(t),n()}reduceChildren(e,t,n){let r=this.childrenMap();if(!r)return e;let i=e;for(let e of r.byPropertyKey.values()){if(n?.(i))break;i=t(Z(e.reader),i)}return i}destroy(){this.injector.destroy()}createKeyOrOrphanSignals(e,t,n){if(e===`root`)return{keyInParent:O9,isOrphaned:E9};let r=this.parent,i=n,a=X(()=>{if(r.structure.isOrphaned())return T9;let e=r.structure.childrenMap();if(!e)return T9;let n=e.byPropertyKey.get(i);if(n&&n.node===this.node)return i;if(t===void 0)return T9;for(let[t,n]of e.byPropertyKey)if(n.node===this.node)return i=t;return T9}),o=X(()=>a()===T9);return{keyInParent:X(()=>{let e=a();if(e===T9)throw t===void 0?new fi(-1902,!1):new fi(1904,!1);return e}),isOrphaned:o}}createChildrenMap(){return Q({source:this.value,computation:(e,t)=>this.computeChildrenMap(e,t?.value,!1)})}computeChildrenMap(e,t,n){if(!Y7(e)||!n&&t===void 0&&!(this._anyChildHasLogic??=this.logic.anyChildHasLogic()))return;t??={byPropertyKey:new Map};let r,i=J7(e);t!==void 0&&(r=i?Vve(t,e,this.identitySymbol):Hve(t,e));for(let n of Object.keys(e)){let a,o=e[n];if(o===void 0){t.byPropertyKey.has(n)&&(r??={...t},r.byPropertyKey.delete(n));continue}i&&Y7(o)&&!J7(o)&&(a=o[this.identitySymbol]??=Symbol(``));let s;a&&(t.byTrackingKey?.has(a)||(r??={...t},r.byTrackingKey??=new Map,r.byTrackingKey.set(a,this.createChildNode(n,a,i))),s=(r??t).byTrackingKey.get(a));let c=t.byPropertyKey.get(n);c===void 0?(r??={...t},r.byPropertyKey.set(n,{reader:this.createReader(n),node:s??this.createChildNode(n,a,i)})):s&&s!==c.node&&(r??={...t},c.node=s)}return r??t}createReader(e){return X(()=>this.childrenMap()?.byPropertyKey.get(e)?.node)}},Rve=class extends D9{fieldManager;value;get parent(){}get root(){return this.node}get pathKeys(){return Bve}get keyInParent(){return O9}isOrphaned=E9;childrenMap;constructor(e,t,n,r,i){super(t,e,i),this.fieldManager=n,this.value=r,this.childrenMap=this.createChildrenMap()}},zve=class extends D9{logic;parent;root;pathKeys;keyInParent;value;childrenMap;isOrphaned;get fieldManager(){return this.root.structure.fieldManager}constructor(e,t,n,r,i,a){super(t,e,a),this.logic=t,this.parent=n,this.root=this.parent.structure.root;let o=this.createKeyOrOrphanSignals(`child`,r,i);this.isOrphaned=o.isOrphaned,this.keyInParent=o.keyInParent,this.pathKeys=X(()=>[...n.structure.pathKeys(),this.keyInParent()]),this.value=Ive(this.parent.structure.value,this.keyInParent),this.childrenMap=this.createChildrenMap(),this.fieldManager.structures.add(this)}},Bve=X(()=>[]),O9=X(()=>{throw new fi(1905,!1)});function Vve(e,t,n){let r,i=new Set(e.byPropertyKey.keys()),a=e.byTrackingKey&&new Set(e.byTrackingKey.keys());for(let e=0;e<t.length;e++){let r=t[e];i.delete(e.toString()),a&&Y7(r)&&Object.hasOwn(r,n)&&a.delete(r[n])}if(i.size>0){r??={...e};for(let e of i)r.byPropertyKey.delete(e)}if(a&&a.size>0){r??={...e};for(let e of a)r.byTrackingKey.delete(e)}return r}function Hve(e,t){let n;for(let r of e.byPropertyKey.keys())Object.hasOwn(t,r)||(n??={...e},n.byPropertyKey.delete(r));return n}var Uve=class{node;selfSubmitting=T(!1);submissionErrors;constructor(e){this.node=e,this.submissionErrors=Q({source:this.node.structure.value,computation:()=>[]})}submitting=X(()=>this.selfSubmitting()||(this.node.structure.parent?.submitting()??!1))},k9=class{structure;validationState;metadataState;nodeState;submitState;fieldAdapter;controlValue;_context=void 0;get context(){return this._context??=new Nve(this)}fieldProxy=new Proxy(()=>this,Fve);pathNode;constructor(e){this.pathNode=e.pathNode,this.fieldAdapter=e.fieldAdapter,this.structure=this.fieldAdapter.createStructure(this,e),this.validationState=this.fieldAdapter.createValidationState(this,e),this.nodeState=this.fieldAdapter.createNodeState(this,e),this.metadataState=new Pve(this),this.submitState=new Uve(this),this.controlValue=this.controlValueSignal(),this.metadataState.runMetadataCreateLifecycle()}focusBoundControl(e){this.getBindingForFocus()?.focus(e)}getBindingForFocus(){return this.formFieldBindings().filter(e=>e.focus!==void 0).reduce(A9,void 0)||this.structure.children().map(e=>e.getBindingForFocus()).reduce(A9,void 0)}pendingSync=Q({source:()=>this.value(),computation:(e,t)=>{t?.value?.abort()}});get fieldTree(){return this.fieldProxy}get logicNode(){return this.structure.logic}get value(){return this.structure.value}get keyInParent(){return this.structure.keyInParent}get errors(){return this.validationState.errors}get parseErrors(){return this.validationState.parseErrors}get errorSummary(){return this.validationState.errorSummary}get pending(){return this.validationState.pending}get valid(){return this.validationState.valid}get invalid(){return this.validationState.invalid}get dirty(){return this.nodeState.dirty}get touched(){return this.nodeState.touched}get disabled(){return this.nodeState.disabled}get disabledReasons(){return this.nodeState.disabledReasons}get hidden(){return this.nodeState.hidden}get readonly(){return this.nodeState.readonly}get formFieldBindings(){return this.nodeState.formFieldBindings}get submitting(){return this.submitState.submitting}get name(){return this.nodeState.name}get max(){let e=this.metadata(Tve)?.();return e?this.metadata(e):void 0}get maxLength(){return this.metadata(Dve)}get min(){let e=this.metadata(wve)?.();return e?this.metadata(e):void 0}get minLength(){return this.metadata(Eve)}get pattern(){return this.metadata(Ove)??Wve}get required(){return this.metadata(b9)??Gve}metadata(e){return this.metadataState.get(e)}getError(e){return this.errors().find(t=>t.kind===e)}hasMetadata(e){return this.metadataState.has(e)}markAsTouched(e){this.structure.isOrphaned()||Z(()=>{this.markAsTouchedInternal(e),this.flushSync()})}markAsTouchedInternal(e){if(!this.structure.isOrphaned()&&!this.validationState.shouldSkipValidation()&&(this.nodeState.markAsTouched(),!e?.skipDescendants))for(let e of this.structure.children())e.markAsTouchedInternal()}markAsDirty(){this.nodeState.markAsDirty()}markAsPristine(){this.nodeState.markAsPristine()}markAsUntouched(){this.nodeState.markAsUntouched()}reset(e){Z(()=>this._reset(e))}_reset(e){this.pendingSync()?.abort(),e!==void 0&&this.value.set(e),this.controlValue.rawSet(this.value()),this.nodeState.markAsUntouched(),this.nodeState.markAsPristine();for(let e of this.formFieldBindings())e.reset();for(let e of this.structure.materializedChildren())e._reset()}reloadValidation(){Z(()=>this._reloadValidation())}_reloadValidation(){let e=this.logicNode.logic.getMetadataKeys();for(let t of e)t[_9]&&this.metadata(t).reload?.();for(let e of this.structure.children())e._reloadValidation()}controlValueSignal(){let e=Q(this.value);e.rawSet=e.set,e.set=t=>{e.rawSet(t),this.markAsDirty(),this.debounceSync()};let t=e.update;return e.update=e=>{t(e),this.markAsDirty(),this.debounceSync()},e}sync(){this.value.set(this.controlValue())}flushSync(){let e=this.pendingSync();e&&!e.signal.aborted&&(e.abort(),this.sync())}async debounceSync(){let e=Z(()=>(this.pendingSync()?.abort(),this.nodeState.debouncer()));if(e){let t=new AbortController,n=e(t.signal);if(n&&(this.pendingSync.set(t),await n,t.signal.aborted))return}this.structure.isOrphaned()||this.sync()}static newRoot(e,t,n,r){return r.newRoot(e,t,n,r)}createStructure(e){return e.kind===`root`?new Rve(this,e.logic,e.fieldManager,e.value,this.newChild.bind(this)):new zve(this,e.logic,e.parent,e.identityInParent,e.initialKeyInParent,this.newChild.bind(this))}newChild(e,t,n){let r,i;return n?(r=this.pathNode.getChild(X7),i=this.structure.logic.getChild(X7)):(r=this.pathNode.getChild(e),i=this.structure.logic.getChild(e)),this.fieldAdapter.newChild({kind:`child`,parent:this,pathNode:r,logic:i,initialKeyInParent:e,identityInParent:t,fieldAdapter:this.fieldAdapter})}},Wve=X(()=>[]),Gve=X(()=>!1);function A9(e,t){return e?t&&e.element.compareDocumentPosition(t.element)&Node.DOCUMENT_POSITION_PRECEDING?t:e:t}var Kve=class{node;selfTouched=T(!1);selfDirty=T(!1);markAsTouched(){this.selfTouched.set(!0)}markAsDirty(){this.selfDirty.set(!0)}markAsPristine(){this.selfDirty.set(!1)}markAsUntouched(){this.selfTouched.set(!1)}formFieldBindings=T([]);constructor(e){this.node=e}dirty=X(()=>{let e=this.selfDirty()&&!this.isNonInteractive();return this.node.structure.reduceChildren(e,(e,t)=>t||e.nodeState.dirty(),q7)});touched=X(()=>{let e=this.selfTouched()&&!this.isNonInteractive();return this.node.structure.reduceChildren(e,(e,t)=>t||e.nodeState.touched(),q7)});disabledReasons=X(()=>[...this.node.structure.parent?.nodeState.disabledReasons()??[],...this.node.logicNode.logic.disabledReasons.compute(this.node.context)],{equal:x9});disabled=X(()=>!!this.disabledReasons().length);readonly=X(()=>(this.node.structure.parent?.nodeState.readonly()||this.node.logicNode.logic.readonly.compute(this.node.context))??!1);hidden=X(()=>(this.node.structure.parent?.nodeState.hidden()||this.node.logicNode.logic.hidden.compute(this.node.context))??!1);name=X(()=>{let e=this.node.structure.parent;return e?`${e.name()}.${this.node.structure.keyInParent()}`:this.node.structure.fieldManager.rootName});debouncer=X(()=>{if(this.node.logicNode.logic.hasMetadata(w9)){let e=this.node.logicNode.logic.getMetadata(w9).compute(this.node.context);if(e)return t=>e(this.node.context,t)}return this.node.structure.parent?.nodeState.debouncer?.()});isNonInteractive=X(()=>this.hidden()||this.disabled()||this.readonly())},qve=class{newRoot(e,t,n,r){return new k9({kind:`root`,fieldManager:e,value:t,pathNode:n,logic:n.builder.build(),fieldAdapter:r})}newChild(e){return new k9(e)}createNodeState(e){return new Kve(e)}createValidationState(e){return new Ave(e)}createStructure(e,t){return e.createStructure(t)}},Jve=class{injector;rootName;submitOptions;constructor(e,t,n){this.injector=e,this.rootName=t??`${this.injector.get(Xs)}.form${Yve++}`,this.submitOptions=n}structures=new Set;createFieldManagementEffect(e){E(()=>{let t=new Set;this.markStructuresLive(e,t);for(let e of this.structures)t.has(e)||(this.structures.delete(e),Z(()=>e.destroy()))},{injector:this.injector})}markStructuresLive(e,t){t.add(e);for(let n of e.children())this.markStructuresLive(n.structure,t)}},Yve=0,Xve=new Di(``);function Zve(e){let t,n,r;return e.length===3?[t,n,r]=e:e.length===2?xve(e[1])?[t,n]=e:[t,r]=e:[t]=e,[t,n,r]}function Qve(...e){let[t,n,r]=Zve(e),i=r?.injector??x(bs),a=$a(i,()=>p9.rootCompile(n)),o=new Jve(i,r?.name,r?.submission),s=r?.adapter??new qve,c=k9.newRoot(o,t,a,s);o.createFieldManagementEffect(c.structure);let{experimentalWebMcpTool:l}=r??{};if(l){let e=$a(i,()=>x(Xve,{optional:!0}));e&&$a(i,()=>e(c.fieldTree,{name:l.name,description:l.description}))}return c.fieldTree}async function $ve(e,t){let n=Z(e);if(Z(n.submitState.submitting))return!1;let r=t===void 0?n.structure.root.fieldProxy:e,i={root:n.structure.root.fieldProxy,submitted:e};t=typeof t==`function`?{action:t}:t??n.structure.fieldManager.submitOptions;let a=t?.action;if(!a)throw new fi(1915,!1);n.markAsTouched();let o=t?.onInvalid,s=eye(n,t?.ignoreValidators);try{if(s){n.submitState.selfSubmitting.set(!0);let e=await Z(()=>a?.(r,i));return e&&tye(n,e),!e||J7(e)&&e.length===0}return Z(()=>o?.(r,i)),!1}finally{n.submitState.selfSubmitting.set(!1)}}function eye(e,t){switch(t){case`all`:return!0;case`none`:return Z(e.valid);default:return!Z(e.invalid)}}function tye(e,t){J7(t)||(t=[t]);let n=new Map;for(let r of t){let t=S9(r,e.fieldTree),i=t.fieldTree(),a=n.get(i);a||(a=[],n.set(i,a)),a.push(t)}for(let[e,t]of n)e.submitState.submissionErrors.set(t)}var j9=class{kind=`compat`;control;fieldTree;context;message;constructor({context:e,kind:t,control:n}){this.context=e,this.kind=t,this.control=n}};function nye(e){if(e.length===0)return null;let t={};for(let n of e)t[n.kind]=n instanceof j9?n.context:n;return t}function rye(e,t){return e===null?[]:Object.entries(e).map(([e,n])=>new j9({context:n,kind:e,control:t}))}var iye=new Di(``);function M9(e,t){return e instanceof Function?e(t):e}function aye(e){return typeof e==`number`?isNaN(e):e===``||e===!1||e==null}function N9(e){return e===void 0?[]:Array.isArray(e)?e:[e]}function oye(e,t){m9(e),u9.unwrapFieldPath(e).builder.addSyncErrorRule(e=>S9(t(e),e.fieldTree))}function sye(e){return new cye(e)}var P9=class{__brand=void 0;kind=``;fieldTree;message;constructor(e){e&&Object.assign(this,e)}},cye=class extends P9{kind=`required`},F9=class extends P9{kind=`parse`};function lye(e,t){let n=h9(e,v9(),e=>!t?.when||t.when(e));h9(e,b9,({state:e})=>e.metadata(n)()),oye(e,e=>{if(e.state.metadata(n)()&&aye(e.value()))return t?.error?M9(t.error,e):sye({message:M9(t?.message,e)})})}function uye(e,t,n){let r=Q({source:e,computation:()=>[],equal:x9});return{errors:r.asReadonly(),setRawValue:e=>{let i=n(e);r.set(N9(i.error)),i.value!==void 0&&t(i.value),r.set(N9(i.error))},reset:()=>{r.set([])}}}var dye=class{field;constructor(e){this.field=e}control=this;get value(){return this.field().controlValue()}get valid(){return this.field().valid()}get invalid(){return this.field().invalid()}get pending(){return this.field().pending()}get disabled(){return this.field().disabled()}get enabled(){return!this.field().disabled()}get errors(){return nye(this.field().errors())}get pristine(){return!this.field().dirty()}get dirty(){return this.field().dirty()}get touched(){return this.field().touched()}get untouched(){return!this.field().touched()}get status(){if(this.field().disabled())return`DISABLED`;if(this.field().valid())return`VALID`;if(this.field().invalid())return`INVALID`;if(this.field().pending())return`PENDING`;throw new fi(1910,!1)}valueAccessor=null;hasValidator(e){return e===m7.required&&this.field().required()}updateValueAndValidity(){}},I9={disabled:`disabled`,disabledReasons:`disabledReasons`,dirty:`dirty`,errors:`errors`,hidden:`hidden`,invalid:`invalid`,max:`max`,maxLength:`maxLength`,min:`min`,minLength:`minLength`,name:`name`,pattern:`pattern`,pending:`pending`,readonly:`readonly`,required:`required`,touched:`touched`},fye=(()=>{let e={};for(let t of Object.keys(I9))e[I9[t]]=t;return e})();function L9(e,t){return e[fye[t]]?.()}var R9=Object.values(I9);function z9(){return{}}function B9(e,t,n){return e[t]!==n&&(e[t]=n,!0)}function pye(e,t,n){let r;if(U9(e)&&n.isBadInput(e))return{error:new F9};switch(e.type){case`checkbox`:return{value:e.checked};case`number`:case`range`:case`datetime-local`:if(r=Z(t),typeof r==`number`||r===null)return{value:e.value===``?null:e.valueAsNumber};break;case`date`:case`month`:case`time`:case`week`:if(r=Z(t),r===null||r instanceof Date)return{value:e.valueAsDate};if(typeof r==`number`)return{value:e.valueAsNumber}}if(e.tagName===`INPUT`&&e.type===`text`&&(r??=Z(t),typeof r==`number`||r===null)){if(e.value===``)return{value:null};let t=Number(e.value);return Number.isNaN(t)?{error:new F9}:{value:t}}return{value:e.value}}function V9(e,t){switch(e.type){case`checkbox`:e.checked=t;return;case`radio`:e.checked=t===e.value;return;case`number`:case`range`:case`datetime-local`:if(typeof t==`number`){H9(e,t);return}if(t===null){e.value=``;return}break;case`date`:case`month`:case`time`:case`week`:if(t===null||t instanceof Date){e.valueAsDate=t;return}if(typeof t==`number`){H9(e,t);return}}if(e.tagName===`INPUT`&&e.type===`text`){if(typeof t==`number`){e.value=isNaN(t)?``:String(t);return}if(t===null){e.value=``;return}}e.value=t}function H9(e,t){isNaN(t)?e.value=``:e.valueAsNumber=t}function U9(e){return e.tagName===`INPUT`}function mye(e){return e.type===`date`||e.type===`datetime-local`||e.type===`month`||e.type===`time`||e.type===`week`}function hye(e,t){let n=e.getUTCFullYear(),r=String(e.getUTCMonth()+1).padStart(2,`0`);return t===`month`?`${n}-${r}`:`${n}-${r}-${String(e.getUTCDate()).padStart(2,`0`)}`}function W9(e,t,n){return t instanceof Date&&(e===`min`||e===`max`)&&(n===`date`||n===`month`)?hye(t,n):t}function gye(e,t){e.listenToCustomControlModel(e=>t.state().controlValue.set(e)),e.listenToCustomControlOutput(`touch`,()=>t.state().markAsTouched()),t.registerAsBinding(e.customControl);let n=z9();return()=>{let r=t.state(),i=r.controlValue();B9(n,`controlValue`,i)&&e.setCustomControlModelInput(i);for(let i of R9){let a;if(a=i===`errors`?t.errors():L9(r,i),B9(n,i,a)&&(e.setInputOnDirectives(i,a),t.elementAcceptsNativeProperty(i)&&!e.customControlHasInput(i))){let e=W9(i,a,t.nativeFormElement.type);H7(t.renderer,t.nativeFormElement,i,e)}}}}function _ye(e){return typeof e==`object`&&!!e}function vye(e,t){let n=z9();t.controlValueAccessor.registerOnChange(e=>{n.controlValue=e,t.state().controlValue.set(e)}),t.controlValueAccessor.registerOnTouched(()=>t.state().markAsTouched());let r=t.injector.get(p7,null,{optional:!0,self:!0});if(r){let e;for(let t of r)_ye(t)&&t.registerOnValidatorChange&&(e??=T(0),t.registerOnValidatorChange(()=>{e.update(e=>e+1)}));let n=r.map(e=>typeof e==`function`?e:e.validate.bind(e)),i=m7.compose(n),a=X(()=>(e?.(),rye(i?i(t.interopNgControl.control):null,t.interopNgControl.control)));t.parseErrorsSource.set(a)}return t.registerAsBinding({reset:()=>{let e=t.state().value();n.controlValue=e,Z(()=>t.controlValueAccessor.writeValue(e))}}),()=>{let r=t.state(),i=r.controlValue();B9(n,`controlValue`,i)&&Z(()=>t.controlValueAccessor.writeValue(i));for(let i of R9){let a=L9(r,i);if(B9(n,i,a)){let n=e.setInputOnDirectives(i,a,i===`name`?yye:void 0);i===`disabled`&&t.controlValueAccessor.setDisabledState?Z(()=>t.controlValueAccessor.setDisabledState(a)):!n&&t.elementAcceptsNativeProperty(i)&&H7(t.renderer,t.nativeFormElement,i,a)}}}}function yye(e){return e==null}function bye(e,t,n){if(typeof MutationObserver!=`function`)return;let r=new MutationObserver(e=>{e.some(e=>xye(e))&&t()});r.observe(e,{attributes:!0,attributeFilter:[`value`],characterData:!0,childList:!0,subtree:!0}),n.onDestroy(()=>r.disconnect())}function xye(e){if(e.type===`childList`||e.type===`characterData`){if(e.target instanceof Comment)return!1;for(let t of e.addedNodes)if(!(t instanceof Comment))return!0;for(let t of e.removedNodes)if(!(t instanceof Comment))return!0;return!1}return e.type===`attributes`&&e.target instanceof HTMLOptionElement}function Sye(e,t,n,r){let i=!1,a=t.nativeFormElement,o=uye(()=>t.state().value(),e=>t.state().controlValue.set(e),e=>pye(a,t.state().value,r));n.set(o.errors),t.onReset=()=>{o.reset();let e=t.state().value();s.controlValue=e,V9(a,e)},e.listenToDom(`input`,()=>o.setRawValue(void 0)),e.listenToDom(`blur`,()=>t.state().markAsTouched()),U9(a)&&mye(a)&&r.watchValidity(t.destroyRef,a,()=>o.setRawValue(void 0)),t.registerAsBinding(),a.tagName===`SELECT`&&bye(a,()=>{i&&(a.value=t.state().controlValue())},t.destroyRef);let s=z9();return()=>{let n=t.state();for(let r of R9){let i=L9(n,r);if(B9(s,r,i)&&(e.setInputOnDirectives(r,i),t.elementAcceptsNativeProperty(r))){let e=W9(r,i,a.type);H7(t.renderer,a,r,e)}}let r=n.controlValue(),o=B9(s,`controlValue`,r),c=a.type===`radio`&&B9(s,`radioValue`,a.value);(o||c)&&V9(a,r),i=!0}}var G9=(()=>{class e{static ɵfac=function(t){return new(t||e)};static ɵprov=bi({token:e,factory:e=>Cye.ɵfac(e),providedIn:`root`})}return e})(),Cye=(()=>{class e extends G9{document=x(xs);cspNonce=x(ec,{optional:!0});injectedStyles=new WeakMap;watchValidity(e,t,n){let r=t.getRootNode();this.injectedStyles.has(r)||this.injectedStyles.set(r,this.createTransitionStyle(r));let i=e=>{let t=e;(t.animationName===`ng-valid`||t.animationName===`ng-invalid`)&&n()};t.addEventListener(`animationstart`,i),e.onDestroy(()=>{t.removeEventListener(`animationstart`,i)})}isBadInput(e){return e.validity?.badInput??!1}createTransitionStyle(e){let t=this.document.createElement(`style`);return this.cspNonce&&(t.nonce=this.cspNonce),t.textContent=`
-      @keyframes ng-valid {}
-      @keyframes ng-invalid {}
-      input:valid, textarea:valid {
-        animation: ng-valid 0.001s;
-      }
-      input:invalid, textarea:invalid {
-        animation: ng-invalid 0.001s;
-      }
-    `,e.nodeType===9?e.head?.appendChild(t):e.appendChild(t),t}ngOnDestroy(){this.injectedStyles.get(this.document)?.remove()}static ɵfac=(()=>{let t;return function(n){return(t||=Tl(e))(n||e)}})();static ɵprov=bi({token:e,factory:e.ɵfac})}return e})(),wye=Symbol(),K9=new Di(``),Tye=(()=>{class e{field=$.required({alias:`formField`});state=X(()=>this.field()());renderer=x(sp);destroyRef=x(Ss);injector=x(bs);element=x(Ml).nativeElement;elementIsNativeFormElement=B7(this.element);elementAcceptsTextualValues=ove(this.element);_elementAcceptsMinMax;nativeFormElement=this.elementIsNativeFormElement?this.element:void 0;focuser=e=>this.element.focus(e);controlValueAccessors=x(l7,{optional:!0,self:!0});config=x(iye,{optional:!0});validityMonitor=x(G9);parseErrorsSource=T(void 0);_interopNgControl;get interopNgControl(){return this._interopNgControl??=new dye(this.state)}parseErrors=X(()=>this.parseErrorsSource()?.().map(e=>({...e,fieldTree:Z(this.state).fieldTree,formField:this}))??[],{equal:x9});errors=X(()=>this.state().errors().filter(e=>!e.formField||e.formField===this),{equal:x9});isFieldBinding=!1;resetter=()=>{};parseErrorsResetCallback;setParseErrors(e){this.parseErrorsSource.set(e)}set onReset(e){this.parseErrorsResetCallback=e}get onReset(){return this.parseErrorsResetCallback}get controlValueAccessor(){return!this.controlValueAccessors||this.controlValueAccessors.length===0?this.interopNgControl?.valueAccessor??void 0:W7(this.interopNgControl,this.controlValueAccessors)??void 0}installClassBindingEffect(){let e=Object.entries(this.config?.classes??{}).map(([e,t])=>[e,X(()=>t(this))]);if(e.length===0)return;let t=z9();Sv({write:()=>{for(let[n,r]of e){let e=r();B9(t,n,e)&&(e?this.renderer.addClass(this.element,n):this.renderer.removeClass(this.element,n))}}},{injector:this.injector})}focus(e){this.focuser(e)}reset(){this.resetter(),this.parseErrorsResetCallback?.(this.state().value())}registerAsBinding(e){if(this.isFieldBinding)throw new fi(1913,!1);this.isFieldBinding=!0,this.installClassBindingEffect(),e?.focus&&(this.focuser=t=>e.focus(t)),e?.reset&&(this.resetter=()=>e.reset()),E(e=>{let t=this.state();t.nodeState.formFieldBindings.update(e=>[...e,this]),e(()=>{t.nodeState.formFieldBindings.update(e=>e.filter(e=>e!==this))})},{injector:this.injector})}[wye];ɵngControlCreate(e){if(!e.hasPassThrough){if(this.controlValueAccessor)this.ɵngControlUpdate=vye(e,this);else if(e.customControl)this.ɵngControlUpdate=gye(e,this);else if(this.elementIsNativeFormElement)this.ɵngControlUpdate=Sye(e,this,this.parseErrorsSource,this.validityMonitor);else throw new fi(1914,!1)}}ɵngControlUpdate;elementAcceptsNativeProperty(e){if(!this.elementIsNativeFormElement)return!1;switch(e){case`min`:case`max`:return this._elementAcceptsMinMax??=V7(this.element);case`minLength`:case`maxLength`:return this.elementAcceptsTextualValues;case`disabled`:case`required`:case`readonly`:case`name`:return!0;default:return!1}}static ɵfac=function(t){return new(t||e)};static ɵdir=dh({type:e,selectors:[[``,`formField`,``]],inputs:{field:[1,`formField`,`field`]},exportAs:[`formField`],features:[W_([{provide:K9,useExisting:e},{provide:fve,useFactory:()=>x(e).interopNgControl},{provide:uve,useFactory:()=>x(K9,{self:!0})}]),yh(`formField`)]})}return e})(),Eye=(()=>{class e{fieldTree=$.required({alias:`formRoot`});onSubmit(e){e.preventDefault(),Z(()=>{let e=this.fieldTree();e().structure.fieldManager.submitOptions&&$ve(e)})}static ɵfac=function(t){return new(t||e)};static ɵdir=dh({type:e,selectors:[[`form`,`formRoot`,``]],hostAttrs:[`novalidate`,``],hostBindings:function(e,t){e&1&&H(`submit`,function(e){return t.onSubmit(e)})},inputs:{fieldTree:[1,`formRoot`,`fieldTree`]}})}return e})(),Dye=[`codeInput`],Oye=`https://pangular-inspector.dev/security/#one-time-code`,kye=class e{client=$.required();docsUrl=Oye;busy=T(!1);error=T(``);notice=T(``);model=T({code:``});codeForm=Qve(this.model,e=>lye(e.code),{submission:{action:async()=>{await this.send()},onInvalid:()=>this.fail(`Enter the code from the terminal.`)}});codeInput=hv(`codeInput`);constructor(){E(()=>{let e=this.client();Z(()=>void e.requestAuthCode().catch(()=>{}))}),cd(()=>this.codeInput()?.nativeElement.focus())}async send(){let e=this.model().code.replace(/\s+/g,``);if(!/^\d{6}$/.test(e)){this.fail(`Enter the 6-digit code from the terminal.`);return}this.busy.set(!0),this.notice.set(``);try{await this.client().requestTrustWithCode(e)?this.error.set(``):this.fail(`That code didn't match. Check the terminal and try again.`)}catch{this.fail(`Can't reach the devtools server. Check that the dev server is running.`)}finally{this.busy.set(!1)}}async newCode(){this.busy.set(!0);try{await this.client().requestAuthCode({reissue:!0}),this.error.set(``),this.model.set({code:``}),this.notice.set(`A new code was printed in the terminal.`)}catch{this.notice.set(`Couldn't ask for a new code. Try again.`)}finally{this.busy.set(!1),this.codeInput()?.nativeElement.focus()}}fail(e){this.error.update(t=>t===e?`${e} `:e),this.codeInput()?.nativeElement.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-auth-code`]],viewQuery:function(e,t){e&1&&Mg(t.codeInput,Dye,5),e&2&&Ng()},inputs:{client:[1,`client`]},decls:24,vars:10,consts:[[`codeInput`,``],[`aria-labelledby`,`auth-code-title`,1,`pairing`],[`id`,`auth-code-title`],[3,`formRoot`],[`for`,`auth-code-input`],[1,`row`],[`id`,`auth-code-input`,`autocomplete`,`one-time-code`,`inputmode`,`numeric`,`spellcheck`,`false`,3,`formField`],[`type`,`submit`,1,`primary`,3,`disabled`],[`id`,`auth-code-error`,`role`,`alert`,1,`error`],[1,`more`],[`type`,`button`,3,`click`,`disabled`],[`role`,`status`,1,`notice`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`sr-only`]],template:function(e,t){e&1&&(F(0,`section`,1)(1,`h2`,2),K(2,`Enter the one-time code`),I(),F(3,`p`),K(4,` The devtools server asks for a one-time code before it shares data from your app. Find the 6-digit code in the terminal that runs the dev server. `),I(),F(5,`form`,3)(6,`label`,4),K(7,`One-time code`),I(),F(8,`div`,5),L(9,`input`,6,0),Dp(),F(11,`button`,7),K(12),I()()(),F(13,`p`,8),K(14),I(),F(15,`div`,9)(16,`button`,10),H(`click`,function(){return t.newCode()}),K(17,`Print a new code`),I(),F(18,`p`,11),K(19),I()(),F(20,`a`,12),K(21,`About the one-time code`),F(22,`span`,13),K(23,` (opens in a new tab)`),I()()()),e&2&&(D(5),P(`formRoot`,t.codeForm),D(4),P(`formField`,t.codeForm.code),k(`aria-invalid`,t.error()?!0:null)(`aria-describedby`,t.error()?`auth-code-error`:null),kp(),D(2),P(`disabled`,t.busy()),D(),J(` `,t.busy()?`Checking…`:`Connect`,` `),D(2),q(t.error()),D(2),P(`disabled`,t.busy()),D(3),q(t.notice()),D(),P(`href`,t.docsUrl,Du))},dependencies:[Tye,Eye],styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-.pairing[_ngcontent-%COMP%] {
-  max-width: 60ch;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  line-height: 1.5;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0 0 6px;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-}
-
-p[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-}
-
-label[_ngcontent-%COMP%] {
-  display: block;
-  margin-bottom: 4px;
-  color: var(--%NS%text-2);
-  font-weight: 500;
-}
-
-.row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-input[_ngcontent-%COMP%] {
-  flex: 1 1 10ch;
-  min-width: 0;
-  max-width: 16ch;
-  height: var(--%NS%control-h);
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text-strong);
-  font: inherit;
-  font-family: var(--%NS%font-mono);
-  letter-spacing: 0.08em;
-}
-input[_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-input[aria-invalid=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%danger);
-}
-
-button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-}
-button[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-button[_ngcontent-%COMP%]:disabled {
-  cursor: default;
-  opacity: 0.7;
-}
-
-button.primary[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-  color: var(--%NS%accent-ink);
-}
-button.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%accent-hover);
-  border-color: var(--%NS%accent-hover);
-}
-
-.error[_ngcontent-%COMP%] {
-  min-height: 0;
-  margin: 8px 0 0;
-  color: var(--%NS%danger-text);
-}
-.error[_ngcontent-%COMP%]:empty {
-  margin: 0;
-}
-
-.more[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  margin: 12px 0;
-}
-
-.notice[_ngcontent-%COMP%] {
-  margin: 0;
-  color: var(--%NS%text-2);
-}
-
-a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  border-radius: 2px;
-}
-a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},Aye=`https://pangular-inspector.dev/getting-started/troubleshooting/#the-panel-says-disconnected`,jye=class e{retry=cv();docsUrl=Aye;static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-connection-error`]],outputs:{retry:`retry`},decls:10,vars:1,consts:[[`role`,`alert`,1,`connection-error`],[1,`connection-actions`],[`type`,`button`,3,`click`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`sr-only`]],template:function(e,t){e&1&&(R(0,`div`,0)(1,`p`),K(2,` Can't reach the devtools server. Check that the dev server is running. The panel keeps trying to connect. `),z(),R(3,`div`,1)(4,`button`,2),U(`click`,function(){return t.retry.emit()}),K(5,`Retry now`),z(),R(6,`a`,3),K(7,`Troubleshooting`),R(8,`span`,4),K(9,` (opens in a new tab)`),z()()()()),e&2&&(D(6),V(`href`,t.docsUrl,Du))},styles:[`.connection-error[_ngcontent-%COMP%] {
-  max-width: 60ch;
-  margin: 0;
-  padding: 12px 14px;
-  border: 1px solid color-mix(in srgb, var(--%NS%danger) 36%, transparent);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-}
-.connection-error[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
-  margin: 0 0 10px;
-}
-.connection-error[_ngcontent-%COMP%]   .connection-actions[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 16px;
-}
-.connection-error[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-.connection-error[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-.connection-error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 14px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-}
-.connection-error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-  border-color: var(--%NS%accent-line);
-}
-.connection-error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},Mye={dark:{ngrx:{accent:`#d770e8`,text:`#f0abfc`},analog:{accent:`#ff5470`,text:`#fda4af`},"angular-native":{accent:`#ff4d6d`,text:`#fda4af`},nativescript:{accent:`#8196ff`,text:`#a5b4fc`},capacitor:{accent:`#53b9ff`,text:`#7dd3fc`}},light:{ngrx:{accent:`#a21caf`,text:`#701a75`},analog:{accent:`#be123c`,text:`#881337`},"angular-native":{accent:`#be123c`,text:`#881337`},nativescript:{accent:`#3448c5`,text:`#3730a3`},capacitor:{accent:`#0369a1`,text:`#0c4a6e`}}};function Nye(e,t){let n=Mye[t];return e&&n[e]||null}var Pye=[`toggle`];function Fye(e,t){e&1&&K(0,` Waiting for the devtools server. `)}function Iye(e,t){e&1&&K(0,` Loading the current setting. `)}function Lye(e,t){e&1&&K(0,` This is a saved report, so there is no page to change. The switch works with a running dev server. `)}function Rye(e,t){e&1&&(K(0,` This devtools server can't change it from the panel. Set `),R(1,`code`),K(2),z(),K(3,` in the devtools config. `)),e&2&&(D(2),Y(`agent: `,`{`,` browserTools: true `,`}`))}function zye(e,t){e&1&&A(0,Lye,1,0)(1,Rye,4,2),e&2&&j(+!W().staticReport())}function Bye(e,t){e&1&&K(0,` The devtools server didn't answer. `)}function Vye(e,t){if(e&1&&(K(0,` Applies right away to every page connected to this dev server, with no reload. It lasts until the server restarts, then `),R(1,`code`),K(2,`agent.browserTools`),z(),K(3)),e&2){let e=W();D(3),J(` in the devtools config decides again (`,e.configLabel(),`). `)}}function Hye(e,t){if(e&1){let e=B();R(0,`div`,8)(1,`span`),K(2),z(),R(3,`button`,10),U(`click`,function(){return S(e),C(W().retry())}),K(4,`Retry`),z()()}e&2&&(D(2),q(t))}function q9(e){if(!e||typeof e!=`object`)return null;let{enabled:t,config:n}=e;return typeof t==`boolean`?{enabled:t,config:n===!0}:null}var Uye=class e{rpc=$(null);state=T(null);status=T(`connecting`);saving=T(!1);error=T(``);announcement=T(``);staticReport=X(()=>cT(this.rpc()));enabled=X(()=>this.state()?.enabled??!1);canChange=X(()=>this.status()===`ready`&&!this.staticReport());configLabel=X(()=>this.state()?.config?`on in this project`:`off in this project`);toggle=hv(`toggle`);destroyRef=x(Ss);unsubscribe=null;attached=null;pending=null;constructor(){E(()=>{let e=this.rpc();e&&e!==this.attached&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async set(e){let t=this.rpc();if(!t||!this.canChange()||this.saving()){this.syncBox();return}this.saving.set(!0),this.error.set(``);try{let n=q9(await oT(t,`set-browser-tools`,{enabled:e}));if(!n)throw Error(`no answer`);this.pending=null,this.state.set(n),this.say(n.enabled?`Browser agent tools on. Connected pages register them.`:`Browser agent tools off. Connected pages unregister them.`)}catch{this.pending=e,this.error.set(`Couldn't turn the browser agent tools ${e?`on`:`off`}. Check that the dev server is running.`)}finally{this.saving.set(!1),this.syncBox()}}retry(){let e=this.rpc();if(e){if(this.status()===`ready`&&this.pending!==null){this.set(this.pending);return}this.error.set(``),this.load(e)}}async load(e){this.attached=e,this.pending=null,this.status.set(`loading`),this.error.set(``),this.unsubscribe?.(),this.unsubscribe=null;try{let t=await e.scope(`pangular`).rpc.sharedState(`browser-tools`);if(this.destroyRef.destroyed||this.attached!==e)return;let n=t=>{let n=q9(t);this.state.set(n),this.status.set(n&&!cT(e)?`ready`:`unsupported`)};n(t.value()),this.unsubscribe=t.on(`updated`,n)}catch{if(this.attached!==e)return;this.status.set(`failed`),this.error.set(`Couldn't read the browser agent tools setting.`)}}syncBox(){let e=this.toggle()?.nativeElement;e&&(e.checked=this.enabled())}say(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-browser-tools-setting`]],viewQuery:function(e,t){e&1&&Mg(t.toggle,Pye,5),e&2&&Ng()},inputs:{rpc:[1,`rpc`]},decls:20,vars:7,consts:[[`toggle`,``],[`id`,`settings-browser-agents`],[`id`,`settings-browser-agents-hint`,1,`hint`],[1,`switch-row`],[`type`,`checkbox`,`role`,`switch`,`aria-describedby`,`settings-browser-agents-hint settings-browser-agents-status`,1,`switch`,3,`change`,`checked`,`disabled`],[1,`switch-label`],[`aria-hidden`,`true`,1,`state`],[`id`,`settings-browser-agents-status`,1,`hint`],[`role`,`alert`,1,`error`],[`role`,`status`,1,`sr-only`],[`type`,`button`,1,`action`,3,`click`]],template:function(e,t){if(e&1&&(R(0,`h2`,1),K(1,`Browser agents`),z(),R(2,`p`,2),K(3,` Registers the read-only agent tools on your app's page, so an agent that drives the browser finds them through WebMCP or Chrome DevTools for agents. Any script on the page can call them, so leave this off if the page loads scripts you don't trust. `),z(),R(4,`label`,3)(5,`input`,4,0),U(`change`,function(e){return t.set(e.target.checked)}),z(),R(7,`span`,5),K(8,`Browser agent tools`),z(),R(9,`span`,6),K(10),z()(),R(11,`p`,7),A(12,Fye,1,0)(13,Iye,1,0)(14,zye,2,1)(15,Bye,1,0)(16,Vye,4,1),z(),A(17,Hye,5,1,`div`,8),R(18,`p`,9),K(19),z()),e&2){let e,n;D(5),V(`checked`,t.enabled())(`disabled`,!t.canChange()),k(`aria-busy`,t.saving()?`true`:null),D(5),q(t.enabled()?`On`:`Off`),D(2),j((e=t.status())===`connecting`?12:e===`loading`?13:e===`unsupported`?14:e===`failed`?15:16),D(5),j((n=t.error())?17:-1,n),D(2),q(t.announcement())}},styles:[`[_nghost-%COMP%] {
-  display: block;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0 0 10px;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 650;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 8px 0 12px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.switch-row[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-height: var(--%NS%control-h);
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-.switch-row[_ngcontent-%COMP%]:has(.switch:disabled) {
-  cursor: default;
-}
-
-.switch-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-.state[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-.switch[_ngcontent-%COMP%] {
-  position: relative;
-  flex: none;
-  width: 36px;
-  height: 20px;
-  margin: 0;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 999px;
-  background: var(--%NS%surface-3);
-  appearance: none;
-  cursor: inherit;
-  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
-}
-.switch[_ngcontent-%COMP%]::before {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--%NS%text-2);
-  content: "";
-  transition: transform 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
-}
-.switch[_ngcontent-%COMP%]:checked {
-  border-color: var(--%NS%accent);
-  background: var(--%NS%accent);
-}
-.switch[_ngcontent-%COMP%]:checked::before {
-  background: var(--%NS%accent-ink);
-  transform: translateX(16px);
-}
-.switch[_ngcontent-%COMP%]:disabled {
-  opacity: 0.6;
-}
-.switch[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-@media (prefers-reduced-motion: reduce) {
-  .switch[_ngcontent-%COMP%] {
-    transition: none;
-  }
-  .switch[_ngcontent-%COMP%]::before {
-    transition: none;
-  }
-}
-
-.error[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  padding: 8px 12px;
-  border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent);
-  border-radius: var(--%NS%radius-sm);
-  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
-  color: var(--%NS%danger-text);
-  font-size: 13px;
-}
-
-.action[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-}
-.action[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-3);
-}
-.action[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}`]})},Wye=(e,t)=>t.value,Gye=(e,t)=>t.id;function Kye(e,t){if(e&1){let e=B();F(0,`label`,27)(1,`input`,28),H(`change`,function(){let t=S(e).$implicit;return C(W().theme.set(t.value))}),I(),F(2,`span`,29),K(3),I(),F(4,`span`,30),K(5),I()()}if(e&2){let e=t.$implicit,n=W();G(`checked`,n.theme()===e.value),D(),P(`value`,e.value)(`checked`,n.theme()===e.value),D(2),q(e.label),D(2),q(e.hint)}}function qye(e,t){e&1&&(F(0,`span`,34),K(1,`Pinned`),I())}function Jye(e,t){if(e&1){let e=B();F(0,`li`,31),H(`keydown`,function(t){let n=S(e).$implicit;return C(W().onRowKey(t,n.id))}),L(1,`app-tab-icon`,32),F(2,`span`,33),K(3),A(4,qye,2,0,`span`,34),I(),F(5,`button`,35),H(`click`,function(){let t=S(e).$implicit;return C(W().togglePinned(t.id))}),K(6,` Pin `),I(),F(7,`label`,36)(8,`input`,37),H(`change`,function(t){let n=S(e).$implicit;return C(W().setShown(n.id,t.target.checked))}),I(),F(9,`span`),K(10,`Shown`),I()(),F(11,`span`,38)(12,`button`,39),H(`click`,function(){let t=S(e).$implicit;return C(W().move(t.id,-1))}),w(),F(13,`svg`,40),L(14,`path`,41),I()(),fs(),F(15,`button`,42),H(`click`,function(){let t=S(e).$implicit;return C(W().move(t.id,1))}),w(),F(16,`svg`,40),L(17,`path`,43),I()()()()}if(e&2){let e=t.$implicit,n=W();G(`hidden-tab`,n.isHidden(e.id)),k(`data-tab`,e.id),D(),P(`name`,e.id),D(2),J(` `,e.label,` `),D(),j(n.isPinned(e.id)?4:-1),D(),k(`aria-pressed`,n.isPinned(e.id))(`aria-label`,`Pin `+e.label),D(3),P(`checked`,!n.isHidden(e.id)),k(`aria-label`,e.label+` shown in the tab bar`),D(4),P(`disabled`,!n.canMove(e.id,-1)),k(`aria-label`,`Move `+e.label+` up`),D(3),P(`disabled`,!n.canMove(e.id,1)),k(`aria-label`,`Move `+e.label+` down`)}}function Yye(e,t){e&1&&(K(0,` Press `),F(1,`kbd`),K(2),I(),K(3,` on your app's page to open or close the panel. The button shows while the panel is open. The popup on the page saves this setting. `)),e&2&&(D(2),q(t))}function Xye(e,t){e&1&&(K(0,` The popup shortcut is turned off in the devtools config (`),F(1,`code`),K(2,`popup.hotkey`),I(),K(3,`), so the button always shows. `))}function Zye(e,t){e&1&&(F(0,`kbd`),K(1),I()),e&2&&(D(),q(t))}function Qye(e,t){e&1&&K(0,` Off `)}var $ye=[{value:`system`,label:`System`,hint:`Follows the hub, or your system without it`},{value:`light`,label:`Light`,hint:`Always light`},{value:`dark`,label:`Dark`,hint:`Always dark`}],ebe=class e{tabs=$([]);layout=pv(H5);theme=pv(`system`);passive=pv(!1);pill=pv(!1);hotkey=$(!1);paletteShortcut=$(`Ctrl+K`);rpc=$(null);themes=$ye;announcement=T(``);host=x(Ml);injector=x(bs);ids=X(()=>this.tabs().map(e=>e.id));orderedTabs=X(()=>{let e=new Map(this.tabs().map(e=>[e.id,e]));return K5(this.ids(),this.layout()).map(t=>e.get(t))});isDefaultLayout=X(()=>{let{order:e,hidden:t,pinned:n}=this.layout(),r=K5(this.ids(),this.layout());return!t.length&&!n.length&&(!e.length||r.every((e,t)=>e===this.ids()[t]))});isPinned(e){return this.layout().pinned.includes(e)}isHidden(e){return this.layout().hidden.includes(e)&&!this.isPinned(e)}canMove(e,t){return q5(this.ids(),this.layout(),e,t)!==this.layout()}move(e,t){let n=q5(this.ids(),this.layout(),e,t);if(n===this.layout())return;this.layout.set(n);let r=K5(this.ids(),n),i=this.label(e);this.say(`${i} moved to position ${r.indexOf(e)+1} of ${r.length}.`),cd(()=>{let n=[...this.host.nativeElement.querySelectorAll(`.tab-row`)].find(t=>t.dataset.tab===e),r=n?.querySelector(`[data-move="${t<0?`up`:`down`}"]`),i=n?.querySelector(`[data-move="${t<0?`down`:`up`}"]`);(r&&!r.disabled?r:i)?.focus()},{injector:this.injector})}onRowKey(e,t){!e.altKey||e.key!==`ArrowUp`&&e.key!==`ArrowDown`||(e.preventDefault(),this.move(t,e.key===`ArrowUp`?-1:1))}togglePinned(e){let t=!this.isPinned(e);this.layout.set(y_e(this.ids(),this.layout(),e,t)),this.say(t?`${this.label(e)} pinned.`:`${this.label(e)} unpinned.`)}setShown(e,t){this.layout.set(v_e(this.layout(),e,!t)),this.say(t?`${this.label(e)} shown.`:`${this.label(e)} hidden.`)}resetTabs(){this.layout.set(H5),this.say(`Tabs reset to the default order.`)}label(e){return this.tabs().find(t=>t.id===e)?.label??e}say(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-settings`]],inputs:{tabs:[1,`tabs`],layout:[1,`layout`],theme:[1,`theme`],passive:[1,`passive`],pill:[1,`pill`],hotkey:[1,`hotkey`],paletteShortcut:[1,`paletteShortcut`],rpc:[1,`rpc`]},outputs:{layout:`layoutChange`,theme:`themeChange`,passive:`passiveChange`,pill:`pillChange`},decls:73,vars:9,consts:[[1,`intro`],[`aria-labelledby`,`settings-theme`,1,`card`],[`id`,`settings-theme`],[`role`,`radiogroup`,`aria-labelledby`,`settings-theme`,1,`themes`],[1,`theme`,3,`checked`],[`aria-labelledby`,`settings-tabs`,1,`card`],[1,`card-head`],[`id`,`settings-tabs`],[`type`,`button`,1,`action`,3,`click`,`disabled`],[`id`,`settings-tabs-hint`,1,`hint`],[`aria-labelledby`,`settings-tabs`,`aria-describedby`,`settings-tabs-hint`,1,`tab-list`],[1,`tab-row`,3,`hidden-tab`],[`aria-labelledby`,`settings-popup`,1,`card`],[`id`,`settings-popup`],[1,`check`,`wide`],[`type`,`checkbox`,`aria-describedby`,`settings-passive-hint`,3,`change`,`checked`,`disabled`],[`id`,`settings-passive-hint`,1,`hint`],[`type`,`checkbox`,`aria-describedby`,`settings-pill-hint`,3,`change`,`checked`],[`id`,`settings-pill-hint`,1,`hint`],[`aria-labelledby`,`settings-browser-agents`,1,`card`],[3,`rpc`],[`aria-labelledby`,`settings-keys`,1,`card`],[`id`,`settings-keys`],[1,`keys`],[1,`sr-only`],[`scope`,`col`],[`role`,`status`,1,`sr-only`],[1,`theme`],[`type`,`radio`,`name`,`settings-theme`,3,`change`,`value`,`checked`],[1,`theme-label`],[1,`hint`],[1,`tab-row`,3,`keydown`],[3,`name`],[1,`tab-label`],[1,`tag`],[`type`,`button`,1,`action`,`small`,3,`click`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[1,`moves`],[`type`,`button`,`data-move`,`up`,1,`icon`,3,`click`,`disabled`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`m6 15 6-6 6 6`],[`type`,`button`,`data-move`,`down`,1,`icon`,3,`click`,`disabled`],[`d`,`m6 9 6 6 6-6`]],template:function(e,t){if(e&1&&(F(0,`p`,0),K(1,` Settings for this panel in this browser. They are saved in the browser's local storage, so every panel on this address uses them. Browser agents is the exception: the dev server keeps it for every page and panel. `),I(),F(2,`section`,1)(3,`h2`,2),K(4,`Theme`),I(),F(5,`div`,3),M(6,Kye,6,6,`label`,4,Wye),I()(),F(8,`section`,5)(9,`div`,6)(10,`h2`,7),K(11,`Tabs`),I(),F(12,`button`,8),H(`click`,function(){return t.resetTabs()}),K(13,` Reset tabs `),I()(),F(14,`p`,9),K(15,` Pinned tabs come first in the tab bar. Hidden tabs stay reachable from the command palette and from links. Use the arrow buttons, or `),F(16,`kbd`),K(17,`Alt`),I(),K(18,` with `),F(19,`kbd`),K(20,`↑`),I(),K(21,` and `),F(22,`kbd`),K(23,`↓`),I(),K(24,` on a row, to change the order. `),I(),F(25,`ol`,10),M(26,Jye,18,14,`li`,11,Gye),I()(),F(28,`section`,12)(29,`h2`,13),K(30,`Popup on the page`),I(),F(31,`label`,14)(32,`input`,15),H(`change`,function(e){return t.passive.set(e.target.checked)}),I(),F(33,`span`),K(34,`Passive mode: hide the floating button until the shortcut is pressed`),I()(),F(35,`p`,16),A(36,Yye,4,1)(37,Xye,4,0),I(),F(38,`label`,14)(39,`input`,17),H(`change`,function(e){return t.pill.set(e.target.checked)}),I(),F(40,`span`),K(41,`Counts launcher: show render and error counts on the floating button`),I()(),F(42,`p`,18),K(43,` While the panel is closed, the button becomes a pill with the number of component renders and errors on the page since it loaded. Off by default. The popup on the page saves this setting. `),I()(),F(44,`section`,19),L(45,`app-browser-tools-setting`,20),I(),F(46,`section`,21)(47,`h2`,22),K(48,`Keyboard shortcuts`),I(),F(49,`table`,23)(50,`caption`,24),K(51,` Keyboard shortcuts `),I(),F(52,`thead`)(53,`tr`)(54,`th`,25),K(55,`Shortcut`),I(),F(56,`th`,25),K(57,`Action`),I()()(),F(58,`tbody`)(59,`tr`)(60,`td`)(61,`kbd`),K(62),I()(),F(63,`td`),K(64,`Open the command palette in the panel`),I()(),F(65,`tr`)(66,`td`),A(67,Zye,2,1,`kbd`)(68,Qye,1,0),I(),F(69,`td`),K(70,`Open or close the popup on your app's page`),I()()()()(),F(71,`p`,26),K(72),I()),e&2){let e,n;D(6),N(t.themes),D(6),P(`disabled`,t.isDefaultLayout()),D(14),N(t.orderedTabs()),D(6),P(`checked`,t.passive())(`disabled`,t.hotkey()===!1),D(4),j((e=t.hotkey())?36:37,e),D(3),P(`checked`,t.pill()),D(6),P(`rpc`,t.rpc()),D(17),q(t.paletteShortcut()),D(5),j((n=t.hotkey())?67:68,n),D(5),q(t.announcement())}},dependencies:[Uye,QT],styles:[`[_nghost-%COMP%] {
-  display: block;
-  max-width: 760px;
-}
-
-.intro[_ngcontent-%COMP%] {
-  max-width: 720px;
-  margin: 0 0 16px;
-  color: var(--%NS%text-2);
-  line-height: 1.5;
-}
-
-.card[_ngcontent-%COMP%] {
-  margin: 0 0 16px;
-  padding: 16px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-}
-
-.card-head[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-h2[_ngcontent-%COMP%] {
-  margin: 0 0 10px;
-  color: var(--%NS%text-strong);
-  font-size: 15px;
-  font-weight: 650;
-}
-
-.card-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
-  margin: 0;
-}
-
-.hint[_ngcontent-%COMP%] {
-  margin: 8px 0 12px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.themes[_ngcontent-%COMP%] {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 8px;
-}
-
-.theme[_ngcontent-%COMP%] {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 2px 8px;
-  align-items: center;
-  padding: 10px 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  cursor: pointer;
-}
-.theme[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {
-  grid-column: 2;
-  margin: 0;
-}
-.theme.checked[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-}
-.theme[_ngcontent-%COMP%]:has(input:focus-visible) {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.theme[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-
-.theme-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-strong);
-  font-weight: 600;
-}
-
-.tab-list[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius-sm);
-}
-
-.tab-row[_ngcontent-%COMP%] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  min-height: 44px;
-  padding: 4px 8px 4px 12px;
-  color: var(--%NS%text);
-}
-.tab-row[_ngcontent-%COMP%]    + .tab-row[_ngcontent-%COMP%] {
-  border-top: 1px solid var(--%NS%border);
-}
-.tab-row[_ngcontent-%COMP%]   app-tab-icon[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-}
-
-.tab-row.hidden-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-.tab-label[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex: 1 1 120px;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-
-.tag[_ngcontent-%COMP%] {
-  padding: 1px 8px;
-  border: 1px solid;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 600;
-  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
-  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  color: var(--%NS%accent-text);
-}
-
-.action[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  height: var(--%NS%control-h);
-  padding: 0 12px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font: inherit;
-  font-weight: 500;
-  cursor: pointer;
-}
-.action.small[_ngcontent-%COMP%] {
-  height: 28px;
-  padding: 0 10px;
-  font-size: 12px;
-}
-.action[aria-pressed=true][_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-.action[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-}
-.action[_ngcontent-%COMP%]:disabled {
-  color: var(--%NS%text-3);
-  cursor: default;
-}
-.action[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.check[_ngcontent-%COMP%] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-  cursor: pointer;
-}
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
-  margin: 0;
-  accent-color: var(--%NS%accent);
-}
-.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-.check.wide[_ngcontent-%COMP%] {
-  color: var(--%NS%text);
-  font-size: 13px;
-}
-
-.moves[_ngcontent-%COMP%] {
-  display: inline-flex;
-  gap: 4px;
-  margin-left: auto;
-}
-
-.icon[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-.icon[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  width: 16px;
-  height: 16px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-}
-.icon[_ngcontent-%COMP%]:hover:not(:disabled) {
-  background: var(--%NS%surface-3);
-}
-.icon[_ngcontent-%COMP%]:disabled {
-  color: var(--%NS%text-3);
-  opacity: 0.6;
-  cursor: default;
-}
-.icon[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-kbd[_ngcontent-%COMP%] {
-  padding: 1px 6px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 4px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-}
-
-code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-.keys[_ngcontent-%COMP%] {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-.keys[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
-  padding: 6px 8px;
-  text-align: left;
-  color: var(--%NS%text-3);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.keys[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
-  padding: 8px;
-  border-top: 1px solid var(--%NS%border);
-  color: var(--%NS%text);
-}`]})};function J9(e,t){let n=e.toLowerCase(),r=t.toLowerCase().replace(/\s+/g,``);if(!r)return 0;let i=0,a=0,o=-2;for(let e of r){let t=n.indexOf(e,a);if(t<0)return-1;let r=t===0||/[\s:&/-]/.test(n[t-1]);i+=1,t===o+1&&(i+=3),r&&(i+=4),o=t,a=t+1}return i-n.length/100}function tbe(e,t){let n=t.trim();return n?e.map((e,t)=>{let r=J9(e.title,n),i=J9(`${e.group} ${e.keywords??``}`,n);return{command:e,index:t,score:Math.max(r>=0?r+10:-1,i)}}).filter(e=>e.score>=0).sort((e,t)=>t.score-e.score||e.index-t.index).map(e=>e.command):[...e]}var nbe=[`input`],rbe=(e,t)=>t.id;function ibe(e,t){if(e&1&&(R(0,`kbd`),K(1),z()),e&2){let e=W().$implicit;D(),q(e.shortcut)}}function abe(e,t){if(e&1){let e=B();R(0,`li`,14),U(`pointermove`,function(){let t=S(e).$index;return C(W(2).active.set(t))})(`click`,function(){let t=S(e).$implicit;return C(W(2).run(t))}),R(1,`span`,15),K(2),z(),A(3,ibe,2,1,`kbd`),R(4,`span`,16),K(5),z()()}if(e&2){let e=t.$implicit,n=t.$index,r=W(2);G(`active`,n===r.active()),k(`id`,r.uid+`-opt-`+n)(`aria-selected`,n===r.active()),D(2),q(e.title),D(),j(e.shortcut?3:-1),D(2),q(e.group)}}function obe(e,t){if(e&1&&(R(0,`p`,11),K(1),z()),e&2){let e=W(2);D(),J(`No commands match “`,e.query().trim(),`”.`)}}function sbe(e,t){if(e&1){let e=B();R(0,`div`,1),U(`pointerdown`,function(){return S(e),C(W().close())}),z(),R(1,`div`,2),U(`keydown`,function(t){return S(e),C(W().onKey(t))}),R(2,`h2`,3),K(3,`Command palette`),z(),R(4,`div`,4),w(),R(5,`svg`,5),dg(6,`circle`,6)(7,`path`,7),z(),fs(),R(8,`input`,8,0),U(`input`,function(t){return S(e),C(W().query.set(t.target.value))}),z()(),R(10,`ul`,9),U(`pointerdown`,function(e){return e.preventDefault()}),M(11,abe,6,7,`li`,10,rbe),z(),A(13,obe,2,1,`p`,11),R(14,`p`,12)(15,`kbd`),K(16,`↑`),z(),R(17,`kbd`),K(18,`↓`),z(),K(19,` to move, `),R(20,`kbd`),K(21,`Enter`),z(),K(22,` to run, `),R(23,`kbd`),K(24,`Esc`),z(),K(25,` to close `),z(),R(26,`p`,13),K(27),z()()}if(e&2){let e=W();D(),k(`aria-labelledby`,e.uid+`-title`),D(),k(`id`,e.uid+`-title`),D(6),V(`value`,e.query()),k(`aria-controls`,e.uid+`-list`)(`aria-activedescendant`,e.activeId())(`aria-describedby`,e.uid+`-help`),D(2),V(`hidden`,!e.results().length),k(`id`,e.uid+`-list`),D(),N(e.results()),D(2),j(e.results().length?-1:13),D(),k(`id`,e.uid+`-help`),D(13),q(e.status())}}var cbe=0,lbe=class e{commands=$([]);open=pv(!1);picked=cv();uid=`cp${cbe++}`;query=T(``);results=X(()=>tbe(this.commands(),this.query()));active=Q(()=>this.results().length?0:-1);activeId=X(()=>this.active()>=0?`${this.uid}-opt-${this.active()}`:null);status=X(()=>{let e=this.results().length;return e?`${e} ${e===1?`command`:`commands`}.`:`No commands match.`});input=hv(`input`);injector=x(bs);returnFocus=null;constructor(){E(()=>{this.open()&&Z(()=>{let e=document.activeElement;this.returnFocus=e instanceof HTMLElement&&e!==document.body?e:null,this.query.set(``),cd(()=>this.input()?.nativeElement.focus(),{injector:this.injector})})})}close(e){if(!this.open())return;this.open.set(!1);let t=this.returnFocus;this.returnFocus=null,cd(()=>{t?.isConnected&&t.focus(),e?.()},{injector:this.injector})}run(e){this.close(()=>this.picked.emit(e.id))}onKey(e){let t=this.results().length;switch(e.key){case`ArrowDown`:case`ArrowUp`:{if(e.preventDefault(),!t)return;let n=e.key===`ArrowDown`?1:-1;this.active.set((this.active()+n+t)%t),this.reveal();return}case`PageDown`:case`PageUp`:if(e.preventDefault(),!t)return;this.active.set(e.key===`PageDown`?t-1:0),this.reveal();return;case`Enter`:{e.preventDefault();let t=this.results()[this.active()];t&&this.run(t);return}case`Escape`:e.preventDefault(),e.stopPropagation(),this.close();return;case`Tab`:e.preventDefault();return}}reveal(){cd(()=>{let e=this.activeId();e&&document.getElementById(e)?.scrollIntoView?.({block:`nearest`})},{injector:this.injector})}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-command-palette`]],viewQuery:function(e,t){e&1&&Mg(t.input,nbe,5),e&2&&Ng()},inputs:{commands:[1,`commands`],open:[1,`open`]},outputs:{open:`openChange`,picked:`picked`},decls:1,vars:1,consts:[[`input`,``],[`aria-hidden`,`true`,1,`backdrop`,3,`pointerdown`],[`role`,`dialog`,`aria-modal`,`true`,1,`palette`,3,`keydown`],[1,`sr-only`],[1,`field`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`text`,`role`,`combobox`,`aria-autocomplete`,`list`,`aria-expanded`,`true`,`autocomplete`,`off`,`spellcheck`,`false`,`placeholder`,`Type a command or a tab…`,`aria-label`,`Command`,3,`input`,`value`],[`role`,`listbox`,`aria-label`,`Commands`,1,`list`,3,`pointerdown`,`hidden`],[`role`,`option`,3,`active`],[1,`empty`],[1,`help`],[`role`,`status`,1,`sr-only`],[`role`,`option`,3,`pointermove`,`click`],[1,`title`],[1,`group`]],template:function(e,t){e&1&&A(0,sbe,28,11),e&2&&j(t.open()?0:-1)},styles:[`.backdrop[_ngcontent-%COMP%] {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  background: color-mix(in srgb, var(--%NS%bg) 55%, transparent);
-  backdrop-filter: blur(2px);
-}
-
-.palette[_ngcontent-%COMP%] {
-  position: fixed;
-  top: min(12vh, 96px);
-  right: 0;
-  left: 0;
-  z-index: 101;
-  display: flex;
-  flex-direction: column;
-  width: min(560px, 100vw - 32px);
-  max-height: min(70vh, 520px);
-  margin-inline: auto;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
-  overflow: hidden;
-  animation: enter 0.18s var(--%NS%ease) both;
-}
-
-.field[_ngcontent-%COMP%] {
-  position: relative;
-  flex-shrink: 0;
-  padding: 10px;
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.search-icon[_ngcontent-%COMP%] {
-  position: absolute;
-  top: 50%;
-  left: 22px;
-  width: 16px;
-  height: 16px;
-  transform: translateY(-50%);
-  fill: none;
-  stroke: var(--%NS%text-3);
-  stroke-width: 2;
-  pointer-events: none;
-}
-
-input[_ngcontent-%COMP%] {
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--%NS%control-h);
-  padding: 0 12px 0 36px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: var(--%NS%radius-sm);
-  background: var(--%NS%bg);
-  color: var(--%NS%text-strong);
-  font: inherit;
-  font-size: 14px;
-}
-input[_ngcontent-%COMP%]::placeholder {
-  color: var(--%NS%text-3);
-}
-input[_ngcontent-%COMP%]:focus {
-  outline: none;
-  border-color: var(--%NS%accent);
-  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
-}
-
-.list[_ngcontent-%COMP%] {
-  flex: 1;
-  min-height: 0;
-  margin: 0;
-  padding: 6px;
-  overflow-y: auto;
-  list-style: none;
-}
-.list[hidden][_ngcontent-%COMP%] {
-  display: none;
-}
-
-li[_ngcontent-%COMP%] {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-height: var(--%NS%control-h);
-  padding: 0 10px;
-  border-radius: var(--%NS%radius-sm);
-  color: var(--%NS%text);
-  cursor: pointer;
-}
-
-li.active[_ngcontent-%COMP%] {
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 2px 0 0 var(--%NS%accent);
-}
-
-.title[_ngcontent-%COMP%] {
-  flex: 1;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.group[_ngcontent-%COMP%] {
-  flex-shrink: 0;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-kbd[_ngcontent-%COMP%] {
-  padding: 1px 6px;
-  border: 1px solid var(--%NS%border-strong);
-  border-radius: 4px;
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-  font-family: var(--%NS%font-mono);
-  font-size: 11px;
-}
-
-.empty[_ngcontent-%COMP%] {
-  margin: 0;
-  padding: 16px;
-  color: var(--%NS%text-2);
-}
-
-.help[_ngcontent-%COMP%] {
-  flex-shrink: 0;
-  margin: 0;
-  padding: 8px 12px;
-  border-top: 1px solid var(--%NS%border);
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-
-@media (max-width: 480px) {
-  .group[_ngcontent-%COMP%], 
-   .help[_ngcontent-%COMP%] {
-    display: none;
-  }
-}`]})},ube=[`nav`],dbe=[`main`],fbe=e=>[e],pbe=(e,t)=>t.id;function mbe(e,t){e&1&&(w(),F(0,`svg`,4),L(1,`path`,31),I())}function hbe(e,t){e&1&&(w(),F(0,`svg`,4),L(1,`path`,32)(2,`path`,33)(3,`path`,34)(4,`path`,35)(5,`path`,36)(6,`path`,37),I())}function gbe(e,t){e&1&&(w(),F(0,`svg`,5)(1,`defs`)(2,`linearGradient`,38),L(3,`stop`,39)(4,`stop`,40),I()(),L(5,`path`,41),F(6,`g`,42),L(7,`path`,43)(8,`path`,44)(9,`path`,45)(10,`path`,46),I()())}function _be(e,t){e&1&&(w(),F(0,`svg`,6),L(1,`path`,47)(2,`path`,48)(3,`path`,49)(4,`path`,50),I())}function vbe(e,t){e&1&&(w(),F(0,`svg`,7),L(1,`path`,51),I())}function ybe(e,t){e&1&&(w(),F(0,`svg`,8)(1,`defs`)(2,`linearGradient`,52),L(3,`stop`,53)(4,`stop`,54)(5,`stop`,55)(6,`stop`,56)(7,`stop`,57)(8,`stop`,58),I()(),L(9,`path`,59),I())}function bbe(e,t){e&1&&(w(),F(0,`svg`,9),L(1,`rect`,60),F(2,`g`,61)(3,`defs`)(4,`mask`,62),L(5,`rect`,63),F(6,`g`,64),L(7,`path`,65)(8,`path`,66),I()(),F(9,`clipPath`,67),L(10,`rect`,68),I()(),F(11,`g`,69),L(12,`ellipse`,70),I(),F(13,`g`,71),L(14,`path`,72)(15,`path`,73),I(),F(16,`g`,69),L(17,`ellipse`,74)(18,`ellipse`,75),F(19,`g`,76),L(20,`line`,77)(21,`circle`,78)(22,`line`,79)(23,`circle`,80),I()()()())}function xbe(e,t){if(e&1){let e=B();F(0,`button`,82),H(`click`,function(){let t=S(e).$implicit;return C(W(2).switchTab(t.id))}),L(1,`app-tab-icon`,83),F(2,`span`),K(3),I()()}if(e&2){let e=t.$implicit,n=W(2);G(`active`,n.tab()===e.id),k(`aria-current`,n.tab()===e.id?`page`:null)(`tabindex`,n.rovingTab()===e.id?0:-1),D(),P(`name`,e.id),D(2),q(e.label)}}function Sbe(e,t){if(e&1&&(F(0,`div`,12),M(1,xbe,4,6,`button`,81,pbe),I()),e&2){let e=W();D(),N(e.tabs())}}function Cbe(e,t){if(e&1){let e=B();F(0,`a`,84),H(`click`,function(t){let n=S(e);return C(W().openFullPanel(t,n.tab))}),w(),F(1,`svg`,85),L(2,`rect`,86)(3,`rect`,87)(4,`rect`,88)(5,`rect`,89),I(),K(6,` Open full panel `),I()}e&2&&P(`href`,t.href,Du)}function wbe(e,t){if(e&1){let e=B();F(0,`app-settings`,90),H(`layoutChange`,function(t){return S(e),C(W().setTabLayout(t))})(`themeChange`,function(t){return S(e),C(W().setTheme(t))})(`passiveChange`,function(t){return S(e),C(W().setPassive(t))})(`pillChange`,function(t){return S(e),C(W().setPill(t))}),I()}if(e&2){let e=W();P(`tabs`,e.settingsTabs())(`layout`,e.tabLayout())(`theme`,e.themePreference())(`passive`,e.passive())(`pill`,e.pill())(`hotkey`,e.popupHotkey())(`paletteShortcut`,e.paletteShortcut)(`rpc`,e.rpc())}}function Tbe(e,t){e&1&&L(0,`app-auth-code`,26),e&2&&P(`client`,t)}function Ebe(e,t){if(e&1){let e=B();F(0,`app-connection-error`,91),H(`retry`,function(){return S(e),C(W().retryConnection())}),I()}}function Dbe(e,t){e&1&&(F(0,`p`,27),K(1,`Connecting to the devtools server…`),I())}function Obe(e,t){e&1&&L(0,`app-coming-soon`,28),e&2&&P(`info`,t)}function kbe(e,t){e&1&&(F(0,`p`,27),K(1,`Looking for an Angular Native app…`),I())}function Abe(e,t){e&1&&(K(0,` To turn it on, set `),F(1,`code`),K(2),I(),K(3,` in the devtools options. `)),e&2&&(D(2),q(t))}function jbe(e,t){if(e&1&&(F(0,`p`,29),K(1,` This inspector is turned off in the devtools config (`),F(2,`code`),K(3,`inspectors`),I(),K(4,`). `),A(5,Abe,4,1),F(6,`a`,92),K(7,`About inspectors`),F(8,`span`,93),K(9,` (opens in a new tab)`),I()()()),e&2){let e,t=W();D(5),j((e=t.turnOnSnippet())?5:-1,e),D(),P(`href`,t.inspectorsDocsUrl,Du)}}function Mbe(e,t){if(e&1){let e=B();F(0,`app-dashboard`,101),H(`navigate`,function(t){return S(e),C(W(3).switchTab(t))}),I()}e&2&&P(`rpc`,W(3).rpc())}function Nbe(e,t){if(e&1){let e=B();F(0,`app-timeline`,102),H(`open`,function(t){return S(e),C(W(3).openLink(t))}),I()}e&2&&P(`rpc`,W(3).rpc())}function Pbe(e,t){if(e&1){let e=B();F(0,`app-audit-inspector`,103),H(`showComponent`,function(t){return S(e),C(W(3).showComponent(t))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`canShowComponent`,e.config().inspectors.components)}}function Fbe(e,t){if(e&1){let e=B();F(0,`app-component-tree`,104),H(`focusHandled`,function(){return S(e),C(W(3).componentFocus.set(null))})(`commandHandled`,function(){return S(e),C(W(3).componentCommand.set(null))})(`showForm`,function(t){return S(e),C(W(3).showForm(t))})(`showInjector`,function(t){return S(e),C(W(3).showInjector(t))})(`showSignals`,function(t){return S(e),C(W(3).showSignals(t))})(`showPipe`,function(t){return S(e),C(W(3).showPipe(t))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`focus`,e.componentFocus())(`command`,e.componentCommand())(`canShowInjector`,e.config().inspectors.injectors)(`canShowSignals`,e.config().inspectors.signals)(`canShowPipes`,e.config().inspectors.pipes)}}function Ibe(e,t){if(e&1){let e=B();F(0,`app-route-inspector`,105),H(`showComponent`,function(t){return S(e),C(W(3).showComponent(t))}),I()}e&2&&P(`rpc`,W(3).rpc())}function Lbe(e,t){if(e&1&&L(0,`app-signal-inspector`,97),e&2){let e=W(3);P(`rpc`,e.rpc())(`focus`,e.signalFocus())}}function Rbe(e,t){if(e&1){let e=B();F(0,`app-di-inspector`,106),H(`focusHandled`,function(){return S(e),C(W(3).injectorFocus.set(null))})(`showComponent`,function(t){return S(e),C(W(3).showComponent(t))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`focus`,e.injectorFocus())(`canShowComponent`,e.config().inspectors.components)}}function zbe(e,t){e&1&&L(0,`app-store-inspector`,94),e&2&&P(`rpc`,W(3).rpc())}function Bbe(e,t){e&1&&L(0,`app-query-inspector`,94),e&2&&P(`rpc`,W(3).rpc())}function Vbe(e,t){e&1&&L(0,`app-network-inspector`,94),e&2&&P(`rpc`,W(3).rpc())}function Hbe(e,t){if(e&1){let e=B();F(0,`app-forms-inspector`,107),H(`focusHandled`,function(){return S(e),C(W(3).formFocus.set(null))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`focus`,e.formFocus())}}function Ube(e,t){if(e&1){let e=B();F(0,`app-pipes-inspector`,108),H(`focusHandled`,function(){return S(e),C(W(3).pipeFocus.set(null))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`focus`,e.pipeFocus())(`pageId`,e.pipePage())}}function Wbe(e,t){e&1&&L(0,`app-analog-inspector`,94),e&2&&P(`rpc`,W(3).rpc())}function Gbe(e,t){e&1&&L(0,`app-capacitor-inspector`,94),e&2&&P(`rpc`,W(3).rpc())}function Kbe(e,t){e&1&&L(0,`app-plugins-inspector`,94),e&2&&P(`rpc`,W(3).rpc())}function qbe(e,t){if(e&1){let e=B();F(0,`app-performance-inspector`,103),H(`showComponent`,function(t){return S(e),C(W(3).showComponent(t))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`canShowComponent`,e.config().inspectors.components)}}function Jbe(e,t){e&1&&L(0,`app-build-inspector`,94),e&2&&P(`rpc`,W(3).rpc())}function Ybe(e,t){if(e&1){let e=B();F(0,`app-errors-inspector`,109),H(`showComponent`,function(t){return S(e),C(W(3).showComponent(t))}),I()}if(e&2){let e=W(3);P(`rpc`,e.rpc())(`canShowComponent`,e.config().inspectors.components)(`canExplainInjection`,e.config().inspectors.injectors)}}function Xbe(e,t){if(e&1&&A(0,Mbe,1,1,`app-dashboard`,94)(1,Nbe,1,1,`app-timeline`,94)(2,Pbe,1,2,`app-audit-inspector`,95)(3,Fbe,1,6,`app-component-tree`,96)(4,Ibe,1,1,`app-route-inspector`,94)(5,Lbe,1,2,`app-signal-inspector`,97)(6,Rbe,1,3,`app-di-inspector`,98)(7,zbe,1,1,`app-store-inspector`,94)(8,Bbe,1,1,`app-query-inspector`,94)(9,Vbe,1,1,`app-network-inspector`,94)(10,Hbe,1,2,`app-forms-inspector`,97)(11,Ube,1,3,`app-pipes-inspector`,99)(12,Wbe,1,1,`app-analog-inspector`,94)(13,Gbe,1,1,`app-capacitor-inspector`,94)(14,Kbe,1,1,`app-plugins-inspector`,94)(15,qbe,1,2,`app-performance-inspector`,95)(16,Jbe,1,1,`app-build-inspector`,94)(17,Ybe,1,3,`app-errors-inspector`,100),e&2){let e;j((e=W(2).tab())===`dashboard`?0:e===`timeline`?1:e===`audit`?2:e===`components`?3:e===`routes`?4:e===`signals`?5:e===`injectors`?6:e===`store`?7:e===`queries`?8:e===`network`?9:e===`forms`?10:e===`pipes`?11:e===`analog`?12:e===`capacitor`?13:e===`plugins`?14:e===`performance`?15:e===`build`?16:e===`errors`?17:-1)}}function Zbe(e,t){e&1&&M(0,Xbe,18,1,null,null,eg),e&2&&N(K_(0,fbe,W().scopeKey()))}var Y9=`all`,Qbe=[Y9,...zC],$be={angular:`Angular`,ngrx:`NgRx Store`,analog:`Analog`,"angular-native":`Angular Native`,nativescript:`NativeScript`,capacitor:`Capacitor`},X9={ngrx:`store`,analog:`analog`,capacitor:`capacitor`},Z9={store:`ngrx`,analog:`analog`,capacitor:`capacitor`},Q9={"angular-native":[`components`,`signals`,`injectors`,`store`,`queries`,`pipes`,`errors`]},exe={id:`nativescript`,name:`NativeScript`,badge:`Available`,heading:`Inspect NativeScript apps`,summary:`A NativeScript Angular app reports from the simulator or device to this server, and its components, signals, injectors and NgRx stores show up in the Angular dock.`,color:`#3c5afd`,plansTitle:`Set up an app`,plans:[`Install @pangular-inspector/devtools and @valor/nativescript-websockets`,`Call initNativeScriptOverlay() in main.ts, before the app bootstraps`,`Run npx pangular dev --no-auth in the app, then open the Angular dock`],link:{label:`NativeScript setup guide`,href:`https://pangular-inspector.dev/getting-started/nativescript/`}},txe={id:`capacitor`,name:`Capacitor`,badge:`Available`,heading:`Inspect Capacitor apps`,summary:`An Ionic or Capacitor app runs the browser overlay in its WebView and reports to this server, so it shows up in the Angular dock like a browser tab.`,color:`#119eff`,plansTitle:`Set up an app`,plans:[`With live reload on localhost, load @pangular-inspector/devtools/overlay as in a browser`,`In a bundled build, call initOverlay() from @pangular-inspector/devtools/overlay-manual with this server’s address and connectionMeta`,`Run the app, then come back here for its plugin calls, or open the Angular dock`],link:{label:`Capacitor setup guide`,href:`https://pangular-inspector.dev/guides/capacitor/`}},nxe={id:`analog`,name:`Analog`,badge:`Not in this app`,heading:`This app doesn’t use Analog`,summary:`In an Analog app this dock shows your file routes, server load() and API calls, render modes and route lint.`,color:`#dd0330`,plans:[`Which page, layout and .server.ts files render a URL`,`Every load(), server function and API call with timing`,`SSR, prerendered or client only, per page`],link:{label:`Get started with Analog`,href:`https://analogjs.org/docs/getting-started`}},rxe={id:`angular-native`,name:`Angular Native`,badge:`Not connected`,heading:`No Angular Native app is connected`,summary:`Start the overlay in your Angular Native app and run this server with --no-auth. The tabs fill as soon as the app reports.`,color:`#e11d48`,plans:[`The component tree, with the view outlined on the device`,`Signals and injectors of the running app`,`Live @ngrx/signals and @ngrx/store state`],link:{label:`Set up Angular Native`,href:`https://pangular-inspector.dev/getting-started/angular-native/`}},$9=[1e3,2e3,5e3,1e4];function ixe(){let e=new URLSearchParams(location.search).get(`view`);return zC.find(t=>t===e)??null}vre(class e{analog=T(!1);allTabs=ew.map(({id:e,label:t})=>({id:e,label:t}));view=T(ixe());viewAccent=X(()=>Nye(this.view(),this.themeService.current()));title=X(()=>{let e=this.view();return e?$be[e]:`Pangular Inspector`});mainLabel=X(()=>this.tab()===`settings`?`Settings`:this.availableTabs().find(e=>e.id===this.tab())?.label??this.title());analogKnown=T(!1);capacitorReporting=T(!1);pluginsReporting=T(!1);capacitorKnown=T(!1);nativePageId=T(null);nativeKnown=T(!1);scopeKey=X(()=>this.view()===`angular-native`?this.nativePageId()??``:``);comingSoon=X(()=>{let e=this.view();if(e===`analog`)return this.analogKnown()&&!this.analog()?nxe:void 0;if(e===`nativescript`)return exe;if(e===`capacitor`)return this.config().inspectors.capacitor&&this.capacitorKnown()&&!this.capacitorReporting()?txe:void 0;if(e===`angular-native`)return this.nativeKnown()&&!this.nativePageId()?rxe:void 0});config=X(()=>TT(this.rpc()));tabEnabled=MT;inspectorsDocsUrl=jT;turnOnSnippet=X(()=>{let e=AT(this.tab());return e?`inspectors: {${e}: true}`:null});availableTabs=X(()=>{if(this.comingSoon())return[];let e=this.view(),t=e?X9[e]:void 0,n=this.allTabs.filter(e=>MT(e.id,this.config()));if(t)return n.filter(e=>e.id===t);let r=e?Q9[e]:void 0;return r?n.filter(e=>r.includes(e.id)):n.filter(t=>(t.id!==`analog`||this.analog())&&(t.id!==`capacitor`||this.capacitorReporting())&&(t.id!==`plugins`||this.pluginsReporting())&&!(e===`angular`&&Z9[t.id]))});tabLayout=T(d_e());tabs=X(()=>{let e=this.tab(),t=__e(this.availableTabs(),this.tabLayout(),e);return this.rpc()?t:t.filter(t=>t.id===`dashboard`||t.id===e)});settingsTabs=X(()=>this.availableTabs());rovingTab=X(()=>{let e=this.tabs(),t=this.tab();return e.some(e=>e.id===t)?t:e[0]?.id});onNavKey(e){let t=this.nav()?.nativeElement;if(!t||e.altKey||e.ctrlKey||e.metaKey)return;let n=[...t.querySelectorAll(`button`)],r=n.indexOf(document.activeElement);if(r<0)return;let i=n.length-1,a={ArrowRight:r===i?0:r+1,ArrowLeft:r===0?i:r-1,Home:0,End:i},o=Object.hasOwn(a,e.key)?a[e.key]:-1;o<0||(e.preventDefault(),n[o].focus())}fullPanelLink=X(()=>{let e=this.view();if(!e||location.protocol===`chrome-extension:`)return null;let t=this.comingSoon()?`dashboard`:X9[e]??this.tab();return{tab:t,href:k_e(location.href,t)}});tab=Q(()=>{let e=this.view();return e&&(X9[e]??Q9[e]?.[0])||`dashboard`});rpc=T(null);openedDock=T(null);connected=T(!1);connectionFailed=T(!1);pairing=T(null);connectedNote=T(``);hiddenPages=T([]);pageId=tT();backgroundNote=X(()=>{let e=this.hiddenPages();return this.pageId?e.includes(this.pageId)?`Page in background, showing the last data.`:``:e.length?e.length===1?`A page is in the background, showing its last data.`:`${e.length} pages are in the background, showing their last data.`:``});stopVisibility=()=>{};stopNative=()=>{};stopCapacitor=()=>{};stopPlugins=()=>{};stopFollowing=()=>{};stopHighlights=()=>{};nav=hv(`nav`);main=hv(`main`);injector=x(bs);themeService=x(C_e);navObserver;navFade=T({start:!1,end:!1});memory=x(cJ);stopScrollRestore=null;restoringScroll=!1;constructor(){x(vj).use(this.rpc),this.memory.useView(()=>this.tabScope()),Sv(()=>{let e=this.tab(),t=this.main()?.nativeElement;t&&this.rpc()&&Z(()=>{this.stopScrollRestore?.(),this.restoringScroll=!0,this.stopScrollRestore=uJ(t,this.memory.read(`${e}:scroll`)??0,void 0,()=>this.restoringScroll=!1)})}),cd(()=>{let e=this.nav()?.nativeElement;e&&typeof ResizeObserver<`u`&&(this.navObserver=new ResizeObserver(()=>this.measureNav()),this.navObserver.observe(e))}),Sv(()=>{this.tab(),this.tabs(),Z(()=>{this.revealActiveTab(),this.measureNav()})}),E(()=>{this.connected()&&Z(()=>this.sendPill(this.pill()))}),E(()=>{let e=this.openedDock(),t=this.rpc();e&&t&&Z(()=>void sT(t,`hub-dock-seen`,BC(e.dock)))}),E(()=>{let e=this.themeService.current();Z(()=>{try{window.parent!==window&&B5(window.parent.document,e)}catch{}})})}measureNav(){let e=this.nav()?.nativeElement;if(!e)return;let t=e.scrollWidth-e.clientWidth,n=e.scrollLeft>1,r=t>1&&e.scrollLeft<t-1,i=this.navFade();(i.start!==n||i.end!==r)&&this.navFade.set({start:n,end:r})}revealActiveTab(){let e=this.nav()?.nativeElement,t=e?.querySelector(`button.active`);if(!e||!t||e.scrollWidth<=e.clientWidth)return;let n=t.offsetLeft-24,r=t.offsetLeft+t.offsetWidth+24-e.clientWidth;e.scrollLeft>n?e.scrollLeft=Math.max(0,n):e.scrollLeft<r&&(e.scrollLeft=r)}ngOnInit(){this.stopFollowing=e7(Qbe,e=>{this.openedDock.set({dock:e}),e===Y9?this.showFullPanel():this.showView(e)});let e=i7(location.hash,a7(this.tabScope()),[...this.availableTabs().map(e=>e.id),`settings`]);e?(this.tab.set(e),this.restoreLinkItem()):!this.view()&&i7(location.hash,a7(this.tabScope()),[`capacitor`])===`capacitor`?this.restoreCapacitor=!0:!this.view()&&i7(location.hash,a7(this.tabScope()),[`analog`])===`analog`&&(this.restoreAnalog=!0),this.stopHighlights=lT(()=>this.rpc()),this.connect()}connecting=!1;pendingClient=null;retries=0;retryTimer;connect(){if(this.connecting||this.pendingClient||this.rpc()||this.pairing())return;this.connecting=!0,clearTimeout(this.retryTimer);let e=P_e();this.dropped&&uT();let t=z_e(e);LC({...e?{baseURL:e}:{},...t.token?{authToken:t.token}:{},cacheOptions:aT(),simpleAuth:!1}).then(e=>{if(this.connecting=!1,this.destroyed){e.close?.();return}this.pendingClient=e;let n=n=>{if(e===this.pendingClient||e===this.rpc()||e===this.pairing()){if(this.pendingClient===e&&n!==`connecting`&&(this.pendingClient=null),n===`connected`){let n=this.pairing()===e;this.pairing.set(null),setTimeout(()=>t.remember(e.connection?.authToken)),this.ready(e),this.connected.set(this.rpc()===e),n&&(this.connectedNote.update(e=>e===`Connected.`?`Connected.\xA0`:`Connected.`),this.focusCurrentTab())}else n===`unauthorized`?(this.connected.set(!1),this.rpc()===e&&this.rpc.set(null),this.pairing.set(e)):(n===`disconnected`||n===`error`)&&(this.connected.set(!1),this.rpc()===e&&this.rpc.set(null),this.pairing()===e&&this.pairing.set(null),e.close?.(),this.retryLater())}};e.events.on(`connection:status`,n),e.status!==`connecting`&&n(e.status)},()=>{this.connecting=!1,!this.destroyed&&(this.analogKnown.set(!0),this.nativeKnown.set(!0),this.retryLater())})}ready(e){this.rpc()===e||this.destroyed||(this.retries=0,this.connectionFailed.set(!1),this.refocusOnConnect&&this.focusCurrentTab(),this.refocusOnConnect=!1,this.rpc.set(e),this.listenForServer(e),this.watchVisibility(e),this.watchAngularNative(e),this.watchCapacitor(e),this.watchPlugins(e),e.scope(`pangular`).rpc.call(`analog-project`).then(e=>{let t=!!e?.analog;this.analog.set(t),this.analogKnown.set(!0),t&&this.restoreAnalog&&MT(`analog`,this.config())&&this.tab.set(`analog`),this.restoreAnalog=!1,!t&&this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)},()=>{this.analogKnown.set(!0),this.restoreAnalog=!1,this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)}))}dropped=!1;retryLater(){if(this.destroyed)return;this.dropped=!0,this.connectionFailed.set(!0);let e=$9[Math.min(this.retries++,$9.length-1)];clearTimeout(this.retryTimer),this.retryTimer=setTimeout(()=>this.connect(),e)}retryConnection(){this.retries=0,this.refocusOnConnect=!0,this.connect()}refocusOnConnect=!1;destroyed=!1;ngOnDestroy(){this.destroyed=!0,clearTimeout(this.retryTimer),this.stopNative(),this.stopCapacitor(),this.stopPlugins(),this.stopFollowing(),this.stopVisibility(),this.stopHighlights(),this.navObserver?.disconnect()}showView(e){if(e===this.view())return;eT(e===`angular-native`?this.nativePageId():null),this.view.set(e);let t=new URL(location.href);t.searchParams.set(`view`,e),t.hash=``,history.replaceState(history.state,``,t)}showFullPanel(e){if(!this.view())return;eT(null),this.view.set(null);let t=new URL(location.href);t.searchParams.delete(`view`),t.hash=e?`tab=${e}`:``,history.replaceState(history.state,``,t);let n=e??a7(this.tabScope()),r=this.availableTabs().map(e=>e.id),i=i7(t.hash,n,r);i?this.setTab(i):n===`capacitor`&&(this.restoreCapacitor=!0)}openFullPanel(e,t){A_e(e)&&t7()&&(e.preventDefault(),this.showFullPanel(t),this.focusCurrentTab(),n7(Y9))}paletteOpen=T(!1);paletteShortcut=J5()?`⌘K`:`Ctrl+K`;themePreference=X(()=>this.themeService.preference());passive=T(p_e());pill=T(h_e());popupHotkey=X(()=>{let e=this.config().popup.hotkey;return e!==!1&&$C(e,J5())});popup=b_e();poppedOut=!!Y5();tabBeforeSettings=null;componentCommand=Q({source:this.tab,computation:()=>null});paletteCommands=X(()=>{let e=new Set(this.availableTabs().map(e=>e.id)),t=e.has(`components`)&&!!this.rpc();return cw(this.config()).filter(n=>n.id.startsWith(`tab:`)?e.has(n.id.slice(4)):n.id===`popout:return`?this.poppedOut:n.popupOnly?this.popup:n.id===`pick-component`||n.id.startsWith(`cd-`)?t:!0)});onGlobalKey(e){if(e.defaultPrevented)return;let t=J5(),n=this.config().popup.hotkey;if(this.popup&&n&&!e.repeat&&QC(e,n,t)){e.preventDefault(),this.postToPopup({type:`pangular:popup-close`});return}!(t?e.metaKey&&!e.ctrlKey:e.ctrlKey&&!e.metaKey)||e.altKey||e.shiftKey||e.key.toLowerCase()!==`k`||e.repeat||(e.preventDefault(),!this.paletteOpen()&&this.openPalette())}openPalette(){t7()&&O_e()||this.paletteOpen.set(!0)}runCommand(e){if(e.startsWith(`tab:`)){let t=e.slice(4);this.availableTabs().some(e=>e.id===t)&&this.switchTab(t);return}if(e.startsWith(`theme:`)){let t=e.slice(6);(t===`system`||t===`light`||t===`dark`)&&this.setTheme(t);return}if(e===`dock:reset-size`){this.postToPopup({type:`pangular:popup-dock-size`});return}if(e.startsWith(`dock:`)){this.postToPopup({type:`pangular:popup-dock`,mode:e.slice(5)});return}if(e===`popout`){this.postToPopup({type:`pangular:popup-popout`});return}if(e===`popout:return`){S_e();return}let t={"pick-component":`pick`,"cd-record-start":`cd-start`,"cd-record-stop":`cd-stop`,"cd-clear":`cd-clear`};e===`settings`?this.tab()!==`settings`&&this.toggleSettings():t[e]&&this.availableTabs().some(e=>e.id===`components`)&&(this.tab()!==`components`&&this.switchTab(`components`),this.componentCommand.set({kind:t[e]}))}toggleSettings(){if(this.tab()===`settings`){let e=this.tabBeforeSettings,t=this.availableTabs().map(e=>e.id);this.switchTab(e&&t.includes(e)?e:t[0]??`dashboard`);return}this.tabBeforeSettings=this.tab(),this.switchTab(`settings`)}setTabLayout(e){this.tabLayout.set(e),f_e(e)}setTheme(e){this.themeService.setPreference(e)}setPassive(e){this.passive.set(e),m_e(e),this.postToPopup({type:`pangular:popup-passive`,passive:e})}setPill(e){this.pill.set(e),g_e(e),this.sendPill(e)}sendPill(e){let t={type:`pangular:popup-pill`,pill:e};this.postToPopup(t),X5(t)}postToPopup(e){for(let{win:t,origin:n}of Q5())try{t.postMessage(e,n)}catch{}}openLink(e){let t=e.tab;if(!this.availableTabs().some(e=>e.id===t))return!1;if(this.tab()!==t&&this.switchTab(t),e.id&&Object.hasOwn(rw,t)){let n=e.page;t===`components`?this.componentFocus.set({id:e.id,pageId:n}):t===`injectors`?this.injectorFocus.set({componentId:e.id,pageId:n}):t===`signals`?this.signalFocus.set({componentId:e.id,pageId:n}):t===`forms`&&this.formFocus.set({id:e.id})}return history.replaceState(history.state,``,aw(e)),!0}followHash(){let e=ow(location.hash);if(e){if(e.tab===`settings`){this.tab()!==`settings`&&this.toggleSettings();return}this.openLink(e)}}listenForServer(e){let t=e.scope(`pangular`).rpc,n=()=>typeof document>`u`||document.visibilityState!==`hidden`;try{t.register({name:`panel-command`,type:`event`,jsonSerializable:!0,handler:e=>{let t=e?.command;typeof t==`string`&&n()&&this.runCommand(t)}}),t.register({name:`open-in-panel`,type:`event`,jsonSerializable:!0,handler:e=>{let t=e;n()&&typeof t?.tab==`string`&&this.openLink({tab:t.tab,...typeof t.id==`string`?{id:t.id}:{},...typeof t.page==`string`?{page:t.page}:{}})}})}catch{}}restoreLinkItem(){let e=ow(location.hash);if(!e?.id||e.tab!==this.tab())return;let t=e.tab;t===`components`?this.componentFocus.set({id:e.id,pageId:e.page}):t===`injectors`?this.injectorFocus.set({componentId:e.id,pageId:e.page}):t===`signals`?this.signalFocus.set({componentId:e.id,pageId:e.page}):t===`forms`&&this.formFocus.set({id:e.id})}formFocus=T(null);componentFocus=Q({source:this.tab,computation:()=>null});pipeFocus=Q({source:this.tab,computation:()=>null});pipePage=Q({source:this.tab,computation:()=>null});showPipe(e){this.config().inspectors.pipes&&(this.switchTab(`pipes`),this.pipeFocus.set(e.name),this.pipePage.set(e.pageId??null))}showForm(e){this.formFocus.set({id:e}),this.switchTab(`forms`)}injectorFocus=Q({source:this.tab,computation:()=>null});signalFocus=Q({source:this.tab,computation:()=>null});showSignals(e){if(!this.config().inspectors.signals)return;let t=e.pageId?{page:e.pageId}:{};this.openLink({tab:`signals`,id:e.componentId,...t})&&this.signalFocus.set(e)}showInjector(e){this.config().inspectors.injectors&&(this.switchTab(`injectors`),this.injectorFocus.set(e))}showComponent(e){this.config().inspectors.components&&(this.switchTab(`components`),this.componentFocus.set(e))}inspectFromPanel({source:e,origin:t,data:n}){if(e!==window.parent||t!==location.origin)return;let r=n;r?.type===`pangular:inspect-component`&&typeof r.id==`string`&&this.tab()===`components`&&this.config().inspectors.components&&this.componentFocus.set({id:r.id})}switchTab(e){let t=Z9[e];if(this.view()===`angular`&&t){this.activateDock(t,e);return}this.setTab(e),history.replaceState(history.state,``,`#tab=${e}`)}restoreAnalog=!1;restoreCapacitor=!1;setTab(e){this.restoreAnalog=!1,this.restoreCapacitor=!1,this.keepFocus(),this.tab.set(e),j_e(this.tabScope(),e)}tabScope(){return this.view()??`panel`}rememberScroll(){if(this.restoringScroll)return;let e=this.main()?.nativeElement;e&&this.memory.write(`${this.tab()}:scroll`,Math.round(e.scrollTop))}async watchAngularNative(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`component-tree`),n=e=>{let t=e?.pages,n=mD(t,this.nativePageId());this.view()===`angular-native`&&eT(n),this.nativePageId.set(n),this.nativeKnown.set(!0)};n(t.value()),this.stopNative(),this.stopNative=t.on(`updated`,n)}catch{this.nativeKnown.set(!0)}}async watchPlugins(e){let t=!this.view()&&i7(location.hash,a7(this.tabScope()),[`plugins`])===`plugins`;try{let n=await e.scope(`pangular`).rpc.sharedState(`plugins`),r=e=>{if(e===void 0)return;let n=yhe(e);this.pluginsReporting.set(n),n&&t&&MT(`plugins`,this.config())&&this.tab.set(`plugins`),n&&(t=!1),!n&&this.tab()===`plugins`&&!this.view()&&this.tab.set(`dashboard`)};r(n.value()),this.stopPlugins(),this.stopPlugins=n.on(`updated`,r)}catch{this.pluginsReporting.set(!1)}}async watchCapacitor(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`capacitor`),n=e=>{if(e===void 0)return;let t=J8(e).length>0;this.capacitorReporting.set(t),this.capacitorKnown.set(!0),t&&this.restoreCapacitor&&MT(`capacitor`,this.config())&&(this.restoreCapacitor=!1,this.tab.set(`capacitor`)),!t&&this.tab()===`capacitor`&&!this.view()&&this.tab.set(`dashboard`)};n(t.value()),this.stopCapacitor(),this.stopCapacitor=t.on(`updated`,n)}catch{this.capacitorReporting.set(!1),this.capacitorKnown.set(!0)}}async watchVisibility(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`page-visibility`),n=e=>{let t=e?.hidden;this.hiddenPages.set(Array.isArray(t)?t.filter(e=>typeof e==`string`):[])};n(t.value()),this.stopVisibility(),this.stopVisibility=t.on(`updated`,n)}catch{}}keepFocus(){let e=document.activeElement,t=this.main()?.nativeElement;(!e||e===document.body||t?.contains(e))&&this.focusCurrentTab()}focusCurrentTab(){cd(()=>{let e=document.activeElement;e&&e!==document.body||(this.nav()?.nativeElement.querySelector(`button.active`)??this.main()?.nativeElement)?.focus()},{injector:this.injector})}async activateDock(e,t){if(await n7(e))return;if(window.parent===window){this.keepFocus(),this.showView(e);return}let n=this.rpc();if(!n?.call){this.setTab(t);return}try{await n.call(`hub:docks:activate`,{dockId:BC(e)}),this.keepFocus(),this.showView(e)}catch{this.setTab(t)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=O({type:e,selectors:[[`app-root`]],viewQuery:function(e,t){e&1&&Mg(t.nav,ube,5)(t.main,dbe,5),e&2&&Ng(2)},hostVars:4,hostBindings:function(e,t){e&1&&H(`message`,function(e){return t.inspectFromPanel(e)},Ou)(`hashchange`,function(){return t.followHash()},Ou)(`keydown`,function(e){return t.onGlobalKey(e)},ku),e&2&&t_(`--%NS%accent`,t.viewAccent()?.accent??null)(`--%NS%accent-text`,t.viewAccent()?.text??null)},decls:41,vars:30,consts:[[`nav`,``],[`main`,``],[1,`brand`],[1,`mark`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 256 256`,`aria-hidden`,`true`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 32 32`,`aria-hidden`,`true`],[`width`,`24`,`height`,`17`,`viewBox`,`0 0 256 182`,`aria-hidden`,`true`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 24 24`,`fill`,`currentColor`,`aria-hidden`,`true`],[`width`,`20`,`height`,`22`,`viewBox`,`0 0 223 236`,`aria-hidden`,`true`],[`width`,`30`,`height`,`30`,`viewBox`,`0 0 500 500`,`aria-hidden`,`true`],[1,`title`],[`aria-label`,`Inspectors`,3,`scroll`,`keydown`],[`role`,`toolbar`,`aria-label`,`Inspectors`,`aria-orientation`,`horizontal`,1,`tab-bar`],[1,`full-panel`,3,`href`],[1,`shell-actions`],[`type`,`button`,`aria-haspopup`,`dialog`,1,`shell-btn`,3,`click`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z`],[`type`,`button`,`aria-label`,`Settings`,`title`,`Settings`,1,`shell-btn`,3,`click`],[`name`,`settings`],[`role`,`status`,1,`status`],[`aria-hidden`,`true`,1,`dot`],[`tabindex`,`0`,3,`scroll`],[`role`,`status`,1,`background-note`],[`role`,`status`,1,`sr-only`],[3,`tabs`,`layout`,`theme`,`passive`,`pill`,`hotkey`,`paletteShortcut`,`rpc`],[3,`client`],[`role`,`status`,1,`turned-off`],[3,`info`],[1,`turned-off`],[3,`openChange`,`picked`,`commands`,`open`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[`id`,`an-mark-grad`,`x1`,`0`,`y1`,`0`,`x2`,`1`,`y2`,`1`],[`offset`,`0`,`stop-color`,`#f0224f`],[`offset`,`1`,`stop-color`,`#c4002d`],[`d`,`M16 0C27.2 0 32 4.8 32 16S27.2 32 16 32 0 27.2 0 16 4.8 0 16 0Z`,`fill`,`url(#an-mark-grad)`],[`transform`,`translate(6.4 6.4) scale(0.8)`,`fill`,`#fff`],[`d`,`M14.8486 0L23.138 16.8551L23.9996 3.99892L14.8486 0Z`],[`d`,`M16.9875 17.7114H7.01272L5.73926 20.627L12.0001 24L18.261 20.627L16.9875 17.7114Z`],[`d`,`M8.72168 13.9298H15.2812L11.9997 6.39575L8.72168 13.9298Z`],[`d`,`M9.15103 0L0 3.99892L0.861556 16.8551L9.15103 0Z`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`d`,`M12.024.017V0L12 .008L11.976 0v.017L.812 3.892l1.605 14.875l9.559 5.207V24l.024-.013l.024.013v-.026l9.559-5.207l1.605-14.875zm6.868 14.244q-1.64 3.948-6.031 4.166c-2.829 0-4.661-1.7-4.66-1.7q-1.745-1.359-2.398-3.417c-.695-.76-.702-.841-.774-1.145c-.072-.303.045-.388.249-.685q.204-.298.098-.85q-.26-.36-.3-1.128q0-.37.496-.783q.495-.413.607-.632q.083-.119.065-1.031q-.006-.897.995-.975c1-.08 1.565-.832 1.879-1.174c.21-.228.52-.339.91-.341c.551-.026 1.052.185 1.484.62c1.075-.055 2.176.235 3.292.863q2.379 1.414 2.596 3.055q-.257 2.158-5.788-.113q-2.895.819-2.846 3.552q0 2.508 2.422 3.643c-.787-.772-1.122-1.422-1.01-1.959q2.456 2.906 5.588 2.173c-.92.032-1.65-.264-2.198-.893q2.116-.05 3.998-1.972c-.724.576-1.482.794-2.284.657q3.26-2.563 2.307-5.98l-.002-.006a3.02 3.02 0 0 1 .788 2.03q.023 1.175-.795 2.477q.613-.478 1.413-2.047c.23 2.117-.625 3.724-2.574 4.825q.934-.085 2.473-1.23m-5.567-6.63a.319.319 0 1 1 .638 0a.319.319 0 0 1-.638 0`],[`id`,`ng-grad`,`x1`,`49`,`x2`,`226`,`y1`,`214`,`y2`,`130`,`gradientUnits`,`userSpaceOnUse`],[`stop-color`,`#E40035`],[`offset`,`.24`,`stop-color`,`#F60A48`],[`offset`,`.352`,`stop-color`,`#F20755`],[`offset`,`.494`,`stop-color`,`#DC087D`],[`offset`,`.745`,`stop-color`,`#9717E7`],[`offset`,`1`,`stop-color`,`#6C00F5`],[`fill`,`url(#ng-grad)`,`d`,`m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z`],[`width`,`500`,`height`,`500`,`rx`,`112`,`fill`,`#1c1a17`],[`transform`,`translate(250 252) scale(1.38) translate(-120 -129)`],[`id`,`pi-mark-mask`],[`x`,`-60`,`y`,`-60`,`width`,`360`,`height`,`380`,`fill`,`#fff`],[`fill`,`none`,`stroke`,`#000`,`stroke-width`,`30`,`stroke-linejoin`,`miter`],[`d`,`M88 66 V196`],[`d`,`M88 66 H143 L170 98 L143 130 H88 Z`],[`id`,`pi-mark-clip`],[`x`,`-40`,`y`,`129`,`width`,`320`,`height`,`200`],[`transform`,`rotate(-10 120 129)`],[`cx`,`120`,`cy`,`129`,`rx`,`128`,`ry`,`34`,`fill`,`none`,`stroke`,`#78350f`,`stroke-width`,`10`],[`mask`,`url(#pi-mark-mask)`],[`fill`,`#fbbf24`,`d`,`M120 5 L2 46 L22 198 L120 253 Z`],[`fill`,`#f59e0b`,`d`,`M120 5 L238 46 L218 198 L120 253 Z`],[`clip-path`,`url(#pi-mark-clip)`,`cx`,`120`,`cy`,`129`,`rx`,`128`,`ry`,`34`,`fill`,`none`,`stroke`,`#1c1a17`,`stroke-width`,`22`],[`clip-path`,`url(#pi-mark-clip)`,`cx`,`120`,`cy`,`129`,`rx`,`128`,`ry`,`34`,`fill`,`none`,`stroke`,`#fde68a`,`stroke-width`,`10`],[`transform`,`translate(230.9 146.0) rotate(10) scale(1.5) translate(-4 -4)`],[`x1`,`9`,`y1`,`9`,`x2`,`21`,`y2`,`21`,`stroke`,`#1c1a17`,`stroke-width`,`14`,`stroke-linecap`,`round`],[`r`,`16`,`fill`,`#1c1a17`],[`x1`,`9`,`y1`,`9`,`x2`,`21`,`y2`,`21`,`stroke`,`#fde68a`,`stroke-width`,`7`,`stroke-linecap`,`round`],[`r`,`12`,`fill`,`#1c1a17`,`stroke`,`#fde68a`,`stroke-width`,`5`],[`type`,`button`,3,`active`],[`type`,`button`,3,`click`],[3,`name`],[1,`full-panel`,3,`click`,`href`],[`width`,`14`,`height`,`14`,`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`x`,`3`,`y`,`3`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[`x`,`14`,`y`,`3`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[`x`,`3`,`y`,`14`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[`x`,`14`,`y`,`14`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[3,`layoutChange`,`themeChange`,`passiveChange`,`pillChange`,`tabs`,`layout`,`theme`,`passive`,`pill`,`hotkey`,`paletteShortcut`,`rpc`],[3,`retry`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`sr-only`],[3,`rpc`],[3,`rpc`,`canShowComponent`],[3,`rpc`,`focus`,`command`,`canShowInjector`,`canShowSignals`,`canShowPipes`],[3,`rpc`,`focus`],[3,`rpc`,`focus`,`canShowComponent`],[3,`rpc`,`focus`,`pageId`],[3,`rpc`,`canShowComponent`,`canExplainInjection`],[3,`navigate`,`rpc`],[3,`open`,`rpc`],[3,`showComponent`,`rpc`,`canShowComponent`],[3,`focusHandled`,`commandHandled`,`showForm`,`showInjector`,`showSignals`,`showPipe`,`rpc`,`focus`,`command`,`canShowInjector`,`canShowSignals`,`canShowPipes`],[3,`showComponent`,`rpc`],[3,`focusHandled`,`showComponent`,`rpc`,`focus`,`canShowComponent`],[3,`focusHandled`,`rpc`,`focus`],[3,`focusHandled`,`rpc`,`focus`,`pageId`],[3,`showComponent`,`rpc`,`canShowComponent`,`canExplainInjection`]],template:function(e,t){if(e&1){let e=B();F(0,`header`)(1,`h1`,2)(2,`span`,3),A(3,mbe,2,0,`:svg:svg`,4)(4,hbe,7,0,`:svg:svg`,4)(5,gbe,11,0,`:svg:svg`,5)(6,_be,5,0,`:svg:svg`,6)(7,vbe,2,0,`:svg:svg`,7)(8,ybe,10,0,`:svg:svg`,8)(9,bbe,24,0,`:svg:svg`,9),I(),F(10,`span`,10),K(11),I()(),F(12,`nav`,11,0),H(`scroll`,function(){return t.measureNav()})(`keydown`,function(e){return t.onNavKey(e)}),A(14,Sbe,3,0,`div`,12),I(),A(15,Cbe,7,1,`a`,13),F(16,`span`,14)(17,`button`,15),H(`click`,function(){return t.openPalette()}),w(),F(18,`svg`,16),L(19,`path`,17),I()(),fs(),F(20,`button`,18),H(`click`,function(){return t.toggleSettings()}),L(21,`app-tab-icon`,19),I()(),F(22,`span`,20)(23,`span`,21),L(24,`span`),I(),K(25),I()(),F(26,`main`,22,1),H(`scroll`,function(){return t.rememberScroll()}),F(28,`p`,23),K(29),I(),F(30,`p`,24),K(31),I(),A(32,wbe,1,8,`app-settings`,25)(33,Tbe,1,1,`app-auth-code`,26)(34,Ebe,1,0,`app-connection-error`)(35,Dbe,2,0,`p`,27)(36,Obe,1,1,`app-coming-soon`,28)(37,kbe,2,0,`p`,27)(38,jbe,10,2,`p`,29)(39,Zbe,2,2),I(),F(40,`app-command-palette`,30),M_(`openChange`,function(n){return S(e),j_(t.paletteOpen,n)||(t.paletteOpen=n),C(n)}),H(`picked`,function(e){return t.runCommand(e)}),I()}if(e&2){let e,n;D(2),G(`ng-mark`,t.view()===`angular`)(`pi-mark`,!t.view()),D(),j(t.view()===`nativescript`?3:t.view()===`capacitor`?4:t.view()===`angular-native`?5:t.view()===`analog`?6:t.view()===`ngrx`?7:t.view()===`angular`?8:9),D(7),G(`ng-text`,t.view()===`angular`),D(),q(t.title()),D(),G(`fade-start`,t.navFade().start)(`fade-end`,t.navFade().end),D(2),j(t.availableTabs().length>1?14:-1),D(),j((e=t.fullPanelLink())?15:-1,e),D(2),k(`aria-label`,`Command palette (`+t.paletteShortcut+`)`)(`title`,`Command palette (`+t.paletteShortcut+`)`),D(3),G(`active`,t.tab()===`settings`),k(`aria-pressed`,t.tab()===`settings`),D(2),G(`connected`,t.connected())(`failed`,t.connectionFailed()),D(3),J(` `,t.connected()?`Live`:t.connectionFailed()?`Disconnected`:t.pairing()?`Code needed`:`Connecting…`,` `),D(),k(`aria-label`,t.mainLabel()),D(3),q(t.backgroundNote()),D(2),q(t.connectedNote()),D(),j(t.tab()===`settings`?32:(n=t.pairing())?33:t.connectionFailed()?34:t.rpc()?(n=t.comingSoon())?36:t.view()===`angular-native`&&!t.nativePageId()?37:t.tabEnabled(t.tab(),t.config())?39:38:35,n),D(8),P(`commands`,t.paletteCommands()),A_(`open`,t.paletteOpen)}},dependencies:[PE,CI,AV,sW,zK,YX,UZ,J1,S2,Vae,gle,hde,mpe,zpe,lme,She,fge,s_e,Tle,QT,ebe,lbe,kye,jye],styles:[`[_nghost-%COMP%] {
-  --%NS%accent-soft: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
-  --%NS%accent-line: color-mix(in srgb, var(--%NS%accent) var(--%NS%accent-line-amount), transparent);
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  height: 100dvh;
-  min-width: 0;
-  background: radial-gradient(900px 300px at 10% -10%, color-mix(in srgb, var(--%NS%accent) 7%, transparent), transparent 70%), var(--%NS%bg);
-}
-
-header[_ngcontent-%COMP%] {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 8px 16px;
-  height: 45px;
-  padding: 0 16px;
-  background: color-mix(in srgb, var(--%NS%surface) 82%, transparent);
-  backdrop-filter: blur(12px) saturate(1.3);
-  border-bottom: 1px solid var(--%NS%border);
-}
-
-.brand[_ngcontent-%COMP%] {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  margin: 0;
-  color: var(--%NS%accent);
-  font-size: 15px;
-  font-weight: 650;
-  line-height: 1.2;
-  letter-spacing: -0.01em;
-  white-space: nowrap;
-}
-
-.title[_ngcontent-%COMP%] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mark[_ngcontent-%COMP%] {
-  display: grid;
-  flex-shrink: 0;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--%NS%accent) 8%, transparent);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--%NS%accent) 28%, transparent);
-}
-
-.mark.pi-mark[_ngcontent-%COMP%] {
-  background: none;
-  box-shadow: none;
-}
-
-.mark.ng-mark[_ngcontent-%COMP%] {
-  background: linear-gradient(135deg, color-mix(in srgb, #f60a48 12%, transparent), color-mix(in srgb, #9717e7 12%, transparent));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc087d 34%, transparent);
-}
-
-.ng-text[_ngcontent-%COMP%] {
-  background: linear-gradient(90deg, #ff4d75 0%, #f23d9a 45%, #c06bf5 80%, #a98bff 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-}
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme=dark])   [_nghost-%COMP%]   .ng-text[_ngcontent-%COMP%] {
-    background-image: linear-gradient(90deg, #be123c 0%, #a21caf 50%, #6d28d9 100%);
-  }
-}
-:root[data-theme=light]   [_nghost-%COMP%]   .ng-text[_ngcontent-%COMP%] {
-  background-image: linear-gradient(90deg, #be123c 0%, #a21caf 50%, #6d28d9 100%);
-}
-
-nav[_ngcontent-%COMP%] {
-  position: relative;
-  display: flex;
-  flex: 0 1 auto;
-  flex-wrap: nowrap;
-  gap: 2px;
-  min-width: 0;
-  height: 34px;
-  padding: 2px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-x: contain;
-  scroll-padding-inline: 24px;
-  scrollbar-width: none;
-  border: 1px solid var(--%NS%border);
-  border-radius: 10px;
-  background: var(--%NS%bg);
-}
-
-nav[_ngcontent-%COMP%]::-webkit-scrollbar {
-  display: none;
-}
-
-nav.fade-start[_ngcontent-%COMP%] {
-  mask-image: linear-gradient(90deg, transparent, #000 28px);
-}
-
-nav.fade-end[_ngcontent-%COMP%] {
-  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
-}
-
-nav.fade-start.fade-end[_ngcontent-%COMP%] {
-  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
-}
-
-nav[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.tab-bar[_ngcontent-%COMP%] {
-  display: contents;
-}
-
-nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 6px;
-  height: 28px;
-  padding: 0 10px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--%NS%text-2);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease), box-shadow 0.16s var(--%NS%ease), transform 0.12s var(--%NS%ease);
-}
-
-nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   app-tab-icon[_ngcontent-%COMP%] {
-  color: var(--%NS%text-3);
-  transition: color 0.16s var(--%NS%ease);
-}
-
-nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text);
-}
-
-nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover   app-tab-icon[_ngcontent-%COMP%] {
-  color: var(--%NS%text-2);
-}
-
-nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {
-  transform: scale(0.97);
-}
-
-nav[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] {
-  background: var(--%NS%surface-3);
-  color: var(--%NS%text-strong);
-  box-shadow: inset 0 0 0 1px var(--%NS%border-strong), 0 4px 14px -8px rgba(0, 0, 0, 0.9);
-}
-
-nav[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%]   app-tab-icon[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-}
-
-nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-.status[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 6px;
-  height: 24px;
-  margin-left: auto;
-  padding: 0 10px 0 6px;
-  border: 1px solid var(--%NS%border);
-  border-radius: 999px;
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  white-space: nowrap;
-  transition: color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease);
-}
-
-.full-panel[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 6px;
-  height: 28px;
-  margin-left: auto;
-  padding: 0 10px;
-  border: 1px solid var(--%NS%control-border);
-  border-radius: 8px;
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-  text-decoration: none;
-  white-space: nowrap;
-  transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease);
-}
-.full-panel[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-}
-.full-panel[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-strong);
-}
-.full-panel[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.shell-actions[_ngcontent-%COMP%] {
-  display: inline-flex;
-  flex-shrink: 0;
-  gap: 4px;
-  margin-left: auto;
-}
-
-.full-panel[_ngcontent-%COMP%]    + .shell-actions[_ngcontent-%COMP%] {
-  margin-left: 0;
-}
-
-.shell-btn[_ngcontent-%COMP%] {
-  display: grid;
-  place-items: center;
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  border: 1px solid var(--%NS%border);
-  border-radius: 8px;
-  background: var(--%NS%surface);
-  color: var(--%NS%text-2);
-  cursor: pointer;
-  transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease);
-}
-.shell-btn[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.shell-btn[_ngcontent-%COMP%]:hover {
-  background: var(--%NS%surface-2);
-  color: var(--%NS%text-strong);
-}
-.shell-btn.active[_ngcontent-%COMP%] {
-  border-color: var(--%NS%accent-line);
-  background: var(--%NS%accent-soft);
-  color: var(--%NS%text-strong);
-}
-.shell-btn[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.shell-actions[_ngcontent-%COMP%]    + .status[_ngcontent-%COMP%] {
-  margin-left: 0;
-}
-
-.dot[_ngcontent-%COMP%] {
-  position: relative;
-  display: grid;
-  place-items: center;
-  width: 12px;
-  height: 12px;
-}
-
-.dot[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--%NS%warn);
-  animation: _ngcontent-%COMP%_blink 1.2s ease-in-out infinite;
-}
-
-.dot[_ngcontent-%COMP%]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  background: var(--%NS%warn);
-  opacity: 0;
-}
-
-.status.connected[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%ok) 28%, transparent);
-  background: color-mix(in srgb, var(--%NS%ok) 8%, transparent);
-  color: var(--%NS%text);
-}
-
-.status.connected[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  background: var(--%NS%ok);
-  box-shadow: 0 0 6px var(--%NS%ok);
-  animation: none;
-}
-
-.status.failed[_ngcontent-%COMP%] {
-  border-color: color-mix(in srgb, var(--%NS%danger) 36%, transparent);
-  color: var(--%NS%text);
-}
-
-.status.failed[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
-  background: var(--%NS%danger);
-  animation: none;
-}
-
-.status.connected[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]::before {
-  background: var(--%NS%ok);
-  animation: _ngcontent-%COMP%_ping 2s var(--%NS%ease) infinite;
-}
-
-@keyframes _ngcontent-%COMP%_blink {
-  50% {
-    opacity: 0.3;
-  }
-}
-@keyframes _ngcontent-%COMP%_ping {
-  0% {
-    transform: scale(0.5);
-    opacity: 0.55;
-  }
-  80%, 100% {
-    transform: scale(1.6);
-    opacity: 0;
-  }
-}
-main[_ngcontent-%COMP%] {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-  padding: 20px;
-}
-
-main[_ngcontent-%COMP%]:focus {
-  outline: none;
-}
-
-main[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: -2px;
-}
-
-main[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {
-  animation: enter 0.28s var(--%NS%ease) both;
-}
-
-.background-note[_ngcontent-%COMP%] {
-  margin: 0 0 12px;
-  color: var(--%NS%text-2);
-  font-size: 12px;
-}
-.background-note[_ngcontent-%COMP%]:empty {
-  display: none;
-}
-
-.turned-off[_ngcontent-%COMP%] {
-  max-width: 60ch;
-  margin: 0;
-  padding: 12px 14px;
-  border: 1px solid var(--%NS%border);
-  border-radius: var(--%NS%radius);
-  background: var(--%NS%surface);
-  color: var(--%NS%text);
-}
-
-.turned-off[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {
-  color: var(--%NS%accent);
-  border-radius: 2px;
-}
-.turned-off[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:focus-visible {
-  outline: 2px solid var(--%NS%accent);
-  outline-offset: 2px;
-}
-
-.turned-off[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
-  font-family: var(--%NS%font-mono);
-}
-
-@media (max-width: 720px) {
-  header[_ngcontent-%COMP%] {
-    flex-wrap: wrap;
-    height: auto;
-    padding: 8px 16px;
-  }
-  nav[_ngcontent-%COMP%] {
-    order: 3;
-    flex: 1 1 100%;
-  }
-}
-@media (max-width: 560px) {
-  header[_ngcontent-%COMP%] {
-    padding-inline: 12px;
-  }
-  main[_ngcontent-%COMP%] {
-    padding: 16px 12px;
-  }
-}
-@media (max-width: 400px) {
-  .brand[_ngcontent-%COMP%] {
-    flex-shrink: 1;
-    gap: 8px;
-  }
-}`]})}).catch(console.error);export{eb as t};
\ No newline at end of file
diff --git a/extension/ui/assets/index-xQ_9JX3C.js b/extension/ui/assets/index-xQ_9JX3C.js
new file mode 100644
index 00000000..239f3245
--- /dev/null
+++ b/extension/ui/assets/index-xQ_9JX3C.js
@@ -0,0 +1,39086 @@
+(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),t.credentials=e.crossOrigin===`use-credentials`?`include`:e.crossOrigin===`anonymous`?`omit`:`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,i=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,a=(e,a)=>{for(var o in a||={})n.call(a,o)&&i(e,o,a[o]);if(t)for(var o of t(a))r.call(a,o)&&i(e,o,a[o]);return e},o=(e,t,n)=>(i(e,typeof t==`symbol`?t:t+``,n),n),s=globalThis;function c(e){let t=s.__Zone_symbol_prefix;return(typeof t==`string`?t:`__zone_symbol__`)+e}function l(){let e=s.performance;function t(t){e&&e.mark&&e.mark(t)}function n(t,n){e&&e.measure&&e.measure(t,n)}t(`Zone`);let r=class e{constructor(e,t){o(this,`_parent`),o(this,`_name`),o(this,`_properties`),o(this,`_zoneDelegate`),this._parent=e,this._name=t?t.name||`unnamed`:`<root>`,this._properties=t&&t.properties||{},this._zoneDelegate=new l(this,this._parent&&this._parent._zoneDelegate,t)}static assertZonePatched(){if(s.Promise!==me.ZoneAwarePromise)throw Error("Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.\nMost likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)")}static get root(){let t=e.current;for(;t.parent;)t=t.parent;return t}static get current(){return ge.zone}static get currentTask(){return _e}static __load_patch(r,i,a=!1){if(Object.hasOwn(me,r)){let e=s[c(`forceDuplicateZoneCheck`)]===!0;if(!a&&e)throw Error(`Already loaded patch: `+r)}else if(!s[`__Zone_disable_`+r]){let a=`Zone:`+r;t(a),me[r]=i(s,e,he),n(a,a)}}get parent(){return this._parent}get name(){return this._name}get(e){let t=this.getZoneWith(e);if(t)return t._properties[e]}getZoneWith(e){let t=this;for(;t;){if(Object.hasOwn(t._properties,e))return t;t=t._parent}return null}fork(e){if(!e)throw Error(`ZoneSpec required!`);return this._zoneDelegate.fork(this,e)}wrap(e,t){if(typeof e!=`function`)throw Error(`Expecting function got: `+e);let n=this._zoneDelegate.intercept(this,e,t),r=this;return function(){return r.runGuarded(n,this,arguments,t)}}run(e,t,n,r){ge={parent:ge,zone:this};try{return this._zoneDelegate.invoke(this,e,t,n,r)}finally{ge=ge.parent}}runGuarded(e,t=null,n,r){ge={parent:ge,zone:this};try{try{return this._zoneDelegate.invoke(this,e,t,n,r)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{ge=ge.parent}}runTask(e,t,n){if(e.zone!=this)throw Error(`A task can only be run in the zone of creation! (Creation: `+(e.zone||ie).name+`; Execution: `+this.name+`)`);let r=e,{type:i,data:{isPeriodic:a=!1,isRefreshable:o=!1}={}}=e;if(e.state===ae&&(i===pe||i===fe))return;let s=e.state!=ce;s&&r._transitionTo(ce,se);let c=_e;_e=r,ge={parent:ge,zone:this};try{i==fe&&e.data&&!a&&!o&&(e.cancelFn=void 0);try{return this._zoneDelegate.invokeTask(this,r,t,n)}catch(e){if(this._zoneDelegate.handleError(this,e))throw e}}finally{let t=e.state;if(t!==ae&&t!==ue){if(i==pe||a||o&&t===oe)s&&r._transitionTo(se,ce,oe);else{let e=r._zoneDelegates;this._updateTaskCount(r,-1),s&&r._transitionTo(ae,ce,ae),o&&(r._zoneDelegates=e)}}ge=ge.parent,_e=c}}scheduleTask(e){if(e.zone&&e.zone!==this){let t=this;for(;t;){if(t===e.zone)throw Error(`can not reschedule task to ${this.name} which is descendants of the original zone ${e.zone.name}`);t=t.parent}}e._transitionTo(oe,ae);let t=[];e._zoneDelegates=t,e._zone=this;try{e=this._zoneDelegate.scheduleTask(this,e)}catch(t){throw e._transitionTo(ue,oe,ae),this._zoneDelegate.handleError(this,t),t}return e._zoneDelegates===t&&this._updateTaskCount(e,1),e.state==oe&&e._transitionTo(se,oe),e}scheduleMicroTask(e,t,n,r){return this.scheduleTask(new u(de,e,t,n,r,void 0))}scheduleMacroTask(e,t,n,r,i){return this.scheduleTask(new u(fe,e,t,n,r,i))}scheduleEventTask(e,t,n,r,i){return this.scheduleTask(new u(pe,e,t,n,r,i))}cancelTask(e){if(e.zone!=this)throw Error(`A task can only be cancelled in the zone of creation! (Creation: `+(e.zone||ie).name+`; Execution: `+this.name+`)`);if(e.state===se||e.state===ce){e._transitionTo(le,se,ce);try{this._zoneDelegate.cancelTask(this,e)}catch(t){throw e._transitionTo(ue,le),this._zoneDelegate.handleError(this,t),t}return this._updateTaskCount(e,-1),e._transitionTo(ae,le),e.runCount=-1,e}}_updateTaskCount(e,t){let n=e._zoneDelegates;t==-1&&(e._zoneDelegates=null);for(let r=0;r<n.length;r++)n[r]._updateTaskCount(e.type,t)}};o(r,`__symbol__`,c);let i=r,a={name:``,onHasTask:(e,t,n,r)=>e.hasTask(n,r),onScheduleTask:(e,t,n,r)=>e.scheduleTask(n,r),onInvokeTask:(e,t,n,r,i,a)=>e.invokeTask(n,r,i,a),onCancelTask:(e,t,n,r)=>e.cancelTask(n,r)};class l{constructor(e,t,n){o(this,`_zone`),o(this,`_taskCounts`,{microTask:0,macroTask:0,eventTask:0}),o(this,`_forkDlgt`),o(this,`_forkZS`),o(this,`_forkCurrZone`),o(this,`_interceptDlgt`),o(this,`_interceptZS`),o(this,`_interceptCurrZone`),o(this,`_invokeDlgt`),o(this,`_invokeZS`),o(this,`_invokeCurrZone`),o(this,`_handleErrorDlgt`),o(this,`_handleErrorZS`),o(this,`_handleErrorCurrZone`),o(this,`_scheduleTaskDlgt`),o(this,`_scheduleTaskZS`),o(this,`_scheduleTaskCurrZone`),o(this,`_invokeTaskDlgt`),o(this,`_invokeTaskZS`),o(this,`_invokeTaskCurrZone`),o(this,`_cancelTaskDlgt`),o(this,`_cancelTaskZS`),o(this,`_cancelTaskCurrZone`),o(this,`_hasTaskDlgt`),o(this,`_hasTaskDlgtOwner`),o(this,`_hasTaskZS`),o(this,`_hasTaskCurrZone`),this._zone=e,this._forkZS=n&&(n&&n.onFork?n:t._forkZS),this._forkDlgt=n&&(n.onFork?t:t._forkDlgt),this._forkCurrZone=n&&(n.onFork?this._zone:t._forkCurrZone),this._interceptZS=n&&(n.onIntercept?n:t._interceptZS),this._interceptDlgt=n&&(n.onIntercept?t:t._interceptDlgt),this._interceptCurrZone=n&&(n.onIntercept?this._zone:t._interceptCurrZone),this._invokeZS=n&&(n.onInvoke?n:t._invokeZS),this._invokeDlgt=n&&(n.onInvoke?t:t._invokeDlgt),this._invokeCurrZone=n&&(n.onInvoke?this._zone:t._invokeCurrZone),this._handleErrorZS=n&&(n.onHandleError?n:t._handleErrorZS),this._handleErrorDlgt=n&&(n.onHandleError?t:t._handleErrorDlgt),this._handleErrorCurrZone=n&&(n.onHandleError?this._zone:t._handleErrorCurrZone),this._scheduleTaskZS=n&&(n.onScheduleTask?n:t._scheduleTaskZS),this._scheduleTaskDlgt=n&&(n.onScheduleTask?t:t._scheduleTaskDlgt),this._scheduleTaskCurrZone=n&&(n.onScheduleTask?this._zone:t._scheduleTaskCurrZone),this._invokeTaskZS=n&&(n.onInvokeTask?n:t._invokeTaskZS),this._invokeTaskDlgt=n&&(n.onInvokeTask?t:t._invokeTaskDlgt),this._invokeTaskCurrZone=n&&(n.onInvokeTask?this._zone:t._invokeTaskCurrZone),this._cancelTaskZS=n&&(n.onCancelTask?n:t._cancelTaskZS),this._cancelTaskDlgt=n&&(n.onCancelTask?t:t._cancelTaskDlgt),this._cancelTaskCurrZone=n&&(n.onCancelTask?this._zone:t._cancelTaskCurrZone),this._hasTaskZS=null,this._hasTaskDlgt=null,this._hasTaskDlgtOwner=null,this._hasTaskCurrZone=null;let r=n&&n.onHasTask,i=t&&t._hasTaskZS;(r||i)&&(this._hasTaskZS=r?n:a,this._hasTaskDlgt=t,this._hasTaskDlgtOwner=this,this._hasTaskCurrZone=this._zone,n.onScheduleTask||(this._scheduleTaskZS=a,this._scheduleTaskDlgt=t,this._scheduleTaskCurrZone=this._zone),n.onInvokeTask||(this._invokeTaskZS=a,this._invokeTaskDlgt=t,this._invokeTaskCurrZone=this._zone),n.onCancelTask||(this._cancelTaskZS=a,this._cancelTaskDlgt=t,this._cancelTaskCurrZone=this._zone))}get zone(){return this._zone}fork(e,t){return this._forkZS?this._forkZS.onFork(this._forkDlgt,this.zone,e,t):new i(e,t)}intercept(e,t,n){return this._interceptZS?this._interceptZS.onIntercept(this._interceptDlgt,this._interceptCurrZone,e,t,n):t}invoke(e,t,n,r,i){return this._invokeZS?this._invokeZS.onInvoke(this._invokeDlgt,this._invokeCurrZone,e,t,n,r,i):t.apply(n,r)}handleError(e,t){return!this._handleErrorZS||this._handleErrorZS.onHandleError(this._handleErrorDlgt,this._handleErrorCurrZone,e,t)}scheduleTask(e,t){let n=t;if(this._scheduleTaskZS)this._hasTaskZS&&n._zoneDelegates.push(this._hasTaskDlgtOwner),n=this._scheduleTaskZS.onScheduleTask(this._scheduleTaskDlgt,this._scheduleTaskCurrZone,e,t),n||=t;else if(t.scheduleFn)t.scheduleFn(t);else if(t.type==de)ne(t);else throw Error(`Task is missing scheduleFn.`);return n}invokeTask(e,t,n,r){return this._invokeTaskZS?this._invokeTaskZS.onInvokeTask(this._invokeTaskDlgt,this._invokeTaskCurrZone,e,t,n,r):t.callback.apply(n,r)}cancelTask(e,t){let n;if(this._cancelTaskZS)n=this._cancelTaskZS.onCancelTask(this._cancelTaskDlgt,this._cancelTaskCurrZone,e,t);else{if(!t.cancelFn)throw Error(`Task is not cancelable`);n=t.cancelFn(t)}return n}hasTask(e,t){try{this._hasTaskZS&&this._hasTaskZS.onHasTask(this._hasTaskDlgt,this._hasTaskCurrZone,e,t)}catch(t){this.handleError(e,t)}}_updateTaskCount(e,t){let n=this._taskCounts,r=n[e],i=n[e]=r+t;if(i<0)throw Error(`More tasks executed then were scheduled.`);if(r==0||i==0){let t={microTask:n.microTask>0,macroTask:n.macroTask>0,eventTask:n.eventTask>0,change:e};this.hasTask(this._zone,t)}}}class u{constructor(e,t,n,r,i,a){if(o(this,`type`),o(this,`source`),o(this,`invoke`),o(this,`callback`),o(this,`data`),o(this,`scheduleFn`),o(this,`cancelFn`),o(this,`_zone`,null),o(this,`runCount`,0),o(this,`_zoneDelegates`,null),o(this,`_state`,`notScheduled`),this.type=e,this.source=t,this.data=r,this.scheduleFn=i,this.cancelFn=a,!n)throw Error(`callback is not defined`);this.callback=n;let c=this;this.invoke=e===pe&&r&&r.useG?u.invokeTask:function(){return u.invokeTask.call(s,c,this,arguments)}}static invokeTask(e,t,n){e||=this,ve++;try{return e.runCount++,e.zone.runTask(e,t,n)}finally{try{ve===1&&!s[m]&&re()}finally{ve--}}}get zone(){return this._zone}get state(){return this._state}cancelScheduleRequest(){this._transitionTo(ae,oe)}_transitionTo(e,t,n){if(this._state===t||this._state===n)this._state=e,e==ae&&(this._zoneDelegates=null);else throw Error(`${this.type} '${this.source}': can not transition to '${e}', expecting state '${t}'${n?` or '`+n+`'`:``}, was '${this._state}'.`)}toString(){return this.data&&this.data.handleId!==void 0?this.data.handleId.toString():Object.prototype.toString.call(this)}toJSON(){return{type:this.type,state:this.state,source:this.source,zone:this.zone.name,runCount:this.runCount}}}let d=c(`setTimeout`),f=c(`Promise`),p=c(`then`),m=c(`enable_native_microtask_draining`),ee=[],h=!1,g;function te(e){!g&&s[f]&&(g=s[f].resolve(0)),g?(g[p]??g.then).call(g,e):s[d](e,0)}function ne(e){let t=s[m],n=t&&ee.length===0&&!h,r=!t&&ve===0&&ee.length===0;(n||r)&&te(re),e&&ee.push(e)}function re(){if(!h){h=!0;try{for(;ee.length;){let e=ee;ee=[];for(let t of e)try{t.zone.runTask(t,null,null)}catch(e){he.onUnhandledError(e)}}}finally{if(s[m])h=!1,he.microtaskDrainDone();else try{he.microtaskDrainDone()}finally{h=!1}}}}let ie={name:`NO ZONE`},ae=`notScheduled`,oe=`scheduling`,se=`scheduled`,ce=`running`,le=`canceling`,ue=`unknown`,de=`microTask`,fe=`macroTask`,pe=`eventTask`,me=Object.create(null),he={symbol:c,currentZoneFrame:()=>ge,onUnhandledError:ye,microtaskDrainDone:ye,scheduleMicroTask:ne,showUncaughtError:()=>!i[c(`ignoreConsoleErrorUncaughtError`)],patchEventTarget:()=>[],patchOnProperties:ye,patchMethod:()=>ye,bindArguments:()=>[],patchThen:()=>ye,patchMacroTask:()=>ye,patchEventPrototype:()=>ye,getGlobalObjects:()=>void 0,ObjectDefineProperty:()=>ye,ObjectGetOwnPropertyDescriptor:()=>void 0,ObjectCreate:()=>void 0,ArraySlice:()=>[],patchClass:()=>ye,wrapWithCurrentZone:()=>ye,filterProperties:()=>[],attachOriginToPatched:()=>ye,_redefineProperty:()=>ye,patchCallbacks:()=>ye,nativeScheduleMicroTask:te},ge={parent:null,zone:new i(null,null)},_e=null,ve=0;function ye(){}return n(`Zone`,`Zone`),i}function u(){let e=globalThis,t=e[c(`forceDuplicateZoneCheck`)]===!0;if(e.Zone&&(t||typeof e.Zone.__symbol__!=`function`))throw Error(`Zone already loaded.`);return e.Zone??=l(),e.Zone}var d=Object.getOwnPropertyDescriptor,f=Object.defineProperty,p=Object.getPrototypeOf,m=Object.create,ee=Array.prototype.slice,h=`addEventListener`,g=`removeEventListener`,te=c(h),ne=c(g),re=`true`,ie=`false`,ae=c(``);function oe(e,t){return Zone.current.wrap(e,t)}function se(e,t,n,r,i){return Zone.current.scheduleMacroTask(e,t,n,r,i)}var ce=c,le=typeof window<`u`,ue=le?window:void 0,de=le&&ue||globalThis,fe=`removeAttribute`;function pe(e,t){for(let n=e.length-1;n>=0;n--)typeof e[n]==`function`&&(e[n]=oe(e[n],t+`_`+n));return e}function me(e,t){let n=e.constructor.name;for(let r=0;r<t.length;r++){let i=t[r],a=e[i];if(a){if(!he(d(e,i)))continue;e[i]=(e=>{let t=function(){return e.apply(this,pe(arguments,n+`.`+i))};return ke(t,e),t})(a)}}}function he(e){return e?e.writable===!1?!1:typeof e.get!=`function`||e.set!==void 0:!0}var ge=typeof WorkerGlobalScope<`u`&&self instanceof WorkerGlobalScope,_e=!(`nw`in de)&&de.process!==void 0&&de.process.toString()===`[object process]`,ve=!_e&&!ge&&!!(le&&ue.HTMLElement),ye=de.process!==void 0&&de.process.toString()===`[object process]`&&!ge&&!!(le&&ue.HTMLElement),be=Object.create(null),xe=ce(`enable_beforeunload`),Se=function(e){if(e||=de.event,!e)return;let t=be[e.type];t||=be[e.type]=ce(`ON_PROPERTY`+e.type);let n=this||e.target||de,r=n[t],i;if(ve&&n===ue&&e.type===`error`){let t=e;i=r&&r.call(this,t.message,t.filename,t.lineno,t.colno,t.error),i===!0&&e.preventDefault()}else i=r&&r.apply(this,arguments),e.type===`beforeunload`&&de[xe]&&typeof i==`string`?e.returnValue=i:i!=null&&!i&&e.preventDefault();return i};function Ce(e,t,n){let r=d(e,t);if(!r&&n&&d(n,t)&&(r={enumerable:!0,configurable:!0}),!r||!r.configurable)return;let i=ce(`on`+t+`patched`);if(Object.hasOwn(e,i)&&e[i])return;delete r.writable,delete r.value;let a=r.get,o=r.set,s=t.slice(2),c=be[s];c||=be[s]=ce(`ON_PROPERTY`+s),r.set=function(t){let n=this;!n&&e===de&&(n=de),n&&(typeof n[c]==`function`&&n.removeEventListener(s,Se),o?.call(n,null),n[c]=t,typeof t==`function`&&n.addEventListener(s,Se,!1))},r.get=function(){let n=this;if(!n&&e===de&&(n=de),!n)return null;let i=n[c];if(i)return i;if(a){let e=a.call(this);if(e)return r.set.call(this,e),typeof n[fe]==`function`&&n.removeAttribute(t),e}return null},f(e,t,r),e[i]=!0}function we(e,t,n){if(t)for(let r=0;r<t.length;r++)Ce(e,`on`+t[r],n);else{let t=[];for(let n in e)n.slice(0,2)==`on`&&t.push(n);for(let r=0;r<t.length;r++)Ce(e,t[r],n)}}var Te=ce(`originalInstance`);function Ee(e){let t=de[e];if(!t)return;de[ce(e)]=t,de[e]=function(){let n=pe(arguments,e);switch(n.length){case 0:this[Te]=new t;break;case 1:this[Te]=new t(n[0]);break;case 2:this[Te]=new t(n[0],n[1]);break;case 3:this[Te]=new t(n[0],n[1],n[2]);break;case 4:this[Te]=new t(n[0],n[1],n[2],n[3]);break;default:throw Error(`Arg list too long.`)}},ke(de[e],t);let n=new t(function(){}),r;for(r in n)(e!==`XMLHttpRequest`||r!==`responseBlob`)&&(function(t){typeof n[t]==`function`?de[e].prototype[t]=function(){return this[Te][t].apply(this[Te],arguments)}:f(de[e].prototype,t,{set:function(n){typeof n==`function`?(this[Te][t]=oe(n,e+`.`+t),ke(this[Te][t],n)):this[Te][t]=n},get:function(){return this[Te][t]}})})(r);for(r in t)r!==`prototype`&&Object.hasOwn(t,r)&&(de[e][r]=t[r])}function De(e,t,n){let r=e;for(;r&&!Object.hasOwn(r,t);)r=p(r);!r&&e[t]&&(r=e);let i=ce(t),a=null;if(r&&(!(a=r[i])||!Object.hasOwn(r,i))&&(a=r[i]=r[t],he(r&&d(r,t)))){let e=n(a,i,t);r[t]=function(){return e(this,arguments)},ke(r[t],a)}return a}function Oe(e,t,n){let r=null;function i(e){let t=e.data;return t.args[t.cbIdx]=function(){e.invoke.apply(this,arguments)},r.apply(t.target,t.args),e}r=De(e,t,e=>function(t,r){let a=n(t,r);return a.cbIdx>=0&&typeof r[a.cbIdx]==`function`?se(a.name,r[a.cbIdx],a,i):e.apply(t,r)})}function ke(e,t){e[ce(`OriginalDelegate`)]=t}function Ae(e){return typeof e==`function`}function je(e){return typeof e==`number`}var Me={useG:!0},Ne=Object.create(null),Pe={},Fe=RegExp(`^`+ae+`(\\w+)(true|false)$`),Ie=ce(`propagationStopped`),Le=[`capture`,`once`,`passive`,`signal`];function Re(e,t){let n=(t?t(e):e)+ie,r=(t?t(e):e)+re,i=ae+n,a=ae+r;Ne[e]={[ie]:i,[re]:a}}function ze(e,t,n,r){let i=r&&r.add||h,o=r&&r.rm||g,s=r&&r.listeners||`eventListeners`,c=r&&r.rmAll||`removeAllListeners`,l=ce(i),u=`.`+i+`:`,d=function(e,t,n){if(e.isRemoved)return;let r=e.callback;typeof r==`object`&&r.handleEvent&&(e.callback=e=>r.handleEvent(e),e.originalDelegate=r);let i;try{e.invoke(e,t,[n])}catch(e){i=e}let a=e.options;if(a&&typeof a==`object`&&a.once){let r=e.originalDelegate?e.originalDelegate:e.callback;t[o].call(t,n.type,r,a)}return i};function f(n,r,i){if(r||=e.event,!r)return;let a=n||r.target||e,o=a[Ne[r.type][i?re:ie]];if(o){let e=[];if(o.length===1){let t=d(o[0],a,r);t&&e.push(t)}else{let t=o.slice();for(let n=0;n<t.length&&!(r&&r[Ie]===!0);n++){let i=d(t[n],a,r);i&&e.push(i)}}if(e.length===1)throw e[0];for(let n=0;n<e.length;n++){let r=e[n];t.nativeScheduleMicroTask(()=>{throw r})}}}let m=function(e){return f(this,e,!1)},ee=function(e){return f(this,e,!0)};function te(t,n){if(!t)return!1;let r=!0;n&&n.useG!==void 0&&(r=n.useG);let d=n&&n.vh,f=!0;n&&n.chkDup!==void 0&&(f=n.chkDup);let h=!1;n&&n.rt!==void 0&&(h=n.rt);let g=t;for(;g&&!Object.hasOwn(g,i);)g=p(g);if(!g&&t[i]&&(g=t),!g||g[l])return!1;let te=n&&n.eventNameToString,ne={},oe=g[l]=g[i],se=g[ce(o)]=g[o],le=g[ce(s)]=g[s],ue=g[ce(c)]=g[c],de;n&&n.prepend&&(de=g[ce(n.prepend)]=g[n.prepend]);function fe(e,t){return t?typeof e==`boolean`?{capture:e,passive:!0}:e?(typeof e==`object`&&e.passive!==!1&&(e.passive=!0),e):{passive:!0}:e}let pe=function(e){if(!ne.isExisting)return oe.call(ne.target,ne.eventName,ne.capture?ee:m,ne.options)},me=function(e){if(!e.isRemoved){let t=Ne[e.eventName],n;t&&(n=t[e.capture?re:ie]);let r=n&&e.target[n];if(r){for(let t=0;t<r.length;t++)if(r[t]===e){r.splice(t,1),e.isRemoved=!0,e.removeAbortListener&&=(e.removeAbortListener(),null),r.length===0&&(e.allRemoved=!0,e.target[n]=null);break}}}if(e.allRemoved)return se.call(e.target,e.eventName,e.capture?ee:m,e.options)},he=function(e){return oe.call(ne.target,ne.eventName,e.invoke,ne.options)},ge=function(e){return de.call(ne.target,ne.eventName,e.invoke,ne.options)},ve=function(e){return se.call(e.target,e.eventName,e.invoke,e.options)},ye=r?pe:he,be=r?me:ve,xe=n?.diff||function(e,t){let n=typeof t;return n===`function`&&e.callback===t||n===`object`&&e.originalDelegate===t},Se=Zone[ce(`UNPATCHED_EVENTS`)],Ce=e[ce(`PASSIVE_EVENTS`)];function we(e){if(typeof e!=`object`||!e)return e;let t=a({},e);for(let n of Le)!Object.hasOwn(t,n)&&n in e&&(t[n]=e[n]);return t}let Te=function(t,i,a,o,s=!1,c=!1){return function(){let l=this||e,u=arguments[0];n&&n.transferEventName&&(u=n.transferEventName(u));let p=arguments[1];if(!p||_e&&u===`uncaughtException`)return t.apply(this,arguments);let m=!1;if(typeof p!=`function`){if(!p.handleEvent)return t.apply(this,arguments);m=!0}if(d&&!d(t,p,l,arguments))return;let ee=!!Ce&&Ce.indexOf(u)!==-1,h=fe(we(arguments[2]),ee),g=h?.signal;if(g?.aborted)return;if(Se){for(let e=0;e<Se.length;e++)if(u===Se[e])return ee?t.call(l,u,p,h):t.apply(this,arguments)}let ae=h?typeof h==`boolean`||h.capture:!1,oe=h&&typeof h==`object`?h.once:!1,se=Zone.current,ce=Ne[u];ce||=(Re(u,te),Ne[u]);let le=ce[ae?re:ie],ue=l[le],de=!1;if(ue){if(de=!0,f){for(let e=0;e<ue.length;e++)if(xe(ue[e],p))return}}else ue=l[le]=[];let pe,me=l.constructor.name,he=Pe[me];he&&(pe=he[u]),pe||=me+i+(te?te(u):u),ne.options=h,oe&&(ne.options.once=!1),ne.target=l,ne.capture=ae,ne.eventName=u,ne.isExisting=de;let ge=r?Me:void 0;ge&&(ge.taskData=ne),g&&(ne.options.signal=void 0);let ve=se.scheduleEventTask(pe,p,ge,a,o);if(g){ne.options.signal=g;let e=()=>ve.zone.cancelTask(ve);t.call(g,`abort`,e,{once:!0}),ve.removeAbortListener=()=>g.removeEventListener(`abort`,e)}if(ne.target=null,ge&&(ge.taskData=null),oe&&(ne.options.once=!0),typeof ve.options!=`boolean`&&(ve.options=h),ve.target=l,ve.capture=ae,ve.eventName=u,m&&(ve.originalDelegate=p),c?ue.unshift(ve):ue.push(ve),s)return l}};return g[i]=Te(oe,u,ye,be,h),de&&(g.prependListener=Te(de,`.prependListener:`,ge,be,h,!0)),g[o]=function(){let t=this||e,r=arguments[0];n&&n.transferEventName&&(r=n.transferEventName(r));let i=arguments[2],a=i?typeof i==`boolean`||i.capture:!1,o=arguments[1];if(!o)return se.apply(this,arguments);if(d&&!d(se,o,t,arguments))return;let s=Ne[r],c;s&&(c=s[a?re:ie]);let l=c&&t[c];if(l)for(let e=0;e<l.length;e++){let n=l[e];if(xe(n,o)){if(l.splice(e,1),n.isRemoved=!0,l.length===0&&(n.allRemoved=!0,t[c]=null,!a&&typeof r==`string`)){let e=ae+`ON_PROPERTY`+r;t[e]=null}return n.zone.cancelTask(n),h?t:void 0}}return se.apply(this,arguments)},g[s]=function(){let t=this||e,r=arguments[0];n&&n.transferEventName&&(r=n.transferEventName(r));let i=[],a=Be(t,te?te(r):r);for(let e=0;e<a.length;e++){let t=a[e],n=t.originalDelegate?t.originalDelegate:t.callback;i.push(n)}return i},g[c]=function(){let t=this||e,r=arguments[0];if(r){n&&n.transferEventName&&(r=n.transferEventName(r));let e=Ne[r];if(e){let n=e[ie],i=e[re],a=t[n],s=t[i];if(a){let e=a.slice();for(let t=0;t<e.length;t++){let n=e[t],i=n.originalDelegate?n.originalDelegate:n.callback;this[o].call(this,r,i,n.options)}}if(s){let e=s.slice();for(let t=0;t<e.length;t++){let n=e[t],i=n.originalDelegate?n.originalDelegate:n.callback;this[o].call(this,r,i,n.options)}}}}else{let e=Object.keys(t);for(let t=0;t<e.length;t++){let n=e[t],r=Fe.exec(n),i=r&&r[1];i&&i!==`removeListener`&&this[c].call(this,i)}this[c].call(this,`removeListener`)}if(h)return this},ke(g[i],oe),ke(g[o],se),ue&&ke(g[c],ue),le&&ke(g[s],le),!0}let ne=[];for(let e=0;e<n.length;e++)ne[e]=te(n[e],r);return ne}function Be(e,t){if(!t){let n=[];for(let r in e){let i=Fe.exec(r),a=i&&i[1];if(a&&(!t||a===t)){let t=e[r];if(t)for(let e=0;e<t.length;e++)n.push(t[e])}}return n}let n=Ne[t];n||=(Re(t),Ne[t]);let r=e[n[ie]],i=e[n[re]];return r?i?r.concat(i):r.slice():i?i.slice():[]}function Ve(e,t){let n=e.Event;n&&n.prototype&&t.patchMethod(n.prototype,`stopImmediatePropagation`,e=>function(t,n){t[Ie]=!0,e&&e.apply(t,n)})}function He(e,t){t.patchMethod(e,`queueMicrotask`,e=>function(e,t){Zone.current.scheduleMicroTask(`queueMicrotask`,t[0])})}var Ue=ce(`zoneTask`);function We(e,t,n,r){let i=null,a=null;t+=r,n+=r;let o={};function s(t){let n=t.data;n.args[0]=function(){return t.invoke.apply(this,arguments)};let r=i.apply(e,n.args);return je(r)?n.handleId=r:(n.handle=r,n.isRefreshable=Ae(r?.refresh)),t}function c(t){let{handle:n,handleId:r}=t.data;return a.call(e,n??r)}i=De(e,t,n=>function(i,a){if(Ae(a[0])){let e={isRefreshable:!1,isPeriodic:r===`Interval`,delay:r===`Timeout`||r===`Interval`?a[1]||0:void 0,args:a},n=a[0];a[0]=function(){try{return n.apply(this,arguments)}finally{let{handle:t,handleId:n,isPeriodic:r,isRefreshable:i}=e;!r&&!i&&(n?delete o[n]:t&&(t[Ue]=null))}};let i=se(t,a[0],e,s,c);if(!i)return i;let{handleId:l,handle:u,isRefreshable:d,isPeriodic:f}=i.data;if(l)o[l]=i;else if(u&&(u[Ue]=i,d&&!f)){let e=u.refresh;u.refresh=function(){let{zone:t,state:n}=i;return n===`notScheduled`?(i._state=`scheduled`,t._updateTaskCount(i,1)):n===`running`&&(i._state=`scheduling`),e.call(this)}}return u??l??i}return n.apply(e,a)}),a=De(e,n,t=>function(n,r){let i=r[0],a;je(i)?(a=o[i],delete o[i]):(a=i?.[Ue],a?i[Ue]=null:a=i),a?.type?a.cancelFn&&a.zone.cancelTask(a):t.apply(e,r)})}function Ge(e,t){let{isBrowser:n,isMix:r}=t.getGlobalObjects();(n||r)&&e.customElements&&`customElements`in e&&t.patchCallbacks(t,e.customElements,`customElements`,`define`,[`connectedCallback`,`disconnectedCallback`,`adoptedCallback`,`attributeChangedCallback`,`formAssociatedCallback`,`formDisabledCallback`,`formResetCallback`,`formStateRestoreCallback`])}function Ke(e,t){if(Zone[t.symbol(`patchEventTarget`)])return;let{eventNames:n,zoneSymbolEventNames:r,TRUE_STR:i,FALSE_STR:a,ZONE_SYMBOL_PREFIX:o}=t.getGlobalObjects();for(let e=0;e<n.length;e++){let t=n[e],s=t+a,c=t+i,l=o+s,u=o+c;r[t]={},r[t][a]=l,r[t][i]=u}let s=e.EventTarget;if(s&&s.prototype)return t.patchEventTarget(e,t,[s&&s.prototype]),!0}function qe(e,t){t.patchEventPrototype(e,t)}function Je(e,t,n){if(!n||n.length===0)return t;let r=n.filter(t=>t.target===e);if(r.length===0)return t;let i=r[0].ignoreProperties;return t.filter(e=>i.indexOf(e)===-1)}function Ye(e,t,n,r){e&&we(e,Je(e,t,n),r)}function Xe(e){return Object.getOwnPropertyNames(e).filter(e=>e.startsWith(`on`)&&e.length>2).map(e=>e.substring(2))}function eee(e,t){if(_e&&!ye||Zone[e.symbol(`patchEvents`)])return;let n=t.__Zone_ignore_on_properties,r=[];if(ve){let e=window;r=r.concat([`Document`,`SVGElement`,`Element`,`HTMLElement`,`HTMLBodyElement`,`HTMLMediaElement`,`HTMLFrameSetElement`,`HTMLFrameElement`,`HTMLIFrameElement`,`HTMLMarqueeElement`,`Worker`]),Ye(e,Xe(e),n,p(e))}r=r.concat([`XMLHttpRequest`,`XMLHttpRequestEventTarget`,`IDBIndex`,`IDBRequest`,`IDBOpenDBRequest`,`IDBDatabase`,`IDBTransaction`,`IDBCursor`,`WebSocket`]);for(let e=0;e<r.length;e++){let i=t[r[e]];i!=null&&i.prototype&&Ye(i.prototype,Xe(i.prototype),n)}}function tee(e){e.__load_patch(`timers`,e=>{let t=`clear`;We(e,`set`,t,`Timeout`),We(e,`set`,t,`Interval`),We(e,`set`,t,`Immediate`)}),e.__load_patch(`requestAnimationFrame`,e=>{We(e,`request`,`cancel`,`AnimationFrame`),We(e,`mozRequest`,`mozCancel`,`AnimationFrame`),We(e,`webkitRequest`,`webkitCancel`,`AnimationFrame`)}),e.__load_patch(`blocking`,(e,t)=>{let n=[`alert`,`prompt`,`confirm`];for(let r=0;r<n.length;r++){let i=n[r];De(e,i,(n,r,i)=>function(r,a){return t.current.run(n,e,a,i)})}}),e.__load_patch(`EventTarget`,(e,t,n)=>{qe(e,n),Ke(e,n);let r=e.XMLHttpRequestEventTarget;r&&r.prototype&&n.patchEventTarget(e,n,[r.prototype])}),e.__load_patch(`MutationObserver`,(e,t,n)=>{Ee(`MutationObserver`),Ee(`WebKitMutationObserver`)}),e.__load_patch(`IntersectionObserver`,(e,t,n)=>{Ee(`IntersectionObserver`)}),e.__load_patch(`FileReader`,(e,t,n)=>{Ee(`FileReader`)}),e.__load_patch(`on_property`,(e,t,n)=>{eee(n,e)}),e.__load_patch(`customElements`,(e,t,n)=>{Ge(e,n)}),e.__load_patch(`XHR`,(e,t)=>{c(e);let n=ce(`xhrTask`),r=ce(`xhrSync`),i=ce(`xhrListener`),a=ce(`xhrScheduled`),o=ce(`xhrURL`),s=ce(`xhrErrorBeforeScheduled`);function c(e){let c=e.XMLHttpRequest;if(!c)return;let l=c.prototype;function u(e){return e[n]}let d=l[te],f=l[ne];if(!d){let t=e.XMLHttpRequestEventTarget;if(t){let e=t.prototype;d=e[te],f=e[ne]}}let p=`readystatechange`,m=`scheduled`;function ee(e){let r=e.data,o=r.target;o[a]=!1,o[s]=!1;let c=o[i];d||(d=o[te],f=o[ne]),c&&f.call(o,p,c);let l=o[i]=()=>{if(o.readyState===o.DONE){if(!r.aborted&&o[a]&&e.state===m){let n=o[t.__symbol__(`loadfalse`)];if(o.status!==0&&n&&n.length>0){let i=e.invoke;e.invoke=function(){let n=o[t.__symbol__(`loadfalse`)];for(let t=0;t<n.length;t++)n[t]===e&&n.splice(t,1);!r.aborted&&e.state===m&&i.call(e)},n.push(e)}else e.invoke()}else!r.aborted&&o[a]===!1&&(o[s]=!0)}};return d.call(o,p,l),o[n]||(o[n]=e),oe.apply(o,r.args),o[a]=!0,e}function h(){}function g(e){let t=e.data;return t.aborted=!0,le.apply(t.target,t.args)}let re=De(l,`open`,()=>function(e,t){return e[r]=t[2]==0,e[o]=t[1],re.apply(e,t)}),ie=ce(`fetchTaskAborting`),ae=ce(`fetchTaskScheduling`),oe=De(l,`send`,()=>function(e,n){if(t.current[ae]===!0||e[r])return oe.apply(e,n);{let t={target:e,url:e[o],isPeriodic:!1,args:n,aborted:!1},r=se(`XMLHttpRequest.send`,h,t,ee,g);e&&e[s]===!0&&!t.aborted&&r.state===m&&r.invoke()}}),le=De(l,`abort`,()=>function(e,n){let r=u(e);if(r&&typeof r.type==`string`){if(r.cancelFn==null||r.data&&r.data.aborted)return;r.zone.cancelTask(r)}else if(t.current[ie]===!0)return le.apply(e,n)})}}),e.__load_patch(`geolocation`,e=>{e.navigator&&e.navigator.geolocation&&me(e.navigator.geolocation,[`getCurrentPosition`,`watchPosition`])}),e.__load_patch(`PromiseRejectionEvent`,(e,t)=>{function n(t){return function(n){Be(e,t).forEach(r=>{let i=e.PromiseRejectionEvent;if(i){let e=new i(t,{promise:n.promise,reason:n.rejection});r.invoke(e)}})}}e.PromiseRejectionEvent&&(t[ce(`unhandledPromiseRejectionHandler`)]=n(`unhandledrejection`),t[ce(`rejectionHandledHandler`)]=n(`rejectionhandled`))}),e.__load_patch(`queueMicrotask`,(e,t,n)=>{He(e,n)})}function nee(e){e.__load_patch(`ZoneAwarePromise`,(e,t,n)=>{let r=Object.getOwnPropertyDescriptor,i=Object.defineProperty;function a(e){return e&&e.toString===Object.prototype.toString?(e.constructor&&e.constructor.name||``)+`: `+JSON.stringify(e):e?e.toString():Object.prototype.toString.call(e)}let o=n.symbol,s=[],c=e[o(`DISABLE_WRAPPING_UNCAUGHT_PROMISE_REJECTION`)]!==!1,l=o(`Promise`),u=o(`then`);n.onUnhandledError=e=>{if(n.showUncaughtError()){let t=e&&e.rejection;t&&e.zone&&e.task?console.error(`Unhandled Promise rejection:`,t instanceof Error?t.message:t,`; Zone:`,e.zone.name,`; Task:`,e.task&&e.task.source,`; Value:`,t,t instanceof Error?t.stack:void 0):console.error(e)}},n.microtaskDrainDone=()=>{for(;s.length;){let e=s.shift();try{e.zone.runGuarded(()=>{throw e.throwOriginal?e.rejection:e})}catch(e){f(e)}}};let d=o(`unhandledPromiseRejectionHandler`);function f(e){n.onUnhandledError(e);try{let n=t[d];typeof n==`function`&&n.call(this,e)}catch{}}function p(e){return e&&typeof e.then==`function`}function m(e){return e}function ee(e){return pe.reject(e)}let h=o(`state`),g=o(`value`),te=o(`finally`),ne=o(`parentPromiseValue`),re=o(`parentPromiseState`);function ie(e,t){return n=>{try{se(e,t,n)}catch(t){se(e,!1,t)}}}let ae=function(){let e=!1;return function(t){return function(){e||(e=!0,t.apply(null,arguments))}}},oe=o(`currentTaskTrace`);function se(e,r,o){let l=ae();if(e===o)throw TypeError(`Promise resolved with itself`);if(e[h]===null){let u=null;try{(typeof o==`object`||typeof o==`function`)&&(u=o&&o.then)}catch(t){return l(()=>{se(e,!1,t)})(),e}if(r!==!1&&o instanceof pe&&Object.hasOwn(o,h)&&Object.hasOwn(o,g)&&o[h]!==null)le(o),se(e,o[h],o[g]);else if(r!==!1&&typeof u==`function`)try{u.call(o,l(ie(e,r)),l(ie(e,!1)))}catch(t){l(()=>{se(e,!1,t)})()}else{e[h]=r;let l=e[g];if(e[g]=o,e[te]===te&&r===!0&&(e[h]=e[re],e[g]=e[ne]),r===!1&&o instanceof Error){let e=t.currentTask&&t.currentTask.data&&t.currentTask.data.__creationTrace__;e&&i(o,oe,{configurable:!0,enumerable:!1,writable:!0,value:e})}for(let t=0;t<l.length;)ue(e,l[t++],l[t++],l[t++],l[t++]);if(l.length==0&&r==0){e[h]=0;let r=o;try{throw Error(`Uncaught (in promise): `+a(o)+(o&&o.stack?`
+`+o.stack:``))}catch(e){r=e}c&&(r.throwOriginal=!0),r.rejection=o,r.promise=e,r.zone=t.current,r.task=t.currentTask,s.push(r),n.scheduleMicroTask()}}}return e}let ce=o(`rejectionHandledHandler`);function le(e){if(e[h]===0){try{let n=t[ce];n&&typeof n==`function`&&n.call(this,{rejection:e[g],promise:e})}catch{}e[h]=!1;for(let t=0;t<s.length;t++)e===s[t].promise&&s.splice(t,1)}}function ue(e,t,n,r,i){le(e);let a=e[h],o=a?typeof r==`function`?r:m:typeof i==`function`?i:ee;t.scheduleMicroTask(`Promise.then`,()=>{try{let r=e[g],i=!!n&&te===n[te];i&&(n[ne]=r,n[re]=a),se(n,!0,t.run(o,void 0,i&&o!==ee&&o!==m?[]:[r]))}catch(e){se(n,!1,e)}},n)}let de=function(){},fe=e.AggregateError;class pe{static toString(){return`function ZoneAwarePromise() { [native code] }`}static resolve(e){return e instanceof pe?e:se(new this(null),!0,e)}static reject(e){return se(new this(null),!1,e)}static withResolvers(){let e={};return e.promise=new pe((t,n)=>{e.resolve=t,e.reject=n}),e}static any(e){if(!e||typeof e[Symbol.iterator]!=`function`)return Promise.reject(new fe([],`All promises were rejected`));let t=[],n=0;try{for(let r of e)n++,t.push(pe.resolve(r))}catch{return Promise.reject(new fe([],`All promises were rejected`))}if(n===0)return Promise.reject(new fe([],`All promises were rejected`));let r=!1,i=[];return new pe((e,a)=>{for(let o=0;o<t.length;o++)t[o].then(t=>{r||(r=!0,e(t))},e=>{i.push(e),n--,n===0&&(r=!0,a(new fe(i,`All promises were rejected`)))})})}static race(e){let t,n,r=new this((e,r)=>{t=e,n=r});function i(e){t(e)}function a(e){n(e)}for(let t of e)p(t)||(t=this.resolve(t)),t.then(i,a);return r}static all(e){return pe.allWithCallback(e)}static allSettled(e){return(this&&this.prototype instanceof pe?this:pe).allWithCallback(e,{thenCallback:e=>({status:`fulfilled`,value:e}),errorCallback:e=>({status:`rejected`,reason:e})})}static allWithCallback(e,t){let n,r,i=new this((e,t)=>{n=e,r=t}),a=2,o=0,s=[];for(let i of e){p(i)||(i=this.resolve(i));let e=o;try{i.then(r=>{s[e]=t?t.thenCallback(r):r,a--,a===0&&n(s)},i=>{t?(s[e]=t.errorCallback(i),a--,a===0&&n(s)):r(i)})}catch(e){r(e)}a++,o++}return a-=2,a===0&&n(s),i}constructor(e){let t=this;if(!(t instanceof pe))throw Error(`Must be an instanceof Promise.`);t[h]=null,t[g]=[];try{let n=ae();e&&e(n(ie(t,!0)),n(ie(t,!1)))}catch(e){se(t,!1,e)}}get[Symbol.toStringTag](){return`Promise`}get[Symbol.species](){return pe}then(e,n){let r=this.constructor?.[Symbol.species];(!r||typeof r!=`function`)&&(r=this.constructor||pe);let i=new r(de),a=t.current;return this[h]==null?this[g].push(a,i,e,n):ue(this,a,i,e,n),i}catch(e){return this.then(null,e)}finally(e){let n=this.constructor?.[Symbol.species];(!n||typeof n!=`function`)&&(n=pe);let r=new n(de);r[te]=te;let i=t.current;return this[h]==null?this[g].push(i,r,e,e):ue(this,i,r,e,e),r}}pe.resolve=pe.resolve,pe.reject=pe.reject,pe.race=pe.race,pe.all=pe.all;let me=e[l]=e.Promise;e.Promise=pe;let he=o(`thenPatched`);function ge(e){let t=e.prototype,n=r(t,`then`);if(n&&(n.writable===!1||!n.configurable))return;let i=t.then;t[u]=i,e.prototype.then=function(e,t){return new pe((e,t)=>{i.call(this,e,t)}).then(e,t)},e[he]=!0}n.patchThen=ge;function _e(e){return function(t,n){let r=e.apply(t,n);if(r instanceof pe)return r;let i=r.constructor;return i[he]||ge(i),r}}if(me){ge(me);let t=me.try;t&&typeof t==`function`&&(pe.try=t),De(e,`fetch`,e=>_e(e))}return Promise[t.__symbol__(`uncaughtPromiseErrors`)]=s,pe})}function Ze(e){e.__load_patch(`toString`,e=>{let t=Function.prototype.toString,n=ce(`OriginalDelegate`),r=ce(`Promise`),i=ce(`Error`),a=function(){if(typeof this==`function`){let a=this[n];if(a)return typeof a==`function`?t.call(a):Object.prototype.toString.call(a);if(this===Promise){let n=e[r];if(n)return t.call(n)}if(this===Error){let n=e[i];if(n)return t.call(n)}}return t.call(this)};a[n]=t,Function.prototype.toString=a;let o=Object.prototype.toString;Object.prototype.toString=function(){return typeof Promise==`function`&&this instanceof Promise?`[object Promise]`:o.call(this)}})}function Qe(e,t,n,r,i){let a=Zone.__symbol__(r);if(t[a])return;let o=t[a]=t[r];t[r]=function(a,s,c){return s&&s.prototype&&i.forEach(function(t){let i=`${n}.${r}::`+t,a=s.prototype;try{if(Object.hasOwn(a,t)){let n=e.ObjectGetOwnPropertyDescriptor(a,t);n&&n.value?(n.value=e.wrapWithCurrentZone(n.value,i),e._redefineProperty(s.prototype,t,n)):a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}else a[t]&&(a[t]=e.wrapWithCurrentZone(a[t],i))}catch{}}),o.call(t,a,s,c)},e.attachOriginToPatched(t[r],o)}function $e(e){e.__load_patch(`util`,(e,t,n)=>{let r=Xe(e);n.patchOnProperties=we,n.patchMethod=De,n.bindArguments=pe,n.patchMacroTask=Oe;let i=t.__symbol__(`BLACK_LISTED_EVENTS`),a=t.__symbol__(`UNPATCHED_EVENTS`);e[a]&&(e[i]=e[a]),e[i]&&(t[i]=t[a]=e[i]),n.patchEventPrototype=Ve,n.patchEventTarget=ze,n.ObjectDefineProperty=f,n.ObjectGetOwnPropertyDescriptor=d,n.ObjectCreate=m,n.ArraySlice=ee,n.patchClass=Ee,n.wrapWithCurrentZone=oe,n.filterProperties=Je,n.attachOriginToPatched=ke,n._redefineProperty=Object.defineProperty,n.patchCallbacks=Qe,n.getGlobalObjects=()=>({globalSources:Pe,zoneSymbolEventNames:Ne,eventNames:r,isBrowser:ve,isMix:ye,isNode:_e,TRUE_STR:re,FALSE_STR:ie,ZONE_SYMBOL_PREFIX:ae,ADD_EVENT_LISTENER_STR:h,REMOVE_EVENT_LISTENER_STR:g})})}function et(e){nee(e),Ze(e),$e(e)}var tt=u();et(tt),tee(tt);var nt=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})(nt||{}),rt=(function(e){return e[e.None=0]=`None`,e[e.Const=1]=`Const`,e})(rt||{}),it=class{modifiers;constructor(e=rt.None){this.modifiers=e}hasModifier(e){return(this.modifiers&e)!==0}},at=(function(e){return e[e.Dynamic=0]=`Dynamic`,e[e.Bool=1]=`Bool`,e[e.String=2]=`String`,e[e.Int=3]=`Int`,e[e.Number=4]=`Number`,e[e.Function=5]=`Function`,e[e.Inferred=6]=`Inferred`,e[e.None=7]=`None`,e})(at||{}),ot=class extends it{name;constructor(e,t){super(t),this.name=e}visitType(e,t){return e.visitBuiltinType(this,t)}};at.Dynamic;var st=new ot(at.Inferred);at.Bool,at.Int,at.Number,at.String,at.Function,at.None;var _=(function(e){return e[e.Equals=0]=`Equals`,e[e.NotEquals=1]=`NotEquals`,e[e.Assign=2]=`Assign`,e[e.Identical=3]=`Identical`,e[e.NotIdentical=4]=`NotIdentical`,e[e.Minus=5]=`Minus`,e[e.Plus=6]=`Plus`,e[e.Divide=7]=`Divide`,e[e.Multiply=8]=`Multiply`,e[e.Modulo=9]=`Modulo`,e[e.And=10]=`And`,e[e.Or=11]=`Or`,e[e.BitwiseOr=12]=`BitwiseOr`,e[e.BitwiseAnd=13]=`BitwiseAnd`,e[e.Lower=14]=`Lower`,e[e.LowerEquals=15]=`LowerEquals`,e[e.Bigger=16]=`Bigger`,e[e.BiggerEquals=17]=`BiggerEquals`,e[e.NullishCoalesce=18]=`NullishCoalesce`,e[e.Exponentiation=19]=`Exponentiation`,e[e.In=20]=`In`,e[e.InstanceOf=21]=`InstanceOf`,e[e.AdditionAssignment=22]=`AdditionAssignment`,e[e.SubtractionAssignment=23]=`SubtractionAssignment`,e[e.MultiplicationAssignment=24]=`MultiplicationAssignment`,e[e.DivisionAssignment=25]=`DivisionAssignment`,e[e.RemainderAssignment=26]=`RemainderAssignment`,e[e.ExponentiationAssignment=27]=`ExponentiationAssignment`,e[e.AndAssignment=28]=`AndAssignment`,e[e.OrAssignment=29]=`OrAssignment`,e[e.NullishCoalesceAssignment=30]=`NullishCoalesceAssignment`,e})(_||{});function ct(e,t){return e==null||t==null?e==t:e.isEquivalent(t)}function lt(e,t,n){let r=e.length;if(r!==t.length)return!1;for(let i=0;i<r;i++)if(!n(e[i],t[i]))return!1;return!0}function ut(e,t){return lt(e,t,(e,t)=>e.isEquivalent(t))}var dt=class{leadingComments;type;sourceSpan;constructor(e,t,n){this.leadingComments=n,this.type=e||null,this.sourceSpan=t||null}prop(e,t){return new xt(this,e,null,t)}key(e,t,n){return new St(this,e,t,n)}callFn(e,t,n,r){return new mt(this,e,null,t,n,r)}instantiate(e,t,n,r){return new ht(this,e,t,n)}conditional(e,t=null,n,r){return new yt(this,e,t,null,n)}equals(e,t){return new bt(_.Equals,this,e,null,t)}notEquals(e,t){return new bt(_.NotEquals,this,e,null,t)}identical(e,t){return new bt(_.Identical,this,e,null,t)}notIdentical(e,t){return new bt(_.NotIdentical,this,e,null,t)}minus(e,t){return new bt(_.Minus,this,e,null,t)}plus(e,t){return new bt(_.Plus,this,e,null,t)}divide(e,t){return new bt(_.Divide,this,e,null,t)}multiply(e,t){return new bt(_.Multiply,this,e,null,t)}modulo(e,t){return new bt(_.Modulo,this,e,null,t)}power(e,t){return new bt(_.Exponentiation,this,e,null,t)}and(e,t){return new bt(_.And,this,e,null,t)}bitwiseOr(e,t){return new bt(_.BitwiseOr,this,e,null,t)}bitwiseAnd(e,t){return new bt(_.BitwiseAnd,this,e,null,t)}or(e,t){return new bt(_.Or,this,e,null,t)}lower(e,t){return new bt(_.Lower,this,e,null,t)}lowerEquals(e,t){return new bt(_.LowerEquals,this,e,null,t)}bigger(e,t){return new bt(_.Bigger,this,e,null,t)}biggerEquals(e,t){return new bt(_.BiggerEquals,this,e,null,t)}isBlank(e){return this.equals(see,e)}nullishCoalesce(e,t){return new bt(_.NullishCoalesce,this,e,null,t)}toStmt(e){return new lee(this,null,e)}},ft=class e extends dt{name;constructor(e,t,n,r){super(t,n,r),this.name=e}isEquivalent(t){return t instanceof e&&this.name===t.name}isConstant(){return!1}visitExpression(e,t){return e.visitReadVarExpr(this,t)}clone(){return new e(this.name,this.type,this.sourceSpan)}set(e){return new bt(_.Assign,this,e,null,this.sourceSpan)}},pt=class e extends dt{expr;constructor(e,t,n,r){super(t,n,r),this.expr=e}visitExpression(e,t){return e.visitTypeofExpr(this,t)}isEquivalent(t){return t instanceof e&&t.expr.isEquivalent(this.expr)}isConstant(){return this.expr.isConstant()}clone(){return new e(this.expr.clone())}},mt=class e extends dt{fn;args;pure;isOptional;constructor(e,t,n,r,i=!1,a,o=!1){super(n,r,a),this.fn=e,this.args=t,this.pure=i,this.isOptional=o}get receiver(){return this.fn}isEquivalent(t){return t instanceof e&&this.fn.isEquivalent(t.fn)&&ut(this.args,t.args)&&this.pure===t.pure}isConstant(){return!1}visitExpression(e,t){return e.visitInvokeFunctionExpr(this,t)}clone(){return new e(this.fn.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan,this.pure,[],this.isOptional)}},ht=class e extends dt{classExpr;args;constructor(e,t,n,r,i){super(n,r,i),this.classExpr=e,this.args=t}isEquivalent(t){return t instanceof e&&this.classExpr.isEquivalent(t.classExpr)&&ut(this.args,t.args)}isConstant(){return!1}visitExpression(e,t){return e.visitInstantiateExpr(this,t)}clone(){return new e(this.classExpr.clone(),this.args.map(e=>e.clone()),this.type,this.sourceSpan)}},gt=class e extends dt{body;flags;constructor(e,t,n,r){super(null,n,r),this.body=e,this.flags=t}isEquivalent(t){return t instanceof e&&this.body===t.body&&this.flags===t.flags}isConstant(){return!0}visitExpression(e,t){return e.visitRegularExpressionLiteral(this,t)}clone(){return new e(this.body,this.flags,this.sourceSpan)}},_t=class e extends dt{value;constructor(e,t,n,r){super(t,n,r),this.value=e}isEquivalent(t){return t instanceof e&&this.value===t.value}isConstant(){return!0}visitExpression(e,t){return e.visitLiteralExpr(this,t)}clone(){return new e(this.value,this.type,this.sourceSpan)}},vt=class e extends dt{value;typeParams;constructor(e,t,n=null,r,i){super(t,r,i),this.value=e,this.typeParams=n}isEquivalent(t){return t instanceof e&&this.value.name===t.value.name&&this.value.moduleName===t.value.moduleName}isConstant(){return!1}visitExpression(e,t){return e.visitExternalExpr(this,t)}clone(){return new e(this.value,this.type,this.typeParams,this.sourceSpan)}},yt=class e extends dt{condition;falseCase;trueCase;constructor(e,t,n=null,r,i,a){super(r||t.type,i,a),this.condition=e,this.falseCase=n,this.trueCase=t}isEquivalent(t){return t instanceof e&&this.condition.isEquivalent(t.condition)&&this.trueCase.isEquivalent(t.trueCase)&&ct(this.falseCase,t.falseCase)}isConstant(){return!1}visitExpression(e,t){return e.visitConditionalExpr(this,t)}clone(){return new e(this.condition.clone(),this.trueCase.clone(),this.falseCase?.clone(),this.type,this.sourceSpan)}},bt=class e extends dt{operator;rhs;lhs;constructor(e,t,n,r,i,a){super(r||t.type,i,a),this.operator=e,this.rhs=n,this.lhs=t}isEquivalent(t){return t instanceof e&&this.operator===t.operator&&this.lhs.isEquivalent(t.lhs)&&this.rhs.isEquivalent(t.rhs)}isConstant(){return!1}visitExpression(e,t){return e.visitBinaryOperatorExpr(this,t)}clone(){return new e(this.operator,this.lhs.clone(),this.rhs.clone(),this.type,this.sourceSpan)}isAssignment(){let e=this.operator;return e===_.Assign||e===_.AdditionAssignment||e===_.SubtractionAssignment||e===_.MultiplicationAssignment||e===_.DivisionAssignment||e===_.RemainderAssignment||e===_.ExponentiationAssignment||e===_.AndAssignment||e===_.OrAssignment||e===_.NullishCoalesceAssignment}},xt=class e extends dt{receiver;name;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.name=t,this.isOptional=a}get index(){return this.name}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.name===t.name&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadPropExpr(this,t)}set(e){return new bt(_.Assign,this.receiver.prop(this.name),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.name,this.type,this.sourceSpan,[],this.isOptional)}},St=class e extends dt{receiver;index;isOptional;constructor(e,t,n,r,i,a=!1){super(n,r,i),this.receiver=e,this.index=t,this.isOptional=a}isEquivalent(t){return t instanceof e&&this.receiver.isEquivalent(t.receiver)&&this.index.isEquivalent(t.index)&&this.isOptional===t.isOptional}isConstant(){return!1}visitExpression(e,t){return e.visitReadKeyExpr(this,t)}set(e){return new bt(_.Assign,this.receiver.key(this.index),e,null,this.sourceSpan)}clone(){return new e(this.receiver.clone(),this.index.clone(),this.type,this.sourceSpan,[],this.isOptional)}},ree=class e extends dt{entries;constructor(e,t,n,r){super(t,n,r),this.entries=e}isConstant(){return this.entries.every(e=>e.isConstant())}isEquivalent(t){return t instanceof e&&ut(this.entries,t.entries)}visitExpression(e,t){return e.visitLiteralArrayExpr(this,t)}clone(){return new e(this.entries.map(e=>e.clone()),this.type,this.sourceSpan)}},iee=class e{expression;constructor(e){this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}clone(){return new e(this.expression.clone())}isConstant(){return this.expression.isConstant()}},aee=class e extends dt{entries;valueType=null;constructor(e,t,n,r){super(t,n,r),this.entries=e,t&&(this.valueType=t.valueType)}isEquivalent(t){return t instanceof e&&ut(this.entries,t.entries)}isConstant(){return this.entries.every(e=>e.isConstant())}visitExpression(e,t){return e.visitLiteralMapExpr(this,t)}clone(){let t=this.entries.map(e=>e.clone());return new e(t,this.type,this.sourceSpan)}},oee=class e extends dt{expression;constructor(e,t,n){super(null,t,n),this.expression=e}isEquivalent(t){return t instanceof e&&this.expression.isEquivalent(t.expression)}isConstant(){return this.expression.isConstant()}visitExpression(e,t){return e.visitSpreadElementExpr(this,t)}clone(){return new e(this.expression.clone(),this.sourceSpan)}},see=new _t(null,st,null),Ct=(function(e){return e[e.None=0]=`None`,e[e.Final=1]=`Final`,e[e.Private=2]=`Private`,e[e.Exported=4]=`Exported`,e[e.Static=8]=`Static`,e})(Ct||{}),cee=class{modifiers;sourceSpan;leadingComments;constructor(e=Ct.None,t=null,n){this.modifiers=e,this.sourceSpan=t,this.leadingComments=n}hasModifier(e){return(this.modifiers&e)!==0}addLeadingComment(e){this.leadingComments=this.leadingComments??[],this.leadingComments.push(e)}},lee=class e extends cee{expr;constructor(e,t,n){super(Ct.None,t,n),this.expr=e}isEquivalent(t){return t instanceof e&&this.expr.isEquivalent(t.expr)}visitStatement(e,t){return e.visitExpressionStmt(this,t)}};(class e{static INSTANCE=new e;keyOf(e){if(e instanceof _t&&typeof e.value==`string`)return`"${e.value}"`;if(e instanceof _t)return String(e.value);if(e instanceof gt)return`/${e.body}/${e.flags??``}`;if(e instanceof ree){let t=[];for(let n of e.entries)t.push(this.keyOf(n));return`[${t.join(`,`)}]`}if(e instanceof aee){let t=[];for(let n of e.entries)if(n instanceof iee)t.push(`...`+this.keyOf(n.expression));else{let e=n.key;n.quoted&&(e=`"${e}"`),t.push(e+`:`+this.keyOf(n.value))}return`{${t.join(`,`)}}`}if(e instanceof vt)return`import("${e.value.moduleName}", ${e.value.name})`;if(e instanceof ft)return`read(${e.name})`;if(e instanceof pt)return`typeof(${this.keyOf(e.expr)})`;if(e instanceof oee)return`...${this.keyOf(e.expression)}`;throw Error(`${this.constructor.name} does not handle expressions of type ${e.constructor.name}`)}});var v=`@angular/core`,y=(()=>{class e{static core={name:null,moduleName:v};static namespaceHTML={name:`ɵɵnamespaceHTML`,moduleName:v};static namespaceMathML={name:`ɵɵnamespaceMathML`,moduleName:v};static namespaceSVG={name:`ɵɵnamespaceSVG`,moduleName:v};static element={name:`ɵɵelement`,moduleName:v};static elementStart={name:`ɵɵelementStart`,moduleName:v};static elementEnd={name:`ɵɵelementEnd`,moduleName:v};static foreignComponent={name:`ɵɵforeignComponent`,moduleName:v};static foreignContent={name:`ɵɵforeignContent`,moduleName:v};static foreignContentFn={name:`ɵɵforeignContentFn`,moduleName:v};static domElement={name:`ɵɵdomElement`,moduleName:v};static domElementStart={name:`ɵɵdomElementStart`,moduleName:v};static domElementEnd={name:`ɵɵdomElementEnd`,moduleName:v};static domElementContainer={name:`ɵɵdomElementContainer`,moduleName:v};static domElementContainerStart={name:`ɵɵdomElementContainerStart`,moduleName:v};static domElementContainerEnd={name:`ɵɵdomElementContainerEnd`,moduleName:v};static domTemplate={name:`ɵɵdomTemplate`,moduleName:v};static domListener={name:`ɵɵdomListener`,moduleName:v};static advance={name:`ɵɵadvance`,moduleName:v};static syntheticHostProperty={name:`ɵɵsyntheticHostProperty`,moduleName:v};static syntheticHostListener={name:`ɵɵsyntheticHostListener`,moduleName:v};static attribute={name:`ɵɵattribute`,moduleName:v};static classProp={name:`ɵɵclassProp`,moduleName:v};static elementContainerStart={name:`ɵɵelementContainerStart`,moduleName:v};static elementContainerEnd={name:`ɵɵelementContainerEnd`,moduleName:v};static elementContainer={name:`ɵɵelementContainer`,moduleName:v};static styleMap={name:`ɵɵstyleMap`,moduleName:v};static classMap={name:`ɵɵclassMap`,moduleName:v};static styleProp={name:`ɵɵstyleProp`,moduleName:v};static interpolate={name:`ɵɵinterpolate`,moduleName:v};static interpolate1={name:`ɵɵinterpolate1`,moduleName:v};static interpolate2={name:`ɵɵinterpolate2`,moduleName:v};static interpolate3={name:`ɵɵinterpolate3`,moduleName:v};static interpolate4={name:`ɵɵinterpolate4`,moduleName:v};static interpolate5={name:`ɵɵinterpolate5`,moduleName:v};static interpolate6={name:`ɵɵinterpolate6`,moduleName:v};static interpolate7={name:`ɵɵinterpolate7`,moduleName:v};static interpolate8={name:`ɵɵinterpolate8`,moduleName:v};static interpolateV={name:`ɵɵinterpolateV`,moduleName:v};static nextContext={name:`ɵɵnextContext`,moduleName:v};static resetView={name:`ɵɵresetView`,moduleName:v};static templateCreate={name:`ɵɵtemplate`,moduleName:v};static defer={name:`ɵɵdefer`,moduleName:v};static deferWhen={name:`ɵɵdeferWhen`,moduleName:v};static deferOnIdle={name:`ɵɵdeferOnIdle`,moduleName:v};static deferOnImmediate={name:`ɵɵdeferOnImmediate`,moduleName:v};static deferOnTimer={name:`ɵɵdeferOnTimer`,moduleName:v};static deferOnHover={name:`ɵɵdeferOnHover`,moduleName:v};static deferOnInteraction={name:`ɵɵdeferOnInteraction`,moduleName:v};static deferOnViewport={name:`ɵɵdeferOnViewport`,moduleName:v};static deferPrefetchWhen={name:`ɵɵdeferPrefetchWhen`,moduleName:v};static deferPrefetchOnIdle={name:`ɵɵdeferPrefetchOnIdle`,moduleName:v};static deferPrefetchOnImmediate={name:`ɵɵdeferPrefetchOnImmediate`,moduleName:v};static deferPrefetchOnTimer={name:`ɵɵdeferPrefetchOnTimer`,moduleName:v};static deferPrefetchOnHover={name:`ɵɵdeferPrefetchOnHover`,moduleName:v};static deferPrefetchOnInteraction={name:`ɵɵdeferPrefetchOnInteraction`,moduleName:v};static deferPrefetchOnViewport={name:`ɵɵdeferPrefetchOnViewport`,moduleName:v};static deferHydrateWhen={name:`ɵɵdeferHydrateWhen`,moduleName:v};static deferHydrateNever={name:`ɵɵdeferHydrateNever`,moduleName:v};static deferHydrateOnIdle={name:`ɵɵdeferHydrateOnIdle`,moduleName:v};static deferHydrateOnImmediate={name:`ɵɵdeferHydrateOnImmediate`,moduleName:v};static deferHydrateOnTimer={name:`ɵɵdeferHydrateOnTimer`,moduleName:v};static deferHydrateOnHover={name:`ɵɵdeferHydrateOnHover`,moduleName:v};static deferHydrateOnInteraction={name:`ɵɵdeferHydrateOnInteraction`,moduleName:v};static deferHydrateOnViewport={name:`ɵɵdeferHydrateOnViewport`,moduleName:v};static deferEnableTimerScheduling={name:`ɵɵdeferEnableTimerScheduling`,moduleName:v};static enableIncrementalHydrationRuntime={name:`ɵɵenableIncrementalHydrationRuntime`,moduleName:v};static conditionalCreate={name:`ɵɵconditionalCreate`,moduleName:v};static conditionalBranchCreate={name:`ɵɵconditionalBranchCreate`,moduleName:v};static conditional={name:`ɵɵconditional`,moduleName:v};static repeater={name:`ɵɵrepeater`,moduleName:v};static repeaterCreate={name:`ɵɵrepeaterCreate`,moduleName:v};static repeaterTrackByIndex={name:`ɵɵrepeaterTrackByIndex`,moduleName:v};static repeaterTrackByIdentity={name:`ɵɵrepeaterTrackByIdentity`,moduleName:v};static componentInstance={name:`ɵɵcomponentInstance`,moduleName:v};static text={name:`ɵɵtext`,moduleName:v};static enableBindings={name:`ɵɵenableBindings`,moduleName:v};static disableBindings={name:`ɵɵdisableBindings`,moduleName:v};static getCurrentView={name:`ɵɵgetCurrentView`,moduleName:v};static textInterpolate={name:`ɵɵtextInterpolate`,moduleName:v};static textInterpolate1={name:`ɵɵtextInterpolate1`,moduleName:v};static textInterpolate2={name:`ɵɵtextInterpolate2`,moduleName:v};static textInterpolate3={name:`ɵɵtextInterpolate3`,moduleName:v};static textInterpolate4={name:`ɵɵtextInterpolate4`,moduleName:v};static textInterpolate5={name:`ɵɵtextInterpolate5`,moduleName:v};static textInterpolate6={name:`ɵɵtextInterpolate6`,moduleName:v};static textInterpolate7={name:`ɵɵtextInterpolate7`,moduleName:v};static textInterpolate8={name:`ɵɵtextInterpolate8`,moduleName:v};static textInterpolateV={name:`ɵɵtextInterpolateV`,moduleName:v};static restoreView={name:`ɵɵrestoreView`,moduleName:v};static pureFunction0={name:`ɵɵpureFunction0`,moduleName:v};static pureFunction1={name:`ɵɵpureFunction1`,moduleName:v};static pureFunction2={name:`ɵɵpureFunction2`,moduleName:v};static pureFunction3={name:`ɵɵpureFunction3`,moduleName:v};static pureFunction4={name:`ɵɵpureFunction4`,moduleName:v};static pureFunction5={name:`ɵɵpureFunction5`,moduleName:v};static pureFunction6={name:`ɵɵpureFunction6`,moduleName:v};static pureFunction7={name:`ɵɵpureFunction7`,moduleName:v};static pureFunction8={name:`ɵɵpureFunction8`,moduleName:v};static pureFunctionV={name:`ɵɵpureFunctionV`,moduleName:v};static pipeBind1={name:`ɵɵpipeBind1`,moduleName:v};static pipeBind2={name:`ɵɵpipeBind2`,moduleName:v};static pipeBind3={name:`ɵɵpipeBind3`,moduleName:v};static pipeBind4={name:`ɵɵpipeBind4`,moduleName:v};static pipeBindV={name:`ɵɵpipeBindV`,moduleName:v};static domProperty={name:`ɵɵdomProperty`,moduleName:v};static ariaProperty={name:`ɵɵariaProperty`,moduleName:v};static property={name:`ɵɵproperty`,moduleName:v};static control={name:`ɵɵcontrol`,moduleName:v};static controlCreate={name:`ɵɵcontrolCreate`,moduleName:v};static animationEnterListener={name:`ɵɵanimateEnterListener`,moduleName:v};static animationLeaveListener={name:`ɵɵanimateLeaveListener`,moduleName:v};static animationEnter={name:`ɵɵanimateEnter`,moduleName:v};static animationLeave={name:`ɵɵanimateLeave`,moduleName:v};static i18n={name:`ɵɵi18n`,moduleName:v};static i18nAttributes={name:`ɵɵi18nAttributes`,moduleName:v};static i18nExp={name:`ɵɵi18nExp`,moduleName:v};static i18nStart={name:`ɵɵi18nStart`,moduleName:v};static i18nEnd={name:`ɵɵi18nEnd`,moduleName:v};static i18nApply={name:`ɵɵi18nApply`,moduleName:v};static i18nPostprocess={name:`ɵɵi18nPostprocess`,moduleName:v};static pipe={name:`ɵɵpipe`,moduleName:v};static projection={name:`ɵɵprojection`,moduleName:v};static projectionDef={name:`ɵɵprojectionDef`,moduleName:v};static reference={name:`ɵɵreference`,moduleName:v};static inject={name:`ɵɵinject`,moduleName:v};static injectAttribute={name:`ɵɵinjectAttribute`,moduleName:v};static directiveInject={name:`ɵɵdirectiveInject`,moduleName:v};static invalidFactory={name:`ɵɵinvalidFactory`,moduleName:v};static invalidFactoryDep={name:`ɵɵinvalidFactoryDep`,moduleName:v};static templateRefExtractor={name:`ɵɵtemplateRefExtractor`,moduleName:v};static forwardRef={name:`forwardRef`,moduleName:v};static resolveForwardRef={name:`resolveForwardRef`,moduleName:v};static replaceMetadata={name:`ɵɵreplaceMetadata`,moduleName:v};static getReplaceMetadataURL={name:`ɵɵgetReplaceMetadataURL`,moduleName:v};static ɵɵdefineInjectable={name:`ɵɵdefineInjectable`,moduleName:v};static declareInjectable={name:`ɵɵngDeclareInjectable`,moduleName:v};static InjectableDeclaration={name:`ɵɵInjectableDeclaration`,moduleName:v};static defineService={name:`ɵɵdefineService`,moduleName:v};static declareService={name:`ɵɵngDeclareService`,moduleName:v};static resolveWindow={name:`ɵɵresolveWindow`,moduleName:v};static resolveDocument={name:`ɵɵresolveDocument`,moduleName:v};static resolveBody={name:`ɵɵresolveBody`,moduleName:v};static getComponentDepsFactory={name:`ɵɵgetComponentDepsFactory`,moduleName:v};static defineComponent={name:`ɵɵdefineComponent`,moduleName:v};static declareComponent={name:`ɵɵngDeclareComponent`,moduleName:v};static setComponentScope={name:`ɵɵsetComponentScope`,moduleName:v};static ChangeDetectionStrategy={name:`ChangeDetectionStrategy`,moduleName:v};static ViewEncapsulation={name:`ViewEncapsulation`,moduleName:v};static ComponentDeclaration={name:`ɵɵComponentDeclaration`,moduleName:v};static FactoryDeclaration={name:`ɵɵFactoryDeclaration`,moduleName:v};static declareFactory={name:`ɵɵngDeclareFactory`,moduleName:v};static FactoryTarget={name:`ɵɵFactoryTarget`,moduleName:v};static defineDirective={name:`ɵɵdefineDirective`,moduleName:v};static declareDirective={name:`ɵɵngDeclareDirective`,moduleName:v};static DirectiveDeclaration={name:`ɵɵDirectiveDeclaration`,moduleName:v};static InjectorDef={name:`ɵɵInjectorDef`,moduleName:v};static InjectorDeclaration={name:`ɵɵInjectorDeclaration`,moduleName:v};static defineInjector={name:`ɵɵdefineInjector`,moduleName:v};static declareInjector={name:`ɵɵngDeclareInjector`,moduleName:v};static NgModuleDeclaration={name:`ɵɵNgModuleDeclaration`,moduleName:v};static ModuleWithProviders={name:`ModuleWithProviders`,moduleName:v};static defineNgModule={name:`ɵɵdefineNgModule`,moduleName:v};static declareNgModule={name:`ɵɵngDeclareNgModule`,moduleName:v};static setNgModuleScope={name:`ɵɵsetNgModuleScope`,moduleName:v};static registerNgModuleType={name:`ɵɵregisterNgModuleType`,moduleName:v};static PipeDeclaration={name:`ɵɵPipeDeclaration`,moduleName:v};static definePipe={name:`ɵɵdefinePipe`,moduleName:v};static declarePipe={name:`ɵɵngDeclarePipe`,moduleName:v};static declareClassMetadata={name:`ɵɵngDeclareClassMetadata`,moduleName:v};static declareClassMetadataAsync={name:`ɵɵngDeclareClassMetadataAsync`,moduleName:v};static setClassMetadata={name:`ɵsetClassMetadata`,moduleName:v};static setClassMetadataAsync={name:`ɵsetClassMetadataAsync`,moduleName:v};static setClassDebugInfo={name:`ɵsetClassDebugInfo`,moduleName:v};static queryRefresh={name:`ɵɵqueryRefresh`,moduleName:v};static viewQuery={name:`ɵɵviewQuery`,moduleName:v};static loadQuery={name:`ɵɵloadQuery`,moduleName:v};static contentQuery={name:`ɵɵcontentQuery`,moduleName:v};static viewQuerySignal={name:`ɵɵviewQuerySignal`,moduleName:v};static contentQuerySignal={name:`ɵɵcontentQuerySignal`,moduleName:v};static queryAdvance={name:`ɵɵqueryAdvance`,moduleName:v};static twoWayProperty={name:`ɵɵtwoWayProperty`,moduleName:v};static twoWayBindingSet={name:`ɵɵtwoWayBindingSet`,moduleName:v};static twoWayListener={name:`ɵɵtwoWayListener`,moduleName:v};static declareLet={name:`ɵɵdeclareLet`,moduleName:v};static storeLet={name:`ɵɵstoreLet`,moduleName:v};static readContextLet={name:`ɵɵreadContextLet`,moduleName:v};static arrowFunction={name:`ɵɵarrowFunction`,moduleName:v};static attachSourceLocations={name:`ɵɵattachSourceLocations`,moduleName:v};static NgOnChangesFeature={name:`ɵɵNgOnChangesFeature`,moduleName:v};static ControlFeature={name:`ɵɵControlFeature`,moduleName:v};static InheritDefinitionFeature={name:`ɵɵInheritDefinitionFeature`,moduleName:v};static ProvidersFeature={name:`ɵɵProvidersFeature`,moduleName:v};static HostDirectivesFeature={name:`ɵɵHostDirectivesFeature`,moduleName:v};static ExternalStylesFeature={name:`ɵɵExternalStylesFeature`,moduleName:v};static listener={name:`ɵɵlistener`,moduleName:v};static getInheritedFactory={name:`ɵɵgetInheritedFactory`,moduleName:v};static sanitizeHtml={name:`ɵɵsanitizeHtml`,moduleName:v};static sanitizeStyle={name:`ɵɵsanitizeStyle`,moduleName:v};static validateAttribute={name:`ɵɵvalidateAttribute`,moduleName:v};static sanitizeResourceUrl={name:`ɵɵsanitizeResourceUrl`,moduleName:v};static sanitizeScript={name:`ɵɵsanitizeScript`,moduleName:v};static sanitizeUrl={name:`ɵɵsanitizeUrl`,moduleName:v};static sanitizeUrlOrResourceUrl={name:`ɵɵsanitizeUrlOrResourceUrl`,moduleName:v};static trustConstantHtml={name:`ɵɵtrustConstantHtml`,moduleName:v};static trustConstantResourceUrl={name:`ɵɵtrustConstantResourceUrl`,moduleName:v};static inputDecorator={name:`Input`,moduleName:v};static outputDecorator={name:`Output`,moduleName:v};static viewChildDecorator={name:`ViewChild`,moduleName:v};static viewChildrenDecorator={name:`ViewChildren`,moduleName:v};static contentChildDecorator={name:`ContentChild`,moduleName:v};static contentChildrenDecorator={name:`ContentChildren`,moduleName:v};static InputSignalBrandWriteType={name:`ɵINPUT_SIGNAL_BRAND_WRITE_TYPE`,moduleName:v};static UnwrapDirectiveSignalInputs={name:`ɵUnwrapDirectiveSignalInputs`,moduleName:v};static unwrapWritableSignal={name:`ɵunwrapWritableSignal`,moduleName:v};static assertType={name:`ɵassertType`,moduleName:v}}return e})();_.And,_.Bigger,_.BiggerEquals,_.BitwiseOr,_.BitwiseAnd,_.Divide,_.Assign,_.Equals,_.Identical,_.Lower,_.LowerEquals,_.Minus,_.Modulo,_.Exponentiation,_.Multiply,_.NotEquals,_.NotIdentical,_.NullishCoalesce,_.Or,_.Plus,_.In,_.InstanceOf,_.AdditionAssignment,_.SubtractionAssignment,_.MultiplicationAssignment,_.DivisionAssignment,_.RemainderAssignment,_.ExponentiationAssignment,_.AndAssignment,_.OrAssignment,_.NullishCoalesceAssignment;var wt=class{span;sourceSpan;constructor(e,t){this.span=e,this.sourceSpan=t}toString(){return`AST`}},Tt=class extends wt{receiver;args;argumentSpan;constructor(e,t,n,r,i){super(e,t),this.receiver=n,this.args=r,this.argumentSpan=i}visit(e,t=null){return e.visitCall(this,t)}},Et=(function(e){return e[e.Property=0]=`Property`,e[e.Attribute=1]=`Attribute`,e[e.Class=2]=`Class`,e[e.Style=3]=`Style`,e[e.LegacyAnimation=4]=`LegacyAnimation`,e[e.TwoWay=5]=`TwoWay`,e[e.Animation=6]=`Animation`,e})(Et||{}),Dt=`(:(where|is)\\()?`,Ot=`-shadowcsshost`,kt=`-shadowcsscontext`,At=`[^)(]*`,jt=String.raw`(?:\(${At}\)|${At})+?`,Mt=String.raw`(?:\(${jt}\)|${At})+?`,Nt=String.raw`(?:\((${Mt})\))`;String.raw`(:nth-[-\w]+)`+Nt,Ot+Nt+``,`${Dt}`,kt+Nt+``;var Pt=(function(e){return e[e.ListEnd=0]=`ListEnd`,e[e.Statement=1]=`Statement`,e[e.Variable=2]=`Variable`,e[e.ElementStart=3]=`ElementStart`,e[e.Element=4]=`Element`,e[e.ForeignComponent=5]=`ForeignComponent`,e[e.Template=6]=`Template`,e[e.ElementEnd=7]=`ElementEnd`,e[e.ContainerStart=8]=`ContainerStart`,e[e.Container=9]=`Container`,e[e.ContainerEnd=10]=`ContainerEnd`,e[e.DisableBindings=11]=`DisableBindings`,e[e.ConditionalCreate=12]=`ConditionalCreate`,e[e.ConditionalBranchCreate=13]=`ConditionalBranchCreate`,e[e.Conditional=14]=`Conditional`,e[e.EnableBindings=15]=`EnableBindings`,e[e.Text=16]=`Text`,e[e.Listener=17]=`Listener`,e[e.InterpolateText=18]=`InterpolateText`,e[e.Binding=19]=`Binding`,e[e.Property=20]=`Property`,e[e.StyleProp=21]=`StyleProp`,e[e.ClassProp=22]=`ClassProp`,e[e.StyleMap=23]=`StyleMap`,e[e.ClassMap=24]=`ClassMap`,e[e.Advance=25]=`Advance`,e[e.Pipe=26]=`Pipe`,e[e.Attribute=27]=`Attribute`,e[e.ExtractedAttribute=28]=`ExtractedAttribute`,e[e.Defer=29]=`Defer`,e[e.DeferOn=30]=`DeferOn`,e[e.DeferWhen=31]=`DeferWhen`,e[e.I18nMessage=32]=`I18nMessage`,e[e.DomProperty=33]=`DomProperty`,e[e.Namespace=34]=`Namespace`,e[e.ProjectionDef=35]=`ProjectionDef`,e[e.EnableIncrementalHydrationRuntime=36]=`EnableIncrementalHydrationRuntime`,e[e.Projection=37]=`Projection`,e[e.Content=38]=`Content`,e[e.RepeaterCreate=39]=`RepeaterCreate`,e[e.Repeater=40]=`Repeater`,e[e.TwoWayProperty=41]=`TwoWayProperty`,e[e.TwoWayListener=42]=`TwoWayListener`,e[e.DeclareLet=43]=`DeclareLet`,e[e.StoreLet=44]=`StoreLet`,e[e.I18nStart=45]=`I18nStart`,e[e.I18n=46]=`I18n`,e[e.I18nEnd=47]=`I18nEnd`,e[e.I18nExpression=48]=`I18nExpression`,e[e.I18nApply=49]=`I18nApply`,e[e.IcuStart=50]=`IcuStart`,e[e.IcuEnd=51]=`IcuEnd`,e[e.IcuPlaceholder=52]=`IcuPlaceholder`,e[e.I18nContext=53]=`I18nContext`,e[e.I18nAttributes=54]=`I18nAttributes`,e[e.SourceLocation=55]=`SourceLocation`,e[e.Animation=56]=`Animation`,e[e.AnimationString=57]=`AnimationString`,e[e.AnimationBinding=58]=`AnimationBinding`,e[e.AnimationListener=59]=`AnimationListener`,e[e.Control=60]=`Control`,e[e.ControlCreate=61]=`ControlCreate`,e})(Pt||{}),Ft=(function(e){return e[e.LexicalRead=0]=`LexicalRead`,e[e.Context=1]=`Context`,e[e.TrackContext=2]=`TrackContext`,e[e.ReadVariable=3]=`ReadVariable`,e[e.NextContext=4]=`NextContext`,e[e.Reference=5]=`Reference`,e[e.StoreLet=6]=`StoreLet`,e[e.ContextLetReference=7]=`ContextLetReference`,e[e.GetCurrentView=8]=`GetCurrentView`,e[e.RestoreView=9]=`RestoreView`,e[e.ResetView=10]=`ResetView`,e[e.PureFunctionExpr=11]=`PureFunctionExpr`,e[e.PureFunctionParameterExpr=12]=`PureFunctionParameterExpr`,e[e.PipeBinding=13]=`PipeBinding`,e[e.PipeBindingVariadic=14]=`PipeBindingVariadic`,e[e.SafePropertyRead=15]=`SafePropertyRead`,e[e.SafeKeyedRead=16]=`SafeKeyedRead`,e[e.SafeNavigationMigration=17]=`SafeNavigationMigration`,e[e.SafeTernaryExpr=18]=`SafeTernaryExpr`,e[e.EmptyExpr=19]=`EmptyExpr`,e[e.AssignTemporaryExpr=20]=`AssignTemporaryExpr`,e[e.ReadTemporaryExpr=21]=`ReadTemporaryExpr`,e[e.SlotLiteralExpr=22]=`SlotLiteralExpr`,e[e.ConditionalCase=23]=`ConditionalCase`,e[e.ConstCollected=24]=`ConstCollected`,e[e.TwoWayBindingSet=25]=`TwoWayBindingSet`,e[e.ForeignContent=26]=`ForeignContent`,e[e.ArrowFunction=27]=`ArrowFunction`,e})(Ft||{}),It=(function(e){return e[e.None=0]=`None`,e[e.AlwaysInline=1]=`AlwaysInline`,e})(It||{}),Lt=(function(e){return e[e.Context=0]=`Context`,e[e.Identifier=1]=`Identifier`,e[e.SavedView=2]=`SavedView`,e[e.Alias=3]=`Alias`,e})(Lt||{}),Rt=(function(e){return e[e.Attribute=0]=`Attribute`,e[e.ClassName=1]=`ClassName`,e[e.StyleProperty=2]=`StyleProperty`,e[e.Property=3]=`Property`,e[e.Template=4]=`Template`,e[e.I18n=5]=`I18n`,e[e.LegacyAnimation=6]=`LegacyAnimation`,e[e.TwoWayProperty=7]=`TwoWayProperty`,e[e.Animation=8]=`Animation`,e})(Rt||{}),zt=(function(e){return e[e.Creation=0]=`Creation`,e[e.Postproccessing=1]=`Postproccessing`,e})(zt||{}),Bt=(function(e){return e[e.I18nText=0]=`I18nText`,e[e.I18nAttribute=1]=`I18nAttribute`,e})(Bt||{}),Vt=(function(e){return e[e.None=0]=`None`,e[e.ElementTag=1]=`ElementTag`,e[e.TemplateTag=2]=`TemplateTag`,e[e.OpenTag=4]=`OpenTag`,e[e.CloseTag=8]=`CloseTag`,e[e.ExpressionIndex=16]=`ExpressionIndex`,e})(Vt||{}),Ht=(function(e){return e[e.HTML=0]=`HTML`,e[e.SVG=1]=`SVG`,e[e.Math=2]=`Math`,e})(Ht||{}),Ut=(function(e){return e[e.Idle=0]=`Idle`,e[e.Immediate=1]=`Immediate`,e[e.Timer=2]=`Timer`,e[e.Hover=3]=`Hover`,e[e.Interaction=4]=`Interaction`,e[e.Viewport=5]=`Viewport`,e[e.Never=6]=`Never`,e})(Ut||{}),Wt=(function(e){return e[e.RootI18n=0]=`RootI18n`,e[e.Icu=1]=`Icu`,e[e.Attr=2]=`Attr`,e})(Wt||{}),Gt=(function(e){return e[e.NgTemplate=0]=`NgTemplate`,e[e.Structural=1]=`Structural`,e[e.Block=2]=`Block`,e})(Gt||{}),Kt=(function(e){return e[e.None=0]=`None`,e[e.InChildOperation=1]=`InChildOperation`,e[e.InArrowFunctionOperation=2]=`InArrowFunctionOperation`,e[e.InSafeNavigationMigration=4]=`InSafeNavigationMigration`,e})(Kt||{});Pt.Element,Pt.ElementStart,Pt.Container,Pt.ContainerStart,Pt.Template,Pt.RepeaterCreate,Pt.ConditionalCreate,Pt.ConditionalBranchCreate;var qt=(function(e){return e[e.Tmpl=0]=`Tmpl`,e[e.Host=1]=`Host`,e[e.Both=2]=`Both`,e})(qt||{}),Jt=(function(e){return e[e.Full=0]=`Full`,e[e.DomOnly=1]=`DomOnly`,e})(Jt||{});y.ariaProperty,y.ariaProperty,y.attribute,y.attribute,y.classProp,y.classProp,y.element,y.element,y.elementContainer,y.elementContainer,y.elementContainerEnd,y.elementContainerEnd,y.elementContainerStart,y.elementContainerStart,y.elementEnd,y.elementEnd,y.elementStart,y.elementStart,y.domProperty,y.domProperty,y.i18nExp,y.i18nExp,y.listener,y.listener,y.listener,y.listener,y.property,y.property,y.styleProp,y.styleProp,y.syntheticHostListener,y.syntheticHostListener,y.syntheticHostProperty,y.syntheticHostProperty,y.templateCreate,y.templateCreate,y.twoWayProperty,y.twoWayProperty,y.twoWayListener,y.twoWayListener,y.declareLet,y.declareLet,y.conditionalCreate,y.conditionalBranchCreate,y.conditionalBranchCreate,y.conditionalBranchCreate,y.domElement,y.domElement,y.domElementStart,y.domElementStart,y.domElementEnd,y.domElementEnd,y.domElementContainer,y.domElementContainer,y.domElementContainerStart,y.domElementContainerStart,y.domElementContainerEnd,y.domElementContainerEnd,y.domListener,y.domListener,y.domTemplate,y.domTemplate,y.animationEnter,y.animationEnter,y.animationLeave,y.animationLeave,y.animationEnterListener,y.animationEnterListener,y.animationLeaveListener,y.animationLeaveListener,_.And,_.Bigger,_.BiggerEquals,_.BitwiseOr,_.BitwiseAnd,_.Divide,_.Assign,_.Equals,_.Identical,_.Lower,_.LowerEquals,_.Minus,_.Modulo,_.Exponentiation,_.Multiply,_.NotEquals,_.NotIdentical,_.NullishCoalesce,_.Or,_.Plus,_.In,_.InstanceOf,_.AdditionAssignment,_.SubtractionAssignment,_.MultiplicationAssignment,_.DivisionAssignment,_.RemainderAssignment,_.ExponentiationAssignment,_.AndAssignment,_.OrAssignment,_.NullishCoalesceAssignment,Pt.Property,Pt.Property,Pt.Property,Pt.Attribute,Pt.Attribute,Pt.Property,Pt.TwoWayProperty,Pt.Container,Pt.ContainerStart,Pt.ContainerEnd,Pt.Element,Pt.ElementStart,Pt.ElementEnd,Pt.Template,Pt.ElementEnd,Pt.ElementStart,Pt.Element,Pt.ContainerEnd,Pt.ContainerStart,Pt.Container,Pt.I18nEnd,Pt.I18nStart,Pt.I18n,Pt.Pipe;var Yt=` \f
+\r	\v ᠎ - \u2028\u2029  　`;`${Yt}`,`${Yt}`;var Xt=(function(e){return e[e.Character=0]=`Character`,e[e.Identifier=1]=`Identifier`,e[e.PrivateIdentifier=2]=`PrivateIdentifier`,e[e.Keyword=3]=`Keyword`,e[e.String=4]=`String`,e[e.Operator=5]=`Operator`,e[e.Number=6]=`Number`,e[e.RegExpBody=7]=`RegExpBody`,e[e.RegExpFlags=8]=`RegExpFlags`,e[e.Error=9]=`Error`,e})(Xt||{}),Zt=(function(e){return e[e.Plain=0]=`Plain`,e[e.TemplateLiteralPart=1]=`TemplateLiteralPart`,e[e.TemplateLiteralEnd=2]=`TemplateLiteralEnd`,e})(Zt||{});Xt.Character,Pt.StyleMap,Pt.ClassMap,Pt.StyleProp,Pt.ClassProp,Pt.Attribute,Pt.Property,Pt.Attribute,Pt.Control,Pt.DomProperty,Pt.DomProperty,Pt.Attribute,Pt.StyleMap,Pt.ClassMap,Pt.StyleProp,Pt.ClassProp,Pt.Listener,Pt.TwoWayListener,Pt.AnimationListener,Pt.StyleMap,Pt.ClassMap,Pt.StyleProp,Pt.ClassProp,Pt.Property,Pt.TwoWayProperty,Pt.DomProperty,Pt.Attribute,Pt.Animation,Pt.Control,Ut.Idle,y.deferOnIdle,y.deferPrefetchOnIdle,y.deferHydrateOnIdle,Ut.Immediate,y.deferOnImmediate,y.deferPrefetchOnImmediate,y.deferHydrateOnImmediate,Ut.Timer,y.deferOnTimer,y.deferPrefetchOnTimer,y.deferHydrateOnTimer,Ut.Hover,y.deferOnHover,y.deferPrefetchOnHover,y.deferHydrateOnHover,Ut.Interaction,y.deferOnInteraction,y.deferPrefetchOnInteraction,y.deferHydrateOnInteraction,Ut.Viewport,y.deferOnViewport,y.deferPrefetchOnViewport,y.deferHydrateOnViewport,Ut.Never,y.deferHydrateNever,y.deferHydrateNever,y.deferHydrateNever,y.pipeBind1,y.pipeBind2,y.pipeBind3,y.pipeBind4,y.textInterpolate,y.textInterpolate1,y.textInterpolate2,y.textInterpolate3,y.textInterpolate4,y.textInterpolate5,y.textInterpolate6,y.textInterpolate7,y.textInterpolate8,y.textInterpolateV,y.interpolate,y.interpolate1,y.interpolate2,y.interpolate3,y.interpolate4,y.interpolate5,y.interpolate6,y.interpolate7,y.interpolate8,y.interpolateV,y.pureFunction0,y.pureFunction1,y.pureFunction2,y.pureFunction3,y.pureFunction4,y.pureFunction5,y.pureFunction6,y.pureFunction7,y.pureFunction8,y.pureFunctionV,y.resolveWindow,y.resolveDocument,y.resolveBody,nt.HTML,y.sanitizeHtml,nt.RESOURCE_URL,y.sanitizeResourceUrl,nt.SCRIPT,y.sanitizeScript,nt.STYLE,y.sanitizeStyle,nt.URL,y.sanitizeUrl,nt.ATTRIBUTE_NO_BINDING,y.validateAttribute,nt.HTML,y.trustConstantHtml,nt.RESOURCE_URL,y.trustConstantResourceUrl;var Qt=(function(e){return e[e.None=0]=`None`,e[e.ViewContextRead=1]=`ViewContextRead`,e[e.ViewContextWrite=2]=`ViewContextWrite`,e[e.SideEffectful=4]=`SideEffectful`,e})(Qt||{});qt.Tmpl,qt.Tmpl,qt.Both,qt.Host,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Both,qt.Both,qt.Both,qt.Tmpl,qt.Both,qt.Both,qt.Tmpl,qt.Both,qt.Tmpl,qt.Both,qt.Both,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Both,qt.Both,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Both,qt.Both,qt.Both,qt.Tmpl,qt.Tmpl,qt.Both,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Both,qt.Both,qt.Tmpl,qt.Both,qt.Both,qt.Both,qt.Both,qt.Both,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Both,qt.Tmpl,qt.Both,qt.Tmpl,qt.Both,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Tmpl,qt.Both,qt.Both,qt.Both,Et.Property,Rt.Property,Et.TwoWay,Rt.TwoWayProperty,Et.Attribute,Rt.Attribute,Et.Class,Rt.ClassName,Et.Style,Rt.StyleProperty,Et.LegacyAnimation,Rt.LegacyAnimation,Et.Animation,Rt.Animation;var $t=`%COMP%`;`${$t}`,`${$t}`,class e{static SINGLETON=new e;static veWillInferAnyFor(t){let n=e.SINGLETON;return t instanceof Tt?t.visit(n):t.receiver.visit(n)}visitUnary(e){return e.expr.visit(this)}visitBinary(e){return e.left.visit(this)||e.right.visit(this)}visitChain(){return!1}visitConditional(e){return e.condition.visit(this)||e.trueExp.visit(this)||e.falseExp.visit(this)}visitCall(){return!0}visitSafeCall(){return!1}visitImplicitReceiver(){return!1}visitThisReceiver(){return!1}visitInterpolation(e){return e.expressions.some(e=>e.visit(this))}visitKeyedRead(){return!1}visitLiteralArray(){return!0}visitLiteralMap(){return!0}visitLiteralPrimitive(){return!1}visitPipe(){return!0}visitPrefixNot(e){return e.expression.visit(this)}visitTypeofExpression(e){return e.expression.visit(this)}visitVoidExpression(e){return e.expression.visit(this)}visitNonNullAssert(e){return e.expression.visit(this)}visitPropertyRead(){return!1}visitSafePropertyRead(){return!1}visitSafeKeyedRead(){return!1}visitTemplateLiteral(){return!1}visitTemplateLiteralElement(){return!1}visitTaggedTemplateLiteral(){return!1}visitParenthesizedExpression(e){return e.expression.visit(this)}visitRegularExpressionLiteral(){return!1}visitSpreadElement(e){return e.expression.visit(this)}visitArrowFunction(e,t){return!1}};var en=null,tn=!1,nn=1,rn=null,an=Symbol(`SIGNAL`);function on(e){let t=en;return en=e,t}function sn(){return en}var cn={version:0,lastCleanEpoch:0,dirty:!1,producers:void 0,producersTail:void 0,consumers:void 0,consumersTail:void 0,recomputing:!1,consumerAllowSignalWrites:!1,consumerIsAlwaysLive:!1,kind:`unknown`,producerMustRecompute:()=>!1,producerRecomputeValue:()=>{},consumerMarkedDirty:()=>{},consumerOnSignalRead:()=>{}};function ln(e){if(tn)throw Error(``);if(en===null)return;en.consumerOnSignalRead(e);let t=en.producersTail;if(t!==void 0&&t.producer===e)return;let n,r=en.recomputing;if(r&&(n=t===void 0?en.producers:t.nextProducer,n!==void 0&&n.producer===e)){en.producersTail=n,n.lastReadVersion=e.version,n.knownValidAtEpoch=nn;return}let i=e.consumersTail;if(i!==void 0&&i.consumer===en&&(!r||i.knownValidAtEpoch===nn))return;let a=wn(en),o={producer:e,consumer:en,nextProducer:n,prevConsumer:void 0,knownValidAtEpoch:nn,lastReadVersion:e.version,nextConsumer:void 0};en.producersTail=o,t===void 0?en.producers=o:t.nextProducer=o,a&&Sn(e,o)}function un(){nn++}function dn(e){if((!wn(e)||e.dirty)&&(e.dirty||e.lastCleanEpoch!==nn)){if(!e.producerMustRecompute(e)&&!bn(e)){hn(e);return}e.producerRecomputeValue(e),hn(e)}}function fn(e){if(e.consumers===void 0)return;let t=tn;tn=!0;try{for(let t=e.consumers;t!==void 0;t=t.nextConsumer){let e=t.consumer;e.dirty||mn(e)}}finally{tn=t}}function pn(){return en?.consumerAllowSignalWrites!==!1}function mn(e){e.dirty=!0,fn(e),e.consumerMarkedDirty?.(e)}function hn(e){e.dirty=!1,e.lastCleanEpoch=nn}function gn(e){return e&&_n(e),on(e)}function _n(e){if(e.producersTail?.knownValidAtEpoch===nn){let t=e.producers;for(;t!==void 0;)t.knownValidAtEpoch=null,t=t.nextProducer}e.producersTail=void 0,e.recomputing=!0}function vn(e,t){on(t),e&&yn(e)}function yn(e){e.recomputing=!1;let t=e.producersTail,n=t===void 0?e.producers:t.nextProducer;if(n!==void 0){if(wn(e))do n=Cn(n);while(n!==void 0);t===void 0?e.producers=void 0:t.nextProducer=void 0}}function bn(e){for(let t=e.producers;t!==void 0;t=t.nextProducer){let e=t.producer,n=t.lastReadVersion;if(n!==e.version||(dn(e),n!==e.version))return!0}return!1}function xn(e){if(wn(e)){let t=e.producers;for(;t!==void 0;)t=Cn(t)}e.producers=void 0,e.producersTail=void 0,e.consumers=void 0,e.consumersTail=void 0}function Sn(e,t){let n=e.consumersTail,r=wn(e);if(n===void 0?(t.nextConsumer=void 0,e.consumers=t):(t.nextConsumer=n.nextConsumer,n.nextConsumer=t),t.prevConsumer=n,e.consumersTail=t,!r)for(let t=e.producers;t!==void 0;t=t.nextProducer)Sn(t.producer,t)}function Cn(e){let t=e.producer,n=e.nextProducer,r=e.nextConsumer,i=e.prevConsumer;if(e.nextConsumer=void 0,e.prevConsumer=void 0,r===void 0?t.consumersTail=i:r.prevConsumer=i,i!==void 0)i.nextConsumer=r;else if(t.consumers=r,!wn(t)){let e=t.producers;for(;e!==void 0;)e=Cn(e)}return n}function wn(e){return e.consumerIsAlwaysLive||e.consumers!==void 0}function Tn(e){rn?.(e)}function En(e,t){return Object.is(e,t)}function Dn(e,t){let n=Object.create(uee);n.computation=e,t!==void 0&&(n.equal=t);let r=()=>{if(dn(n),ln(n),n.value===An)throw n.error;return n.value};return r[an]=n,Tn(n),r}var On=Symbol(`UNSET`),kn=Symbol(`COMPUTING`),An=Symbol(`ERRORED`),uee={...cn,value:On,dirty:!0,error:null,equal:En,kind:`computed`,producerMustRecompute(e){return e.value===On||e.value===kn},producerRecomputeValue(e){if(e.value===kn)throw Error(``);let t=e.value;e.value=kn;let n=gn(e),r,i=!1;try{r=e.computation(),on(null),i=t!==On&&t!==An&&r!==An&&e.equal(t,r)}catch(t){r=An,e.error=t}finally{vn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function dee(){throw Error()}var jn=dee;function Mn(e){jn(e)}function fee(e){jn=e}var pee=null;function mee(e,t){let n=Object.create(Fn);n.value=e,t!==void 0&&(n.equal=t);let r=()=>hee(n);return r[an]=n,Tn(n),[r,e=>Nn(n,e),e=>Pn(n,e)]}function hee(e){return ln(e),e.value}function Nn(e,t){pn()||Mn(e),e.equal(e.value,t)||(e.value=t,In(e))}function Pn(e,t){pn()||Mn(e),Nn(e,t(e.value))}var Fn={...cn,equal:En,value:void 0,kind:`signal`};function In(e){e.version++,un(),fn(e),pee?.(e)}var Ln={...cn,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,dirty:!0,kind:`effect`};function Rn(e){if(e.dirty=!1,e.version>0&&!bn(e))return;e.version++;let t=gn(e);try{e.cleanup(),e.fn()}finally{vn(e,t)}}var zn=void 0;function Bn(){return zn}function Vn(e){let t=zn;return zn=e,t}var Hn=Symbol(`NotFound`);function Un(e){return e===Hn||e?.name===`ɵNotFound`}function Wn(e,t,n){let r=Object.create(qn);r.source=e,r.computation=t,n!=null&&(r.equal=n);let i=()=>{if(dn(r),ln(r),r.value===An)throw r.error;return r.value};return i[an]=r,Tn(r),i}function Gn(e,t){dn(e),Nn(e,t),hn(e)}function Kn(e,t){if(dn(e),e.value===An)throw e.error;Pn(e,t),hn(e)}var qn={...cn,value:On,dirty:!0,error:null,equal:En,kind:`linkedSignal`,producerMustRecompute(e){return e.value===On||e.value===kn},producerRecomputeValue(e){if(e.value===kn)throw Error(``);let t=e.value;e.value=kn;let n=gn(e),r,i=!1;try{let n=e.source(),a=t!==On&&t!==An,o=a?{source:e.sourceValue,value:t}:void 0;r=e.computation(n,o),e.sourceValue=n,on(null),i=a&&r!==An&&e.equal(t,r)}catch(t){r=An,e.error=t}finally{vn(e,n)}if(i){e.value=t;return}e.value=r,e.version++}};function Jn(e){let t=on(null);try{return e()}finally{on(t)}}var Yn=function(e,t){return Yn=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},Yn(e,t)};function Xn(e,t){if(typeof t!=`function`&&t!==null)throw TypeError(`Class extends value `+String(t)+` is not a constructor or null`);Yn(e,t);function n(){this.constructor=e}e.prototype=t===null?Object.create(t):(n.prototype=t.prototype,new n)}function Zn(e,t,n,r){function i(e){return e instanceof n?e:new n(function(t){t(e)})}return new(n||=Promise)(function(n,a){function o(e){try{c(r.next(e))}catch(e){a(e)}}function s(e){try{c(r.throw(e))}catch(e){a(e)}}function c(e){e.done?n(e.value):i(e.value).then(o,s)}c((r=r.apply(e,t||[])).next())})}function Qn(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,o=Object.create((typeof Iterator==`function`?Iterator:Object).prototype);return o.next=s(0),o.throw=s(1),o.return=s(2),typeof Symbol==`function`&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(t){return c([e,t])}}function c(s){if(r)throw TypeError(`Generator is already executing.`);for(;o&&(o=0,s[0]&&(n=0)),n;)try{if(r=1,i&&(a=s[0]&2?i.return:s[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,s[1])).done)return a;switch(i=0,a&&(s=[s[0]&2,a.value]),s[0]){case 0:case 1:a=s;break;case 4:return n.label++,{value:s[1],done:!1};case 5:n.label++,i=s[1],s=[0];continue;case 7:s=n.ops.pop(),n.trys.pop();continue;default:if(a=n.trys,!(a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){n.label=s[1];break}if(s[0]===6&&n.label<a[1]){n.label=a[1],a=s;break}if(a&&n.label<a[2]){n.label=a[2],n.ops.push(s);break}a[2]&&n.ops.pop(),n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e],i=0}finally{r=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}}function $n(e){var t=typeof Symbol==`function`&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&typeof e.length==`number`)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw TypeError(t?`Object is not iterable.`:`Symbol.iterator is not defined.`)}function er(e,t){var n=typeof Symbol==`function`&&e[Symbol.iterator];if(!n)return e;var r=n.call(e),i,a=[],o;try{for(;(t===void 0||t-->0)&&!(i=r.next()).done;)a.push(i.value)}catch(e){o={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return a}function tr(e,t,n){if(n||arguments.length===2)for(var r=0,i=t.length,a;r<i;r++)(a||!(r in t))&&(a||=Array.prototype.slice.call(t,0,r),a[r]=t[r]);return e.concat(a||Array.prototype.slice.call(t))}function nr(e){return this instanceof nr?(this.v=e,this):new nr(e)}function rr(e,t,n){if(!Symbol.asyncIterator)throw TypeError(`Symbol.asyncIterator is not defined.`);var r=n.apply(e,t||[]),i,a=[];return i=Object.create((typeof AsyncIterator==`function`?AsyncIterator:Object).prototype),s(`next`),s(`throw`),s(`return`,o),i[Symbol.asyncIterator]=function(){return this},i;function o(e){return function(t){return Promise.resolve(t).then(e,d)}}function s(e,t){r[e]&&(i[e]=function(t){return new Promise(function(n,r){a.push([e,t,n,r])>1||c(e,t)})},t&&(i[e]=t(i[e])))}function c(e,t){try{l(r[e](t))}catch(e){f(a[0][3],e)}}function l(e){e.value instanceof nr?Promise.resolve(e.value.v).then(u,d):f(a[0][2],e)}function u(e){c(`next`,e)}function d(e){c(`throw`,e)}function f(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function ir(e){if(!Symbol.asyncIterator)throw TypeError(`Symbol.asyncIterator is not defined.`);var t=e[Symbol.asyncIterator],n;return t?t.call(e):(e=typeof $n==`function`?$n(e):e[Symbol.iterator](),n={},r(`next`),r(`throw`),r(`return`),n[Symbol.asyncIterator]=function(){return this},n);function r(t){n[t]=e[t]&&function(n){return new Promise(function(r,a){n=e[t](n),i(r,a,n.done,n.value)})}}function i(e,t,n,r){Promise.resolve(r).then(function(t){e({value:t,done:n})},t)}}function ar(e){return typeof e==`function`}function or(e){var t=e(function(e){Error.call(e),e.stack=Error().stack});return t.prototype=Object.create(Error.prototype),t.prototype.constructor=t,t}var sr=or(function(e){return function(t){e(this),this.message=t?t.length+` errors occurred during unsubscription:
+`+t.map(function(e,t){return t+1+`) `+e.toString()}).join(`
+  `):``,this.name=`UnsubscriptionError`,this.errors=t}});function cr(e,t){if(e){var n=e.indexOf(t);0<=n&&e.splice(n,1)}}var lr=function(){function e(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}return e.prototype.unsubscribe=function(){var e,t,n,r,i;if(!this.closed){this.closed=!0;var a=this._parentage;if(a){if(this._parentage=null,Array.isArray(a))try{for(var o=$n(a),s=o.next();!s.done;s=o.next())s.value.remove(this)}catch(t){e={error:t}}finally{try{s&&!s.done&&(t=o.return)&&t.call(o)}finally{if(e)throw e.error}}else a.remove(this)}var c=this.initialTeardown;if(ar(c))try{c()}catch(e){i=e instanceof sr?e.errors:[e]}var l=this._finalizers;if(l){this._finalizers=null;try{for(var u=$n(l),d=u.next();!d.done;d=u.next()){var f=d.value;try{fr(f)}catch(e){i??=[],e instanceof sr?i=tr(tr([],er(i)),er(e.errors)):i.push(e)}}}catch(e){n={error:e}}finally{try{d&&!d.done&&(r=u.return)&&r.call(u)}finally{if(n)throw n.error}}}if(i)throw new sr(i)}},e.prototype.add=function(t){if(t&&t!==this){if(this.closed)fr(t);else{if(t instanceof e){if(t.closed||t._hasParent(this))return;t._addParent(this)}(this._finalizers=this._finalizers??[]).push(t)}}},e.prototype._hasParent=function(e){var t=this._parentage;return t===e||Array.isArray(t)&&t.includes(e)},e.prototype._addParent=function(e){var t=this._parentage;this._parentage=Array.isArray(t)?(t.push(e),t):t?[t,e]:e},e.prototype._removeParent=function(e){var t=this._parentage;t===e?this._parentage=null:Array.isArray(t)&&cr(t,e)},e.prototype.remove=function(t){var n=this._finalizers;n&&cr(n,t),t instanceof e&&t._removeParent(this)},e.EMPTY=(function(){var t=new e;return t.closed=!0,t})(),e}(),ur=lr.EMPTY;function dr(e){return e instanceof lr||e&&`closed`in e&&ar(e.remove)&&ar(e.add)&&ar(e.unsubscribe)}function fr(e){ar(e)?e():e.unsubscribe()}var pr={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},mr={setTimeout:function(e,t){var n=[...arguments].slice(2),r=mr.delegate;return r?.setTimeout?r.setTimeout.apply(r,tr([e,t],er(n))):setTimeout.apply(void 0,tr([e,t],er(n)))},clearTimeout:function(e){return(mr.delegate?.clearTimeout||clearTimeout)(e)},delegate:void 0};function hr(e){mr.setTimeout(function(){var t=pr.onUnhandledError;if(t)t(e);else throw e})}function gr(){}var _r=(function(){return br(`C`,void 0,void 0)})();function vr(e){return br(`E`,void 0,e)}function yr(e){return br(`N`,e,void 0)}function br(e,t,n){return{kind:e,value:t,error:n}}var xr=null;function Sr(e){if(pr.useDeprecatedSynchronousErrorHandling){var t=!xr;if(t&&(xr={errorThrown:!1,error:null}),e(),t){var n=xr,r=n.errorThrown,i=n.error;if(xr=null,r)throw i}}else e()}function Cr(e){pr.useDeprecatedSynchronousErrorHandling&&xr&&(xr.errorThrown=!0,xr.error=e)}var wr=function(e){Xn(t,e);function t(t){var n=e.call(this)||this;return n.isStopped=!1,t?(n.destination=t,dr(t)&&t.add(n)):n.destination=Mr,n}return t.create=function(e,t,n){return new Or(e,t,n)},t.prototype.next=function(e){this.isStopped?jr(yr(e),this):this._next(e)},t.prototype.error=function(e){this.isStopped?jr(vr(e),this):(this.isStopped=!0,this._error(e))},t.prototype.complete=function(){this.isStopped?jr(_r,this):(this.isStopped=!0,this._complete())},t.prototype.unsubscribe=function(){this.closed||(this.isStopped=!0,e.prototype.unsubscribe.call(this),this.destination=null)},t.prototype._next=function(e){this.destination.next(e)},t.prototype._error=function(e){try{this.destination.error(e)}finally{this.unsubscribe()}},t.prototype._complete=function(){try{this.destination.complete()}finally{this.unsubscribe()}},t}(lr),Tr=Function.prototype.bind;function Er(e,t){return Tr.call(e,t)}var Dr=function(){function e(e){this.partialObserver=e}return e.prototype.next=function(e){var t=this.partialObserver;if(t.next)try{t.next(e)}catch(e){kr(e)}},e.prototype.error=function(e){var t=this.partialObserver;if(t.error)try{t.error(e)}catch(e){kr(e)}else kr(e)},e.prototype.complete=function(){var e=this.partialObserver;if(e.complete)try{e.complete()}catch(e){kr(e)}},e}(),Or=function(e){Xn(t,e);function t(t,n,r){var i=e.call(this)||this,a;if(ar(t)||!t)a={next:t??void 0,error:n??void 0,complete:r??void 0};else{var o;i&&pr.useDeprecatedNextContext?(o=Object.create(t),o.unsubscribe=function(){return i.unsubscribe()},a={next:t.next&&Er(t.next,o),error:t.error&&Er(t.error,o),complete:t.complete&&Er(t.complete,o)}):a=t}return i.destination=new Dr(a),i}return t}(wr);function kr(e){pr.useDeprecatedSynchronousErrorHandling?Cr(e):hr(e)}function Ar(e){throw e}function jr(e,t){var n=pr.onStoppedNotification;n&&mr.setTimeout(function(){return n(e,t)})}var Mr={closed:!0,next:gr,error:Ar,complete:gr},Nr=(function(){return typeof Symbol==`function`&&Symbol.observable||`@@observable`})();function Pr(e){return e}function Fr(e){return e.length===0?Pr:e.length===1?e[0]:function(t){return e.reduce(function(e,t){return t(e)},t)}}var Ir=function(){function e(e){e&&(this._subscribe=e)}return e.prototype.lift=function(t){var n=new e;return n.source=this,n.operator=t,n},e.prototype.subscribe=function(e,t,n){var r=this,i=zr(e)?e:new Or(e,t,n);return Sr(function(){var e=r,t=e.operator,n=e.source;i.add(t?t.call(i,n):n?r._subscribe(i):r._trySubscribe(i))}),i},e.prototype._trySubscribe=function(e){try{return this._subscribe(e)}catch(t){e.error(t)}},e.prototype.forEach=function(e,t){var n=this;return t=Lr(t),new t(function(t,r){var i=new Or({next:function(t){try{e(t)}catch(e){r(e),i.unsubscribe()}},error:r,complete:t});n.subscribe(i)})},e.prototype._subscribe=function(e){return this.source?.subscribe(e)},e.prototype[Nr]=function(){return this},e.prototype.pipe=function(){return Fr([...arguments])(this)},e.prototype.toPromise=function(e){var t=this;return e=Lr(e),new e(function(e,n){var r;t.subscribe(function(e){return r=e},function(e){return n(e)},function(){return e(r)})})},e.create=function(t){return new e(t)},e}();function Lr(e){return e??pr.Promise??Promise}function Rr(e){return e&&ar(e.next)&&ar(e.error)&&ar(e.complete)}function zr(e){return e&&e instanceof wr||Rr(e)&&dr(e)}function Br(e){return ar(e?.lift)}function Vr(e){return function(t){if(Br(t))return t.lift(function(t){try{return e(t,this)}catch(e){this.error(e)}});throw TypeError(`Unable to lift unknown Observable type`)}}function Hr(e,t,n,r,i){return new Ur(e,t,n,r,i)}var Ur=function(e){Xn(t,e);function t(t,n,r,i,a,o){var s=e.call(this,t)||this;return s.onFinalize=a,s.shouldUnsubscribe=o,s._next=n?function(e){try{n(e)}catch(e){t.error(e)}}:e.prototype._next,s._error=i?function(e){try{i(e)}catch(e){t.error(e)}finally{this.unsubscribe()}}:e.prototype._error,s._complete=r?function(){try{r()}catch(e){t.error(e)}finally{this.unsubscribe()}}:e.prototype._complete,s}return t.prototype.unsubscribe=function(){var t;if(!this.shouldUnsubscribe||this.shouldUnsubscribe()){var n=this.closed;e.prototype.unsubscribe.call(this),!n&&((t=this.onFinalize)==null||t.call(this))}},t}(wr),Wr=or(function(e){return function(){e(this),this.name=`ObjectUnsubscribedError`,this.message=`object unsubscribed`}}),Gr=function(e){Xn(t,e);function t(){var t=e.call(this)||this;return t.closed=!1,t.currentObservers=null,t.observers=[],t.isStopped=!1,t.hasError=!1,t.thrownError=null,t}return t.prototype.lift=function(e){var t=new Kr(this,this);return t.operator=e,t},t.prototype._throwIfClosed=function(){if(this.closed)throw new Wr},t.prototype.next=function(e){var t=this;Sr(function(){var n,r;if(t._throwIfClosed(),!t.isStopped){t.currentObservers||=Array.from(t.observers);try{for(var i=$n(t.currentObservers),a=i.next();!a.done;a=i.next())a.value.next(e)}catch(e){n={error:e}}finally{try{a&&!a.done&&(r=i.return)&&r.call(i)}finally{if(n)throw n.error}}}})},t.prototype.error=function(e){var t=this;Sr(function(){if(t._throwIfClosed(),!t.isStopped){t.hasError=t.isStopped=!0,t.thrownError=e;for(var n=t.observers;n.length;)n.shift().error(e)}})},t.prototype.complete=function(){var e=this;Sr(function(){if(e._throwIfClosed(),!e.isStopped){e.isStopped=!0;for(var t=e.observers;t.length;)t.shift().complete()}})},t.prototype.unsubscribe=function(){this.isStopped=this.closed=!0,this.observers=this.currentObservers=null},Object.defineProperty(t.prototype,"observed",{get:function(){return this.observers?.length>0},enumerable:!1,configurable:!0}),t.prototype._trySubscribe=function(t){return this._throwIfClosed(),e.prototype._trySubscribe.call(this,t)},t.prototype._subscribe=function(e){return this._throwIfClosed(),this._checkFinalizedStatuses(e),this._innerSubscribe(e)},t.prototype._innerSubscribe=function(e){var t=this,n=this,r=n.hasError,i=n.isStopped,a=n.observers;return r||i?ur:(this.currentObservers=null,a.push(e),new lr(function(){t.currentObservers=null,cr(a,e)}))},t.prototype._checkFinalizedStatuses=function(e){var t=this,n=t.hasError,r=t.thrownError,i=t.isStopped;n?e.error(r):i&&e.complete()},t.prototype.asObservable=function(){var e=new Ir;return e.source=this,e},t.create=function(e,t){return new Kr(e,t)},t}(Ir),Kr=function(e){Xn(t,e);function t(t,n){var r=e.call(this)||this;return r.destination=t,r.source=n,r}return t.prototype.next=function(e){var t,n;(n=(t=this.destination)?.next)==null||n.call(t,e)},t.prototype.error=function(e){var t,n;(n=(t=this.destination)?.error)==null||n.call(t,e)},t.prototype.complete=function(){var e,t;(t=(e=this.destination)?.complete)==null||t.call(e)},t.prototype._subscribe=function(e){return this.source?.subscribe(e)??ur},t}(Gr),qr=function(e){Xn(t,e);function t(t){var n=e.call(this)||this;return n._value=t,n}return Object.defineProperty(t.prototype,"value",{get:function(){return this.getValue()},enumerable:!1,configurable:!0}),t.prototype._subscribe=function(t){var n=e.prototype._subscribe.call(this,t);return!n.closed&&t.next(this._value),n},t.prototype.getValue=function(){var e=this,t=e.hasError,n=e.thrownError,r=e._value;if(t)throw n;return this._throwIfClosed(),r},t.prototype.next=function(t){e.prototype.next.call(this,this._value=t)},t}(Gr);function Jr(e){return e[e.length-1]}function Yr(e){return ar(Jr(e))?e.pop():void 0}var Xr=(function(e){return e&&typeof e.length==`number`&&typeof e!=`function`});function Zr(e){return ar(e?.then)}function Qr(e){return ar(e[Nr])}function $r(e){return Symbol.asyncIterator&&ar(e?.[Symbol.asyncIterator])}function ei(e){return TypeError(`You provided `+(typeof e==`object`&&e?`an invalid object`:`'`+e+`'`)+` where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.`)}function ti(){return typeof Symbol!=`function`||!Symbol.iterator?`@@iterator`:Symbol.iterator}var ni=ti();function ri(e){return ar(e?.[ni])}function ii(e){return rr(this,arguments,function(){var t,n,r,i;return Qn(this,function(a){switch(a.label){case 0:t=e.getReader(),a.label=1;case 1:a.trys.push([1,,9,10]),a.label=2;case 2:return[4,nr(t.read())];case 3:return n=a.sent(),r=n.value,i=n.done,i?[4,nr(void 0)]:[3,5];case 4:return[2,a.sent()];case 5:return[4,nr(r)];case 6:return[4,a.sent()];case 7:return a.sent(),[3,2];case 8:return[3,10];case 9:return t.releaseLock(),[7];case 10:return[2]}})})}function ai(e){return ar(e?.getReader)}function oi(e){if(e instanceof Ir)return e;if(e!=null){if(Qr(e))return si(e);if(Xr(e))return ci(e);if(Zr(e))return li(e);if($r(e))return di(e);if(ri(e))return ui(e);if(ai(e))return fi(e)}throw ei(e)}function si(e){return new Ir(function(t){var n=e[Nr]();if(ar(n.subscribe))return n.subscribe(t);throw TypeError(`Provided object does not correctly implement Symbol.observable`)})}function ci(e){return new Ir(function(t){for(var n=0;n<e.length&&!t.closed;n++)t.next(e[n]);t.complete()})}function li(e){return new Ir(function(t){e.then(function(e){t.closed||(t.next(e),t.complete())},function(e){return t.error(e)}).then(null,hr)})}function ui(e){return new Ir(function(t){var n,r;try{for(var i=$n(e),a=i.next();!a.done;a=i.next()){var o=a.value;if(t.next(o),t.closed)return}}catch(e){n={error:e}}finally{try{a&&!a.done&&(r=i.return)&&r.call(i)}finally{if(n)throw n.error}}t.complete()})}function di(e){return new Ir(function(t){gee(e,t).catch(function(e){return t.error(e)})})}function fi(e){return di(ii(e))}function gee(e,t){var n,r,i,a;return Zn(this,void 0,void 0,function(){var o,s;return Qn(this,function(c){switch(c.label){case 0:c.trys.push([0,5,6,11]),n=ir(e),c.label=1;case 1:return[4,n.next()];case 2:if(r=c.sent(),r.done)return[3,4];if(o=r.value,t.next(o),t.closed)return[2];c.label=3;case 3:return[3,1];case 4:return[3,11];case 5:return s=c.sent(),i={error:s},[3,11];case 6:return c.trys.push([6,,9,10]),r&&!r.done&&(a=n.return)?[4,a.call(n)]:[3,8];case 7:c.sent(),c.label=8;case 8:return[3,10];case 9:if(i)throw i.error;return[7];case 10:return[7];case 11:return t.complete(),[2]}})})}function pi(e,t,n,r,i){r===void 0&&(r=0),i===void 0&&(i=!1);var a=t.schedule(function(){n(),i?e.add(this.schedule(null,r)):this.unsubscribe()},r);if(e.add(a),!i)return a}function mi(e,t){return t===void 0&&(t=0),Vr(function(n,r){n.subscribe(Hr(r,function(n){return pi(r,e,function(){return r.next(n)},t)},function(){return pi(r,e,function(){return r.complete()},t)},function(n){return pi(r,e,function(){return r.error(n)},t)}))})}function hi(e,t){return t===void 0&&(t=0),Vr(function(n,r){r.add(e.schedule(function(){return n.subscribe(r)},t))})}function _ee(e,t){return oi(e).pipe(hi(t),mi(t))}function vee(e,t){return oi(e).pipe(hi(t),mi(t))}function yee(e,t){return new Ir(function(n){var r=0;return t.schedule(function(){r===e.length?n.complete():(n.next(e[r++]),n.closed||this.schedule())})})}function bee(e,t){return new Ir(function(n){var r;return pi(n,t,function(){r=e[ni](),pi(n,t,function(){var e,t,i;try{e=r.next(),t=e.value,i=e.done}catch(e){n.error(e);return}i?n.complete():n.next(t)},0,!0)}),function(){return ar(r?.return)&&r.return()}})}function gi(e,t){if(!e)throw Error(`Iterable cannot be null`);return new Ir(function(n){pi(n,t,function(){var r=e[Symbol.asyncIterator]();pi(n,t,function(){r.next().then(function(e){e.done?n.complete():n.next(e.value)})},0,!0)})})}function xee(e,t){return gi(ii(e),t)}function See(e,t){if(e!=null){if(Qr(e))return _ee(e,t);if(Xr(e))return yee(e,t);if(Zr(e))return vee(e,t);if($r(e))return gi(e,t);if(ri(e))return bee(e,t);if(ai(e))return xee(e,t)}throw ei(e)}function Cee(e,t){return t?See(e,t):oi(e)}function _i(e,t){return Vr(function(n,r){var i=0;n.subscribe(Hr(r,function(n){r.next(e.call(t,n,i++))}))})}var wee=Array.isArray;function Tee(e,t){return wee(t)?e.apply(void 0,tr([],er(t))):e(t)}function Eee(e){return _i(function(t){return Tee(e,t)})}var Dee=Array.isArray,Oee=Object.getPrototypeOf,kee=Object.prototype,Aee=Object.keys;function jee(e){if(e.length===1){var t=e[0];if(Dee(t))return{args:t,keys:null};if(Mee(t)){var n=Aee(t);return{args:n.map(function(e){return t[e]}),keys:n}}}return{args:e,keys:null}}function Mee(e){return e&&typeof e==`object`&&Oee(e)===kee}function Nee(e,t){return e.reduce(function(e,n,r){return e[n]=t[r],e},{})}function Pee(){var e=[...arguments],t=Yr(e),n=jee(e),r=n.args,i=n.keys,a=new Ir(function(e){var t=r.length;if(!t){e.complete();return}for(var n=Array(t),a=t,o=t,s=function(t){var s=!1;oi(r[t]).subscribe(Hr(e,function(e){s||(s=!0,o--),n[t]=e},function(){return a--},void 0,function(){(!a||!s)&&(o||e.next(i?Nee(i,n):n),e.complete())}))},c=0;c<t;c++)s(c)});return t?a.pipe(Eee(t)):a}var vi=`https://angular.dev/best-practices/security#preventing-cross-site-scripting-xss`,yi=class extends Error{code;constructor(e,t){super(bi(e,t)),this.code=e}};function Fee(e){return`NG0${Math.abs(e)}`}function bi(e,t){return`${Fee(e)}${t?`: `+t:``}`}function xi(e){for(let t in e)if(e[t]===xi)return t;throw Error(``)}function Iee(e,t){for(let n in t)Object.hasOwn(t,n)&&!Object.hasOwn(e,n)&&(e[n]=t[n])}function Si(e){if(typeof e==`string`)return e;if(Array.isArray(e))return`[${e.map(Si).join(`, `)}]`;if(e==null)return``+e;let t=e.overriddenName||e.name;if(t)return`${t}`;let n=e.toString();if(n==null)return``+n;let r=n.indexOf(`
+`);return r>=0?n.slice(0,r):n}function Ci(e,t){return e?t?`${e} ${t}`:e:t||``}var Lee=xi({__forward_ref__:xi});function wi(e){return e.__forward_ref__=wi,e}function Ti(e){return Ei(e)?e():e}function Ei(e){return typeof e==`function`&&Object.hasOwn(e,Lee)&&e.__forward_ref__===wi}function Di(e){return{token:e.token,providedIn:e.providedIn||null,factory:e.factory,value:void 0}}function Oi(e){return Ree(e,ji)}function Ree(e,t){return Object.hasOwn(e,t)&&e[t]||null}function ki(e){return(e?.[ji]??null)||null}function Ai(e){return e&&Object.hasOwn(e,Mi)?e[Mi]:null}var ji=xi({ɵprov:xi}),Mi=xi({ɵinj:xi}),Ni=class{_desc;ngMetadataName=`InjectionToken`;ɵprov;constructor(e,t){this._desc=e,this.ɵprov=void 0,typeof t==`number`?this.__NG_ELEMENT_ID__=t:t!==void 0&&(this.ɵprov=Di({token:this,providedIn:t.providedIn||`root`,factory:t.factory}))}get multi(){return this}toString(){return`InjectionToken ${this._desc}`}};function Pi(e){return e&&!!e.ɵproviders}var Fi=xi({ɵcmp:xi}),Ii=xi({ɵdir:xi}),Li=xi({ɵpipe:xi}),Ri=xi({ɵfac:xi}),zi=xi({__NG_ELEMENT_ID__:xi}),Bi=xi({__NG_ENV_ID__:xi});function Vi(e){return Wi(e,`@Component`),e[Fi]||null}function Hi(e){return Wi(e,`@Directive`),e[Ii]||null}function Ui(e){return Wi(e,`@Pipe`),e[Li]||null}function Wi(e,t){if(e==null)throw new yi(-919,!1)}function Gi(e){return typeof e==`string`?e:e==null?``:String(e)}var Ki=xi({ngErrorCode:xi}),qi=xi({ngErrorMessage:xi}),Ji=xi({ngTokenPath:xi});function Yi(e,t){return Zi(``,-200,t)}function Xi(e,t){throw new yi(-201,!1)}function Zi(e,t,n){let r=new yi(t,e);return r[Ki]=t,r[qi]=e,n&&(r[Ji]=n),r}function Qi(e){return e[Ki]}var $i;function ea(){return $i}function ta(e){let t=$i;return $i=e,t}function na(e,t,n){let r=Oi(e);if(r&&r.providedIn==`root`)return r.value===void 0?r.value=r.factory():r.value;if(n&8)return null;if(t!==void 0)return t;Xi(e,``)}var ra=globalThis,ia={},aa=`__NG_DI_FLAG__`,oa=class{injector;constructor(e){this.injector=e}retrieve(e,t){let n=la(t)||0;try{return this.injector.get(e,n&8?null:ia,n)}catch(e){if(Un(e))return e;throw e}}};function sa(e,t=0){let n=Bn();if(n===void 0)throw new yi(-203,!1);if(n===null)return na(e,void 0,t);{let r=ua(t),i=n.retrieve(e,r);if(Un(i)){if(r.optional)return null;throw i}return i}}function ca(e,t=0){return(ea()||sa)(Ti(e),t)}function b(e,t){return ca(e,la(t))}function la(e){return e===void 0||typeof e==`number`?e:0|(e.optional&&8)|(e.host&&1)|(e.self&&2)|(e.skipSelf&&4)}function ua(e){return{optional:!!(e&8),host:!!(e&1),self:!!(e&2),skipSelf:!!(e&4)}}function da(e){let t=[];for(let n=0;n<e.length;n++){let r=Ti(e[n]);if(Array.isArray(r)){if(r.length===0)throw new yi(900,!1);let e,n=0;for(let t=0;t<r.length;t++){let i=r[t],a=fa(i);typeof a==`number`?a===-1?e=i.token:n|=a:e=i}t.push(ca(e,n))}else t.push(ca(r))}return t}function fa(e){return e[aa]}function pa(e,t){return Object.hasOwn(e,Ri)?e[Ri]:null}function ma(e,t,n){if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++){let i=e[r],a=t[r];if(n&&(i=n(i),a=n(a)),a!==i)return!1}return!0}function ha(e){return e.flat(1/0)}function ga(e,t){e.forEach(e=>Array.isArray(e)?ga(e,t):t(e))}function _a(e,t,n){t>=e.length?e.push(n):e.splice(t,0,n)}function va(e,t){return t>=e.length-1?e.pop():e.splice(t,1)[0]}function ya(e,t){let n=[];for(let r=0;r<e;r++)n.push(t);return n}function ba(e,t,n,r){let i=e.length;if(i==t)e.push(n,r);else if(i===1)e.push(r,e[0]),e[0]=n;else{for(i--,e.push(e[i-1],e[i]);i>t;){let t=i-2;e[i]=e[t],i--}e[t]=n,e[t+1]=r}}function xa(e,t,n){let r=Ca(e,t);return r>=0?e[r|1]=n:(r=~r,ba(e,r,t,n)),r}function Sa(e,t){let n=Ca(e,t);if(n>=0)return e[n|1]}function Ca(e,t){return wa(e,t,1)}function wa(e,t,n){let r=0,i=e.length>>n;for(;i!==r;){let a=r+(i-r>>1),o=e[a<<n];if(t===o)return a<<n;o>t?i=a:r=a+1}return~(i<<n)}var Ta={},Ea=[],Da=new Ni(``),Oa=new Ni(``,-1),ka=new Ni(``),Aa=class{get(e,t=ia){if(t===ia){let e=Zi(``,-201);throw e.name=`ɵNotFound`,e}return t}};function ja(...e){return{ɵproviders:Ma(!0,e),ɵfromNgModule:!0}}function Ma(e,...t){let n=[],r=new Set,i,a=e=>{n.push(e)};return ga(t,e=>{let t=e;Pa(t,a,[],r)&&(i||=[],i.push(t))}),i!==void 0&&Na(i,a),n}function Na(e,t){for(let n=0;n<e.length;n++){let{ngModule:r,providers:i}=e[n];Fa(i,e=>{t(e,r)})}}function Pa(e,t,n,r){if(e=Ti(e),!e)return!1;let i=null,a=Ai(e),o=!a&&Vi(e);if(!a&&!o){let t=e.ngModule;if(a=Ai(t),a)i=t;else return!1}else if(o&&!o.standalone)return!1;else i=e;let s=r.has(i);if(o){if(s)return!1;if(r.add(i),o.dependencies){let e=typeof o.dependencies==`function`?o.dependencies():o.dependencies;for(let i of e)Pa(i,t,n,r)}}else if(a){if(a.imports!=null&&!s){r.add(i);let e;try{ga(a.imports,i=>{Pa(i,t,n,r)&&(e||=[],e.push(i))})}finally{}e!==void 0&&Na(e,t)}if(!s){let e=pa(i)||(()=>new i);t({provide:i,useFactory:e,deps:Ea},i),t({provide:ka,useValue:i,multi:!0},i),t({provide:Da,useValue:()=>ca(i),multi:!0},i)}let o=a.providers;if(o!=null&&!s){let n=e;Fa(o,e=>{t(e,n)})}}else return!1;return i!==e&&e.providers!==void 0}function Fa(e,t){for(let n of e)Pi(n)&&(n=n.ɵproviders),Array.isArray(n)?Fa(n,t):t(n)}var Ia=xi({provide:String,useValue:xi});function La(e){return typeof e==`object`&&!!e&&Ia in e}function Ra(e){return!!(e&&e.useExisting)}function za(e){return!!(e&&e.useFactory)}function Ba(e){return typeof e==`function`}function Va(e){return!!e.useClass}var Ha=new Ni(``),Ua={},Wa={},Ga=void 0;function Ka(){return Ga===void 0&&(Ga=new Aa),Ga}var qa=class{},Ja=class extends qa{parent;source;scopes;records=new Map;_ngOnDestroyHooks=new Set;_onDestroyHooks=[];get destroyed(){return this._destroyed}_destroyed=!1;injectorDefTypes;constructor(e,t,n,r){super(),this.parent=t,this.source=n,this.scopes=r,io(e,e=>this.processProvider(e)),this.records.set(Oa,eo(void 0,this)),r.has(`environment`)&&this.records.set(qa,eo(void 0,this));let i=this.records.get(Ha);i!=null&&typeof i.value==`string`&&this.scopes.add(i.value),this.injectorDefTypes=new Set(this.get(ka,Ea,{self:!0}))}retrieve(e,t){let n=la(t)||0;try{return this.get(e,ia,n)}catch(e){if(Un(e))return e;throw e}}destroy(){$a(this),this._destroyed=!0;let e=on(null);try{for(let e of this._ngOnDestroyHooks)e.ngOnDestroy();let e=this._onDestroyHooks;this._onDestroyHooks=[];for(let t of e)t()}finally{this.records.clear(),this._ngOnDestroyHooks.clear(),this.injectorDefTypes.clear(),on(e)}}onDestroy(e){return $a(this),this._onDestroyHooks.push(e),()=>this.removeOnDestroy(e)}runInContext(e){$a(this);let t=Vn(this),n=ta(void 0);try{return e()}finally{Vn(t),ta(n)}}get(e,t=ia,n){if($a(this),Object.hasOwn(e,Bi))return e[Bi](this);let r=la(n),i=Vn(this),a=ta(void 0);try{if(!(r&4)){let t=this.records.get(e);if(t===void 0){let n=ro(e)&&Oi(e);t=n&&this.injectableDefInScope(n)?eo(Ya(e),Ua):null,this.records.set(e,t)}if(t!=null)return this.hydrate(e,t,r)}let n=r&2?Ka():this.parent;return t=r&8&&t===ia?null:t,n.get(e,t)}catch(e){let t=Qi(e);throw t===-200||t===-201?new yi(t,null):e}finally{ta(a),Vn(i)}}resolveInjectorInitializers(){let e=on(null),t=Vn(this),n=ta(void 0);try{let e=this.get(Da,Ea,{self:!0});for(let t of e)t()}finally{Vn(t),ta(n),on(e)}}toString(){return`R3Injector[...]`}processProvider(e){e=Ti(e);let t=Ba(e)?e:Ti(e&&e.provide),n=Za(e);if(!Ba(e)&&e.multi===!0){let n=this.records.get(t);n||(n=eo(void 0,Ua,!0),n.factory=()=>da(n.multi),this.records.set(t,n)),t=e,n.multi.push(e)}this.records.set(t,n)}hydrate(e,t,n){let r=on(null);try{if(t.value===Wa)throw Yi(``);return t.value===Ua&&(t.value=Wa,t.value=t.factory(void 0,n)),typeof t.value==`object`&&t.value&&no(t.value)&&this._ngOnDestroyHooks.add(t.value),t.value}finally{on(r)}}injectableDefInScope(e){if(!e.providedIn)return!1;let t=Ti(e.providedIn);return typeof t==`string`?t===`any`||this.scopes.has(t):this.injectorDefTypes.has(t)}removeOnDestroy(e){let t=this._onDestroyHooks.indexOf(e);t!==-1&&this._onDestroyHooks.splice(t,1)}};function Ya(e){let t=Oi(e),n=t===null?pa(e):t.factory;if(n!==null)return n;if(e instanceof Ni)throw new yi(-204,!1);if(e instanceof Function)return Xa(e);throw new yi(-204,!1)}function Xa(e){if(e.length>0)throw new yi(-204,!1);let t=ki(e);return t===null?()=>new e:()=>t.factory(e)}function Za(e){return La(e)?eo(void 0,e.useValue):eo(Qa(e),Ua)}function Qa(e,t,n){let r;if(Ba(e)){let t=Ti(e);return pa(t)||Ya(t)}if(La(e))r=()=>Ti(e.useValue);else if(za(e))r=()=>e.useFactory(...da(e.deps||[]));else if(Ra(e))r=(t,n)=>ca(Ti(e.useExisting),n!==void 0&&n&8?8:void 0);else{let t=Ti(e&&(e.useClass||e.provide));if(to(e))r=()=>new t(...da(e.deps));else return pa(t)||Ya(t)}return r}function $a(e){if(e.destroyed)throw new yi(-205,!1)}function eo(e,t,n=!1){return{factory:e,value:t,multi:n?[]:void 0}}function to(e){return!!e.deps}function no(e){return typeof e==`object`&&!!e&&typeof e.ngOnDestroy==`function`}function ro(e){return typeof e==`function`||typeof e==`object`&&e.ngMetadataName===`InjectionToken`}function io(e,t){for(let n of e)Array.isArray(n)?io(n,t):n&&Pi(n)?io(n.ɵproviders,t):t(n)}function ao(e,t){let n;e instanceof Ja?($a(e),n=e):n=new oa(e);let r=Vn(n),i=ta(void 0);try{return t()}finally{Vn(r),ta(i)}}function oo(){return ea()!==void 0||Bn()!=null}var so=1;function co(e){return Array.isArray(e)&&typeof e[so]==`object`}function lo(e){return Array.isArray(e)&&e[so]===!0}function uo(e){return!!(e.flags&4)}function fo(e){return e.componentOffset>-1}function po(e){return(e.flags&1)==1}function mo(e){return!!e.template}function ho(e){return!!(e[2]&512)}function go(e){return(e[2]&256)==256}var _o=(function(e){return e[e.NONE=0]=`NONE`,e[e.HTML=1]=`HTML`,e[e.STYLE=2]=`STYLE`,e[e.SCRIPT=3]=`SCRIPT`,e[e.URL=4]=`URL`,e[e.RESOURCE_URL=5]=`RESOURCE_URL`,e[e.ATTRIBUTE_NO_BINDING=6]=`ATTRIBUTE_NO_BINDING`,e})(_o||{}),vo=`math`;function yo(e){for(;Array.isArray(e);)e=e[0];return e}function bo(e,t){return yo(t[e])}function xo(e,t){return yo(t[e.index])}function So(e,t){return e.data[t]}function Co(e,t){return e[t]}function wo(e,t,n,r){n>=e.data.length&&(e.data[n]=null,e.blueprint[n]=null),t[n]=r}function To(e,t){let n=t[e];return co(n)?n:n[0]}function Eo(e){return(e[2]&128)==128}function Do(e){return lo(e[3])}function Oo(e,t){return t==null?null:e[t]}function ko(e){e[17]=0}function Ao(e){e[2]&1024||(e[2]|=1024,Eo(e)&&Po(e))}function jo(e,t){for(;e>0;)t=t[14],e--;return t}function Mo(e){return!!(e[2]&9216||e[24]?.dirty)}function No(e){e[10].changeDetectionScheduler?.notify(8),e[2]&64&&(e[2]|=1024),Mo(e)&&Po(e)}function Po(e){e[10].changeDetectionScheduler?.notify(0);let t=Lo(e);for(;t!==null&&!(t[2]&8192||(t[2]|=8192,!Eo(t)));)t=Lo(t)}function Fo(e,t){if(go(e))throw new yi(911,!1);e[21]===null&&(e[21]=[]),e[21].push(t)}function Io(e,t){if(e[21]===null)return;let n=e[21].indexOf(t);n!==-1&&e[21].splice(n,1)}function Lo(e){let t=e[3];return lo(t)?t[3]:t}function Ro(e){return e[7]??=[]}function zo(e){return e.cleanup??=[]}function zee(e,t,n,r){let i=Ro(t);i.push(n),e.firstCreatePass&&zo(e).push(r,i.length-1)}var Bo={lFrame:fs(null),bindingsEnabled:!0,skipHydrationRootTNode:null},Vo=!1;function Bee(){return Bo.lFrame.elementDepthCount}function Vee(){Bo.lFrame.elementDepthCount++}function Ho(){Bo.lFrame.elementDepthCount--}function Uo(){return Bo.bindingsEnabled}function Wo(){return Bo.skipHydrationRootTNode!==null}function Go(e){return Bo.skipHydrationRootTNode===e}function Ko(){Bo.skipHydrationRootTNode=null}function qo(){return Bo.lFrame.lView}function Jo(){return Bo.lFrame.tView}function x(e){return Bo.lFrame.contextLView=e,e[8]}function S(e){return Bo.lFrame.contextLView=null,e}function Yo(){let e=Xo();for(;e!==null&&e.type===64;)e=e.parent;return e}function Xo(){return Bo.lFrame.currentTNode}function Hee(){let e=Bo.lFrame,t=e.currentTNode;return e.isParent?t:t.parent}function Zo(e,t){let n=Bo.lFrame;n.currentTNode=e,n.isParent=t}function Qo(){return Bo.lFrame.isParent}function $o(){Bo.lFrame.isParent=!1}function es(){return Bo.lFrame.contextLView}function ts(){return Vo}function ns(e){let t=Vo;return Vo=e,t}function rs(){let e=Bo.lFrame,t=e.bindingRootIndex;return t===-1&&(t=e.bindingRootIndex=e.tView.bindingStartIndex),t}function is(){return Bo.lFrame.bindingIndex}function Uee(e){return Bo.lFrame.bindingIndex=e}function as(){return Bo.lFrame.bindingIndex++}function os(e){let t=Bo.lFrame,n=t.bindingIndex;return t.bindingIndex+=e,n}function Wee(){return Bo.lFrame.inI18n}function Gee(e,t){let n=Bo.lFrame;n.bindingIndex=n.bindingRootIndex=e,ss(t)}function Kee(){return Bo.lFrame.currentDirectiveIndex}function ss(e){Bo.lFrame.currentDirectiveIndex=e}function qee(e){let t=Bo.lFrame.currentDirectiveIndex;return t===-1?null:e[t]}function Jee(){return Bo.lFrame.currentQueryIndex}function cs(e){Bo.lFrame.currentQueryIndex=e}function Yee(e){let t=e[1];return t.type===2?t.declTNode:t.type===1?e[5]:null}function ls(e,t,n){if(n&4){let r=t,i=e;for(;r=r.parent,r===null&&!(n&1)&&(r=Yee(i),!(r===null||(i=i[14],r.type&10))););if(r===null)return!1;t=r,e=i}let r=Bo.lFrame=ds();return r.currentTNode=t,r.lView=e,!0}function us(e){let t=ds(),n=e[1];Bo.lFrame=t,t.currentTNode=n.firstChild,t.lView=e,t.tView=n,t.contextLView=e,t.bindingIndex=n.bindingStartIndex,t.inI18n=!1}function ds(){let e=Bo.lFrame,t=e===null?null:e.child;return t===null?fs(e):t}function fs(e){let t={currentTNode:null,isParent:!0,lView:null,tView:null,selectedIndex:-1,contextLView:null,elementDepthCount:0,currentNamespace:null,currentDirectiveIndex:-1,bindingRootIndex:-1,bindingIndex:-1,currentQueryIndex:0,parent:e,child:null,inI18n:!1};return e!==null&&(e.child=t),t}function ps(){let e=Bo.lFrame;return Bo.lFrame=e.parent,e.currentTNode=null,e.lView=null,e}var ms=ps;function hs(){let e=ps();e.isParent=!0,e.tView=null,e.selectedIndex=-1,e.contextLView=null,e.elementDepthCount=0,e.currentDirectiveIndex=-1,e.currentNamespace=null,e.bindingRootIndex=-1,e.bindingIndex=-1,e.currentQueryIndex=0}function Xee(e){return(Bo.lFrame.contextLView=jo(e,Bo.lFrame.contextLView))[8]}function gs(){return Bo.lFrame.selectedIndex}function _s(e){Bo.lFrame.selectedIndex=e}function vs(){let e=Bo.lFrame;return So(e.tView,e.selectedIndex)}function C(){Bo.lFrame.currentNamespace=`svg`}function ys(){Zee()}function Zee(){Bo.lFrame.currentNamespace=null}function bs(){return Bo.lFrame.currentNamespace}var xs=!0;function Ss(){return xs}function Cs(e){xs=e}function ws(e,t=null,n=null,r){let i=Ts(e,t,n,r);return i.resolveInjectorInitializers(),i}function Ts(e,t=null,n=null,r,i=new Set){return new Ja([n||Ea,ja(e)],t||Ka(),null,i)}var Es=class e{static THROW_IF_NOT_FOUND=ia;static NULL=new Aa;static create(e,t){if(Array.isArray(e))return ws({name:``},t,e,``);{let t=e.name??``;return ws({name:t},e.parent,e.providers,t)}}static ɵprov=Di({token:e,providedIn:`any`,factory:()=>ca(Oa)});static __NG_ELEMENT_ID__=-1},Ds=new Ni(``),Os=class{static __NG_ELEMENT_ID__=As;static __NG_ENV_ID__=e=>e},ks=class extends Os{_lView;constructor(e){super(),this._lView=e}get destroyed(){return go(this._lView)}onDestroy(e){let t=this._lView;return Fo(t,e),()=>Io(t,e)}};function As(){return new ks(qo())}var js=new Ni(``),Ms=(()=>{class e{taskId=0;pendingTasks=new Set;destroyed=!1;pendingTask=new qr(!1);debugTaskTracker=b(js,{optional:!0});get hasPendingTasks(){return!this.destroyed&&this.pendingTask.value}get hasPendingTasksObservable(){return this.destroyed?new Ir(e=>{e.next(!1),e.complete()}):this.pendingTask}add(){!this.hasPendingTasks&&!this.destroyed&&this.pendingTask.next(!0);let e=this.taskId++;return this.pendingTasks.add(e),this.debugTaskTracker?.add(e),e}has(e){return this.pendingTasks.has(e)}remove(e){this.pendingTasks.delete(e),this.debugTaskTracker?.remove(e),this.pendingTasks.size===0&&this.hasPendingTasks&&this.pendingTask.next(!1)}ngOnDestroy(){this.pendingTasks.clear(),this.hasPendingTasks&&this.pendingTask.next(!1),this.destroyed=!0,this.pendingTask.unsubscribe()}static ɵprov=Di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),Ns=class extends Gr{__isAsync;destroyRef=void 0;pendingTasks=void 0;constructor(e=!1){super(),this.__isAsync=e,oo()&&(this.destroyRef=b(Os,{optional:!0})??void 0,this.pendingTasks=b(Ms,{optional:!0})??void 0)}emit(e){let t=on(null);try{super.next(e)}finally{on(t)}}subscribe(e,t,n){let r=e,i=t||(()=>null),a=n;if(e&&typeof e==`object`){let t=e;r=t.next?.bind(t),i=t.error?.bind(t),a=t.complete?.bind(t)}this.__isAsync&&(i=this.wrapInTimeout(i),r&&=this.wrapInTimeout(r),a&&=this.wrapInTimeout(a));let o=super.subscribe({next:r,error:i,complete:a});return e instanceof lr&&e.add(o),o}wrapInTimeout(e){return t=>{let n=this.pendingTasks?.add();setTimeout(()=>{try{e(t)}finally{n!==void 0&&this.pendingTasks?.remove(n)}})}}};function Ps(...e){}function Fs(e){let t,n;function r(){e=Ps;try{n!==void 0&&typeof cancelAnimationFrame==`function`&&cancelAnimationFrame(n),t!==void 0&&clearTimeout(t)}catch{}}return t=setTimeout(()=>{e(),r()}),typeof requestAnimationFrame==`function`&&(n=requestAnimationFrame(()=>{e(),r()})),()=>r()}function Is(e){return queueMicrotask(()=>e()),()=>{e=Ps}}var Ls=`isAngularZone`,Rs=`isAngularZone_ID`,zs=0,Bs=class e{hasPendingMacrotasks=!1;hasPendingMicrotasks=!1;isStable=!0;onUnstable=new Ns(!1);onMicrotaskEmpty=new Ns(!1);onStable=new Ns(!1);onError=new Ns(!1);constructor(e){let{enableLongStackTrace:t=!1,shouldCoalesceEventChangeDetection:n=!1,shouldCoalesceRunChangeDetection:r=!1,scheduleInRootZone:i=!1}=e;if(typeof Zone>`u`)throw new yi(908,!1);Zone.assertZonePatched();let a=this;a._nesting=0,a._outer=a._inner=Zone.current,Zone.TaskTrackingZoneSpec&&(a._inner=a._inner.fork(new Zone.TaskTrackingZoneSpec)),t&&Zone.longStackTraceZoneSpec&&(a._inner=a._inner.fork(Zone.longStackTraceZoneSpec)),a.shouldCoalesceEventChangeDetection=!r&&n,a.shouldCoalesceRunChangeDetection=r,a.callbackScheduled=!1,a.scheduleInRootZone=i,Ws(a)}static isInAngularZone(){return typeof Zone<`u`&&Zone.current.get(Ls)===!0}static assertInAngularZone(){if(!e.isInAngularZone())throw new yi(909,!1)}static assertNotInAngularZone(){if(e.isInAngularZone())throw new yi(909,!1)}run(e,t,n){return this._inner.run(e,t,n)}runTask(e,t,n,r){let i=this._inner,a=i.scheduleEventTask(`NgZoneEvent: `+r,e,Vs,Ps,Ps);try{return i.runTask(a,t,n)}finally{i.cancelTask(a)}}runGuarded(e,t,n){return this._inner.runGuarded(e,t,n)}runOutsideAngular(e){return this._outer.run(e)}},Vs={};function Hs(e){if(e._nesting==0&&!e.hasPendingMicrotasks&&!e.isStable)try{e._nesting++,e.onMicrotaskEmpty.emit(null)}finally{if(e._nesting--,!e.hasPendingMicrotasks)try{e.runOutsideAngular(()=>e.onStable.emit(null))}finally{e.isStable=!0}}}function Us(e){if(e.isCheckStableRunning||e.callbackScheduled)return;e.callbackScheduled=!0;function t(){Fs(()=>{e.callbackScheduled=!1,Gs(e),e.isCheckStableRunning=!0,Hs(e),e.isCheckStableRunning=!1})}e.scheduleInRootZone?Zone.root.run(()=>{t()}):e._outer.run(()=>{t()}),Gs(e)}function Ws(e){let t=()=>{Us(e)},n=zs++;e._inner=e._inner.fork({name:`angular`,properties:{[Ls]:!0,[Rs]:n,[Rs+n]:!0},onInvokeTask:(n,r,i,a,o,s)=>{if(Ys(s))return n.invokeTask(i,a,o,s);try{return Ks(e),n.invokeTask(i,a,o,s)}finally{(e.shouldCoalesceEventChangeDetection&&a.type===`eventTask`||e.shouldCoalesceRunChangeDetection)&&t(),qs(e)}},onInvoke:(n,r,i,a,o,s,c)=>{try{return Ks(e),n.invoke(i,a,o,s,c)}finally{e.shouldCoalesceRunChangeDetection&&!e.callbackScheduled&&!Xs(s)&&t(),qs(e)}},onHasTask:(t,n,r,i)=>{t.hasTask(r,i),n===r&&(i.change==`microTask`?(e._hasPendingMicrotasks=i.microTask,Gs(e),Hs(e)):i.change==`macroTask`&&(e.hasPendingMacrotasks=i.macroTask))},onHandleError:(t,n,r,i)=>(t.handleError(r,i),e.runOutsideAngular(()=>e.onError.emit(i)),!1)})}function Gs(e){e.hasPendingMicrotasks=!!(e._hasPendingMicrotasks||(e.shouldCoalesceEventChangeDetection||e.shouldCoalesceRunChangeDetection)&&e.callbackScheduled===!0)}function Ks(e){e._nesting++,e.isStable&&(e.isStable=!1,e.onUnstable.emit(null))}function qs(e){e._nesting--,Hs(e)}var Js=class{hasPendingMicrotasks=!1;hasPendingMacrotasks=!1;isStable=!0;onUnstable=new Ns;onMicrotaskEmpty=new Ns;onStable=new Ns;onError=new Ns;run(e,t,n){return e.apply(t,n)}runGuarded(e,t,n){return e.apply(t,n)}runOutsideAngular(e){return e()}runTask(e,t,n,r){return e.apply(t,n)}};function Ys(e){return Zs(e,`__ignore_ng_zone__`)}function Xs(e){return Zs(e,`__scheduler_tick__`)}function Zs(e,t){return!Array.isArray(e)||e.length!==1?!1:e[0]?.data?.[t]===!0}var Qs=class{_console=console;handleError(e){this._console.error(`ERROR`,e)}},$s=new Ni(``,{factory:()=>{let e=b(Bs),t=b(qa),n;return r=>{e.runOutsideAngular(()=>{t.destroyed&&!n?setTimeout(()=>{throw r}):(n??=t.get(Qs),n.handleError(r))})}}}),ec={provide:Da,useValue:()=>{b(Qs,{optional:!0})},multi:!0};function w(e,t){let[n,r,i]=mee(e,t?.equal),a=n;return a[an],a.set=r,a.update=i,a.asReadonly=tc.bind(a),a}function tc(){let e=this[an];if(e.readonlyFn===void 0){let t=()=>this();t[an]=e,e.readonlyFn=t}return e.readonlyFn}var nc=new Ni(``,{factory:()=>rc}),rc=`ng`,ic=new Ni(``),ac=new Ni(``,{providedIn:`platform`,factory:()=>`unknown`}),oc=new Ni(``,{factory:()=>b(Ds).body?.querySelector(`[ngCspNonce]`)?.getAttribute(`ngCspNonce`)||null}),sc=(()=>{class e{view;node;constructor(e,t){this.view=e,this.node=t}static __NG_ELEMENT_ID__=cc}return e})();function cc(){return new sc(qo(),Yo())}var lc=class{},uc=new Ni(``,{factory:()=>!0}),dc=new Ni(``),fc=(()=>{class e{static ɵprov=Di({token:e,providedIn:`root`,factory:()=>new pc})}return e})(),pc=class{dirtyEffectCount=0;queues=new Map;add(e){this.enqueue(e),this.schedule(e)}schedule(e){e.dirty&&this.dirtyEffectCount++}remove(e){let t=e.zone,n=this.queues.get(t);n.has(e)&&(n.delete(e),e.dirty&&this.dirtyEffectCount--)}enqueue(e){let t=e.zone;this.queues.has(t)||this.queues.set(t,new Set);let n=this.queues.get(t);n.has(e)||n.add(e)}flush(){for(;this.dirtyEffectCount>0;){let e=!1;for(let[t,n]of this.queues)e||=t===null?this.flushQueue(n):t.run(()=>this.flushQueue(n));e||(this.dirtyEffectCount=0)}}flushQueue(e){let t=!1;for(let n of e)n.dirty&&(this.dirtyEffectCount--,t=!0,n.run());return t}},mc=class{[an];constructor(e){this[an]=e}destroy(){this[an].destroy()}};function T(e,t){let n=t?.injector??b(Es),r=t?.manualCleanup===!0?null:n.get(Os),i,a=n.get(sc,null,{optional:!0}),o=n.get(lc);return a===null?i=yc(e,n.get(fc),o):(i=vc(a.view,o,e),r instanceof ks&&r._lView===a.view&&(r=null)),i.injector=n,r!==null&&(i.onDestroyFns=[r.onDestroy(()=>i.destroy())]),new mc(i)}var hc={...Ln,cleanupFns:void 0,zone:null,onDestroyFns:null,run(){let e=ns(!1);try{Rn(this)}finally{ns(e)}},cleanup(){if(!this.cleanupFns?.length)return;let e=on(null);try{for(;this.cleanupFns.length;)this.cleanupFns.pop()()}finally{this.cleanupFns=[],on(e)}}},gc={...hc,consumerMarkedDirty(){this.scheduler.schedule(this),this.notifier.notify(12)},destroy(){if(xn(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.scheduler.remove(this)}},_c={...hc,consumerMarkedDirty(){this.view[2]|=8192,Po(this.view),this.notifier.notify(13)},destroy(){if(xn(this),this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();this.cleanup(),this.view[23]?.delete(this)}};function vc(e,t,n){let r=Object.create(_c);return r.view=e,r.zone=typeof Zone<`u`?Zone.current:null,r.notifier=t,r.fn=bc(r,n),e[23]??=new Set,e[23].add(r),r.consumerMarkedDirty(r),r}function yc(e,t,n){let r=Object.create(gc);return r.fn=bc(r,e),r.scheduler=t,r.notifier=n,r.zone=typeof Zone<`u`?Zone.current:null,r.scheduler.add(r),r.notifier.notify(12),r}function bc(e,t){return()=>{t(t=>(e.cleanupFns??=[]).push(t))}}function xc(e){return typeof e==`function`&&e[an]!==void 0}function Sc(e){return xc(e)&&typeof e.set==`function`}var Cc=Symbol(`InputSignalNode#UNSET`),wc={...Fn,transformFn:void 0,applyValueToInputSignal(e,t){Nn(e,t)}};function Tc(e){return{toString:e}.toString()}var Ec=(function(e){return e[e.TemplateCreateStart=0]=`TemplateCreateStart`,e[e.TemplateCreateEnd=1]=`TemplateCreateEnd`,e[e.TemplateUpdateStart=2]=`TemplateUpdateStart`,e[e.TemplateUpdateEnd=3]=`TemplateUpdateEnd`,e[e.LifecycleHookStart=4]=`LifecycleHookStart`,e[e.LifecycleHookEnd=5]=`LifecycleHookEnd`,e[e.OutputStart=6]=`OutputStart`,e[e.OutputEnd=7]=`OutputEnd`,e[e.BootstrapApplicationStart=8]=`BootstrapApplicationStart`,e[e.BootstrapApplicationEnd=9]=`BootstrapApplicationEnd`,e[e.BootstrapComponentStart=10]=`BootstrapComponentStart`,e[e.BootstrapComponentEnd=11]=`BootstrapComponentEnd`,e[e.ChangeDetectionStart=12]=`ChangeDetectionStart`,e[e.ChangeDetectionEnd=13]=`ChangeDetectionEnd`,e[e.ChangeDetectionSyncStart=14]=`ChangeDetectionSyncStart`,e[e.ChangeDetectionSyncEnd=15]=`ChangeDetectionSyncEnd`,e[e.AfterRenderHooksStart=16]=`AfterRenderHooksStart`,e[e.AfterRenderHooksEnd=17]=`AfterRenderHooksEnd`,e[e.ComponentStart=18]=`ComponentStart`,e[e.ComponentEnd=19]=`ComponentEnd`,e[e.DeferBlockStateStart=20]=`DeferBlockStateStart`,e[e.DeferBlockStateEnd=21]=`DeferBlockStateEnd`,e[e.DynamicComponentStart=22]=`DynamicComponentStart`,e[e.DynamicComponentEnd=23]=`DynamicComponentEnd`,e[e.HostBindingsUpdateStart=24]=`HostBindingsUpdateStart`,e[e.HostBindingsUpdateEnd=25]=`HostBindingsUpdateEnd`,e})(Ec||{}),Dc=class{previousValue;currentValue;firstChange;constructor(e,t,n){this.previousValue=e,this.currentValue=t,this.firstChange=n}isFirstChange(){return this.firstChange}};function Oc(e,t,n,r){t===null?e[n]=r:t.applyValueToInputSignal(t,r)}var kc=null,Ac=(()=>{kc=Mc;let e=()=>Mc;return e.ngInherit=!0,e})();function jc(){return kc}function Mc(e){return e.type.prototype.ngOnChanges&&(e.setInput=Pc),Nc}function Nc(){let e=Ic(this),t=e?.current;if(t){let n=e.previous;if(n===Ta)e.previous=t;else for(let e in t)n[e]=t[e];e.current=null,this.ngOnChanges(t)}}function Pc(e,t,n,r,i){let a=this.declaredInputs[r],o=Ic(e)||Lc(e,{previous:Ta,current:null}),s=o.current||={},c=o.previous,l=c[a];s[a]=new Dc(l&&l.currentValue,n,c===Ta),Oc(e,t,i,n)}var Fc=`__ngSimpleChanges__`;function Ic(e){return Object.hasOwn(e,Fc)&&e[Fc]||null}function Lc(e,t){return e[Fc]=t}var Rc=[],zc=function(e,t=null,n){for(let r=0;r<Rc.length;r++){let i=Rc[r];i(e,t,n)}};function Bc(e,t,n){let{ngOnChanges:r,ngOnInit:i,ngDoCheck:a}=t.type.prototype;if(r){let r=jc()(t);(n.preOrderHooks??=[]).push(e,r),(n.preOrderCheckHooks??=[]).push(e,r)}i&&(n.preOrderHooks??=[]).push(0-e,i),a&&((n.preOrderHooks??=[]).push(e,a),(n.preOrderCheckHooks??=[]).push(e,a))}function Vc(e,t){for(let n=t.directiveStart,r=t.directiveEnd;n<r;n++){let{ngAfterContentInit:t,ngAfterContentChecked:r,ngAfterViewInit:i,ngAfterViewChecked:a,ngOnDestroy:o}=e.data[n].type.prototype;t&&(e.contentHooks??=[]).push(-n,t),r&&((e.contentHooks??=[]).push(n,r),(e.contentCheckHooks??=[]).push(n,r)),i&&(e.viewHooks??=[]).push(-n,i),a&&((e.viewHooks??=[]).push(n,a),(e.viewCheckHooks??=[]).push(n,a)),o!=null&&(e.destroyHooks??=[]).push(n,o)}}function Hc(e,t,n){Gc(e,t,3,n)}function Uc(e,t,n,r){(e[2]&3)===n&&Gc(e,t,n,r)}function Wc(e,t){let n=e[2];(n&3)===t&&(n&=16383,n+=1,e[2]=n)}function Gc(e,t,n,r){let i=r===void 0?0:e[17]&65535,a=r??-1,o=t.length-1,s=0;for(let c=i;c<o;c++)if(typeof t[c+1]==`number`){if(s=t[c],r!=null&&s>=r)break}else t[c]<0&&(e[17]+=65536),(s<a||a==-1)&&(qc(e,n,t,c),e[17]=(e[17]&4294901760)+c+2),c++}function Kc(e,t){zc(Ec.LifecycleHookStart,e,t);let n=on(null);try{t.call(e)}finally{on(n),zc(Ec.LifecycleHookEnd,e,t)}}function qc(e,t,n,r){let i=n[r]<0,a=n[r+1],o=e[i?-n[r]:n[r]];i?e[2]>>14<e[17]>>16&&(e[2]&3)===t&&(e[2]+=16384,Kc(o,a)):Kc(o,a)}var Jc=-1,Yc=class{factory;name;injectImpl;resolving=!1;canSeeViewProviders;multi;componentProviders;index;providerFactory;constructor(e,t,n,r){this.factory=e,this.name=r,this.canSeeViewProviders=t,this.injectImpl=n}};function Xc(e){return!!(e.flags&8)}function Zc(e){return!!(e.flags&16)}function Qc(e,t,n){let r=0;for(;r<n.length;){let i=n[r];if(typeof i==`number`){if(i!==0)break;r++;let a=n[r++],o=n[r++],s=n[r++];e.setAttribute(t,o,s,a)}else{let a=i,o=n[++r];el(a)?e.setProperty(t,a,o):e.setAttribute(t,a,o),r++}}return r}function $c(e){return e===3||e===4||e===6}function el(e){return e.charCodeAt(0)===64}function tl(e,t){if(t!==null&&t.length!==0){if(e===null||e.length===0)e=t.slice();else{let n=-1;for(let r=0;r<t.length;r++){let i=t[r];typeof i==`number`?n=i:n===0||(n===-1||n===2?nl(e,n,i,null,t[++r]):nl(e,n,i,null,null))}}}return e}function nl(e,t,n,r,i){let a=0,o=e.length;if(t===-1)o=-1;else for(;a<e.length;){let n=e[a++];if(typeof n==`number`){if(n===t){o=-1;break}if(n>t){o=a-1;break}}}for(;a<e.length;){let t=e[a];if(typeof t==`number`)break;if(t===n){i!==null&&(e[a+1]=i);return}a++,i!==null&&a++}o!==-1&&(e.splice(o,0,t),a=o+1),e.splice(a++,0,n),i!==null&&e.splice(a++,0,i)}function rl(e){return e!==Jc}function il(e){return e&32767}function al(e){return e>>16}function ol(e,t){let n=al(e),r=t;for(;n>0;)r=r[14],n--;return r}var sl=!0;function cl(e){let t=sl;return sl=e,t}var ll=255,ul=5,dl=0,fl={};function pl(e,t,n){let r;typeof n==`string`?r=n.charCodeAt(0)||0:Object.hasOwn(n,zi)&&(r=n[zi]),r??=n[zi]=dl++;let i=r&ll,a=1<<i;t.data[e+(i>>ul)]|=a}function ml(e,t){let n=gl(e,t);if(n!==-1)return n;let r=t[1];r.firstCreatePass&&(e.injectorIndex=t.length,hl(r.data,e),hl(t,null),hl(r.blueprint,null));let i=_l(e,t),a=e.injectorIndex;if(rl(i)){let e=il(i),n=ol(i,t),r=n[1].data;for(let i=0;i<8;i++)t[a+i]=n[e+i]|r[e+i]}return t[a+8]=i,a}function hl(e,t){e.push(0,0,0,0,0,0,0,0,t)}function gl(e,t){return e.injectorIndex===-1||e.parent&&e.parent.injectorIndex===e.injectorIndex||t[e.injectorIndex+8]===null?-1:e.injectorIndex}function _l(e,t){if(e.parent&&e.parent.injectorIndex!==-1)return e.parent.injectorIndex;let n=0,r=null,i=t;for(;i!==null;){if(r=Pl(i),r===null)return Jc;if(n++,i=i[14],r.injectorIndex!==-1)return r.injectorIndex|n<<16}return Jc}function vl(e,t,n){pl(e,t,n)}function yl(e,t,n){if(n&8||e!==void 0)return e;Xi(t,`NodeInjector`)}function bl(e,t,n,r){if(n&8&&r===void 0&&(r=null),!(n&3)){let i=e[9],a=ta(void 0);try{return i?i.get(t,r,n&8):na(t,r,n&8)}finally{ta(a)}}return yl(r,t,n)}function xl(e,t,n,r=0,i){if(e!==null){if(t[2]&2048&&!(r&2)){let i=Nl(e,t,n,r,fl);if(i!==fl)return i}let i=Sl(e,t,n,r,fl);if(i!==fl)return i}return bl(t,n,r,i)}function Sl(e,t,n,r,i){let a=El(n);if(typeof a==`function`){if(!ls(t,e,r))return r&1?yl(i,n,r):bl(t,n,r,i);try{let e;if(e=a(r),e==null&&!(r&8))Xi(n);else return e}finally{ms()}}else if(typeof a==`number`){let i=null,o=gl(e,t),s=Jc,c=r&1?t[15][5]:null;for((o===-1||r&4)&&(s=o===-1?_l(e,t):t[o+8],s===Jc||!Ol(r,!1)?o=-1:(i=t[1],o=il(s),t=ol(s,t)));o!==-1;){let e=t[1];if(Dl(a,o,e.data)){let e=Cl(o,t,n,i,r,c);if(e!==fl)return e}s=t[o+8],s!==Jc&&Ol(r,t[1].data[o+8]===c)&&Dl(a,o,t)?(i=e,o=il(s),t=ol(s,t)):o=-1}}return i}function Cl(e,t,n,r,i,a){let o=t[1],s=o.data[e+8],c=wl(s,o,n,r==null?fo(s)&&sl:r!=o&&!!(s.type&3),i&1&&a===s);return c===null?fl:Tl(t,o,c,s,i)}function wl(e,t,n,r,i){let a=e.providerIndexes,o=t.data,s=a&1048575,c=e.directiveStart,l=e.directiveEnd,u=a>>20,d=r?s:s+u,f=i?s+u:l;for(let e=d;e<f;e++){let t=o[e];if(e<c&&n===t||e>=c&&t.type===n)return e}if(i){let e=o[c];if(e&&mo(e)&&e.type===n)return c}return null}function Tl(e,t,n,r,i){let a=e[n],o=t.data;if(a instanceof Yc){let s=a;if(s.resolving)throw Yi(``);let c=cl(s.canSeeViewProviders);s.resolving=!0,o[n].type||o[n];let l=s.injectImpl?ta(s.injectImpl):null;ls(e,r,0);try{a=e[n]=s.factory(void 0,i,o,e,r),t.firstCreatePass&&n>=r.directiveStart&&Bc(n,o[n],t)}finally{l!==null&&ta(l),cl(c),s.resolving=!1,ms()}}return a}function El(e){if(typeof e==`string`)return e.charCodeAt(0)||0;let t=Object.hasOwn(e,zi)?e[zi]:void 0;return typeof t==`number`?t>=0?t&ll:Al:t}function Dl(e,t,n){let r=1<<e;return!!(n[t+(e>>ul)]&r)}function Ol(e,t){return!(e&2)&&!(e&1&&t)}var kl=class{_tNode;_lView;constructor(e,t){this._tNode=e,this._lView=t}get(e,t,n){return xl(this._tNode,this._lView,e,la(n),t)}};function Al(){return new kl(Yo(),qo())}function jl(e){return Tc(()=>{let t=e.prototype.constructor,n=t[Ri]||Ml(t),r=Object.prototype,i=Object.getPrototypeOf(e.prototype).constructor;for(;i&&i!==r;){let e=i[Ri]||Ml(i);if(e&&e!==n)return e;i=Object.getPrototypeOf(i)}return e=>new e})}function Ml(e){return Ei(e)?()=>{let t=Ml(Ti(e));return t&&t()}:pa(e)}function Nl(e,t,n,r,i){let a=e,o=t;for(;a!==null&&o!==null&&o[2]&2048&&!ho(o);){let e=Sl(a,o,n,r|2,fl);if(e!==fl)return e;r&=-5;let t=a.parent;if(!t){let e=o[20];if(e){let t=e.get(n,fl,r);if(t!==fl)return t}t=Pl(o),o=o[14]}a=t}return i}function Pl(e){let t=e[1],n=t.type;return n===2?t.declTNode:n===1?e[5]:null}function Fl(e){return{token:e.token,providedIn:e.autoProvided===!1?null:`root`,factory:e.factory,value:void 0}}function Il(){return Ll(Yo(),qo())}function Ll(e,t){return new Rl(xo(e,t))}var Rl=(()=>{class e{nativeElement;constructor(e){this.nativeElement=e}static __NG_ELEMENT_ID__=Il}return e})();function zl(e){return e instanceof Rl?e.nativeElement:e}function Bl(){return this._results[Symbol.iterator]()}var Vl=class{_emitDistinctChangesOnly;dirty=!0;_onDirty=void 0;_results=[];_changesDetected=!1;_changes=void 0;length=0;first=void 0;last=void 0;get changes(){return this._changes??=new Gr}constructor(e=!1){this._emitDistinctChangesOnly=e}get(e){return this._results[e]}map(e){return this._results.map(e)}filter(e){return this._results.filter(e)}find(e){return this._results.find(e)}reduce(e,t){return this._results.reduce(e,t)}forEach(e){this._results.forEach(e)}some(e){return this._results.some(e)}toArray(){return this._results.slice()}toString(){return this._results.toString()}reset(e,t){this.dirty=!1;let n=ha(e);(this._changesDetected=!ma(this._results,n,t))&&(this._results=n,this.length=n.length,this.last=n[this.length-1],this.first=n[0])}notifyOnChanges(){this._changes!==void 0&&(this._changesDetected||!this._emitDistinctChangesOnly)&&this._changes.next(this)}onDirty(e){this._onDirty=e}setDirty(){this.dirty=!0,this._onDirty?.()}destroy(){this._changes!==void 0&&(this._changes.complete(),this._changes.unsubscribe())}[Symbol.iterator]=Bl};function Hl(e){return(e.flags&128)==128}var Ul=(function(e){return e[e.OnPush=0]=`OnPush`,e[e.Eager=1]=`Eager`,e[e.Default=1]=`Default`,e})(Ul||{}),Wl=new Map,Gl=0;function Kl(){return Gl++}function ql(e){Wl.set(e[19],e)}function Jl(e){Wl.delete(e[19])}var Yl=`__ngContext__`;function Xl(e,t){co(t)?(e[Yl]=t[19],ql(t)):e[Yl]=t}function Zl(e){return $l(e[12])}function Ql(e){return $l(e[4])}function $l(e){for(;e!==null&&!lo(e);)e=e[4];return e}var eu=void 0;function tu(e){eu=e}function nu(){if(eu!==void 0)return eu;if(typeof document<`u`)return document;throw new yi(210,!1)}var ru=!1,iu=new Ni(``,{factory:()=>ru}),au=new WeakMap;function ou(e,t){if(typeof e!=`object`||!e)return;let n=au.get(e);n||(n=new WeakSet,au.set(e,n)),n.add(t)}function su(e){return(e.flags&32)==32}var cu=()=>null;function lu(e,t,n=!1){return cu(e,t,n)}function uu(e,t){let n=e.contentQueries;if(n!==null){let r=on(null);try{for(let r=0;r<n.length;r+=2){let i=n[r],a=n[r+1];if(a!==-1){let n=e.data[a];cs(i),n.contentQueries(2,t[a],a)}}}finally{on(r)}}}function du(e,t,n){cs(0);let r=on(null);try{t(e,n)}finally{on(r)}}function fu(e,t,n){if(uo(t)){let r=on(null);try{let r=t.directiveStart,i=t.directiveEnd;for(let t=r;t<i;t++){let r=e.data[t];if(r.contentQueries){let e=n[t];r.contentQueries(1,e,t)}}}finally{on(r)}}}var pu=(function(e){return e[e.Emulated=0]=`Emulated`,e[e.None=2]=`None`,e[e.ShadowDom=3]=`ShadowDom`,e[e.ExperimentalIsolatedShadowDom=4]=`ExperimentalIsolatedShadowDom`,e})(pu||{}),mu=class{changingThisBreaksApplicationSecurity;constructor(e){this.changingThisBreaksApplicationSecurity=e}toString(){return`SafeValue must use [property]=binding: ${this.changingThisBreaksApplicationSecurity} (see ${vi})`}};function hu(e){return e instanceof mu?e.changingThisBreaksApplicationSecurity:e}function gu(e,t){let n=_u(e);if(n!=null&&n!==t){if(n===`ResourceURL`&&t===`URL`)return!0;throw Error(`Required a safe ${t}, got a ${n} (see ${vi})`)}return n===t}function _u(e){return e instanceof mu&&e.getTypeName()||null}var vu=/^(?!javascript:)(?:[a-z0-9+.-]+:|[^&:\/?#]*(?:[\/?#]|$))/i;function yu(e){return e=String(e),e.match(vu)?e:`unsafe:`+e}var bu=/^>|^->|<!--|-->|--!>|<!-$/g,xu=/(<|>)/g,Su=`​$1​`;function Cu(e){return e.replace(bu,e=>e.replace(xu,Su))}function wu(e,t){return e.createText(t)}function Tu(e,t,n){e.setValue(t,n)}function Eu(e,t){return e.createComment(Cu(t))}function Du(e,t,n){return e.createElement(t,n)}function Ou(e,t,n,r,i){e.insertBefore(t,n,r,i)}function ku(e,t,n){e.appendChild(t,n)}function Au(e,t,n,r,i){r===null?ku(e,t,n):Ou(e,t,n,r,i)}function ju(e,t,n,r){e.removeChild(null,t,n,r)}function Mu(e,t,n){e.setAttribute(t,`style`,n)}function Nu(e,t,n){n===``?e.removeAttribute(t,`class`):e.setAttribute(t,`class`,n)}function Pu(e,t,n){let{mergedAttrs:r,classes:i,styles:a}=n;r!==null&&Qc(e,t,r),i!==null&&Nu(e,t,i),a!==null&&Mu(e,t,a)}function Fu(e){let t=Iu();return t?t.sanitize(_o.URL,e)||``:gu(e,`URL`)?hu(e):yu(Gi(e))}function Iu(){let e=qo();return e&&e[10].sanitizer}function Lu(e){return e.ownerDocument.defaultView}function Ru(e){return e.ownerDocument}function zu(e,t,n){let r=e.length;for(;;){let i=e.indexOf(t,n);if(i===-1)return i;if(i===0||e.charCodeAt(i-1)<=32){let n=t.length;if(i+n===r||e.charCodeAt(i+n)<=32)return i}n=i+1}}var Bu=`ng-template`;function Vu(e,t,n,r){let i=0;if(r){for(;i<t.length&&typeof t[i]==`string`;i+=2)if(t[i]===`class`&&zu(t[i+1].toLowerCase(),n,0)!==-1)return!0}else if(Hu(e))return!1;if(i=t.indexOf(1,i),i>-1){let e;for(;++i<t.length&&typeof(e=t[i])==`string`;)if(e.toLowerCase()===n)return!0}return!1}function Hu(e){return e.type===4&&e.value!==Bu}function Uu(e,t,n){return t===(e.type===4&&!n?Bu:e.value)}function Wu(e,t,n){let r=4,i=e.attrs,a=i===null?0:$ee(i),o=!1;for(let s=0;s<t.length;s++){let c=t[s];if(typeof c==`number`){if(!o&&!Gu(r)&&!Gu(c))return!1;if(o&&Gu(c))continue;o=!1,r=c|r&1;continue}if(!o){if(r&4){if(r=2|r&1,c!==``&&!Uu(e,c,n)||c===``&&t.length===1){if(Gu(r))return!1;o=!0}}else if(r&8){if(i===null||!Vu(e,i,c,n)){if(Gu(r))return!1;o=!0}}else{let l=t[++s],u=Ku(c,i,Hu(e),n);if(u===-1){if(Gu(r))return!1;o=!0;continue}if(l!==``){let e;if(e=u>a?``:i[u+1].toLowerCase(),r&2&&l!==e){if(Gu(r))return!1;o=!0}}}}}return Gu(r)||o}function Gu(e){return!(e&1)}function Ku(e,t,n,r){if(t===null)return-1;let i=0;if(r||!n){let n=!1;for(;i<t.length;){let r=t[i];if(r===e)return i;if(r===3||r===6)n=!0;else if(r===1||r===2){let e=t[++i];for(;typeof e==`string`;)e=t[++i];continue}else if(r===4)break;else if(r===0){i+=4;continue}i+=n?1:2}return-1}return ete(t,e)}function qu(e,t,n=!1){for(let r=0;r<t.length;r++)if(Wu(e,t[r],n))return!0;return!1}function Qee(e){let t=e.attrs;if(t!=null){let e=t.indexOf(5);if(!(e&1))return t[e+1]}return null}function $ee(e){for(let t=0;t<e.length;t++){let n=e[t];if($c(n))return t}return e.length}function ete(e,t){let n=e.indexOf(4);if(n>-1)for(n++;n<e.length;){let r=e[n];if(typeof r==`number`)return-1;if(r===t)return n;n++}return-1}function tte(e,t){selectorListLoop:for(let n=0;n<t.length;n++){let r=t[n];if(e.length===r.length){for(let t=0;t<e.length;t++)if(e[t]!==r[t])continue selectorListLoop;return!0}}return!1}function Ju(e,t){return e?`:not(`+t.trim()+`)`:t}function nte(e){let t=e[0],n=1,r=2,i=``,a=!1;for(;n<e.length;){let o=e[n];if(typeof o==`string`){if(r&2){let t=e[++n];i+=`[`+o+(t.length>0?`="`+t+`"`:``)+`]`}else r&8?i+=`.`+o:r&4&&(i+=` `+o)}else i!==``&&!Gu(o)&&(t+=Ju(a,i),i=``),r=o,a||=!Gu(r);n++}return i!==``&&(t+=Ju(a,i)),t}function rte(e){return e.map(nte).join(`,`)}function ite(e){let t=[],n=[],r=1,i=2;for(;r<e.length;){let a=e[r];if(typeof a==`string`)i===2?a!==``&&t.push(a,e[++r]):i===8&&n.push(a);else{if(!Gu(i))break;i=a}r++}return n.length&&t.push(1,...n),t}var Yu={},Xu=(function(e){return e[e.Important=1]=`Important`,e[e.DashCase=2]=`DashCase`,e})(Xu||{}),ate;function Zu(e,t){return ate(e,t)}var ote=new Ni(``,{factory:()=>!1});function Qu(e){if(!e)return 0;let t=e.toLowerCase().indexOf(`ms`)>-1?1:1e3;return parseFloat(e)*t}function $u(e,t){return e.getPropertyValue(t).split(`,`).map(e=>e.trim())}function ste(e){let t=$u(e,`transition-property`),n=$u(e,`transition-duration`),r=$u(e,`transition-delay`),i={propertyName:``,duration:0,animationName:void 0};for(let e=0;e<t.length;e++){let a=Qu(r[e])+Qu(n[e]);a>i.duration&&(i.propertyName=t[e],i.duration=a)}return i}function cte(e){let t=$u(e,`animation-name`),n=$u(e,`animation-delay`),r=$u(e,`animation-duration`),i=$u(e,`animation-iteration-count`),a={animationName:``,propertyName:void 0,duration:0};for(let e=0;e<t.length;e++){let o=Qu(n[e])+Qu(r[e]),s=i[e];o>a.duration&&s!==`infinite`&&(a.animationName=t[e],a.duration=o)}return a}function ed(e,t){return e!==void 0&&e.duration>t.duration}function td(e){return(e.animationName!=null||e.propertyName!=null)&&e.duration>0}function nd(e){let t=e.effect?.getTiming();if(t===void 0)return;let n=typeof t.duration==`number`?t.duration:0,r=(t.delay??0)+n,i=e.playbackRate;return i!==void 0&&i!==0&&i!==1&&(r/=Math.abs(i)),r}function lte(e,t){let n=getComputedStyle(e),r=cte(n),i=ste(n),a=r.duration>i.duration?r:i;ed(t.get(e),a)||td(a)&&t.set(e,a)}function ute(e,t,n){if(!n)return;let r=e.getAnimations();return r.length===0?lte(e,t):dte(e,t,r)}function dte(e,t,n){let r={animationName:void 0,propertyName:void 0,duration:0};for(let e of n){if(e.effect?.getTiming()?.iterations===1/0)continue;let t=nd(e)??0,n,i;e.animationName?i=e.animationName:n=e.transitionProperty,t>=r.duration&&(r={animationName:i,propertyName:n,duration:t})}ed(t.get(e),r)||td(r)&&t.set(e,r)}var rd=new Set,fte=!1,pte=1,id=typeof document<`u`&&typeof document?.documentElement?.getAnimations==`function`;function mte(e){return e[9].get(ote,fte)}function hte(e,t,n){let r=od.get(e);if(r){for(let e of t)r.classList.push(e);for(let e of n)r.cleanupFns.push(e)}else od.set(e,{classList:t,cleanupFns:n})}function ad(e){let t=od.get(e);if(t){for(let e of t.cleanupFns)e();od.delete(e)}sd.delete(e)}var od=new WeakMap,sd=new WeakMap,cd=new WeakMap;function ld(e){return e?e[14]??e:null}var ud=new WeakSet;function gte(e,t,n){let r=cd.get(e);if(!r||r.length===0)return;let i=t.parentNode,a=t.previousSibling,o=ld(n);for(let e=r.length-1;e>=0;e--){let{el:n,declarationView:s}=r[e],c=n.parentNode;n===t?(r.splice(e,1),ud.add(n),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}}))):(a&&n===a||c&&i&&c!==i&&(o===null||s===null||o===s))&&(r.splice(e,1),n.dispatchEvent(new CustomEvent(`animationend`,{detail:{cancel:!0}})),n.parentNode?.removeChild(n))}}function _te(e,t,n){let r=ld(n),i=cd.get(e);i?i.some(e=>e.el===t)||i.push({el:t,declarationView:r}):cd.set(e,[{el:t,declarationView:r}])}function dd(e){let t=e[26]??={};return t.enter??=new Map}function vte(e){let t=typeof e==`function`?e():e,n=Array.isArray(t)?t:null;return typeof t==`string`&&(n=t.trim().split(/\s+/).filter(e=>e)),n}function fd(e){return e.composedPath?e.composedPath()[0]:e.target}function pd(e,t){let n=sd.get(t);if(n===void 0)return!0;if(t!==fd(e))return!1;let r=e.animation;if(r){let e=nd(r);if(e!==void 0&&e+pte<n.duration)return!1}return n.animationName===void 0?n.propertyName===void 0?!1:n.propertyName===`all`||e.propertyName===n.propertyName:e.animationName===n.animationName}function yte(e,t,n){let r=e.get(t.index)??{animateFns:[]};r.animateFns.push(n),e.set(t.index,r)}var md=(function(e){return e[e.CHANGE_DETECTION=0]=`CHANGE_DETECTION`,e[e.AFTER_NEXT_RENDER=1]=`AFTER_NEXT_RENDER`,e})(md||{}),hd=new Ni(``),gd=new Set;function _d(e){gd.has(e)||(gd.add(e),performance?.mark?.(`mark_feature_usage`,{detail:{feature:e}}))}var vd=(()=>{class e{impl=null;execute(){this.impl?.execute()}static ɵprov=Di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),yd=[0,1,2,3],bd=(()=>{class e{ngZone=b(Bs);scheduler=b(lc);errorHandler=b(Qs,{optional:!0});sequences=new Set;deferredRegistrations=new Set;executing=!1;constructor(){b(hd,{optional:!0})}execute(){let e=this.sequences.size>0;e&&zc(Ec.AfterRenderHooksStart),this.executing=!0;for(let e of yd)for(let t of this.sequences)if(!t.erroredOrDestroyed&&t.hooks[e])try{t.pipelinedValue=this.ngZone.runOutsideAngular(()=>this.maybeTrace(()=>{let n=t.hooks[e];return n(t.pipelinedValue)},t.snapshot))}catch(e){t.erroredOrDestroyed=!0,this.errorHandler?.handleError(e)}this.executing=!1;for(let e of this.sequences)e.afterRun(),e.once&&(this.sequences.delete(e),e.destroy());for(let e of this.deferredRegistrations)this.sequences.add(e);this.deferredRegistrations.size>0&&this.scheduler.notify(7),this.deferredRegistrations.clear(),e&&zc(Ec.AfterRenderHooksEnd)}register(e){let{view:t}=e;t===void 0?this.executing?this.deferredRegistrations.add(e):this.addSequence(e):((t[25]??=[]).push(e),Po(t),t[2]|=8192)}addSequence(e){this.sequences.add(e),this.scheduler.notify(7)}unregister(e){this.executing&&this.sequences.has(e)?(e.erroredOrDestroyed=!0,e.pipelinedValue=void 0,e.once=!0):(this.sequences.delete(e),this.deferredRegistrations.delete(e))}maybeTrace(e,t){return t?t.run(md.AFTER_NEXT_RENDER,e):e()}static ɵprov=Di({token:e,providedIn:`root`,factory:()=>new e})}return e})(),xd=class{impl;hooks;view;once;snapshot;erroredOrDestroyed=!1;pipelinedValue=void 0;unregisterOnDestroy;constructor(e,t,n,r,i,a=null){this.impl=e,this.hooks=t,this.view=n,this.once=r,this.snapshot=a,this.unregisterOnDestroy=i?.onDestroy(()=>this.destroy())}afterRun(){this.erroredOrDestroyed=!1,this.pipelinedValue=void 0,this.snapshot?.dispose(),this.snapshot=null}destroy(){this.impl.unregister(this),this.unregisterOnDestroy?.();let e=this.view?.[25];e&&(this.view[25]=e.filter(e=>e!==this))}};function Sd(e,t){let n=t?.injector??b(Es);return _d(`NgAfterNextRender`),xte(e,n,t,!0)}function bte(e){return e instanceof Function?[void 0,void 0,e,void 0]:[e.earlyRead,e.write,e.mixedReadWrite,e.read]}function xte(e,t,n,r){let i=t.get(vd);i.impl??=t.get(bd);let a=t.get(hd,null,{optional:!0}),o=n?.manualCleanup===!0?null:t.get(Os),s=t.get(sc,null,{optional:!0}),c=new xd(i.impl,bte(e),s?.view,r,o,a?.snapshot(null));return i.impl.register(c),c}var Cd=new Ni(``,{factory:()=>{let e=b(qa),t=new Set;return e.onDestroy(()=>t.clear()),{queue:t,isScheduled:!1,scheduler:null,injector:e}}});function wd(e,t,n){let r=e.get(Cd);if(Array.isArray(t))for(let e of t)r.queue.add(e),n?.detachedLeaveAnimationFns?.push(e);else r.queue.add(t),n?.detachedLeaveAnimationFns?.push(t);r.scheduler&&r.scheduler(e)}function Ste(e,t){let n=e.get(Cd);if(Array.isArray(t))for(let e of t)n.queue.delete(e);else n.queue.delete(t)}function Cte(e,t){let n=e.get(Cd);if(t.detachedLeaveAnimationFns){for(let e of t.detachedLeaveAnimationFns)n.queue.delete(e);t.detachedLeaveAnimationFns=void 0}}function wte(e){let t=e.get(Cd);t.isScheduled||=(Sd(()=>{t.isScheduled=!1;for(let e of t.queue)e();t.queue.clear()},{injector:t.injector}),!0)}function Tte(e){let t=e.get(Cd);t.scheduler=wte,t.scheduler(e)}function Td(e,t){for(let[n,r]of t)wd(e,r.animateFns)}function Ed(e,t,n,r){let i=e?.[26]?.enter;t!==null&&i&&i.has(n.index)&&Td(r,i)}function Dd(e,t,n,r){try{n.get(Oa)}catch{return r(!1)}let i=e?.[26];i?.enter?.has(t.index)&&Ste(n,i.enter.get(t.index).animateFns);let a=Ete(e,t,i);if(a.size===0){let n=!1;if(e){let r=[];Od(e,t,r),n=r.length>0}if(!n)return r(!1)}e&&rd.add(e[19]),wd(n,()=>Dte(e,t,i||void 0,a,r),i||void 0)}function Ete(e,t,n){let r=new Map,i=n?.leave;if(i&&i.has(t.index)&&r.set(t.index,i.get(t.index)),e&&i)for(let[n,a]of i){if(r.has(n))continue;let i=e[1].data[n].parent;for(;i;){if(i===t){r.set(n,a);break}i=i.parent}}return r}function Dte(e,t,n,r,i){let a=[];if(n&&n.leave)for(let[e]of r){if(!n.leave.has(e))continue;let t=n.leave.get(e);for(let e of t.animateFns){let{promise:t}=e();a.push(t)}n.detachedLeaveAnimationFns=void 0}if(e&&Od(e,t,a),a.length>0){let t=n||e?.[26];if(t){let n=t.running;n&&a.push(n),t.running=Promise.allSettled(a),kte(e,t.running,i)}else Promise.allSettled(a).then(()=>{e&&rd.delete(e[19]),i(!0)})}else e&&rd.delete(e[19]),i(!1)}function Od(e,t,n){if(t.type&12){let r=e[t.index];if(lo(r))for(let e=10;e<r.length;e++){let t=r[e];t[1].type===2&&Ote(t,n)}}let r=t.child;for(;r;)Od(e,r,n),r=r.next}function Ote(e,t){let n=e[26];if(n&&n.leave)for(let e of n.leave.values())for(let n of e.animateFns){let{promise:e}=n();t.push(e)}let r=e[1].firstChild;for(;r;)Od(e,r,t),r=r.next}function kte(e,t,n){t.then(()=>{e[26]?.running===t&&(e[26].running=void 0,rd.delete(e[19])),n(!0)})}function kd(e,t,n,r,i,a,o,s){if(i!=null){let c,l=!1;lo(i)?c=i:co(i)&&(l=!0,i=i[0]);let u=yo(i);e===0&&r!==null?(Ed(s,r,a,n),o==null?ku(t,r,u):Ou(t,r,u,o||null,!0)):e===1&&r!==null?(Ed(s,r,a,n),Ou(t,r,u,o||null,!0),gte(a,u,s)):e===2?(s?.[26]?.leave?.has(a.index)&&_te(a,u,s),ud.delete(u),Dd(s,a,n,e=>{if(ud.has(u)){ud.delete(u);return}ju(t,u,l,e)})):e===3&&(ud.delete(u),Dd(s,a,n,()=>{t.destroyNode(u)})),c!=null&&Bte(t,e,n,c,a,r,o)}}function Ate(e,t){Ad(e,t),t[0]=null,t[5]=null}function jte(e,t,n,r,i,a){r[0]=i,r[5]=t,Vd(e,r,n,1,i,a)}function Ad(e,t){t[10].changeDetectionScheduler?.notify(9),Vd(e,t,t[11],2,null,null)}function Mte(e){let t=e[12];if(!t)return Nd(e[1],e);for(;t;){let n=null;if(co(t))n=t[12];else{let e=t[10];e&&(n=e)}if(!n){for(;t&&!t[4]&&t!==e;)co(t)&&Nd(t[1],t),t=t[3];t===null&&(t=e),co(t)&&Nd(t[1],t),n=t&&t[4]}t=n}}function jd(e,t){let n=e[9],r=n.indexOf(t);n.splice(r,1)}function Md(e,t){if(go(t))return;let n=t[11];n.destroyNode&&Vd(e,t,n,3,null,null),Mte(t)}function Nd(e,t){if(go(t))return;let n=on(null);try{t[2]&=-129,t[2]|=256,t[24]&&xn(t[24]),Pte(e,t),Nte(e,t),t[1].type===1&&t[11].destroy();let n=t[16];if(n!==null&&lo(t[3])){n!==t[3]&&jd(n,t);let r=t[18];r!==null&&r.detachView(e)}Jl(t)}finally{on(n)}}function Nte(e,t){let n=e.cleanup,r=t[7];if(n!==null)for(let e=0;e<n.length-1;e+=2)if(typeof n[e]==`string`){let t=n[e+3];t>=0?r[t]():r[-t].unsubscribe(),e+=2}else{let t=r[n[e+1]];n[e].call(t)}r!==null&&(t[7]=null);let i=t[21];if(i!==null){t[21]=null;for(let e=0;e<i.length;e++){let t=i[e];t()}}let a=t[23];if(a!==null){t[23]=null;for(let e of a)e.destroy()}}function Pte(e,t){let n;if(e!=null&&(n=e.destroyHooks)!=null)for(let e=0;e<n.length;e+=2){let r=t[n[e]];if(!(r instanceof Yc)){let t=n[e+1];if(Array.isArray(t))for(let e=0;e<t.length;e+=2){let n=r[t[e]],i=t[e+1];zc(Ec.LifecycleHookStart,n,i);try{i.call(n)}finally{zc(Ec.LifecycleHookEnd,n,i)}}else{zc(Ec.LifecycleHookStart,r,t);try{t.call(r)}finally{zc(Ec.LifecycleHookEnd,r,t)}}}}}function Pd(e,t,n){if(t===null)throw new yi(510,!1);return Fte(e,t.parent,n)}function Fte(e,t,n){let r=t;for(;r!==null&&r.type&168;)t=r,r=t.parent;if(r===null)return n[0];if(fo(r)){let{encapsulation:t}=e.data[r.directiveStart+r.componentOffset];if(t===pu.None||t===pu.Emulated)return null}return xo(r,n)}function Fd(e,t,n){return Lte(e,t,n)}function Ite(e,t,n){return e.type&40?xo(e,n):null}var Lte=Ite;function Id(e,t,n,r){let i=Pd(e,r,t),a=t[11],o=Fd(r.parent||t[5],r,t);if(i!=null){if(Array.isArray(n))for(let e=0;e<n.length;e++)Au(a,i,n[e],o,!1);else Au(a,i,n,o,!1)}}function Ld(e,t){if(t!==null){let n=t.type;if(n&3)return xo(t,e);if(n&4)return zd(-1,e[t.index]);if(n&8){let n=t.child;if(n!==null)return Ld(e,n);{let n=e[t.index];return lo(n)?zd(-1,n):yo(n)}}if(n&128)return Ld(e,t.next);if(n&32)return Zu(t,e)()||yo(e[t.index]);{let n=Rd(e,t);return n===null?Ld(e,t.next):Array.isArray(n)?n[0]:Ld(Lo(e[15]),n)}}return null}function Rd(e,t){if(t!==null){let n=e[15][5],r=t.projection;return n.projection[r]}return null}function zd(e,t){let n=10+e+1;if(n<t.length){let e=t[n],r=e[1].firstChild;if(r!==null)return Ld(e,r)}return t[7]}function Bd(e,t,n,r,i,a,o){for(;n!=null;){let s=r[9];if(n.type===128){n=n.next;continue}let c=r[n.index],l=n.type;if(o&&t===0&&(c&&Xl(yo(c),r),n.flags|=2),!su(n)){if(l&8)Bd(e,t,n.child,r,i,a,!1),kd(t,e,s,i,c,n,a,r);else if(l&32){let o=Zu(n,r),l;for(;l=o();)kd(t,e,s,i,l,n,a,r);kd(t,e,s,i,c,n,a,r)}else l&16?Hd(e,t,r,n,i,a):kd(t,e,s,i,c,n,a,r)}n=o?n.projectionNext:n.next}}function Vd(e,t,n,r,i,a){e.type===3?Rte(n,r,t,i,a):Bd(n,r,e.firstChild,t,i,a,!1)}function Rte(e,t,n,r,i){let a=n[1].firstChild,o=a.next,s=yo(n[a.index]),c=yo(n[o.index]),l=o.index+1,u=n[l];if(t===1||t===0)r!==null&&(u&&u.hasChildNodes()?Ou(e,r,u,i,!0):(Ou(e,r,s,i,!0),Ou(e,r,c,i,!0)));else if(t===2){if(u||(u=document.createDocumentFragment(),n[l]=u),s&&s.parentNode===u)return;let e=s;for(;e!==null;){let t=e.nextSibling;if(u.appendChild(e),e===c)break;e=t}}}function zte(e,t,n){let r=t[11];Hd(r,0,t,n,Pd(e,n,t),Fd(n.parent||t[5],n,t))}function Hd(e,t,n,r,i,a){let o=n[15],s=o[5].projection[r.projection];if(Array.isArray(s))for(let o=0;o<s.length;o++){let c=s[o];kd(t,e,n[9],i,c,r,a,n)}else{let n=s,c=o[3];Hl(r)&&(n.flags|=128),Bd(e,t,n,c,i,a,!0)}}function Bte(e,t,n,r,i,a,o){let s=r[7];if(s!==yo(r)&&kd(t,e,n,a,s,i,o),!(r[2]&4))for(let n=10;n<r.length;n++){let i=r[n];Vd(i[1],i,e,t,a,s)}}function Vte(e,t,n,r,i){if(t)i?e.addClass(n,r):e.removeClass(n,r);else{let t=r.indexOf(`-`)===-1?void 0:Xu.DashCase;i==null?e.removeStyle(n,r,t):(typeof i==`string`&&i.endsWith(`!important`)&&(i=i.slice(0,-10),t|=Xu.Important),e.setStyle(n,r,i,t))}}function Ud(e,t,n,r,i,a,o,s,c,l,u){let d=27+r,f=d+i,p=Hte(d,f),m=typeof l==`function`?l():l;return p[1]={type:e,blueprint:p,template:n,queries:null,viewQuery:s,declTNode:t,data:p.slice().fill(null,d),bindingStartIndex:d,expandoStartIndex:f,hostBindingOpCodes:null,firstCreatePass:!0,firstUpdatePass:!0,staticViewQueries:!1,staticContentQueries:!1,preOrderHooks:null,preOrderCheckHooks:null,contentHooks:null,contentCheckHooks:null,viewHooks:null,viewCheckHooks:null,destroyHooks:null,cleanup:null,contentQueries:null,components:null,directiveRegistry:typeof a==`function`?a():a,pipeRegistry:typeof o==`function`?o():o,firstChild:null,schemas:c,consts:m,incompleteFirstPass:!1,ssrId:u}}function Hte(e,t){let n=[];for(let r=0;r<t;r++)n.push(r<e?null:Yu);return n}function Ute(e){let t=e.tView;return t===null||t.incompleteFirstPass?e.tView=Ud(1,null,e.template,e.decls,e.vars,e.directiveDefs,e.pipeDefs,e.viewQuery,e.schemas,e.consts,e.id):t}function Wd(e,t,n,r,i,a,o,s,c,l,u){let d=t.blueprint.slice();return d[0]=i,d[2]=r|1228,(l!==null||e&&e[2]&2048)&&(d[2]|=2048),ko(d),d[3]=d[14]=e,d[8]=n,d[10]=o||e&&e[10],d[11]=s||e&&e[11],d[9]=c||e&&e[9]||null,d[5]=a,d[19]=Kl(),d[6]=u,d[20]=l,d[15]=t.type==2?e[15]:d,d}function Gd(e,t,n){let r=xo(t,e),i=Ute(n),a=e[10].rendererFactory,o=Jd(e,Wd(e,i,null,Kd(n),r,t,null,a.createRenderer(r,n),null,null,null));return e[t.index]=o}function Kd(e){let t=16;return e.signals?t=4096:e.onPush&&(t=64),t}function qd(e,t,n,r){if(n===0)return-1;let i=t.length;for(let i=0;i<n;i++)t.push(r),e.blueprint.push(r),e.data.push(null);return i}function Jd(e,t){return e[12]?e[13][4]=t:e[12]=t,e[13]=t,t}function E(e=1){Yd(Jo(),qo(),gs()+e,!1)}function Yd(e,t,n,r){if(!r){if((t[2]&3)==3){let r=e.preOrderCheckHooks;r!==null&&Hc(t,r,n)}else{let r=e.preOrderHooks;r!==null&&Uc(t,r,0,n)}}_s(n)}var Xd=(function(e){return e[e.None=0]=`None`,e[e.SignalBased=1]=`SignalBased`,e[e.HasDecoratorInputTransform=2]=`HasDecoratorInputTransform`,e})(Xd||{});function Zd(e,t,n,r){let i=on(null);try{let[i,a,o]=e.inputs[n],s=null;(a&Xd.SignalBased)!==0&&(s=t[i][an]),s!==null&&s.transformFn!==void 0?r=s.transformFn(r):o!==null&&(r=o.call(t,r)),e.setInput===null?Oc(t,s,i,r):e.setInput(t,s,r,n,i)}finally{on(i)}}function Qd(e,t,n,r,i){let a=gs(),o=r&2;try{_s(-1),o&&t.length>27&&Yd(e,t,27,!1),zc(o?Ec.TemplateUpdateStart:Ec.TemplateCreateStart,i,n),n(r,i)}finally{_s(a),zc(o?Ec.TemplateUpdateEnd:Ec.TemplateCreateEnd,i,n)}}function $d(e,t,n){sf(e,t,n),(n.flags&64)==64&&cf(e,t,n)}function ef(e,t,n=xo){let r=t.localNames;if(r!==null){let i=t.index+1;for(let a=0;a<r.length;a+=2){let o=r[a+1],s=o===-1?n(t,e):e[o];e[i++]=s}}}function tf(e,t,n,r){let i=r.get(iu,ru)||n===pu.ShadowDom||n===pu.ExperimentalIsolatedShadowDom;return e.selectRootElement(t,i)}function nf(e){return e===`class`?`className`:e===`for`?`htmlFor`:e===`formaction`?`formAction`:e===`innerHtml`?`innerHTML`:e===`readonly`?`readOnly`:e===`tabindex`?`tabIndex`:e}function rf(e,t,n,r,i,a){let o=t[1];if(_f(e,o,t,n,r)){fo(e)&&of(t,e.index);return}e.type&3&&(n=nf(n)),af(e,t,n,r,i,a)}function af(e,t,n,r,i,a){if(e.type&3){let o=xo(e,t);r=a==null?r:a(r,e.value||``,n),i.setProperty(o,n,r)}else e.type&12}function of(e,t){let n=To(t,e);n[2]&16||(n[2]|=64)}function sf(e,t,n){let r=n.directiveStart,i=n.directiveEnd;fo(n)&&Gd(t,n,e.data[r+n.componentOffset]),e.firstCreatePass||ml(n,t);let a=n.initialInputs;for(let o=r;o<i;o++){let i=e.data[o],s=Tl(t,e,o,n);if(Xl(s,t),a!==null&&pf(t,o-r,s,i,n,a),mo(i)){let r=To(n.index,t);r[8]=Tl(t,e,o,n)}}}function cf(e,t,n){let r=n.directiveStart,i=n.directiveEnd,a=n.index,o=Kee();try{_s(a);for(let n=r;n<i;n++){let r=e.data[n],i=t[n];ss(n),(r.hostBindings!==null||r.hostVars!==0||r.hostAttrs!==null)&&lf(r,i)}}finally{_s(-1),ss(o)}}function lf(e,t){e.hostBindings!==null&&e.hostBindings(1,t)}function uf(e,t){let n=e.directiveRegistry,r=null;if(n)for(let e=0;e<n.length;e++){let i=n[e];qu(t,i.selectors,!1)&&(r??=[],mo(i)?r.unshift(i):r.push(i))}return r}function df(e,t,n,r,i,a){let o=xo(e,t);ff(t[11],o,a,e.value,n,r,i)}function ff(e,t,n,r,i,a,o){if(a==null)o?.(a,r||``,i),e.removeAttribute(t,i,n);else{let s=o==null?Gi(a):o(a,r||``,i);e.setAttribute(t,i,s,n)}}function pf(e,t,n,r,i,a){let o=a[t];if(o!==null)for(let e=0;e<o.length;e+=2){let t=o[e],i=o[e+1];Zd(r,n,t,i)}}function mf(e,t,n,r,i){let a=27+n,o=t[1],s=i(o,t,e,r,n);t[a]=s,Zo(e,!0);let c=e.type===2;return c?(Pu(t[11],s,e),(Bee()===0||po(e))&&Xl(s,t),Vee()):Xl(s,t),Ss()&&(!c||!su(e))&&Id(o,t,s,e),e}function hf(e){let t=e;return Qo()?$o():(t=t.parent,Zo(t,!1)),t}function gf(e,t){let n=e[9];if(!n)return;let r;try{r=n.get($s,null)}catch{r=null}r?.(t)}function _f(e,t,n,r,i){let a=e.inputs?.[r],o=e.hostDirectiveInputs?.[r],s=!1;if(o)for(let e=0;e<o.length;e+=2){let r=o[e],a=o[e+1],c=t.data[r];Zd(c,n[r],a,i),s=!0}if(a)for(let e of a){let a=n[e],o=t.data[e];Zd(o,a,r,i),s=!0}return s}function vf(e,t,n,r,i,a){let o=null,s=null,c=null,l=!1,u=e.directiveToIndex.get(r.type);if(typeof u==`number`?o=u:[o,s,c]=u,s!==null&&c!==null&&e.hostDirectiveInputs&&Object.hasOwn(e.hostDirectiveInputs,i)){let r=e.hostDirectiveInputs[i];for(let e=0;e<r.length;e+=2){let i=r[e];if(i>=s&&i<=c){let o=t.data[i],s=r[e+1];Zd(o,n[i],s,a),l=!0}else if(i>c)break}}return o!==null&&Object.hasOwn(r.inputs,i)&&(Zd(r,n[o],i,a),l=!0),l}function yf(e,t){let n=To(t,e),r=n[1];bf(r,n);let i=n[0];i!==null&&n[6]===null&&(n[6]=lu(i,n[9])),zc(Ec.ComponentStart);try{xf(r,n,n[8])}finally{zc(Ec.ComponentEnd,n[8])}}function bf(e,t){for(let n=t.length;n<e.blueprint.length;n++)t.push(e.blueprint[n])}function xf(e,t,n){us(t);try{let r=e.viewQuery;r!==null&&du(1,r,n);let i=e.template;i!==null&&Qd(e,t,i,1,n),e.firstCreatePass&&=!1,t[18]?.finishViewCreation(e),e.staticContentQueries&&uu(e,t),e.staticViewQueries&&du(2,e.viewQuery,n);let a=e.components;a!==null&&Sf(t,a)}catch(t){throw e.firstCreatePass&&=(e.incompleteFirstPass=!0,!1),t}finally{t[2]&=-5,hs()}}function Sf(e,t){for(let n=0;n<t.length;n++)yf(e,t[n])}function Cf(e,t,n,r){let i=on(null);try{let i=t.tView,a=Wd(e,i,n,e[2]&4096?4096:16,null,t,null,null,r?.injector??null,r?.embeddedViewInjector??null,r?.dehydratedView??null);a[16]=e[t.index];let o=e[18];return o!==null&&(a[18]=o.createEmbeddedView(i)),xf(i,a,n),a}finally{on(i)}}function wf(e,t){return!t||t.firstChild===null||Hl(e)}function Tf(e,t,n,r,i=!1){if(e.type===3){let n=e.firstChild,i=n.next,a=yo(t[n.index]),o=yo(t[i.index]),s=a;for(;s!==null&&(r.push(s),s!==o);)s=s.nextSibling;return r}for(;n!==null;){if(n.type===128){n=i?n.projectionNext:n.next;continue}let a=t[n.index];if(a!==null){if(lo(a)){let e=a[7];e!==a[0]&&r.push(yo(a)),a[2]&4||Ef(a,r),r.push(e)}else r.push(yo(a))}let o=n.type;if(o&8)Tf(e,t,n.child,r);else if(o&32){let e=Zu(n,t),i;for(;i=e();)r.push(i)}else if(o&16){let e=Rd(t,n);if(Array.isArray(e))r.push(...e);else{let n=Lo(t[15]);Tf(n[1],n,e,r,!0)}}n=i?n.projectionNext:n.next}return r}function Ef(e,t){for(let n=10;n<e.length;n++){let r=e[n],i=r[1].firstChild;i!==null&&Tf(r[1],r,i,t)}}function Df(e){if(e[25]!==null){for(let t of e[25])t.impl.addSequence(t);e[25].length=0}}var Of=[];function kf(e){return e[24]??Af(e)}function Af(e){let t=Of.pop()??Object.create(Mf);return t.lView=e,t}function jf(e){e.lView[24]!==e&&(e.lView=null,Of.push(e))}var Mf={...cn,consumerIsAlwaysLive:!0,kind:`template`,consumerMarkedDirty:e=>{Po(e.lView)},consumerOnSignalRead(){this.lView[24]=this}};function Nf(e){let t=e[24]??Object.create(Pf);return t.lView=e,t}var Pf={...cn,consumerIsAlwaysLive:!0,kind:`template`,consumerMarkedDirty:e=>{let t=Lo(e.lView);for(;t&&!Ff(t[1]);)t=Lo(t);t&&Ao(t)},consumerOnSignalRead(){this.lView[24]=this}};function Ff(e){return e.type!==2}function If(e){if(e[23]===null)return;let t=!0;for(;t;){let n=!1;for(let t of e[23])if(t.dirty&&(n=!0,t.zone===null||Zone.current===t.zone?t.run():t.zone.run(()=>t.run()),e[23]===null))return;t=n&&!!(e[2]&8192)}}var Lf=100;function Rf(e,t=0){let n=e[10].rendererFactory;n.begin?.();try{zf(e,t)}finally{n.end?.()}}function zf(e,t){let n=ts();try{ns(!0),Gf(e,t);let n=0;for(;Mo(e);){if(n===Lf)throw new yi(103,!1);n++,Gf(e,1)}}finally{ns(n)}}function Bf(e,t,n,r){if(go(t))return;let i=t[2];us(t);let a=!0,o=null,s=null;Ff(e)?(s=kf(t),o=gn(s)):sn()===null?(a=!1,s=Nf(t),o=gn(s)):t[24]&&=(xn(t[24]),null);try{ko(t),Uee(e.bindingStartIndex),n!==null&&Qd(e,t,n,2,r);let a=(i&3)==3;if(a){let n=e.preOrderCheckHooks;n!==null&&Hc(t,n,null)}else{let n=e.preOrderHooks;n!==null&&Uc(t,n,0,null),Wc(t,0)}if(Hf(t),If(t),Vf(t,0),e.contentQueries!==null&&uu(e,t),a){let n=e.contentCheckHooks;n!==null&&Hc(t,n)}else{let n=e.contentHooks;n!==null&&Uc(t,n,1),Wc(t,1)}qf(e,t);let o=e.components;o!==null&&Kf(t,o,0);let s=e.viewQuery;if(s!==null&&du(2,s,r),a){let n=e.viewCheckHooks;n!==null&&Hc(t,n)}else{let n=e.viewHooks;n!==null&&Uc(t,n,2),Wc(t,2)}if(e.firstUpdatePass===!0&&(e.firstUpdatePass=!1),t[22]){for(let e of t[22])e();t[22]=null}Df(t),t[2]&=-73}catch(e){throw Po(t),e}finally{s!==null&&(vn(s,o),a&&jf(s)),hs()}}function Vf(e,t){for(let n=Zl(e);n!==null;n=Ql(n))for(let e=10;e<n.length;e++){let r=n[e];Wf(r,t)}}function Hf(e){for(let t=Zl(e);t!==null;t=Ql(t)){if(!(t[2]&2))continue;let e=t[9];for(let t=0;t<e.length;t++){let n=e[t];Ao(n)}}}function Uf(e,t,n){zc(Ec.ComponentStart);let r=To(t,e);try{Wf(r,n)}finally{zc(Ec.ComponentEnd,r[8])}}function Wf(e,t){Eo(e)&&Gf(e,t)}function Gf(e,t){let n=e[1],r=e[2],i=e[24],a=!!(t===0&&r&16);if(a||=!!(r&64&&t===0),a||=!!(r&1024),a||=!!(i?.dirty&&bn(i)),a||=!1,i&&(i.dirty=!1),e[2]&=-9217,a)Bf(n,e,n.template,e[8]);else if(r&8192){let t=on(null);try{If(e),Vf(e,1);let t=n.components;t!==null&&Kf(e,t,1),Df(e)}finally{on(t)}}}function Kf(e,t,n){for(let r=0;r<t.length;r++)Uf(e,t[r],n)}function qf(e,t){let n=e.hostBindingOpCodes;if(n!==null)try{for(let e=0;e<n.length;e++){let r=n[e];if(r<0)_s(~r);else{let i=r,a=n[++e],o=n[++e];Gee(a,i);let s=t[i];zc(Ec.HostBindingsUpdateStart,s);try{o(2,s)}finally{zc(Ec.HostBindingsUpdateEnd,s)}}}}finally{_s(-1)}}function Jf(e,t){let n=ts()?64:1088;for(e[10].changeDetectionScheduler?.notify(t);e;){e[2]|=n;let t=Lo(e);if(ho(e)&&!t)return e;e=t}return null}function Yf(e,t,n,r){return[e,!0,0,t,null,r,null,n,null,null]}function Xf(e,t){let n=10+t;if(n<e.length)return e[n]}function Zf(e,t,n,r=!0){let i=t[1];if(ep(i,t,e,n),r){let r=zd(n,e),a=t[11],o=a.parentNode(e[7]);o!==null&&jte(i,e[5],a,t,o,r)}let a=t[6];a!==null&&a.firstChild!==null&&(a.firstChild=null)}function Qf(e,t){let n=$f(e,t);return n!==void 0&&Md(n[1],n),n}function $f(e,t){if(e.length<=10)return;let n=10+t,r=e[n];if(r){let i=r[16];i!==null&&i!==e&&jd(i,r),t>0&&(e[n-1][4]=r[4]);let a=va(e,10+t);Ate(r[1],r);let o=a[18];o!==null&&o.detachView(a[1]),r[3]=null,r[4]=null,r[2]&=-129}return r}function ep(e,t,n,r){let i=10+r,a=n.length;r>0&&(n[i-1][4]=t),r<a-10?(t[4]=n[i],_a(n,10+r,t)):(n.push(t),t[4]=null),t[3]=n;let o=t[16];o!==null&&n!==o&&tp(o,t);let s=t[18];s!==null&&s.insertView(e),No(t),t[2]|=128}function tp(e,t){let n=e[9],r=t[3];if(co(r))e[2]|=2;else{let n=r[3][15];t[15]!==n&&(e[2]|=2)}n===null?e[9]=[t]:n.push(t)}var np=class{_lView;_cdRefInjectingView;_appRef=null;_attachedToViewContainer=!1;exhaustive;get rootNodes(){let e=this._lView,t=e[1];return Tf(t,e,t.firstChild,[])}constructor(e,t){this._lView=e,this._cdRefInjectingView=t}get context(){return this._lView[8]}set context(e){this._lView[8]=e}get destroyed(){return go(this._lView)}destroy(){if(this._appRef)this._appRef.detachView(this);else if(this._attachedToViewContainer){let e=this._lView[3];if(lo(e)){let t=e[8],n=t?t.indexOf(this):-1;n>-1&&($f(e,n),va(t,n))}this._attachedToViewContainer=!1}Md(this._lView[1],this._lView)}onDestroy(e){Fo(this._lView,e)}markForCheck(){Jf(this._cdRefInjectingView||this._lView,4)}detach(){this._lView[2]&=-129}reattach(){No(this._lView),this._lView[2]|=128}detectChanges(){this._lView[2]|=1024,Rf(this._lView)}checkNoChanges(){}attachToViewContainerRef(){if(this._appRef)throw new yi(902,!1);this._attachedToViewContainer=!0}detachFromAppRef(){this._appRef=null;let e=ho(this._lView),t=this._lView[16];t!==null&&!e&&jd(t,this._lView),Ad(this._lView[1],this._lView)}attachToAppRef(e){if(this._attachedToViewContainer)throw new yi(902,!1);this._appRef=e;let t=ho(this._lView),n=this._lView[16];n!==null&&!t&&tp(n,this._lView),No(this._lView)}},rp=(()=>{class e{_declarationLView;_declarationTContainer;elementRef;static __NG_ELEMENT_ID__=ip;constructor(e,t,n){this._declarationLView=e,this._declarationTContainer=t,this.elementRef=n}get ssrId(){return this._declarationTContainer.tView?.ssrId||null}createEmbeddedView(e,t){return this.createEmbeddedViewImpl(e,t)}createEmbeddedViewImpl(e,t,n){return new np(Cf(this._declarationLView,this._declarationTContainer,e,{embeddedViewInjector:t,dehydratedView:n}))}}return e})();function ip(){return ap(Yo(),qo())}function ap(e,t){return e.type&4?new rp(t,e,Ll(e,t)):null}function op(e,t,n,r,i){let a=e.data[t];if(a===null)a=sp(e,t,n,r,i),Wee()&&(a.flags|=32);else if(a.type&64){a.type=n,a.value=r,a.attrs=i;let e=Hee();a.injectorIndex=e===null?-1:e.injectorIndex}return Zo(a,!0),a}function sp(e,t,n,r,i){let a=Xo(),o=Qo(),s=o?a:a&&a.parent,c=e.data[t]=lp(e,s,n,t,r,i);return cp(e,c,a,o),c}function cp(e,t,n,r){e.firstChild===null&&(e.firstChild=t),n!==null&&(r?n.child==null&&t.parent!==null&&(n.child=t):n.next===null&&(n.next=t,t.prev=n))}function lp(e,t,n,r,i,a){let o=t?t.injectorIndex:-1,s=0;return Wo()&&(s|=128),{type:n,index:r,insertBeforeIndex:null,injectorIndex:o,directiveStart:-1,directiveEnd:-1,directiveStylingLast:-1,componentOffset:-1,controlDirectiveIndex:-1,customControlIndex:-1,propertyBindings:null,flags:s,providerIndexes:0,value:i,namespace:bs(),attrs:a,mergedAttrs:null,localNames:null,initialInputs:null,inputs:null,hostDirectiveInputs:null,outputs:null,hostDirectiveOutputs:null,directiveToIndex:null,tView:null,next:null,prev:null,projectionNext:null,child:null,parent:t,projection:null,styles:null,stylesWithoutHost:null,residualStyles:void 0,classes:null,classesWithoutHost:null,residualClasses:void 0,classBindings:0,styleBindings:0}}function up(e){let t=e[6]??[],n=e[3][11],r=[];for(let e of t)e.data.di===void 0?dp(e,n):r.push(e);e[6]=r}function dp(e,t){let n=0,r=e.firstChild;if(r){let i=e.data.r;for(;n<i;){let e=r.nextSibling;ju(t,r,!1),r=e,n++}}}var fp=()=>null,pp=()=>null;function mp(e,t){return fp(e,t)}function hp(e,t,n){return pp(e,t,n)}var gp=class{},_p=class{},vp=class{destroyNode=null;static __NG_ELEMENT_ID__=()=>yp()};function yp(){let e=qo(),t=To(Yo().index,e);return(co(t)?t:e)[11]}var bp=(()=>{class e{static ɵprov=Di({token:e,providedIn:`root`,factory:()=>null})}return e})();function xp(e){return e.debugInfo?.className||e.type.name||null}var Sp={},Cp=class{injector;parentInjector;constructor(e,t){this.injector=e,this.parentInjector=t}get(e,t,n){let r=this.injector.get(e,Sp,n);return r!==Sp||t===Sp?r:this.parentInjector.get(e,t,n)}};function wp(e,t,n){return e[t]=n}function Tp(e,t){return e[t]}function Ep(e,t,n){if(n===Yu)return!1;let r=e[t];return!Object.is(r,n)&&(e[t]=n,!0)}function Dp(e,t,n,r){let i=Ep(e,t,n);return Ep(e,t+1,r)||i}function Op(e,t,n,r,i){let a=Dp(e,t,n,r);return Ep(e,t+2,i)||a}function kp(e,t,n,r,i,a){let o=Dp(e,t,n,r);return Dp(e,t+2,i,a)||o}function Ap(e,t,n){return function r(i){let a=r.__ngNativeEl__;a!==void 0&&ou(i,a),Jf(fo(e)?To(e.index,t):t,5);let o=t[8],s=jp(t,o,n,i),c=r.__ngNextListenerFn__;for(;c;)s=jp(t,o,c,i)&&s,c=c.__ngNextListenerFn__;return s}}function jp(e,t,n,r){let i=on(null);try{return zc(Ec.OutputStart,t,n),n(r)!==!1}catch(t){return gf(e,t),!1}finally{zc(Ec.OutputEnd,t,n),on(i)}}function Mp(e,t,n,r,i,a,o,s){let c=po(e),l=!1,u=null;if(!r&&c&&(u=Pp(t,n,a,e.index)),u!==null){let e=u.__ngLastListenerFn__||u;e.__ngNextListenerFn__=o,u.__ngLastListenerFn__=o,l=!0}else{let o=xo(e,n),c=r?r(o):o;r||(s.__ngNativeEl__=o);let l=i.listen(c,a,s);Np(a)||Fp(r?t=>r(yo(t[e.index])):e.index,t,n,a,s,l,!1)}return l}function Np(e){return e.startsWith(`animation`)||e.startsWith(`transition`)}function Pp(e,t,n,r){let i=e.cleanup;if(i!=null)for(let e=0;e<i.length-1;e+=2){let a=i[e];if(a===n&&i[e+1]===r){let n=t[7],r=i[e+2];return n&&n.length>r?n[r]:null}typeof a==`string`&&(e+=2)}return null}function Fp(e,t,n,r,i,a,o){let s=t.firstCreatePass?zo(t):null,c=Ro(n),l=c.length;c.push(i,a),s&&s.push(r,e,l,(l+1)*(o?-1:1))}function Ip(e,t,n,r,i){let a=null,o=null,s=null,c=!1,l=e.directiveToIndex.get(n.type);if(typeof l==`number`?a=l:[a,o,s]=l,o!==null&&s!==null&&e.hostDirectiveOutputs&&Object.hasOwn(e.hostDirectiveOutputs,r)){let n=e.hostDirectiveOutputs[r];for(let a=0;a<n.length;a+=2){let l=n[a];if(l>=o&&l<=s)c=!0,Lp(e,t,l,n[a+1],r,i);else if(l>s)break}}return Object.hasOwn(n.outputs,r)&&(c=!0,Lp(e,t,a,r,r,i)),c}function Lp(e,t,n,r,i,a){let o=t[n],s=t[1],c=o[s.data[n].outputs[r]].subscribe(a);Fp(e.index,s,t,i,a,c,!0)}function Rp(){zp()}function zp(){let e=qo(),t=Jo(),n=Yo();if(t.firstCreatePass&&Gp(t,n),n.controlDirectiveIndex===-1)return;_d(`NgSignalForms`);let r=e[n.controlDirectiveIndex];t.data[n.controlDirectiveIndex].controlDef.create(r,new Hp(e,t,n))}function Bp(){Vp()}function Vp(){let e=qo(),t=Jo(),n=vs();if(n.controlDirectiveIndex===-1)return;let r=t.data[n.controlDirectiveIndex].controlDef,i=e[n.controlDirectiveIndex];r.update(i,new Hp(e,t,n))}var Hp=class{lView;tView;tNode;hasPassThrough;constructor(e,t,n){this.lView=e,this.tView=t,this.tNode=n,this.hasPassThrough=!!(n.flags&4096)}get customControl(){return this.tNode.customControlIndex===-1?void 0:this.lView[this.tNode.customControlIndex]}get nativeElement(){return xo(this.tNode,this.lView)}get descriptor(){return`<${this.tNode.value}>`}listenToCustomControlOutput(e,t){let n=this.tView.data[this.tNode.customControlIndex];Ip(this.tNode,this.lView,n,e,Ap(this.tNode,this.lView,t))}listenToCustomControlModel(e){let t=this.tNode.flags&1024?`valueChange`:`checkedChange`,n=this.tView.data[this.tNode.customControlIndex];Ip(this.tNode,this.lView,n,t,Ap(this.tNode,this.lView,e))}listenToDom(e,t){Mp(this.tNode,this.tView,this.lView,void 0,this.lView[11],e,t,Ap(this.tNode,this.lView,t))}setInputOnDirectives(e,t,n){let r=this.tNode.inputs?.[e],i=this.tNode.hostDirectiveInputs?.[e];if(!r&&!i)return!1;let a=!1;if(r)for(let i of r){if(i===this.tNode.controlDirectiveIndex)continue;let r=this.lView[i],o=this.tView.data[i];(!n||n(Wp(r,o,e)))&&(Zd(o,r,e,t),a=!0)}if(i)for(let r=0;r<i.length;r+=2){let o=i[r];if(o===this.tNode.controlDirectiveIndex)continue;let s=this.lView[o],c=i[r+1],l=this.tView.data[o];(!n||n(Wp(s,l,e)))&&(Zd(l,s,c,t),a=!0)}return a}setCustomControlModelInput(e){let t=this.tView.data[this.tNode.customControlIndex],n=this.tNode.flags&1024?`value`:`checked`;vf(this.tNode,this.tView,this.lView,t,n,e)}customControlHasInput(e){if(this.tNode.customControlIndex===-1)return!1;let t=this.tView.data[this.tNode.customControlIndex];return(t.signalFormsInputPresence??=this._buildCustomControlInputCache(t))[e]===!0}_buildCustomControlInputCache(e){let t={};for(let n in e.inputs)t[n]=!0;if(e.hostDirectives!==null){let n=[...e.hostDirectives];for(;n.length>0;){let e=n.shift();if(typeof e!=`function`){for(let n in e.inputs)t[e.inputs[n]]=!0;let r=Up(e.directive);r!==null&&n.push(...r);continue}for(let r of e()){if(typeof r==`function`)continue;if(r.inputs)for(let e=0;e<r.inputs.length;e+=2){let n=r.inputs[e+1]||r.inputs[e];t[n]=!0}let e=Up(r.directive);e!==null&&n.push(...e)}}}return t}};function Up(e){return typeof e==`function`&&`ɵdir`in e?e.ɵdir.hostDirectives??null:null}function Wp(e,t,n){if(!t.inputs||!Object.hasOwn(t.inputs,n))return;let[r,i]=t.inputs[n];if((i&Xd.SignalBased)!==0){let t=e[r][an];return t.value===Cc?void 0:t.value}return e[r]}function Gp(e,t,n){for(let n=t.directiveStart;n<t.directiveEnd;n++)if(e.data[n].controlDef){t.controlDirectiveIndex=n;break}if(t.controlDirectiveIndex===-1)return;let r=e.data[t.controlDirectiveIndex].controlDef;if(r.passThroughInput&&(t.inputs?.[r.passThroughInput]?.length??0)>1){t.flags|=4096;return}Kp(e,t)}function Kp(e,t){for(let n=t.directiveStart;n<t.directiveEnd;n++){let r=e.data[n];if(!t.directiveToIndex||t.directiveToIndex.has(r.type)){if(qp(r,`value`)){t.flags|=1024,t.customControlIndex=n;return}if(qp(r,`checked`)){t.flags|=2048,t.customControlIndex=n;return}}}if(t.hostDirectiveInputs!==null&&t.hostDirectiveOutputs!==null&&t.directiveToIndex!==null){let e=(e,n)=>{let r=t.hostDirectiveInputs[e],i=t.hostDirectiveOutputs[e+`Change`];if(!r||!i)return!1;for(let e=0;e<r.length;e+=2){let a=r[e];for(let e=0;e<i.length;e+=2)if(a===i[e])for(let e of t.directiveToIndex.values()){if(!Array.isArray(e))continue;let[r,i,o]=e;if(a>=i&&a<=o)return t.flags|=n,t.customControlIndex=r,!0}}return!1};if(e(`value`,1024)||e(`checked`,2048))return}}function qp(e,t){return Jp(e,t)&&Yp(e,t+`Change`)}function Jp(e,t){return t in e.inputs}function Yp(e,t){return t in e.outputs}var Xp=Symbol(`BINDING`),Zp=new Ni(``);function Qp(e,t,n){let r=n?e.styles:null,i=n?e.classes:null,a=0;if(t!==null)for(let e=0;e<t.length;e++){let n=t[e];if(typeof n==`number`)a=n;else if(a==1)i=Ci(i,n);else if(a==2){let i=n,a=t[++e];r=Ci(r,i+`: `+a+`;`)}}n?e.styles=r:e.stylesWithoutHost=r,n?e.classes=i:e.classesWithoutHost=i}function $p(e,t=0){let n=qo();return n===null?ca(e,t):xl(Yo(),n,Ti(e),t)}function em(e,t,n,r,i){let a=r===null?null:{"":-1},o=i(e,n);if(o!==null){let r=o,i=null,s=null;for(let e of o)if(e.resolveHostDirectives!==null){[r,i,s]=e.resolveHostDirectives(o);break}rm(e,t,n,r,a,i,s)}a!==null&&r!==null&&tm(n,r,a)}function tm(e,t,n){let r=e.localNames=[];for(let e=0;e<t.length;e+=2){let i=n[t[e+1]];if(i==null)throw new yi(-301,!1);r.push(t[e],i)}}function nm(e,t,n){t.componentOffset=n,(e.components??=[]).push(t.index)}function rm(e,t,n,r,i,a,o){let s=r.length,c=null;for(let i=0;i<s;i++){let a=r[i];c===null&&mo(a)&&(c=a,nm(e,n,i)),vl(ml(n,t),e,a.type)}pm(n,e.data.length,s),c?.viewProvidersResolver&&c.viewProvidersResolver(c);for(let e=0;e<s;e++){let t=r[e];t.providersResolver&&t.providersResolver(t)}let l=!1,u=!1,d=qd(e,t,s,null);s>0&&(n.directiveToIndex=new Map);for(let c=0;c<s;c++){let s=r[c];if(n.mergedAttrs=tl(n.mergedAttrs,s.hostAttrs),lm(e,n,t,d,s),fm(d,s,i),o!==null&&o.has(s)){let[e,t]=o.get(s);n.directiveToIndex.set(s.type,[d,e+n.directiveStart,t+n.directiveStart])}else(a===null||!a.has(s))&&n.directiveToIndex.set(s.type,d);s.contentQueries!==null&&(n.flags|=4),(s.hostBindings!==null||s.hostAttrs!==null||s.hostVars!==0)&&(n.flags|=64);let f=s.type.prototype;!l&&(f.ngOnChanges||f.ngOnInit||f.ngDoCheck)&&((e.preOrderHooks??=[]).push(n.index),l=!0),!u&&(f.ngOnChanges||f.ngDoCheck)&&((e.preOrderCheckHooks??=[]).push(n.index),u=!0),d++}im(e,n,a)}function im(e,t,n){for(let r=t.directiveStart;r<t.directiveEnd;r++){let i=e.data[r];if(n===null||!n.has(i))am(0,t,i,r),am(1,t,i,r),cm(t,r,!1);else{let e=n.get(i);om(0,t,e,r),om(1,t,e,r),cm(t,r,!0)}}}function am(e,t,n,r){let i=e===0?n.inputs:n.outputs;for(let n in i)if(Object.hasOwn(i,n)){let i;i=e===0?t.inputs??={}:t.outputs??={},i[n]??=[],i[n].push(r),sm(t,n)}}function om(e,t,n,r){let i=e===0?n.inputs:n.outputs;for(let n in i)if(Object.hasOwn(i,n)){let a=i[n],o;o=e===0?t.hostDirectiveInputs??={}:t.hostDirectiveOutputs??={},o[a]??=[],o[a].push(r,n),sm(t,a)}}function sm(e,t){t===`class`?e.flags|=8:t===`style`&&(e.flags|=16)}function cm(e,t,n){let{attrs:r,inputs:i,hostDirectiveInputs:a}=e;if(r===null||!n&&i===null||n&&a===null||Hu(e)){e.initialInputs??=[],e.initialInputs.push(null);return}let o=null,s=0;for(;s<r.length;){let e=r[s];if(e===0){s+=4;continue}if(e===5){s+=2;continue}if(typeof e==`number`)break;if(!n&&Object.hasOwn(i,e)){let n=i[e];for(let i of n)if(i===t){o??=[],o.push(e,r[s+1]);break}}else if(n&&Object.hasOwn(a,e)){let n=a[e];for(let e=0;e<n.length;e+=2)if(n[e]===t){o??=[],o.push(n[e+1],r[s+1]);break}}s+=2}e.initialInputs??=[],e.initialInputs.push(o)}function lm(e,t,n,r,i){e.data[r]=i;let a=new Yc(i.factory||=pa(i.type,!0),mo(i),$p,null);e.blueprint[r]=a,n[r]=a,um(e,t,r,qd(e,n,i.hostVars,Yu),i)}function um(e,t,n,r,i){let a=i.hostBindings;if(a){let i=e.hostBindingOpCodes;i===null&&(i=e.hostBindingOpCodes=[]);let o=~t.index;dm(i)!=o&&i.push(o),i.push(n,r,a)}}function dm(e){let t=e.length;for(;t>0;){let n=e[--t];if(typeof n==`number`&&n<0)return n}return 0}function fm(e,t,n){if(n){if(t.exportAs)for(let r=0;r<t.exportAs.length;r++)n[t.exportAs[r]]=e;mo(t)&&(n[``]=e)}}function pm(e,t,n){e.flags|=1,e.directiveStart=t,e.directiveEnd=t+n,e.providerIndexes=t}function mm(e,t,n,r,i,a,o,s){let c=t[1],l=c.consts,u=op(c,e,n,r,Oo(l,o));return a&&em(c,t,u,Oo(l,s),i),u.mergedAttrs=tl(u.mergedAttrs,u.attrs),u.attrs!==null&&Qp(u,u.attrs,!1),u.mergedAttrs!==null&&Qp(u,u.mergedAttrs,!0),c.queries!==null&&c.queries.elementStart(c,u),u}function hm(e,t){Vc(e,t),uo(t)&&e.queries.elementEnd(t)}function gm(e,t,n,r,i,a){let o=t.consts,s=op(t,e,n,r,Oo(o,i));if(s.mergedAttrs=tl(s.mergedAttrs,s.attrs),a!=null){let e=Oo(o,a);s.localNames=[];for(let t=0;t<e.length;t+=2)s.localNames.push(e[t],-1)}return s.attrs!==null&&Qp(s,s.attrs,!1),s.mergedAttrs!==null&&Qp(s,s.mergedAttrs,!0),t.queries!==null&&t.queries.elementStart(t,s),s}var _m=typeof ShadowRoot<`u`,vm=typeof Document<`u`;function ym(e){return Object.keys(e).map(t=>{let[n,r,i]=e[t],a={propName:n,templateName:t,isSignal:(r&Xd.SignalBased)!==0};return i&&(a.transform=i),a})}function bm(e){return Object.keys(e).map(t=>({propName:e[t],templateName:t}))}function xm(e,t,n){let r=t instanceof qa?t:t?.injector;return r&&e.getStandaloneInjector!==null&&(r=e.getStandaloneInjector(r)||r),r?new Cp(n,r):n}function Sm(e){let t=e.get(_p,null);if(t===null)throw new yi(407,!1);return{rendererFactory:t,sanitizer:e.get(bp,null),changeDetectionScheduler:e.get(lc,null),ngReflect:!1,tracingService:e.get(hd,null,{optional:!0})}}function Cm(e,t,n){let r=Tm(e);return Du(t,r,r===`svg`?`svg`:r===`math`?vo:n)}function wm(e){if((e&&`localName`in e&&typeof e.localName==`string`?e.localName:e?.tagName)?.toLowerCase()===`script`)throw new yi(905,!1)}function Tm(e){return(e.selectors[0][0]||`div`).toLowerCase()}var Em=class{componentDef;ngModule;selector;componentType;ngContentSelectors;isBoundToModule;cachedInputs=null;cachedOutputs=null;get inputs(){return this.cachedInputs??=ym(this.componentDef.inputs),this.cachedInputs}get outputs(){return this.cachedOutputs??=bm(this.componentDef.outputs),this.cachedOutputs}constructor(e,t){this.componentDef=e,this.ngModule=t,this.componentType=e.type,this.selector=rte(e.selectors),this.ngContentSelectors=e.ngContentSelectors??[],this.isBoundToModule=!!t}create(e,t,n,r,i,a,o){zc(Ec.DynamicComponentStart);let s=on(null);try{let s=this.componentDef,c=xm(s,r||this.ngModule,e),l=Sm(c),u=l.tracingService;return u&&u.componentCreate?u.componentCreate(xp(s),()=>this.createComponentRef(l,c,t,n,i,a,o)):this.createComponentRef(l,c,t,n,i,a,o)}finally{on(s)}}createComponentRef(e,t,n,r,i,a,o){let s=this.componentDef,c=Dm(r,s,a,i),l=e.rendererFactory.createRenderer(null,s),u=r?tf(l,r,s.encapsulation,t):Cm(s,l,o??null);wm(u);let d=t.get(Zp,null),f=Om(u,()=>t.get(Ds,null)??nu());d&&d.addHost(f);let p=a?.some(Am)||i?.some(e=>typeof e!=`function`&&e.bindings.some(Am)),m=Wd(null,c,null,512|Kd(s),null,null,e,l,t,null,lu(u,t,!0));d&&_m&&f instanceof ShadowRoot&&Fo(m,()=>{d.removeHost(f)}),m[27]=u,us(m);let ee=null;try{let e=mm(27,m,2,`#host`,()=>c.directiveRegistry,!0,0);Pu(l,u,e),Xl(u,m),$d(c,m,e),fu(c,e,m),hm(c,e),n!==void 0&&Mm(e,this.ngContentSelectors,n),ee=To(e.index,m),m[8]=ee[8],xf(c,m,null)}catch(e){throw ee!==null&&Jl(ee),Jl(m),e}finally{zc(Ec.DynamicComponentEnd),hs()}return new jm(this.componentType,m,!!p)}};function Dm(e,t,n,r){let i=e?[`ng-version`,`22.1.7`]:ite(t.selectors[0]),a=null,o=null,s=0;if(n)for(let e of n)s+=e[Xp].requiredVars,e.create&&(e.targetIdx=0,(a??=[]).push(e)),e.update&&(e.targetIdx=0,(o??=[]).push(e));if(r)for(let e=0;e<r.length;e++){let t=r[e];if(typeof t!=`function`)for(let n of t.bindings){s+=n[Xp].requiredVars;let t=e+1;n.create&&(n.targetIdx=t,(a??=[]).push(n)),n.update&&(n.targetIdx=t,(o??=[]).push(n))}}let c=[t];if(r)for(let e of r){let t=Hi(typeof e==`function`?e:e.type);c.push(t)}return Ud(0,null,km(a,o),1,s,c,null,null,null,[i],null)}function Om(e,t){let n=e.getRootNode?.();return vm&&n instanceof Document?n.head:n&&_m&&n instanceof ShadowRoot?n:t().head}function km(e,t){return!e&&!t?null:n=>{if(n&1&&e)for(let t of e)t.create();if(n&2&&t)for(let e of t)e.update()}}function Am(e){let t=e[Xp].kind;return t===`input`||t===`twoWay`}var jm=class extends gp{_rootLView;_hasInputBindings;instance;hostView;changeDetectorRef;componentType;location;previousInputValues=null;_tNode;constructor(e,t,n){super(),this._rootLView=t,this._hasInputBindings=n,this._tNode=So(t[1],27),this.location=Ll(this._tNode,t),this.instance=To(this._tNode.index,t)[8],this.hostView=this.changeDetectorRef=new np(t,void 0),this.componentType=e}setInput(e,t){this._hasInputBindings;let n=this._tNode;if(this.previousInputValues??=new Map,this.previousInputValues.has(e)&&Object.is(this.previousInputValues.get(e),t))return;let r=this._rootLView;_f(n,r[1],r,e,t),this.previousInputValues.set(e,t),Jf(To(n.index,r),1)}get injector(){return new kl(this._tNode,this._rootLView)}destroy(){this.hostView.destroy()}onDestroy(e){this.hostView.onDestroy(e)}};function Mm(e,t,n){let r=e.projection=[];for(let e=0;e<t.length;e++){let t=n[e];r.push(t!=null&&t.length?Array.from(t):null)}}var Nm=(()=>{class e{static __NG_ELEMENT_ID__=Pm}return e})();function Pm(){return Rm(Yo(),qo())}var Fm=class e extends Nm{_lContainer;_hostTNode;_hostLView;constructor(e,t,n){super(),this._lContainer=e,this._hostTNode=t,this._hostLView=n}get element(){return Ll(this._hostTNode,this._hostLView)}get injector(){return new kl(this._hostTNode,this._hostLView)}get parentInjector(){let e=_l(this._hostTNode,this._hostLView);if(rl(e)){let t=ol(e,this._hostLView),n=il(e),r=t[1].data[n+8];return new kl(r,t)}return new kl(null,this._hostLView)}clear(){for(;this.length>0;)this.remove(this.length-1)}get(e){let t=Im(this._lContainer);return t!==null&&t[e]||null}get length(){return this._lContainer.length-10}createEmbeddedView(e,t,n){let r,i;typeof n==`number`?r=n:n!=null&&(r=n.index,i=n.injector);let a=mp(this._lContainer,e.ssrId),o=e.createEmbeddedViewImpl(t||{},i,a);return this.insertImpl(o,r,wf(this._hostTNode,a)),o}createComponent(e,t,n,r,i,a,o){let s,c=t||{};s=c.index,n=c.injector,r=c.projectableNodes,i=c.environmentInjector||c.ngModuleRef,a=c.directives,o=c.bindings;let l=new Em(Vi(e)),u=n||this.parentInjector;if(!i&&l.ngModule==null){let e=this.parentInjector.get(qa,null);e&&(i=e)}let d=Vi(l.componentType??{}),f=mp(this._lContainer,d?.id??null),p=f?.firstChild??null,m=l.create(u,r,p,i,a,o,this._getHostElementNamespace());return this.insertImpl(m.hostView,s,wf(this._hostTNode,f)),m}_getHostElementNamespace(){if(this._hostTNode.type&2){let e=this._hostTNode.parent??this._hostLView[5];return e!==null&&e.type&2&&typeof e.value==`string`&&e.value.toLowerCase()===`foreignobject`?null:e?.namespace??null}return this._hostTNode.namespace}insert(e,t){return this.insertImpl(e,t,!0)}insertImpl(t,n,r){let i=t._lView;if(Do(i)){let n=this.indexOf(t);if(n!==-1)this.detach(n);else{let n=i[3],r=new e(n,n[5],n[3]);r.detach(r.indexOf(t))}}let a=this._adjustIndex(n),o=this._lContainer;return Zf(o,i,a,r),t.attachToViewContainerRef(),_a(Lm(o),a,t),t}move(e,t){return this.insert(e,t)}indexOf(e){let t=Im(this._lContainer);return t===null?-1:t.indexOf(e)}remove(e){let t=this._adjustIndex(e,-1),n=$f(this._lContainer,t);n&&(va(Lm(this._lContainer),t),Md(n[1],n))}detach(e){let t=this._adjustIndex(e,-1),n=$f(this._lContainer,t);return n&&va(Lm(this._lContainer),t)!=null?new np(n):null}_adjustIndex(e,t=0){return e??this.length+t}};function Im(e){return e[8]}function Lm(e){return e[8]||=[]}function Rm(e,t){let n,r=t[e.index];return lo(r)?n=r:(n=Yf(r,t,null,e),t[e.index]=n,Jd(t,n)),Bm(n,t,e,r),new Fm(n,e,t)}function zm(e,t){let n=e[11],r=n.createComment(``),i=xo(t,e);return Ou(n,n.parentNode(i),r,n.nextSibling(i),!1),r}var Bm=Um,Vm=()=>!1;function Hm(e,t,n){return Vm(e,t,n)}function Um(e,t,n,r){if(e[7])return;let i;i=n.type&8?yo(r):zm(t,n),e[7]=i}var Wm=class e{queryList;matches=null;constructor(e){this.queryList=e}clone(){return new e(this.queryList)}setDirty(){this.queryList.setDirty()}},Gm=class e{queries;constructor(e=[]){this.queries=e}createEmbeddedView(t){let n=t.queries;if(n!==null){let r=t.contentQueries===null?n.length:t.contentQueries[0],i=[];for(let e=0;e<r;e++){let t=n.getByIndex(e),r=this.queries[t.indexInDeclarationView];i.push(r.clone())}return new e(i)}return null}insertView(e){this.dirtyQueriesWithMatches(e)}detachView(e){this.dirtyQueriesWithMatches(e)}finishViewCreation(e){this.dirtyQueriesWithMatches(e)}dirtyQueriesWithMatches(e){for(let t=0;t<this.queries.length;t++)oh(e,t).matches!==null&&this.queries[t].setDirty()}},Km=class{flags;read;predicate;constructor(e,t,n=null){this.flags=t,this.read=n,this.predicate=typeof e==`string`?ih(e):e}},qm=class e{queries;constructor(e=[]){this.queries=e}elementStart(e,t){for(let n=0;n<this.queries.length;n++)this.queries[n].elementStart(e,t)}elementEnd(e){for(let t=0;t<this.queries.length;t++)this.queries[t].elementEnd(e)}embeddedTView(t){let n=null;for(let e=0;e<this.length;e++){let r=n===null?0:n.length,i=this.getByIndex(e).embeddedTView(t,r);i&&(i.indexInDeclarationView=e,n===null?n=[i]:n.push(i))}return n===null?null:new e(n)}template(e,t){for(let n=0;n<this.queries.length;n++)this.queries[n].template(e,t)}getByIndex(e){return this.queries[e]}get length(){return this.queries.length}track(e){this.queries.push(e)}},Jm=class e{metadata;matches=null;indexInDeclarationView=-1;crossesNgTemplate=!1;_declarationNodeIndex;_appliesToNextNode=!0;constructor(e,t=-1){this.metadata=e,this._declarationNodeIndex=t}elementStart(e,t){this.isApplyingToNode(t)&&this.matchTNode(e,t)}elementEnd(e){this._declarationNodeIndex===e.index&&(this._appliesToNextNode=!1)}template(e,t){this.elementStart(e,t)}embeddedTView(t,n){return this.isApplyingToNode(t)?(this.crossesNgTemplate=!0,this.addMatch(-t.index,n),new e(this.metadata)):null}isApplyingToNode(e){if(this._appliesToNextNode&&(this.metadata.flags&1)!=1){let t=this._declarationNodeIndex,n=e.parent;for(;n!==null&&n.type&8&&n.index!==t;)n=n.parent;return t===(n===null?-1:n.index)}return this._appliesToNextNode}matchTNode(e,t){let n=this.metadata.predicate;if(Array.isArray(n))for(let r=0;r<n.length;r++){let i=n[r];this.matchTNodeWithReadOption(e,t,Ym(t,i)),this.matchTNodeWithReadOption(e,t,wl(t,e,i,!1,!1))}else n===rp?t.type&4&&this.matchTNodeWithReadOption(e,t,-1):this.matchTNodeWithReadOption(e,t,wl(t,e,n,!1,!1))}matchTNodeWithReadOption(e,t,n){if(n!==null){let r=this.metadata.read;if(r!==null){if(r===Rl||r===Nm||r===rp&&t.type&4)this.addMatch(t.index,-2);else{let n=wl(t,e,r,!1,!1);n!==null&&this.addMatch(t.index,n)}}else this.addMatch(t.index,n)}}addMatch(e,t){this.matches===null?this.matches=[e,t]:this.matches.push(e,t)}};function Ym(e,t){let n=e.localNames;if(n!==null){for(let e=0;e<n.length;e+=2)if(n[e]===t)return n[e+1]}return null}function Xm(e,t){return e.type&11?Ll(e,t):e.type&4?ap(e,t):null}function Zm(e,t,n,r){return n===-1?Xm(t,e):n===-2?Qm(e,t,r):Tl(e,e[1],n,t)}function Qm(e,t,n){if(n===Rl)return Ll(t,e);if(n===rp)return ap(t,e);if(n===Nm)return Rm(t,e)}function $m(e,t,n,r){let i=t[18].queries[r];if(i.matches===null){let r=e.data,a=n.matches,o=[];for(let e=0;a!==null&&e<a.length;e+=2){let i=a[e];if(i<0)o.push(null);else{let s=r[i];o.push(Zm(t,s,a[e+1],n.metadata.read))}}i.matches=o}return i.matches}function eh(e,t,n,r){let i=e.queries.getByIndex(n),a=i.matches;if(a!==null){let o=$m(e,t,i,n);for(let e=0;e<a.length;e+=2){let n=a[e];if(n>0)r.push(o[e/2]);else{let i=a[e+1],o=t[-n];for(let e=10;e<o.length;e++){let t=o[e];t[16]===t[3]&&eh(t[1],t,i,r)}if(o[9]!==null){let e=o[9];for(let t=0;t<e.length;t++){let n=e[t];eh(n[1],n,i,r)}}}}}return r}function th(e,t){return e[18].queries[t].queryList}function nh(e,t,n){let r=new Vl((n&4)==4);return zee(e,t,r,r.destroy),(t[18]??=new Gm).queries.push(new Wm(r))-1}function rh(e,t,n){let r=Jo();return r.firstCreatePass&&(ah(r,new Km(e,t,n),-1),(t&2)==2&&(r.staticViewQueries=!0)),nh(r,qo(),t)}function ih(e){return e.split(`,`).map(e=>e.trim())}function ah(e,t,n){e.queries===null&&(e.queries=new qm),e.queries.track(new Jm(t,n))}function oh(e,t){return e.queries.getByIndex(t)}function sh(e,t){let n=e[1],r=oh(n,t);return r.crossesNgTemplate?eh(n,e,t,[]):$m(n,e,r,t)}function ch(e,t,n){let r,i=Dn(()=>{r._dirtyCounter();let n=fh(r,e);if(t&&n===void 0)throw new yi(-951,!1);return n});return r=i[an],r._dirtyCounter=w(0),r._flatValue=void 0,i}function lh(e){return ch(!0,!1,e)}function uh(e){return ch(!0,!0,e)}function dh(e,t){let n=e[an];n._lView=qo(),n._queryIndex=t,n._queryList=th(n._lView,t),n._queryList.onDirty(()=>n._dirtyCounter.update(e=>e+1))}function fh(e,t){let n=e._lView,r=e._queryIndex;if(n===void 0||r===void 0||n[2]&4)return t?void 0:Ea;let i=th(n,r),a=sh(n,r);return i.reset(a,zl),t?i.first:i._changesDetected||e._flatValue===void 0?e._flatValue=i.toArray():e._flatValue}function ph(e){return!!e&&typeof e.then==`function`}function mh(e){return!!e&&typeof e.subscribe==`function`}var hh=class{},gh=class extends hh{injector;instance=null;constructor(e){super();let t=new Ja([...e.providers,{provide:hh,useValue:this}],e.parent||Ka(),e.debugName,new Set([`environment`]));this.injector=t,e.runEnvironmentInitializers&&t.resolveInjectorInitializers()}destroy(){this.injector.destroy()}onDestroy(e){this.injector.onDestroy(e)}};function _h(e,t,n=null){return new gh({providers:e,parent:t,debugName:n,runEnvironmentInitializers:!0}).injector}var vh=(()=>{class e{_injector;cachedInjectors=new Map;constructor(e){this._injector=e}getOrCreateStandaloneInjector(e){if(!e.standalone)return null;if(!this.cachedInjectors.has(e)){let t=Ma(!1,e.type),n=t.length>0?_h([t],this._injector,``):null;this.cachedInjectors.set(e,n)}return this.cachedInjectors.get(e)}ngOnDestroy(){try{for(let e of this.cachedInjectors.values())e!==null&&e.destroy()}finally{this.cachedInjectors.clear()}}static ɵprov=Di({token:e,providedIn:`environment`,factory:()=>new e(ca(qa))})}return e})();function D(e){return Tc(()=>{let t=wh(e),n={...t,decls:e.decls,vars:e.vars,template:e.template,consts:e.consts||null,ngContentSelectors:e.ngContentSelectors,onPush:e.changeDetection!==Ul.Eager,directiveDefs:null,pipeDefs:null,dependencies:t.standalone&&e.dependencies||null,getStandaloneInjector:t.standalone?e=>e.get(vh).getOrCreateStandaloneInjector(n):null,getExternalStyles:null,signals:e.signals??!1,data:e.data||{},encapsulation:e.encapsulation||pu.Emulated,styles:e.styles||Ea,_:null,schemas:e.schemas||null,tView:null,id:``};t.standalone&&_d(`NgStandalone`),Th(n);let r=e.dependencies;return n.directiveDefs=Eh(r,yh),n.pipeDefs=Eh(r,Ui),n.id=Dh(n),n})}function yh(e){return Vi(e)||Hi(e)}function bh(e,t){if(e==null)return Ta;let n={};for(let r in e)if(Object.hasOwn(e,r)){let i=e[r],a,o,s,c;Array.isArray(i)?(s=i[0],a=i[1],o=i[2]??a,c=i[3]||null):(a=i,o=i,s=Xd.None,c=null),n[a]=[r,s,c],t[a]=o}return n}function xh(e){if(e==null)return Ta;let t={};for(let n in e)Object.hasOwn(e,n)&&(t[e[n]]=n);return t}function Sh(e){return Tc(()=>{let t=wh(e);return Th(t),t})}function Ch(e){return{type:e.type,name:e.name,factory:null,pure:e.pure!==!1,standalone:e.standalone??!0,onDestroy:e.type.prototype.ngOnDestroy||null}}function wh(e){let t={};return{type:e.type,providersResolver:null,viewProvidersResolver:null,factory:null,hostBindings:e.hostBindings||null,hostVars:e.hostVars||0,hostAttrs:e.hostAttrs||null,contentQueries:e.contentQueries||null,declaredInputs:t,inputConfig:e.inputs||Ta,exportAs:e.exportAs||null,standalone:e.standalone??!0,signals:e.signals===!0,selectors:e.selectors||Ea,viewQuery:e.viewQuery||null,features:e.features||null,setInput:null,resolveHostDirectives:null,hostDirectives:null,controlDef:null,signalFormsInputPresence:null,inputs:bh(e.inputs,t),outputs:xh(e.outputs),debugInfo:null}}function Th(e){e.features?.forEach(t=>t(e))}function Eh(e,t){return e?()=>{let n=typeof e==`function`?e():e,r=[];for(let e of n){let n=t(e);n!==null&&r.push(n)}return r}:null}function Dh(e){let t=0,n=typeof e.consts==`function`?``:e.consts,r=[e.selectors,e.ngContentSelectors,e.hostVars,e.hostAttrs,n,e.vars,e.decls,e.encapsulation,e.standalone,e.signals,e.exportAs,JSON.stringify(e.inputs),JSON.stringify(e.outputs),Object.getOwnPropertyNames(e.type.prototype),!!e.contentQueries,!!e.viewQuery];for(let e of r.join(`|`))t=Math.imul(31,t)+e.charCodeAt(0)<<0;return t+=2147483648,`c`+t}var Oh=new Ni(``),kh=(()=>{class e{resolve;reject;initialized=!1;done=!1;donePromise=new Promise((e,t)=>{this.resolve=e,this.reject=t});appInits=b(Oh,{optional:!0})??[];injector=b(Es);constructor(){}runInitializers(){if(this.initialized)return;let e=[];for(let t of this.appInits){let n=ao(this.injector,t);if(ph(n))e.push(n);else if(mh(n)){let t=new Promise((e,t)=>{n.subscribe({complete:e,error:t})});e.push(t)}}let t=()=>{this.done=!0,this.resolve()};Promise.all(e).then(()=>{t()}).catch(e=>{this.reject(e)}),e.length===0&&t(),this.initialized=!0}static ɵfac=function(t){return new(t||e)};static ɵprov=Fl({token:e,factory:e.ɵfac})}return e})();function Ah(e){return t=>{t.controlDef={create:(e,t)=>{e?.ɵngControlCreate(t)},update:(e,t)=>{e?.ɵngControlUpdate?.(t)},passThroughInput:e}}}function jh(e){return Object.getPrototypeOf(e.prototype).constructor}function Mh(e){let t=jh(e.type),n=!0,r=[e];for(;t&&t!==Function.prototype&&t!==Object.prototype;){let i,a=Object.hasOwn(t,Fi)?t[Fi]:void 0,o=Object.hasOwn(t,Ii)?t[Ii]:void 0;if(mo(e))i=a??o;else{if(a)throw new yi(903,!1);i=o}if(i){if(n){r.push(i);let t=e;t.inputs=Fh(e.inputs),t.declaredInputs=Fh(e.declaredInputs),t.outputs=Fh(e.outputs);let n=i.hostBindings;n&&Rh(e,n);let a=i.viewQuery,o=i.contentQueries;if(a&&Ih(e,a),o&&Lh(e,o),Nh(e,i),Iee(e.outputs,i.outputs),mo(i)&&i.data.animation){let t=e.data;t.animation=(t.animation||[]).concat(i.data.animation)}}let t=i.features;if(t)for(let r=0;r<t.length;r++){let i=t[r];i&&i.ngInherit&&i(e),i===Mh&&(n=!1)}}t=Object.getPrototypeOf(t)}Ph(r)}function Nh(e,t){for(let n in t.inputs){if(!Object.hasOwn(t.inputs,n)||Object.hasOwn(e.inputs,n))continue;let r=t.inputs[n];r!==void 0&&(e.inputs[n]=r,e.declaredInputs[n]=t.declaredInputs[n])}}function Ph(e){let t=0,n=null;for(let r=e.length-1;r>=0;r--){let i=e[r];i.hostVars=t+=i.hostVars,i.hostAttrs=tl(i.hostAttrs,n=tl(n,i.hostAttrs))}}function Fh(e){return e===Ta?{}:e===Ea?[]:e}function Ih(e,t){let n=e.viewQuery;e.viewQuery=n?(e,r)=>{t(e,r),n(e,r)}:t}function Lh(e,t){let n=e.contentQueries;e.contentQueries=n?(e,r,i)=>{t(e,r,i),n(e,r,i)}:t}function Rh(e,t){let n=e.hostBindings;e.hostBindings=n?(e,r)=>{t(e,r),n(e,r)}:t}function zh(e,t,n,r,i,a,o,s){if(n.firstCreatePass){e.mergedAttrs=tl(e.mergedAttrs,e.attrs);let t=e.tView=Ud(2,e,i,a,o,n.directiveRegistry,n.pipeRegistry,null,n.schemas,n.consts,null);n.queries!==null&&(n.queries.template(n,e),t.queries=n.queries.embeddedTView(e))}s&&(e.flags|=s),Zo(e,!1);let c=Uh(n,t,e,r);Ss()&&Id(n,t,c,e),Xl(c,t);let l=Yf(c,t,c,e);t[r+27]=l,Jd(t,l),Hm(l,e,t)}function Bh(e,t,n,r,i,a,o,s,c,l,u){let d=n+27,f;return t.firstCreatePass?(f=op(t,d,4,o||null,s||null),Uo()&&em(t,e,f,Oo(t.consts,l),uf),Vc(t,f)):f=t.data[d],zh(f,e,t,n,r,i,a,c),po(f)&&$d(t,e,f),l!=null&&ef(e,f,u),f}function Vh(e,t,n,r,i,a,o,s,c,l,u){let d=n+27,f;if(t.firstCreatePass){if(f=op(t,d,4,o||null,s||null),l!=null){let e=Oo(t.consts,l);f.localNames=[];for(let t=0;t<e.length;t+=2)f.localNames.push(e[t],-1)}}else f=t.data[d];return zh(f,e,t,n,r,i,a,c),l!=null&&ef(e,f,u),f}function Hh(e,t,n,r,i,a,o,s){let c=qo(),l=Jo();return Bh(c,l,e,t,n,r,i,Oo(l.consts,a),void 0,o,s),Hh}var Uh=Wh;function Wh(e,t,n,r){return Cs(!0),t[11].createComment(``)}var Gh=new Ni(``),Kh=new Ni(``);function qh(){fee(()=>{throw new yi(600,``)})}var Jh=10,Yh=(()=>{class e{_runningTick=!1;_destroyed=!1;_destroyListeners=[];_views=[];internalErrorHandler=b($s);afterRenderManager=b(vd);zonelessEnabled=b(uc);rootEffectScheduler=b(fc);dirtyFlags=0;tracingSnapshot=null;allTestViews=new Set;autoDetectTestViews=new Set;includeAllTestViews=!1;afterTick=new Gr;get allViews(){return[...(this.includeAllTestViews?this.allTestViews:this.autoDetectTestViews).keys(),...this._views]}get destroyed(){return this._destroyed}componentTypes=[];components=[];internalPendingTask=b(Ms);get isStable(){return this.internalPendingTask.hasPendingTasksObservable.pipe(_i(e=>!e))}constructor(){b(hd,{optional:!0})}whenStable(){let e;return new Promise(t=>{e=this.isStable.subscribe({next:e=>{e&&t()}})}).finally(()=>{e.unsubscribe()})}_injector=b(qa);_rendererFactory=null;get injector(){return this._injector}bootstrap(e,t){return this.bootstrapImpl(e,t)}bootstrapImpl(e,t,n=Es.NULL){return this._injector.get(Bs).run(()=>{if(zc(Ec.BootstrapComponentStart),!this._injector.get(kh).done)throw new yi(405,``);let r=Vi(e),i=this._injector.get(hh),a=new Em(r,i);this.componentTypes.push(e);let{hostElement:o,directives:s,bindings:c}=Xh(t),l=o||a.selector,u=a.create(n,[],l,i.injector,s,c),d=u.location.nativeElement,f=u.injector.get(Gh,null);return f?.registerApplication(d),u.onDestroy(()=>{this.detachView(u.hostView),Zh(this.components,u),f?.unregisterApplication(d)}),this._loadComponent(u),zc(Ec.BootstrapComponentEnd,u),u})}tick(){this.zonelessEnabled||(this.dirtyFlags|=1),this._tick()}_tick(){zc(Ec.ChangeDetectionStart),this.tracingSnapshot===null?this.tickImpl():this.tracingSnapshot.run(md.CHANGE_DETECTION,this.tickImpl)}tickImpl=()=>{if(this._runningTick)throw zc(Ec.ChangeDetectionEnd),new yi(101,!1);let e=on(null);try{this._runningTick=!0,this.synchronize()}finally{this._runningTick=!1,this.tracingSnapshot?.dispose(),this.tracingSnapshot=null,on(e),this.afterTick.next(),zc(Ec.ChangeDetectionEnd)}};synchronize(){this._rendererFactory===null&&!this._injector.destroyed&&(this._rendererFactory=this._injector.get(_p,null,{optional:!0}));let e=0;for(;this.dirtyFlags!==0&&e++<Jh;){zc(Ec.ChangeDetectionSyncStart);try{this.synchronizeOnce()}finally{zc(Ec.ChangeDetectionSyncEnd)}}}synchronizeOnce(){this.dirtyFlags&16&&(this.dirtyFlags&=-17,this.rootEffectScheduler.flush());let e=!1;if(this.dirtyFlags&7){let t=!!(this.dirtyFlags&1);this.dirtyFlags&=-8,this.dirtyFlags|=8;for(let{_lView:n}of this.allViews)(t||Mo(n))&&(Rf(n,t&&!this.zonelessEnabled?0:1),e=!0);if(this.dirtyFlags&=-5,this.syncDirtyFlagsWithViews(),this.dirtyFlags&23)return}e||(this._rendererFactory?.begin?.(),this._rendererFactory?.end?.()),this.dirtyFlags&8&&(this.dirtyFlags&=-9,this.afterRenderManager.execute()),this.syncDirtyFlagsWithViews()}syncDirtyFlagsWithViews(){if(this.allViews.some(({_lView:e})=>Mo(e))){this.dirtyFlags|=2;return}this.dirtyFlags&=-8}attachView(e){let t=e;this._views.push(t),t.attachToAppRef(this)}detachView(e){let t=e;Zh(this._views,t),t.detachFromAppRef()}_loadComponent(e){this.attachView(e.hostView);try{this.tick()}catch(e){this.internalErrorHandler(e)}this.components.push(e),this._injector.get(Kh,[]).forEach(t=>t(e))}ngOnDestroy(){if(!this._destroyed)try{this._destroyListeners.forEach(e=>e()),this._views.slice().forEach(e=>e.destroy())}finally{this._destroyed=!0,this._views=[],this._destroyListeners=[]}}onDestroy(e){return this._destroyListeners.push(e),()=>Zh(this._destroyListeners,e)}destroy(){if(this._destroyed)throw new yi(406,!1);let e=this._injector;e.destroy&&!e.destroyed&&e.destroy()}get viewCount(){return this._views.length}static ɵfac=function(t){return new(t||e)};static ɵprov=Fl({token:e,factory:e.ɵfac})}return e})();function Xh(e){return e===void 0||typeof e==`string`||e instanceof Element?{hostElement:e}:e}function Zh(e,t){let n=e.indexOf(t);n>-1&&e.splice(n,1)}function O(e,t,n,r){let i=qo();return Ep(i,as(),t)&&(Jo(),df(vs(),i,e,t,n,r)),O}function Qh(e){if(_d(`NgAnimateEnter`),!id)return Qh;let t=qo();if(mte(t))return Qh;let n=Yo(),r=t[9].get(Bs);return yte(dd(t),n,()=>$h(t,n,e,r)),Tte(t[9]),Td(t[9],dd(t)),Qh}function $h(e,t,n,r){let i=xo(t,e),a=e[11],o=vte(n),s=[],c=!1,l=e=>{if(fd(e)!==i)return;let t=e instanceof AnimationEvent?`animationend`:`transitionend`;r.runOutsideAngular(()=>{a.listen(i,t,u)})},u=e=>{fd(e)===i&&(pd(e,i)&&(c=!0),eg(e,i,a))};if(o&&o.length>0){r.runOutsideAngular(()=>{s.push(a.listen(i,`animationstart`,l)),s.push(a.listen(i,`transitionstart`,l))}),hte(i,o,s);for(let e of o)a.addClass(i,e);r.runOutsideAngular(()=>{requestAnimationFrame(()=>{if(!c&&(ute(i,sd,id),!sd.has(i))){for(let e of o)a.removeClass(i,e);ad(i)}})})}}function eg(e,t,n){let r=od.get(t);if(fd(e)===t&&r&&pd(e,t)){e.stopPropagation();for(let e of r.classList)n.removeClass(t,e);ad(t)}}var tg=class{destroy(e){}updateValue(e,t){}swap(e,t){let n=Math.min(e,t),r=Math.max(e,t),i=this.detach(r);if(r-n>1){let e=this.detach(n);this.attach(n,i),this.attach(r,e)}else this.attach(n,i)}move(e,t){this.attach(t,this.detach(e))}};function ng(e,t,n,r,i){return e===n&&Object.is(t,r)?1:Object.is(i(e,t),i(n,r))?-1:0}function rg(e,t,n,r){let i,a,o=0,s=e.length-1;if(Array.isArray(t)){on(r);let c=t.length-1;for(on(null);o<=s&&o<=c;){let r=e.at(o),l=t[o],u=ng(o,r,o,l,n);if(u!==0){u<0&&e.updateValue(o,l),o++;continue}let d=e.at(s),f=t[c],p=ng(s,d,c,f,n);if(p!==0){p<0&&e.updateValue(s,f),s--,c--;continue}let m=n(o,r),ee=n(s,d),h=n(o,l);if(Object.is(h,ee)){let t=n(c,f);Object.is(t,m)?(e.swap(o,s),e.updateValue(s,f),c--,s--):e.move(s,o),e.updateValue(o,l),o++;continue}if(i??=new sg,a??=og(e,o,s,n),ig(e,i,o,h))e.updateValue(o,l),o++,s++;else if(a.has(h))i.set(m,e.detach(o)),s--;else{let n=e.create(o,t[o]);e.attach(o,n),o++,s++}}for(;o<=c;)ag(e,i,n,o,t[o]),o++}else if(t!=null){on(r);let c=t[Symbol.iterator]();on(null);let l=c.next();for(;!l.done&&o<=s;){let t=e.at(o),r=l.value,u=ng(o,t,o,r,n);if(u!==0)u<0&&e.updateValue(o,r),o++,l=c.next();else{i??=new sg,a??=og(e,o,s,n);let u=n(o,r);if(ig(e,i,o,u))e.updateValue(o,r),o++,s++,l=c.next();else if(!a.has(u))e.attach(o,e.create(o,r)),o++,s++,l=c.next();else{let r=n(o,t);i.set(r,e.detach(o)),s--}}}for(;!l.done;)ag(e,i,n,e.length,l.value),l=c.next()}for(;o<=s;)e.destroy(e.detach(s--));i?.forEach(t=>{e.destroy(t)})}function ig(e,t,n,r){return t!==void 0&&t.has(r)?(e.attach(n,t.get(r)),t.delete(r),!0):!1}function ag(e,t,n,r,i){if(ig(e,t,r,n(r,i)))e.updateValue(r,i);else{let t=e.create(r,i);e.attach(r,t)}}function og(e,t,n,r){let i=new Set;for(let a=t;a<=n;a++)i.add(r(a,e.at(a)));return i}var sg=class{kvMap=new Map;_vMap=void 0;has(e){return this.kvMap.has(e)}delete(e){if(!this.has(e))return!1;let t=this.kvMap.get(e);return this._vMap!==void 0&&this._vMap.has(t)?(this.kvMap.set(e,this._vMap.get(t)),this._vMap.delete(t)):this.kvMap.delete(e),!0}get(e){return this.kvMap.get(e)}set(e,t){if(this.kvMap.has(e)){let n=this.kvMap.get(e);this._vMap===void 0&&(this._vMap=new Map);let r=this._vMap;for(;r.has(n);)n=r.get(n);r.set(n,t)}else this.kvMap.set(e,t)}forEach(e){for(let[t,n]of this.kvMap)if(e(n,t),this._vMap!==void 0){let r=this._vMap;for(;r.has(n);)n=r.get(n),e(n,t)}}};function k(e,t,n,r,i,a,o,s){_d(`NgControlFlow`);let c=qo(),l=Jo();return Vh(c,l,e,t,n,r,i,Oo(l.consts,a),256,o,s),cg}function cg(e,t,n,r,i,a,o,s){_d(`NgControlFlow`);let c=qo(),l=Jo();return Vh(c,l,e,t,n,r,i,Oo(l.consts,a),512,o,s),cg}function A(e,t){_d(`NgControlFlow`);let n=qo(),r=as(),i=n[r]===Yu?-1:n[r],a=i===-1?void 0:mg(n,27+i);if(Ep(n,r,e)){let r=on(null);try{if(a!==void 0&&Qf(a,0),e!==-1){let r=27+e,i=mg(n,r),a=yg(n[1],r),o=hp(i,a,n);Zf(i,Cf(n,a,t,{dehydratedView:o}),0,wf(a,o))}}finally{on(r)}}else if(a!==void 0){let e=Xf(a,0);e!==void 0&&(e[8]=t)}}var lg=class{lContainer;$implicit;$index;constructor(e,t,n){this.lContainer=e,this.$implicit=t,this.$index=n}get $count(){return this.lContainer.length-10}};function ug(e){return e}function dg(e,t){return t}var fg=class{hasEmptyBlock;trackByFn;liveCollection;constructor(e,t,n){this.hasEmptyBlock=e,this.trackByFn=t,this.liveCollection=n}};function j(e,t,n,r,i,a,o,s,c,l,u,d,f){_d(`NgControlFlow`);let p=qo(),m=Jo(),ee=c!==void 0,h=qo(),g=new fg(ee,s?o.bind(h[15][8]):o);h[27+e]=g,Vh(p,m,e+1,t,n,r,i,Oo(m.consts,a),256),ee&&Vh(p,m,e+2,c,l,u,d,Oo(m.consts,f),512)}var pg=class extends tg{lContainer;hostLView;templateTNode;operationsCounter=void 0;needsIndexUpdate=!1;constructor(e,t,n){super(),this.lContainer=e,this.hostLView=t,this.templateTNode=n}get length(){return this.lContainer.length-10}at(e){return this.getLView(e)[8].$implicit}attach(e,t){let n=t[6];this.needsIndexUpdate||=e!==this.length,Zf(this.lContainer,t,e,wf(this.templateTNode,n)),hg(this.lContainer,e)}detach(e){return this.needsIndexUpdate||=e!==this.length-1,gg(this.lContainer,e),_g(this.lContainer,e)}create(e,t){let n=mp(this.lContainer,this.templateTNode.tView.ssrId);return Cf(this.hostLView,this.templateTNode,new lg(this.lContainer,t,e),{dehydratedView:n})}destroy(e){Md(e[1],e)}updateValue(e,t){this.getLView(e)[8].$implicit=t}reset(){this.needsIndexUpdate=!1}updateIndexes(){if(this.needsIndexUpdate)for(let e=0;e<this.length;e++)this.getLView(e)[8].$index=e}getLView(e){return vg(this.lContainer,e)}};function M(e){let t=on(null),n=gs();try{let r=qo(),i=r[1],a=r[n],o=n+1,s=mg(r,o);a.liveCollection===void 0?a.liveCollection=new pg(s,r,yg(i,o)):a.liveCollection.reset();let c=a.liveCollection;if(rg(c,e,a.trackByFn,t),c.updateIndexes(),a.hasEmptyBlock){let e=as(),t=c.length===0;if(Ep(r,e,t)){let e=n+2,a=mg(r,e);if(t){let t=yg(i,e),n=hp(a,t,r);Zf(a,Cf(r,t,void 0,{dehydratedView:n}),0,wf(t,n))}else i.firstUpdatePass&&up(a),Qf(a,0)}}}finally{on(t)}}function mg(e,t){return e[t]}function hg(e,t){if(e.length<=10)return;let n=e[10+t],r=n?n[26]:void 0;if(n&&r&&r.detachedLeaveAnimationFns&&r.detachedLeaveAnimationFns.length>0){let e=n[9];Cte(e,r),rd.delete(n[19]),r.detachedLeaveAnimationFns=void 0}}function gg(e,t){if(e.length<=10)return;let n=e[10+t],r=n?n[26]:void 0;r&&r.leave&&r.leave.size>0&&(r.detachedLeaveAnimationFns=[])}function _g(e,t){return $f(e,t)}function vg(e,t){return Xf(e,t)}function yg(e,t){return So(e,t)}function N(e,t,n){let r=qo();return Ep(r,as(),t)&&(Jo(),rf(vs(),r,e,t,r[11],n)),N}function bg(e,t,n,r,i){_f(t,e,n,i?`class`:`style`,r)}function P(e,t,n,r){let i=qo(),a=i[1],o=e+27,s=a.firstCreatePass?mm(o,i,2,t,uf,Uo(),n,r):a.data[o];if(fo(s)){let n=i[10].tracingService;if(n&&n.componentCreate){let o=a.data[s.directiveStart+s.componentOffset];return n.componentCreate(xp(o),()=>(xg(e,t,i,s,r),P))}}return xg(e,t,i,s,r),P}function xg(e,t,n,r,i){if(mf(r,n,e,t,Cg),po(r)){let e=n[1];$d(e,n,r),fu(e,r,n)}i!=null&&ef(n,r)}function F(){let e=Jo(),t=hf(Yo());return e.firstCreatePass&&hm(e,t),Go(t)&&Ko(),Ho(),t.classesWithoutHost!=null&&Xc(t)&&bg(e,t,qo(),t.classesWithoutHost,!0),t.stylesWithoutHost!=null&&Zc(t)&&bg(e,t,qo(),t.stylesWithoutHost,!1),F}function I(e,t,n,r){return P(e,t,n,r),F(),I}function L(e,t,n,r){let i=qo(),a=i[1],o=e+27,s=a.firstCreatePass?gm(o,a,2,t,n,r):a.data[o];return mf(s,i,e,t,Cg),r!=null&&ef(i,s),L}function R(){return Go(hf(Yo()))&&Ko(),Ho(),R}function Sg(e,t,n,r){return L(e,t,n,r),R(),Sg}var Cg=(e,t,n,r,i)=>(Cs(!0),Du(t[11],r,bs()));function wg(e,t,n){let r=qo(),i=r[1],a=e+27,o=i.firstCreatePass?mm(a,r,8,`ng-container`,uf,Uo(),t,n):i.data[a];if(mf(o,r,e,`ng-container`,Dg),po(o)){let e=r[1];$d(e,r,o),fu(e,o,r)}return n!=null&&ef(r,o),wg}function Tg(){let e=Jo(),t=hf(Yo());return e.firstCreatePass&&hm(e,t),Tg}function Eg(e,t,n){return wg(e,t,n),Tg(),Eg}var Dg=(e,t,n,r,i)=>(Cs(!0),Eu(t[11],``));function z(){return qo()}function B(e,t,n){let r=qo();return Ep(r,as(),t)&&(Jo(),af(vs(),r,e,t,r[11],n)),B}var Og=void 0;function kg(e){let t=Math.floor(Math.abs(e)),n=e.toString().replace(/^[^.]*\.?/,``).length;return t===1&&n===0?1:5}var Ag=[`en`,[[`a`,`p`],[`AM`,`PM`]],[[`AM`,`PM`]],[[`S`,`M`,`T`,`W`,`T`,`F`,`S`],[`Sun`,`Mon`,`Tue`,`Wed`,`Thu`,`Fri`,`Sat`],[`Sunday`,`Monday`,`Tuesday`,`Wednesday`,`Thursday`,`Friday`,`Saturday`],[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`]],Og,[[`J`,`F`,`M`,`A`,`M`,`J`,`J`,`A`,`S`,`O`,`N`,`D`],[`Jan`,`Feb`,`Mar`,`Apr`,`May`,`Jun`,`Jul`,`Aug`,`Sep`,`Oct`,`Nov`,`Dec`],[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`]],Og,[[`B`,`A`],[`BC`,`AD`],[`Before Christ`,`Anno Domini`]],0,[6,0],[`M/d/yy`,`MMM d, y`,`MMMM d, y`,`EEEE, MMMM d, y`],[`h:mm a`,`h:mm:ss a`,`h:mm:ss a z`,`h:mm:ss a zzzz`],[`{1}, {0}`,Og,Og,Og],[`.`,`,`,`;`,`%`,`+`,`-`,`E`,`×`,`‰`,`∞`,`NaN`,`:`],[`#,##0.###`,`#,##0%`,`¤#,##0.00`,`#E0`],`USD`,`$`,`US Dollar`,{},`ltr`,kg],jg=Object.create(null);function Mg(e){let t=Fg(e),n=Ng(t);if(n)return n;let r=t.split(`-`)[0];if(n=Ng(r),n)return n;if(r===`en`)return Ag;throw new yi(701,!1)}function Ng(e){if(!(e in jg)){let t=ra.ng&&ra.ng.common&&ra.ng.common.locales&&ra.ng.common.locales[e];return t!==void 0&&(jg[e]=t),t}return jg[e]}var Pg={LocaleId:0,DayPeriodsFormat:1,DayPeriodsStandalone:2,DaysFormat:3,DaysStandalone:4,MonthsFormat:5,MonthsStandalone:6,Eras:7,FirstDayOfWeek:8,WeekendRange:9,DateFormat:10,TimeFormat:11,DateTimeFormat:12,NumberSymbols:13,NumberFormats:14,CurrencyCode:15,CurrencySymbol:16,CurrencyName:17,Currencies:18,Directionality:19,PluralCase:20,ExtraData:21};function Fg(e){return e.toLowerCase().replace(/_/g,`-`)}var Ig=`en-US`;function Lg(e){typeof e==`string`&&e.toLowerCase().replace(/_/g,`-`)}function V(e,t,n){let r=qo(),i=Jo(),a=Yo();return Rg(i,r,r[11],a,e,t,n),V}function H(e,t,n){let r=qo(),i=Jo(),a=Yo();return(a.type&3||n)&&Mp(a,i,r,n,r[11],e,t,Ap(a,r,t)),H}function Rg(e,t,n,r,i,a,o){let s=!0,c=null;if((r.type&3||o)&&(c??=Ap(r,t,a),Mp(r,e,t,o,n,i,a,c)&&(s=!1)),s){let e=r.outputs?.[i],n=r.hostDirectiveOutputs?.[i];if(n&&n.length)for(let e=0;e<n.length;e+=2){let o=n[e],s=n[e+1];c??=Ap(r,t,a),Lp(r,t,o,s,i,c)}if(e&&e.length)for(let n of e)c??=Ap(r,t,a),Lp(r,t,n,i,i,c)}}function U(e=1){return Xee(e)}function zg(e,t){let n=null,r=Qee(e);for(let i=0;i<t.length;i++){let a=t[i];if(a===`*`){n=i;continue}if(r===null?qu(e,a,!0):tte(r,a))return i}return n}function Bg(e){let t=qo()[15][5];if(!t.projection){let n=t.projection=ya(e?e.length:1,null),r=n.slice(),i=t.child;for(;i!==null;){if(i.type!==128){let t=e?zg(i,e):0;t!==null&&(r[t]?r[t].projectionNext=i:n[t]=i,r[t]=i)}i=i.next}}}function Vg(e,t=0,n,r,i,a){let o=qo(),s=Jo(),c=r?e+1:null;c!==null&&Vh(o,s,c,r,i,a,null,n);let l=op(s,27+e,16,null,n||null);l.projection===null&&(l.projection=t),$o();let u=!o[6]||Wo();o[15][5].projection[l.projection]===null&&c!==null?Hg(o,s,c):u&&!su(l)&&zte(s,o,l)}function Hg(e,t,n){let r=27+n,i=t.data[r],a=e[r],o=mp(a,i.tView.ssrId);Zf(a,Cf(e,i,void 0,{dehydratedView:o}),0,wf(i,o))}function Ug(e,t,n,r){return dh(e,rh(t,n,r)),Ug}function Wg(e=1){cs(Jee()+e)}function Gg(e){return Co(es(),27+e)}function Kg(e,t){return e<<17|t<<2}function qg(e){return e>>17&32767}function Jg(e){return(e&2)==2}function Yg(e,t){return e&131071|t<<17}function Xg(e){return e|2}function Zg(e){return(e&131068)>>2}function Qg(e,t){return e&-131069|t<<2}function $g(e){return(e&1)==1}function e_(e){return e|1}function t_(e,t,n,r,i,a){let o=a?t.classBindings:t.styleBindings,s=qg(o),c=Zg(o);e[r]=n;let l=!1,u;if(Array.isArray(n)){let e=n;u=e[1],(u===null||Ca(e,u)>0)&&(l=!0)}else u=n;if(i){if(c!==0){let t=qg(e[s+1]);e[r+1]=Kg(t,s),t!==0&&(e[t+1]=Qg(e[t+1],r)),e[s+1]=Yg(e[s+1],r)}else e[r+1]=Kg(s,0),s!==0&&(e[s+1]=Qg(e[s+1],r)),s=r}else e[r+1]=Kg(c,0),s===0?s=r:e[c+1]=Qg(e[c+1],r),c=r;l&&(e[r+1]=Xg(e[r+1])),r_(e,u,r,!0),r_(e,u,r,!1),n_(t,u,e,r,a),o=Kg(s,c),a?t.classBindings=o:t.styleBindings=o}function n_(e,t,n,r,i){let a=i?e.residualClasses:e.residualStyles;a!=null&&typeof t==`string`&&Ca(a,t)>=0&&(n[r+1]=e_(n[r+1]))}function r_(e,t,n,r){let i=e[n+1],a=t===null,o=r?qg(i):Zg(i),s=!1;for(;o!==0&&(s===!1||a);){let n=e[o],i=e[o+1];i_(n,t)&&(s=!0,e[o+1]=r?e_(i):Xg(i)),o=r?qg(i):Zg(i)}s&&(e[n+1]=r?Xg(i):e_(i))}function i_(e,t){return e===null||t==null||(Array.isArray(e)?e[1]:e)===t?!0:Array.isArray(e)&&typeof t==`string`?Ca(e,t)>=0:!1}var a_={textEnd:0,key:0,keyEnd:0,value:0,valueEnd:0};function o_(e){return e.substring(a_.key,a_.keyEnd)}function s_(e){return l_(e),c_(e,u_(e,0,a_.textEnd))}function c_(e,t){let n=a_.textEnd;return n===t?-1:(t=a_.keyEnd=d_(e,a_.key=t,n),u_(e,t,n))}function l_(e){a_.key=0,a_.keyEnd=0,a_.value=0,a_.valueEnd=0,a_.textEnd=e.length}function u_(e,t,n){for(;t<n&&e.charCodeAt(t)<=32;)t++;return t}function d_(e,t,n){for(;t<n&&e.charCodeAt(t)>32;)t++;return t}function f_(e,t,n){return h_(e,t,n,!1),f_}function W(e,t){return h_(e,t,null,!0),W}function p_(e){g_(E_,m_,e,!0)}function m_(e,t){for(let n=s_(t);n>=0;n=c_(t,n))xa(e,o_(t),!0)}function h_(e,t,n,r){let i=qo(),a=Jo(),o=os(2);if(a.firstUpdatePass&&v_(a,e,o,r),t!==Yu&&Ep(i,o,t)){let s=a.data[gs()];O_(a,s,i,i[11],e,i[o+1]=j_(t,n),r,o)}}function g_(e,t,n,r){let i=Jo(),a=os(2);i.firstUpdatePass&&v_(i,null,a,r);let o=qo();if(n!==Yu&&Ep(o,a,n)){let s=i.data[gs()];if(M_(s,r)&&!__(i,a)){let e=r?s.classesWithoutHost:s.stylesWithoutHost;e!==null&&(n=Ci(e,n||``)),bg(i,s,o,n,r)}else D_(i,s,o,o[11],o[a+1],o[a+1]=T_(e,t,n),r,a)}}function __(e,t){return t>=e.expandoStartIndex}function v_(e,t,n,r){let i=e.data;if(i[n+1]===null){let a=i[gs()],o=__(e,n);M_(a,r)&&t===null&&!o&&(t=!1),t=y_(i,a,t,r),t_(i,a,t,n,o,r)}}function y_(e,t,n,r){let i=qee(e),a=r?t.residualClasses:t.residualStyles;if(i===null)(r?t.classBindings:t.styleBindings)===0&&(n=C_(null,e,t,n,r),n=w_(n,t.attrs,r),a=null);else{let o=t.directiveStylingLast;if(o===-1||e[o]!==i){if(n=C_(i,e,t,n,r),a===null){let n=b_(e,t,r);n!==void 0&&Array.isArray(n)&&(n=C_(null,e,t,n[1],r),n=w_(n,t.attrs,r),x_(e,t,r,n))}else a=S_(e,t,r)}}return a!==void 0&&(r?t.residualClasses=a:t.residualStyles=a),n}function b_(e,t,n){let r=n?t.classBindings:t.styleBindings;if(Zg(r)!==0)return e[qg(r)]}function x_(e,t,n,r){let i=n?t.classBindings:t.styleBindings;e[qg(i)]=r}function S_(e,t,n){let r,i=t.directiveEnd;for(let a=1+t.directiveStylingLast;a<i;a++){let t=e[a].hostAttrs;r=w_(r,t,n)}return w_(r,t.attrs,n)}function C_(e,t,n,r,i){let a=null,o=n.directiveEnd,s=n.directiveStylingLast;for(s===-1?s=n.directiveStart:s++;s<o&&(a=t[s],r=w_(r,a.hostAttrs,i),a!==e);)s++;return e!==null&&(n.directiveStylingLast=s),r}function w_(e,t,n){let r=n?1:2,i=-1;if(t!==null)for(let a=0;a<t.length;a++){let o=t[a];typeof o==`number`?i=o:i===r&&(Array.isArray(e)||(e=e===void 0?[]:[``,e]),xa(e,o,n?!0:t[++a]))}return e===void 0?null:e}function T_(e,t,n){if(n==null||n===``)return Ea;let r=[],i=hu(n);if(Array.isArray(i))for(let t=0;t<i.length;t++)e(r,i[t],!0);else if(i instanceof Set)for(let t of i)e(r,t,!0);else if(typeof i==`object`)for(let t in i)Object.hasOwn(i,t)&&e(r,t,i[t]);else typeof i==`string`&&t(r,i);return r}function E_(e,t,n){let r=String(t);r!==``&&!r.includes(` `)&&xa(e,r,n)}function D_(e,t,n,r,i,a,o,s){i===Yu&&(i=Ea);let c=0,l=0,u=0<i.length?i[0]:null,d=0<a.length?a[0]:null;for(;u!==null||d!==null;){let f=c<i.length?i[c+1]:void 0,p=l<a.length?a[l+1]:void 0,m=null,ee;u===d?(c+=2,l+=2,f!==p&&(m=d,ee=p)):d===null||u!==null&&u<d?(c+=2,m=u):(l+=2,m=d,ee=p),m!==null&&O_(e,t,n,r,m,ee,o,s),u=c<i.length?i[c]:null,d=l<a.length?a[l]:null}}function O_(e,t,n,r,i,a,o,s){if(!(t.type&3))return;let c=e.data,l=c[s+1];A_($g(l)?k_(c,t,n,i,Zg(l),o):void 0)||(A_(a)||Jg(l)&&(a=k_(c,null,n,i,s,o)),Vte(r,o,bo(gs(),n),i,a))}function k_(e,t,n,r,i,a){let o=t===null,s;for(;i>0;){let t=e[i],a=Array.isArray(t),c=a?t[1]:t,l=c===null,u=n[i+1];u===Yu&&(u=l?Ea:void 0);let d=l?Sa(u,r):c===r?u:void 0;if(a&&!A_(d)&&(d=Sa(t,r)),A_(d)&&(s=d,o))return s;let f=e[i+1];i=o?qg(f):Zg(f)}if(t!==null){let e=a?t.residualClasses:t.residualStyles;e!=null&&(s=Sa(e,r))}return s}function A_(e){return e!==void 0}function j_(e,t){return e==null||e===``||(typeof t==`string`?e=hu(e)+t:typeof e==`object`&&(e=Si(hu(e)))),e}function M_(e,t){return!!(e.flags&(t?8:16))}function G(e,t=``){let n=qo(),r=Jo(),i=e+27,a=r.firstCreatePass?op(r,i,1,t,null):r.data[i],o=N_(r,n,a,t);n[i]=o,Ss()&&Id(r,n,o,a),Zo(a,!1)}var N_=(e,t,n,r)=>(Cs(!0),wu(t[11],r));function P_(e,t,n,r=``){return Ep(e,as(),n)?t+Gi(n)+r:Yu}function F_(e,t,n,r,i,a=``){let o=Dp(e,is(),n,i);return os(2),o?t+Gi(n)+r+Gi(i)+a:Yu}function I_(e,t,n,r,i,a,o,s=``){let c=Op(e,is(),n,i,o);return os(3),c?t+Gi(n)+r+Gi(i)+a+Gi(o)+s:Yu}function L_(e,t,n,r,i,a,o,s,c,l=``){let u=kp(e,is(),n,i,o,c);return os(4),u?t+Gi(n)+r+Gi(i)+a+Gi(o)+s+Gi(c)+l:Yu}function K(e){return q(``,e),K}function q(e,t,n){let r=qo(),i=P_(r,e,t,n);return i!==Yu&&B_(r,gs(),i),q}function J(e,t,n,r,i){let a=qo(),o=F_(a,e,t,n,r,i);return o!==Yu&&B_(a,gs(),o),J}function R_(e,t,n,r,i,a,o){let s=qo(),c=I_(s,e,t,n,r,i,a,o);return c!==Yu&&B_(s,gs(),c),R_}function z_(e,t,n,r,i,a,o,s,c){let l=qo(),u=L_(l,e,t,n,r,i,a,o,s,c);return u!==Yu&&B_(l,gs(),u),z_}function B_(e,t,n){let r=bo(t,e);Tu(e[11],r,n)}function V_(e,t,n){Sc(t)&&(t=t());let r=qo();return Ep(r,as(),t)&&(Jo(),rf(vs(),r,e,t,r[11],n)),V_}function H_(e,t){let n=Sc(e);return n&&e.set(t),n}function U_(e,t){let n=qo(),r=Jo(),i=Yo();return Rg(r,n,n[11],i,e,t),U_}var W_={};function G_(e){_d(`NgLet`);let t=Jo(),n=qo(),r=e+27;return Zo(op(t,r,128,null,null),!1),wo(t,n,r,W_),G_}function K_(e){return wo(Jo(),qo(),gs(),e),e}function Y(e){let t=Co(es(),27+e);if(t===W_)throw new yi(314,!1);return t}function q_(e,t,n=``){return P_(qo(),e,t,n)}function J_(e,t,n){let r=Jo();r.firstCreatePass&&Y_(t,r.data,r.blueprint,mo(e),n)}function Y_(e,t,n,r,i){if(e=Ti(e),Array.isArray(e))for(let a=0;a<e.length;a++)Y_(e[a],t,n,r,i);else{let a=Jo(),o=qo(),s=Yo(),c=Ba(e)?e:Ti(e.provide),l=Qa(e),u=s.providerIndexes&1048575,d=s.directiveStart,f=s.providerIndexes>>20;if(Ba(e)||!e.multi){let r=new Yc(l,i,$p,null),p=Q_(c,t,i?u:u+f,d);p===-1?(vl(ml(s,o),a,c),X_(a,e,t.length),t.push(c),s.directiveStart++,s.directiveEnd++,i&&(s.providerIndexes+=1048576),n.push(r),o.push(r)):(n[p]=r,o[p]=r)}else{let p=Q_(c,t,u+f,d),m=Q_(c,t,u,u+f),ee=p>=0&&n[p],h=m>=0&&n[m];if(i&&!h||!i&&!ee){vl(ml(s,o),a,c);let u=nv(i?ev:$_,n.length,i,r,l,e);!i&&h&&(n[m].providerFactory=u),X_(a,e,t.length,0),t.push(c),s.directiveStart++,s.directiveEnd++,i&&(s.providerIndexes+=1048576),n.push(u),o.push(u)}else{let t=Z_(n[i?m:p],l,!i&&r);X_(a,e,p>-1?p:m,t)}!i&&r&&h&&n[m].componentProviders++}}}function X_(e,t,n,r){let i=Ba(t),a=Va(t);if(i||a){let o=(a?Ti(t.useClass):t).prototype.ngOnDestroy;if(o){let a=e.destroyHooks||=[];if(!i&&t.multi){let e=a.indexOf(n);e===-1?a.push(n,[r,o]):a[e+1].push(r,o)}else a.push(n,o)}}}function Z_(e,t,n){return n&&e.componentProviders++,e.multi.push(t)-1}function Q_(e,t,n,r){for(let i=n;i<r;i++)if(t[i]===e)return i;return-1}function $_(e,t,n,r,i){return tv(this.multi,[])}function ev(e,t,n,r,i){let a=this.multi,o;if(this.providerFactory){let e=this.providerFactory.componentProviders,t=Tl(r,r[1],this.providerFactory.index,i);o=t.slice(0,e),tv(a,o);for(let n=e;n<t.length;n++)o.push(t[n])}else o=[],tv(a,o);return o}function tv(e,t){for(let n=0;n<e.length;n++){let r=e[n];t.push(r())}return t}function nv(e,t,n,r,i,a){let o=new Yc(e,n,$p,null);return o.multi=[],o.index=t,o.componentProviders=0,Z_(o,i,r&&!n),o}function rv(e,t){return n=>{n.providersResolver=(t,n)=>J_(t,n?n(e):e,!1),t&&(n.viewProvidersResolver=(e,n)=>J_(e,n?n(t):t,!0))}}function iv(e,t){let n=rs()+e,r=qo();return r[n]===Yu?wp(r,n,t()):Tp(r,n)}function av(e,t,n){return cv(qo(),rs(),e,t,n)}function ov(e,t,n,r){return lv(qo(),rs(),e,t,n,r)}function Wte(e,t,n,r,i,a,o){return Gte(qo(),rs(),e,t,n,r,i,a)}function sv(e,t){let n=e[t];return n===Yu?void 0:n}function cv(e,t,n,r,i,a){let o=t+n;return Ep(e,o,i)?wp(e,o+1,a?r.call(a,i):r(i)):sv(e,o+1)}function lv(e,t,n,r,i,a,o){let s=t+n;return Dp(e,s,i,a)?wp(e,s+2,o?r.call(o,i,a):r(i,a)):sv(e,s+2)}function Gte(e,t,n,r,i,a,o,s,c){let l=t+n;return kp(e,l,i,a,o,s)?wp(e,l+4,c?r.call(c,i,a,o,s):r(i,a,o,s)):sv(e,l+4)}function uv(e,t){let n=Jo(),r,i=e+27;n.firstCreatePass?(r=Kte(t,n.pipeRegistry),n.data[i]=r,r.onDestroy&&(n.destroyHooks??=[]).push(i,r.onDestroy)):r=n.data[i];let a=r.factory||(r.factory=pa(r.type,!0)),o=ta($p);try{let e=cl(!1),t=a();return cl(e),wo(n,qo(),i,t),t}finally{ta(o)}}function Kte(e,t){if(t)for(let n=t.length-1;n>=0;n--){let r=t[n];if(e===r.name)return r}}function dv(e,t,n){let r=e+27,i=qo(),a=Co(i,r);return pv(i,r)?cv(i,rs(),t,a.transform,n,a):a.transform(n)}function fv(e,t,n,r){let i=e+27,a=qo(),o=Co(a,i);return pv(a,i)?lv(a,rs(),t,o.transform,n,r,o):o.transform(n,r)}function pv(e,t){return e[1].data[t].pure}function mv(e,t){return ap(e,t)}var qte=(()=>{class e{applicationErrorHandler=b($s);appRef=b(Yh);taskService=b(Ms);ngZone=b(Bs);zonelessEnabled=b(uc);tracing=b(hd,{optional:!0});zoneIsDefined=typeof Zone<`u`&&!!Zone.root.run;schedulerTickApplyArgs=[{data:{__scheduler_tick__:!0}}];subscriptions=new lr;angularZoneId=this.zoneIsDefined?this.ngZone._inner?.get(Rs):null;scheduleInRootZone=!this.zonelessEnabled&&this.zoneIsDefined&&(b(dc,{optional:!0})??!1);cancelScheduledCallback=null;useMicrotaskScheduler=!1;runningTick=!1;pendingRenderTaskId=null;constructor(){this.subscriptions.add(this.appRef.afterTick.subscribe(()=>{let e=this.taskService.add();if(!this.runningTick&&(this.cleanup(),!this.zonelessEnabled||this.appRef.includeAllTestViews)){this.taskService.remove(e);return}this.switchToMicrotaskScheduler(),this.taskService.remove(e)})),this.subscriptions.add(this.ngZone.onUnstable.subscribe(()=>{this.runningTick||this.cleanup()}))}switchToMicrotaskScheduler(){this.ngZone.runOutsideAngular(()=>{let e=this.taskService.add();this.useMicrotaskScheduler=!0,queueMicrotask(()=>{this.useMicrotaskScheduler=!1,this.taskService.remove(e)})})}notify(e){if(!this.zonelessEnabled&&e===5)return;switch(e){case 0:case 2:this.appRef.dirtyFlags|=2;break;case 3:case 4:case 5:case 1:this.appRef.dirtyFlags|=4;break;case 6:this.appRef.dirtyFlags|=2;break;case 12:this.appRef.dirtyFlags|=16;break;case 13:this.appRef.dirtyFlags|=2;break;case 11:break;default:this.appRef.dirtyFlags|=8}if(this.appRef.tracingSnapshot=this.tracing?.snapshot(this.appRef.tracingSnapshot)??null,!this.shouldScheduleTick())return;let t=this.useMicrotaskScheduler?Is:Fs;this.pendingRenderTaskId=this.taskService.add(),this.cancelScheduledCallback=this.scheduleInRootZone?Zone.root.run(()=>t(()=>this.tick())):this.ngZone.runOutsideAngular(()=>t(()=>this.tick()))}shouldScheduleTick(){return!(this.appRef.destroyed||this.pendingRenderTaskId!==null||this.runningTick||this.appRef._runningTick||!this.zonelessEnabled&&this.zoneIsDefined&&Zone.current.get(`isAngularZone_ID`+this.angularZoneId))}tick(){if(this.runningTick||this.appRef.destroyed)return;if(this.appRef.dirtyFlags===0){this.cleanup();return}!this.zonelessEnabled&&this.appRef.dirtyFlags&7&&(this.appRef.dirtyFlags|=1);let e=this.taskService.add();try{this.ngZone.run(()=>{this.runningTick=!0,this.appRef._tick()},void 0,this.schedulerTickApplyArgs)}catch(e){this.applicationErrorHandler(e)}finally{this.taskService.remove(e),this.cleanup()}}ngOnDestroy(){this.subscriptions.unsubscribe(),this.cleanup()}cleanup(){if(this.runningTick=!1,this.cancelScheduledCallback?.(),this.cancelScheduledCallback=null,this.pendingRenderTaskId!==null){let e=this.pendingRenderTaskId;this.pendingRenderTaskId=null,this.taskService.remove(e)}}static ɵfac=function(t){return new(t||e)};static ɵprov=Fl({token:e,factory:e.ɵfac})}return e})();function Jte(){return[{provide:lc,useExisting:qte},{provide:Bs,useClass:Js},{provide:uc,useValue:!0}]}function Yte(){return typeof $localize<`u`&&$localize.locale||`en-US`}var hv=new Ni(``,{factory:()=>b(hv,{optional:!0,skipSelf:!0})||Yte()}),gv=class{destroyed=!1;listeners=null;errorHandler=b(Qs,{optional:!0});isEmitting=!1;hasNullListeners=!1;destroyRef=b(Os);constructor(){this.destroyRef.onDestroy(()=>{this.destroyed=!0,this.listeners=null})}subscribe(e){if(this.destroyed)throw new yi(953,!1);return(this.listeners??=[]).push(e),{unsubscribe:()=>{let t=this.listeners?this.listeners.indexOf(e):-1;t>-1&&(this.isEmitting?(this.hasNullListeners=!0,this.listeners[t]=null):this.listeners.splice(t,1))}}}emit(e){if(this.destroyed){console.warn(bi(953,!1));return}if(this.listeners===null)return;this.isEmitting=!0;let t=on(null);try{for(let t of this.listeners)try{t!==null&&t(e)}catch(e){this.errorHandler?.handleError(e)}}finally{this.hasNullListeners&&(this.hasNullListeners=!1,this.listeners&&Xte(this.listeners)),on(t),this.isEmitting=!1}}};function Xte(e){let t=e.length-1;for(;t>-1;)e[t]===null&&e.splice(t,1),t--}function X(e,t){return Dn(e,t?.equal)}function Z(e){return Jn(e)}(class e extends Error{_brand;constructor(e){super(e)}static IDLE=new e(`IDLE`);static LOADING=new e(`LOADING`)});var Zte=e=>e;function Q(e,t){return typeof e==`function`?_v(Wn(e,Zte,t?.equal),t?.debugName,t?.set):_v(Wn(e.source,e.computation,e.equal),e.debugName,e.set)}function _v(e,t,n){let r=e[an],i=e;if(n!==void 0){let t=e=>Gn(r,e);i.set=e=>n(e,t),i.update=r=>n(r(Z(e)),t)}else i.set=e=>Gn(r,e),i.update=e=>Kn(r,e);return i.asReadonly=tc.bind(e),i}var vv=!1;function Qte(){return vv}function yv(e){vv=e}function bv(e,t){let n=Object.create(wc);n.value=e,n.transformFn=t?.transform;function r(){if(ln(n),n.value===Cc)throw new yi(-950,null);return n.value}return r[an]=n,r}function xv(e){return new gv}function Sv(e,t){return bv(e,t)}function $te(e){return bv(Cc,e)}var $=(Sv.required=$te,Sv);function Cv(e,t){let n=Object.create(wc),r=new gv;n.value=e;function i(){return ln(n),wv(n.value),n.value}return i[an]=n,i.asReadonly=tc.bind(i),i.set=e=>{n.equal(n.value,e)||(Nn(n,e),r.emit(e))},i.update=e=>{wv(n.value),i.set(e(n.value))},i.subscribe=r.subscribe.bind(r),i.destroyRef=r.destroyRef,i}function wv(e){if(e===Cc)throw new yi(952,!1)}function Tv(e,t){return Cv(e,t)}function ene(e){return Cv(Cc,e)}var Ev=(Tv.required=ene,Tv);function Dv(e,t){return lh(t)}function tne(e,t){return uh(t)}var Ov=(Dv.required=tne,Dv),nne=(()=>{class e{static __NG_ELEMENT_ID__=rne}return e})();function rne(e){return ine(Yo(),qo(),(e&16)==16)}function ine(e,t,n){if(fo(e)&&!n){let n=To(e.index,t);return new np(n,n)}if(e.type&175){let e=t[15];return new np(e,t)}return null}var kv=new Ni(``),ane=new Ni(``);function Av(e){return!e.moduleRef}function one(e){let t=Av(e)?e.r3Injector:e.moduleRef.injector,n=t.get(Bs);return n.run(()=>{Av(e)?e.r3Injector.resolveInjectorInitializers():e.moduleRef.resolveInjectorInitializers();let r=t.get($s),i;if(n.runOutsideAngular(()=>{i=n.onError.subscribe({next:r})}),Av(e)){let n=()=>t.destroy(),r=e.platformInjector.get(kv);r.add(n),t.onDestroy(()=>{i.unsubscribe(),r.delete(n)})}else{let t=()=>e.moduleRef.destroy(),n=e.platformInjector.get(kv);n.add(t),e.moduleRef.onDestroy(()=>{Zh(e.allPlatformModules,e.moduleRef),i.unsubscribe(),n.delete(t)})}return cne(r,n,()=>{let n=t.get(Ms),r=n.add(),i=t.get(kh);return i.runInitializers(),i.donePromise.then(()=>{if(Lg(t.get(hv,Ig)||`en-US`),!t.get(ane,!0))return Av(e)?t.get(Yh):(e.allPlatformModules.push(e.moduleRef),e.moduleRef);if(Av(e)){let n=t.get(Yh);return e.rootComponent!==void 0&&n.bootstrap(e.rootComponent),n}return sne?.(e.moduleRef,e.allPlatformModules),e.moduleRef}).finally(()=>void n.remove(r))})})}var sne;function cne(e,t,n){try{let r=n();return ph(r)?r.catch(n=>{throw t.runOutsideAngular(()=>e(n)),n}):r}catch(n){throw t.runOutsideAngular(()=>e(n)),n}}var jv=null;function lne(e=[],t){return Es.create({name:t,providers:[{provide:Ha,useValue:`platform`},{provide:kv,useValue:new Set([()=>jv=null])},...e]})}function une(e=[]){if(jv)return jv;let t=lne(e);return jv=t,qh(),dne(t),t}function dne(e){let t=e.get(ic,null);ao(e,()=>{t?.forEach(e=>e())})}function fne(e){let{rootComponent:t,appProviders:n,platformProviders:r,platformRef:i}=e;zc(Ec.BootstrapApplicationStart);try{let e=i?.injector??une(r);return one({r3Injector:new gh({providers:[Jte(),ec,...n||[]],parent:e,debugName:``,runEnvironmentInitializers:!1}).injector,platformInjector:e,rootComponent:t})}catch(e){return Promise.reject(e)}finally{zc(Ec.BootstrapApplicationEnd)}}function Mv(e){return typeof e==`boolean`?e:e!=null&&e!==`false`}var Nv=Symbol(`NOT_SET`),Pv=new Set,pne={...Fn,kind:`afterRenderEffectPhase`,consumerIsAlwaysLive:!0,consumerAllowSignalWrites:!0,value:Nv,cleanup:null,consumerMarkedDirty(){if(this.sequence.impl.executing){if(this.sequence.lastPhase===null||this.sequence.lastPhase<this.phase)return;this.sequence.erroredOrDestroyed=!0}this.sequence.scheduler.notify(7)},phaseFn(e){if(this.sequence.lastPhase=this.phase,!this.dirty||(this.dirty=!1,this.value!==Nv&&!bn(this)))return this.signal;try{for(let e of this.cleanup??Pv)e()}finally{this.cleanup?.clear()}let t=[];e!==void 0&&t.push(e),t.push(this.registerCleanupFn);let n=gn(this),r;try{r=this.userFn.apply(null,t)}finally{vn(this,n)}return(this.value===Nv||!this.equal(this.value,r))&&(this.value=r,this.version++),this.signal}},mne=class extends xd{scheduler;lastPhase=null;nodes=[void 0,void 0,void 0,void 0];onDestroyFns=null;constructor(e,t,n,r,i,a=null){super(e,[void 0,void 0,void 0,void 0],n,!1,i.get(Os),a),this.scheduler=r;for(let e of yd){let n=t[e];if(n===void 0)continue;let r=Object.create(pne);r.sequence=this,r.phase=e,r.userFn=n,r.dirty=!0,r.signal=()=>(ln(r),r.value),r.signal[an]=r,r.registerCleanupFn=e=>(r.cleanup??=new Set).add(e),this.nodes[e]=r,this.hooks[e]=e=>r.phaseFn(e)}}afterRun(){super.afterRun(),this.lastPhase=null}destroy(){if(this.onDestroyFns!==null)for(let e of this.onDestroyFns)e();super.destroy();for(let e of this.nodes)if(e)try{for(let t of e.cleanup??Pv)t()}finally{xn(e)}}};function Fv(e,t){let n=t?.injector??b(Es),r=n.get(lc),i=n.get(vd),a=n.get(hd,null,{optional:!0});i.impl??=n.get(bd);let o=e;typeof o==`function`&&(o={mixedReadWrite:e});let s=n.get(sc,null,{optional:!0}),c=new mne(i.impl,[o.earlyRead,o.write,o.mixedReadWrite,o.read],s?.view,r,n,a?.snapshot(null));return i.impl.register(c),c}var Iv=null;function Lv(){return Iv}function hne(e){Iv??=e}var gne=class{},Rv=(function(e){return e[e.Format=0]=`Format`,e[e.Standalone=1]=`Standalone`,e})(Rv||{}),zv=(function(e){return e[e.Narrow=0]=`Narrow`,e[e.Abbreviated=1]=`Abbreviated`,e[e.Wide=2]=`Wide`,e[e.Short=3]=`Short`,e})(zv||{}),Bv=(function(e){return e[e.Short=0]=`Short`,e[e.Medium=1]=`Medium`,e[e.Long=2]=`Long`,e[e.Full=3]=`Full`,e})(Bv||{}),Vv={Decimal:0,Group:1,List:2,PercentSign:3,PlusSign:4,MinusSign:5,Exponential:6,SuperscriptingExponent:7,PerMille:8,Infinity:9,NaN:10,TimeSeparator:11,CurrencyDecimal:12,CurrencyGroup:13};function _ne(e){return Mg(e)[Pg.LocaleId]}function vne(e,t,n){let r=Mg(e);return qv(qv([r[Pg.DayPeriodsFormat],r[Pg.DayPeriodsStandalone]],t),n)}function yne(e,t,n){let r=Mg(e);return qv(qv([r[Pg.DaysFormat],r[Pg.DaysStandalone]],t),n)}function bne(e,t,n){let r=Mg(e);return qv(qv([r[Pg.MonthsFormat],r[Pg.MonthsStandalone]],t),n)}function xne(e,t){let n=Mg(e)[Pg.Eras];return qv(n,t)}function Hv(e,t){return qv(Mg(e)[Pg.DateFormat],t)}function Uv(e,t){return qv(Mg(e)[Pg.TimeFormat],t)}function Wv(e,t){let n=Mg(e)[Pg.DateTimeFormat];return qv(n,t)}function Gv(e,t){let n=Mg(e),r=n[Pg.NumberSymbols][t];if(r===void 0){if(t===Vv.CurrencyDecimal)return n[Pg.NumberSymbols][Vv.Decimal];if(t===Vv.CurrencyGroup)return n[Pg.NumberSymbols][Vv.Group]}return r}function Kv(e){if(!e[Pg.ExtraData])throw new yi(2303,!1)}function Sne(e){let t=Mg(e);return Kv(t),(t[Pg.ExtraData][2]||[]).map(e=>typeof e==`string`?Jv(e):[Jv(e[0]),Jv(e[1])])}function Cne(e,t,n){let r=Mg(e);return Kv(r),qv(qv([r[Pg.ExtraData][0],r[Pg.ExtraData][1]],t)||[],n)||[]}function qv(e,t){for(let n=t;n>-1;n--)if(e[n]!==void 0)return e[n];throw new yi(2304,!1)}function Jv(e){let[t,n]=e.split(`:`);return{hours:+t,minutes:+n}}var wne=/^(\d{4,})-?(\d\d)-?(\d\d)(?:T(\d\d)(?::?(\d\d)(?::?(\d\d)(?:\.(\d+))?)?)?(Z|([+-])(\d\d):?(\d\d))?)?$/,Yv=Object.create(null),Tne=/((?:[^BEGHLMOSWYZabcdhmswyz']+)|(?:'(?:[^']|'')*')|(?:G{1,5}|y{1,4}|Y{1,4}|M{1,5}|L{1,5}|w{1,2}|W{1}|d{1,2}|E{1,6}|c{1,6}|a{1,5}|b{1,5}|B{1,5}|h{1,2}|H{1,2}|m{1,2}|s{1,2}|S{1,3}|z{1,4}|Z{1,5}|O{1,4}))([\s\S]*)/,Ene=256;function Dne(e,t,n,r){let i=Lne(e);One(t),t=Zv(n,t)||t;let a=[],o;for(;t;)if(o=Tne.exec(t),o){a=a.concat(o.slice(1));let e=a.pop();if(!e)break;t=e}else{a.push(t);break}let s=i.getTimezoneOffset();r&&(s=cy(r,s),i=Ine(i,r));let c=``;return a.forEach(e=>{let t=Pne(e);c+=t?t(i,n,s):e===`''`?`'`:e.replace(/(^'|'$)/g,``).replace(/''/g,`'`)}),c}function One(e){if(e.length>Ene)throw new yi(2300,!1)}function Xv(e,t,n){let r=new Date(0);return r.setFullYear(e,t,n),r.setHours(0,0,0),r}function Zv(e,t){let n=_ne(e);if(Yv[n]??=Object.create(null),Yv[n][t])return Yv[n][t];let r=``;switch(t){case`shortDate`:r=Hv(e,Bv.Short);break;case`mediumDate`:r=Hv(e,Bv.Medium);break;case`longDate`:r=Hv(e,Bv.Long);break;case`fullDate`:r=Hv(e,Bv.Full);break;case`shortTime`:r=Uv(e,Bv.Short);break;case`mediumTime`:r=Uv(e,Bv.Medium);break;case`longTime`:r=Uv(e,Bv.Long);break;case`fullTime`:r=Uv(e,Bv.Full);break;case`short`:let t=Zv(e,`shortTime`),n=Zv(e,`shortDate`);r=Qv(Wv(e,Bv.Short),[t,n]);break;case`medium`:let i=Zv(e,`mediumTime`),a=Zv(e,`mediumDate`);r=Qv(Wv(e,Bv.Medium),[i,a]);break;case`long`:let o=Zv(e,`longTime`),s=Zv(e,`longDate`);r=Qv(Wv(e,Bv.Long),[o,s]);break;case`full`:let c=Zv(e,`fullTime`),l=Zv(e,`fullDate`);r=Qv(Wv(e,Bv.Full),[c,l])}return r&&(Yv[n][t]=r),r}function Qv(e,t){return t&&(e=e.replace(/\{([^}]+)}/g,function(e,n){return Object.hasOwn(t,n)?t[n]:e})),e}function $v(e,t,n=`-`,r,i){let a=``;(e<0||i&&e<=0)&&(i?e=-e+1:(e=-e,a=n));let o=String(e);for(;o.length<t;)o=`0`+o;return r&&(o=o.slice(o.length-t)),a+o}function kne(e,t){return $v(e,3).substring(0,t)}function ey(e,t,n=0,r=!1,i=!1){return function(a,o){let s=Ane(e,a);if((n>0||s>-n)&&(s+=n),e===3)s===0&&n===-12&&(s=12);else if(e===6)return kne(s,t);let c=Gv(o,Vv.MinusSign);return $v(s,t,c,r,i)}}function Ane(e,t){switch(e){case 0:return t.getFullYear();case 1:return t.getMonth();case 2:return t.getDate();case 3:return t.getHours();case 4:return t.getMinutes();case 5:return t.getSeconds();case 6:return t.getMilliseconds();case 7:return t.getDay();default:throw new yi(2301,!1)}}function ty(e,t,n=Rv.Format,r=!1){return function(i,a){return jne(i,a,e,t,n,r)}}function jne(e,t,n,r,i,a){switch(n){case 2:return bne(t,i,r)[e.getMonth()];case 1:return yne(t,i,r)[e.getDay()];case 0:let n=e.getHours(),o=e.getMinutes();if(a){let e=Sne(t),a=Cne(t,i,r),s=e.findIndex(e=>{if(Array.isArray(e)){let[t,r]=e,i=n>=t.hours&&o>=t.minutes,a=n<r.hours||n===r.hours&&o<r.minutes;if(t.hours<r.hours){if(i&&a)return!0}else if(i||a)return!0}else if(e.hours===n&&e.minutes===o)return!0;return!1});if(s!==-1)return a[s]}return vne(t,i,r)[n<12?0:1];case 3:return xne(t,r)[e.getFullYear()<=0?0:1];default:throw new yi(2302,!1)}}function ny(e){return function(t,n,r){let i=-1*r,a=Gv(n,Vv.MinusSign),o=i>0?Math.floor(i/60):Math.ceil(i/60);switch(e){case 0:return(i>=0?`+`:``)+$v(o,2,a)+$v(Math.abs(i%60),2,a);case 1:return`GMT`+(i>=0?`+`:``)+$v(o,1,a);case 2:return`GMT`+(i>=0?`+`:``)+$v(o,2,a)+`:`+$v(Math.abs(i%60),2,a);case 3:return r===0?`Z`:(i>=0?`+`:``)+$v(o,2,a)+`:`+$v(Math.abs(i%60),2,a);default:throw new yi(2310,!1)}}}var Mne=0,ry=4;function Nne(e){let t=Xv(e,Mne,1).getDay();return Xv(e,0,1+(t<=ry?ry:11)-t)}function iy(e){let t=e.getDay(),n=t===0?-3:ry-t;return Xv(e.getFullYear(),e.getMonth(),e.getDate()+n)}function ay(e,t=!1){return function(n,r){let i;if(t){let e=new Date(n.getFullYear(),n.getMonth(),1).getDay()-1,t=n.getDate();i=1+Math.floor((t+e)/7)}else{let e=iy(n),t=Nne(e.getFullYear()),r=e.getTime()-t.getTime();i=1+Math.round(r/6048e5)}return $v(i,e,Gv(r,Vv.MinusSign))}}function oy(e,t=!1){return function(n,r){return $v(iy(n).getFullYear(),e,Gv(r,Vv.MinusSign),t)}}var sy=Object.create(null);function Pne(e){if(sy[e])return sy[e];let t;switch(e){case`G`:case`GG`:case`GGG`:t=ty(3,zv.Abbreviated);break;case`GGGG`:t=ty(3,zv.Wide);break;case`GGGGG`:t=ty(3,zv.Narrow);break;case`y`:t=ey(0,1,0,!1,!0);break;case`yy`:t=ey(0,2,0,!0,!0);break;case`yyy`:t=ey(0,3,0,!1,!0);break;case`yyyy`:t=ey(0,4,0,!1,!0);break;case`Y`:t=oy(1);break;case`YY`:t=oy(2,!0);break;case`YYY`:t=oy(3);break;case`YYYY`:t=oy(4);break;case`M`:case`L`:t=ey(1,1,1);break;case`MM`:case`LL`:t=ey(1,2,1);break;case`MMM`:t=ty(2,zv.Abbreviated);break;case`MMMM`:t=ty(2,zv.Wide);break;case`MMMMM`:t=ty(2,zv.Narrow);break;case`LLL`:t=ty(2,zv.Abbreviated,Rv.Standalone);break;case`LLLL`:t=ty(2,zv.Wide,Rv.Standalone);break;case`LLLLL`:t=ty(2,zv.Narrow,Rv.Standalone);break;case`w`:t=ay(1);break;case`ww`:t=ay(2);break;case`W`:t=ay(1,!0);break;case`d`:t=ey(2,1);break;case`dd`:t=ey(2,2);break;case`c`:case`cc`:t=ey(7,1);break;case`ccc`:t=ty(1,zv.Abbreviated,Rv.Standalone);break;case`cccc`:t=ty(1,zv.Wide,Rv.Standalone);break;case`ccccc`:t=ty(1,zv.Narrow,Rv.Standalone);break;case`cccccc`:t=ty(1,zv.Short,Rv.Standalone);break;case`E`:case`EE`:case`EEE`:t=ty(1,zv.Abbreviated);break;case`EEEE`:t=ty(1,zv.Wide);break;case`EEEEE`:t=ty(1,zv.Narrow);break;case`EEEEEE`:t=ty(1,zv.Short);break;case`a`:case`aa`:case`aaa`:t=ty(0,zv.Abbreviated);break;case`aaaa`:t=ty(0,zv.Wide);break;case`aaaaa`:t=ty(0,zv.Narrow);break;case`b`:case`bb`:case`bbb`:t=ty(0,zv.Abbreviated,Rv.Standalone,!0);break;case`bbbb`:t=ty(0,zv.Wide,Rv.Standalone,!0);break;case`bbbbb`:t=ty(0,zv.Narrow,Rv.Standalone,!0);break;case`B`:case`BB`:case`BBB`:t=ty(0,zv.Abbreviated,Rv.Format,!0);break;case`BBBB`:t=ty(0,zv.Wide,Rv.Format,!0);break;case`BBBBB`:t=ty(0,zv.Narrow,Rv.Format,!0);break;case`h`:t=ey(3,1,-12);break;case`hh`:t=ey(3,2,-12);break;case`H`:t=ey(3,1);break;case`HH`:t=ey(3,2);break;case`m`:t=ey(4,1);break;case`mm`:t=ey(4,2);break;case`s`:t=ey(5,1);break;case`ss`:t=ey(5,2);break;case`S`:t=ey(6,1);break;case`SS`:t=ey(6,2);break;case`SSS`:t=ey(6,3);break;case`Z`:case`ZZ`:case`ZZZ`:t=ny(0);break;case`ZZZZZ`:t=ny(3);break;case`O`:case`OO`:case`OOO`:case`z`:case`zz`:case`zzz`:t=ny(1);break;case`OOOO`:case`ZZZZ`:case`zzzz`:t=ny(2);break;default:return null}return sy[e]=t,t}function cy(e,t){e=e.replace(/:/g,``);let n=Date.parse(`Jan 01, 1970 00:00:00 `+e)/6e4;return isNaN(n)?t:n}function Fne(e,t){return e=new Date(e.getTime()),e.setMinutes(e.getMinutes()+t),e}function Ine(e,t,n){let r=e.getTimezoneOffset();return Fne(e,-1*(cy(t,r)-r))}function Lne(e){if(ly(e))return e;if(typeof e==`number`&&!isNaN(e))return new Date(e);if(typeof e==`string`){if(e=e.trim(),/^(\d{4}(-\d{1,2}(-\d{1,2})?)?)$/.test(e)){let[t,n=1,r=1]=e.split(`-`).map(e=>+e);return Xv(t,n-1,r)}let t=parseFloat(e);if(!isNaN(e-t))return new Date(t);let n;if(n=e.match(wne))return Rne(n)}let t=new Date(e);if(!ly(t))throw new yi(2311,!1);return t}function Rne(e){let t=new Date(0),n=0,r=0,i=e[8]?t.setUTCFullYear:t.setFullYear,a=e[8]?t.setUTCHours:t.setHours;e[9]&&(n=Number(e[9]+e[10]),r=Number(e[9]+e[11])),i.call(t,Number(e[1]),Number(e[2])-1,Number(e[3]));let o=Number(e[4]||0)-n,s=Number(e[5]||0)-r,c=Number(e[6]||0),l=Math.floor(parseFloat(`0.`+(e[7]||0))*1e3);return a.call(t,o,s,c,l),t}function ly(e){return e instanceof Date&&!isNaN(e.valueOf())}var uy=(()=>{class e{_viewContainerRef;_viewRef=null;ngTemplateOutletContext=null;ngTemplateOutlet=null;ngTemplateOutletInjector=null;injector=b(Es);constructor(e){this._viewContainerRef=e}ngOnChanges(e){if(this._shouldRecreateView(e)){let e=this._viewContainerRef;if(this._viewRef&&e.remove(e.indexOf(this._viewRef)),!this.ngTemplateOutlet){this._viewRef=null;return}let t=this._createContextForwardProxy();this._viewRef=e.createEmbeddedView(this.ngTemplateOutlet,t,{injector:this._getInjector()})}}_getInjector(){return this.ngTemplateOutletInjector===`outlet`?this.injector:this.ngTemplateOutletInjector??void 0}_shouldRecreateView(e){return!!e.ngTemplateOutlet||!!e.ngTemplateOutletInjector}_createContextForwardProxy(){return new Proxy({},{set:(e,t,n)=>this.ngTemplateOutletContext?Reflect.set(this.ngTemplateOutletContext,t,n):!1,get:(e,t,n)=>{if(this.ngTemplateOutletContext)return Reflect.get(this.ngTemplateOutletContext,t,n)}})}static ɵfac=function(t){return new(t||e)($p(Nm))};static ɵdir=Sh({type:e,selectors:[[``,`ngTemplateOutlet`,``]],inputs:{ngTemplateOutletContext:`ngTemplateOutletContext`,ngTemplateOutlet:`ngTemplateOutlet`,ngTemplateOutletInjector:`ngTemplateOutletInjector`},features:[Ac]})}return e})();function zne(e,t){return new yi(2100,!1)}var Bne=`mediumDate`,Vne=new Ni(``),Hne=new Ni(``),dy=(()=>{class e{locale;defaultTimezone;defaultOptions;constructor(e,t,n){this.locale=e,this.defaultTimezone=t,this.defaultOptions=n}transform(t,n,r,i){if(t==null||t===``||t!==t)return null;try{let e=n??this.defaultOptions?.dateFormat??Bne,a=r??this.defaultOptions?.timezone??this.defaultTimezone??void 0;return Dne(t,e,i||this.locale,a)}catch(t){throw zne(e,t.message)}}static ɵfac=function(t){return new(t||e)($p(hv,16),$p(Vne,24),$p(Hne,24))};static ɵpipe=Ch({name:`date`,type:e,pure:!0})}return e})(),fy=(()=>{class e{transform(e){return JSON.stringify(e,null,2)}static ɵfac=function(t){return new(t||e)};static ɵpipe=Ch({name:`json`,type:e,pure:!1})}return e})();function Une(e,t){t=encodeURIComponent(t);for(let n of e.split(`;`)){let e=n.indexOf(`=`),[r,i]=e==-1?[n,``]:[n.slice(0,e),n.slice(e+1)];if(r.trim()!==t)continue;let a=i;try{a=decodeURIComponent(i)}catch{}return a.length>1&&a[0]===`"`&&a[a.length-1]===`"`&&(a=a.slice(1,-1)),a}return null}var Wne=`browser`,py=class{_doc;constructor(e){this._doc=e}manager},my=(()=>{class e extends py{constructor(e){super(e)}supports(e){return!0}addEventListener(e,t,n,r){return e.addEventListener(t,n,r),()=>this.removeEventListener(e,t,n,r)}removeEventListener(e,t,n,r){return e.removeEventListener(t,n,r)}static ɵfac=function(t){return new(t||e)(ca(Ds))};static ɵprov=Di({token:e,factory:e.ɵfac})}return e})(),hy=new Ni(``),gy=(()=>{class e{_zone;_plugins;_eventNameToPlugin=new Map;constructor(e,t){this._zone=t,e.forEach(e=>{e.manager=this});let n=e.filter(e=>!(e instanceof my));this._plugins=n.slice().reverse();let r=e.find(e=>e instanceof my);r&&this._plugins.push(r)}addEventListener(e,t,n,r){return this._findPluginFor(t).addEventListener(e,t,n,r)}getZone(){return this._zone}_findPluginFor(e){let t=this._eventNameToPlugin.get(e);if(t)return t;if(t=this._plugins.find(t=>t.supports(e)),!t)throw new yi(-5101,!1);return this._eventNameToPlugin.set(e,t),t}static ɵfac=function(t){return new(t||e)(ca(hy),ca(Bs))};static ɵprov=Di({token:e,factory:e.ɵfac})}return e})(),_y=`ng-app-id`;function vy(e){for(let t of e)t.remove()}function yy(e,t){let n=t.createElement(`style`);return n.textContent=e,n}function Gne(e,t,n,r){let i=e.head?.querySelectorAll(`style[${_y}="${t}"],link[${_y}="${t}"]`);if(!i||i.length===0)return!1;for(let e of i)e.removeAttribute(_y),e instanceof HTMLLinkElement?r.set(e.href.slice(e.href.lastIndexOf(`/`)+1),{usage:0,elements:[e]}):e.textContent&&n.set(e.textContent,{usage:0,elements:[e]});return!0}function by(e,t){let n=t.createElement(`link`);return n.setAttribute(`rel`,`stylesheet`),n.setAttribute(`href`,e),n}var xy=(()=>{class e{doc;appId;nonce;inline=new Map;external=new Map;hosts=new Set;constructor(e,t,n,r={}){this.doc=e,this.appId=t,this.nonce=n,Gne(e,t,this.inline,this.external)&&this.hosts.add(e.head)}addStyles(e,t){for(let t of e)this.addUsage(t,this.inline,yy);t?.forEach(e=>this.addUsage(e,this.external,by))}removeStyles(e,t){for(let t of e)this.removeUsage(t,this.inline);t?.forEach(e=>this.removeUsage(e,this.external))}addUsage(e,t,n){let r=t.get(e);r?r.usage++:t.set(e,{usage:1,elements:[...this.hosts].map(t=>this.addElement(t,n(e,this.doc)))})}removeUsage(e,t){let n=t.get(e);n&&(n.usage--,n.usage<=0&&(vy(n.elements),t.delete(e)))}ngOnDestroy(){for(let[,{elements:e}]of[...this.inline,...this.external])vy(e);this.hosts.clear()}addHost(e){if(!this.hosts.has(e)){this.hosts.add(e);for(let[t,{elements:n}]of this.inline)n.push(this.addElement(e,yy(t,this.doc)));for(let[t,{elements:n}]of this.external)n.push(this.addElement(e,by(t,this.doc)))}}removeHost(e){this.hosts.delete(e);for(let t of[...this.inline.values(),...this.external.values()]){let n=[];for(let r of t.elements)r.parentNode===e?r.remove():n.push(r);t.elements=n}}addElement(e,t){return this.nonce&&t.setAttribute(`nonce`,this.nonce),e.appendChild(t)}static ɵfac=function(t){return new(t||e)(ca(Ds),ca(nc),ca(oc,8),ca(ac))};static ɵprov=Di({token:e,factory:e.ɵfac})}return e})(),Sy={svg:`http://www.w3.org/2000/svg`,xhtml:`http://www.w3.org/1999/xhtml`,xlink:`http://www.w3.org/1999/xlink`,xml:`http://www.w3.org/XML/1998/namespace`,xmlns:`http://www.w3.org/2000/xmlns/`,math:`http://www.w3.org/1998/Math/MathML`},Cy=/%COMP%/g,wy=`%COMP%`,Kne=`_nghost-${wy}`,qne=`_ngcontent-${wy}`,Jne=!0,Yne=new Ni(``,{factory:()=>Jne}),Xne=new Ni(``);function Zne(e){return qne.replace(Cy,e)}function Qne(e){return Kne.replace(Cy,e)}function Ty(e,t){return t.map(t=>t.replace(Cy,e))}var Ey=(()=>{class e{eventManager;sharedStylesHost;appId;removeStylesOnCompDestroy;doc;ngZone;nonce;tracingService;rendererByCompId=new Map;defaultRenderer;cssVarNamespace;constructor(e,t,n,r,i,a,o=null,s=null,c=null){this.eventManager=e,this.sharedStylesHost=t,this.appId=n,this.removeStylesOnCompDestroy=r,this.doc=i,this.ngZone=a,this.nonce=o,this.tracingService=s,this.cssVarNamespace=c??``,this.defaultRenderer=new Dy(e,i,a,this.tracingService,this.cssVarNamespace)}createRenderer(e,t){if(!e||!t)return this.defaultRenderer;let n=this.getOrCreateRenderer(e,t);return n instanceof jy?n.applyToHost(e):n instanceof Ay&&n.applyStyles(),n}getOrCreateRenderer(e,t){let n=this.rendererByCompId,r=n.get(t.id);if(!r){let i=this.doc,a=this.ngZone,o=this.eventManager,s=this.sharedStylesHost,c=this.removeStylesOnCompDestroy,l=this.tracingService;switch(t.encapsulation){case pu.Emulated:r=new jy(o,s,t,this.appId,c,i,a,l,this.cssVarNamespace);break;case pu.ShadowDom:return new ky(o,e,t,i,a,this.nonce,l,this.cssVarNamespace,s);case pu.ExperimentalIsolatedShadowDom:return new ky(o,e,t,i,a,this.nonce,l,this.cssVarNamespace);default:r=new Ay(o,s,t,c,i,a,l,this.cssVarNamespace)}n.set(t.id,r)}return r}ngOnDestroy(){this.rendererByCompId.clear()}componentReplaced(e){this.rendererByCompId.delete(e)}static ɵfac=function(t){return new(t||e)(ca(gy),ca(Zp),ca(nc),ca(Yne),ca(Ds),ca(Bs),ca(oc),ca(hd,8),ca(Xne,8))};static ɵprov=Di({token:e,factory:e.ɵfac})}return e})(),Dy=class{eventManager;doc;ngZone;tracingService;cssVarNamespace;data=Object.create(null);throwOnSyntheticProps=!0;constructor(e,t,n,r,i=``){this.eventManager=e,this.doc=t,this.ngZone=n,this.tracingService=r,this.cssVarNamespace=i}destroy(){}destroyNode=null;createElement(e,t){return t?this.doc.createElementNS(Sy[t]||t,e):this.doc.createElement(e)}createComment(e){return this.doc.createComment(e)}createText(e){return this.doc.createTextNode(e)}appendChild(e,t){(Oy(e)?e.content:e).appendChild(t)}insertBefore(e,t,n){if(e){let r=Oy(e)?e.content:e;if(n!=null&&n.parentNode!==r)throw new yi(-5106,!1);r.insertBefore(t,n)}}removeChild(e,t){t.remove()}selectRootElement(e,t){let n=typeof e==`string`?this.doc.querySelector(e):e;if(!n)throw new yi(-5104,!1);return t||(n.textContent=``),n}parentNode(e){return e.parentNode}nextSibling(e){return e.nextSibling}setAttribute(e,t,n,r){if(r){t=r+`:`+t;let i=Sy[r];i?e.setAttributeNS(i,t,n):e.setAttribute(t,n)}else e.setAttribute(t,n)}removeAttribute(e,t,n){if(n){let r=Sy[n];r?e.removeAttributeNS(r,t):e.removeAttribute(`${n}:${t}`)}else e.removeAttribute(t)}addClass(e,t){e.classList.add(t)}removeClass(e,t){e.classList.remove(t)}setStyle(e,t,n,r){let i=t.startsWith(`--`);i&&(t=t.replace(`%NS%`,this.cssVarNamespace)),i||r&(Xu.DashCase|Xu.Important)?e.style.setProperty(t,n,r&Xu.Important?`important`:``):e.style[t]=n}removeStyle(e,t,n){let r=t.startsWith(`--`);r&&(t=t.replace(`%NS%`,this.cssVarNamespace)),r||n&Xu.DashCase?e.style.removeProperty(t):e.style[t]=``}setProperty(e,t,n){e!=null&&(e[t]=n)}setValue(e,t){e.nodeValue=t}listen(e,t,n,r){if(typeof e==`string`&&(e=Lv().getGlobalEventTarget(this.doc,e),!e))throw new yi(-5102,!1);let i=this.decoratePreventDefault(n);return this.tracingService?.wrapEventListener&&(i=this.tracingService.wrapEventListener(e,t,i)),this.eventManager.addEventListener(e,t,i,r)}decoratePreventDefault(e){return t=>{if(t===`__ngUnwrap__`)return e;e(t)===!1&&t.preventDefault()}}};function Oy(e){return e.tagName===`TEMPLATE`&&e.content!==void 0}var ky=class extends Dy{hostEl;sharedStylesHost;shadowRoot;constructor(e,t,n,r,i,a,o,s,c){super(e,r,i,o,s),this.hostEl=t,this.sharedStylesHost=c,this.shadowRoot=t.attachShadow({mode:`open`}),this.sharedStylesHost&&this.sharedStylesHost.addHost(this.shadowRoot);let l=n.styles;l=Ty(n.id,l).map(e=>e.replace(/%NS%/g,s));for(let e of l){let t=document.createElement(`style`);a&&t.setAttribute(`nonce`,a),t.textContent=e,this.shadowRoot.appendChild(t)}let u=n.getExternalStyles?.();if(u)for(let e of u){let t=by(e,r);a&&t.setAttribute(`nonce`,a),this.shadowRoot.appendChild(t)}}nodeOrShadowRoot(e){return e===this.hostEl?this.shadowRoot:e}appendChild(e,t){return super.appendChild(this.nodeOrShadowRoot(e),t)}insertBefore(e,t,n){return super.insertBefore(this.nodeOrShadowRoot(e),t,n)}removeChild(e,t){return super.removeChild(null,t)}parentNode(e){return this.nodeOrShadowRoot(super.parentNode(this.nodeOrShadowRoot(e)))}destroy(){this.sharedStylesHost&&this.sharedStylesHost.removeHost(this.shadowRoot)}},Ay=class extends Dy{sharedStylesHost;removeStylesOnCompDestroy;styles;styleUrls;constructor(e,t,n,r,i,a,o,s,c){super(e,i,a,o,s),this.sharedStylesHost=t,this.removeStylesOnCompDestroy=r;let l=n.styles,u=c?Ty(c,l):l;this.styles=u.map(e=>e.replace(/%NS%/g,s)),this.styleUrls=n.getExternalStyles?.(c)}applyStyles(){this.sharedStylesHost.addStyles(this.styles,this.styleUrls)}destroy(){this.removeStylesOnCompDestroy&&rd.size===0&&this.sharedStylesHost.removeStyles(this.styles,this.styleUrls)}},jy=class extends Ay{contentAttr;hostAttr;constructor(e,t,n,r,i,a,o,s,c){let l=r+`-`+n.id;super(e,t,n,i,a,o,s,c,l),this.contentAttr=Zne(l),this.hostAttr=Qne(l)}applyToHost(e){this.applyStyles(),this.setAttribute(e,this.hostAttr,``)}createElement(e,t){let n=super.createElement(e,t);return super.setAttribute(n,this.contentAttr,``),n}},$ne=class e extends gne{supportsDOMEvents=!0;static makeCurrent(){hne(new e)}onAndCancel(e,t,n,r){return e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}}dispatchEvent(e,t){e.dispatchEvent(t)}remove(e){e.remove()}createElement(e,t){return t||=this.getDefaultDocument(),t.createElement(e)}createHtmlDocument(){return document.implementation.createHTMLDocument(`fakeTitle`)}getDefaultDocument(){return document}isElementNode(e){return e.nodeType===Node.ELEMENT_NODE}isShadowRoot(e){return e instanceof DocumentFragment}getGlobalEventTarget(e,t){return t===`window`?window:t===`document`?e:t===`body`?e.body:null}getBaseHref(e){let t=ere();return t==null?null:tre(t)}resetBaseElement(){My=null}getUserAgent(){return window.navigator.userAgent}getCookie(e){return Une(document.cookie,e)}},My=null;function ere(){return My||=document.head.querySelector(`base`),My?My.getAttribute(`href`):null}function tre(e){return new URL(e,document.baseURI).pathname}var Ny=[`alt`,`control`,`meta`,`shift`],nre={"\b":`Backspace`,"	":`Tab`,"":`Delete`,"\x1B":`Escape`,Del:`Delete`,Esc:`Escape`,Left:`ArrowLeft`,Right:`ArrowRight`,Up:`ArrowUp`,Down:`ArrowDown`,Menu:`ContextMenu`,Scroll:`ScrollLock`,Win:`OS`},rre={alt:e=>e.altKey,control:e=>e.ctrlKey,meta:e=>e.metaKey,shift:e=>e.shiftKey},ire=(()=>{class e extends py{constructor(e){super(e)}supports(t){return e.parseEventName(t)!=null}addEventListener(t,n,r,i){let a=e.parseEventName(n),o=e.eventCallback(a.fullKey,r,this.manager.getZone());return this.manager.getZone().runOutsideAngular(()=>Lv().onAndCancel(t,a.domEventName,o,i))}static parseEventName(t){let n=t.toLowerCase().split(`.`),r=n.shift();if(n.length===0||r!==`keydown`&&r!==`keyup`)return null;let i=e._normalizeKey(n.pop()),a=``,o=n.indexOf(`code`);if(o>-1&&(n.splice(o,1),a=`code.`),Ny.forEach(e=>{let t=n.indexOf(e);t>-1&&(n.splice(t,1),a+=e+`.`)}),a+=i,n.length!=0||i.length===0)return null;let s={};return s.domEventName=r,s.fullKey=a,s}static matchEventFullKeyCode(e,t){let n=nre[e.key]||e.key,r=``;return t.indexOf(`code.`)>-1&&(n=e.code,r=`code.`),n==null||!n?!1:(n=n.toLowerCase(),n===` `?n=`space`:n===`.`&&(n=`dot`),Ny.forEach(t=>{if(t!==n){let n=rre[t];n(e)&&(r+=t+`.`)}}),r+=n,r===t)}static eventCallback(t,n,r){return i=>{e.matchEventFullKeyCode(i,t)&&r.runGuarded(()=>n(i))}}static _normalizeKey(e){return e===`esc`?`escape`:e}static ɵfac=function(t){return new(t||e)(ca(Ds))};static ɵprov=Di({token:e,factory:e.ɵfac})}return e})();async function are(e,t,n){return fne({rootComponent:e,...ore(t,n)})}function ore(e,t){return{platformRef:t?.platformRef,appProviders:[...dre,...e?.providers??[]],platformProviders:ure}}function sre(){$ne.makeCurrent()}function cre(){return new Qs}function lre(){return tu(document),document}var ure=[{provide:ac,useValue:Wne},{provide:ic,useValue:sre,multi:!0},{provide:Ds,useFactory:lre}],dre=[{provide:Ha,useValue:`root`},{provide:Qs,useFactory:cre},{provide:hy,useClass:my,multi:!0},{provide:hy,useClass:ire,multi:!0},Ey,{provide:Zp,useClass:xy},{provide:xy,useExisting:Zp},gy,{provide:_p,useExisting:Ey},[]];function Py(e,t){let n=`\x1B[${e}m`,r=`\x1B[${t}m`;return((e,...t)=>{if(Array.isArray(e)&&`raw`in e){let i=e,a=``;for(let e=0;e<i.length;e++)a+=i[e],e<t.length&&(a+=String(t[e]));return`${n}${a}${r}`}return`${n}${String(e)}${r}`})}var fre={blue:Py(34,39),cyan:Py(36,39),gray:Py(90,39),green:Py(32,39),red:Py(31,39),yellow:Py(33,39),bold:Py(1,22),dim:Py(2,22),reset:Py(0,0),underline:Py(4,24)};function Fy(e,...t){return typeof e==`function`?e(...t):e}var pre=Error.captureStackTrace,mre=class e extends Error{name;code;docs;fix;sources;data;get why(){return this.message}constructor(t,n=e){super(t.why,{cause:t.cause}),this.code=this.name=t.code,this.fix=t.fix,this.docs=t.docs,this.sources=t.sources,this.data=t.data,pre?.(this,n)}toJSON(){return{name:this.name,why:this.why,fix:this.fix,docs:this.docs,sources:this.sources,cause:this.cause,data:this.data,stack:this.stack}}};function hre(e,t){return typeof e==`string`?`${e}/${t.toLowerCase()}`:e?.(t)}function gre(e){let t=e.reporters??[],n={},{docsBase:r}=e;for(let i of Object.keys(e.codes)){let a=e.codes[i],o=a.docs===!1?void 0:a.docs||hre(r,i),s=(e={},n={})=>{let r=new mre({code:i,why:Fy(a.why,e),fix:Fy(a.fix,e),docs:o,cause:e.cause,sources:e.sources,data:Fy(a.data,e)},s);for(let e of t)e(r,n);return r};n[i]=s}return n}function _re(e){return t=>{let n=`${e.bold(e.red(`[${t.name}]`))} ${t.message}`,r=[];return t.fix&&r.push(`${e.dim(`fix:`)} ${t.fix}`),t.sources?.length&&r.push(`${e.dim(`sources:`)} ${t.sources.join(`, `)}`),t.docs&&r.push(`${e.dim(`see:`)} ${e.cyan(t.docs)}`),r.length===0?n:[n,...r.map((t,n)=>`${e.dim(n<r.length-1?`├▶`:`╰▶`)} ${t}`)].join(`
+`)}}var Iy={bus:{agentManifestChanged:`agent:manifest:changed`,agentToolRegistered:`agent:tool:registered`,agentToolUnregistered:`agent:tool:unregistered`,agentResourceRegistered:`agent:resource:registered`,agentResourceUnregistered:`agent:resource:unregistered`},client:{isTrustedUpdated:`rpc:is-trusted:updated`,error:`rpc:error`,connectionStatus:`connection:status`,connectionError:`connection:error`},broadcast:{authRevoked:`devframe:auth:revoked`,cacheInvalidate:`devframe:rpc:cache:invalidate`,clientStateUpdated:`devframe:rpc:client-state:updated`,clientStatePatch:`devframe:rpc:client-state:patch`,streamingChunk:`devframe:streaming:chunk`,streamingEnd:`devframe:streaming:end`,streamingUploadCancel:`devframe:streaming:upload-cancel`},inPageChannel:{panelStateUpdated:`devframe:in-page:panel-state:updated`,panelStatePatch:`devframe:in-page:panel-state:patch`},postMessage:{remoteAssetsError:`devframe:remote-assets-error`,inPageChannel:`devframe:in-page-channel`}},vre=_re(fre);function yre(e,{method:t=`warn`}={}){console[t](vre(e))}function bre(e){return gre({...e,reporters:[yre,...e.reporters??[]]})}function xre(){let e,t;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}var Sre=Math.random.bind(Math),Cre=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function wre(e=21){let t=``,n=e;for(;n--;)t+=Cre[Sre()*64|0];return t}var Tre=6e4,Ly=e=>e,Ere=Ly,{clearTimeout:Ry,setTimeout:Dre}=globalThis;function Ore(e,t){let{post:n,on:r,off:i=()=>{},eventNames:a=[],serialize:o=Ly,deserialize:s=Ere,resolver:c,bind:l=`rpc`,timeout:u=Tre,proxify:d=!0}=t,f=!1,p=new Map,m,ee;async function h(e,r,i,a){if(f)throw Error(`[birpc] rpc is closed, cannot call "${e}"`);let s={m:e,a:r,t:`q`};a&&(s.o=!0);let c=async e=>n(o(e));if(i){await c(s);return}if(m)try{await m}finally{m=void 0}let{promise:l,resolve:d,reject:h}=xre(),g=wre();s.i=g;let te;async function ne(n=s){return u>=0&&(te=Dre(()=>{try{if(t.onTimeoutError?.call(ee,e,r)!==!0)throw Error(`[birpc] timeout on calling "${e}"`)}catch(e){h(e)}p.delete(g)},u),typeof te==`object`&&(te=te.unref?.())),p.set(g,{resolve:d,reject:h,timeoutId:te,method:e}),await c(n),l}try{t.onRequest?await t.onRequest.call(ee,s,ne,d):await ne()}catch(e){if(t.onGeneralError?.call(ee,e)!==!0)throw e;return}finally{Ry(te),p.delete(g)}return l}let g={$call:(e,...t)=>h(e,t,!1),$callOptional:(e,...t)=>h(e,t,!1,!0),$callEvent:(e,...t)=>h(e,t,!0),$callRaw:e=>h(e.method,e.args,e.event,e.optional),$rejectPendingCalls:ne,get $closed(){return f},get $meta(){return t.meta},$close:te,$functions:e};ee=d?new Proxy({},{get(t,n){if(Object.hasOwn(g,n))return g[n];if(n===`then`&&!a.includes(`then`)&&!(`then`in e))return;let r=(...e)=>h(n,e,!0);if(a.includes(n))return r.asEvent=r,r;let i=(...e)=>h(n,e,!1);return i.asEvent=r,i}}):g;function te(e){f=!0,p.forEach(({reject:t,method:n})=>{let r=Error(`[birpc] rpc is closed, cannot call "${n}"`);if(e)return e.cause??=r,t(e);t(r)}),p.clear(),i(re)}function ne(e){let t=Array.from(p.values()).map(({method:t,reject:n})=>e?e({method:t,reject:n}):n(Error(`[birpc]: rejected pending call "${t}".`)));return p.clear(),t}async function re(r,...i){let a;try{a=s(r)}catch(e){if(t.onGeneralError?.call(ee,e)!==!0)throw e;return}if(a.t===`q`){let{m:r,a:s,o:u}=a,d,f,p=await(c?c.call(ee,r,e[r]):e[r]);if(u&&(p||=()=>void 0),!p)f=Error(`[birpc] function "${r}" not found`);else try{d=await p.apply(l===`rpc`?ee:e,s)}catch(e){f=e}if(a.i){if(f&&t.onFunctionError&&t.onFunctionError.call(ee,f,r,s)===!0)return;if(!f)try{await n(o({t:`s`,i:a.i,r:d}),...i);return}catch(e){if(f=e,t.onGeneralError?.call(ee,e,r,s)!==!0)throw e}try{await n(o({t:`s`,i:a.i,e:f}),...i)}catch(e){if(t.onGeneralError?.call(ee,e,r,s)!==!0)throw e}}}else{let{i:e,r:t,e:n}=a,r=p.get(e);r&&(Ry(r.timeoutId),n?r.reject(n):r.resolve(t)),p.delete(e)}}return m=r(re),ee}function kre(e,t){return t.safety?t.safety:e===`static`||e===`query`||e==null?`read`:`action`}var zy=Object.freeze({type:`object`,additionalProperties:!0});function Are(e){let t=e[`~standard`];if(t.jsonSchema)try{return t.jsonSchema.input({target:`draft-2020-12`})}catch{return zy}return zy}function jre(e){if(!e||e.length===0)return{type:`object`,properties:{}};let t={},n=[];for(let r=0;r<e.length;r++){let i=`arg${r}`;t[i]=Are(e[r]),n.push(i)}return{type:`object`,properties:t,required:n,additionalProperties:!1}}function Mre(e,t){if(Array.isArray(e))return e;if(e==null)return[];if(typeof e!=`object`)return;let n=e;if(t!=null)return Array.from({length:t},(e,t)=>n[`arg${t}`]);if(`arg0`in n){let e=[];for(;`arg${e.length}`in n;)e.push(n[`arg${e.length}`]);return e}return Object.keys(n).length===0?[]:void 0}function Nre(e,t){return Mre(e,t)??[e]}function Pre(e){return typeof e==`string`?`'${e}'`:new Ire().serialize(e)}var Fre=` _-,;:!?.'"()[]{}@*/\\&#%\`^+<=>|~$0123456789abcdefghijklmnopqrstuvwxyz`,By=(function(){let e=new Uint8Array(128);for(let t=0;t<69;t++)e[Fre.charCodeAt(t)]=t+1;for(let t=65;t<=90;t++)e[t]=e[t+32];return e})();function Vy(e,t){if(e===t)return 0;let n=Math.min(e.length,t.length),r=0;for(let i=0;i<n;i++){let n=e.charCodeAt(i),a=t.charCodeAt(i);if(n===a)continue;let o=n<128&&By[n]?By[n]:n+128,s=a<128&&By[a]?By[a]:a+128;if(o!==s)return o<s?-1:1;r===0&&(r=n>a?-1:1)}return e.length===t.length?r:e.length<t.length?-1:1}var Ire=(function(){class e{#e=new Map;compare(e,t){let n=typeof e,r=typeof t;return n===`string`&&r===`string`?Vy(e,t):n===`number`&&r===`number`?e-t:Vy(this.serialize(e,!0),this.serialize(t,!0))}serialize(e,t){if(e===null)return`null`;switch(typeof e){case`string`:return t?e:`'${e}'`;case`bigint`:return`${e}n`;case`object`:return this.$object(e);case`function`:return this.$function(e)}return String(e)}serializeObject(e){let t=Object.prototype.toString.call(e);if(t!==`[object Object]`)return this.serializeBuiltInType(t.length<10?`unknown:${t}`:t.slice(8,-1),e);let n=e.constructor,r=n===Object||n===void 0?``:n.name;if(r!==``&&globalThis[r]===n)return this.serializeBuiltInType(r,e);if(`toJSON`in e&&typeof e.toJSON==`function`){let t=e.toJSON();return r+(typeof t==`object`&&t?this.$object(t):`(${this.serialize(t)})`)}let i=Object.keys(e).sort(Vy),a=`${r}{`;for(let t=0;t<i.length;t++){let n=i[t];a+=`${n}:${this.serialize(e[n])}`,t<i.length-1&&(a+=`,`)}return a+`}`}serializeBuiltInType(e,t){let n=this[`$`+e];if(n)return n.call(this,t);if(typeof t.entries==`function`)return this.serializeObjectEntries(e,t.entries());throw Error(`Cannot serialize ${e}`)}serializeObjectEntries(e,t){let n=Array.from(t).sort((e,t)=>this.compare(e[0],t[0])),r=`${e}{`;for(let e=0;e<n.length;e++){let[t,i]=n[e];r+=`${this.serialize(t,!0)}:${this.serialize(i)}`,e<n.length-1&&(r+=`,`)}return r+`}`}$object(e){let t=this.#e.get(e);return t===void 0&&(this.#e.set(e,`#${this.#e.size}`),t=this.serializeObject(e),this.#e.set(e,t)),t}$function(e){let t=Function.prototype.toString.call(e);return t.slice(-15)===`[native code] }`?`${e.name||``}()[native]`:`${e.name}(${e.length})${t.replace(/\s*\n\s*/g,``)}`}$Array(e){let t=`[`;for(let n=0;n<e.length;n++)t+=this.serialize(e[n]),n<e.length-1&&(t+=`,`);return t+`]`}$Date(e){try{return`Date(${e.toISOString()})`}catch{return`Date(null)`}}$ArrayBuffer(e){return`ArrayBuffer[${new Uint8Array(e).join(`,`)}]`}$Set(e){return`Set${this.$Array(Array.from(e).sort((e,t)=>this.compare(e,t)))}`}$Map(e){return this.serializeObjectEntries(`Map`,e.entries())}}for(let t of[`Error`,`RegExp`,`URL`])e.prototype[`$`+t]=function(e){return`${t}(${e})`};for(let t of[`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float32Array`,`Float64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`,`)}]`};for(let t of[`BigInt64Array`,`BigUint64Array`])e.prototype[`$`+t]=function(e){return`${t}[${e.join(`n,`)}${e.length>0?`n`:``}]`};return e})(),Lre=[1779033703,-1150833019,1013904242,-1521486534,1359893119,-1694144372,528734635,1541459225],Rre=[1116352408,1899447441,-1245643825,-373957723,961987163,1508970993,-1841331548,-1424204075,-670586216,310598401,607225278,1426881987,1925078388,-2132889090,-1680079193,-1046744716,-459576895,-272742522,264347078,604807628,770255983,1249150122,1555081692,1996064986,-1740746414,-1473132947,-1341970488,-1084653625,-958395405,-710438585,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,-2117940946,-1838011259,-1564481375,-1474664885,-1035236496,-949202525,-778901479,-694614492,-200395387,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,-2067236844,-1933114872,-1866530822,-1538233109,-1090935817,-965641998],zre=`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_`,Hy=[],Bre=class{_data=new Uy;_hash=new Uy([...Lre]);_nDataBytes=0;_minBufferSize=0;finalize(e){e&&this._append(e);let t=this._nDataBytes*8,n=this._data.sigBytes*8;return this._data.words[n>>>5]|=128<<24-n%32,this._data.words[(n+64>>>9<<4)+14]=Math.floor(t/4294967296),this._data.words[(n+64>>>9<<4)+15]=t,this._data.sigBytes=this._data.words.length*4,this._process(),this._hash}_doProcessBlock(e,t){let n=this._hash.words,r=n[0],i=n[1],a=n[2],o=n[3],s=n[4],c=n[5],l=n[6],u=n[7];for(let n=0;n<64;n++){if(n<16)Hy[n]=e[t+n]|0;else{let e=Hy[n-15],t=(e<<25|e>>>7)^(e<<14|e>>>18)^e>>>3,r=Hy[n-2],i=(r<<15|r>>>17)^(r<<13|r>>>19)^r>>>10;Hy[n]=t+Hy[n-7]+i+Hy[n-16]}let d=s&c^~s&l,f=r&i^r&a^i&a,p=(r<<30|r>>>2)^(r<<19|r>>>13)^(r<<10|r>>>22),m=(s<<26|s>>>6)^(s<<21|s>>>11)^(s<<7|s>>>25),ee=u+m+d+Rre[n]+Hy[n],h=p+f;u=l,l=c,c=s,s=o+ee|0,o=a,a=i,i=r,r=ee+h|0}n[0]=n[0]+r|0,n[1]=n[1]+i|0,n[2]=n[2]+a|0,n[3]=n[3]+o|0,n[4]=n[4]+s|0,n[5]=n[5]+c|0,n[6]=n[6]+l|0,n[7]=n[7]+u|0}_append(e){typeof e==`string`&&(e=Uy.fromUtf8(e)),this._data.concat(e),this._nDataBytes+=e.sigBytes}_process(e){let t,n=this._data.sigBytes/64;n=e?Math.ceil(n):Math.max((n|0)-this._minBufferSize,0);let r=n*16,i=Math.min(r*4,this._data.sigBytes);if(r){for(let e=0;e<r;e+=16)this._doProcessBlock(this._data.words,e);t=this._data.words.splice(0,r),this._data.sigBytes-=i}return new Uy(t,i)}},Uy=class e{words;sigBytes;constructor(e,t){e=this.words=e||[],this.sigBytes=t===void 0?e.length*4:t}static fromUtf8(t){let n=unescape(encodeURIComponent(t)),r=n.length,i=[];for(let e=0;e<r;e++)i[e>>>2]|=(n.charCodeAt(e)&255)<<24-e%4*8;return new e(i,r)}toBase64(){let e=[];for(let t=0;t<this.sigBytes;t+=3){let n=this.words[t>>>2]>>>24-t%4*8&255,r=this.words[t+1>>>2]>>>24-(t+1)%4*8&255,i=this.words[t+2>>>2]>>>24-(t+2)%4*8&255,a=n<<16|r<<8|i;for(let n=0;n<4&&t*8+n*6<this.sigBytes*8;n++)e.push(zre.charAt(a>>>6*(3-n)&63))}return e.join(``)}concat(e){if(this.words[this.sigBytes>>>2]&=4294967295<<32-this.sigBytes%4*8,this.words.length=Math.ceil(this.sigBytes/4),this.sigBytes%4)for(let t=0;t<e.sigBytes;t++){let n=e.words[t>>>2]>>>24-t%4*8&255;this.words[this.sigBytes+t>>>2]|=n<<24-(this.sigBytes+t)%4*8}else for(let t=0;t<e.sigBytes;t+=4)this.words[this.sigBytes+t>>>2]=e.words[t>>>2];this.sigBytes+=e.sigBytes}};function Vre(e){return new Bre().finalize(e).toBase64()}function Wy(e){return Vre(Pre(e))}function Gy(e){return Wy(e)}function Ky(){let e={};function t(t,...n){let r=e[t]||[];for(let e=0,t=r.length;e<t;e++){let t=r[e];t&&t(...n)}}function n(n,...r){t(n,...r),delete e[n]}function r(t,n){return(e[t]||=[]).push(n),()=>{e[t]=e[t]?.filter(e=>n!==e)}}function i(e,t){let n=r(e,((...e)=>(n(),t(...e))));return n}return{_listeners:e,emit:t,emitOnce:n,on:r,once:i}}var qy=/^[\w+.-]{2,}:\/\//;function Jy(e){return e.endsWith(`/`)?e:`${e}/`}function Yy(e){return(e.endsWith(`/`)?e.slice(0,-1):e)||`/`}function Xy(e,...t){let n=e;for(let e of t)e&&e!==`/`&&(n=n?Jy(n)+e.replace(/^\.?\//,``):e);return n}function Zy(e,t){if(!t||t===`/`||qy.test(e))return e;let n=Yy(t);return e.startsWith(n)?e:Xy(n,e)}function Qy(e,t){let n=e.match(qy);return t+(n?e.slice(n[0].length):e)}var $y=`useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict`;function eb(e=21){let t=``,n=e;for(;n--;)t+=$y[Math.random()*64|0];return t}var tb=Symbol.for(`immer-nothing`),nb=Symbol.for(`immer-draftable`),rb=Symbol.for(`immer-state`),ib=[function(e){return`The plugin for '${e}' has not been loaded into Immer. To enable the plugin, import and call \`enable${e}()\` when initializing your application.`},function(e){return`produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${e}'`},`This object has been frozen and should not be mutated`,function(e){return`Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? `+e},`An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.`,`Immer forbids circular references`,"The first or second argument to `produce` must be a function","The third argument to `produce` must be a function or undefined","First argument to `createDraft` must be a plain object, an array, or an immerable object","First argument to `finishDraft` must be a draft returned by `createDraft`",function(e){return`'current' expects a draft, got: ${e}`},`Object.defineProperty() cannot be used on an Immer draft`,`Object.setPrototypeOf() cannot be used on an Immer draft`,`Immer only supports deleting array indices`,`Immer only supports setting array indices and the 'length' property`,function(e){return`'original' expects a draft, got: ${e}`}];function ab(e,...t){{let n=ib[e],r=kb(n)?n.apply(null,t):n;throw Error(`[Immer] ${r}`)}}var ob=Object,sb=ob.getPrototypeOf,cb=`constructor`,lb=`prototype`,ub=`configurable`,db=`enumerable`,fb=`writable`,pb=`value`,mb=e=>!!e&&!!e[rb];function hb(e){return e?vb(e)||Tb(e)||!!e[nb]||!!e[cb]?.[nb]||Eb(e)||Db(e):!1}var gb=ob[lb][cb].toString(),_b=new WeakMap;function vb(e){if(!e||!Ob(e))return!1;let t=sb(e);if(t===null||t===ob[lb])return!0;let n=ob.hasOwnProperty.call(t,cb)&&t[cb];if(n===Object)return!0;if(!kb(n))return!1;let r=_b.get(n);return r===void 0&&(r=Function.toString.call(n),_b.set(n,r)),r===gb}function yb(e,t,n=!0){bb(e)===0?(n?Reflect.ownKeys(e):ob.keys(e)).forEach(n=>{t(n,e[n],e)}):e.forEach((n,r)=>t(r,n,e))}function bb(e){let t=e[rb];return t?t.type_:Tb(e)?1:Eb(e)?2:Db(e)?3:0}var xb=(e,t,n=bb(e))=>n===2?e.has(t):ob[lb].hasOwnProperty.call(e,t),Sb=(e,t,n=bb(e))=>n===2?e.get(t):e[t],Cb=(e,t,n,r=bb(e))=>{r===2?e.set(t,n):r===3?e.add(n):e[t]=n};function wb(e,t){return e===t?e!==0||1/e==1/t:e!==e&&t!==t}var Tb=Array.isArray,Eb=e=>e instanceof Map,Db=e=>e instanceof Set,Ob=e=>typeof e==`object`,kb=e=>typeof e==`function`,Ab=e=>typeof e==`boolean`;function jb(e){let t=+e;return Number.isInteger(t)&&String(t)===e}var Mb=e=>Ob(e)?e?.[rb]:null,Nb=e=>e.copy_||e.base_,Pb=e=>e.modified_?e.copy_:e.base_;function Fb(e,t){if(Eb(e))return new Map(e);if(Db(e))return new Set(e);if(Tb(e))return Array[lb].slice.call(e);let n=vb(e);if(t===!0||t===`class_only`&&!n){let t=ob.getOwnPropertyDescriptors(e);delete t[rb];let n=Reflect.ownKeys(t);for(let r=0;r<n.length;r++){let i=n[r],a=t[i];a[fb]===!1&&(a[fb]=!0,a[ub]=!0),(a.get||a.set)&&(t[i]={[ub]:!0,[fb]:!0,[db]:a[db],[pb]:e[i]})}return ob.create(sb(e),t)}{let t=sb(e);if(t!==null&&n)return{...e};let r=ob.create(t);return ob.assign(r,e)}}function Ib(e,t=!1){return zb(e)||mb(e)||!hb(e)?e:(bb(e)>1&&ob.defineProperties(e,{set:Rb,add:Rb,clear:Rb,delete:Rb}),ob.freeze(e),t&&yb(e,(e,t)=>{Ib(t,!0)},!1),e)}function Lb(){ab(2)}var Rb={[pb]:Lb};function zb(e){return e===null||!Ob(e)||ob.isFrozen(e)}var Bb=`MapSet`,Vb=`Patches`,Hb=`ArrayMethods`,Ub={};function Wb(e){let t=Ub[e];return t||ab(0,e),t}var Gb=e=>!!Ub[e];function Kb(e,t){Ub[e]||(Ub[e]=t)}var qb,Jb=()=>qb,Yb=(e,t)=>({drafts_:[],parent_:e,immer_:t,canAutoFreeze_:!0,unfinalizedDrafts_:0,handledSet_:new Set,processedForPatches_:new Set,mapSetPlugin_:Gb(Bb)?Wb(Bb):void 0,arrayMethodsPlugin_:Gb(Hb)?Wb(Hb):void 0});function Xb(e,t){t&&(e.patchPlugin_=Wb(Vb),e.patches_=[],e.inversePatches_=[],e.patchListener_=t)}function Zb(e){Qb(e),e.drafts_.forEach(ex),e.drafts_=null}function Qb(e){e===qb&&(qb=e.parent_)}var $b=e=>qb=Yb(qb,e);function ex(e){let t=e[rb];t.type_===0||t.type_===1?t.revoke_():t.revoked_=!0}function tx(e,t){t.unfinalizedDrafts_=t.drafts_.length;let n=t.drafts_[0];if(e!==void 0&&e!==n){n[rb].modified_&&(Zb(t),ab(4)),hb(e)&&(e=nx(t,e));let{patchPlugin_:r}=t;r&&r.generateReplacementPatches_(n[rb].base_,e,t)}else e=nx(t,n);return rx(t,e,!0),Zb(t),t.patches_&&t.patchListener_(t.patches_,t.inversePatches_),e===tb?void 0:e}function nx(e,t){if(zb(t))return t;let n=t[rb];if(!n)return dx(t,e.handledSet_,e);if(!ax(n,e))return t;if(!n.modified_)return n.base_;if(!n.finalized_){let{callbacks_:t}=n;if(t)for(;t.length>0;)t.pop()(e);lx(n,e)}return n.copy_}function rx(e,t,n=!1){!e.parent_&&e.immer_.autoFreeze_&&e.canAutoFreeze_&&Ib(t,n)}function ix(e){e.finalized_=!0,e.scope_.unfinalizedDrafts_--}var ax=(e,t)=>e.scope_===t,ox=[];function sx(e,t,n,r){let i=Nb(e),a=e.type_;if(r!==void 0&&Sb(i,r,a)===t){Cb(i,r,n,a);return}if(!e.draftLocations_){let t=e.draftLocations_=new Map;yb(i,(e,n)=>{if(mb(n)){let r=t.get(n)||[];r.push(e),t.set(n,r)}})}let o=e.draftLocations_.get(t)??ox;for(let e of o)Cb(i,e,n,a)}function cx(e,t,n){e.callbacks_.push(function(r){let i=t;if(!i||!ax(i,r))return;r.mapSetPlugin_?.fixSetContents(i);let a=Pb(i);sx(e,i.draft_??i,a,n),lx(i,r)})}function lx(e,t){if(e.modified_&&!e.finalized_&&(e.type_===3||e.type_===1&&e.allIndicesReassigned_||(e.assigned_?.size??0)>0)){let{patchPlugin_:n}=t;if(n){let r=n.getPath(e);r&&n.generatePatches_(e,r,t)}ix(e)}}function ux(e,t,n){let{scope_:r}=e;if(mb(n)){let i=n[rb];ax(i,r)&&i.callbacks_.push(function(){bx(e),sx(e,n,Pb(i),t)})}else hb(n)&&e.callbacks_.push(function(){let i=Nb(e);e.type_===3?i.has(n)&&dx(n,r.handledSet_,r):Sb(i,t,e.type_)===n&&r.drafts_.length>1&&(e.assigned_.get(t)??!1)===!0&&e.copy_&&dx(Sb(e.copy_,t,e.type_),r.handledSet_,r)})}function dx(e,t,n){return!n.immer_.autoFreeze_&&n.unfinalizedDrafts_<1||mb(e)||t.has(e)||!hb(e)||zb(e)?e:(t.add(e),yb(e,(r,i)=>{if(mb(i)){let t=i[rb];ax(t,n)&&(Cb(e,r,Pb(t),e.type_),ix(t))}else hb(i)&&dx(i,t,n)}),e)}function fx(e,t){let n=Tb(e),r={type_:+!!n,scope_:t?t.scope_:Jb(),modified_:!1,finalized_:!1,assigned_:void 0,parent_:t,base_:e,draft_:null,copy_:null,revoke_:null,isManual_:!1,callbacks_:void 0},i=r,a=px;n&&(i=[r],a=mx);let{revoke:o,proxy:s}=Proxy.revocable(i,a);return r.draft_=s,r.revoke_=o,[s,r]}var px={get(e,t){if(t===rb)return e;let n=e.scope_.arrayMethodsPlugin_,r=e.type_===1&&typeof t==`string`;if(r&&n?.isArrayOperationMethod(t))return n.createMethodInterceptor(e,t);let i=Nb(e);if(!xb(i,t,e.type_))return _x(e,i,t);let a=i[t];if(e.finalized_||!hb(a)||r&&e.operationMethod&&n?.isMutatingArrayMethod(e.operationMethod)&&jb(t))return a;if(a===hx(e.base_,t)||gx(e,t,a)){bx(e);let n=e.type_===1?+t:t,r=Sx(e.scope_,a,e,n);return e.copy_[n]=r}return a},has(e,t){return t in Nb(e)},ownKeys(e){return Reflect.ownKeys(Nb(e))},set(e,t,n){let r=vx(Nb(e),t);if(r?.set)return r.set.call(e.draft_,n),!0;if(!e.modified_){let r=hx(Nb(e),t),i=r?.[rb];if(i&&i.base_===n)return e.copy_[t]=n,e.assigned_.delete(t),!0;if(wb(n,r)&&(n!==void 0||xb(e.base_,t,e.type_)))return!0;bx(e),yx(e)}return e.copy_[t]===n&&(n!==void 0||xb(e.copy_,t,e.type_))||Number.isNaN(n)&&Number.isNaN(e.copy_[t])?!0:(e.copy_[t]=n,e.assigned_.set(t,!0),ux(e,t,n),!0)},deleteProperty(e,t){return bx(e),hx(e.base_,t)!==void 0||t in e.base_?(e.assigned_.set(t,!1),yx(e)):e.assigned_.delete(t),e.copy_&&delete e.copy_[t],!0},getOwnPropertyDescriptor(e,t){let n=Nb(e),r=Reflect.getOwnPropertyDescriptor(n,t);return r&&{[fb]:!0,[ub]:e.type_!==1||t!==`length`,[db]:r[db],[pb]:n[t]}},defineProperty(){ab(11)},getPrototypeOf(e){return sb(e.base_)},setPrototypeOf(){ab(12)}},mx={};for(let e in px){let t=px[e];mx[e]=function(){let e=arguments;return e[0]=e[0][0],t.apply(this,e)}}mx.deleteProperty=function(e,t){return isNaN(parseInt(t))&&ab(13),mx.set.call(this,e,t,void 0)},mx.set=function(e,t,n){return t!==`length`&&isNaN(parseInt(t))&&ab(14),px.set.call(this,e[0],t,n,e[0])};function hx(e,t){let n=e[rb];return(n?Nb(n):e)[t]}function gx(e,t,n){return e.type_!==1||!e.allIndicesReassigned_||e.assigned_?.get(t)||!hb(n)||n[rb]?!1:e.baseRefs_.has(n)}function _x(e,t,n){let r=vx(t,n);return r?pb in r?r[pb]:r.get?.call(e.draft_):void 0}function vx(e,t){if(!(t in e))return;let n=sb(e);for(;n;){let e=Object.getOwnPropertyDescriptor(n,t);if(e)return e;n=sb(n)}}function yx(e){e.modified_||(e.modified_=!0,e.parent_&&yx(e.parent_))}function bx(e){e.copy_||=(e.assigned_=new Map,Fb(e.base_,e.scope_.immer_.useStrictShallowCopy_))}var xx=class{constructor(e){this.autoFreeze_=!0,this.useStrictShallowCopy_=!1,this.useStrictIteration_=!1,this.produce=(e,t,n)=>{if(kb(e)&&!kb(t)){let n=t;t=e;let r=this;return function(e=n,...i){return r.produce(e,e=>t.call(this,e,...i))}}kb(t)||ab(6),n!==void 0&&!kb(n)&&ab(7);let r;if(hb(e)){let i=$b(this),a=Sx(i,e,void 0),o=!0;try{r=t(a),o=!1}finally{o?Zb(i):Qb(i)}return Xb(i,n),tx(r,i)}if(!e||!Ob(e)){if(r=t(e),r===void 0&&(r=e),r===tb&&(r=void 0),this.autoFreeze_&&Ib(r,!0),n){let t=[],i=[];Wb(Vb).generateReplacementPatches_(e,r,{patches_:t,inversePatches_:i}),n(t,i)}return r}ab(1,e)},this.produceWithPatches=(e,t)=>{if(kb(e))return(t,...n)=>this.produceWithPatches(t,t=>e(t,...n));let n,r;return[this.produce(e,t,(e,t)=>{n=e,r=t}),n,r]},Ab(e?.autoFreeze)&&this.setAutoFreeze(e.autoFreeze),Ab(e?.useStrictShallowCopy)&&this.setUseStrictShallowCopy(e.useStrictShallowCopy),Ab(e?.useStrictIteration)&&this.setUseStrictIteration(e.useStrictIteration)}createDraft(e){hb(e)||ab(8),mb(e)&&(e=Cx(e));let t=$b(this),n=Sx(t,e,void 0);return n[rb].isManual_=!0,Qb(t),n}finishDraft(e,t){let n=e&&e[rb];(!n||!n.isManual_)&&ab(9);let{scope_:r}=n;return Xb(r,t),tx(void 0,r)}setAutoFreeze(e){this.autoFreeze_=e}setUseStrictShallowCopy(e){this.useStrictShallowCopy_=e}setUseStrictIteration(e){this.useStrictIteration_=e}shouldUseStrictIteration(){return this.useStrictIteration_}applyPatches(e,t){let n;for(n=t.length-1;n>=0;n--){let r=t[n];if(r.path.length===0&&r.op===`replace`){e=r.value;break}}n>-1&&(t=t.slice(n+1));let r=Wb(Vb).applyPatches_;return mb(e)?r(e,t):this.produce(e,e=>r(e,t))}};function Sx(e,t,n,r){let[i,a]=Eb(t)?Wb(Bb).proxyMap_(t,n):Db(t)?Wb(Bb).proxySet_(t,n):fx(t,n);return(n?.scope_??Jb()).drafts_.push(i),a.callbacks_=n?.callbacks_??[],a.key_=r,n&&r!==void 0?cx(n,a,r):a.callbacks_.push(function(e){e.mapSetPlugin_?.fixSetContents(a);let{patchPlugin_:t}=e;a.modified_&&t&&t.generatePatches_(a,[],e)}),i}function Cx(e){return mb(e)||ab(10,e),wx(e)}function wx(e){if(!hb(e)||zb(e))return e;let t=e[rb],n,r=!0;if(t){if(!t.modified_)return t.base_;t.finalized_=!0,n=Fb(e,t.scope_.immer_.useStrictShallowCopy_),r=t.scope_.immer_.shouldUseStrictIteration()}else n=Fb(e,!0);let i=n;return Db(n)&&(n=new Set),yb(i,(e,t)=>{Cb(n,e,wx(t))},r),t&&(t.finalized_=!1),n}function Tx(){ib.push(`Sets cannot have "replace" patches.`,function(e){return`Unsupported patch operation: `+e},function(e){return`Cannot apply patch, path doesn't resolve: `+e},`Patching reserved attributes like __proto__, prototype and constructor is not allowed`);function e(n,r=[]){if(n.key_!==void 0){let e=n.parent_.copy_??n.parent_.base_,t=Mb(Sb(e,n.key_)),i=Sb(e,n.key_);if(i===void 0||i!==n.draft_&&i!==n.base_&&i!==n.copy_||t!=null&&t.base_!==n.base_)return null;let a=n.parent_.type_===3,o;if(a){let e=n.parent_;o=Array.from(e.drafts_.keys()).indexOf(n.key_)}else o=n.key_;if(!(a&&e.size>o||xb(e,o))||n.parent_.type_===1&&n.parent_.allIndicesReassigned_)return null;r.push(o)}if(n.parent_)return e(n.parent_,r);r.reverse();try{t(n.copy_,r)}catch{return null}return r}function t(e,t){let n=e;for(let e=0;e<t.length-1;e++){let r=t[e];if(n=Sb(n,r),!Ob(n)||n===null)throw Error(`Cannot resolve path at '${t.join(`/`)}'`)}return n}let n=`replace`,r=`remove`;function i(e,t,n){if(e.scope_.processedForPatches_.has(e))return;e.scope_.processedForPatches_.add(e);let{patches_:r,inversePatches_:i}=n;switch(e.type_){case 0:case 2:return o(e,t,r,i);case 1:return a(e,t,r,i);case 3:return s(e,t,r,i)}}function a(e,t,i,a){let{base_:o,assigned_:s}=e,c=e.copy_;c.length<o.length&&([o,c]=[c,o],[i,a]=[a,i]);let l=e.allIndicesReassigned_===!0;for(let e=0;e<o.length;e++){let r=c[e],u=o[e];if((l||s?.get(e.toString()))&&r!==u){let o=r?.[rb];if(o&&o.modified_)continue;let s=t.concat([e]);i.push({op:n,path:s,value:d(r)}),a.push({op:n,path:s,value:d(u)})}}for(let e=o.length;e<c.length;e++){let n=t.concat([e]);i.push({op:`add`,path:n,value:d(c[e])})}for(let e=c.length-1;o.length<=e;--e){let n=t.concat([e]);a.push({op:r,path:n})}}function o(e,t,i,a){let{base_:o,copy_:s,type_:c}=e;yb(e.assigned_,(e,l)=>{let u=Sb(o,e,c),f=Sb(s,e,c),p=l?xb(o,e)?n:`add`:r;if(u===f&&p===n)return;let m=t.concat(e);i.push(p===r?{op:p,path:m}:{op:p,path:m,value:d(f)}),a.push(p===`add`?{op:r,path:m}:p===r?{op:`add`,path:m,value:d(u)}:{op:n,path:m,value:d(u)})})}function s(e,t,n,i){let{base_:a,copy_:o}=e,s=0;a.forEach(e=>{if(!o.has(e)){let a=t.concat([s]);n.push({op:r,path:a,value:e}),i.unshift({op:`add`,path:a,value:e})}s++}),s=0,o.forEach(e=>{if(!a.has(e)){let a=t.concat([s]);n.push({op:`add`,path:a,value:e}),i.unshift({op:r,path:a,value:e})}s++})}function c(e,t,r){let{patches_:i,inversePatches_:a}=r;i.push({op:n,path:[],value:t===tb?void 0:t}),a.push({op:n,path:[],value:e})}function l(e,t){return t.forEach(t=>{let{path:i,op:a}=t,o=e;for(let e=0;e<i.length-1;e++){let t=bb(o),n=i[e];typeof n!=`string`&&typeof n!=`number`&&(n=``+n),(t===0||t===1)&&(n===`__proto__`||n===cb)&&ab(19),kb(o)&&n===lb&&ab(19),o=Sb(o,n),(o===null||!Ob(o))&&ab(18,i.join(`/`))}let s=bb(o),c=u(t.value),l=i[i.length-1];switch(a){case n:switch(s){case 2:return o.set(l,c);case 3:ab(16);default:return o[l]=c}case`add`:switch(s){case 1:return l===`-`?o.push(c):o.splice(l,0,c);case 2:return o.set(l,c);case 3:return o.add(c);default:return o[l]=c}case r:switch(s){case 1:return o.splice(l,1);case 2:return o.delete(l);case 3:return o.delete(t.value);default:return delete o[l]}default:ab(17,a)}}),e}function u(e){if(!hb(e))return e;if(Tb(e))return e.map(u);if(Eb(e))return new Map(Array.from(e.entries()).map(([e,t])=>[e,u(t)]));if(Db(e))return new Set(Array.from(e).map(u));let t=Object.create(sb(e));for(let n in e)t[n]=u(e[n]);return xb(e,nb)&&(t[nb]=e[nb]),t}function d(e){return mb(e)?u(e):e}Kb(Vb,{applyPatches_:l,generatePatches_:i,generateReplacementPatches_:c,getPath:e})}globalThis.Iterator?.from;var Ex=new xx,Dx=Ex.produce,Ox=Ex.produceWithPatches.bind(Ex),kx=Ex.applyPatches.bind(Ex),Ax=1e3;function jx(e,t){if(e.add(t),e.size>Ax){let t=e.values().next().value;t!==void 0&&e.delete(t)}}function Mx(e){let{enablePatches:t=!1}=e;t&&Tx();let n=Ky(),r=e.initialValue,i=new Set;return{on:n.on,value:()=>r,patch:(e,t=eb())=>{i.has(t)||(Tx(),r=kx(r,e),jx(i,t),n.emit(`updated`,r,void 0,t))},mutate:(e,a=eb())=>{if(!i.has(a)){if(jx(i,a),t){let[t,i]=Ox(r,e);if(t===r)return;r=t,n.emit(`updated`,r,i,a)}else{let t=Dx(r,e);if(t===r)return;r=t,n.emit(`updated`,r,void 0,a)}}},syncIds:i}}var Nx=typeof self==`object`?self:globalThis,Px=new Set([`Error`,`EvalError`,`RangeError`,`ReferenceError`,`SyntaxError`,`TypeError`,`URIError`,`AggregateError`]),Fx=new Set([`Boolean`,`Number`,`String`,`Int8Array`,`Uint8Array`,`Uint8ClampedArray`,`Int16Array`,`Uint16Array`,`Int32Array`,`Uint32Array`,`Float16Array`,`Float32Array`,`Float64Array`,`BigInt64Array`,`BigUint64Array`]);function Ix(e,t){let n=(t,n)=>(e.set(n,t),t),r=i=>{if(e.has(i))return e.get(i);let[a,o]=t[i];switch(a){case 0:case-1:return n(o,i);case 1:{let e=n([],i);for(let t of o)e.push(r(t));return e}case 2:{let e=n({},i);for(let[t,n]of o)e[r(t)]=r(n);return e}case 3:return n(new Date(o),i);case 4:{let{source:e,flags:t}=o;return n(new RegExp(e,t),i)}case 5:{let e=n(new Map,i);for(let[t,n]of o)e.set(r(t),r(n));return e}case 6:{let e=n(new Set,i);for(let t of o)e.add(r(t));return e}case 7:{let{name:e,message:t}=o,r=Px.has(e)?Nx[e]:void 0;return n(new(r??Nx.Error)(t),i)}case 8:return n(BigInt(o),i);case`BigInt`:return n(Object(BigInt(o)),i);case`ArrayBuffer`:return n(new Uint8Array(o).buffer,o);case`DataView`:{let{buffer:e}=new Uint8Array(o);return n(new DataView(e),o)}}if(typeof a==`string`&&Fx.has(a))return n(new Nx[a](o),i);throw TypeError(`unable to deserialize unsafe or unknown type: ${String(a)}`)};return r}function Lx(e){return Ix(new Map,e)(0)}var Rx=``,{toString:zx}={},{keys:Bx}=Object;function Vx(e){let t=typeof e;if(t!==`object`||!e)return[0,t];let n=zx.call(e).slice(8,-1);switch(n){case`Array`:return[1,Rx];case`Object`:return[2,Rx];case`Date`:return[3,Rx];case`RegExp`:return[4,Rx];case`Map`:return[5,Rx];case`Set`:return[6,Rx];case`DataView`:return[1,n]}return n.includes(`Array`)?[1,n]:n.includes(`Error`)?[7,n]:[2,n]}function Hx([e,t]){return e===0&&(t===`function`||t===`symbol`)}function Ux(e,t,n,r){let i=(e,t)=>{let i=r.push(e)-1;return n.set(t,i),i},a=r=>{if(n.has(r))return n.get(r);let[o,s]=Vx(r);switch(o){case 0:{let t=r;switch(s){case`bigint`:o=8,t=r.toString();break;case`function`:case`symbol`:if(e)throw TypeError(`unable to serialize ${s}`);t=null;break;case`undefined`:return i([-1],r)}return i([o,t],r)}case 1:{if(s){let e=r;return s===`DataView`?e=new Uint8Array(r.buffer):s===`ArrayBuffer`&&(e=new Uint8Array(r)),i([s,[...e]],r)}let e=[],t=i([o,e],r);for(let t of r)e.push(a(t));return t}case 2:{if(s)switch(s){case`BigInt`:return i([s,r.toString()],r);case`Boolean`:case`Number`:case`String`:return i([s,r.valueOf()],r)}if(t&&`toJSON`in r)return a(r.toJSON());let n=[],c=i([o,n],r);for(let t of Bx(r))(e||!Hx(Vx(r[t])))&&n.push([a(t),a(r[t])]);return c}case 3:return i([o,r.toISOString()],r);case 4:{let{source:e,flags:t}=r;return i([o,{source:e,flags:t}],r)}case 5:{let t=[],n=i([o,t],r);for(let[n,i]of r)(e||!(Hx(Vx(n))||Hx(Vx(i))))&&t.push([a(n),a(i)]);return n}case 6:{let t=[],n=i([o,t],r);for(let n of r)(e||!Hx(Vx(n)))&&t.push(a(n));return n}}let{message:c}=r;return i([o,{name:s,message:c}],r)};return a}function Wx(e,t={}){let n=[];return Ux(!(t.json||t.lossy),!!t.json,new Map,n)(e),n}var{parse:Gx,stringify:Kx}=JSON,qx={json:!0,lossy:!0};function Jx(e){return Lx(Gx(e))}function Yx(e){return Kx(Wx(e,qx))}function Xx(e){return Lx(e)}function Zx(e){return Yx(e)}function Qx(e){return Jx(e)}var $x=256,eS=class extends Error{name=`StreamClosedError`};function tS(e={}){let t=e.id??eb(),n=Math.max(0,e.replayWindow??0),r=Ky(),i=new AbortController,a=[],o=!1,s=0;function c(e){if(o)throw new eS(`Cannot write to a closed stream "${t}"`);s+=1,n>0&&(a.push({seq:s,chunk:e}),a.length>n&&(a.length-n===1?a.shift():a.splice(0,a.length-n))),r.emit(`chunk`,s,e)}function l(e){if(o)return;o=!0;let t=rS(e);i.abort(e),r.emit(`end`,t)}function u(){o||(o=!0,i.signal.aborted||i.abort(`stream closed`),r.emit(`end`,void 0))}function d(e){o||i.signal.aborted||i.abort(e??`aborted`)}let f=new WritableStream({write(e){c(e)},close(){u()},abort(e){l(e)}});return{id:t,signal:i.signal,get closed(){return o},get lastSeq(){return s},write:c,error:l,close:u,abort:d,writable:f,events:r,buffer:a}}function nS(e={}){let t=e.id??eb(),n=Math.max(1,e.highWaterMark??$x),r=[],i=0,a=!1,o=!1,s,c,l,u;function d(){if(c){if(r.length>0){let e=r.shift(),t=c;c=void 0,t.resolve({value:e,done:!1});return}if(a){let e=c;if(c=void 0,s){let t=Error(s.message);t.name=s.name,e.reject(t)}else e.resolve({value:void 0,done:!0})}}}function f(){if(l){for(;r.length>0;){let e=r.shift();try{l.enqueue(e)}catch{break}}if(a&&l){try{if(s){let e=Error(s.message);e.name=s.name,l.error(e)}else l.close()}catch{}l=void 0}}}function p(t,s){if(!(a||o)&&!(t<=i)){if(i=t,r.push(s),r.length>n){let t=r.length-n;r.splice(0,t),e.onOverflow?.(t)}d(),u&&f()}}function m(e){a||(a=!0,s=e,d(),u&&f())}function ee(){o||a||(o=!0,e.onCancel?.(),m(void 0))}function h(){return u||(u=new ReadableStream({start(e){l=e,f()},cancel(){ee()}}),u)}return{id:t,get cancelled(){return o},get done(){return a},get lastSeenSeq(){return i},get readable(){return h()},cancel:ee,_push:p,_end:m,[Symbol.asyncIterator](){return{next(){if(r.length>0)return Promise.resolve({value:r.shift(),done:!1});if(a){if(s){let e=Error(s.message);return e.name=s.name,Promise.reject(e)}return Promise.resolve({value:void 0,done:!0})}return new Promise((e,t)=>{c={resolve:e,reject:t}})},return(){return ee(),Promise.resolve({value:void 0,done:!0})}}}}}function rS(e){if(e instanceof Error)return{name:e.name||`Error`,message:e.message};if(typeof e==`string`)return{name:`Error`,message:e};try{return{name:`Error`,message:JSON.stringify(e)}}catch{return{name:`Error`,message:String(e)}}}var iS=128;function aS(e){return e.replace(/[^\w-]+/g,`_`).slice(0,iS)}var oS=`modulepreload`,sS=function(e,t){return new URL(e,t).href},cS={},lS=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e=document.getElementsByTagName(`link`),i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}function s(e){return import.meta.resolve?import.meta.resolve(e):new URL(e,import.meta.url).href}r=o(t.map(t=>{if(t=sS(t,n),t=s(t),t in cS)return;cS[t]=!0;let r=t.endsWith(`.css`);for(let n=e.length-1;n>=0;n--){let i=e[n];if(i.href===t&&(!r||i.rel===`stylesheet`))return}let i=document.createElement(`link`);if(i.rel=r?`stylesheet`:oS,r||(i.as=`script`),i.crossOrigin=``,i.href=t,a&&i.setAttribute(`nonce`,a),document.head.appendChild(i),r)return new Promise((e,n)=>{i.addEventListener(`load`,e),i.addEventListener(`error`,()=>n(Error(`Unable to preload CSS for ${t}`)))})}).filter(e=>e!==void 0))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},uS=`__connection.json`,dS=`__DEVFRAME_CONNECTION__`,fS=`x-birpc-session`,pS=`__rpc-dump/index.json`,mS=`devframe:services`,hS=`devframe_otp`,gS=`devframe_auth_token`;Iy.postMessage.remoteAssetsError;var _S=class{cacheMap=new Map;options;keySerializer;constructor(e){this.options=e,this.keySerializer=e.keySerializer||(e=>Gy(e))}updateOptions(e){this.options={...this.options,...e}}cached(e,t){let n=this.cacheMap.get(e);if(n)return n.get(this.keySerializer(t))}has(e,t){return this.cacheMap.get(e)?.has(this.keySerializer(t))??!1}apply(e,t){let n=this.cacheMap.get(e.m)||new Map;n.set(this.keySerializer(e.a),t),this.cacheMap.set(e.m,n)}validate(e){return this.options.functions.includes(e)}clear(e){e?this.cacheMap.delete(e):this.cacheMap.clear()}},vS=bre({docsBase:`https://devfra.me/errors`,codes:{DF0019:{why:e=>`RPC function "${e.name}" has \`agent\` set but \`jsonSerializable\` is \`false\`; MCP requires JSON-serializable data.`,fix:"Remove `jsonSerializable: false`, or remove `agent` to keep it RPC-only."},DF0020:{why:e=>`RPC function "${e.name}" declares \`jsonSerializable: true\` but the value at "${e.path}" is a ${e.type}.`,fix:"Either drop `jsonSerializable: true` (falls back to structured-clone) or change the value to a JSON-safe shape."},DF0021:{why:e=>`RPC function "${e.name}" is already registered`,fix:"Use the `force` parameter to overwrite an existing registration."},DF0022:{why:e=>`RPC function "${e.name}" is not registered. Use register() to add new functions.`},DF0023:{why:e=>`RPC function "${e.name}" is not registered`},DF0024:{why:e=>`Either handler or setup function must be provided for RPC function "${e.name}"`},DF0025:{why:e=>`Function "${e.name}" not found in dump store`},DF0026:{why:e=>`No dump match for "${e.name}" with args: ${e.args}`},DF0027:{why:e=>`Function "${e.name}" with type "${e.type}" cannot have dump configuration. Only "static" and "query" types support dumps.`},DF0028:{why:e=>`Function "${e.name}" with type "${e.type}" cannot use \`snapshot: true\`. Only "query" functions support this sugar; "static" functions have equivalent default behavior already.`,fix:"Remove `snapshot: true`, or change the function type to `query`."},DF0043:{why:e=>`RPC function "${e.name}" received an invalid argument at position ${e.index}: ${e.issues}`,fix:"Pass a value that satisfies the `args` schema declared for this function."},DF0044:{why:e=>`RPC function "${e.name}" returned a value that failed its \`returns\` schema: ${e.issues}`,fix:"Make the handler return a value that satisfies the `returns` schema, or relax the schema."}}});function yS(e){if(e.agent&&e.jsonSerializable===!1)throw vS.DF0019({name:e.name});e.agent&&!e.jsonSerializable&&(e.jsonSerializable=!0)}async function bS(e,t){let n=e[`~standard`].validate(t);return n instanceof Promise?await n:n}function xS(e){return e.map(e=>{let t=e.path?.map(e=>typeof e==`object`?e.key:e).join(`.`);return t?`${t}: ${e.message}`:e.message}).join(`; `)}async function SS(e,t,n){let r=n.slice();if(!t||t.length===0)return r;for(let r=0;r<t.length;r++){let i=t[r];if(!i)continue;let a=await bS(i,n[r]);if(a.issues)throw vS.DF0043({name:e,index:r,issues:xS(a.issues)})}return r}async function CS(e,t,n){if(!t)return n;let r=await bS(t,n);if(r.issues)throw vS.DF0044({name:e,issues:xS(r.issues)});return n}async function wS(e,t){if(!e.setup)return{};if(typeof t==`object`&&t){e.__cache??=new WeakMap;let n=e.__cache,r=n.get(t);return r||(r=Promise.resolve(e.setup(t)),r.catch(()=>{n.get(t)===r&&n.delete(t)}),n.set(t,r)),await r}if(!e.__promise){let n=Promise.resolve(e.setup(t));n.catch(()=>{e.__promise===n&&(e.__promise=void 0)}),e.__promise=n}return await e.__promise}async function TS(e,t){let n=e.handler;if(!n){let r=await wS(e,t);if(!r.handler)throw vS.DF0024({name:e.name});n=r.handler}let r=e.args,i=e.returns;if(!r&&!i)return n;let a=n;return async(...t)=>{let n=await SS(e.name,r,t),o=await a(...n);return await CS(e.name,i,o)}}var ES=class{context;definitions=new Map;functions;_onChanged=[];constructor(e){this.context=e;let t=this.definitions,n=this;this.functions=new Proxy({},{get(e,r){let i=t.get(r);if(i)return TS(i,n.context)},has(e,n){return t.has(n)},getOwnPropertyDescriptor(e,n){return{value:t.get(n)?.handler,configurable:!0,enumerable:!0}},ownKeys(){return Array.from(t.keys())}})}register(e,t=!1){if(this.definitions.has(e.name)&&!t)throw vS.DF0021({name:e.name});yS(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}update(e,t=!1){if(!this.definitions.has(e.name)&&!t)throw vS.DF0022({name:e.name});yS(e),this.definitions.set(e.name,e),this._onChanged.forEach(t=>t(e.name))}onChanged(e){return this._onChanged.push(e),()=>{let t=this._onChanged.indexOf(e);t!==-1&&this._onChanged.splice(t,1)}}async getHandler(e){return await TS(this.definitions.get(e),this.context)}getSchema(e){let t=this.definitions.get(e);if(!t)throw vS.DF0023({name:String(e)});return{args:t.args,returns:t.returns}}has(e){return this.definitions.has(e)}get(e){return this.definitions.get(e)}list(){return Array.from(this.definitions.keys())}};function DS(e,t=``){return JSON.stringify(e,function(e,n){let r=this,i=r==null?n:r[e];if(i===void 0){if(Array.isArray(r))throw kS(t,`undefined`,r,e);return n}return i!==null&&OS(i,r,e,t),n})}function OS(e,t,n,r){if(typeof e==`bigint`)throw kS(r,`BigInt`,t,n);if(typeof e!=`object`)return;if(e instanceof Map)throw kS(r,`Map`,t,n);if(e instanceof Set)throw kS(r,`Set`,t,n);if(e instanceof Date)throw kS(r,`Date`,t,n);if(Array.isArray(e))return;let i=Object.getPrototypeOf(e);if(i!==null&&i!==Object.prototype)throw kS(r,e.constructor?.name??`class instance`,t,n)}function kS(e,t,n,r){let i=AS(n,r);return vS.DF0020({name:e||`<anonymous>`,type:t,path:i})}function AS(e,t){return Array.isArray(e)?`[${t}]`:t===``?`<root>`:t}var jS=`__DEVFRAME_CONNECTION_META__`,MS=`__DEVFRAME_CONNECTION_AUTH_TOKEN__`;function NS(e){let t=[()=>window?.[e],()=>globalThis?.[e],()=>parent.window?.[e]];for(let e of t)try{let t=e();if(t)return t}catch{}}function PS(){return NS(dS)}function FS(){return NS(jS)}function IS(e){if(e)return e;try{let e=localStorage.getItem(MS);if(e)return e}catch{}return NS(MS)}function LS(e){globalThis[dS]=e,globalThis[jS]={...e.connectionMeta,baseUrl:e.metaBaseUrl},e.authToken&&RS(e.authToken)}function RS(e){try{localStorage.setItem(MS,e)}catch{}globalThis[MS]=e;let t=PS();t&&(globalThis[dS]={...t,authToken:e})}function zS(e){let t=Zy(uS,e);try{return new URL(t,globalThis.location?.href).href}catch{return t}}function BS(e,t){return t&&t!==e.authToken?{...e,authToken:t}:e}function VS(){let e=PS();if(e)return BS(e,IS()??e.authToken??e.connectionMeta.authToken);let t=FS();if(t)return{connectionMeta:t,metaBaseUrl:t.baseUrl??zS(`./`),authToken:IS(t.authToken)}}async function HS(e={}){if(e.connection){let t=BS(e.connection,IS(e.authToken??e.connection.authToken??e.connection.connectionMeta.authToken));return LS(t),t}let t=Array.isArray(e.baseURL)?e.baseURL:[e.baseURL??`./`];if(e.connectionMeta){let n={connectionMeta:e.connectionMeta,metaBaseUrl:zS(t[0]??`./`),authToken:IS(e.authToken??e.connectionMeta.authToken)};return LS(n),n}let n=VS();if(n){let t=BS(n,IS(e.authToken??n.authToken??n.connectionMeta.authToken));return LS(t),t}let r=[];for(let n of t){let t=Zy(uS,n),i=zS(n);try{let n=await fetch(t);if(!n.ok)throw Error(`Failed to fetch connection meta from ${i}: ${n.status}`);let r=await n.json(),a=n.url||i,o={connectionMeta:r,metaBaseUrl:r.baseUrl?new URL(r.baseUrl,a).href:a,authToken:IS(e.authToken??r.authToken)};return LS(o),o}catch(e){r.push(e)}}throw Error(`Failed to get connection meta from ${t.join(`, `)}`,{cause:r})}var US=class extends Error{name=`DevframeConnectionError`;kind;constructor(e,t,n){super(t,n),this.kind=e}};function WS(e=hS){try{let t=globalThis.location?.hash?.replace(/^#/,``)??``;return new URLSearchParams(t).get(e)||void 0}catch{return}}function GS(e){try{let t=new URL(globalThis.location.href),n=new URLSearchParams(t.hash.replace(/^#/,``));if(!n.has(e))return;n.delete(e),t.hash=n.toString(),globalThis.history?.replaceState(globalThis.history.state,``,t.href)}catch{}}function KS(e=hS){let t=WS(e);return t&&GS(e),t}async function qS(e,t={}){let n=KS(t.param??`devframe_otp`);return n?e.isTrusted?!0:e.requestTrustWithCode(n):!1}function JS(e){let t={},n=new WeakMap,r,i=()=>(r??=e.sharedState.get(mS,{initialValue:{}}).then(e=>(t=e.value(),e.on(`updated`,e=>{t=e}),e)),r);return i(),{state:i,has:e=>e in t,keys:()=>Object.keys(t),get:r=>{let i=t[r];if(!i)return;let a=n.get(i);return a||(a={...i,rpc:e.scope(i.scope).rpc},n.set(i,a)),a}}}function YS(e){let t=new Map,n=new Map,r=new Map,i=new Set,a=e.connectionMeta.backend===`static`;function o(e,t){let n=r.get(e);return n&&typeof n==`object`&&!Array.isArray(n)&&typeof t==`object`&&!Array.isArray(t)?{...n,...t}:t}e.client.register({name:Iy.broadcast.clientStateUpdated,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.mutate(()=>o(e,n),r)}}),e.client.register({name:Iy.broadcast.clientStatePatch,type:`event`,handler:(e,n,r)=>{let i=t.get(e);i&&!i.syncIds.has(r)&&i.patch(n,r)}});function s(t,n){let r=[];return r.push(n.on(`updated`,(n,r,i)=>{a||(r?e.callEvent(`devframe:rpc:server-state:patch`,t,r,i):e.callEvent(`devframe:rpc:server-state:set`,t,n,i))})),()=>{for(let e of r)e()}}return{keys:()=>Array.from(t.keys()),onKeyAdded(e){return i.add(e),()=>{i.delete(e)}},delete(e){let i=n.get(e);n.delete(e);let a=t.delete(e);return r.delete(e),i?.(),a},get:async(c,l)=>{if(l?.initialValue!==void 0&&r.set(c,l.initialValue),t.has(c))return t.get(c);let u=Mx({initialValue:l?.initialValue,enablePatches:!1});async function d(){if(a||e.callEvent(`devframe:rpc:server-state:subscribe`,c),l?.initialValue!==void 0){t.set(c,u);for(let e of i)e(c);return e.call(`devframe:rpc:server-state:get`,c).then(e=>{e!==void 0&&u.mutate(()=>o(c,e))}).catch(e=>{console.error(`Error getting server state`,e)}),n.set(c,s(c,u)),u}{let r=await e.call(`devframe:rpc:server-state:get`,c);u.mutate(()=>o(c,r)),t.set(c,u);for(let e of i)e(c);return n.set(c,s(c,u)),u}}return new Promise((t,n)=>{if(e.isTrusted)d().then(t,n);else{t(u);let n=!1;e.events.on(Iy.client.isTrustedUpdated,e=>{e&&!n&&(n=!0,d())})}})}}}var XS=new Map;function ZS(e=XS){let t=new Map;return{serialize:n=>{let r;return n.t===`q`?r=n.m:(r=t.get(n.i),t.delete(n.i)),!(n.t===`s`&&`e`in n)&&r&&e.get(r)?.jsonSerializable===!0?DS(n,r??``):`s:${Zx(n)}`},deserialize:e=>{let n=e.startsWith(`s:`)?Qx(e.slice(2)):JSON.parse(e);return n.t===`q`&&n.i&&n.m&&t.set(n.i,n.m),n}}}function QS(){}function $S(e){let t=e.search(/\n\n|\r\n\r\n/);if(!(t<0))return{frame:e.slice(0,t),rest:e.slice(t+(e[t]===`\r`?4:2))}}function eC(e){let t=`message`,n=[];for(let r of e.split(/\r?\n/))r.startsWith(`:`)||(r.startsWith(`event:`)?t=r.slice(6).trimStart():r.startsWith(`data:`)&&n.push(r.slice(5).replace(/^ /,``)));return{event:t,data:n}}function tC(e){let{onConnected:t=QS,onError:n=QS,onDisconnected:r=QS,definitions:i,fetch:a=globalThis.fetch.bind(globalThis)}=e,o=e.url;e.authToken&&(o=`${o}${o.includes(`?`)?`&`:`?`}${gS}=${encodeURIComponent(e.authToken)}`);let s=ZS(i),c=new AbortController,l=!1,u,d,f,p,m=new Promise((e,t)=>{f=e,p=t});m.catch(()=>{});function ee(e){l||(l=!0,p(e),n(e),r())}function h(){l||(l=!0,p(Error(`Devframe SSE stream closed`)),r())}function g(e,n){if(e===`session`){f(n),t();return}u?.(n)}async function te(e){let t=e.getReader();d=t;let n=new TextDecoder,r=``;for(;;){let{done:e,value:i}=await t.read();if(e)break;for(r+=n.decode(i,{stream:!0});;){let e=$S(r);if(!e)break;r=e.rest;let{event:t,data:n}=eC(e.frame);n.length>0&&g(t,n.join(`
+`))}}h()}return(async()=>{try{let e=await a(o,{headers:{accept:`text/event-stream`},signal:c.signal});if(!e.ok||!e.body)throw Error(`Devframe SSE stream request failed: ${e.status}`);await te(e.body)}catch(e){if(c.signal.aborted){h();return}ee(e instanceof Error?e:Error(String(e)))}})(),{close:()=>{l=!0,c.abort(),d?.cancel().catch(()=>{})},on:e=>{u=e},post:async e=>{let t;try{t=await m}catch{return}if(l){n(Error(`Devframe SSE channel is closed; message dropped`));return}try{let n=await a(o,{method:`POST`,headers:{"content-type":`text/plain; charset=utf-8`,[fS]:t},body:e});if(n.status===200){let e=await n.text();e&&u?.(e);return}if(!n.ok)throw Error(`Devframe SSE POST failed: ${n.status}`)}catch(e){n(e instanceof Error?e:Error(String(e)))}},serialize:s.serialize,deserialize:s.deserialize}}function nC(e,t){let{channel:n,rpcOptions:r={}}=t;return Ore(e,{...n,timeout:-1,...r,proxify:!1})}function rC(e){let{transport:t,authToken:n,connectionMeta:r,events:i,clientRpc:a,rpcOptions:o={},callTimeout:s=0}=e,c=!1,l=`connecting`,u=null,d=Promise.withResolvers();function f(e,t=null){if(t?u=t:e===`connected`&&(u=null),e===l)return;let n=l;l=e,i.emit(Iy.client.connectionStatus,e,n)}let p=new Set;function m(e){for(let t of[...p])t.reject(e)}function ee(){return l===`disconnected`||l===`error`?new US(`connection`,`[devframe] Not connected to the devframe server`,{cause:u??void 0}):l===`unauthorized`?new US(`auth`,`[devframe] Not authorized by the devframe server`,{cause:u??void 0}):null}function h(e,t){return new Promise((n,r)=>{let a=!1,o,c={reject(e){a||(l(),i.emit(Iy.client.error,e,t),r(e))}};function l(){a=!0,p.delete(c),o&&clearTimeout(o)}p.add(c),s>0&&(o=setTimeout(()=>{c.reject(new US(`timeout`,`[devframe] RPC call "${t}" timed out after ${s}ms`))},s)),e.then(e=>{a||(l(),n(e))},e=>{if(a)return;l();let n=e instanceof Error?e:Error(String(e));i.emit(Iy.client.error,n,t),r(n)})})}let g=new Map;for(let e of r.jsonSerializableMethods??[])g.set(e,{jsonSerializable:!0});let te=e.createChannel({definitions:g,onError(e){f(`error`,e),i.emit(Iy.client.connectionError,e),m(new US(`connection`,`[devframe] Connection to the devframe server failed`,{cause:e}))},onDisconnected(){l!==`error`&&f(`disconnected`),m(new US(`connection`,`[devframe] Disconnected from the devframe server`,{cause:u??void 0}))}}),ne=nC(a.functions,{channel:te,rpcOptions:o});a.register({name:Iy.broadcast.authRevoked,type:`event`,handler:()=>{c=!1;let e=new US(`auth`,`[devframe] The devframe server revoked this client's trust`);f(`unauthorized`,e),i.emit(Iy.client.connectionError,e),m(e),i.emit(Iy.client.isTrustedUpdated,!1)}});let re=n;async function ie(e){re=e;let t=await ne.$call(`anonymous:devframe:auth`,{authToken:e,ua:navigator.userAgent,origin:location.origin});if(c=t.isTrusted,c)d.resolve(!0),f(`connected`);else{let e=new US(`auth`,`[devframe] The devframe server refused this client's credentials`);f(`unauthorized`,e),i.emit(Iy.client.connectionError,e)}return i.emit(Iy.client.isTrustedUpdated,c),t.isTrusted}async function ae(e){let t=(await ne.$call(`anonymous:devframe:auth:exchange`,{code:e,ua:navigator.userAgent,origin:location.origin}))?.authToken??null;return t&&(re=t,c=!0,d.resolve(!0),f(`connected`),i.emit(Iy.client.isTrustedUpdated,!0)),t}async function oe(e={}){await ne.$call(`anonymous:devframe:auth:request-code`,{ua:navigator.userAgent,origin:location.origin,...e.reissue?{reissue:!0}:{}})}async function se(){return c?!0:ie(re??``)}async function ce(e=6e4){if(c&&d.resolve(!0),e<=0)return d.promise;let t;try{return await Promise.race([d.promise,new Promise((n,r)=>{t=setTimeout(()=>{r(Error(`[devframe] Timeout waiting for rpc to be trusted`))},e)})]),c}finally{clearTimeout(t)}}return{transport:t,get isTrusted(){return c},get status(){return l},get connectionError(){return u},requestTrust:se,requestTrustWithToken:ie,requestTrustWithCode:ae,requestAuthCode:oe,ensureTrusted:ce,call:(...e)=>{let t=String(e[0]),n=ee();return n?(i.emit(Iy.client.error,n,t),Promise.reject(n)):h(ne.$call(...e),t)},callEvent:(...e)=>{let t=ee();if(t){i.emit(Iy.client.error,t,String(e[0]));return}return ne.$callEvent(...e)},callOptional:(...e)=>{let t=String(e[0]),n=ee();return n?(i.emit(Iy.client.error,n,t),Promise.reject(n)):h(ne.$callOptional(...e),t)},close:()=>{te.close()}}}function iC(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})();if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`;return new URL(e.path??`/`,`${r.protocol}//${t}`).href}return new URL(e.path??``,r).href}let i=e??``;return/^https?:\/\//i.test(i)?i:new URL(i,r).href}function aC(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},sseOptions:s={},callTimeout:c=0}=e,l=iC(n.sse,r??`./`,location);return rC({transport:`sse`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>tC({url:l,authToken:t,definitions:e.definitions,...s,onConnected(){s.onConnected?.()},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(){e.onDisconnected(),s.onDisconnected?.()}})})}function oC(e){let{name:t,message:n,cause:r,...i}=e,a=r instanceof Error?r:sC(r)?oC(r):r,o=a===void 0?Error(n):Error(n,{cause:a});return o.name=t,Object.assign(o,i),o}function sC(e){return typeof e==`object`&&!!e&&typeof e.message==`string`&&typeof e.name==`string`}function cC(e){return typeof e==`object`&&!!e&&e.type===`static`&&typeof e.path==`string`}function lC(e){return typeof e==`object`&&!!e&&e.type===`query`&&typeof e.records==`object`&&e.records!==null}function uC(e){return typeof e==`object`&&!!e&&(`output`in e||`error`in e)}function dC(e){if(e.error)throw oC(e.error);return e.output}function fC(e){return e.some(e=>e!=null)}function pC(e){return typeof e==`object`&&e&&`serialization`in e&&`data`in e?e.data:e}function mC(e,t){let n=new Map,r=new Map;function i(e,t){return t===`structured-clone`&&Array.isArray(e)?Xx(e):e}function a(e,t){return i(pC(e),t)}async function o(e){n.has(e.path)||n.set(e.path,t(e.path).then(t=>a(t,e.serialization)));let r=await n.get(e.path);return uC(r)?dC(r):r}async function s(e,n){return r.has(e)||r.set(e,t(e).then(e=>a(e,n))),await r.get(e)}async function c(t,n){if(!(t in e))throw Error(`[devframe-rpc] Function "${t}" not found in dump store`);let r=e[t];if(cC(r)){if(fC(n))throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`);return await o(r)}if(lC(r)){let e=Gy(n),i=r.records[e];if(i)return dC(await s(i,r.serialization));if(r.fallback)return dC(await s(r.fallback,r.serialization));throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}if(!fC(n))return r;throw Error(`[devframe-rpc] No dump match for "${t}" with args: ${JSON.stringify(n)}`)}return{call:async(e,t)=>await c(e,t),callOptional:async(t,n)=>{if(t in e)return await c(t,n)},callEvent:async(e,t)=>{}}}async function hC(e){let t=mC(await e.fetchJsonFromBases(pS),e.fetchJsonFromBases);return{transport:`static`,isTrusted:!0,status:`connected`,connectionError:null,requestTrust:async()=>!0,requestTrustWithToken:async()=>!0,requestTrustWithCode:async()=>null,requestAuthCode:async()=>{},ensureTrusted:async()=>!0,call:(...e)=>t.call(e[0],e.slice(1)),callEvent:(...e)=>t.callEvent(e[0],e.slice(1)),callOptional:(...e)=>t.callOptional(e[0],e.slice(1)),close:()=>{}}}var gC=``;function _C(e,t){return`${e}${gC}${t}`}function vC(e){let t=new Map,n=new Map;e.client.register({name:Iy.broadcast.streamingChunk,type:`event`,handler(e,n,r,i){t.get(_C(e,n))?._push(r,i)}}),e.client.register({name:Iy.broadcast.streamingEnd,type:`event`,handler(e,n,r){let i=_C(e,n),a=t.get(i);a&&(a._end(r),t.delete(i))}}),e.client.register({name:Iy.broadcast.streamingUploadCancel,type:`event`,handler(e,t){let r=_C(e,t),i=n.get(r);i&&(i.abort(`server cancelled upload`),n.delete(r))}}),e.events.on(Iy.client.isTrustedUpdated,n=>{if(n)for(let[n,r]of t){if(r.cancelled||r.done)continue;let t=n.indexOf(gC);if(t<0)continue;let i=n.slice(0,t),a=n.slice(t+1);e.callEvent(`devframe:streaming:subscribe`,i,a,{afterSeq:r.lastSeenSeq})}});function r(n,r,i={}){let a=_C(n,r),o=t.get(a);if(o)return o;let s=nS({id:r,highWaterMark:i.highWaterMark,onOverflow(e){console.warn(`[devframe] DF0029: Stream "${n}#${r}" dropped ${e} chunk(s) after exceeding the client high-water mark.`)},onCancel(){e.callEvent(`devframe:streaming:cancel`,n,r),t.delete(a)}});if(t.set(a,s),e.isTrusted)e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:0});else{let i=e.events.on(Iy.client.isTrustedUpdated,o=>{o&&(i(),t.has(a)&&!s.cancelled&&!s.done&&e.callEvent(`devframe:streaming:subscribe`,n,r,{afterSeq:s.lastSeenSeq}))})}return s}function i(t,r){let i=_C(t,r),a=n.get(i);if(a)return a;let o=tS({id:r});return o.events.on(`chunk`,(n,i)=>{e.callEvent(`devframe:streaming:upload-chunk`,t,r,n,i)}),o.events.on(`end`,a=>{e.callEvent(`devframe:streaming:upload-end`,t,r,a),n.delete(i)}),n.set(i,o),o}return{subscribe:r,upload:i}}function yC(){}var bC=new Map;function xC(e){let t=e.url;e.authToken&&(t=`${t}?${gS}=${encodeURIComponent(e.authToken)}`);let n=new WebSocket(t),{onConnected:r=yC,onError:i=yC,onDisconnected:a=yC,definitions:o=bC}=e;n.addEventListener(`open`,e=>{r(e)}),n.addEventListener(`error`,e=>{let t=e instanceof Error?e:Error(e.type);i(t)}),n.addEventListener(`close`,e=>{a(e)});let s=ZS(o);return{close:()=>{n.close()},on:e=>{n.addEventListener(`message`,t=>{e(t.data)})},post:e=>{if(n.readyState===WebSocket.OPEN){n.send(e);return}if(n.readyState===WebSocket.CONNECTING){let t=()=>{i(),n.readyState===WebSocket.OPEN&&n.send(e)},r=()=>i();function i(){n.removeEventListener(`open`,t),n.removeEventListener(`close`,r)}n.addEventListener(`open`,t),n.addEventListener(`close`,r);return}i(Error(`Devframe WebSocket is not open; message dropped`))},serialize:s.serialize,deserialize:s.deserialize}}function SC(e,t,n){let r=(()=>{try{return new URL(t,n.href)}catch{return new URL(n.href)}})(),i=r.protocol===`https:`?`wss:`:`ws:`;if(e&&typeof e==`object`){if(e.host!=null||e.port!=null){let t=e.host??`${r.hostname}:${e.port}`,n=new URL(e.path??`/`,`${i}//${t}`);return n.protocol=i,n.href}let t=new URL(e.path??``,r);return t.protocol=i,t.href}if(typeof e==`number`)return`${i}//${r.hostname}:${e}`;let a=e??``;if(/^wss?:\/\//i.test(a))return a;if(/^https?:\/\//i.test(a))return Qy(a,/^https/i.test(a)?`wss://`:`ws://`);let o=new URL(a,r);return o.protocol=i,o.href}function CC(e){let{authToken:t,connectionMeta:n,metaBaseUrl:r,events:i,clientRpc:a,rpcOptions:o={},wsOptions:s={},callTimeout:c=0}=e,l=SC(n.websocket,r??`./`,location);return rC({transport:`websocket`,authToken:t,connectionMeta:n,events:i,clientRpc:a,rpcOptions:o,callTimeout:c,createChannel:e=>xC({url:l,authToken:t,definitions:e.definitions,...s,onConnected(e){s.onConnected?.(e)},onError(t){e.onError(t),s.onError?.(t)},onDisconnected(t){e.onDisconnected(),s.onDisconnected?.(t)}})})}function wC(e){return e.includes(`:`)}function TC(e,t){return wC(t)?t:`${e}:${t}`}function EC(e){return{async get(t){return(await e()).value()?.[t]},async set(t,n){(await e()).mutate(e=>{if(e===void 0)return{[t]:n};e[t]=n})},async delete(t){(await e()).mutate(e=>{e!==void 0&&delete e[t]})},async all(){return(await e()).value()??{}},async onChange(t){return(await e()).on(`updated`,e=>t(e??{}))}}}function DC(e,t,n){let r=`devframe:settings:${n}:${t}`,i;function a(){return i||=(async()=>(await e.ensureTrusted(),e.sharedState.get(r)))().catch(e=>{throw i=void 0,e}),i}return EC(a)}function OC(e,t){return{global:DC(e,t,`global`),project:DC(e,t,`project`)}}function kC(e,t){return{namespace:t,base:e,rpc:{namespace:t,register(n){if(wC(n.name))throw Error(`[devframe] Scoped client RPC registration for namespace "${t}" received an already-namespaced function name "${n.name}". Pass a bare name without a ":" separator.`);e.client.register({...n,name:`${t}:${n.name}`})},call:((n,...r)=>e.call(TC(t,n),...r)),callEvent:((n,...r)=>e.callEvent(TC(t,n),...r)),callOptional:((n,...r)=>e.callOptional(TC(t,n),...r)),sharedState:((n,r)=>e.sharedState.get(TC(t,n),r)),streaming:{subscribe:(n,r,i)=>e.streaming.subscribe(TC(t,n),r,i),upload:(n,r)=>e.streaming.upload(TC(t,n),r)}},settings:OC(e,t),scope:e.scope}}function AC(){if(typeof document<`u`){let e=document.modelContext;if(e)return e}if(typeof navigator<`u`){let e=navigator.modelContext;if(e)return e}}function jC(e,t={}){let n=t.modelContext??AC();if(!n)return()=>{};let r=n,i=new Map,a=new Map;function o(t,n){let o=aS(t.name),s=a.get(o);if(s&&s!==t.name){console.warn(`[devframe] WebMCP tool name "${o}" (from "${t.name}") collides with "${s}"; keeping the first registration.`);return}let c=new AbortController,l=kre(t.type,n),u=r.registerTool({name:o,description:n.description,inputSchema:jre(t.args),annotations:{title:n.title??t.name,readOnlyHint:l===`read`,destructiveHint:l===`destructive`},execute:n=>MC(t,e.context,n)},{signal:c.signal});u&&`then`in u&&u.then(()=>{},()=>{}),a.set(o,t.name),i.set(t.name,()=>{c.abort(),u&&`unregister`in u&&typeof u.unregister==`function`&&u.unregister(),a.delete(o)})}function s(t){let n=t?[t]:[...e.definitions.keys()];for(let t of n){i.get(t)?.(),i.delete(t);let n=e.definitions.get(t),r=n?.agent;n&&r&&o(n,r)}}s();let c=e.onChanged(e=>s(e));return()=>{c();for(let e of i.values())e();i.clear()}}async function MC(e,t,n){try{let r=Nre(n,e.args?.length);return{content:[{type:`text`,text:NC(await(await TS(e,t))(...r))}]}}catch(e){return{isError:!0,content:[{type:`text`,text:PC(e)}]}}}function NC(e){return e===void 0?`undefined`:typeof e==`string`?e:JSON.stringify(e,null,2)}function PC(e){if(!(e instanceof Error))return String(e);let t=e.cause instanceof Error?` (cause: ${e.cause.message})`:``;return`${e.name}: ${e.message}${t}`}function FC(e,t){if(t.backend===`static`)return`static`;let n=t.websocket!==void 0,r=t.sse!==void 0;if(e===`websocket`){if(!n)throw Error(`[devframe] transport: 'websocket' was requested, but this server does not advertise a WebSocket endpoint`);return`websocket`}if(e===`sse`){if(!r)throw Error(`[devframe] transport: 'sse' was requested, but this server does not advertise an SSE endpoint`);return`sse`}if(t.backend===`sse`&&r)return`sse`;if(n)return`websocket`;if(r)return`sse`;throw Error(`[devframe] This server advertises no RPC transport (backend "none"), so there is nothing to connect to. Enable the WebSocket or SSE endpoint on the server, or use its static/MCP surfaces instead.`)}async function IC(e={}){let{baseURL:t=`./`,rpcOptions:n={},cacheOptions:r=!1}=e,i=Ky(),a=Array.isArray(t)?t:[t],o=await HS(e),{connectionMeta:s,metaBaseUrl:c,authToken:l}=o,u=a[0]??`./`;try{u=new URL(`.`,c).href}catch{}let d=new _S({functions:[],...typeof e.cacheOptions==`object`?e.cacheOptions:{}}),f={rpc:void 0},p=new ES(f),m=e.webmcp===!1?void 0:jC(p),ee,h=!1,g=0,te;function ne(){g++,te=void 0,d.clear(),r===!0&&d.updateOptions({functions:[]})}r&&(p.register({name:Iy.broadcast.cacheInvalidate,type:`event`,handler:ne}),i.on(Iy.client.connectionStatus,ne),i.on(Iy.client.isTrustedUpdated,ne));async function re(e){let t=[u,...a.filter(e=>e!==u)].filter(e=>e!=null),n=[];for(let r of t)try{return await fetch(Zy(e,r)).then(t=>{if(!t.ok)throw Error(`Failed to fetch ${e} from ${r}: ${t.status}`);return t.json()})}catch(e){n.push(e)}throw Error(`Failed to load ${e} from ${t.join(`, `)}`,{cause:n})}let ie=e.callTimeout??0,ae=ie>0?ie:1/0,oe,se={authToken:l,connectionMeta:s,metaBaseUrl:c,events:i,clientRpc:p,callTimeout:e.callTimeout,rpcOptions:{...n,async onRequest(e,t,i){let a=performance.now()+ae;if(await n.onRequest?.call(this,e,t,i),r===!0&&e.i&&oe.isTrusted&&!e.m.startsWith(`anonymous:`)&&e.m!==`devframe:rpc:cacheable-functions`){function t(){if(performance.now()>=a)throw new US(`timeout`,`[devframe] RPC call "${e.m}" timed out after ${ie}ms`)}for(;!te&&(t(),!(h||oe.status!==`connected`));){let e=g;te=oe.callOptional(`devframe:rpc:cacheable-functions`).then(t=>{e===g&&d.updateOptions({functions:t??[]})}).catch(t=>{throw e===g&&(te=void 0),t}),await te}await te,t()}let o=g;if(r&&e.i&&!h&&oe.isTrusted&&d.validate(e.m)){if(d.has(e.m,e.a))return i(d.cached(e.m,e.a));let n=await t(e);o===g&&!h&&d.apply(e,n)}else await t(e)}}},ce=FC(e.transport??`auto`,s);oe=ce===`static`?await hC({fetchJsonFromBases:re}):ce===`sse`?aC({...se,sseOptions:e.sseOptions}):CC({...se,wsOptions:e.wsOptions});let le;try{le=new BroadcastChannel(`devframe-auth`)}catch{}let ue,de=!1;function fe(e){return((...t)=>de||!ue?e(...t):ue.then(()=>e(...t)))}function pe(){h=!0,ne();try{ee?.(),m?.()}finally{try{le?.close()}finally{oe.close?.()}}}let me={events:i,get isTrusted(){return oe.isTrusted},get status(){return oe.status},get connectionError(){return oe.connectionError},get transport(){return oe.transport??ce},get connection(){return o},connectionMeta:s,ensureTrusted:oe.ensureTrusted,requestTrust:oe.requestTrust,requestTrustWithToken:async e=>(RS(e),o={...o,authToken:e},oe.requestTrustWithToken(e)),requestTrustWithCode:async e=>{let t=await oe.requestTrustWithCode(e);if(!t)return!1;RS(t),o={...o,authToken:t};try{le?.postMessage({type:`auth-update`,authToken:t})}catch{}return!0},requestAuthCode:e=>oe.requestAuthCode(e),call:fe(oe.call),callEvent:fe(oe.callEvent),callOptional:fe(oe.callOptional),client:p,sharedState:void 0,services:void 0,streaming:void 0,cacheManager:d,scope:void 0,close:pe};me.sharedState=YS(me),me.streaming=vC(me),me.services=JS(me);let he=new Map;me.scope=(e=>{if(!e)return me;let t=he.get(e);return t||(t=kC(me,e),he.set(e,t)),t}),f.rpc=me;function ge(){try{return typeof window<`u`&&window.self===window.top}catch{return!1}}async function _e(){if(e.simpleAuth!==!1&&ge()&&typeof globalThis.prompt==`function`)for(await me.requestAuthCode().catch(()=>{});!me.isTrusted;){let e=globalThis.prompt(`devframe: enter the authentication code shown in your terminal`);if(e==null)return;let t=e.trim();if(t&&await me.requestTrustWithCode(t))return}}async function ve(){let t=await oe.requestTrust(),n=e.otpParam??`devframe_otp`,r=n?await qS(me,{param:n}):!1;t||r||me.isTrusted||await _e()}return ue=ve().then(()=>{de=!0},()=>{de=!0}),s.mcp&&lS(async()=>{let{setupBrowserAgentRpcBridge:e}=await import(`./browser-agent-rpc-KH4HHvHf-uq6ycX2u.js`);return{setupBrowserAgentRpcBridge:e}},[],import.meta.url).then(({setupBrowserAgentRpcBridge:e})=>{h||(ee=e(me))}).catch(()=>{}),le&&(le.onmessage=e=>{e.data?.type===`auth-update`&&e.data.authToken&&me.requestTrustWithToken(e.data.authToken)}),me}var LC=IC,RC=[`components`,`injectors`,`signals`,`ngrx`,`tanstackQuery`,`forms`,`router`,`pipes`,`http`,`analog`,`capacitor`,`errors`,`plugins`,`performance`,`build`],zC=[`angular`,`ngrx`,`analog`,`angular-native`,`nativescript`,`capacitor`];function BC(e){return`pangular:${e}`}var VC=[`forms`,`router`,`ngrx`,`http`,`analog`,`components`,`tanstackQuery`,`plugins`],HC={refreshMs:{default:3e3,min:500,max:8e3},navigations:{default:50,min:5,max:500},formTimeline:{default:200,min:10,max:2e3},httpCalls:{default:200,min:10,max:2e3},changeLog:{default:200,min:10,max:2e3},cdCycles:{default:200,min:10,max:2e3},cdSlowMs:{default:16,min:1,max:1e3},capacitorCalls:{default:200,min:10,max:2e3},idleAfterMs:{default:6e4,min:0,max:6e5}},UC={"opted-out":`the request sets transferCache: false`,post:`POST requests are left out unless includePostRequests is set`,method:`only GET, HEAD and POST requests are cached`,"auth-headers":`it sends an Authorization, Proxy-Authorization or Cookie header`,credentials:`it sends credentials (withCredentials or credentials: include/same-origin)`,"no-cache-request":`the request asks for no-store, no-cache or private`,"no-cache-response":`the response has Cache-Control no-store, no-cache or private`,"set-cookie":`the response sets a cookie`,error:`failed responses are not stored`,mocked:`a fault rule answered before the transfer cache ran`,filter:`the transferCache filter passed to withPangular() left it out`,"cache-off-or-filter":`the transfer cache is off, or its filter (or another withHttpTransferCacheOptions setting) left it out`},WC=[[0,`Network error (offline)`],[200,`OK`],[201,`Created`],[202,`Accepted`],[203,`Non-Authoritative Information`],[204,`No Content`],[205,`Reset Content`],[206,`Partial Content`],[207,`Multi-Status`],[208,`Already Reported`],[226,`IM Used`],[300,`Multiple Choices`],[301,`Moved Permanently`],[302,`Found`],[303,`See Other`],[304,`Not Modified`],[307,`Temporary Redirect`],[308,`Permanent Redirect`],[400,`Bad Request`],[401,`Unauthorized`],[402,`Payment Required`],[403,`Forbidden`],[404,`Not Found`],[405,`Method Not Allowed`],[406,`Not Acceptable`],[407,`Proxy Authentication Required`],[408,`Request Timeout`],[409,`Conflict`],[410,`Gone`],[411,`Length Required`],[412,`Precondition Failed`],[413,`Content Too Large`],[414,`URI Too Long`],[415,`Unsupported Media Type`],[416,`Range Not Satisfiable`],[417,`Expectation Failed`],[418,`I'm a Teapot`],[421,`Misdirected Request`],[422,`Unprocessable Content`],[423,`Locked`],[424,`Failed Dependency`],[425,`Too Early`],[426,`Upgrade Required`],[428,`Precondition Required`],[429,`Too Many Requests`],[431,`Request Header Fields Too Large`],[451,`Unavailable For Legal Reasons`],[499,`Client Closed Request`],[500,`Internal Server Error`],[501,`Not Implemented`],[502,`Bad Gateway`],[503,`Service Unavailable`],[504,`Gateway Timeout`],[505,`HTTP Version Not Supported`],[506,`Variant Also Negotiates`],[507,`Insufficient Storage`],[508,`Loop Detected`],[510,`Not Extended`],[511,`Network Authentication Required`],[520,`Web Server Returned an Unknown Error`],[521,`Web Server Is Down`],[522,`Connection Timed Out`],[523,`Origin Is Unreachable`],[524,`A Timeout Occurred`]];function GC(e){return WC.some(([t])=>t===e)}var KC=/^[a-z][a-z0-9-]{0,39}$/;function qC(e,t){let n=t.plugins?.[e],r=t.inspectors.plugins&&KC.test(e)&&(n?.enabled??!0);return{enabled:r,tools:r&&t.agent.tools.plugins&&(n?.tools??!0),actions:r&&t.actions.plugins&&(n?.actions??!0)}}var JC=`pangular`,YC={mod:`Mod`,ctrl:`Ctrl`,control:`Ctrl`,meta:`Meta`,cmd:`Meta`,command:`Meta`,alt:`Alt`,option:`Alt`,opt:`Alt`,shift:`Shift`},XC=[`Mod`,`Ctrl`,`Meta`,`Alt`,`Shift`];function ZC(e){if(typeof e!=`string`||e.length>40)return;let t=e.split(`+`).map(e=>e.trim());if(t.some(e=>!e))return;let n=new Set,r;for(let e of t){let t=YC[e.toLowerCase()];if(t){if(n.has(t))return;n.add(t);continue}if(r!==void 0)return;if(/^[a-z0-9]$/i.test(e))r=e.toUpperCase();else if(/^f([1-9]|1[0-2])$/i.test(e))r=e.toUpperCase();else return}if(r&&[...n].some(e=>e!==`Shift`)&&!(n.has(`Mod`)&&(n.has(`Ctrl`)||n.has(`Meta`))))return[...XC.filter(e=>n.has(e)),r].join(`+`)}function QC(e,t,n){let r=t.split(`+`),i=r.pop(),a=new Set(r),o=a.has(`Ctrl`)||a.has(`Mod`)&&!n,s=a.has(`Meta`)||a.has(`Mod`)&&n;if(e.ctrlKey!==o||e.metaKey!==s||e.altKey!==a.has(`Alt`)||e.shiftKey!==a.has(`Shift`))return!1;if(/^F\d+$/.test(i))return e.key.toUpperCase()===i;let c=/^\d$/.test(i)?`Digit${i}`:`Key${i}`;return e.code?e.code===c:e.key.toUpperCase()===i}function $C(e,t){if(!t)return e.replace(/^Mod\b/,`Ctrl`);let n={Mod:`⌘`,Meta:`⌘`,Ctrl:`⌃`,Alt:`⌥`,Shift:`⇧`};return e.split(`+`).map(e=>n[e]??e).join(``)}var ew=[{id:`dashboard`,label:`Dashboard`},{id:`timeline`,label:`Timeline`},{id:`audit`,label:`Audit`},{id:`analog`,label:`Analog`,inspector:`analog`},{id:`components`,label:`Components`,inspector:`components`},{id:`routes`,label:`Routes`,inspector:`router`},{id:`signals`,label:`Signals`,inspector:`signals`},{id:`injectors`,label:`Injectors`,inspector:`injectors`},{id:`store`,label:`Store`,inspector:`ngrx`},{id:`queries`,label:`Queries`,inspector:`tanstackQuery`},{id:`forms`,label:`Forms`,inspector:`forms`},{id:`pipes`,label:`Pipes`,inspector:`pipes`},{id:`network`,label:`SSR & HTTP`,inspector:`http`},{id:`errors`,label:`Errors`,inspector:`errors`},{id:`performance`,label:`Performance`,inspector:`performance`},{id:`build`,label:`Build`,inspector:`build`},{id:`capacitor`,label:`Capacitor`,inspector:`capacitor`},{id:`plugins`,label:`Plugins`,inspector:`plugins`}],tw=1e4;function nw(e){return ew.filter(t=>!(`inspector`in t)||e.inspectors[t.inspector])}var rw={components:`a component instance, by its id in the component tree`,injectors:`a component's element injector, by the component's id`,signals:`a component's signal graph, by the component's id`,forms:`a form, by its id`},iw=200;function aw(e){let t=new URLSearchParams({tab:e.tab});return e.id&&t.set(`id`,e.id),e.page&&t.set(`page`,e.page),`#${t.toString()}`}function ow(e){let t=new URLSearchParams(e.replace(/^#/,``)),n=e=>{let n=t.get(e)?.trim();return n&&n.length<=iw?n:void 0},r=n(`tab`);if(!r)return null;let i=n(`id`),a=n(`page`);return{tab:r,...i?{id:i}:{},...a?{page:a}:{}}}var sw=[{id:`settings`,title:`Open settings`,group:`Go to`,keywords:`preferences tabs`},{id:`pick-component`,title:`Pick component on page`,group:`Actions`,keywords:`select inspect element`,inspector:`components`},{id:`cd-record-start`,title:`Start recording change detection`,group:`Actions`,keywords:`profiler cycles`,inspector:`components`},{id:`cd-record-stop`,title:`Stop recording change detection`,group:`Actions`,keywords:`profiler cycles`,inspector:`components`},{id:`cd-clear`,title:`Clear change detection recording`,group:`Actions`,keywords:`reset recordings cycles`,inspector:`components`},{id:`theme:system`,title:`Theme: follow the system`,group:`Theme`,keywords:`auto`},{id:`theme:light`,title:`Theme: light`,group:`Theme`},{id:`theme:dark`,title:`Theme: dark`,group:`Theme`},{id:`dock:float`,title:`Popup: float`,group:`Popup`,keywords:`dock`,popupOnly:!0},{id:`dock:bottom`,title:`Popup: dock to the bottom`,group:`Popup`,keywords:`dock`,popupOnly:!0},{id:`dock:right`,title:`Popup: dock to the right`,group:`Popup`,keywords:`dock`,popupOnly:!0},{id:`dock:reset-size`,title:`Popup: reset the docked size`,group:`Popup`,keywords:`splitter resize height width`,popupOnly:!0},{id:`popout`,title:`Popup: open in its own window`,group:`Popup`,keywords:`pop out detach new window`,popupOnly:!0},{id:`popout:return`,title:`Popup: back into the page`,group:`Popup`,keywords:`pop in attach dock window`,popupOnly:!0}];function cw(e){let t=nw(e).map(e=>({id:`tab:${e.id}`,title:`Go to ${e.label}`,group:`Go to`,keywords:`tab open`})),n=sw.filter(t=>!t.inspector||e.inspectors[t.inspector]).map(({inspector:e,...t})=>t);return[...t,...n]}function lw(e){return e&&typeof e==`object`&&!Array.isArray(e)?e:{}}var uw=Object.freeze({minLength:24,threshold:4.5}),dw={min:16,max:512},fw={min:2,max:6};function pw(e){return typeof e==`number`&&Number.isInteger(e)&&e>=dw.min&&e<=dw.max}function mw(e){return typeof e==`number`&&Number.isFinite(e)&&e>=fw.min&&e<=fw.max}function hw(e){if(e===!0)return{...uw};if(!e||typeof e!=`object`||Array.isArray(e))return;let{minLength:t,threshold:n}=e;return{minLength:pw(t)?t:uw.minLength,threshold:mw(n)?n:uw.threshold}}function gw(e){let t=hw(e);return t?{entropy:t}:{}}function _w(e,t){return typeof e==`boolean`?e:t}var vw=100,yw=100;function bw(e){if(!Array.isArray(e))return[];let t=e.filter(e=>typeof e==`string`).map(e=>e.trim()).filter(e=>e&&e.length<=yw);return[...new Set(t)].slice(0,vw)}function xw(e,t){let{default:n,min:r,max:i}=HC[t];return typeof e!=`number`||!Number.isFinite(e)?n:Math.min(i,Math.max(r,Math.round(e)))}function Sw(e,t){return Object.fromEntries(e.map(e=>[e,t(e)]))}function Cw(e){let t=lw(e),n=lw(t.agent),r=lw(t.inspectors),i=lw(n.tools),a=lw(t.actions),o=_w(t.actions,!0),s=lw(t.redaction),c=lw(t.limits),l=Sw(RC,e=>_w(r[e],!0));return{inspectors:l,agent:{readOnly:_w(n.readOnly,!1),tools:Sw(RC,e=>l[e]&&_w(i[e],!0)),browserTools:_w(n.browserTools,!1)},actions:Sw(VC,e=>l[e]&&_w(a[e],o)),redaction:{secretNames:bw(s.secretNames),unmask:bw(s.unmask),...gw(s.entropy)},limits:Object.fromEntries(Object.keys(HC).map(e=>[e,xw(c[e],e)])),popup:{hotkey:Aw(lw(t.popup).hotkey)},plugins:kw(t.plugins),lint:{rules:Dw(t.lint)},analog:Tw(t.analog),ngrx:{trace:_w(lw(t.ngrx).trace,!1)}}}var ww=500;function Tw(e){let t=lw(e).contentSchema;return typeof t==`string`&&t.trim()&&t.length<=ww?{contentSchema:t.trim()}:{}}var Ew=200;function Dw(e){let t=lw(lw(e).rules),n={};for(let[e,r]of Object.entries(t).slice(0,Ew))typeof r==`boolean`&&(n[e]=r);return n}var Ow=100;function kw(e){let t={};for(let[n,r]of Object.entries(lw(e)).slice(0,Ow)){if(!KC.test(n))continue;if(typeof r==`boolean`){t[n]={enabled:r,tools:!0,actions:!0};continue}let e=lw(r);r!==void 0&&Object.keys(e).length&&(t[n]={enabled:_w(e.enabled,!0),tools:_w(e.tools,!0),actions:_w(e.actions,!0)})}return t}function Aw(e){return e===!1?!1:ZC(e)??`Alt+Shift+P`}function jw(e){let t=e?.configs;return Cw(t?.[JC])}function Mw(e){return`${{forms:`Writing to forms`,router:`Navigating and clearing navigations`,ngrx:`Restoring NgRx state, dispatching actions and changing the Store DevTools history`,http:`Changing HTTP mock rules and SSR overrides, refetching the TransferState payload, and clearing HTTP calls`,analog:`Calling API routes, clearing server calls, running Nitro tasks and purging the Nitro cache`,components:`Editing component properties and signals`,tanstackQuery:`Invalidating and refetching TanStack queries`,plugins:`Running plugin actions`}[e]} is turned off in the devtools config (actions.${e}).`}var Nw=[`pangular:build-meta`],Pw={components:`Components`,injectors:`Injectors`,signals:`Signals`,ngrx:`NgRx`,tanstackQuery:`TanStack Query`,forms:`Forms`,router:`Router`,pipes:`Pipes`,http:`HTTP`,analog:`Analog`,capacitor:`Capacitor`,errors:`Errors`,plugins:`Plugins`,performance:`Performance`,build:`Build`},Fw={forms:`Form writes`,router:`Navigation`,ngrx:`NgRx restore, dispatch and Store DevTools`,http:`HTTP mocking`,analog:`Analog API calls`,components:`Component edits`,tanstackQuery:`TanStack Query invalidate and refetch`,plugins:`Plugin actions`},Iw={refreshMs:e=>`poll every ${e} ms`,navigations:e=>`${e} navigations`,formTimeline:e=>`${e} form events`,httpCalls:e=>`${e} HTTP calls`,changeLog:e=>`${e} NgRx changes`,cdCycles:e=>`${e} change detection cycles`,cdSlowMs:e=>`slow cycles over ${e} ms`,capacitorCalls:e=>`${e} Capacitor plugin calls`,idleAfterMs:e=>e?`idle ${e/1e3} s after the last agent call`:`never idle`};function Lw(e){if(!e)return[];let t=[`On`];return e.minLength!==uw.minLength&&t.push(`${e.minLength} characters or more`),e.threshold!==uw.threshold&&t.push(`up to ${e.threshold} bits per character`),t}function Rw(e){let t=[],n=(e,n)=>{n.length&&t.push({label:e,value:n.join(`, `)})},r=RC.filter(t=>e.inspectors[t]);n(`Inspectors off`,RC.filter(t=>!e.inspectors[t]).map(e=>Pw[e])),n(`Agent`,e.agent.readOnly?[`Read-only`]:[]),n(`Hidden from the agent`,r.filter(t=>!e.agent.tools[t]).map(e=>Pw[e])),n(`Blocked actions`,VC.filter(t=>e.inspectors[t]&&!e.actions[t]).map(e=>Fw[e])),n(`Extra secret names`,e.redaction.secretNames),n(`Unmasked names`,e.redaction.unmask),n(`Entropy masking`,Lw(e.redaction.entropy)),n(`Limits`,Object.keys(HC).filter(t=>e.limits[t]!==HC[t].default).map(t=>Iw[t](e.limits[t]))),e.popup.hotkey!==`Alt+Shift+P`&&n(`Popup shortcut`,[e.popup.hotkey===!1?`Off`:e.popup.hotkey]);let i=Object.entries(e.plugins??{});return n(`Plugins off`,i.filter(([,e])=>!e.enabled).map(([e])=>e)),n(`Plugin tools or actions off`,i.filter(([,e])=>e.enabled&&(!e.tools||!e.actions)).map(([e,t])=>`${e} (${[!t.tools&&`tools`,!t.actions&&`actions`].filter(Boolean).join(`, `)})`)),n(`Lint rules off`,Object.entries(e.lint?.rules??{}).filter(([,e])=>!e).map(([e])=>e)),t}function zw(e){let t={tags:[],directives:[],text:``},n=e.toLowerCase();return n=n.replace(/<\s*([^<>\s]+)\s*>/g,(e,n)=>(t.tags.push({value:n,exact:!0}),` `)),n=n.replace(/\[\s*([^[\]\s]+)\s*\]/g,(e,n)=>(t.directives.push({value:n,exact:!0}),` `)),n=n.replace(/(^|\s)([<[])([^<>[\]\s]*)$/,(e,n,r,i)=>(i&&(r===`<`?t.tags:t.directives).push({value:i,exact:!1}),n)),t.text=n.replace(/\s+/g,` `).trim(),t}function Bw(e){return!e.tags.length&&!e.directives.length&&!e.text}function Vw(e,t){let n=e.tag.toLowerCase(),r=(e.directives??[]).map(e=>e.toLowerCase()),i=(e.attributes??[]).map(e=>e.toLowerCase()),a=[...r,...r.map(e=>e.replace(/directive$/,``)),...i];for(let{value:e,exact:r}of t.tags)if(r?n!==e:!n.startsWith(e))return!1;for(let{value:e,exact:n}of t.directives)if(!a.some(t=>n?t===e:t.includes(e)))return!1;if(t.text){let a=t.text;if(!(e.name.toLowerCase().includes(a)||n.includes(a)||r.some(e=>e.includes(a))||i.some(e=>e.includes(a))))return!1}return!0}var Hw={debugApi:{subject:`Live data`,since:`12.0`},injectorProviders:{subject:`Reading providers and environment injectors`,since:`16.2`},injectorMetadata:{subject:`The full injector tree`,since:`17.0`},isSignal:{subject:`Telling signals apart in component values`,since:`17.1`},signalGraph:{subject:`The live signal graph`,since:`20.1`},deferBlocks:{subject:`Listing @defer blocks`,since:`19.1`},forBlocks:{subject:`Listing @for blocks`,since:`22.0`},profiler:{subject:`Recording change detection`,since:`20.0`},angularProfiling:{subject:`Angular profiling`,since:`20.0`},routerInstance:{subject:`The router debug util`,since:`20.3`}};function Uw(e){let t=/^(\d+)\.(\d+)/.exec(e.trim());return t?`${t[1]}.${t[2]}`:e.trim()}function Ww(e){let t=/^(\d+)(?:\.(\d+))?/.exec(e.trim());return t?[Number(t[1]),Number(t[2]??0)]:null}function Gw(e,t){let n=Ww(e),r=Ww(t);return!n||!r?!1:n[0]===r[0]?n[1]>=r[1]:n[0]>r[0]}function Kw(e,t){return e?.capabilities?.[t]===!1}function qw(e,t){let n=Hw[e],r=`${n.subject} needs Angular ${n.since} or later`;if(!t)return`${r}; this page's Angular version is unknown.`;let i=Uw(t);return Gw(t,n.since)?`${r} in a development build; this page runs Angular ${i} without it, which usually means a production build.`:`${r}; this page runs Angular ${i}.`}function Jw(e){return e.hydration===`hydrated`&&e.hydratedAt===void 0?`hydrated before inspection`:e.hydration}var Yw=/^on (viewport|interaction|hover)\b/;function Xw(e){let t=e.filter(e=>!/^(prefetch|hydrate) /.test(e));return t.length>0&&t.every(e=>Yw.test(e))}function Zw(e,t){let n=[],r=e.since>0?Math.max(0,Math.round((t-e.since)/1e3)):0;return e.state===`error`&&n.push({kind:`failed`,text:`failed to load`,label:`failed`}),(e.state===`placeholder`||e.state===`initial`)&&r*1e3>=1e4&&n.push(Xw(e.triggers)?{kind:`waiting`,text:`waiting for its trigger for ${r}s`,label:`waiting ${r}s`,seconds:r}:{kind:`stuck`,text:`on its placeholder for ${r}s`,label:`stuck ${r}s`,seconds:r}),e.hydrateNever?n.push({kind:`hydrate-never`,text:`hydrate never: the server HTML stays static`,label:`hydrate never`}):e.hydration===`dehydrated`&&n.push({kind:`dehydrated`,text:`still dehydrated`,label:`dehydrated`}),n}var Qw=`pangular-page-id`,$w=null;function eT(e){$w=e}function tT(){if($w)return $w;try{return new URLSearchParams(location.search).get(`pageId`)||(window.top===window?null:sessionStorage.getItem(Qw)||null)}catch{return null}}function nT(e,t){if(t.chosen&&e[t.chosen])return t.chosen;if(t.host)return t.host;if(t.previous&&e[t.previous])return t.previous;let n=null;for(let t of Object.values(e))(!n||t.reportedAt>n.reportedAt)&&(n=t);return n?.pageId??null}function rT(e,t){return e?t?e.pages?.[t]??null:e:null}function iT(e,t){return e?t?e.pages?.[t]??null:e.graph??null:null}function aT(){return{functions:[...Nw]}}function oT(e,t,n){return e?e.scope(`pangular`).rpc.call(t,...n===void 0?[]:[n]):Promise.resolve(null)}function sT(e,t,n){return oT(e,t,n).then(e=>e,()=>null)}function cT(e){return e?.connectionMeta.backend===`static`}function lT(e){let t=()=>{let t=e()?.scope(`pangular`).rpc;t&&(t.callEvent(`request-page-highlight`,null),t.callEvent(`request-form-highlight`,null))};return addEventListener(`pagehide`,t),()=>{removeEventListener(`pagehide`,t),t()}}function uT(e=globalThis){delete e.__DEVFRAME_CONNECTION__,delete e.__DEVFRAME_CONNECTION_META__}function dT(e){return e.split(`@`)[1]??``}var fT={signal:`Signal Forms`,reactive:`Reactive`,template:`Template-driven`},pT={own:`validator`,directive:`template attribute`,tree:`cross-field rule`,async:`async`,parse:`parse`,submission:`server`,schema:`schema`,manual:`setErrors`},mT=sT,hT={key:`name looks secret`,"input-type":`password input`,autocomplete:`autocomplete is a secret kind`,marker:`marked as mask`,parent:`inside a secret group`,config:`listed in mask`};function gT(e){return hT[e]??e}var _T=`https://pangular-inspector.dev/security/#opt-fields-in-or-out`;async function vT(e,t){return await mT(e,`request-form-action`,t)??{ok:!1,error:`The devtools server did not answer.`}}function yT(e){return`${e.ok?e.message??`Done.`:e.error??`Failed.`}${e.skipped?.length?` Skipped: ${e.skipped.map(e=>`${e.path} (${e.reason})`).join(`, `)}.`:``}${e.status?` Status: ${e.status}.`:``}`}var bT=/"(?:[^"\\\n]|\\.)*"|`([^`\n]*)`|\*\*/g;function xT(e){return(e??``).replace(/^_Labels, paths.*_\n\n/,``).replace(bT,(e,t)=>t??(e===`**`?``:e))}function ST(e,t){let n=Math.max(0,e-t),r=Math.ceil(n/6e4);if(r<60)return`in ${r} min`;let i=Math.round(r/60);return i<48?`in ${i} ${i===1?`hour`:`hours`}`:`in ${Math.round(i/24)} days`}function CT(e,t){return e.length?e.join(`, `):t}function wT(e,t){let n=[];if(n.push({label:`One-time code`,value:e.auth?e.oneTimeCode.state===`locked`?`Locked after too many wrong codes: run pangular token --rotate or restart the server for a new code`:e.oneTimeCode.expiresAt?`On, current code expires ${ST(e.oneTimeCode.expiresAt,t)}`:`On`:`Off: every client is trusted`}),e.auth){let{count:r,nextExpiresAt:i,lastExpiresAt:a}=e.tokens;n.push({label:`Trusted clients`,value:r?r===1||i===a?`${r} ${r===1?`token`:`tokens`}, expires ${ST(i??t,t)}`:`${r} tokens, the first expires ${ST(i??t,t)}, the last ${ST(a??t,t)}`:`None`}),e.pairingTokens&&n.push({label:`Pairing tokens`,value:`${e.pairingTokens} accepted instead of the code`})}return e.reported?(n.push({label:`Reach`,value:e.network?`This machine and other machines`:`This machine only`}),n.push({label:`Allowed origins`,value:e.originCheck?`${CT(e.allowedOrigins,`This machine and the Chrome extension`)}${e.customOrigins?`, plus a custom origin check`:``}`:`Any: the origin check is off`}),(e.allowedHosts===`any`||e.allowedHosts.length)&&n.push({label:`Allowed hosts`,value:e.allowedHosts===`any`?`Any`:e.allowedHosts.join(`, `)}),n):n}function TT(e){return jw(e?.connectionMeta)}function ET(e){return Array.isArray(e)&&e.every(e=>typeof e==`string`)?[...e]:void 0}function DT(e,t){if(!t||typeof t!=`object`)return e;let n=ET(t.secretNames),r=ET(t.unmask);if(!n||!r)return e;let i=hw(t.entropy);return{...e,redaction:i?{secretNames:n,unmask:r,entropy:i}:{secretNames:n,unmask:r}}}function OT(e,t){return TT(e).actions[t]}var kT={components:`components`,routes:`router`,signals:`signals`,injectors:`injectors`,store:`ngrx`,queries:`tanstackQuery`,forms:`forms`,pipes:`pipes`,network:`http`,analog:`analog`,capacitor:`capacitor`,errors:`errors`,plugins:`plugins`,performance:`performance`,build:`build`};function AT(e){return kT[e]}var jT=`https://pangular-inspector.dev/getting-started/configuration/#inspectors-and-agent-tools`;function MT(e,t){let n=kT[e];return!n||t.inspectors[n]}function NT(e,t){e&1&&(C(),Sg(0,`rect`,5)(1,`rect`,6)(2,`rect`,7)(3,`rect`,8))}function PT(e,t){e&1&&(C(),Sg(0,`path`,9)(1,`circle`,10)(2,`circle`,11)(3,`path`,12))}function FT(e,t){e&1&&(C(),Sg(0,`path`,13)(1,`path`,14))}function IT(e,t){e&1&&(C(),Sg(0,`path`,15)(1,`path`,16)(2,`path`,17))}function LT(e,t){e&1&&(C(),Sg(0,`circle`,18)(1,`path`,19)(2,`circle`,20))}function RT(e,t){e&1&&(C(),Sg(0,`path`,1))}function zT(e,t){e&1&&(C(),Sg(0,`path`,21)(1,`path`,22)(2,`path`,23)(3,`path`,24))}function BT(e,t){e&1&&(C(),Sg(0,`ellipse`,25)(1,`path`,26)(2,`path`,27))}function VT(e,t){e&1&&(C(),Sg(0,`rect`,28)(1,`path`,29)(2,`path`,30)(3,`path`,31))}function HT(e,t){e&1&&(C(),Sg(0,`circle`,32)(1,`path`,9)(2,`path`,33))}function UT(e,t){e&1&&(C(),Sg(0,`path`,34)(1,`path`,35)(2,`path`,36)(3,`path`,37)(4,`circle`,38))}function WT(e,t){e&1&&(C(),Sg(0,`circle`,39)(1,`path`,40))}function GT(e,t){e&1&&(C(),Sg(0,`ellipse`,41)(1,`path`,42)(2,`path`,43)(3,`path`,44)(4,`path`,45))}function KT(e,t){e&1&&(C(),Sg(0,`circle`,32)(1,`path`,46)(2,`path`,47))}function qT(e,t){e&1&&(C(),Sg(0,`path`,48)(1,`path`,49))}function JT(e,t){e&1&&(C(),Sg(0,`path`,50)(1,`path`,51)(2,`path`,52))}function YT(e,t){e&1&&(C(),Sg(0,`path`,2))}function XT(e,t){e&1&&(C(),Sg(0,`path`,3))}function ZT(e,t){e&1&&(C(),Sg(0,`path`,4))}var QT=class e{name=$.required();static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-tab-icon`]],inputs:{name:[1,`name`]},decls:20,vars:1,consts:[[`viewBox`,`0 0 24 24`,`width`,`16`,`height`,`16`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`1.8`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`,`aria-hidden`,`true`],[`d`,`M22 12h-4l-3 9L9 3l-3 9H2`],[`d`,`M10 3h4v3a2 2 0 1 0 4 0V5h1a2 2 0 0 1 2 2v4h-2a2 2 0 1 0 0 4h2v4a2 2 0 0 1-2 2h-4v-2a2 2 0 1 0-4 0v2H7a2 2 0 0 1-2-2v-4H4a2 2 0 1 1 0-4h1V7a2 2 0 0 1 2-2h3Z`],[`d`,`m8 3 4 8 5-5 5 15H2L8 3z`],[`fill`,`currentColor`,`stroke`,`none`,`transform`,`translate(1.8 1.8) scale(0.85)`,`d`,`M24 3.7l-5.766 5.766 5.725 5.736-3.713 3.712L5.073 3.742 8.786.03l5.736 5.726L20.284 0 24 3.7zM.029 8.785l3.713-3.713 15.173 15.173-3.713 3.714-5.732-5.726L3.7 24 0 20.285l5.754-5.764L.029 8.785z`],[`x`,`3`,`y`,`3`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`14`,`y`,`3`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`x`,`14`,`y`,`12`,`width`,`7`,`height`,`9`,`rx`,`1.5`],[`x`,`3`,`y`,`16`,`width`,`7`,`height`,`5`,`rx`,`1.5`],[`d`,`M3 12h18`],[`cx`,`7`,`cy`,`12`,`r`,`2`],[`cx`,`14`,`cy`,`12`,`r`,`2`],[`d`,`M18 7v10`],[`d`,`M9 11l2 2 4-4`],[`d`,`M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6l-8-3Z`],[`d`,`M12 2 3 7l9 5 9-5-9-5Z`],[`d`,`m3 12 9 5 9-5`],[`d`,`m3 17 9 5 9-5`],[`cx`,`6`,`cy`,`19`,`r`,`3`],[`d`,`M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15`],[`cx`,`18`,`cy`,`5`,`r`,`3`],[`d`,`M12 22v-5`],[`d`,`M9 8V2`],[`d`,`M15 8V2`],[`d`,`M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z`],[`cx`,`12`,`cy`,`5`,`rx`,`9`,`ry`,`3`],[`d`,`M3 5v14a9 3 0 0 0 18 0V5`],[`d`,`M3 12a9 3 0 0 0 18 0`],[`x`,`3`,`y`,`4`,`width`,`18`,`height`,`16`,`rx`,`2`],[`d`,`M7 9h10`],[`d`,`M7 13h6`],[`d`,`M7 17h8`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z`],[`d`,`M4 7h10`],[`d`,`M4 17h6`],[`d`,`m14 13 4 4-4 4`],[`d`,`M10 17h8`],[`cx`,`18`,`cy`,`7`,`r`,`3`],[`cx`,`12`,`cy`,`12`,`r`,`3`],[`d`,`M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z`],[`cx`,`11`,`cy`,`5`,`rx`,`8`,`ry`,`3`],[`d`,`M3 5v6c0 1.66 3.58 3 8 3`],[`d`,`M3 11v6c0 1.66 3.58 3 8 3`],[`d`,`M21 14a4 4 0 1 1-1.2-2.85L21 12.3`],[`d`,`M21 9v3.3h-3.3`],[`d`,`M12 7v6`],[`d`,`M12 16.5v.01`],[`d`,`M12 14l4-4`],[`d`,`M3.34 19a10 10 0 1 1 17.32 0`],[`d`,`M21 16V8l-9-5-9 5v8l9 5 9-5Z`],[`d`,`m3.3 7 8.7 5 8.7-5`],[`d`,`M12 22V12`]],template:function(e,t){if(e&1&&(C(),L(0,`svg`,0),k(1,NT,4,0)(2,PT,4,0)(3,FT,2,0)(4,IT,3,0)(5,LT,3,0)(6,RT,1,0,`:svg:path`,1)(7,zT,4,0)(8,BT,3,0)(9,VT,4,0)(10,HT,3,0)(11,UT,5,0)(12,WT,2,0)(13,GT,5,0)(14,KT,3,0)(15,qT,2,0)(16,JT,3,0)(17,YT,1,0,`:svg:path`,2)(18,XT,1,0,`:svg:path`,3)(19,ZT,1,0,`:svg:path`,4),R()),e&2){let e;E(),A((e=t.name())===`dashboard`?1:e===`timeline`?2:e===`audit`?3:e===`components`?4:e===`routes`?5:e===`signals`?6:e===`injectors`?7:e===`store`?8:e===`forms`?9:e===`network`?10:e===`pipes`?11:e===`settings`?12:e===`queries`?13:e===`errors`?14:e===`performance`?15:e===`build`?16:e===`plugins`?17:e===`analog`?18:e===`capacitor`?19:-1)}},styles:[`[_nghost-%COMP%] {
+  display: inline-flex;
+  flex-shrink: 0;
+}`]})},$T=(e,t)=>t.tab,eE=(e,t)=>t.label;function tE(e,t){e&1&&G(0),e&2&&q(` `,U().meta()?.projectName,` `)}function nE(e,t){e&1&&G(0,` Project details unavailable `)}function rE(e,t){e&1&&G(0,` Loading… `)}function iE(e,t){e&1&&(G(0,` Run `),P(1,`code`),G(2,`pangular build`),F(),G(3,` again to rebuild the report. `))}function aE(e,t){e&1&&G(0,` Check that the dev server is running. `)}function oE(e,t){if(e&1){let e=z();P(0,`button`,13),V(`click`,function(){return x(e),S(U(2).loadMeta())}),G(1,`Try again`),F()}}function sE(e,t){if(e&1&&(P(0,`p`,11),k(1,iE,4,0)(2,aE,1,0),F(),k(3,oE,2,0,`button`,12)),e&2){let e=U();E(),A(e.staticReport()?1:2),E(2),A(e.staticReport()?-1:3)}}function cE(e,t){e&1&&(P(0,`li`,5)(1,`span`),G(2,`Analog`),F(),G(3),F()),e&2&&(E(3),K(t))}function lE(e,t){e&1&&(P(0,`li`)(1,`span`),G(2,`Change detection`),F(),G(3),F()),e&2&&(E(3),K(t))}function uE(e,t){if(e&1&&(P(0,`span`,20),G(1),F(),P(2,`span`,21),G(3),F()),e&2){let e=U().$implicit,t=U();E(),K(t.cards()[e.tab]?.value),E(2),K(t.cards()[e.tab]?.sub)}}function dE(e,t){e&1&&(P(0,`span`,22),G(1,`–`),F(),P(2,`span`,21),G(3,`Count unavailable`),F())}function fE(e,t){e&1&&(I(0,`span`,23),P(1,`span`,21),G(2,`Counting…`),F())}function pE(e,t){if(e&1){let e=z();P(0,`button`,14),V(`click`,function(){let t=x(e).$implicit;return S(U().navigate.emit(t.tab))}),P(1,`span`,15)(2,`span`,16),I(3,`app-tab-icon`,17),F(),P(4,`span`,18),G(5,`→`),F()(),P(6,`span`,19),G(7),F(),k(8,uE,4,2)(9,dE,4,0)(10,fE,3,0),F()}if(e&2){let e,n=t.$implicit,r=t.$index,i=U().stateOf(n.tab);f_(`animation-delay`,60*r,`ms`),O(`aria-busy`,i===`loading`),E(3),N(`name`,n.tab),E(4),K(n.label),E(),A((e=i)===`ready`?8:e===`error`?9:10)}}function mE(e,t){e&1&&(P(0,`p`),G(1,`Loading…`),F())}function hE(e,t){if(e&1&&(P(0,`div`)(1,`dt`),G(2),F(),P(3,`dd`),G(4),F()()),e&2){let e=t.$implicit;E(2),K(e.label),E(2),K(e.value)}}function gE(e,t){if(e&1&&(P(0,`dl`),j(1,hE,5,2,`div`,null,eE),F()),e&2){let e=U();E(),M(e.configItems())}}function _E(e,t){e&1&&(P(0,`p`),G(1,`Defaults`),F())}function vE(e,t){if(e&1&&(P(0,`div`)(1,`dt`),G(2),F(),P(3,`dd`),G(4),F()()),e&2){let e=t.$implicit;E(2),K(e.label),E(2),K(e.value)}}function yE(e,t){e&1&&(P(0,`section`,10)(1,`h2`,24),G(2,`Security`),F(),P(3,`dl`),j(4,vE,5,2,`div`,null,eE),F()()),e&2&&(E(4),M(t))}var bE=[{tab:`components`,label:`Components`},{tab:`routes`,label:`Routes`},{tab:`signals`,label:`Signals`},{tab:`injectors`,label:`Injectors`},{tab:`store`,label:`NgRx declarations`},{tab:`pipes`,label:`Pipes`},{tab:`forms`,label:`Forms`},{tab:`network`,label:`SSR & HTTP`}];function xE(e){return bE.filter(t=>MT(t.tab,e))}var SE={zoneless:`Zoneless`,zone:`zone.js`,"zone-unused":`Zoneless, zone.js loaded`};function CE(e){return e&&Object.hasOwn(SE,e)?SE[e]:null}var wE=new Set([`signal`,`computed`,`linkedSignal`,`effect`]),TE={action:[`action`,`actions`],reducer:[`reducer`,`reducers`],effect:[`effect`,`effects`],selector:[`selector`,`selectors`],feature:[`feature`,`features`],"store-setup":[`setup call`,`setup calls`],"signal-store":[`signal store`,`signal stores`],"signal-state":[`signal state`,`signal states`],"signal-method":[`signal method`,`signal methods`]};function EE(e,t,n){return`${e} ${e===1?t:n}`}function DE(e,t){for(let n of e??[])t(n),DE(n.children,t)}function OE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`discovered in source`};let t=e.filter(e=>e.kind===`directive`).length;return{value:e.length-t,sub:`components · ${EE(t,`directive`,`directives`)}`}}function kE(e){if(!e.some(e=>e.kind))return{value:e.length,sub:`route entries in source`};let t=e.filter(e=>e.kind===`redirect`).length;return{value:new Set(e.filter(e=>e.kind===`page`).map(e=>e.fullPath??e.path??``)).size,sub:`navigable paths · ${EE(t,`redirect`,`redirects`)}`}}function AE(e){let t=new Map;for(let n of e)n.kind&&t.set(n.kind,(t.get(n.kind)??0)+1);if(!t.size)return{value:e.length,sub:`declarations in source`};let n=[...t].sort((e,t)=>t[1]-e[1]).map(([e,t])=>{let[n,r]=TE[e]??[e,e];return EE(t,n,r)});return{value:e.length,sub:n.join(` · `)}}function jE(e,t){let n=e?.forms??[],r=t?n.filter(e=>dT(e.id)===t):n;if(!r.length)return{value:0,sub:`no forms on the page yet`};let i=r.filter(e=>e.root?.status===`INVALID`).length;return{value:r.length,sub:`${r.length===1?`form`:`forms`} · ${i} invalid`}}function ME(e){return e.cancelled||e.status===void 0?!1:e.status===0||e.status>=400}function NE(e,t){let n=e?.pages??[],r=t?n.find(e=>e.pageId===t)??null:n.reduce((e,t)=>!e||t.reportedAt>e.reportedAt?t:e,null),i=t&&!r?[]:e?.serverCalls??[],a=r?.initialUrl,o=[...a?i.filter(e=>!e.pageUrl||e.pageUrl===a):i,...r?.calls??[]];if(!o.length)return{value:0,sub:`no calls recorded yet`};let s=o.filter(ME).length;return{value:o.length,sub:`${o.length===1?`call`:`calls`} · ${s} failed`}}var PE=class e{rpc=$(null);navigate=xv();staticReport=X(()=>cT(this.rpc()));meta=w(null);security=w(null);redaction=w(null);config=X(()=>DT(TT(this.rpc()),this.redaction()));stats=X(()=>this.rpc()?xE(this.config()):[]);configItems=X(()=>Rw(this.config()));metaState=w(`loading`);states=w({});rows=w({});injectorTree=w(null);signalGraph=w(null);formsState=w(null);httpState=w(null);pageId=tT();destroyRef=b(Os);stopLive=[];zone=X(()=>CE(rT(this.injectorTree(),this.pageId)?.zone));liveInjectors=X(()=>{let e=rT(this.injectorTree(),this.pageId);if(!e?.roots?.length)return null;let t=0,n=0,r=e=>{t++,n+=e.providers?.length??0};return DE(e.roots,r),DE(e.environment,r),{injectors:t,providers:n}});liveSignals=X(()=>{let e=iT(this.signalGraph(),this.pageId);return e?.nodes?.length?e.nodes.filter(e=>wE.has(e.kind??``)).length:null});cards=X(()=>{let e=this.rows(),t={};if(e.components&&(t.components=OE(e.components)),e.routes&&(t.routes=kE(e.routes)),e.store&&(t.store=AE(e.store)),e.pipes){let n=e.pipes.filter(e=>e.builtin).length;t.pipes={value:e.pipes.length-n,sub:n?`custom pipes · ${n} built-in in use`:`custom pipes in source`}}let n=this.liveSignals();n===null?e.signals&&(t.signals={value:e.signals.length,sub:`signal declarations in source`}):t.signals={value:n,sub:e.signals?`live on the page · ${e.signals.length} declared in source`:`live on the page`};let r=this.liveInjectors();r?t.injectors={value:r.injectors,sub:`live injectors · ${EE(r.providers,`provider`,`providers`)}`}:e.injectors&&(t.injectors={value:e.injectors.filter(e=>e.type!==`injection`).length,sub:`provider declarations in source`});let i=this.formsState();i&&(t.forms=jE(i,this.pageId));let a=this.httpState();return a&&(t.network=NE(a,this.pageId)),t});loadMeta(e=this.rpc()){e&&(this.metaState.set(`loading`),e.scope(`pangular`).rpc.call(`build-meta`).then(t=>{this.rpc()===e&&(this.meta.set(t),this.metaState.set(`ready`))}).catch(()=>{this.rpc()===e&&this.metaState.set(`error`)}))}loadRedaction(e){this.redaction.set(null),!cT(e)&&oT(e,`redaction-config`).then(t=>{this.rpc()===e&&this.redaction.set(t)}).catch(()=>{})}loadSecurity(e){this.security.set(null),!cT(e)&&sT(e,`security-status`).then(t=>{this.rpc()===e&&t&&this.security.set(wT(t,Date.now()))})}constructor(){T(()=>{let e=this.rpc();if(!e)return;let t=e.scope(`pangular`);this.states.set({}),this.rows.set({}),this.formsState.set(null),this.httpState.set(null),this.loadMeta(e),this.loadRedaction(e),this.loadSecurity(e);let n=TT(e),r=e=>MT(e,n);r(`components`)&&this.load(t.rpc.call(`get-components`),`components`),r(`routes`)&&this.load(t.rpc.call(`get-routes`),`routes`),r(`signals`)&&this.load(t.rpc.call(`get-signals`),`signals`),r(`injectors`)&&this.load(t.rpc.call(`get-providers`),`injectors`),r(`store`)&&this.load(t.rpc.call(`get-ngrx-store`),`store`),r(`pipes`)&&this.load(t.rpc.call(`get-pipes`),`pipes`),this.watchLive(e,n)}),this.destroyRef.onDestroy(()=>this.unwatch())}stateOf(e){return(e===`signals`?this.liveSignals():e===`injectors`?this.liveInjectors():null)===null?this.states()[e]??`loading`:`ready`}load(e,t){let n=e=>this.states.update(n=>({...n,[t]:e}));e.then(e=>{this.rows.update(n=>({...n,[t]:Array.isArray(e)?e:[]})),n(`ready`)}).catch(()=>n(`error`))}async watchLive(e,t){this.unwatch();let n=e.scope(`pangular`).rpc,r=async(t,r,i)=>{let a=e=>i&&this.states.update(t=>({...t,[i]:e}));try{let i=await n.sharedState(t);if(this.destroyRef.destroyed||this.rpc()!==e)return;r(i.value()),a(`ready`),this.stopLive.push(i.on(`updated`,e=>r(e)))}catch{if(this.destroyRef.destroyed||this.rpc()!==e)return;r(null),a(`error`)}};await Promise.all([t.inspectors.injectors&&r(`injector-tree`,e=>this.injectorTree.set(e)),t.inspectors.signals&&r(`signal-graph`,e=>this.signalGraph.set(e)),MT(`forms`,t)&&r(`forms`,e=>this.formsState.set(e??{}),`forms`),MT(`network`,t)&&r(`http`,e=>this.httpState.set(e??{}),`network`)])}unwatch(){for(let e of this.stopLive.splice(0))e()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-dashboard`]],inputs:{rpc:[1,`rpc`]},outputs:{navigate:`navigate`},decls:34,vars:15,consts:[[`aria-labelledby`,`project-title`,1,`project`],[1,`project-head`],[1,`eyebrow`],[`id`,`project-title`],[1,`chips`],[1,`analog`],[1,`grid`],[`type`,`button`,1,`stat`,3,`animation-delay`],[`aria-labelledby`,`config-title`,1,`config`],[`id`,`config-title`],[`aria-labelledby`,`security-title`,1,`config`],[1,`hint`],[`type`,`button`,1,`retry`],[`type`,`button`,1,`retry`,3,`click`],[`type`,`button`,1,`stat`,3,`click`],[1,`top`],[1,`icon`],[3,`name`],[`aria-hidden`,`true`,1,`go`],[1,`label`],[1,`big`],[1,`sub`],[1,`big`,`muted`],[`aria-hidden`,`true`,1,`big`,`skeleton`],[`id`,`security-title`]],template:function(e,t){if(e&1&&(P(0,`section`,0)(1,`div`,1)(2,`p`,2),G(3,`Project`),F(),P(4,`h2`,3),k(5,tE,1,1)(6,nE,1,0)(7,rE,1,0),F(),k(8,sE,4,2),F(),P(9,`ul`,4)(10,`li`)(11,`span`),G(12,`Angular`),F(),G(13),F(),P(14,`li`)(15,`span`),G(16,`TypeScript`),F(),G(17),F(),P(18,`li`)(19,`span`),G(20,`SSR`),F(),G(21),F(),k(22,cE,4,1,`li`,5),k(23,lE,4,1,`li`),F()(),P(24,`div`,6),j(25,pE,11,6,`button`,7,$T),F(),P(27,`section`,8)(28,`h2`,9),G(29,`Configuration`),F(),k(30,mE,2,0,`p`)(31,gE,3,0,`dl`)(32,_E,2,0,`p`),F(),k(33,yE,6,0,`section`,10)),e&2){let e,n,r,i;O(`aria-busy`,t.metaState()===`loading`),E(4),W(`muted`,t.metaState()!==`ready`),E(),A((e=t.metaState())===`ready`?5:e===`error`?6:7),E(3),A(t.metaState()===`error`?8:-1),E(),W(`pending`,t.metaState()===`loading`),E(4),K(t.meta()?.angularVersion??`…`),E(4),K(t.meta()?.typescript??`…`),E(4),K(t.meta()?t.meta()?.ssr?`On`:`Off`:`…`),E(),A((n=t.meta()?.analog)?22:-1,n),E(),A((r=t.zone())?23:-1,r),E(2),M(t.stats()),E(2),O(`aria-busy`,!t.rpc()),E(3),A(t.rpc()?t.configItems().length?31:32:30),E(3),A((i=t.security())?33:-1,i)}},dependencies:[QT],styles:[`[_nghost-%COMP%] {
+  display: block;
+  max-width: 1200px;
+}
+
+.project[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px 24px;
+  margin-bottom: 16px;
+  padding: 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: radial-gradient(420px 180px at 100% 0%, var(--%NS%accent-soft), transparent 70%), linear-gradient(180deg, var(--%NS%surface-2), var(--%NS%surface));
+  box-shadow: var(--%NS%shadow);
+}
+
+.project-head[_ngcontent-%COMP%] {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+
+.eyebrow[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 4px;
+  color: var(--%NS%accent);
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 24px;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  overflow-wrap: anywhere;
+}
+
+h2.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.retry[_ngcontent-%COMP%] {
+  display: inline-flex;
+  margin-top: 8px;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+.retry[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+.retry[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chips[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  max-width: 100%;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%bg);
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.chips[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 500;
+}
+
+.chips.pending[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.chips[_ngcontent-%COMP%]   .analog[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, #dd0330 55%, transparent);
+}
+
+.grid[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
+  gap: 12px;
+}
+
+.stat[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: inherit;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+  animation: enter 0.4s var(--%NS%ease) both;
+  transition: border-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+.stat[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-2);
+  box-shadow: var(--%NS%shadow);
+  transform: translateY(-2px);
+}
+
+.stat[_ngcontent-%COMP%]:active {
+  transform: translateY(0);
+  background: var(--%NS%surface-3);
+}
+
+.stat[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.top[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  align-self: stretch;
+  margin-bottom: 12px;
+}
+
+.icon[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%accent);
+}
+
+.go[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  color: var(--%NS%text-3);
+  transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease);
+}
+
+.stat[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%], 
+.stat[_ngcontent-%COMP%]:focus-visible   .go[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  transform: translateX(3px);
+}
+
+.label[_ngcontent-%COMP%] {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.big[_ngcontent-%COMP%] {
+  margin: 4px 0;
+  color: var(--%NS%text-strong);
+  font-size: 32px;
+  font-weight: 750;
+  line-height: 40px;
+  letter-spacing: -0.03em;
+  font-variant-numeric: tabular-nums;
+}
+
+.big.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.skeleton[_ngcontent-%COMP%] {
+  display: block;
+  width: 56px;
+  height: 32px;
+  margin-block: 8px;
+  border-radius: var(--%NS%radius-sm);
+  background: linear-gradient(90deg, var(--%NS%surface-2), var(--%NS%surface-3), var(--%NS%surface-2)) 0 0/200% 100%;
+  animation: _ngcontent-%COMP%_shimmer 1.4s linear infinite;
+}
+
+.sub[_ngcontent-%COMP%] {
+  max-width: 100%;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.config[_ngcontent-%COMP%] {
+  margin-top: 16px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.config[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 8px;
+  color: var(--%NS%text-2);
+}
+
+.config[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.config[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.config[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+}
+
+.config[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%]   div[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+}
+
+.config[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.config[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%]::after {
+  content: ":";
+}
+
+.config[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+@keyframes _ngcontent-%COMP%_shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+@media (max-width: 480px) {
+  .project[_ngcontent-%COMP%] {
+    padding: 16px;
+  }
+  h2[_ngcontent-%COMP%] {
+    font-size: 20px;
+  }
+  .stat[_ngcontent-%COMP%] {
+    padding: 12px;
+  }
+  .big[_ngcontent-%COMP%] {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .stat[_ngcontent-%COMP%], 
+   .stat[_ngcontent-%COMP%]:hover, 
+   .stat[_ngcontent-%COMP%]:active {
+    transform: none;
+  }
+  .stat[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%] {
+    transform: none;
+  }
+  .skeleton[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}`]})},FE=[`*`];function IE(e,t){if(e&1&&(L(0,`div`,1)(1,`p`,2),G(2),R(),L(3,`p`,3),G(4),Vg(5),L(6,`a`,4),G(7,`Supported versions`),R()()()),e&2){let e=U();W(`compact`,e.compact()),E(2),K(e.title()),E(2),q(` `,t,` `),E(2),B(`href`,e.docsUrl,Fu)}}var LE=`https://pangular-inspector.dev/getting-started/installation/#supported-angular-versions`,RE=class e{page=$(null);capability=$.required();missing=$(!1,{transform:Mv});compact=$(!1,{transform:Mv});docsUrl=LE;text=X(()=>{let e=this.page();return!this.missing()&&!Kw(e,this.capability())?null:qw(this.capability(),e?.version)});title=X(()=>{let e=this.page()?.version;return e?`Not available on Angular ${Uw(e)}`:`Not available on this page`});static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-angular-unavailable`]],inputs:{page:[1,`page`],capability:[1,`capability`],missing:[1,`missing`],compact:[1,`compact`]},ngContentSelectors:FE,decls:1,vars:1,consts:[[`role`,`status`,1,`unavailable`,3,`compact`],[`role`,`status`,1,`unavailable`],[1,`title`],[1,`hint`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){if(e&1&&(Bg(),k(0,IE,8,5,`div`,0)),e&2){let e;A((e=t.text())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+[_nghost-%COMP%]:empty {
+  display: none;
+}
+
+.unavailable[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0 0 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  border-style: dashed;
+}
+
+.unavailable.compact[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+}
+
+.title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  border-radius: 2px;
+}
+
+a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},zE=[`trigger`],BE=[`list`],VE=(e,t)=>t.value;function HE(e,t){if(e&1&&(L(0,`span`,4),G(1),R()),e&2){let e=U();E(),K(e.current().hint)}}function UE(e,t){if(e&1&&(L(0,`span`,15),G(1),R()),e&2){let e=U().$implicit;E(),K(e.hint)}}function WE(e,t){if(e&1){let e=z();L(0,`li`,11),H(`pointerenter`,function(){let t=x(e).$index;return S(U(2).active.set(t))})(`pointerdown`,function(e){return e.preventDefault()})(`click`,function(){let t=x(e).$index;return S(U(2).choose(t))}),C(),L(1,`svg`,12),Sg(2,`path`,13),R(),ys(),L(3,`span`,14),G(4),R(),k(5,UE,2,1,`span`,15),R()}if(e&2){let e=t.$implicit,n=t.$index,r=U(2);W(`active`,n===r.active())(`selected`,e.value===r.value()),O(`id`,r.uid+`-opt-`+n)(`aria-selected`,e.value===r.value())(`aria-disabled`,e.disabled||null),E(4),K(e.label),E(),A(e.hint?5:-1)}}function GE(e,t){if(e&1&&(L(0,`li`,10),G(1),R()),e&2){let e=U(2);E(),K(e.emptyText())}}function KE(e,t){if(e&1&&(L(0,`ul`,8,1),Qh(`list-in`),H(`pointerdown`,function(e){return e.preventDefault()}),j(2,WE,6,9,`li`,9,VE,!1,GE,2,1,`li`,10),R()),e&2){let e=U();W(`up`,e.dropUp()),O(`id`,e.uid+`-list`)(`aria-labelledby`,e.labelledBy()||e.uid+`-trigger`),E(2),M(e.options())}}var qE=0,JE=class e{options=$.required();value=Ev(null);placeholder=$(`Select…`);ariaLabel=$(``);labelledBy=$(``);describedBy=$(``);disabled=$(!1);emptyText=$(`Nothing to choose`);uid=`app-select-${++qE}`;open=w(!1);active=w(-1);dropUp=w(!1);current=X(()=>this.options().find(e=>e.value===this.value())??null);host=b(Rl);injector=b(Es);trigger=Ov.required(`trigger`);list=Ov(`list`);typed=``;typedAt=0;toggle(){this.open()?this.close():this.show()}choose(e){let t=this.options()[e];t&&!t.disabled&&(this.value.set(t.value),this.close(),this.trigger().nativeElement.focus())}onKey(e){let t=this.options(),n=this.open();switch(e.key){case`ArrowDown`:case`ArrowUp`:if(e.preventDefault(),!n){this.show();return}this.move(e.key===`ArrowDown`?1:-1);return;case`Home`:case`End`:if(!n)return;e.preventDefault(),this.setActive(e.key===`Home`?this.firstEnabled(0,1):this.firstEnabled(t.length-1,-1));return;case`Enter`:case` `:e.preventDefault(),n&&this.active()>=0?this.choose(this.active()):this.show();return;case`Escape`:if(!n)return;e.preventDefault(),e.stopPropagation(),this.close();return;case`Tab`:n&&this.close();return;default:e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&this.typeAhead(e.key)}}onBlur(e){let t=e.relatedTarget;t&&this.host.nativeElement.contains(t)||this.close()}onOutside(e){this.open()&&!this.host.nativeElement.contains(e.target)&&this.close()}show(){if(this.disabled())return;let e=this.host.nativeElement.getBoundingClientRect(),t=window.innerHeight-e.bottom;this.dropUp.set(t<220&&e.top>t);let n=this.options().findIndex(e=>e.value===this.value());this.open.set(!0),this.setActive(n>=0?n:this.firstEnabled(0,1))}close(){this.open.set(!1),this.active.set(-1)}move(e){let t=this.firstEnabled(this.active()+e,e);t>=0&&this.setActive(t)}firstEnabled(e,t){let n=this.options();for(let r=e;r>=0&&r<n.length;r+=t)if(!n[r].disabled)return r;return-1}setActive(e){this.active.set(e),!(e<0)&&Sd(()=>{(this.list()?.nativeElement.querySelector(`#${this.uid}-opt-${e}`))?.scrollIntoView({block:`nearest`})},{injector:this.injector})}typeAhead(e){let t=performance.now();this.typed=t-this.typedAt>600?e.toLowerCase():this.typed+e.toLowerCase(),this.typedAt=t;let n=this.options().findIndex(e=>!e.disabled&&e.label.toLowerCase().startsWith(this.typed));n<0||(this.open()?this.setActive(n):this.value.set(this.options()[n].value))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-select`]],viewQuery:function(e,t){e&1&&Ug(t.trigger,zE,5)(t.list,BE,5),e&2&&Wg(2)},hostAttrs:[1,`app-select`],hostVars:2,hostBindings:function(e,t){e&1&&V(`pointerdown`,function(e){return t.onOutside(e)},Ru),e&2&&W(`open`,t.open())},inputs:{options:[1,`options`],value:[1,`value`],placeholder:[1,`placeholder`],ariaLabel:[1,`ariaLabel`],labelledBy:[1,`labelledBy`],describedBy:[1,`describedBy`],disabled:[1,`disabled`],emptyText:[1,`emptyText`]},outputs:{value:`valueChange`},decls:8,vars:13,consts:[[`trigger`,``],[`list`,``],[`type`,`button`,`role`,`combobox`,`aria-haspopup`,`listbox`,1,`trigger`,3,`click`,`keydown`,`blur`,`disabled`],[1,`value`],[1,`value-hint`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m6 9 6 6 6-6`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`,3,`up`],[`role`,`listbox`,`tabindex`,`-1`,1,`list`,3,`pointerdown`],[`role`,`option`,3,`active`,`selected`],[`role`,`option`,`aria-disabled`,`true`,1,`empty`],[`role`,`option`,3,`pointerenter`,`pointerdown`,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`check`],[`d`,`m5 12 5 5 9-10`],[1,`label`],[1,`hint`]],template:function(e,t){e&1&&(L(0,`button`,2,0),H(`click`,function(){return t.toggle()})(`keydown`,function(e){return t.onKey(e)})(`blur`,function(e){return t.onBlur(e)}),L(2,`span`,3),G(3),R(),k(4,HE,2,1,`span`,4),C(),L(5,`svg`,5),Sg(6,`path`,6),R()(),k(7,KE,5,5,`ul`,7)),e&2&&(B(`disabled`,t.disabled()),O(`id`,t.uid+`-trigger`)(`aria-controls`,t.uid+`-list`)(`aria-expanded`,t.open())(`aria-label`,t.ariaLabel()||null)(`aria-labelledby`,t.labelledBy()||null)(`aria-describedby`,t.describedBy()||null)(`aria-activedescendant`,t.open()&&t.active()>=0?t.uid+`-opt-`+t.active():null),E(2),W(`placeholder`,!t.current()),E(),q(` `,t.current()?.label??t.placeholder(),` `),E(),A(t.current()?.hint?4:-1),E(3),A(t.open()?7:-1))},styles:[`[_nghost-%COMP%] {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  vertical-align: middle;
+}
+
+.trigger[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 10px 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+
+.trigger[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 55%, var(--%NS%text-3));
+}
+
+.trigger[_ngcontent-%COMP%]:focus-visible, 
+.open[_nghost-%COMP%]   .trigger[_ngcontent-%COMP%] {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.trigger[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.value[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.value.placeholder[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.value-hint[_ngcontent-%COMP%] {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.open[_nghost-%COMP%]   .chevron[_ngcontent-%COMP%] {
+  transform: rotate(180deg);
+  stroke: var(--%NS%accent);
+}
+
+.list[_ngcontent-%COMP%] {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 50;
+  box-sizing: border-box;
+  min-width: 100%;
+  max-width: min(480px, 100vw - 24px);
+  max-height: 280px;
+  margin: 0;
+  padding: 4px;
+  overflow: auto;
+  list-style: none;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.2);
+  overscroll-behavior: contain;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .list[_ngcontent-%COMP%] {
+    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .list[_ngcontent-%COMP%] {
+  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
+}
+
+.list.up[_ngcontent-%COMP%] {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+
+.list-in[_ngcontent-%COMP%] {
+  animation: _ngcontent-%COMP%_list-in 140ms var(--%NS%ease) both;
+}
+
+@keyframes _ngcontent-%COMP%_list-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+}
+li[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 10px 0 8px;
+  border-radius: 6px;
+  color: var(--%NS%text);
+  font-size: 13px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+li.active[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+}
+
+li.selected[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+li[aria-disabled=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  cursor: default;
+}
+
+.check[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: var(--%NS%accent);
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  visibility: hidden;
+}
+
+li.selected[_ngcontent-%COMP%]   .check[_ngcontent-%COMP%] {
+  visibility: visible;
+}
+
+.label[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hint[_ngcontent-%COMP%] {
+  flex: none;
+  max-width: 50%;
+  overflow: hidden;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+}
+
+.empty[_ngcontent-%COMP%] {
+  justify-content: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .list-in[_ngcontent-%COMP%] {
+    animation: none;
+  }
+  .chevron[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},YE=[`input`];function XE(e,t){if(e&1){let e=z();L(0,`button`,9),H(`click`,function(){return x(e),S(U().save())}),C(),L(1,`svg`,10),Sg(2,`path`,11),R(),ys(),L(3,`span`,12),G(4,`Save`),R()()}e&2&&O(`aria-label`,`Save filter `+U().query())}function ZE(e,t){if(e&1){let e=z();L(0,`li`,14)(1,`button`,15),H(`click`,function(){let t=x(e).$implicit;return S(U(2).apply(t))}),G(2),R(),L(3,`button`,16),H(`click`,function(){let t=x(e).$implicit;return S(U(2).remove(t))}),C(),L(4,`svg`,10),Sg(5,`path`,17),R()()()}if(e&2){let e=t.$implicit,n=U(2);W(`active`,e===n.query()),E(),O(`aria-pressed`,e===n.query())(`title`,e),E(),q(` `,e,` `),E(),O(`aria-label`,`Remove saved filter `+e)}}function QE(e,t){if(e&1&&(L(0,`ul`,7),j(1,ZE,6,6,`li`,13,dg),R()),e&2){let e=U();E(),M(e.saved())}}function $E(e,t){if(e&1&&(L(0,`span`,8),G(1),R()),e&2){let e=U();E(),K(e.announcement())}}var eD=`pangular-pref:filters`,tD=200;function nD(e){try{let t=localStorage.getItem(`${eD}:${e}`),n=t?JSON.parse(t):[];if(!Array.isArray(n))return[];let r=n.filter(e=>typeof e==`string`&&!!e.trim()&&e.length<=tD);return[...new Set(r)].slice(-8)}catch{return[]}}function rD(e,t){try{t.length?localStorage.setItem(`${eD}:${e}`,JSON.stringify(t)):localStorage.removeItem(`${eD}:${e}`)}catch{}}var iD=class e{value=Ev(``);label=$(`Filter`);placeholder=$(`Filter`);inputId=$(null);describedBy=$(null);saveKey=$(null);input=Ov.required(`input`);host=b(Rl);injector=b(Es);announcement=w(``);query=X(()=>this.value().trim());saved=Q(()=>{let e=this.saveKey();return e?nD(e):[]});canSave=X(()=>{let e=this.query();return!!this.saveKey()&&!!e&&e.length<=tD&&!this.saved().includes(e)&&this.saved().length<8});focus(){this.input().nativeElement.focus()}clear(e){this.value()&&(e.preventDefault(),e.stopPropagation(),this.value.set(``))}save(){let e=this.saveKey(),t=this.query();if(!e||!this.canSave())return;let n=[...this.saved(),t];this.saved.set(n),rD(e,n),this.say(`Filter ${t} saved.`),this.focusAfterRender(`.chip:last-child .apply`)}apply(e){this.value.set(this.query()===e?``:e)}remove(e){let t=this.saveKey();if(!t)return;let n=this.saved().indexOf(e),r=this.saved().filter(t=>t!==e);if(this.saved.set(r),rD(t,r),this.say(`Saved filter ${e} removed.`),!r.length){this.focus();return}let i=Math.min(n,r.length-1)+1;this.focusAfterRender(`.chip:nth-child(${i}) .apply`)}focusAfterRender(e){Sd(()=>{let t=this.host.nativeElement.querySelector(e);t?t.focus():this.focus()},{injector:this.injector})}say(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-search-field`]],viewQuery:function(e,t){e&1&&Ug(t.input,YE,5),e&2&&Wg()},inputs:{value:[1,`value`],label:[1,`label`],placeholder:[1,`placeholder`],inputId:[1,`inputId`],describedBy:[1,`describedBy`],saveKey:[1,`saveKey`]},outputs:{value:`valueChange`},decls:9,vars:8,consts:[[`input`,``],[1,`box`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`search`,`autocomplete`,`off`,`spellcheck`,`false`,3,`input`,`keydown.escape`,`placeholder`,`value`],[`type`,`button`,1,`save`],[`aria-label`,`Saved filters`,1,`chips`],[`role`,`status`,1,`sr-only`],[`type`,`button`,1,`save`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M6 4h12v16l-6-4-6 4z`],[1,`save-text`],[1,`chip`,3,`active`],[1,`chip`],[`type`,`button`,1,`apply`,3,`click`],[`type`,`button`,1,`remove`,3,`click`],[`d`,`M7 7l10 10M17 7 7 17`]],template:function(e,t){e&1&&(L(0,`div`,1),C(),L(1,`svg`,2),Sg(2,`circle`,3)(3,`path`,4),R(),ys(),L(4,`input`,5,0),H(`input`,function(e){return t.value.set(e.target.value)})(`keydown.escape`,function(e){return t.clear(e)}),R()(),k(6,XE,5,1,`button`,6),k(7,QE,3,0,`ul`,7),k(8,$E,2,1,`span`,8)),e&2&&(E(4),B(`placeholder`,t.placeholder())(`value`,t.value()),O(`id`,t.inputId())(`aria-label`,t.label())(`aria-describedby`,t.describedBy()),E(2),A(t.canSave()?6:-1),E(),A(t.saveKey()&&t.saved().length?7:-1),E(),A(t.saveKey()?8:-1))},styles:[`[_nghost-%COMP%] {
+  display: flex;
+  flex: 1 1 220px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.box[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+input[_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+}
+
+input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.save[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 150ms var(--%NS%ease);
+}
+
+.save[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.save[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%], 
+.remove[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: 26px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 999px;
+  background: var(--%NS%surface);
+  overflow: hidden;
+}
+
+.chip.active[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.chip[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  height: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.apply[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 22ch;
+  padding: 0 4px 0 10px;
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.chip.active[_ngcontent-%COMP%]   .apply[_ngcontent-%COMP%] {
+  color: var(--%NS%accent-text);
+}
+
+.remove[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  padding: 0;
+  color: var(--%NS%text-2);
+}
+
+.remove[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text-strong);
+}
+
+.save[_ngcontent-%COMP%]:focus-visible, 
+.chip[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+@media (max-width: 420px) {
+  .save-text[_ngcontent-%COMP%] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .save[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})};function aD(e){return new Date(e).toLocaleTimeString()}var oD=/[ \t\n\r]/;function sD(e){let t=e.trim(),n;try{n=JSON.parse(t)}catch{return null}if(typeof n!=`object`||!n)return null;let r=``,i=0,a=()=>`\n${`  `.repeat(i)}`;for(let e=0;e<t.length;e++){let n=t[e];if(n===`"`){let n=e+1;for(;t[n]!==`"`;)n+=t[n]===`\\`?2:1;r+=t.slice(e,n+1),e=n}else if(n===`{`||n===`[`){let o=n===`{`?`}`:`]`,s=e+1;for(;oD.test(t[s]);)s++;t[s]===o?(r+=n+o,e=s):(i++,r+=n+a())}else n===`}`||n===`]`?(i--,r+=a()+n):n===`,`?r+=`,${a()}`:n===`:`?r+=`: `:oD.test(n)||(r+=n)}return r}function cD(e,t,n=`${t}s`){return`${e} ${e===1?t:n}`}function lD(e,t){if(e&1&&(L(0,`p`,0),G(1),L(2,`code`),G(3),R(),G(4,` to keep more. `),L(5,`a`,1),G(6,`About limits`),R()()),e&2){let e=U();E(),z_(` Showing the latest `,e.max(),` `,e.what(),`. `,e.dropped(),` older `,e.dropped()===1?`entry was`:`entries were`,` dropped. Raise `),E(2),q(`limits.`,e.limit()),E(2),B(`href`,e.docsUrl,Fu)}}var uD=`https://pangular-inspector.dev/getting-started/configuration/#limits`,dD=class e{dropped=$(0);max=$.required();what=$.required();limit=$.required();docsUrl=uD;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-limit-note`]],inputs:{dropped:[1,`dropped`],max:[1,`max`],what:[1,`what`],limit:[1,`limit`]},decls:1,vars:1,consts:[[1,`note`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){e&1&&k(0,lD,7,6,`p`,0),e&2&&A(t.dropped()>0?0:-1)},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  color: var(--%NS%text);
+}
+
+a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  border-radius: 2px;
+}
+
+a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})};function fD(e){let t=e?.pages;return t&&typeof t==`object`?t:{}}function pD(e){let t=b(Os),n=w({}),r=null,i=null,a=async e=>{i?.(),i=null,r=e;try{let a=await e.scope(`pangular`).rpc.sharedState(`page-angular`);if(t.destroyed||r!==e)return;let o=e=>n.set(fD(e));o(a.value()),i=a.on(`updated`,o)}catch{r===e&&n.set({})}};return T(()=>{let t=e();t&&t!==r&&Z(()=>void a(t))}),t.onDestroy(()=>i?.()),n.asReadonly()}function mD(e,t){if(t)return e[t]??null;let n=null;for(let t of Object.values(e))(!n||t.reportedAt>n.reportedAt)&&(n=t);return n}var hD=1e3;function gD(e){return typeof e==`number`&&Number.isFinite(e)&&e>0&&e<=hD?e:16}var _D=864e13,vD=200,yD=300,bD=100,xD=10,SD=100,CD=2e3,wD=2e3,TD=4e3,ED=1e3,DD=100,OD=3,kD=50,AD={component:`c`,hook:`h`,afterRender:`r`,output:`o`},jD=Object.values(AD),MD=e=>!!e&&typeof e==`object`&&!Array.isArray(e),ND=e=>typeof e==`number`&&Number.isFinite(e)&&e>=0?e:0,PD=(e,t)=>typeof e==`string`?e.slice(0,t):``,FD=e=>ND(e)>0?ND(e):void 0,ID=(e,t)=>Array.isArray(e)?e.slice(0,t):[];function LD(e){if(!MD(e))return null;let t=PD(e.name,vD);return t?{name:t,checks:ND(e.checks),ms:ND(e.ms)}:null}function RD(e,t){if(!Array.isArray(e)||e.length!==5)return null;let[n,r,i,a,o]=e;return typeof n!=`number`||!Number.isInteger(n)||n<0||n>=t||typeof r!=`number`||!Number.isFinite(r)||Math.abs(r)>1e7||typeof a!=`number`||!Number.isInteger(a)||a<0||a>ED||typeof o!=`string`||!jD.includes(o)?null:[n,r,ND(i),a,o]}function zD(e,t,n){if(!MD(e)||typeof e.id!=`number`)return null;let r=ID(e.components,xD).map(LD).filter(e=>!!e),i=PD(e.trigger,yD),a=ID(e.spans,40).map(e=>RD(e,t)).filter(e=>!!e),o=Array.isArray(e.spans)?e.spans.length-40:0,s=Math.floor(ND(e.droppedSpans))+Math.max(0,o),c={t:typeof e.t==`number`?ND(e.t):void 0,hookMs:FD(e.hookMs),afterRenderMs:FD(e.afterRenderMs),outputMs:FD(e.outputMs)},l=UD(e.cause),u=FD(e.refreshed),d=FD(e.unchanged);return{id:ND(e.id),at:ND(e.at),ms:ND(e.ms),passes:ND(e.passes),...i?{trigger:i}:{},checks:ND(e.checks),components:r,...Object.fromEntries(Object.entries(c).filter(([,e])=>e!==void 0)),...a.length?{spans:a}:{},...s?{droppedSpans:s}:{},...l?{cause:l}:{},...u?{refreshed:u}:{},...d?{unchanged:d}:{},...ND(e.ms)>n?{slow:!0}:{}}}var BD=[`event`,`http`,`timer`,`signal`,`effect`,`markForCheck`,`input`,`view`,`tick`,`zone`,`unknown`],VD={event:`Event`,http:`HTTP response`,timer:`Timer`,signal:`Signal write`,effect:`Effect`,markForCheck:`markForCheck`,input:`setInput`,view:`View change`,tick:`ApplicationRef.tick`,zone:`zone.js only`,unknown:`Unknown`},HD=e=>typeof e==`string`&&BD.includes(e);function UD(e){if(!MD(e)||!HD(e.kind))return;let t=[`component`,`listener`,`event`,`target`,`signal`,`task`],n={kind:e.kind};HD(e.via)&&(n.via=e.via);for(let r of t){let t=PD(e[r],vD);t&&(n[r]=t)}e.zone===!0&&(n.zone=!0);let r=ID(e.stack,OD).map(e=>PD(e,yD)).filter(Boolean);r.length&&(n.stack=r);let i=Math.floor(ND(e.more));return i&&(n.more=i),n}function WD(e){if(!MD(e))return null;let t=PD(e.name,vD);if(!t)return null;let n=e.strategy;return{name:t,refreshed:Math.floor(ND(e.refreshed)),unchanged:Math.floor(ND(e.unchanged)),...n===`OnPush`||n===`Eager`?{strategy:n}:{}}}function GD(e){if(!MD(e))return null;let t=PD(e.name,vD),n=PD(e.input,vD);if(!t||!n)return null;let r=PD(e.parent,vD);return{name:t,input:n,...r?{parent:r}:{},inPlace:Math.floor(ND(e.inPlace)),sameContents:Math.floor(ND(e.sameContents))}}function KD(e){if(!MD(e))return null;let t=PD(e.name,vD);if(!t)return null;let n=ID(e.tasks,3).map(e=>PD(e,vD)).filter(Boolean);return{name:t,ticks:Math.floor(ND(e.ticks)),...n.length?{tasks:n}:{}}}function qD(e){if(!MD(e))return;let t={};if(MD(e.causes))for(let n of BD){let r=Math.floor(ND(e.causes[n]));r&&(t[n]=r)}let n=ID(e.components,SD).map(WD).filter(e=>!!e),r=ID(e.inputs,kD).map(GD).filter(e=>!!e),i=ID(e.zone,kD).map(KD).filter(e=>!!e),a=Math.floor(ND(e.major));return{triggers:e.triggers===!0,waste:e.waste===!0,...a&&a<1e3?{major:a}:{},causes:t,components:n,...r.length?{inputs:r}:{},...i.length?{zone:i}:{},...typeof e.zoneJs==`boolean`?{zoneJs:e.zoneJs}:{}}}function JD(e){let t=[],n=e.component?` in ${e.component}${e.listener?` (${e.listener})`:``}`:``;switch(e.kind){case`event`:t.push(`${e.event??`Template listener`}${e.target?` on ${e.target}`:``}${n}`);break;case`http`:t.push(`HTTP response${n}`);break;case`timer`:t.push(`${e.task??`Timer`}${n}`);break;case`zone`:t.push(`zone.js tick with no Angular notification${e.task?` after ${e.task}`:``}`);break;case`tick`:t.push(`ApplicationRef.tick()${n}`);break;default:t.push(`${VD[e.kind]}${n}`)}return e.signal?t.push(e.signal===`?`?`wrote an unnamed signal`:`wrote signal ${e.signal}`):e.via&&e.via!==e.kind&&t.push(`via ${VD[e.via]}`),e.zone&&e.kind!==`zone`&&t.push(`run by zone.js`),e.more&&t.push(`${e.more} more notification${e.more===1?``:`s`}`),t.join(`, `)}function YD(e){if(!e)return[];let t=[],n=(e.major??0)>=22;for(let r of e.components){if(r.refreshed<10)continue;let e=r.refreshed-r.unchanged;if(e/r.refreshed>.2)continue;let i=`refreshed ${r.refreshed} times and changed something in ${e}`;r.strategy===`Eager`?t.push({name:r.name,kind:`on-push`,text:n?`${r.name} was ${i}. It opts out of OnPush, which is the default from Angular 22: remove \`changeDetection: ChangeDetectionStrategy.Eager\` (or \`Default\`) so Angular skips it until an input, event, signal or markForCheck marks it.`:`${r.name} was ${i}. Add \`changeDetection: ChangeDetectionStrategy.OnPush\` so Angular skips it until an input, event, signal or markForCheck marks it.`}):r.strategy===`OnPush`&&t.push({name:r.name,kind:`already-on-push`,text:`${r.name} was ${i}, and it is already OnPush${n?` (the default from Angular 22)`:``}. Something keeps marking it: an input that gets a new reference each time, an event or output in it, markForCheck, or a signal it reads that is set to an equal value.`})}for(let n of e.inputs??[]){let e=n.parent?` set by ${n.parent}`:``;n.inPlace&&t.push({name:n.name,kind:`in-place`,text:`Input ${n.input} of ${n.name}${e} changed in place ${n.inPlace} time${n.inPlace===1?``:`s`}: same reference, different contents. OnPush components, computed and signal equality don't see that. Pass a new object or array instead of mutating it.`}),n.sameContents&&t.push({name:n.name,kind:`same-contents`,text:`Input ${n.input} of ${n.name}${e} got a new reference with the same contents ${n.sameContents} time${n.sameContents===1?``:`s`}, so Angular refreshed ${n.name} for nothing. Keep the reference when nothing changed, for example with a computed instead of a method call in the template.`})}for(let n of e.zone??[]){let e=n.tasks?.length?` (after ${n.tasks.join(`, `)})`:``;t.push({name:n.name,kind:`zone`,text:`${n.name} changed in ${n.ticks} tick${n.ticks===1?``:`s`} that only zone.js started${e}. Without zone.js it would not update: keep that state in a signal, or call markForCheck after changing it.`})}return t}function XD(e){let t=LD(e);return!t||!MD(e)?null:{...t,maxMs:ND(e.maxMs),cycles:ND(e.cycles)}}function ZD(e){if(!MD(e))return null;let t=PD(e.name,vD),n=PD(e.hook,bD);if(!t||!n)return null;let{calls:r,ms:i,maxMs:a}=e;return{name:t,hook:n,calls:ND(r),ms:ND(i),maxMs:ND(a)}}function QD(e){if(!MD(e))return null;let t=PD(e.name,vD);if(!t)return null;let n=PD(e.listener,vD);return{name:t,...n?{listener:n}:{},calls:ND(e.calls),ms:ND(e.ms),maxMs:ND(e.maxMs)}}function $D(e){if(MD(e)&&ND(e.runs))return{runs:ND(e.runs),ms:ND(e.ms),maxMs:ND(e.maxMs)}}function eO(e,t){if(!MD(e))return null;let n=ID(e.spanNames,TD).map(e=>PD(e,yD)),r=gD(e.slowMs),i=Array.isArray(e.cycles)?e.cycles.slice(-Math.min(t,wD)).map(e=>zD(e,n.length,r)).filter(e=>!!e):[],a={},o=0;if(MD(e.hosts)){let t=Object.entries(e.hosts);o=Math.max(0,t.length-CD);for(let[e,n]of t.slice(0,CD))e.length<50&&ND(n)&&(a[e]=ND(n))}let s=Array.isArray(e.components)?e.components:[],c=Math.floor(ND(e.droppedClasses))+Math.max(0,s.length-SD),l=Math.floor(ND(e.droppedHosts))+o,u=ID(e.hooks,DD).map(ZD).filter(e=>!!e),d=ID(e.outputs,DD).map(QD).filter(e=>!!e),f=Math.max(0,ID(e.hooks,1/0).length-DD)+Math.max(0,ID(e.outputs,1/0).length-DD),p=Math.floor(ND(e.droppedTimings))+f,m=$D(e.afterRender),ee=i.some(e=>e.spans?.length),h=qD(e.diagnosis);return{recording:e.recording===!0,startedAt:typeof e.startedAt==`number`&&e.startedAt<=_D?ND(e.startedAt):null,dropped:ND(e.dropped),slowMs:r,cycles:i,components:s.slice(0,SD).map(XD).filter(e=>!!e),...c?{droppedClasses:c}:{},hosts:a,...l?{droppedHosts:l}:{},...u.length?{hooks:u}:{},...d.length?{outputs:d}:{},...p?{droppedTimings:p}:{},...m?{afterRender:m}:{},...ee?{spanNames:n}:{},...h?{diagnosis:h}:{}}}var tO=`pangular-inspector/change-detection`;function nO(e,t,n=Date.now()){return{format:tO,version:1,exportedAt:n,pageId:t,recording:{...eO(e,wD)??e,recording:!1,hosts:{}}}}function rO(e,t){if(e.length>2e7||e.length*3>2e7&&new TextEncoder().encode(e).byteLength>2e7)return{ok:!1,error:`The file is larger than 20 MB.`};let n;try{n=JSON.parse(e)}catch{return{ok:!1,error:`The file is not valid JSON.`}}if(!MD(n))return{ok:!1,error:`The file is not a recording.`};if(n.format!==void 0&&n.format!==`pangular-inspector/change-detection`)return{ok:!1,error:`The file is not a change detection recording.`};let r=MD(n.recording)?n.recording:n;if(!Array.isArray(r.cycles))return{ok:!1,error:`The file has no change detection cycles.`};let i=eO(r,t);if(!i)return{ok:!1,error:`The file is not a recording.`};let a=PD(n.pageId??r.pageId,49)||`imported`,o=FD(n.exportedAt);return{ok:!0,pageId:a,...o?{exportedAt:o}:{},recording:{...i,recording:!1}}}var iO=1,aO=1,oO=2,sO={c:`component`,h:`lifecycle-hook`,r:`after-render`,o:`output`},cO=e=>Math.round(e*1e6)/1e3;function lO(e,t){let n=e.spanNames??[],r=e.cycles[0]?.at??0,i=e.startedAt??r,a=[],o=0,s=0;for(let t of e.cycles){let e=t.t??Math.max(0,t.at-i),r=e+t.ms;a.push({name:`Change detection #${t.id}`,cat:`change-detection`,ph:`X`,pid:iO,tid:aO,ts:cO(e),dur:cO(t.ms),args:{checks:t.checks,passes:t.passes,...t.trigger?{trigger:t.trigger}:{},...t.hookMs?{hookMs:t.hookMs}:{},...t.afterRenderMs?{afterRenderMs:t.afterRenderMs}:{},...t.outputMs?{outputMs:t.outputMs}:{},...t.cause?{cause:JD(t.cause)}:{},...t.unchanged?{unchanged:t.unchanged}:{},slowest:t.components.map(e=>`${e.name} ${e.checks}x ${e.ms}ms`)}}),s+=t.droppedSpans??0;let c=[{end:r}],l=[...t.spans??[]].sort((e,t)=>e[1]-t[1]||t[2]-e[2]);for(let[r,i,s,u,d]of l){o++;let l=n[r]??`?`;if(d===AD.output){let n=e+i;a.push({name:l,cat:sO[d],ph:`X`,pid:iO,tid:oO,ts:cO(n),dur:cO(i<0?Math.max(0,Math.min(s,-i)):s),args:{cycle:t.id}});continue}let f=Math.max(e,e+i);for(;c.length>1&&c.at(-1).end<=f;)c.pop();let p=c.at(-1).end,m=Math.min(f+s,p);m<f||(c.push({end:m}),a.push({name:l,cat:sO[d],ph:`X`,pid:iO,tid:aO,ts:cO(f),dur:cO(m-f),args:{cycle:t.id,depth:u}}))}}let c=Math.min(0,...a.map(e=>e.ts??0));if(c<0)for(let e of a)e.ts=cO((e.ts-c)/1e3);a.sort((e,t)=>e.ts-t.ts||t.dur-e.dur);let l=(e,t,n)=>({name:t,ph:`M`,pid:iO,tid:e,args:{name:n}});return{traceEvents:[l(0,`process_name`,`Angular change detection (page ${t})`),l(aO,`thread_name`,`Change detection`),l(oO,`thread_name`,`Outputs`),...a],displayTimeUnit:`ms`,otherData:{source:`Pangular Inspector change detection recording`,pageId:t,cycles:e.cycles.length,droppedCycles:e.dropped,spans:o,droppedSpans:s,...e.startedAt&&e.startedAt<=_D?{startedAt:new Date(e.startedAt).toISOString()}:{}}}}function uO(e,t=16){return e.ms>t}function dO(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}function fO(e,t){if(!t)return[...e];let n=Math.min(t.from,t.to),r=Math.max(t.from,t.to),i=e.filter(e=>e.id>=n&&e.id<=r);return i.length?i:[...e]}function pO(e){let t=new Map;for(let n of e)for(let e of n.components){let n=t.get(e.name);n?(n.checks+=e.checks,n.ms+=e.ms,n.maxMs=Math.max(n.maxMs,e.ms),n.cycles+=1):t.set(e.name,{name:e.name,checks:e.checks,ms:e.ms,maxMs:e.ms,cycles:1})}return[...t.values()].sort((e,t)=>t.ms-e.ms||e.name.localeCompare(t.name))}function mO(e,t=16){let n=e.reduce((e,t)=>Math.max(e,t.ms),0);return Math.max(n,t*1.25)}function hO(e,t,n=3){let r=e.map(e=>({item:e,value:t(e)})).filter(e=>e.value>0).sort((e,t)=>t.value-e.value),i=r.reduce((e,t)=>e+t.value,0);if(!i)return[];let a=n/i,o=[],s=0,c=0,l=n,u=1,d=[],f=(e,t)=>{let n=e.reduce((e,t)=>e+t,0),r=Math.max(...e),i=Math.min(...e);return Math.max(t*t*r/(n*n),n*n/(t*t*i))},p=()=>{let e=d.reduce((e,t)=>e+t.area,0);if(l>=u){let t=e/u,n=c;for(let e of d){let r=e.area/t;o.push({item:e.item,x:s,y:n,w:t,h:r}),n+=r}s+=t,l-=t}else{let t=e/l,n=s;for(let e of d){let r=e.area/t;o.push({item:e.item,x:n,y:c,w:r,h:t}),n+=r}c+=t,u-=t}d=[]};for(let e of r){let t=e.value*a,n=Math.min(l,u),r=d.map(e=>e.area);d.length&&f([...r,t],n)>f(r,n)&&p(),d.push({item:e.item,area:t})}return d.length&&p(),o.map(e=>({item:e.item,x:e.x/n*100,y:e.y*100,w:e.w/n*100,h:e.h*100}))}var gO={c:`component`,h:`hook`,r:`afterRender`,o:`output`};function _O(e,t){if(t===`c`)return e||null;if(t===`h`){let t=e.lastIndexOf(`.`);return t>0?e.slice(0,t):null}if(t===`o`){let t=e.indexOf(` (`),n=t>0?e.slice(0,t):e;return n&&n!==`?`?n:null}return null}function vO(e,t){let n=e.filter(e=>e.spans?.length);if(!n.length)return null;let r=n.map(e=>{let t=e.spans,n=Math.min(0,...t.map(e=>e[1])),r=Math.max(e.ms,...t.map(e=>e[1]+e[2]));return{cycle:e,spans:t,from:n,width:Math.max(r-n,.001)}}),i=r.reduce((e,t)=>e+t.width,0),a=[],o=[],s=0,c=0;for(let{cycle:e,spans:n,from:l,width:u}of r){o.push({id:e.id,x:s/i*100,w:u/i*100,droppedSpans:e.droppedSpans??0});let r=[...n].sort((e,t)=>e[1]-t[1]||e[3]-t[3]),d=[];for(let[n,o,u,f,p]of r){let r=t[n]??`unknown`,m=d[f-1],ee=f>0&&m!==void 0&&o<a[m].start+a[m].ms+1e-6?m:null,h={index:a.length,cycleId:e.id,name:r,kind:p,start:o,ms:u,selfMs:u,depth:f,parent:ee,component:_O(r,p),x:(s+o-l)/i*100,w:u/i*100};ee!==null&&(a[ee].selfMs=Math.max(a[ee].selfMs-u,0)),a.push(h),d[f]=h.index,d.length=f+1,c=Math.max(c,f+1)}s+=u}return{blocks:a,cycles:o,depth:c,totalMs:i}}var yO=(e,t)=>t.kind,bO=(e,t)=>t.name,xO=(e,t)=>t.name+`.`+t.input;function SO(e,t){e&1&&(L(0,`p`,3),G(1,` The page has no Angular change detection scheduler the overlay could find (it needs Angular 18 or later), so cycles have no cause. `),R())}function CO(e,t){if(e&1&&(L(0,`tr`)(1,`td`),G(2),R(),L(3,`td`,6),G(4),R()()),e&2){let e=t.$implicit;E(2),K(e.label),E(2),K(e.count)}}function wO(e,t){if(e&1&&(L(0,`table`)(1,`thead`)(2,`tr`)(3,`th`,4),G(4,`Trigger`),R(),L(5,`th`,5),G(6,`Cycles`),R()()(),L(7,`tbody`),j(8,CO,5,2,`tr`,null,yO),R()()),e&2){let e=U(2);E(8),M(e.causes())}}function TO(e,t){e&1&&(L(0,`p`,3),G(1,`No cycle has a cause yet.`),R())}function EO(e,t){if(e&1&&(L(0,`tr`)(1,`td`,7),G(2),R(),L(3,`td`,6),G(4),R(),L(5,`td`,7),G(6),R()()),e&2){let e=t.$implicit;E(2),K(e.name),E(2),K(e.ticks),E(2),K(e.tasks?.join(`, `))}}function DO(e,t){if(e&1&&(L(0,`table`)(1,`thead`)(2,`tr`)(3,`th`,4),G(4,`Component`),R(),L(5,`th`,5),G(6,`Zone-only ticks`),R(),L(7,`th`,4),G(8,`After`),R()()(),L(9,`tbody`),j(10,EO,7,3,`tr`,null,bO),R()()),e&2){let e=U(3);E(10),M(e.zone())}}function OO(e,t){if(e&1&&(L(0,`p`,3),G(1),R()),e&2){let e=U(3);E(),K(e.zoneNote())}}function kO(e,t){if(e&1&&(L(0,`div`)(1,`h4`),G(2,`Depends on zone.js`),R(),k(3,DO,12,0,`table`)(4,OO,2,1,`p`,3),R()),e&2){let e=U(),t=U();E(3),A(t.zone().length?3:e.triggers?4:-1)}}function AO(e,t){e&1&&(L(0,`p`,3),G(1,`The page can't watch DOM updates, so wasted checks are not counted.`),R())}function jO(e,t){if(e&1&&(L(0,`tr`)(1,`td`,7),G(2),R(),L(3,`td`,6),G(4),R(),L(5,`td`,6),G(6),R(),L(7,`td`),G(8),R()()),e&2){let e=t.$implicit,n=U(3);E(2),K(e.name),E(2),K(e.refreshed),E(2),J(``,e.unchanged,` (`,n.share(e.unchanged,e.refreshed),`)`),E(2),K(e.strategy??`Unknown`)}}function MO(e,t){if(e&1&&(L(0,`table`)(1,`thead`)(2,`tr`)(3,`th`,4),G(4,`Component`),R(),L(5,`th`,5),G(6,`Refreshed`),R(),L(7,`th`,5),G(8,`Changed nothing`),R(),L(9,`th`,4),G(10,`Strategy`),R()()(),L(11,`tbody`),j(12,jO,9,5,`tr`,null,bO),R()()),e&2){let e=U(2);E(12),M(e.wasted())}}function NO(e,t){e&1&&(L(0,`p`,3),G(1,`Every refreshed check changed something.`),R())}function PO(e,t){if(e&1&&(L(0,`tr`)(1,`td`,7),G(2),R(),L(3,`td`,7),G(4),R(),L(5,`td`,6),G(6),R(),L(7,`td`,6),G(8),R()()),e&2){let e=t.$implicit;E(2),J(``,e.name,`.`,e.input),E(2),K(e.parent??`Unknown`),E(2),K(e.inPlace),E(2),K(e.sameContents)}}function FO(e,t){if(e&1&&(L(0,`h4`),G(1,`Inputs that break OnPush`),R(),L(2,`table`)(3,`thead`)(4,`tr`)(5,`th`,4),G(6,`Input`),R(),L(7,`th`,4),G(8,`Set by`),R(),L(9,`th`,5),G(10,`Changed in place`),R(),L(11,`th`,5),G(12,`Same contents, new reference`),R()()(),L(13,`tbody`),j(14,PO,9,5,`tr`,null,xO),R()()),e&2){let e=U(2);E(14),M(e.inputs())}}function IO(e,t){if(e&1&&(L(0,`li`),G(1),R()),e&2){let e=t.$implicit;E(),K(e.text)}}function LO(e,t){if(e&1&&(L(0,`h4`),G(1,`Hints`),R(),L(2,`ul`,8),j(3,IO,2,1,`li`,null,ug),R()),e&2){let e=U(2);E(3),M(e.hints())}}function RO(e,t){if(e&1&&(L(0,`section`,0)(1,`h3`,1),G(2,`Why it ran and what it wasted`),R(),L(3,`div`,2)(4,`div`)(5,`h4`),G(6,`What started the cycles`),R(),k(7,SO,2,0,`p`,3)(8,wO,10,0,`table`)(9,TO,2,0,`p`,3),R(),k(10,kO,5,1,`div`),R(),L(11,`h4`),G(12,`Wasted checks`),R(),k(13,AO,2,0,`p`,3)(14,MO,14,0,`table`)(15,NO,2,0,`p`,3),k(16,FO,16,0),k(17,LO,5,0),R()),e&2){let e=t,n=U();E(7),A(e.triggers?n.causes().length?8:9:7),E(3),A(n.hasZone()?10:-1),E(3),A(e.waste?n.wasted().length?14:15:13),E(3),A(n.inputs().length?16:-1),E(),A(n.hints().length?17:-1)}}var zO=10,BO=class e{page=$(null);diagnosis=X(()=>this.page()?.diagnosis??null);causes=X(()=>{let e=this.diagnosis()?.causes??{};return BD.filter(t=>e[t]).map(t=>({kind:t,label:VD[t],count:e[t]}))});zone=X(()=>(this.diagnosis()?.zone??[]).slice(0,zO));zoneTicks=X(()=>this.diagnosis()?.causes.zone??0);hasZone=X(()=>this.diagnosis()?.zoneJs??(this.zone().length>0||this.zoneTicks()>0));zoneNote=X(()=>{let e=this.zoneTicks();return e?`${e} ${e===1?`tick`:`ticks`} came from zone.js alone, and no component changed in them.`:`No component changed in a tick only zone.js started.`});wasted=X(()=>(this.diagnosis()?.components??[]).filter(e=>e.unchanged>0).slice(0,zO));inputs=X(()=>(this.diagnosis()?.inputs??[]).slice(0,zO));hints=X(()=>YD(this.diagnosis()??void 0).slice(0,zO));share(e,t){return t?`${Math.round(e/t*100)}%`:`0%`}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-cd-diagnosis`]],inputs:{page:[1,`page`]},decls:1,vars:1,consts:[[`aria-labelledby`,`cd-diagnosis-heading`,1,`diagnosis`],[`id`,`cd-diagnosis-heading`],[1,`grid`],[1,`note`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`num`],[1,`mono`],[1,`hints`]],template:function(e,t){if(e&1&&k(0,RO,18,5,`section`,0),e&2){let e;A((e=t.diagnosis())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 16px 0 6px;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin: 12px 0 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.grid[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0 16px;
+}
+
+@media (min-width: 880px) {
+  .grid[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 500;
+}
+
+td.mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 4px 0 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.hints[_ngcontent-%COMP%] {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--%NS%text);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.hints[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
+  margin-top: 4px;
+}`]})},VO=(e,t)=>t.cycle.id,HO=(e,t)=>t.id;function UO(e,t){if(e&1){let e=z();L(0,`button`,27),H(`click`,function(){return x(e),S(U().showAll())}),G(1,`Show all cycles`),R()}}function WO(e,t){if(e&1&&Sg(0,`div`,28),e&2){let e=t;f_(`left`,e.left,`%`)(`width`,e.width,`%`)}}function GO(e,t){if(e&1&&(L(0,`div`,29),Sg(1,`span`,30),R()),e&2){let e=t.$implicit,n=U();W(`over`,e.over)(`out`,!n.inRange(e.index)&&!!n.range())(`active`,n.focused()&&n.active()===e.index),B(`id`,n.optionId(e.index)),O(`data-index`,e.index)(`aria-selected`,n.inRange(e.index))(`aria-label`,e.label),E(),f_(`height`,e.height,`%`)}}function KO(e,t){e&1&&(L(0,`span`,33),G(1,`over budget`),R())}function qO(e,t){if(e&1&&(L(0,`p`),G(1,` after `),L(2,`span`,35),G(3),R()()),e&2){let e=U();E(3),K(e.cycle.trigger)}}function JO(e,t){if(e&1&&(L(0,`p`,34)(1,`span`,36),G(2),R(),L(3,`span`),G(4),R()()),e&2){let e=t.$implicit,n=U(2);E(2),K(e.name),E(2),K(n.fmt(e.ms))}}function YO(e,t){if(e&1&&(L(0,`div`,31)(1,`p`,32)(2,`strong`),G(3),R(),L(4,`span`),G(5),R(),k(6,KO,2,0,`span`,33),R(),k(7,qO,4,1,`p`),L(8,`p`),G(9),R(),j(10,JO,5,2,`p`,34,ug),R()),e&2){let e=t,n=U();f_(`left`,e.left)(`right`,e.right),E(3),K(n.fmt(e.cycle.ms)),E(2),q(`cycle `,e.cycle.id),E(),A(e.over?6:-1),E(),A(e.cycle.trigger?7:-1),E(2),z_(` `,e.cycle.checks,` `,e.cycle.checks===1?`check`:`checks`,`, `,e.cycle.passes,` `,e.cycle.passes===1?`pass`:`passes`,` `),E(),M(e.top)}}function XO(e,t){if(e&1&&Sg(0,`span`),e&2){let e=t.$implicit;W(`over`,e.over)}}function ZO(e,t){if(e&1&&G(0),e&2){let e=t,n=U(2);J(` `,e.name,` (`,n.fmt(e.ms),`) `)}}function QO(e,t){if(e&1&&(L(0,`tr`)(1,`td`,37),G(2),R(),L(3,`td`,37),G(4),R(),L(5,`td`),G(6),R(),L(7,`td`,37),G(8),R(),L(9,`td`,37),G(10),R(),L(11,`td`,35),G(12),R(),L(13,`td`,35),k(14,ZO,1,2),R()()),e&2){let e,n=t.$implicit,r=U();E(2),K(n.id),E(2),K(r.fmt(n.ms)),E(2),K(r.isOver(n)?`Over`:`Within`),E(2),K(n.checks),E(2),K(n.passes),E(2),K(n.trigger??``),E(2),A((e=n.components[0])?14:-1,e)}}var $O=0,ek=80,tk=10,nk=class e{cycles=$([]);range=Ev(null);slowMs=$(16);gapUntil=ek;budgetLabel=X(()=>`${this.slowMs()} ms budget`);uid=`cd-chart-${$O++}`;hintId=`${this.uid}-hint`;active=w(null);anchor=null;dragging=!1;hover=w(null);focused=w(!1);max=X(()=>mO(this.cycles(),this.slowMs()));budgetAt=X(()=>this.slowMs()/this.max()*100);bars=X(()=>{let e=this.max();return this.cycles().map((t,n)=>({cycle:t,index:n,height:t.ms/e*100,over:uO(t,this.slowMs()),label:this.describe(t)}))});firstId=X(()=>this.cycles()[0]?.id??0);lastId=X(()=>this.cycles().at(-1)?.id??0);span=X(()=>{let e=this.range();if(!e)return null;let t=this.cycles(),n=Math.min(e.from,e.to),r=Math.max(e.from,e.to),i=t.findIndex(e=>e.id>=n),a=-1;for(let e=t.length-1;e>=0;e--)if(t[e].id<=r){a=e;break}return i<0||a<i?null:{start:i,end:a}});selected=X(()=>fO(this.cycles(),this.range()));startId=X(()=>this.selected()[0]?.id??``);endId=X(()=>this.selected().at(-1)?.id??``);band=X(()=>{let e=this.span(),t=this.cycles().length;return!e||!t?null:{left:e.start/t*100,width:(e.end-e.start+1)/t*100}});summary=X(()=>{let e=this.selected(),t=this.slowMs(),n=e.filter(e=>uO(e,t)).length;return`${this.span()?e.length===1?`Cycle ${e[0].id}`:`Cycles ${e[0].id} to ${e.at(-1).id} (${e.length})`:`All ${e.length} ${e.length===1?`cycle`:`cycles`}`}. ${n} over the ${t} ms budget.`});tableLabel=X(()=>this.span()?`Picked cycles, ${this.summary()}`:`All recorded cycles`);activeOptionId=X(()=>{let e=this.active();return this.focused()&&e!==null&&e<this.cycles().length?this.optionId(e):null});tip=X(()=>{let e=this.hover()??(this.focused()?this.active():null),t=e===null?void 0:this.cycles()[e];return!t||e===null?null:{cycle:t,over:uO(t,this.slowMs()),top:t.components.slice(0,3),...this.tipSide(e)}});tipSide(e){let t=this.cycles().length;return e+.5<t/2?{left:`min(calc(${(e+1)/t*100}% + 6px), max(0px, calc(100% - 240px)))`,right:null}:{left:null,right:`min(calc(${(t-e)/t*100}% + 6px), max(0px, calc(100% - 240px)))`}}fmt(e){return dO(e)}isOver(e){return uO(e,this.slowMs())}optionId(e){return`${this.uid}-${e}`}inRange(e){let t=this.span();return!!t&&e>=t.start&&e<=t.end}describe(e){let t=[`Cycle ${e.id}`,dO(e.ms)];uO(e,this.slowMs())&&t.push(`over budget`),e.trigger&&t.push(`after ${e.trigger}`),t.push(`${e.checks} ${e.checks===1?`check`:`checks`}`);let n=e.components[0];return n&&t.push(`slowest ${n.name} ${dO(n.ms)}`),t.join(`, `)}select(e,t){let n=this.cycles(),r=n[Math.min(e,t)],i=n[Math.max(e,t)];r&&i&&this.range.set({from:r.id,to:i.id})}showAll(){this.range.set(null),this.anchor=null}setEnd(e,t){if(!this.cycles().length)return;let n=t.target,r=Number.parseInt(n.value,10);if(Number.isNaN(r)){n.value=String(e===`from`?this.startId():this.endId());return}let i=Math.min(Math.max(r,this.firstId()),this.lastId()),a=this.selected(),o=e===`from`?i:a[0]?.id??this.firstId(),s=e===`to`?i:a.at(-1)?.id??this.lastId();this.range.set({from:Math.min(o,s),to:Math.max(o,s)}),n.value=String(e===`from`?Math.min(o,s):Math.max(o,s))}onFocus(){this.focused.set(!0),(this.active()===null||this.active()>=this.cycles().length)&&this.active.set(this.span()?.start??Math.max(this.cycles().length-1,0)),this.anchor??=this.active()}onKey(e){let t=this.cycles().length;if(!t)return;let n=Math.min(this.active()??t-1,t-1),r=null;switch(e.key){case`ArrowRight`:case`ArrowDown`:r=n+1;break;case`ArrowLeft`:case`ArrowUp`:r=n-1;break;case`PageDown`:r=n+tk;break;case`PageUp`:r=n-tk;break;case`Home`:r=0;break;case`End`:r=t-1;break;case`Enter`:case` `:e.preventDefault(),this.anchor=n,this.select(n,n);return;case`Escape`:this.range()&&(e.preventDefault(),this.showAll());return;default:return}e.preventDefault(),r=Math.min(Math.max(r,0),t-1),this.active.set(r),this.hover.set(null),e.shiftKey?(this.anchor??=n,this.select(this.anchor,r)):this.anchor=r}indexAt(e){let t=e.target?.closest?.(`[data-index]`);if(t)return Number(t.getAttribute(`data-index`));let n=e.currentTarget?.getBoundingClientRect(),r=this.cycles().length;if(!n?.width||!r)return null;let i=(e.clientX-n.left)/n.width;return Math.min(Math.max(Math.floor(i*r),0),r-1)}startDrag(e){if(e.button!==0)return;let t=this.indexAt(e);t!==null&&(this.dragging=!0,this.anchor=t,this.active.set(t),this.select(t,t))}onPointerMove(e){let t=this.indexAt(e);this.hover.set(t),this.dragging&&t!==null&&this.anchor!==null&&(this.active.set(t),this.select(this.anchor,t))}endDrag(){this.dragging=!1}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-cd-cycle-chart`]],hostBindings:function(e,t){e&1&&V(`pointerup`,function(){return t.endDrag()},Lu)(`pointercancel`,function(){return t.endDrag()},Lu)},inputs:{cycles:[1,`cycles`],range:[1,`range`],slowMs:[1,`slowMs`]},outputs:{range:`rangeChange`},decls:69,vars:25,consts:[[1,`range`],[`type`,`number`,`inputmode`,`numeric`,3,`change`,`min`,`max`,`value`],[`type`,`button`],[1,`summary`],[1,`hint`,3,`id`],[1,`plot`],[`aria-hidden`,`true`,1,`axis`],[1,`tick`,`top`],[1,`tick`,`zero`],[1,`area`],[`aria-hidden`,`true`,1,`band`,3,`left`,`width`],[`aria-hidden`,`true`,1,`budget`],[`role`,`listbox`,`aria-multiselectable`,`true`,`aria-orientation`,`horizontal`,`tabindex`,`0`,1,`bars`,3,`keydown`,`focus`,`blur`,`pointerdown`,`pointermove`,`pointerleave`],[`role`,`option`,1,`col`,3,`id`,`over`,`out`,`active`],[`aria-hidden`,`true`,1,`tip`,3,`left`,`right`],[`aria-hidden`,`true`,1,`markers`],[3,`over`],[`aria-label`,`Chart key`,1,`legend`],[`aria-hidden`,`true`,1,`key`,`ok`],[`aria-hidden`,`true`,1,`key`,`over`],[`aria-hidden`,`true`,1,`key-marker`],[`aria-hidden`,`true`,1,`key`,`line`],[1,`table`],[`tabindex`,`0`,`role`,`region`,1,`table-wrap`],[1,`sr-only`],[`scope`,`col`,1,`num`],[`scope`,`col`],[`type`,`button`,3,`click`],[`aria-hidden`,`true`,1,`band`],[`role`,`option`,1,`col`,3,`id`],[1,`bar`],[`aria-hidden`,`true`,1,`tip`],[1,`tip-head`],[1,`flag`],[1,`tip-row`],[1,`mono`],[1,`mono`,`name`],[1,`num`]],template:function(e,t){if(e&1&&(L(0,`div`,0)(1,`label`)(2,`span`),G(3,`Start`),R(),L(4,`input`,1),H(`change`,function(e){return t.setEnd(`from`,e)}),R()(),L(5,`label`)(6,`span`),G(7,`End`),R(),L(8,`input`,1),H(`change`,function(e){return t.setEnd(`to`,e)}),R()(),k(9,UO,2,0,`button`,2),L(10,`p`,3),G(11),R()(),L(12,`p`,4),G(13,` Drag across the bars to pick a range of cycles. With the chart focused, the arrow keys move between cycles, Shift with an arrow key extends the range, Enter picks one cycle and Escape shows all cycles again. `),R(),L(14,`div`,5)(15,`div`,6)(16,`span`,7),G(17),R(),L(18,`span`,8),G(19,`0 ms`),R()(),L(20,`div`,9),k(21,WO,1,4,`div`,10),L(22,`div`,11)(23,`span`),G(24),R()(),L(25,`div`,12),H(`keydown`,function(e){return t.onKey(e)})(`focus`,function(){return t.onFocus()})(`blur`,function(){return t.focused.set(!1)})(`pointerdown`,function(e){return t.startDrag(e)})(`pointermove`,function(e){return t.onPointerMove(e)})(`pointerleave`,function(){return t.hover.set(null)}),j(26,GO,2,12,`div`,13,VO),R(),k(28,YO,12,12,`div`,14),R()(),L(29,`div`,15),j(30,XO,1,2,`span`,16,VO),R(),L(32,`ul`,17)(33,`li`),Sg(34,`span`,18),G(35,`Within budget`),R(),L(36,`li`),Sg(37,`span`,19)(38,`span`,20),G(39,`Over budget `),R(),L(40,`li`),Sg(41,`span`,21),G(42),R()(),L(43,`details`,22)(44,`summary`),G(45,`Show the cycles as a table`),R(),L(46,`div`,23)(47,`table`)(48,`caption`,24),G(49),R(),L(50,`thead`)(51,`tr`)(52,`th`,25),G(53,`Cycle`),R(),L(54,`th`,25),G(55,`Duration`),R(),L(56,`th`,26),G(57,`Budget`),R(),L(58,`th`,25),G(59,`Checks`),R(),L(60,`th`,25),G(61,`Passes`),R(),L(62,`th`,26),G(63,`After`),R(),L(64,`th`,26),G(65,`Slowest component`),R()()(),L(66,`tbody`),j(67,QO,15,7,`tr`,null,HO),R()()()()),e&2){let e,n;E(4),B(`min`,t.firstId())(`max`,t.lastId())(`value`,t.startId()),E(4),B(`min`,t.firstId())(`max`,t.lastId())(`value`,t.endId()),E(),A(t.range()?9:-1),E(2),K(t.summary()),E(),B(`id`,t.hintId),E(2),W(`flush`,t.bars().length>t.gapUntil),E(3),K(t.fmt(t.max())),E(4),A((e=t.band())?21:-1,e),E(),f_(`bottom`,t.budgetAt(),`%`),E(2),K(t.budgetLabel()),E(),O(`aria-label`,`Change detection cycles, `+t.summary())(`aria-describedby`,t.hintId)(`aria-activedescendant`,t.activeOptionId()),E(),M(t.bars()),E(2),A((n=t.tip())?28:-1,n),E(),W(`flush`,t.bars().length>t.gapUntil),E(),M(t.bars()),E(12),K(t.budgetLabel()),E(4),O(`aria-label`,t.tableLabel()),E(3),q(` `,t.tableLabel(),` `),E(18),M(t.selected())}},styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.range[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+
+label[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%] {
+  width: 76px;
+  height: var(--%NS%control-h);
+  padding: 0 8px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+}
+
+input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+button[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+}
+
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.summary[_ngcontent-%COMP%], 
+.hint[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 6px 0 8px;
+}
+
+.plot[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 6px;
+}
+
+.axis[_ngcontent-%COMP%] {
+  position: relative;
+  width: 44px;
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  text-align: right;
+}
+
+.tick[_ngcontent-%COMP%] {
+  position: absolute;
+  right: 0;
+}
+
+.tick.top[_ngcontent-%COMP%] {
+  top: 0;
+}
+
+.tick.zero[_ngcontent-%COMP%] {
+  bottom: -6px;
+}
+
+.area[_ngcontent-%COMP%] {
+  position: relative;
+  height: 140px;
+  border-bottom: 1px solid var(--%NS%border-strong);
+}
+
+.bars[_ngcontent-%COMP%] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: stretch;
+  column-gap: 2px;
+  touch-action: none;
+  cursor: crosshair;
+  user-select: none;
+}
+
+.flush[_ngcontent-%COMP%]   .bars[_ngcontent-%COMP%], 
+.markers.flush[_ngcontent-%COMP%] {
+  column-gap: 0;
+}
+
+.bars[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.col[_ngcontent-%COMP%] {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  align-items: flex-end;
+  justify-content: center;
+  min-width: 0;
+}
+
+.bar[_ngcontent-%COMP%] {
+  width: min(24px, 100%);
+  min-height: 1px;
+  background: var(--%NS%accent);
+  border-radius: 4px 4px 0 0;
+  transition: height 150ms var(--%NS%ease);
+}
+
+.flush[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
+  border-radius: 1px 1px 0 0;
+}
+
+.col.over[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
+  background: repeating-linear-gradient(135deg, var(--%NS%danger) 0 3px, color-mix(in srgb, var(--%NS%danger) 55%, var(--%NS%surface)) 3px 6px);
+}
+
+.col.out[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
+  opacity: 0.4;
+}
+
+.col[_ngcontent-%COMP%]:hover   .bar[_ngcontent-%COMP%], 
+.col.active[_ngcontent-%COMP%]   .bar[_ngcontent-%COMP%] {
+  outline: 2px solid var(--%NS%text-strong);
+  outline-offset: 1px;
+}
+
+.band[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: var(--%NS%accent-soft);
+  border-inline: 2px solid var(--%NS%accent);
+  pointer-events: none;
+}
+
+.budget[_ngcontent-%COMP%] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-top: 1px solid var(--%NS%text-2);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.budget[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  position: absolute;
+  right: 0;
+  bottom: 2px;
+  padding: 0 4px;
+  background: var(--%NS%surface);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.markers[_ngcontent-%COMP%] {
+  display: flex;
+  column-gap: 2px;
+  height: 8px;
+  margin: 3px 0 0 50px;
+}
+
+.markers[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  display: flex;
+  flex: 1 1 0;
+  justify-content: center;
+  min-width: 0;
+}
+
+.markers[_ngcontent-%COMP%]   span.over[_ngcontent-%COMP%]::before {
+  content: "";
+  width: min(10px, 100%);
+}
+
+.markers[_ngcontent-%COMP%]   span.over[_ngcontent-%COMP%]::before, 
+.key-marker[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.key-marker[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+}
+
+.tip[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 4px;
+  z-index: 2;
+  width: min(240px, 100% - 8px);
+  padding: 8px 10px;
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  pointer-events: none;
+}
+
+.tip[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 2px 0;
+}
+
+.tip[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+}
+
+.tip-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid;
+  border-radius: 999px;
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tip-row[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.tip-row[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.legend[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.legend[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+}
+
+.key[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+  border-radius: 2px;
+}
+
+.key.ok[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+}
+
+.key.over[_ngcontent-%COMP%] {
+  background: repeating-linear-gradient(135deg, var(--%NS%danger) 0 3px, color-mix(in srgb, var(--%NS%danger) 55%, var(--%NS%surface)) 3px 6px);
+}
+
+.key.line[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 0;
+  border-top: 1px solid var(--%NS%text-2);
+  border-radius: 0;
+}
+
+.table[_ngcontent-%COMP%] {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: 320px;
+  margin-top: 6px;
+  overflow: auto;
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 600px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  font-weight: 500;
+}
+
+td.mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bar[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},rk=(e,t)=>t.id,ik=(e,t)=>t.index,ak=(e,t)=>t.kind;function ok(e,t){if(e&1&&(L(0,`p`,0),G(1),R()),e&2){let e=U(2);E(),J(` Pick `,e.max,` cycles or fewer to see their spans. `,e.count(),` are picked. `)}}function sk(e,t){if(e&1&&(L(0,`span`),G(1),R()),e&2){let e=t.$implicit;f_(`left`,e.x,`%`)(`width`,e.w,`%`),E(),q(`cycle `,e.id)}}function ck(e,t){if(e&1){let e=z();L(0,`button`,11),H(`focus`,function(){let t=x(e).$implicit;return S(U(3).current.set(t.index))})(`mouseenter`,function(){let t=x(e).$implicit;return S(U(3).hover.set(t.index))})(`mouseleave`,function(){return x(e),S(U(3).hover.set(null))})(`click`,function(){let t=x(e).$implicit;return S(U(3).choose(t))}),L(1,`span`,12),G(2),R()()}if(e&2){let e=t.$implicit,n=U(3);p_(q_(`block kind-`,e.kind)),f_(`left`,e.x,`%`)(`width`,e.w,`%`)(`top`,e.depth*n.row,`px`),W(`narrow`,e.w<4),O(`tabindex`,e.index===n.tabStop()?0:-1)(`data-index`,e.index)(`aria-label`,n.describe(e))(`aria-disabled`,e.component?null:`true`),E(2),K(e.name)}}function lk(e,t){if(e&1&&(L(0,`li`),Sg(1,`span`,13),G(2),R()),e&2){let e=t.$implicit;E(),p_(q_(`key kind-`,e.kind)),E(),K(e.label)}}function uk(e,t){if(e&1&&(L(0,`p`,0),G(1),R()),e&2){let e=U(3);E(),J(` Each cycle keeps its longest spans. `,e.dropped(),` shorter `,e.dropped()===1?`span was`:`spans were`,` left out. `)}}function dk(e,t){if(e&1&&(L(0,`tr`)(1,`td`,17),G(2),R(),L(3,`td`,18),G(4),R(),L(5,`td`),G(6),R(),L(7,`td`,17),G(8),R(),L(9,`td`,17),G(10),R(),L(11,`td`,17),G(12),R(),L(13,`td`,17),G(14),R()()),e&2){let e=t.$implicit,n=U(4);E(2),K(e.cycleId),E(),f_(`padding-left`,6+e.depth*8,`px`),E(),K(e.name),E(2),K(n.kindLabel(e)),E(2),K(e.depth),E(2),K(n.fmt(e.start)),E(2),K(n.fmt(e.ms)),E(2),K(n.fmt(e.selfMs))}}function fk(e,t){if(e&1&&(L(0,`div`,10)(1,`table`)(2,`caption`,14),G(3),R(),L(4,`thead`)(5,`tr`)(6,`th`,15),G(7,`Cycle`),R(),L(8,`th`,16),G(9,`Span`),R(),L(10,`th`,16),G(11,`Kind`),R(),L(12,`th`,15),G(13,`Depth`),R(),L(14,`th`,15),G(15,`Start`),R(),L(16,`th`,15),G(17,`Total`),R(),L(18,`th`,15),G(19,`Self`),R()()(),L(20,`tbody`),j(21,dk,15,9,`tr`,null,ik),R()()()),e&2){let e=U(),t=U(2);O(`aria-label`,t.tableLabel()),E(3),q(` `,t.tableLabel(),` `),E(18),M(e.blocks)}}function pk(e,t){if(e&1){let e=z();L(0,`div`,1),H(`keydown`,function(t){return x(e),S(U(2).onKey(t))}),L(1,`div`,2),j(2,sk,2,5,`span`,3,rk),R(),L(4,`div`,4),j(5,ck,3,16,`button`,5,ik),R()(),L(7,`p`,6),G(8),R(),L(9,`ul`,7),j(10,lk,3,4,`li`,null,ak),R(),L(12,`p`,8),G(13,` Arrow keys move along a row, Up goes to the enclosing span and Down to the first nested one. Enter on a component shows it in the tree. `),R(),k(14,uk,2,2,`p`,0),L(15,`details`,9),H(`toggle`,function(t){return x(e),S(U(2).onToggle(t))}),L(16,`summary`),G(17,`Show the spans as a table`),R(),k(18,fk,23,2,`div`,10),R()}if(e&2){let e=t,n=U(2);O(`aria-label`,n.label()),E(2),M(e.cycles),E(2),f_(`height`,e.depth*n.row,`px`),E(),M(e.blocks),E(3),K(n.readout()),E(2),M(n.kinds),E(4),A(n.dropped()?14:-1),E(4),A(n.tableOpen()?18:-1)}}function mk(e,t){if(e&1&&(L(0,`h3`),G(1,`Spans in the picked cycles`),R(),k(2,ok,2,2,`p`,0)(3,pk,19,6)),e&2){let e,t=U();E(2),A(t.tooMany()?2:(e=t.graph())?3:-1,e)}}var hk=22;function gk(e,t){for(let n=e.length-1;n>=0;n--)if(t(e[n]))return e[n]}var _k=class e{cycles=$([]);names=$([]);scope=$(`the recording`);pick=xv();row=hk;max=30;kinds=[`c`,`h`,`r`,`o`].map(e=>({kind:e,label:gO[e]}));current=w(0);tableOpen=w(!1);hover=w(null);hasSpans=X(()=>this.cycles().some(e=>e.spans?.length));count=X(()=>this.cycles().length);tooMany=X(()=>this.count()>30);graph=X(()=>this.tooMany()?null:vO(this.cycles(),this.names()));tabStop=X(()=>Math.min(this.current(),Math.max((this.graph()?.blocks.length??1)-1,0)));dropped=X(()=>this.graph()?.cycles.reduce((e,t)=>e+t.droppedSpans,0)??0);label=X(()=>`Spans in ${this.scope()} over time, nested by depth. Pick a component to show it in the tree.`);readout=X(()=>{let e=(this.graph()?.blocks??[])[this.hover()??this.tabStop()];return e?this.describe(e):``});tableLabel=X(()=>`Timed spans in ${this.scope()}`);fmt(e){return dO(e)}kindLabel(e){return gO[e.kind]}onToggle(e){this.tableOpen.set(e.target.open)}describe(e){let t=[e.name,gO[e.kind],`${dO(e.ms)} total`];return e.selfMs!==e.ms&&t.push(`${dO(e.selfMs)} self`),t.push(e.start<0?`cycle ${e.cycleId}, ${dO(-e.start)} before it started`:`cycle ${e.cycleId} at ${dO(e.start)}`),t.join(`, `)}choose(e){this.current.set(e.index),e.component&&this.pick.emit(e.component)}onKey(e){let t=this.graph()?.blocks??[];if(!t.length)return;let n=t[this.tabStop()],r;switch(e.key){case`ArrowRight`:r=t.find(e=>e.index>n.index&&e.depth===n.depth);break;case`ArrowLeft`:r=gk(t,e=>e.index<n.index&&e.depth===n.depth);break;case`ArrowUp`:r=n.parent===null?gk(t,e=>e.index<n.index&&e.depth===n.depth-1):t[n.parent];break;case`ArrowDown`:r=t.find(e=>e.parent===n.index)??t.find(e=>e.index>n.index&&e.depth===n.depth+1);break;case`Home`:r=t[0];break;case`End`:r=t.at(-1);break;default:return}e.preventDefault(),this.hover.set(null),r&&(this.current.set(r.index),e.currentTarget.querySelector(`button[data-index="${r.index}"]`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-cd-flame-graph`]],inputs:{cycles:[1,`cycles`],names:[1,`names`],scope:[1,`scope`]},outputs:{pick:`pick`},decls:1,vars:1,consts:[[1,`note`],[`role`,`group`,1,`flame`,3,`keydown`],[`aria-hidden`,`true`,1,`cycles`],[3,`left`,`width`],[1,`rows`],[`type`,`button`,3,`class`,`narrow`,`left`,`width`,`top`],[`aria-hidden`,`true`,1,`readout`],[`aria-label`,`Span kinds`,1,`legend`],[1,`hint`],[1,`table`,3,`toggle`],[`tabindex`,`0`,`role`,`region`,1,`table-wrap`],[`type`,`button`,3,`focus`,`mouseenter`,`mouseleave`,`click`],[1,`text`],[`aria-hidden`,`true`],[1,`sr-only`],[`scope`,`col`,1,`num`],[`scope`,`col`],[1,`num`],[1,`mono`]],template:function(e,t){e&1&&k(0,mk,4,1),e&2&&A(t.hasSpans()?0:-1)},styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 12px 0 6px;
+}
+
+.flame[_ngcontent-%COMP%] {
+  position: relative;
+}
+
+.cycles[_ngcontent-%COMP%] {
+  position: relative;
+  height: 18px;
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.cycles[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 0;
+  padding-left: 4px;
+  border-left: 1px solid var(--%NS%border-strong);
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rows[_ngcontent-%COMP%] {
+  position: relative;
+  min-height: 22px;
+}
+
+.block[_ngcontent-%COMP%] {
+  position: absolute;
+  height: 20px;
+  min-width: 2px;
+  padding: 0 4px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 3px;
+  color: var(--%NS%text-strong);
+  font: inherit;
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  line-height: 20px;
+  text-align: left;
+  cursor: default;
+}
+
+.block.narrow[_ngcontent-%COMP%] {
+  padding: 0;
+}
+
+.block.narrow[_ngcontent-%COMP%]   .text[_ngcontent-%COMP%] {
+  display: none;
+}
+
+.text[_ngcontent-%COMP%] {
+  display: block;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+.kind-c[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 35%, var(--%NS%surface));
+}
+
+.block[_ngcontent-%COMP%]:not([aria-disabled]) {
+  cursor: pointer;
+}
+
+.kind-h[_ngcontent-%COMP%] {
+  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--%NS%accent) 30%, var(--%NS%surface)) 0 4px, color-mix(in srgb, var(--%NS%accent) 10%, var(--%NS%surface)) 4px 8px);
+}
+
+.kind-r[_ngcontent-%COMP%] {
+  background-color: var(--%NS%surface-3);
+  background-image: radial-gradient(circle, var(--%NS%text-3) 1px, transparent 1.6px);
+  background-size: 6px 6px;
+}
+
+.kind-o[_ngcontent-%COMP%] {
+  background-color: var(--%NS%surface-2);
+  background-image: repeating-linear-gradient(0deg, var(--%NS%border-strong) 0 1px, transparent 1px 5px);
+  box-shadow: inset 0 0 0 1px var(--%NS%text-2);
+}
+
+.block[_ngcontent-%COMP%]:hover {
+  outline: 2px solid var(--%NS%text-strong);
+  outline-offset: -2px;
+}
+
+.block[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+  outline-color: var(--%NS%text-strong);
+  z-index: 1;
+}
+
+.readout[_ngcontent-%COMP%], 
+.hint[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.readout[_ngcontent-%COMP%] {
+  min-height: 18px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.legend[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.legend[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+}
+
+.key[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 18px;
+  height: 12px;
+  margin-right: 6px;
+  border-radius: 2px;
+}
+
+.table[_ngcontent-%COMP%] {
+  margin-top: 6px;
+  font-size: 12px;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: 320px;
+  margin-top: 6px;
+  overflow: auto;
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  font-weight: 500;
+}
+
+td.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  overflow-wrap: anywhere;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}`]})};function vk(e,t){if(e&1&&(L(0,`tr`)(1,`td`,5),G(2),R(),L(3,`td`,6),G(4),R(),L(5,`td`,6),G(6),R(),L(7,`td`,6),G(8),R()()),e&2){let e=t.$implicit,n=U(3);E(2),J(``,e.name,`.`,e.hook),E(2),K(e.calls),E(2),K(n.ms(e.ms)),E(2),K(n.ms(e.maxMs))}}function yk(e,t){if(e&1&&(L(0,`div`)(1,`h3`),G(2,`Lifecycle hooks`),R(),L(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,3),G(7,`Hook`),R(),L(8,`th`,4),G(9,`Calls`),R(),L(10,`th`,4),G(11,`Time`),R(),L(12,`th`,4),G(13,`Slowest`),R()()(),L(14,`tbody`),j(15,vk,9,5,`tr`,null,ug),R()()()),e&2){let e=U(2);E(15),M(e.hooks())}}function bk(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` (`,e.listener,`) `)}}function xk(e,t){if(e&1&&(L(0,`tr`)(1,`td`,5),G(2),k(3,bk,1,1),R(),L(4,`td`,6),G(5),R(),L(6,`td`,6),G(7),R(),L(8,`td`,6),G(9),R()()),e&2){let e=t.$implicit,n=U(3);E(2),q(` `,e.name,` `),E(),A(e.listener?3:-1),E(2),K(e.calls),E(2),K(n.ms(e.ms)),E(2),K(n.ms(e.maxMs))}}function Sk(e,t){if(e&1&&(L(0,`div`)(1,`h3`),G(2,`Output listeners`),R(),L(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,3),G(7,`Listener`),R(),L(8,`th`,4),G(9,`Calls`),R(),L(10,`th`,4),G(11,`Time`),R(),L(12,`th`,4),G(13,`Slowest`),R()()(),L(14,`tbody`),j(15,xk,10,5,`tr`,null,ug),R()()()),e&2){let e=U(2);E(15),M(e.outputs())}}function Ck(e,t){if(e&1&&(L(0,`p`,1),G(1),R()),e&2){let e=t,n=U(2);E(),z_(` afterRender callbacks ran `,e.runs,` `,e.runs===1?`time`:`times`,`, `,n.ms(e.ms),` in total, slowest `,n.ms(e.maxMs),`. `)}}function wk(e,t){if(e&1&&(L(0,`p`,2),G(1),R()),e&2){let e=U(2);E(),J(` `,e.dropped(),` more hook or output `,e.dropped()===1?`row is`:`rows are`,` left out. A recording lists at most 100 of each. `)}}function Tk(e,t){if(e&1&&(L(0,`div`,0),k(1,yk,17,0,`div`),k(2,Sk,17,0,`div`),R(),k(3,Ck,2,4,`p`,1),k(4,wk,2,2,`p`,2)),e&2){let e,t=U();E(),A(t.hooks().length?1:-1),E(),A(t.outputs().length?2:-1),E(),A((e=t.afterRender())?3:-1,e),E(),A(t.dropped()?4:-1)}}var Ek=10;function Dk(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}var Ok=class e{page=$(null);hooks=X(()=>(this.page()?.hooks??[]).slice(0,Ek));outputs=X(()=>(this.page()?.outputs??[]).slice(0,Ek));afterRender=X(()=>{let e=this.page()?.afterRender;return e?.runs?e:null});dropped=X(()=>this.page()?.droppedTimings??0);ms(e){return Dk(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-cd-timing`]],inputs:{page:[1,`page`]},decls:1,vars:1,consts:[[1,`timing`],[1,`after-render`],[1,`note`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`mono`],[1,`num`]],template:function(e,t){e&1&&k(0,Tk,5,4),e&2&&A(t.hooks().length||t.outputs().length||t.afterRender()?0:-1)},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.timing[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0 16px;
+}
+
+@media (min-width: 880px) {
+  .timing[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 12px 0 6px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 500;
+}
+
+td.mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.after-render[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}`]})};function kk(e,t){if(e&1&&(L(0,`p`,5),G(1),R()),e&2){let e=U();E(),K(e.error())}}function Ak(e,t){let n=new Blob([JSON.stringify(e,null,2)],{type:`application/json`}),r=URL.createObjectURL(n),i=document.createElement(`a`);i.href=r,i.download=t,document.body.append(i),i.click(),i.remove(),setTimeout(()=>URL.revokeObjectURL(r),0)}var jk=class e{page=$(null);maxCycles=$(200);imported=xv();error=w(``);hasCycles(){return(this.page()?.cycles.length??0)>0}exportJson(){let e=this.page();e&&Ak(nO(e,e.pageId),`change-detection-${e.pageId}.json`)}exportTrace(){let e=this.page();e&&Ak(lO(e,e.pageId),`change-detection-${e.pageId}.trace.json`)}async read(e){let t=e.files?.[0];if(e.value=``,!t)return;if(t.size>2e7){this.error.set(`${t.name}: The file is larger than 20 MB.`);return}let n;try{n=await t.text()}catch{this.error.set(`Could not read the file.`);return}let r=rO(n,this.maxCycles());if(!r.ok){this.error.set(`${t.name}: ${r.error}`);return}this.error.set(``),this.imported.emit({fileName:t.name,page:{...r.recording,pageId:r.pageId,supported:!0}})}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-cd-transfer`]],inputs:{page:[1,`page`],maxCycles:[1,`maxCycles`]},outputs:{imported:`imported`},decls:10,vars:3,consts:[[`file`,``],[`role`,`group`,`aria-label`,`Export and import the recording`,1,`transfer`],[`type`,`button`,3,`click`,`disabled`],[`type`,`button`,3,`click`],[`type`,`file`,`accept`,`.json,application/json`,`hidden`,``,3,`change`],[`role`,`alert`,1,`error`]],template:function(e,t){if(e&1){let e=z();L(0,`div`,1)(1,`button`,2),H(`click`,function(){return t.exportJson()}),G(2,`Export JSON`),R(),L(3,`button`,2),H(`click`,function(){return t.exportTrace()}),G(4,` Export trace (Perfetto) `),R(),L(5,`button`,3),H(`click`,function(){return x(e),S(Gg(8).click())}),G(6,`Import`),R(),L(7,`input`,4,0),H(`change`,function(){x(e);let n=Gg(8);return S(t.read(n))}),R()(),k(9,kk,2,1,`p`,5)}e&2&&(E(),B(`disabled`,!t.hasCycles()),E(2),B(`disabled`,!t.hasCycles()),E(6),A(t.error()?9:-1))},styles:[`[_nghost-%COMP%] {
+  display: contents;
+}
+
+.transfer[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+button[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.error[_ngcontent-%COMP%] {
+  flex-basis: 100%;
+  margin: 0;
+  color: var(--%NS%danger-text);
+  font-size: 12px;
+}`]})},Mk=(e,t)=>t.stat.name;function Nk(e,t){if(e&1&&(L(0,`span`,8),G(1),R()),e&2){let e=U(2).$implicit;E(),q(``,e.other,` more`)}}function Pk(e,t){if(e&1&&(L(0,`div`,6)(1,`span`,7),G(2),R(),k(3,Nk,2,1,`span`,8),R()),e&2){let e=U().$implicit;f_(`--%NS%tone`,e.tone+`%`),E(2),K(e.label),E(),A(e.roomy?3:-1)}}function Fk(e,t){if(e&1&&(L(0,`span`,10),G(1),R(),L(2,`span`,11),G(3),R()),e&2){let e=U(2).$implicit,t=U(2);E(),K(e.stat.name),E(2),K(t.fmt(e.stat.ms))}}function Ik(e,t){if(e&1){let e=z();L(0,`button`,9),H(`focus`,function(){x(e);let t=U().$index;return S(U(2).current.set(t))})(`click`,function(){x(e);let t=U().$implicit;return S(U(2).pick.emit(t.stat.name))}),k(1,Fk,4,2),R()}if(e&2){let e=U(),t=e.$implicit,n=e.$index,r=U(2);f_(`--%NS%tone`,t.tone+`%`),O(`tabindex`,n===r.tabStop()?0:-1)(`aria-label`,t.label)(`data-index`,n),E(),A(t.roomy?1:-1)}}function Lk(e,t){if(e&1&&(L(0,`li`),k(1,Pk,4,4,`div`,4)(2,Ik,2,6,`button`,5),R()),e&2){let e=t.$implicit;f_(`left`,e.x,`%`)(`top`,e.y,`%`)(`width`,e.w,`%`)(`height`,e.h,`%`),E(),A(e.other?1:2)}}function Rk(e,t){if(e&1){let e=z();L(0,`ul`,2),H(`keydown`,function(t){return x(e),S(U().onKey(t))}),j(1,Lk,3,9,`li`,3,Mk),R()}if(e&2){let e=U();O(`aria-label`,e.label()),E(),M(e.cells())}}function zk(e,t){e&1&&(L(0,`p`,1),G(1,`No component time in these cycles.`),R())}var Bk=24,Vk=3,Hk=class e{stats=$([]);scope=$(`the recording`);pick=xv();current=w(0);label=X(()=>`Self time per component in ${this.scope()}, largest first. Pick one to show it in the tree.`);cells=X(()=>{let e=this.stats().filter(e=>e.ms>0),t=e.slice(0,Bk),n=e.slice(Bk),r=n.reduce((e,t)=>e+t.ms,0),i=t.map(e=>({stat:e,other:0}));n.length&&i.push({stat:{name:`Other components`,checks:0,ms:r,maxMs:0,cycles:0},other:n.length});let a=e.reduce((e,t)=>e+t.ms,0),o=t[0]?.ms??1,s=hO(i,e=>e.stat.ms,Vk);return s.sort((e,t)=>Number(e.item.other>0)-Number(t.item.other>0)),s.map(e=>{let{stat:t,other:n}=e.item,r=a?Math.round(t.ms/a*100):0;return{stat:t,other:n,x:e.x,y:e.y,w:e.w,h:e.h,tone:n?0:14+Math.round(26*Math.min(t.ms/o,1)),roomy:e.w>=10&&e.h>=22,label:n?`${n} more components, ${dO(t.ms)}, ${r}% of self time`:`${t.name}, ${dO(t.ms)} self time, ${r}%, ${t.checks} ${t.checks===1?`check`:`checks`}`}})});tabStop=X(()=>Math.min(this.current(),Math.max(this.cells().filter(e=>!e.other).length-1,0)));fmt(e){return dO(e)}onKey(e){let t=this.cells().filter(e=>!e.other).length;if(!t)return;let n=this.tabStop(),r;switch(e.key){case`ArrowRight`:case`ArrowDown`:r=Math.min(n+1,t-1);break;case`ArrowLeft`:case`ArrowUp`:r=Math.max(n-1,0);break;case`Home`:r=0;break;case`End`:r=t-1;break;default:return}e.preventDefault(),this.current.set(r),e.currentTarget.querySelector(`button[data-index="${r}"]`)?.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-cd-treemap`]],inputs:{stats:[1,`stats`],scope:[1,`scope`]},outputs:{pick:`pick`},decls:2,vars:1,consts:[[1,`map`],[1,`empty`],[1,`map`,3,`keydown`],[3,`left`,`top`,`width`,`height`],[1,`cell`,`other`,3,`--%NS%tone`],[`type`,`button`,1,`cell`,3,`--%NS%tone`],[1,`cell`,`other`],[1,`sr-only`],[`aria-hidden`,`true`,1,`name`],[`type`,`button`,1,`cell`,3,`focus`,`click`],[1,`name`,`mono`],[1,`ms`]],template:function(e,t){e&1&&k(0,Rk,3,1,`ul`,0)(1,zk,2,0,`p`,1),e&2&&A(+!t.cells().length)},styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.map[_ngcontent-%COMP%] {
+  position: relative;
+  height: 180px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li[_ngcontent-%COMP%] {
+  position: absolute;
+  padding: 1px;
+}
+
+.cell[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+  padding: 4px 6px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--%NS%accent) var(--%NS%tone, 20%), var(--%NS%surface));
+  border: 0;
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-strong);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+}
+
+button.cell[_ngcontent-%COMP%] {
+  cursor: pointer;
+}
+
+button.cell[_ngcontent-%COMP%]:hover {
+  outline: 2px solid var(--%NS%text-strong);
+  outline-offset: -2px;
+}
+
+button.cell[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+  outline-color: var(--%NS%text-strong);
+}
+
+.cell.other[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+}
+
+.name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.ms[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.empty[_ngcontent-%COMP%] {
+  margin: 8px 0;
+  color: var(--%NS%text-2);
+}`]})},Uk=(e,t)=>t.id;function Wk(e,t){if(e&1){let e=z();P(0,`button`,14),V(`click`,function(){return x(e),S(U(2).clear())}),G(1,`Clear`),F()}}function Gk(e,t){if(e&1){let e=z();P(0,`button`,11),V(`click`,function(){return x(e),S(U().toggle())}),I(1,`span`,12),G(2),F(),k(3,Wk,2,0,`button`,13)}if(e&2){let e=U();W(`on`,e.recording()),N(`disabled`,!e.pageId()),E(2),q(` `,e.recording()?`Stop recording`:`Record`,` `),E(),A(e.cycles().length?3:-1)}}function Kk(e,t){if(e&1){let e=z();P(0,`p`,6)(1,`span`,15),G(2,`Imported recording`),F(),P(3,`span`,16),G(4),F(),P(5,`button`,14),V(`click`,function(){return x(e),S(U().closeImport())}),G(6,`Back to live recording`),F()()}e&2&&(E(4),K(t.fileName))}function qk(e,t){e&1&&G(0,` An app on a device has no DOM, so checks that changed nothing are not counted there. `)}function Jk(e,t){e&1&&G(0,` A recording keeps running when the tab reloads, so it catches the next start of the app. The cycles from before the reload are gone with the old page. `)}function Yk(e,t){e&1&&(P(0,`p`,9),G(1,` The page has Angular's profiler hook, but the recording could not attach to it yet. The page tries again on its next update while recording is on. If this stays, stop and start the recording, or reload the page. `),F())}function Xk(e,t){e&1&&I(0,`app-angular-unavailable`,17),e&2&&N(`page`,U(2).angularPage())}function Zk(e,t){e&1&&k(0,Yk,2,0,`p`,9)(1,Xk,1,1,`app-angular-unavailable`,17),e&2&&A(+!U().attachPending())}function Qk(e,t){e&1&&(P(0,`p`,9),G(1,`Angular profiling stays on until the page reloads.`),F())}function $k(e,t){e&1&&I(0,`app-angular-unavailable`,21),e&2&&N(`page`,U(2).angularPage())}function eA(e,t){if(e&1){let e=z();P(0,`div`,18)(1,`span`,19),G(2,`Live views`),F(),P(3,`button`,20),V(`click`,function(){x(e);let t=U();return S(t.setView(`flash`,!t.views().flash))}),I(4,`span`,12),G(5,` Flash checks `),F(),P(6,`button`,20),V(`click`,function(){x(e);let t=U();return S(t.setView(`track`,!t.views().track))}),I(7,`span`,12),G(8,` Performance track `),F(),P(9,`button`,20),V(`click`,function(){return x(e),S(U().setView(`angularProfiling`,!0))}),I(10,`span`,12),G(11,` Angular profiling `),F()(),P(12,`p`,7),G(13,` Flash checks draws a box over each component on the page as Angular checks it, with its name and how often it was checked, fading over a second. Performance track adds a Pangular track to the Chrome Performance panel with every component check, hook and output. Angular profiling turns on Angular's own track there. `),F(),k(14,Qk,2,0,`p`,9)(15,$k,1,1,`app-angular-unavailable`,21)}if(e&2){let e=U();E(3),N(`disabled`,!e.canShowViews()),O(`aria-pressed`,e.views().flash),E(3),N(`disabled`,!e.canShowViews()),O(`aria-pressed`,e.views().track),E(3),N(`disabled`,!e.canShowViews()||e.views().angularProfiling||!e.views().angularProfilingAvailable),O(`aria-pressed`,e.views().angularProfiling),E(5),A(e.views().angularProfiling?14:e.views().angularProfilingAvailable?-1:15)}}function tA(e,t){if(e&1&&(P(0,`p`,9),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function nA(e,t){if(e&1&&(P(0,`p`,24),G(1),F()),e&2){let e=U(2);E(),q(` `,e.range()?`The picked cycles have no timed spans, so there is no flame graph for them.`:`This recording has no timed spans, so there is no flame graph. A recording from an older version, or a file saved without spans, has none.`,` `)}}function rA(e,t){e&1&&(P(0,`p`,9),G(1,` For picked cycles, totals come from the 10 slowest components each cycle lists. `),F())}function iA(e,t){if(e&1){let e=z();P(0,`h3`),G(1,`Cycles`),F(),P(2,`app-cd-cycle-chart`,22),U_(`rangeChange`,function(t){x(e);let n=U();return H_(n.range,t)||(n.range=t),S(t)}),F(),P(3,`app-cd-flame-graph`,23),V(`pick`,function(t){return x(e),S(U().showComponent.emit(t))}),F(),k(4,nA,2,1,`p`,24),P(5,`h3`),G(6,`Self time by component`),F(),k(7,rA,2,0,`p`,9),P(8,`app-cd-treemap`,25),V(`pick`,function(t){return x(e),S(U().showComponent.emit(t))}),F()}if(e&2){let e=U();E(2),N(`cycles`,e.cycles())(`slowMs`,e.slowMs()),V_(`range`,e.range),E(),N(`cycles`,e.picked())(`names`,e.spanNames())(`scope`,e.scope()),E(),A(e.hasSpans()?-1:4),E(3),A(e.range()?7:-1),E(),N(`stats`,e.stats())(`scope`,e.scope())}}function aA(e,t){if(e&1){let e=z();P(0,`tr`)(1,`td`,16)(2,`button`,31),V(`click`,function(){let t=x(e).$implicit;return S(U(2).showComponent.emit(t.name))}),G(3),F()(),P(4,`td`,32),G(5),F(),P(6,`td`,32),G(7),F(),P(8,`td`,32),G(9),F()()}if(e&2){let e=t.$implicit,n=U(2);E(3),q(` `,e.name,` `),E(2),K(e.checks),E(2),K(n.ms(e.ms)),E(2),K(n.ms(e.maxMs))}}function oA(e,t){e&1&&(P(0,`tr`)(1,`td`,33),G(2,`No component time in the picked cycles.`),F()())}function sA(e,t){if(e&1){let e=z();P(0,`tr`)(1,`td`,16)(2,`button`,31),V(`click`,function(){let t=x(e).$implicit;return S(U(2).showComponent.emit(t.name))}),G(3),F()(),P(4,`td`,32),G(5),F(),P(6,`td`,32),G(7),F(),P(8,`td`,32),G(9),F()()}if(e&2){let e=t.$implicit,n=U(2);E(3),q(` `,e.name,` `),E(2),K(e.checks),E(2),K(e.cycles),E(2),K(n.ms(e.ms))}}function cA(e,t){e&1&&(P(0,`tr`)(1,`td`,33),G(2,`No component checks in the picked cycles.`),F()())}function lA(e,t){if(e&1&&(P(0,`span`,35),G(1,`from `),P(2,`span`,16),G(3),F()()),e&2){let e=U(3);E(3),K(e.causeText(t))}}function uA(e,t){if(e&1&&(P(0,`span`,35),G(1,`after `),P(2,`span`,16),G(3),F()()),e&2){let e=U().$implicit;E(3),K(e.trigger)}}function dA(e,t){if(e&1&&(P(0,`span`,36),G(1),F()),e&2){let e=U().$implicit;E(),q(``,e.unchanged,` changed nothing`)}}function fA(e,t){if(e&1&&(P(0,`span`,36),G(1),F()),e&2){let e=U().$implicit,t=U(2);E(),q(`hooks `,t.ms(e.hookMs))}}function pA(e,t){if(e&1&&(P(0,`span`,36),G(1),F()),e&2){let e=U().$implicit,t=U(2);E(),q(`afterRender `,t.ms(e.afterRenderMs))}}function mA(e,t){if(e&1&&(P(0,`span`,37),G(1,` slowest `),P(2,`span`,16),G(3),F(),G(4),F()),e&2){let e=t,n=U(3);E(3),K(e.name),E(),q(` `,n.ms(e.ms),` `)}}function hA(e,t){if(e&1&&(P(0,`li`)(1,`span`,34),G(2),F(),P(3,`span`,16),G(4),F(),P(5,`span`),G(6),F(),k(7,lA,4,1,`span`,35)(8,uA,4,1,`span`,35),k(9,dA,2,1,`span`,36),k(10,fA,2,1,`span`,36),k(11,pA,2,1,`span`,36),k(12,mA,5,2,`span`,37),F()),e&2){let e,n,r=t.$implicit,i=U(2);E(2),K(i.clock(r.at)),E(2),K(i.ms(r.ms)),E(2),z_(` `,r.checks,` `,r.checks===1?`check`:`checks`,`, `,r.passes,` `,r.passes===1?`pass`:`passes`,` `),E(),A((e=r.cause)?7:r.trigger?8:-1,e),E(2),A(r.unchanged?9:-1),E(),A(r.hookMs?10:-1),E(),A(r.afterRenderMs?11:-1),E(),A((n=r.components[0])?12:-1,n)}}function gA(e,t){if(e&1&&(P(0,`div`,26)(1,`div`)(2,`h3`),G(3),F(),P(4,`table`)(5,`thead`)(6,`tr`)(7,`th`,27),G(8,`Component`),F(),P(9,`th`,28),G(10,`Checks`),F(),P(11,`th`,28),G(12,`Self time`),F(),P(13,`th`,28),G(14,`Slowest`),F()()(),P(15,`tbody`),j(16,aA,10,4,`tr`,null,ug,!1,oA,3,0,`tr`),F()(),P(19,`h3`),G(20),F(),P(21,`table`)(22,`thead`)(23,`tr`)(24,`th`,27),G(25,`Component`),F(),P(26,`th`,28),G(27,`Checks`),F(),P(28,`th`,28),G(29,`Cycles`),F(),P(30,`th`,28),G(31,`Self time`),F()()(),P(32,`tbody`),j(33,sA,10,4,`tr`,null,ug,!1,cA,3,0,`tr`),F()(),P(36,`p`,7),G(37,` Select a component name to show its most checked instance in the tree. `),F()(),P(38,`div`)(39,`h3`),G(40,`Latest cycles`),F(),P(41,`ol`,29),j(42,hA,13,11,`li`,null,Uk),F()()(),I(44,`app-cd-timing`,30)(45,`app-cd-diagnosis`,30)),e&2){let e=U();E(3),q(` `,e.range()?`Slowest components in the picked cycles`:`Slowest components`,` `),E(13),M(e.slowest()),E(4),q(` `,e.range()?`Most often checked in the picked cycles`:`Most often checked`,` `),E(13),M(e.busiest()),E(9),M(e.latest()),E(2),N(`page`,e.page()),E(),N(`page`,e.page())}}function _A(e,t){e&1&&(P(0,`p`,10),G(1,`Use the app. Cycles show up here as Angular runs change detection.`),F())}var vA=3e3,yA=10,bA=class e{livePage=$(null,{alias:`page`});pageId=$(null);rpc=$(null);native=$(!1);angularPages=pD(()=>this.rpc());angularPage=X(()=>mD(this.angularPages(),this.pageId()));attachPending=X(()=>this.angularPage()?.capabilities.profiler===!0);showComponent=xv();range=w(null);imported=w(null);page=X(()=>this.imported()?.page??this.livePage());views=Q(()=>this.livePage()?.options??{flash:!1,track:!1,angularProfiling:!1,angularProfilingAvailable:!0});canShowViews=X(()=>!!this.pageId()&&this.livePage()?.supported!==!1);message=w(``);announcement=w(``);recording=X(()=>this.page()?.recording===!0);cycles=X(()=>this.page()?.cycles??[]);slowMs=X(()=>this.page()?.slowMs??16);maxCycles=X(()=>TT(this.rpc()).limits.cdCycles);picked=X(()=>fO(this.cycles(),this.range()));hasSpans=X(()=>this.picked().some(e=>e.spans?.length));spanNames=X(()=>this.page()?.spanNames??[]);stats=X(()=>this.range()?pO(this.picked()):[...this.page()?.components??[]].sort((e,t)=>t.ms-e.ms));scope=X(()=>{let e=this.range()?this.picked():[];return e.length?e.length===1?`cycle ${e[0].id}`:`cycles ${e[0].id} to ${e.at(-1).id}`:`the recording`});slowest=X(()=>this.stats().slice(0,yA));busiest=X(()=>[...this.stats()].sort((e,t)=>t.checks-e.checks).slice(0,yA));latest=X(()=>this.cycles().slice(-30).reverse());capNotes=X(()=>{let e=this.page()?.droppedClasses??0,t=this.page()?.droppedHosts??0,n=[];return e>0&&n.push(`${e} more component ${e===1?`class was`:`classes were`} checked than a recording keeps, so ${e===1?`it is`:`they are`} left out of these totals.`),t>0&&n.push(`${t} component ${t===1?`instance was`:`instances were`} checked past the 2000 a recording counts, so ${t===1?`its tree row shows`:`their tree rows show`} no check count.`),n});status=X(()=>{if(this.message())return this.message();let e=this.cycles().length;return this.imported()?`${e} ${e===1?`cycle`:`cycles`} imported.`:this.recording()?`Recording. ${e} ${e===1?`cycle`:`cycles`} so far.`:e?`${e} ${e===1?`cycle`:`cycles`} recorded.`:``});ms(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}clock(e){return aD(e)}causeText(e){return JD(e)}confirming=w(null);confirmTimer;constructor(){T(()=>{let e=this.confirming();e!==null&&this.livePage()?.recording===!0===e&&Z(()=>this.confirmed(e))}),b(Os).onDestroy(()=>clearTimeout(this.confirmTimer))}confirmed(e){clearTimeout(this.confirmTimer),this.confirming.set(null),this.message.set(``);let t=this.livePage()?.cycles.length??0;this.announce(e?`Recording started.`:`Recording stopped. ${t} ${t===1?`cycle`:`cycles`} recorded.`)}unconfirmed(e){let t=`The page did not confirm that the recording ${e?`started`:`stopped`}. The tab may be in the background, closed or reloading.`;this.message.set(t),this.announce(t)}async toggle(){let e=!this.recording();clearTimeout(this.confirmTimer),this.confirming.set(null),await this.send({on:e},e?`Starting…`:`Stopping…`,()=>``,`request-change-detection-record`,{quiet:!0,keepPending:!0})&&(this.confirming.set(e),this.confirmTimer=setTimeout(()=>{this.confirming()===e&&this.unconfirmed(e)},vA))}showImport(e){this.message.set(``),this.range.set(null),this.imported.set(e);let t=e.page.cycles.length;this.announce(`Imported ${e.fileName}: ${t} ${t===1?`cycle`:`cycles`}. Showing the imported recording.`)}closeImport(){this.imported.set(null),this.range.set(null),this.announce(`Showing the live recording.`)}async clear(){this.range.set(null),await this.send({clear:!0},``,()=>`Cleared the recorded cycles.`)}async setView(e,t){let n=this.views();this.views.set({...n,[e]:t});let r={flash:t?`Flash checks on.`:`Flash checks off.`,track:t?`Performance track on. Record in the Chrome Performance panel to see it.`:`Performance track off.`,angularProfiling:`Angular profiling on. It stays on until the page reloads.`}[e];await this.send({[e]:t},``,()=>r,`request-change-detection-options`)||this.views.set(n)}async send(e,t,n,r=`request-change-detection-record`,{quiet:i=!1,keepPending:a=!1}={}){this.message.set(t);try{if(!this.rpc())throw Error(`no client`);return await oT(this.rpc(),r,{pageId:this.pageId(),...e}),a||this.message.set(``),i||this.announce(n()),!0}catch{let e=`Could not reach the page.`;return this.message.set(e),this.announce(e),!1}}announce(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-cd-recording`]],inputs:{livePage:[1,`page`,`livePage`],pageId:[1,`pageId`],rpc:[1,`rpc`],native:[1,`native`]},outputs:{showComponent:`showComponent`},decls:23,vars:13,consts:[[`aria-labelledby`,`cd-heading`,1,`cd`],[1,`cd-head`],[`id`,`cd-heading`],[3,`imported`,`page`,`maxCycles`],[1,`status`],[`role`,`status`,1,`sr-only`],[1,`imported`],[1,`hint`],[`what`,`cycles`,`limit`,`cdCycles`,3,`dropped`,`max`],[1,`note`],[1,`empty`],[`type`,`button`,3,`click`,`disabled`],[`aria-hidden`,`true`,1,`dot`],[`type`,`button`],[`type`,`button`,3,`click`],[1,`badge`],[1,`mono`],[`capability`,`profiler`,`missing`,``,`compact`,``,3,`page`],[`role`,`group`,`aria-labelledby`,`cd-views-label`,1,`views`],[`id`,`cd-views-label`,1,`views-label`],[`type`,`button`,1,`view`,3,`click`,`disabled`],[`capability`,`angularProfiling`,`missing`,``,`compact`,``,3,`page`],[3,`rangeChange`,`cycles`,`slowMs`,`range`],[3,`pick`,`cycles`,`names`,`scope`],[1,`spans-note`],[3,`pick`,`stats`,`scope`],[1,`cd-grid`],[`scope`,`col`],[`scope`,`col`,1,`num`],[`aria-label`,`Latest change detection cycles, newest first`,1,`cycles`],[3,`page`],[`type`,`button`,1,`name-link`,3,`click`],[1,`num`],[`colspan`,`4`],[1,`when`],[1,`trigger`],[1,`timing`],[1,`top`]],template:function(e,t){if(e&1&&(P(0,`section`,0)(1,`div`,1)(2,`h2`,2),G(3,`Change detection`),F(),k(4,Gk,4,5),P(5,`app-cd-transfer`,3),V(`imported`,function(e){return t.showImport(e)}),F(),P(6,`p`,4),G(7),F(),P(8,`p`,5),G(9),F()(),k(10,Kk,7,1,`p`,6),P(11,`p`,7),G(12,` Records each change detection cycle with Angular's profiler: how long it took, how many components it checked, what started it and which checks changed nothing. Tree rows show how often each instance was checked. Times come from a development build. While it records, the page also wraps Angular's scheduler, adds a signal write hook and watches DOM updates; all of it stops with the recording. `),k(13,qk,1,0)(14,Jk,1,0),F(),k(15,Zk,2,1),k(16,eA,16,7),I(17,`app-limit-note`,8),j(18,tA,2,1,`p`,9,dg),k(20,iA,9,10),k(21,gA,46,6)(22,_A,2,0,`p`,10),F()),e&2){let e;E(4),A(t.imported()?-1:4),E(),N(`page`,t.page())(`maxCycles`,t.maxCycles()),E(2),K(t.status()),E(2),K(t.announcement()),E(),A((e=t.imported())?10:-1,e),E(3),A(t.native()?13:14),E(2),A(t.page()?.supported===!1?15:-1),E(),A(!t.imported()&&!t.native()?16:-1),E(),N(`dropped`,t.page()?.dropped??0)(`max`,t.maxCycles()),E(),M(t.capNotes()),E(2),A(t.cycles().length?20:-1),E(),A(t.page()?.components?.length?21:t.recording()?22:-1)}},dependencies:[RE,dD,Ok,BO,jk,nk,_k,Hk],styles:[`[_nghost-%COMP%] {
+  display: block;
+  margin-top: 16px;
+}
+
+.cd[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  padding: 12px 14px;
+}
+
+.cd-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  font-size: 14px;
+  color: var(--%NS%text-strong);
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 12px 0 6px;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.views[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.views-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+button.view[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+}
+
+button.view[aria-pressed=true][_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+}
+
+.dot[_ngcontent-%COMP%] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--%NS%text-3);
+}
+
+button.on[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%], 
+.spans-note[_ngcontent-%COMP%], 
+.empty[_ngcontent-%COMP%] {
+  margin: 8px 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.cd-grid[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0 16px;
+}
+
+@media (min-width: 880px) {
+  .cd-grid[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+}
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 4px 6px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 500;
+}
+
+td.mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.name-link[_ngcontent-%COMP%] {
+  height: auto;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--%NS%text-strong);
+  font: inherit;
+  text-align: left;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.name-link[_ngcontent-%COMP%]:hover {
+  background: none;
+  text-decoration-thickness: 2px;
+}
+
+.name-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.cycles[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+}
+
+.cycles[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+}
+
+.when[_ngcontent-%COMP%], 
+.trigger[_ngcontent-%COMP%], 
+.timing[_ngcontent-%COMP%], 
+.top[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.imported[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 8px 0;
+  color: var(--%NS%text-2);
+}
+
+.badge[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  padding: 2px 8px;
+  border: 1px solid;
+  border-radius: var(--%NS%radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.trigger[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%], 
+.top[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}`]})},xA=(e,t)=>t.block.id,SA=(e,t)=>t.kind,CA=(e,t)=>t.id;function wA(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,e.label,` `)}}function TA(e,t){if(e&1&&(G(0),L(1,`span`,18),G(2),R()),e&2){let e=U().$implicit;q(` `,e.kind,` `),E(2),q(``,e.seconds,`s`)}}function EA(e,t){if(e&1&&(L(0,`span`,9),k(1,wA,1,1)(2,TA,3,2),R()),e&2){let e=t.$implicit;p_(`note-`+e.kind),O(`title`,e.text),E(),A(e.seconds===void 0?1:2)}}function DA(e,t){if(e&1&&(L(0,`span`,9),G(1),R()),e&2){let e=U().$implicit;O(`title`,e.block.hydratedAt===void 0?`The block hydrated before the devtools attached to the page.`:null),E(),K(e.hydrated)}}function OA(e,t){e&1&&(L(0,`span`,9),G(1,`@error block`),R())}function kA(e,t){if(e&1&&(L(0,`span`,10),G(1),R()),e&2){let e=U().$implicit;E(),K(e.timings)}}function AA(e,t){e&1&&(L(0,`span`,11),G(1,`mismatch`),R())}function jA(e,t){if(e&1&&(L(0,`dt`),G(1,`Template of`),R(),L(2,`dd`,19),G(3),R()),e&2){let e=t;E(3),J(``,e.name,` <`,e.tag,`>`)}}function MA(e,t){if(e&1&&(L(0,`dt`),G(1,`In this state since`),R(),L(2,`dd`),G(3),R()),e&2){let e=U(2).$implicit,t=U(2);E(3),K(t.clock(e.block.since))}}function NA(e,t){if(e&1&&(L(0,`dt`),G(1,`Hydrated`),R(),L(2,`dd`),G(3),R()),e&2){let e=U(2).$implicit,t=U(2);E(3),q(` `,e.block.hydratedAt===void 0?`Before the devtools attached`:t.clock(e.block.hydratedAt),` `)}}function PA(e,t){if(e&1&&(L(0,`span`,23),G(1),R()),e&2){let e=U().$implicit;E(),K(e.hydration)}}function FA(e,t){if(e&1&&(L(0,`li`)(1,`span`,22),G(2),R(),L(3,`span`,19),G(4),R(),k(5,PA,2,1,`span`,23),R()),e&2){let e=t.$implicit,n=U(5);E(2),K(n.clock(e.at)),E(2),K(e.state),E(),A(e.hydration===`not-configured`?-1:5)}}function IA(e,t){if(e&1&&(L(0,`h3`,20),G(1,`Transitions`),R(),L(2,`ol`,21),j(3,FA,6,3,`li`,null,ug),R()),e&2){let e=U(2).$implicit;E(3),M(e.block.transitions)}}function LA(e,t){if(e&1){let e=z();L(0,`li`)(1,`button`,25),H(`click`,function(){let t=x(e).$implicit;return S(U(5).showNode.emit(t.id))}),G(2),L(3,`span`,19),G(4),R()()()}if(e&2){let e=t.$implicit;E(2),q(` Show `,e.name,` `),E(2),q(`<`,e.tag,`>`)}}function RA(e,t){if(e&1&&(L(0,`h3`,20),G(1,`Hydration mismatches`),R(),L(2,`ul`,24),j(3,LA,5,2,`li`,null,CA),R()),e&2){let e=U(2).$implicit;E(3),M(e.mismatches)}}function zA(e,t){if(e&1&&(L(0,`div`,17)(1,`dl`)(2,`dt`),G(3,`Block`),R(),L(4,`dd`,19),G(5),R(),k(6,jA,4,2),k(7,MA,4,1),k(8,NA,4,1),L(9,`dt`),G(10,`Root elements`),R(),L(11,`dd`),G(12),R(),L(13,`dt`),G(14,`Triggers`),R(),L(15,`dd`,19),G(16),R()(),k(17,IA,5,0),k(18,RA,5,0),R()),e&2){let e,t=U().$implicit;B(`id`,`defer-detail-`+t.block.id),E(5),K(t.block.id),E(),A((e=t.block.owner)?6:-1,e),E(),A(t.block.since?7:-1),E(),A(t.block.hydration===`hydrated`?8:-1),E(4),K(t.block.rootIds.length||`None rendered`),E(4),K(t.block.triggers.join(`, `)||`None`),E(),A(t.block.transitions?.length?17:-1),E(),A(t.mismatches.length?18:-1)}}function BA(e,t){if(e&1){let e=z();L(0,`li`,4)(1,`button`,5),H(`click`,function(){let t=x(e).$implicit;return S(U(2).showOwner.emit(t.block))})(`focus`,function(){let t=x(e).$implicit;return S(U(2).highlight.emit(t.block))})(`blur`,function(){return x(e),S(U(2).highlight.emit(null))})(`mouseenter`,function(){let t=x(e).$implicit;return S(U(2).highlight.emit(t.block))})(`mouseleave`,function(){return x(e),S(U(2).highlight.emit(null))}),L(2,`span`,6),G(3),R(),L(4,`span`,7),G(5),R(),j(6,EA,3,4,`span`,8,SA),k(8,DA,2,2,`span`,9),k(9,OA,2,0,`span`,9),k(10,kA,2,1,`span`,10),k(11,AA,2,0,`span`,11),L(12,`span`,12),G(13),R()(),L(14,`button`,13),H(`click`,function(){let t=x(e).$implicit;return S(U(2).toggle(t.block.id))}),C(),L(15,`svg`,14),Sg(16,`path`,15),R(),ys(),L(17,`span`,16),G(18),R()(),k(19,zA,19,9,`div`,17),R()}if(e&2){let e=t.$implicit,n=U(2);E(),O(`aria-disabled`,e.block.owner?null:`true`),E(2),K(e.block.owner?.name??`Unknown component`),E(),p_(`defer-state-`+e.block.state),E(),K(e.block.state),E(),M(e.notes),E(2),A(e.hydrated?8:-1),E(),A(e.block.hasErrorBlock?9:-1),E(),A(e.timings?10:-1),E(),A(e.mismatches.length?11:-1),E(2),K(e.block.triggers.join(`, `)||`no triggers`),E(),O(`aria-expanded`,n.isOpen(e.block.id))(`aria-controls`,n.isOpen(e.block.id)?`defer-detail-`+e.block.id:null),E(4),q(`Details of the block in `,e.block.owner?.name??`an unknown component`),E(),A(n.isOpen(e.block.id)?19:-1)}}function VA(e,t){if(e&1&&(L(0,`section`,0)(1,`h2`,1),G(2,` Defer blocks `),L(3,`span`,2),G(4),R()(),L(5,`ul`,3),j(6,BA,20,14,`li`,4,xA),R()()),e&2){let e=U();E(4),J(``,e.rows().length,``,e.truncated()?`+`:``),E(2),M(e.rows())}}function HA(e){return e<1e3?`${e}ms`:`${Number((e/1e3).toFixed(2))}s`}function UA(e){let t=[],n=e.placeholder?.minimumTime;n!=null&&t.push(`placeholder min ${HA(n)}`);let r=[e.loading?.afterTime==null?``:`after ${HA(e.loading.afterTime)}`,e.loading?.minimumTime==null?``:`min ${HA(e.loading.minimumTime)}`].filter(Boolean);return r.length&&t.push(`loading ${r.join(`, `)}`),t.join(` · `)}var WA=class e{blocks=$([]);truncated=$(!1);clockOffset=$(0);showOwner=xv();mismatches=$([]);showNode=xv();open=w(new Set);highlight=xv();now=w(Date.now());waiting=X(()=>this.blocks().some(e=>!!e.since&&(e.state===`placeholder`||e.state===`initial`)));rows=X(()=>{let e=this.now()-this.clockOffset();return this.blocks().map(t=>({block:t,notes:Zw({...t,since:t.since||e},e),timings:UA(t),mismatches:this.mismatches().filter(e=>t.rootIds.includes(e.id)),hydrated:t.hydration===`hydrated`?Jw(t):``}))});isOpen(e){return this.open().has(e)}toggle(e){this.open.update(t=>{let n=new Set(t);return n.delete(e)||n.add(e),n})}clock(e){return aD(e)}constructor(){let e,t=()=>{clearInterval(e),e=void 0};T(()=>{if(!this.waiting())return t();e===void 0&&(this.now.set(Date.now()),e=setInterval(()=>this.now.set(Date.now()),1e3))}),b(Os).onDestroy(t)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-defer-blocks`]],inputs:{blocks:[1,`blocks`],truncated:[1,`truncated`],clockOffset:[1,`clockOffset`],mismatches:[1,`mismatches`]},outputs:{showOwner:`showOwner`,showNode:`showNode`,highlight:`highlight`},decls:1,vars:1,consts:[[`aria-labelledby`,`ct-defer-title`,1,`defer`],[`id`,`ct-defer-title`,1,`defer-title`],[1,`pill`],[1,`defer-list`],[1,`defer-item`],[`type`,`button`,1,`defer-row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[1,`name`,`mono`],[1,`defer-state`],[1,`flag`,3,`class`],[1,`flag`],[1,`timings`],[1,`flag`,`note-failed`],[1,`triggers`,`mono`],[`type`,`button`,1,`defer-toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`m9 6 6 6-6 6`],[1,`sr-only`],[1,`defer-detail`,3,`id`],[`aria-hidden`,`true`],[1,`mono`],[1,`detail-label`],[1,`transitions`],[1,`when`],[1,`muted`],[1,`mismatch-links`],[`type`,`button`,3,`click`]],template:function(e,t){e&1&&k(0,VA,8,2,`section`,0),e&2&&A(t.rows().length?0:-1)},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.defer[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.defer-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.defer-list[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.defer-item[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--%NS%control-h);
+  gap: 6px;
+}
+
+.defer-toggle[_ngcontent-%COMP%] {
+  width: var(--%NS%control-h);
+  padding: 0;
+  background: var(--%NS%surface);
+}
+
+.defer-toggle[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.defer-toggle[aria-expanded=true][_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .defer-toggle[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}
+.defer-toggle[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.defer-detail[_ngcontent-%COMP%] {
+  grid-column: 1/-1;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  font-size: 12px;
+}
+
+.defer-detail[_ngcontent-%COMP%]   dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 4px 12px;
+  margin: 0;
+}
+
+.defer-detail[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.defer-detail[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.detail-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 10px 0 4px;
+}
+
+.transitions[_ngcontent-%COMP%], 
+.mismatch-links[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.transitions[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.when[_ngcontent-%COMP%], 
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.mismatch-links[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.defer-row[_ngcontent-%COMP%] {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+  height: auto;
+  min-height: var(--%NS%control-h);
+  padding: 6px 12px;
+  background: var(--%NS%surface);
+  border-color: var(--%NS%border);
+  text-align: left;
+}
+
+.defer-row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.defer-row[aria-disabled=true][_ngcontent-%COMP%] {
+  cursor: default;
+}
+
+.name[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.defer-state[_ngcontent-%COMP%] {
+  padding: 0 8px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.defer-state-complete[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.defer-state-error[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.defer-state-loading[_ngcontent-%COMP%], 
+.defer-state-placeholder[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.note-failed[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.note-stuck[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.timings[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.triggers[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}`]})},GA=(e,t)=>t.id;function KA(e,t){if(e&1&&(P(0,`p`,4),G(1),F()),e&2){let e=U(2);E(),q(`The page has more @for blocks than the `,e.length,` listed.`)}}function qA(e,t){e&1&&(P(0,`span`,9),G(1,`@empty showing`),F())}function JA(e,t){e&1&&(P(0,`span`,10),G(1,`@empty`),F())}function YA(e,t){e&1&&(P(0,`span`,10),G(1,`renders nothing`),F())}function XA(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,6),V(`click`,function(){let t=x(e).$implicit;return S(U(3).showOwner.emit(t))})(`focus`,function(){let t=x(e).$implicit,n=U(3);return S(n.highlight.emit(n.target(t)))})(`blur`,function(){return x(e),S(U(3).highlight.emit(null))})(`mouseenter`,function(){let t=x(e).$implicit,n=U(3);return S(n.highlight.emit(n.target(t)))})(`mouseleave`,function(){return x(e),S(U(3).highlight.emit(null))}),P(2,`span`,7),G(3),F(),P(4,`span`,8),G(5),F(),k(6,qA,2,0,`span`,9)(7,JA,2,0,`span`,10)(8,YA,2,0,`span`,10),P(9,`span`,11),G(10),F()()()}if(e&2){let e=t.$implicit,n=U(3);E(),O(`aria-disabled`,e.owner?null:`true`),E(2),K(e.owner?.name??`Unknown component`),E(2),J(` `,e.count,` `,e.count===1?`item`:`items`,` `),E(),A(e.showingEmpty?6:e.hasEmptyBlock?7:e.count===0?8:-1),E(4),K(n.trackLabel(e))}}function ZA(e,t){if(e&1&&(P(0,`section`,1)(1,`h2`,2),G(2,` @for blocks `),P(3,`span`,3),G(4),F()(),k(5,KA,2,1,`p`,4),P(6,`ul`,5),j(7,XA,11,6,`li`,null,GA),F()()),e&2){let e=U(),t=U();E(4),K(t.truncated()?e.length+`+`:e.length),E(),A(t.truncated()?5:-1),E(2),M(e)}}function QA(e,t){e&1&&k(0,ZA,9,2,`section`,1),e&2&&A(t.length?0:-1)}function $A(e,t){e&1&&I(0,`app-angular-unavailable`,0),e&2&&N(`page`,U().angular())}var ej={$index:`track $index`,item:`track item`,function:`track expression`},tj=class e{blocks=$(void 0);truncated=$(!1);supported=$(null);angular=$(null);showOwner=xv();highlight=xv();target(e){return e.rootIds[0]??e.owner?.id??null}trackLabel(e){return e.track?ej[e.track]:`track unknown`}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-for-blocks`]],inputs:{blocks:[1,`blocks`],truncated:[1,`truncated`],supported:[1,`supported`],angular:[1,`angular`]},outputs:{showOwner:`showOwner`,highlight:`highlight`},decls:2,vars:1,consts:[[`capability`,`forBlocks`,`missing`,``,`compact`,``,1,`for`,3,`page`],[`aria-labelledby`,`ct-for-title`,1,`for`],[`id`,`ct-for-title`,1,`for-title`],[1,`pill`],[1,`note`],[1,`for-list`],[`type`,`button`,1,`for-row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[1,`name`,`mono`],[1,`count`],[1,`flag`,`empty`],[1,`flag`],[1,`track`,`mono`]],template:function(e,t){if(e&1&&k(0,QA,1,1)(1,$A,1,1,`app-angular-unavailable`,0),e&2){let e;A((e=t.blocks())?0:t.supported()===!1?1:-1,e)}},dependencies:[RE],styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.for[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.for-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.for-list[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.for-row[_ngcontent-%COMP%] {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+  height: auto;
+  min-height: var(--%NS%control-h);
+  padding: 6px 12px;
+  background: var(--%NS%surface);
+  border-color: var(--%NS%border);
+  text-align: left;
+}
+
+.for-row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.for-row[aria-disabled=true][_ngcontent-%COMP%] {
+  cursor: default;
+}
+
+.name[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.count[_ngcontent-%COMP%] {
+  padding: 0 8px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+}
+
+.flag.empty[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.track[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}`]})},nj=(e,t)=>t.key,rj=(e,t)=>t.id;function ij(e,t){e&1&&(L(0,`p`,2),G(1,` The HTML came from the server, but no component was hydrated, so the app rendered again on the client. Add `),L(2,`code`),G(3,`provideClientHydration()`),R(),G(4,` and use a development build to see each component's status. `),R())}function aj(e,t){if(e&1&&(L(0,`li`)(1,`span`,9),G(2),R(),G(3),R()),e&2){let e=t.$implicit;p_(`count count-`+e.key),E(2),K(e.value),E(),q(` `,e.label,` `)}}function oj(e,t){if(e&1&&(L(0,`span`,15),G(1,`Expected `),L(2,`code`),G(3),R()()),e&2){let e=U().$implicit;E(3),K(e.expected)}}function sj(e,t){if(e&1&&(L(0,`span`,15),G(1,`Found `),L(2,`code`),G(3),R()()),e&2){let e=U().$implicit;E(3),K(e.actual)}}function cj(e,t){if(e&1){let e=z();L(0,`li`)(1,`button`,12),H(`click`,function(){let t=x(e).$implicit;return S(U(4).showNode.emit(t.id))})(`focus`,function(){let t=x(e).$implicit;return S(U(4).highlight.emit(t.id))})(`blur`,function(){return x(e),S(U(4).highlight.emit(null))})(`mouseenter`,function(){let t=x(e).$implicit;return S(U(4).highlight.emit(t.id))})(`mouseleave`,function(){return x(e),S(U(4).highlight.emit(null))}),L(2,`span`,13),G(3),R(),L(4,`span`,14),G(5),R(),k(6,oj,4,1,`span`,15),k(7,sj,4,1,`span`,15),R()()}if(e&2){let e=t.$implicit;E(3),K(e.name),E(2),q(`<`,e.tag,`>`),E(),A(e.expected?6:-1),E(),A(e.actual?7:-1)}}function lj(e,t){if(e&1&&(L(0,`h3`,10),G(1,`Mismatches`),R(),L(2,`ul`,11),j(3,cj,8,4,`li`,null,rj),R()),e&2){let e=U(2);E(3),M(e.mismatches)}}function uj(e,t){if(e&1){let e=z();L(0,`div`,3)(1,`ul`,4),j(2,aj,4,4,`li`,5,nj),R(),L(4,`button`,6),H(`click`,function(){return x(e),S(U(2).toggleOverlay())}),C(),L(5,`svg`,7),Sg(6,`rect`,8),R(),G(7,` Outline on page `),R()(),k(8,lj,5,0)}if(e&2){let e=U(),t=U();E(2),M(t.counts()),E(2),O(`aria-pressed`,t.overlayOn()),E(4),A(e.mismatches.length?8:-1)}}function dj(e,t){e&1&&k(0,ij,5,0,`p`,2)(1,uj,9,2),e&2&&A(+!!t.hydrated)}function fj(e,t){e&1&&(L(0,`p`,2),G(1,` This page was not rendered on the server, so there is nothing to hydrate. With server-side rendering and `),L(2,`code`),G(3,`provideClientHydration()`),R(),G(4,`, each component shows whether it was hydrated, skipped or mismatched. `),R())}var pj=class e{report=$(void 0);overlay=xv();showNode=xv();highlight=xv();overlayOn=Q(()=>this.report()?.overlay===!0);counts=X(()=>{let e=this.report()?.counts;return e?[{key:`hydrated`,label:`hydrated`,value:e.hydrated},{key:`skipped`,label:`skipped`,value:e.skipped},{key:`mismatched`,label:`mismatched`,value:e.mismatched},{key:`client`,label:`created on the client`,value:e.client},{key:`dehydratedBlocks`,label:e.dehydratedBlocks===1?`dehydrated @defer block`:`dehydrated @defer blocks`,value:e.dehydratedBlocks}]:[]});toggleOverlay(){let e=!this.overlayOn();this.overlayOn.set(e),this.overlay.emit(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-hydration-section`]],inputs:{report:[1,`report`]},outputs:{overlay:`overlay`,showNode:`showNode`,highlight:`highlight`},decls:5,vars:1,consts:[[`aria-labelledby`,`ct-hydration-title`,1,`hydration`],[`id`,`ct-hydration-title`,1,`title`],[1,`empty`],[1,`summary`],[`aria-label`,`Hydration summary`,1,`counts`],[3,`class`],[`type`,`button`,1,`outline`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`x`,`3`,`y`,`3`,`width`,`18`,`height`,`18`,`rx`,`2`,`stroke-dasharray`,`4 3`],[1,`num`],[1,`label`],[1,`mismatches`],[`type`,`button`,1,`mismatch`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[1,`name`,`mono`],[1,`mono`,`muted`],[1,`detail-line`]],template:function(e,t){if(e&1&&(L(0,`section`,0)(1,`h2`,1),G(2,`Hydration`),R(),k(3,dj,2,1)(4,fj,5,0,`p`,2),R()),e&2){let e;E(3),A((e=t.report())?3:4,e)}},styles:[`.hydration[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 8px;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 12px 0 6px;
+}
+
+.empty[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px dashed var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%], 
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+code[_ngcontent-%COMP%] {
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.summary[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+
+.counts[_ngcontent-%COMP%] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.count[_ngcontent-%COMP%] {
+  padding: 2px 10px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.num[_ngcontent-%COMP%] {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.count-hydrated[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.count-skipped[_ngcontent-%COMP%], 
+.count-dehydratedBlocks[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.count-mismatched[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.outline[aria-pressed=true][_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+svg[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+}
+
+.mismatches[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mismatch[_ngcontent-%COMP%] {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  min-height: var(--%NS%control-h);
+  padding: 6px 12px;
+  background: var(--%NS%surface);
+  border-color: var(--%NS%border);
+  text-align: left;
+}
+
+.name[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.detail-line[_ngcontent-%COMP%] {
+  width: 100%;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},mj=(e,t)=>t.id;function hj(e,t){if(e&1&&(P(0,`p`,11),G(1),F(),P(2,`h3`,7),G(3,`Still retained`),F(),P(4,`p`,6),G(5,` In a development build, Angular's DI debug data keeps every destroyed component in memory, so Pangular can't tell a leak from that. Check retainers in the Chrome DevTools Memory panel: take a heap snapshot after a few navigations, search for the class and look for a retainer other than Angular's DI debug records. Open subscriptions after destroy are still tracked below. `),F()),e&2){let e=U(),t=U();E(),K(t.plural(e.navigations,`navigation`))}}function gj(e,t){e&1&&(P(0,`p`,6),G(1,` This page cannot track destroyed components. It needs WeakRef, FinalizationRegistry and the Angular debug API of a development build. `),F())}function _j(e,t){if(e&1&&(P(0,`span`,18),G(1),F()),e&2){let e=U().$implicit,t=U(4);E(),K(t.plural(e.subscriptions,`open subscription`))}}function vj(e,t){if(e&1&&(P(0,`li`,13)(1,`span`,14),G(2),F(),P(3,`span`,15),G(4),F(),P(5,`span`,16),G(6),F(),P(7,`span`,17),G(8),F(),k(9,_j,2,1,`span`,18),F()),e&2){let e=t.$implicit,n=U(4);E(2),K(e.name),E(2),K(e.route||`/`),E(2),q(``,n.plural(e.navigations,`navigation`),` ago`),E(2),K(n.ageOf(e)),E(),A(e.subscriptions?9:-1)}}function yj(e,t){if(e&1&&(P(0,`p`,6),G(1),F(),P(2,`ul`,12),j(3,vj,10,5,`li`,13,mj),F()),e&2){let e=U(3);E(),J(` Destroyed, yet still in memory after at least `,e.minNavigations,` navigations and `,e.minSeconds,` seconds. Take a heap snapshot, search for the class and read its retainers. `),E(2),M(e.retained().slice(0,e.shown))}}function bj(e,t){e&1&&(P(0,`p`,6),G(1,`No destroyed component is still in memory after a few navigations.`),F())}function xj(e,t){if(e&1&&(P(0,`p`,6),G(1),P(2,`span`,19),G(3),F(),G(4,`. Navigate a few times to see whether they stay. `),F()),e&2){let e=U(3);E(),q(` `,e.plural(e.recent().length,`instance`),` destroyed recently and not collected yet: `),E(2),K(e.names(e.recent()))}}function Sj(e,t){if(e&1&&(k(0,gj,2,0,`p`,6),P(1,`p`,11),G(2),F(),P(3,`h3`,7),G(4,` Still retained `),P(5,`span`,8),G(6),F()(),k(7,yj,5,2)(8,bj,2,0,`p`,6),k(9,xj,5,2,`p`,6)),e&2){let e=U(),t=U();A(e.support.retention?-1:0),E(2),R_(` `,t.plural(e.navigations,`navigation`),` · `,t.retained().length,` still retained · `,t.plural(e.totals.collected,`instance`),` collected `),E(4),K(t.retained().length),E(),A(t.retained().length?7:8),E(2),A(t.recent().length?9:-1)}}function Cj(e,t){if(e&1&&(P(0,`p`,6),G(1,` Off the page but not destroyed (detached views, such as a route reuse cache): `),P(2,`span`,19),G(3),F(),G(4,`. `),F()),e&2){let e=U(2);E(3),K(e.names(e.detached()))}}function wj(e,t){if(e&1&&(P(0,`span`,8),G(1),F()),e&2){let e=U();E(),K(e.subscriptions.length)}}function Tj(e,t){if(e&1&&(P(0,`span`,15),G(1),F()),e&2){let e=U().$implicit;E(),K(e.source)}}function Ej(e,t){if(e&1&&(P(0,`li`,13)(1,`span`,14),G(2),F(),P(3,`span`,16),G(4),F(),P(5,`span`,18),G(6),F(),k(7,Tj,2,1,`span`,15),F()),e&2){let e=t.$implicit;E(2),K(e.name),E(2),q(``,e.count,` open`),E(2),q(` `,e.reason===`instance-destroyed`?`instance destroyed`:`no instance left`,` `),E(),A(e.source?7:-1)}}function Dj(e,t){if(e&1&&(P(0,`p`,6),G(1,` Still open although the component that made them is gone. Tear them down with takeUntilDestroyed(), DestroyRef.onDestroy or the async pipe. `),F(),P(2,`ul`,12),j(3,Ej,8,4,`li`,13,ug),F()),e&2){let e=U(2),t=U();E(3),M(e.subscriptions.slice(0,t.shown))}}function Oj(e,t){e&1&&(P(0,`p`,6),G(1,`No subscription is still open after its component went away.`),F())}function kj(e,t){e&1&&(P(0,`p`,6),G(1,` Subscriptions are tied to component classes only; Angular 20 profiler hooks tie them to instances. `),F())}function Aj(e,t){if(e&1&&(k(0,Dj,5,0)(1,Oj,2,0,`p`,6),k(2,kj,2,0,`p`,6)),e&2){let e=U();A(+!e.subscriptions.length),E(2),A(e.support.instances?-1:2)}}function jj(e,t){e&1&&(P(0,`p`,9),G(1,` Tracking could not start: the page has no RxJS the overlay can load. `),F())}function Mj(e,t){e&1&&(P(0,`p`,6),G(1,` Off. Track subscriptions wraps Observable.prototype.subscribe on the page to record which component makes each subscription, until you stop it. Subscriptions made before you start are not seen, so reload or navigate again after starting. `),F())}function Nj(e,t){e&1&&I(0,`app-angular-unavailable`,10),e&2&&N(`page`,U(2).angular())}function Pj(e,t){if(e&1&&(P(0,`span`,16),G(1),F()),e&2){let e=U().$implicit,t=U(3);E(),K(t.plural(e.subscriptions,`subscription`))}}function Fj(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,20),V(`click`,function(){let t=x(e).$implicit;return S(U(3).showComponent.emit(t.id))})(`focus`,function(){let t=x(e).$implicit;return S(U(3).highlight.emit(t.id))})(`blur`,function(){return x(e),S(U(3).highlight.emit(null))})(`mouseenter`,function(){let t=x(e).$implicit;return S(U(3).highlight.emit(t.id))})(`mouseleave`,function(){return x(e),S(U(3).highlight.emit(null))}),P(2,`span`,14),G(3),F(),P(4,`span`,16),G(5),F(),k(6,Pj,2,1,`span`,16),F()()}if(e&2){let e=t.$implicit,n=U(2),r=U();E(3),K(e.name),E(2),K(r.effectsText(e)),E(),A(n.support.subscriptions===`on`?6:-1)}}function Ij(e,t){e&1&&(P(0,`p`,6),G(1,` Angular files a component's effects under the template its host sits in, so effects of components side by side in one template show as shared. `),F())}function Lj(e,t){if(e&1&&(P(0,`ul`,12),j(1,Fj,7,3,`li`,null,mj),F(),k(3,Ij,2,0,`p`,6)),e&2){let e=U(),t=U();E(),M(e.components.slice(0,t.shown)),E(2),A(e.components.some(t.hasShared)?3:-1)}}function Rj(e,t){e&1&&(P(0,`p`,6),G(1,`No component on the page has a live effect or a tracked subscription.`),F())}function zj(e,t){if(e&1&&(k(0,hj,6,1)(1,Sj,10,7),k(2,Cj,5,1,`p`,6),P(3,`h3`,7),G(4,` Open subscriptions after destroy `),k(5,wj,2,1,`span`,8),F(),k(6,Aj,3,2)(7,jj,2,0,`p`,9)(8,Mj,2,0,`p`,6),P(9,`h3`,7),G(10,` Live effects and subscriptions `),P(11,`span`,8),G(12),F()(),k(13,Nj,1,1,`app-angular-unavailable`,10),k(14,Lj,4,1)(15,Rj,2,0,`p`,6)),e&2){let e,n=t,r=U();A(n.support.retention===`dev-di-debug`?0:1),E(2),A(r.detached().length?2:-1),E(3),A(n.support.subscriptions===`on`?5:-1),E(),A((e=n.support.subscriptions)===`on`?6:e===`unavailable`?7:8),E(6),K(n.components.length),E(),A(n.support.effects?-1:13),E(),A(n.components.length?14:15)}}function Bj(e,t){e&1&&(P(0,`p`,6),G(1,`No leak data from this page yet. It comes with the next report.`),F())}var Vj=20;function Hj(e){let t=Math.max(0,Math.round(e/1e3));if(t<120)return`${t} s`;let n=Math.round(t/60);return n<120?`${n} min`:`${Math.round(n/60)} h`}var Uj=(e,t,n=`${t}s`)=>`${e} ${e===1?t:n}`,Wj=class e{report=$(null);pageId=$(null);rpc=$(null);angular=$(null);now=$(()=>Date.now());showComponent=xv();highlight=xv();shown=Vj;minNavigations=2;minSeconds=tw/1e3;plural=Uj;busy=w(!1);announcement=w(``);tracking=X(()=>this.report()?.support.subscriptions===`on`);split=X(()=>{let e=this.report(),t=[],n=[],r=[];if(!e)return{retained:t,recent:n,detached:r};let i=e.support.retention===`dev-di-debug`;for(let a of e.destroyed)if(a.detached)r.push(a);else if(i)continue;else this.isRetained(e,a)?t.push(a):n.push(a);return{retained:t,recent:n,detached:r}});retained=X(()=>this.split().retained);recent=X(()=>this.split().recent);detached=X(()=>this.split().detached);ageMs(e,t){return Math.max(0,this.now()()-e.reportedAt+(e.at-t.destroyedAt))}isRetained(e,t){return t.navigations>=2&&this.ageMs(e,t)>=1e4}ageOf(e){let t=this.report();return t?`${Hj(this.ageMs(t,e))} old`:``}names(e){let t=[...new Set(e.map(e=>e.name))];return t.length>6?`${t.slice(0,6).join(`, `)} and more`:t.join(`, `)}hasShared(e){return!!e.sharedEffects}effectsText(e){let t=Uj(e.effects,`effect`);return e.sharedEffects?`${t}, ${e.sharedEffects} shared`:t}async toggle(){let e=this.pageId();if(!e||this.busy())return;let t=!this.tracking();this.busy.set(!0);try{await oT(this.rpc(),`request-leak-tracking`,{pageId:e,on:t}),this.announcement.set(t?`Tracking subscriptions. Reload or navigate to see subscriptions made at start.`:`Stopped tracking subscriptions.`)}catch{this.announcement.set(`Could not reach the page. Try again.`)}finally{this.busy.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-leaks-section`]],inputs:{report:[1,`report`],pageId:[1,`pageId`],rpc:[1,`rpc`],angular:[1,`angular`],now:[1,`now`]},outputs:{showComponent:`showComponent`,highlight:`highlight`},decls:12,vars:5,consts:[[`aria-labelledby`,`ct-leaks-title`,1,`leaks`],[1,`head`],[`id`,`ct-leaks-title`],[`type`,`button`,1,`track`,3,`click`,`disabled`],[`role`,`status`,1,`sr-only`],[1,`hint`],[1,`note`],[1,`sub`],[1,`pill`],[`role`,`status`,1,`note`],[`capability`,`signalGraph`,`missing`,``,`compact`,``,3,`page`],[1,`stats`],[1,`rows`],[1,`row`],[1,`name`,`mono`],[1,`meta`,`mono`],[1,`count`],[1,`meta`],[1,`flag`,`warn`],[1,`mono`],[`type`,`button`,1,`row`,`live`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`]],template:function(e,t){if(e&1&&(P(0,`section`,0)(1,`div`,1)(2,`h2`,2),G(3,`Leaks`),F(),P(4,`button`,3),V(`click`,function(){return t.toggle()}),G(5,` Track subscriptions `),F(),P(6,`p`,4),G(7),F()(),P(8,`p`,5),G(9,` Components that left the page but are still in memory, and the live effects and RxJS subscriptions of each component. The browser collects garbage when it decides, so a retained instance is a hint: check what holds it in the Chrome DevTools Memory panel. `),F(),k(10,zj,16,7)(11,Bj,2,0,`p`,6),F()),e&2){let e;E(4),N(`disabled`,!t.pageId()||!t.report()),O(`aria-pressed`,t.tracking())(`aria-disabled`,t.busy()||null),E(3),K(t.announcement()),E(3),A((e=t.report())?10:11,e)}},dependencies:[RE],styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.leaks[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.track[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+}
+
+.track[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.track[aria-disabled=true][_ngcontent-%COMP%] {
+  cursor: progress;
+}
+
+.track[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.hint[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%] {
+  margin: 8px 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.stats[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.sub[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 14px 0 6px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.rows[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: var(--%NS%control-h);
+  padding: 6px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  font-size: 12px;
+}
+
+.row.live[_ngcontent-%COMP%] {
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  text-align: left;
+}
+
+.row.live[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.name[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.meta[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-2);
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.count[_ngcontent-%COMP%] {
+  padding: 0 8px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 5px;
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.flag.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}`]})},Gj=[`[redacted]`,`[email]`],Kj=2e4;function qj(e){let t=0;for(let n of Gj)for(let r=e.indexOf(n);r>=0;r=e.indexOf(n,r+n.length))t++;return t}function Jj(e,t=Kj){let n=0,r=t,i=new Set,a=[e];for(;a.length;){let e=a.pop();if(typeof e==`string`){if(--r<0)return{count:n,capped:!0};n+=qj(e);continue}if(typeof e==`object`&&e&&!i.has(e)){if(i.add(e),Array.isArray(e)){for(let t of e)a.push(t);continue}for(let[t,i]of Object.entries(e)){if(--r<0)return{count:n,capped:!0};n+=qj(t),a.push(i)}}}return{count:n,capped:!1}}function Yj(e,t){if(e&1&&(L(0,`p`,0),G(1),L(2,`span`,1),G(3),R()()),e&2){let e=U();E(),R_(` `,e.result().capped?`At least `:``,``,e.result().count,` `,e.result().count===1?`value`:`values`,` masked `),E(2),K(e.why())}}var Xj=class e{value=$(void 0);why=$(`by redaction (secret names, tokens and emails).`);result=X(()=>Jj(this.value()));static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-redaction-count`]],inputs:{value:[1,`value`],why:[1,`why`]},decls:1,vars:1,consts:[[`data-redaction-count`,``,1,`count`],[1,`why`]],template:function(e,t){e&1&&k(0,Yj,4,4,`p`,0),e&2&&A(t.result().count>0?0:-1)},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+  font-variant-numeric: tabular-nums;
+}
+
+.why[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}`]})},Zj=[`*`];function Qj(e,t){e&1&&G(0),e&2&&K(U(2).label())}function $j(e,t){e&1&&Vg(0,0,null,Qj,1,1)}function eM(e,t){if(e&1&&(P(0,`span`,4),G(1),F()),e&2){let e=U(2);E(),K(e.message())}}function tM(e,t){if(e&1){let e=z();P(0,`button`,2),V(`click`,function(){return x(e),S(U().open())}),Eg(1,3),F(),k(2,eM,2,1,`span`,4)}if(e&2){let e=U(),t=Gg(1);N(`title`,`Open `+e.label()+` in your editor`),O(`aria-label`,`Open `+e.label()+` in your editor`),E(),N(`ngTemplateOutlet`,t),E(),A(e.message()?2:-1)}}function nM(e,t){if(e&1&&(P(0,`span`,1),Eg(1,3),F()),e&2){let e=U(),t=Gg(1);N(`title`,e.label()),E(),N(`ngTemplateOutlet`,t)}}var rM=class e{source=w(w(null));client=X(()=>this.source()());available=X(()=>{let e=this.client();return!!e&&!cT(e)});use(e){this.source.set(e)}async open(e,t){if(!this.available())return{ok:!1,error:`No server is connected.`};try{let n=await oT(this.client(),`open-in-editor`,{file:e,...t?{line:t}:{}});return n?.ok?{ok:!0}:{ok:!1,error:n?.error??`The server did not open it.`}}catch{return{ok:!1,error:`The server did not open it.`}}}static ɵfac=function(t){return new(t||e)};static ɵprov=Fl({token:e,factory:e.ɵfac})};function iM(e,t){return t?`${e}:${t}`:e}var aM=class e{editor=b(rM);file=$.required();line=$(void 0);label=X(()=>iM(this.file(),this.line()));message=w(``);async open(){this.message.set(``);let e=await this.editor.open(this.file(),this.line()??void 0);e.ok||this.message.set(`Not opened: ${e.error}`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-source-link`]],inputs:{file:[1,`file`],line:[1,`line`]},ngContentSelectors:Zj,decls:4,vars:1,consts:[[`text`,``],[1,`source-text`,3,`title`],[`type`,`button`,1,`source-link`,3,`click`,`title`],[3,`ngTemplateOutlet`],[`role`,`alert`,1,`message`]],template:function(e,t){e&1&&(Bg(),Hh(0,$j,2,0,`ng-template`,null,0,mv),k(2,tM,3,4)(3,nM,2,2,`span`,1)),e&2&&(E(2),A(t.editor.available()?2:3))},dependencies:[uy],styles:[`[_nghost-%COMP%] {
+  display: inline;
+  min-width: 0;
+}
+
+.source-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+
+.source-link[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%accent-text);
+  text-decoration-style: solid;
+}
+
+.source-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.message[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%danger-text);
+  font-family: var(--%NS%font-sans);
+  font-size: 0.92em;
+}`]})};function oM(e,t){if(e&1&&(L(0,`span`,1),G(1),R()),e&2){let e=U(2);E(),q(`: `,e.label())}}function sM(e,t){if(e&1&&(L(0,`span`,1),G(1),R()),e&2){let e=U(3);E(),q(`: `,e.label())}}function cM(e,t){if(e&1){let e=z();L(0,`button`,4),H(`click`,function(){return x(e),S(U(2).store(`log`))}),G(1,` Log to console `),k(2,sM,2,1,`span`,1),R()}if(e&2){let e=U(2);B(`disabled`,e.busy()||!e.rpc()||!e.pageId()),E(2),A(e.label()?2:-1)}}function lM(e,t){if(e&1){let e=z();L(0,`button`,0),H(`click`,function(){return x(e),S(U().store())}),G(1,` Store as global `),k(2,oM,2,1,`span`,1),R(),k(3,cM,3,2,`button`,2),L(4,`span`,3),G(5),R()}if(e&2){let e=U();B(`disabled`,e.busy()||!e.rpc()||!e.pageId()),E(2),A(e.label()?2:-1),E(),A(e.canLog()?3:-1),E(2),K(e.message())}}var uM=class e{rpc=$(null);pageId=$(null);target=$.required();label=$(``);canLog=$(!1);staticReport=X(()=>cT(this.rpc()));busy=w(!1);message=w(``);async store(e=`store`){let t=this.rpc(),n=this.pageId();if(t&&n){this.busy.set(!0),this.message.set(``);try{let r=await t.scope(`pangular`).rpc.call(`request-console-global`,{pageId:n,target:this.target(),...e===`log`?{mode:e}:{}}),i=e===`log`?r?.ok?`Logged in the page console.`:`Not logged.`:r?.ok&&r.name?`Stored as ${r.name}.`:`Not stored.`;this.message.set(r?.message||i)}catch{this.message.set(`Could not reach the page.`)}finally{this.busy.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-store-global`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],target:[1,`target`],label:[1,`label`],canLog:[1,`canLog`]},decls:1,vars:1,consts:[[`type`,`button`,1,`store`,3,`click`,`disabled`],[1,`sr-only`],[`type`,`button`,1,`store`,`log`,3,`disabled`],[`role`,`status`,1,`status`],[`type`,`button`,1,`store`,`log`,3,`click`,`disabled`]],template:function(e,t){e&1&&k(0,lM,6,4),e&2&&A(t.staticReport()?-1:0)},styles:[`[_nghost-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+
+.store[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.store[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+}
+
+.store[_ngcontent-%COMP%]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.store[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .store[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}
+.status[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.status[_ngcontent-%COMP%]:empty {
+  display: none;
+}`]})},dM=(e,t)=>t.name;function fM(e,t){e&1&&(L(0,`span`,11),G(1,`impure`),R())}function pM(e,t){e&1&&(L(0,`span`,11),G(1,`churning`),R())}function mM(e,t){e&1&&(L(0,`span`,11),G(1,`stale?`),R())}function hM(e,t){if(e&1&&(L(0,`span`,10),G(1),R()),e&2){let e=U(2).$implicit,t=U(3);E(),K(t.plural(e.calls,`call`))}}function gM(e,t){if(e&1){let e=z();L(0,`button`,7),H(`click`,function(){x(e);let t=U().$implicit;return S(U(3).showPipe.emit(t.name))}),L(1,`span`,8),G(2,`Show in Pipes:`),R(),L(3,`span`,9),G(4),R(),L(5,`span`,10),G(6),R(),k(7,fM,2,0,`span`,11),k(8,pM,2,0,`span`,11),k(9,mM,2,0,`span`,11),k(10,hM,2,1,`span`,10),R()}if(e&2){let e=U().$implicit;E(4),K(e.name),E(2),q(``,e.uses,`×`),E(),A(e.isPure?-1:7),E(),A(e.churn?8:-1),E(),A(e.stale?9:-1),E(),A(e.calls===void 0?-1:10)}}function _M(e,t){e&1&&(L(0,`span`,11),G(1,`impure`),R())}function vM(e,t){if(e&1&&(L(0,`span`,6)(1,`span`,9),G(2),R(),L(3,`span`,10),G(4),R(),k(5,_M,2,0,`span`,11),R()),e&2){let e=U().$implicit;E(2),K(e.name),E(2),q(``,e.uses,`×`),E(),A(e.isPure?-1:5)}}function yM(e,t){if(e&1&&(L(0,`li`),k(1,gM,11,6,`button`,5)(2,vM,6,3,`span`,6),R()),e&2){let e=U(3);E(),A(e.canShowPipes()?1:2)}}function bM(e,t){if(e&1&&(L(0,`ul`,3),j(1,yM,3,1,`li`,null,dM),R(),L(3,`p`,4),G(4,` Call counts cover every component that uses the pipe. Record calls in the Pipes tab to see them. `),R()),e&2){let e=U(2);E(),M(e.rows())}}function xM(e,t){e&1&&(L(0,`p`,2),G(1,`No pipe is in use in the rendered part of its template.`),R())}function SM(e,t){if(e&1&&(L(0,`div`,0)(1,`h3`),G(2,` Pipes in template `),L(3,`span`,1),G(4),R()(),k(5,bM,5,0)(6,xM,2,0,`p`,2),R()),e&2){let e=U();E(4),K(e.rows().length),E(),A(e.rows().length?5:6)}}function CM(e,t,n){let r=(t?e?.pages?.find(e=>e.pageId===t):void 0)?.pipes??e?.pipes??[],i=[];for(let e of r){let t=e.components.find(e=>e.name===n);t&&i.push({name:e.name,isPure:e.isPure,uses:t.count,...e.call?{calls:e.call.callCount}:{},churn:!!e.churn,stale:!!e.stale})}return i.sort((e,t)=>e.name.localeCompare(t.name))}var wM=class e{plural=cD;destroyRef=b(Os);rpc=$(null);pageId=$(void 0);component=$.required();canShowPipes=$(!1);showPipe=xv();snapshot=w(void 0);loaded=w(!1);rows=X(()=>CM(this.snapshot(),this.pageId(),this.component()));unsubscribe;constructor(){T(()=>{let e=this.rpc();e&&this.subscribe(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async subscribe(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`pipe-usage`);if(this.destroyRef.destroyed)return;let n=e=>{this.snapshot.set(e),this.loaded.set(!0)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-component-pipes`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],component:[1,`component`],canShowPipes:[1,`canShowPipes`]},outputs:{showPipe:`showPipe`},decls:1,vars:1,consts:[[1,`block`],[1,`pill`],[1,`empty-line`],[1,`chips`],[1,`hint`],[`type`,`button`,1,`pipe`],[1,`pipe`],[`type`,`button`,1,`pipe`,3,`click`],[1,`sr-only`],[1,`mono`],[1,`note`],[1,`flag`,`warn`]],template:function(e,t){e&1&&k(0,SM,7,2,`div`,0),e&2&&A(t.loaded()?0:-1)},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.block[_ngcontent-%COMP%] {
+  padding: 14px 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pipe[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: var(--%NS%control-h);
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 12px;
+}
+
+button.pipe[_ngcontent-%COMP%] {
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button.pipe[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button.pipe[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  color: var(--%NS%text-strong);
+}
+
+.note[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.flag[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.flag.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+  padding: 0 6px;
+  border-radius: 99px;
+}
+
+.hint[_ngcontent-%COMP%], 
+.empty-line[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button.pipe[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},TM=[`field`],EM=[`editButton`],DM=[`valueBox`];function OM(e,t){if(e&1){let e=z();L(0,`div`,5)(1,`label`,6),G(2),R(),L(3,`input`,7,0),H(`input`,function(t){return x(e),S(U().draft.set(t.target.value))})(`keydown.enter`,function(t){x(e);let n=U();return t.preventDefault(),S(n.apply())})(`keydown.escape`,function(t){x(e);let n=U();return t.preventDefault(),t.stopPropagation(),S(n.cancel())}),R(),L(5,`button`,8),H(`click`,function(){return x(e),S(U().apply())}),G(6,`Apply`),R(),L(7,`button`,9),H(`click`,function(){return x(e),S(U().cancel())}),G(8,`Cancel`),R()(),L(9,`p`,10),G(10),R()}if(e&2){let e=U();E(),B(`htmlFor`,e.fieldId),E(),q(`New value of `,e.prop().name,`, as JSON`),E(),B(`id`,e.fieldId)(`value`,e.draft())(`readOnly`,e.busy()),O(`aria-busy`,e.busy()?`true`:null)(`aria-invalid`,e.error()?`true`:null)(`aria-describedby`,e.hintId+(e.error()?` `+e.errorId:``)),E(2),B(`disabled`,e.busy()),E(4),B(`id`,e.hintId),E(),q(` JSON, such as "text", 42, true or `,e.objectSample,`. Enter applies, Escape cancels. `)}}function kM(e,t){if(e&1&&(L(0,`pre`,null,1),G(2),uv(3,`json`),R()),e&2){let e=U(2);O(`tabindex`,e.scrollable()?0:null)(`role`,e.scrollable()?`region`:null)(`aria-label`,e.scrollable()?`Value of `+e.prop().name:null),E(2),K(dv(3,4,e.prop().value))}}function AM(e,t){if(e&1){let e=z();L(0,`button`,14,2),H(`click`,function(){return x(e),S(U(2).start())}),G(2,` Edit `),R()}if(e&2){let e=U(2);B(`disabled`,e.busy()),O(`aria-label`,`Edit `+e.prop().name)}}function jM(e,t){if(e&1&&(L(0,`p`,13),G(1),R()),e&2){let e=U(2);E(),K(e.prop().locked)}}function MM(e,t){if(e&1&&(L(0,`div`,11),k(1,kM,4,6,`pre`),k(2,AM,3,2,`button`,12),R(),k(3,jM,2,1,`p`,13)),e&2){let e=U();E(),A(e.bare()?-1:1),E(),A(e.editable()?2:-1),E(),A(e.writes()&&e.prop().locked?3:-1)}}function NM(e,t){if(e&1&&(L(0,`p`,3),G(1),R()),e&2){let e=U();B(`id`,e.errorId),E(),K(e.error())}}var PM=0;function FM(e){let t=e.trim();if(!t)return{error:`Type a JSON value, such as "text", 42, true, null or [1, 2].`};try{return{value:JSON.parse(t)}}catch{return{error:`Not valid JSON. Put text in double quotes, such as "Paris".`}}}var IM=class e{prop=$.required();componentId=$.required();pageId=$(null);rpc=$(null);writes=$(!1);bare=$(!1);readDraft=$(null);fieldId=`prop-edit-${++PM}`;hintId=`${this.fieldId}-hint`;errorId=`${this.fieldId}-error`;objectSample=`{"a": 1}`;editing=w(!1);draft=w(``);busy=w(!1);error=w(``);done=w(``);editable=X(()=>this.writes()&&!!this.prop().edit&&!!this.pageId()&&!!this.rpc());field=Ov(`field`);editButton=Ov(`editButton`);valueBox=Ov(`valueBox`);injector=b(Es);scrollable=w(!1);constructor(){Fv(()=>{this.prop();let e=this.valueBox()?.nativeElement;this.scrollable.set(!!e&&e.scrollHeight>e.clientHeight+1)})}async start(){let e=this.prop().value;this.error.set(``),this.done.set(``);let t=this.readDraft();if(t){this.busy.set(!0);let n=await t();if(this.busy.set(!1),n.error!==void 0){this.error.set(n.error);return}e=n.value}this.draft.set(e===void 0?``:JSON.stringify(e)),this.editing.set(!0),Sd(()=>{let e=this.field()?.nativeElement;e?.focus(),e?.select()},{injector:this.injector})}cancel(){this.editing()&&(this.editing.set(!1),this.busy.set(!1),this.error.set(``),this.focusEdit())}async apply(){if(this.busy())return;let e=FM(this.draft());if(`error`in e){this.error.set(e.error);return}let t=this.prop(),n=this.rpc(),r=this.pageId();if(!n||!r||!t.edit)return;this.busy.set(!0),this.error.set(``);let i;try{i=await n.scope(`pangular`).rpc.call(`request-component-edit`,{pageId:r,request:{id:this.componentId(),path:t.prop,value:e.value,kind:t.edit}})??{}}catch{i={error:`The devtools server did not answer. Try again.`}}this.busy.set(!1),this.editing()&&(i.ok?(this.editing.set(!1),this.done.set(`Set ${t.name}.`),this.focusEdit()):(this.error.set(i.error??`The page did not write it.`),this.field()?.nativeElement.focus()))}focusEdit(){Sd(()=>this.editButton()?.nativeElement.focus(),{injector:this.injector})}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-prop-value`]],viewQuery:function(e,t){e&1&&Ug(t.field,TM,5)(t.editButton,EM,5)(t.valueBox,DM,5),e&2&&Wg(3)},inputs:{prop:[1,`prop`],componentId:[1,`componentId`],pageId:[1,`pageId`],rpc:[1,`rpc`],writes:[1,`writes`],bare:[1,`bare`],readDraft:[1,`readDraft`]},decls:5,vars:3,consts:[[`field`,``],[`valueBox`,``],[`editButton`,``],[`role`,`alert`,1,`error`,3,`id`],[`role`,`status`,1,`sr-only`],[1,`editor`],[1,`sr-only`,3,`for`],[`type`,`text`,`autocomplete`,`off`,`spellcheck`,`false`,1,`field`,`mono`,3,`input`,`keydown.enter`,`keydown.escape`,`id`,`value`,`readOnly`],[`type`,`button`,1,`primary`,3,`click`,`disabled`],[`type`,`button`,3,`click`],[1,`hint`,3,`id`],[1,`view`],[`type`,`button`,1,`edit`,3,`disabled`],[1,`locked`],[`type`,`button`,1,`edit`,3,`click`,`disabled`]],template:function(e,t){e&1&&(k(0,OM,11,11)(1,MM,4,3),k(2,NM,2,2,`p`,3),L(3,`p`,4),G(4),R()),e&2&&(A(+!t.editing()),E(2),A(t.error()?2:-1),E(2),K(t.done()))},dependencies:[fy],styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.view[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+pre[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-height: 200px;
+  margin: 0;
+  overflow: auto;
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.editor[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.field[_ngcontent-%COMP%] {
+  flex: 1 1 160px;
+  min-width: 0;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.field[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+pre[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+}
+
+button.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+}
+
+button.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+button.edit[_ngcontent-%COMP%] {
+  height: 26px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%], 
+.locked[_ngcontent-%COMP%], 
+.error[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.hint[_ngcontent-%COMP%], 
+.locked[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.error[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}`]})},LM=1e3,RM={depth:5,limit:100},zM=`[redacted]`;function BM(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function VM(e){return BM(e)&&typeof e.$more==`number`&&Object.keys(e).length===1}function HM(e){return BM(e)&&typeof e.$collapsed==`string`&&typeof e.size==`number`&&Object.keys(e).length===2}function UM(e){return e===`Array`?`array`:e===`Map`?`map`:e===`Set`?`set`:`object`}function WM(e){return e.$type===`Map`&&Array.isArray(e.entries)}function GM(e){return e.$type===`Set`&&Array.isArray(e.values)}function KM(e){return Object.keys(e).filter(e=>e!==`$type`&&e!==`$more`)}function qM(e){if(!e||typeof e!=`object`)return null;if(HM(e))return e.size<=0?null:{kind:UM(e.$collapsed),type:e.$collapsed,size:e.size,collapsed:!0};if(VM(e))return null;if(Array.isArray(e)){let t=e.at(-1),n=VM(t)?t.$more:0,r=e.length-+!!n+n;return r?{kind:`array`,type:`Array`,size:r,collapsed:!1}:null}let t=e;if(WM(t)||GM(t)){let e=typeof t.size==`number`?t.size:0,n=WM(t)?`map`:`set`;return e?{kind:n,type:n===`map`?`Map`:`Set`,size:e,collapsed:!1}:null}let n=typeof t.$more==`number`?t.$more:0,r=KM(t).length+n,i=typeof t.$type==`string`?t.$type:`Object`;return r?{kind:`object`,type:i,size:r,collapsed:!1}:null}function JM(e){if(typeof e==`string`)return JSON.stringify(e);let t=qM(e);if(t)return ZM(t);try{return JSON.stringify(e)??String(e)}catch{return String(e)}}function YM(e){let t=qM(e);if(!t||t.collapsed)return{children:[],more:0};if(Array.isArray(e)){let n=(VM(e.at(-1))?e.slice(0,-1):e).map((e,t)=>({key:String(t),label:String(t),value:e}));return{children:n,more:t.size-n.length}}let n=e;if(t.kind===`map`){let e=n.entries.map((e,t)=>{let[n,r]=Array.isArray(e)?e:[void 0,e];return{key:String(t),label:JM(n),value:r}});return{children:e,more:Math.max(0,t.size-e.length)}}if(t.kind===`set`){let e=n.values.map((e,t)=>({key:String(t),label:String(t),value:e}));return{children:e,more:Math.max(0,t.size-e.length)}}return{children:KM(n).map(e=>({key:e,label:e,value:n[e]})),more:typeof n.$more==`number`?n.$more:0}}function XM(e,t,n){return`${e} ${e===1?t:n}`}function ZM(e){let t={array:XM(e.size,`item`,`items`),object:XM(e.size,`key`,`keys`),map:XM(e.size,`entry`,`entries`),set:XM(e.size,`value`,`values`)}[e.kind];return`${e.type} (${t})`}function QM(e,t){return JSON.stringify(t===void 0?e:[t,...e])}function $M(e,t){return e.map((e,n)=>n===0?e:(t?t[n-1]!==`object`:/^\d+$/.test(e))?`[${e}]`:`.${e}`).join(``)}function eN(e){return e.every(e=>e&&e===e.trim()&&!/[.[\]]/.test(e))?e.join(`.`):null}var tN=/^\[(Getter|Unreadable|Circular|Truncated|Function\b.*|Promise)\]$/;function nN(e){return e===null||typeof e==`boolean`?!0:typeof e==`number`?Number.isFinite(e):typeof e==`string`&&e!==zM&&!tN.test(e)&&!e.endsWith(`…`)}function rN(e,t){return!e||t.kind===`map`||t.kind===`set`||e===`signal`&&t.kind===`object`&&t.type!==`Object`?null:e}function iN(e,t,n,r,i=500){let a=[],o=r.trim().toLowerCase();if(!o)return a;let s=new Set,c=(e,t)=>{let r=QM(e);if(!(s.has(r)||a.length>=i)){s.add(r);for(let r of YM(t).children){let t=[...e,r.key];if(r.label.toLowerCase().includes(o)&&a.push(t),!qM(r.value))continue;let i=n(t)??(qM(r.value)?.collapsed?void 0:r.value);i!==void 0&&c(t,i)}}};return c(e,n(e)??t),a}var aN=(e,t)=>t.id;function oN(e,t){if(e&1){let e=z();P(0,`button`,2),V(`click`,function(){x(e);let t=U().$implicit;return S(U(3).toggle(t))}),C(),P(1,`svg`,3),I(2,`path`,4),F(),ys(),P(3,`span`,14),G(4),F(),P(5,`span`,5),G(6),F()()}if(e&2){let e=U().$implicit;O(`aria-expanded`,e.open)(`aria-label`,e.label+`: `+e.text),E(4),q(``,e.label,`:`),E(2),K(e.text)}}function sN(e,t){if(e&1&&I(0,`app-prop-value`,15),e&2){let e=U(5);N(`prop`,t)(`componentId`,e.componentId())(`pageId`,e.pageId())(`rpc`,e.rpc())(`writes`,e.writes())}}function cN(e,t){if(e&1&&(P(0,`span`,16),G(1),F()),e&2){let e=U(2).$implicit;E(),K(e.text)}}function lN(e,t){if(e&1&&(P(0,`span`,14),G(1),F(),k(2,sN,1,5,`app-prop-value`,15)(3,cN,2,1,`span`,16)),e&2){let e,t=U().$implicit;E(),q(``,t.label,`:`),E(),A((e=t.edit)?2:3,e)}}function uN(e,t){if(e&1){let e=z();P(0,`button`,17),V(`click`,function(){x(e);let t=U().$implicit;return S(U(3).more(t))}),G(1),P(2,`span`,18),G(3),F()()}if(e&2){let e=U().$implicit,t=U(3);E(),q(` Show `,t.step(e),` more `),E(2),q(`(`,e.more,` not listed)`)}}function dN(e,t){e&1&&(P(0,`span`,12),G(1,`Reading from the page…`),F())}function fN(e,t){if(e&1&&(P(0,`span`,13),G(1),F()),e&2){let e=U().$implicit;E(),K(e.text)}}function pN(e,t){if(e&1&&(P(0,`li`,9),k(1,oN,7,4,`button`,10)(2,lN,4,2)(3,uN,4,2,`button`,11)(4,dN,2,0,`span`,12)(5,fN,2,1,`span`,13),F()),e&2){let e,n=t.$implicit;f_(`padding-left`,n.depth*14,`px`),E(),A((e=n.kind)===`node`?1:e===`leaf`?2:e===`more`?3:e===`loading`?4:e===`error`?5:-1)}}function mN(e,t){if(e&1&&(P(0,`ul`,7),j(1,pN,6,3,`li`,8,aN),F()),e&2){let e=U(2);N(`id`,e.listId),O(`aria-label`,e.prop().name+` entries`),E(),M(e.rows())}}function hN(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`button`,2),V(`click`,function(){return x(e),S(U().toggleRoot())}),C(),P(2,`svg`,3),I(3,`path`,4),F(),ys(),P(4,`span`,5),G(5),F()(),I(6,`app-prop-value`,6),F(),k(7,mN,3,2,`ul`,7)}if(e&2){let e=t,n=U();E(),O(`aria-expanded`,n.rootOpen())(`aria-controls`,n.rootOpen()?n.listId:null)(`aria-label`,n.prop().name+`: `+n.summaryOf(e)),E(4),K(n.summaryOf(e)),E(),N(`bare`,!0)(`prop`,n.prop())(`componentId`,n.componentId())(`pageId`,n.pageId())(`rpc`,n.rpc())(`writes`,n.writes())(`readDraft`,n.readWhole),E(),A(n.rootOpen()?7:-1)}}function gN(e,t){if(e&1&&I(0,`app-prop-value`,0),e&2){let e=U();N(`prop`,e.prop())(`componentId`,e.componentId())(`pageId`,e.pageId())(`rpc`,e.rpc())(`writes`,e.writes())}}var _N=0;function vN(e){if(e===void 0)return`undefined`;try{return JSON.stringify(e)??String(e)}catch{return String(e)}}function yN(e){if(Array.isArray(e))return e.every(yN);if(e&&typeof e==`object`){let t=e;return![`$collapsed`,`$more`,`$type`].some(e=>Object.hasOwn(t,e))&&Object.values(t).every(yN)}return nN(e)}var bN=class e{prop=$.required();store=$.required();componentId=$.required();pageId=$(null);rpc=$(null);writes=$(!1);directive=$(void 0);query=$(``);listId=`value-tree-${++_N}`;host=b(Rl);pendingMore=null;constructor(){Fv(()=>{let e=this.rows(),t=this.pendingMore;if(!t)return;let n=e.findIndex(e=>(e.kind===`leaf`||e.kind===`node`)&&!t.has(e.id));if(n<0)return;this.pendingMore=null;let r=document.activeElement;r&&r!==document.body&&r.isConnected||this.focusNear(n)})}rootPath=X(()=>[this.prop().prop]);rootValue=X(()=>this.store().level(this.rootPath(),this.directive())??this.prop().value);root=X(()=>qM(this.rootValue()));needle=X(()=>this.query().trim().toLowerCase());matches=X(()=>{let e=this.needle(),t=this.prop();if(!e||[t.name,t.prop].some(t=>t.toLowerCase().includes(e)))return null;let n=this.store(),r=this.directive();return iN(this.rootPath(),this.rootValue(),e=>n.level(e,r),e)});rootOpen=X(()=>!!this.matches()?.length||this.store().isOpen(this.rootPath(),this.directive()));rows=X(()=>{let e=this.root();if(!e)return[];let t=this.store(),n=this.directive(),r=this.matches(),i=new Set,a=new Set;for(let e of r??[]){a.add(QM(e));for(let t=2;t<=e.length;t++)i.add(QM(e.slice(0,t)))}let o=this.prop(),s=this.writes()&&n===void 0,c=[],l=(e,o,d,f,p,m)=>{let{children:ee,more:h}=YM(e);for(let e of ee){let ee=[...o,e.key],h=QM(ee);if(r&&!m&&!i.has(h))continue;let g=qM(e.value),te=QM(ee,n);if(!g){let t=p&&nN(e.value)?eN(ee):null;c.push({id:te,kind:`leaf`,depth:f,path:ee,label:e.label,text:vN(e.value),edit:s&&t&&p?{name:$M(ee,[...d]),prop:t,value:e.value,edit:p}:void 0});continue}let ne=!!r&&!m&&i.has(h)&&!a.has(h)||t.isOpen(ee,n);if(c.push({id:te,kind:`node`,depth:f,path:ee,label:e.label,text:ZM(g),container:g,open:ne}),!ne)continue;let re=t.level(ee,n)??(g.collapsed?void 0:e.value),ie=[...d,g.kind];re===void 0?t.errors().has(te)?c.push({...u(ee,f+1,`error`),text:t.errors().get(te)}):c.push(u(ee,f+1,`loading`)):l(re,ee,ie,f+1,rN(p,g),m||a.has(h))}h>0&&(!r||m)&&c.push({...u(o,f,`more`),more:h,listed:ee.length})},u=(e,t,r)=>({id:`${QM(e,n)}:${r}`,kind:r,depth:t,path:e,label:``,text:``});return l(this.rootValue(),this.rootPath(),[e.kind],0,s?rN(o.editInside??null,e):null,!r),c});readWhole=async()=>{let e=await this.store().read(this.rootPath(),RM.depth,RM.limit);return e.ok?yN(e.value)?{value:e.value}:{error:`Too large to edit as a whole. Open it to edit the values inside.`}:{error:e.error??`The page did not read it.`}};summaryOf(e){return ZM(e)}toggleRoot(){this.pendingMore=null,this.store().toggle(this.rootPath(),this.directive(),!1)}toggle(e){this.pendingMore=null,this.store().toggle(e.path,this.directive(),!!e.container?.collapsed)}more(e){this.pendingMore=new Set(this.rows().map(e=>e.id)),this.store().more(e.path,this.directive(),e.listed??0)}focusNear(e){let t=this.host.nativeElement,n=Array.from(t.querySelectorAll(`#${this.listId} > li`)),r=e=>e?.querySelector(`button:not([disabled]), input, textarea, [tabindex="0"]`);(n.slice(e).map(r).find(Boolean)??n.slice(0,e).reverse().map(r).find(Boolean)??t.querySelector(`.root > .toggle`))?.focus()}step(e){return Math.min(100,e.more??0)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-value-tree`]],inputs:{prop:[1,`prop`],store:[1,`store`],componentId:[1,`componentId`],pageId:[1,`pageId`],rpc:[1,`rpc`],writes:[1,`writes`],directive:[1,`directive`],query:[1,`query`]},decls:2,vars:1,consts:[[3,`prop`,`componentId`,`pageId`,`rpc`,`writes`],[1,`root`],[`type`,`button`,1,`toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[1,`summary`,`mono`],[1,`whole`,3,`bare`,`prop`,`componentId`,`pageId`,`rpc`,`writes`,`readDraft`],[1,`entries`,3,`id`],[1,`entry`,3,`padding-left`],[1,`entry`],[`type`,`button`,1,`toggle`],[`type`,`button`,1,`more`],[`role`,`status`,1,`muted`],[`role`,`alert`,1,`error`],[1,`key`,`mono`],[1,`leaf-edit`,3,`prop`,`componentId`,`pageId`,`rpc`,`writes`],[1,`leaf`,`mono`],[`type`,`button`,1,`more`,3,`click`],[1,`muted`]],template:function(e,t){if(e&1&&k(0,hN,8,12)(1,gN,1,5,`app-prop-value`,0),e&2){let e;A((e=t.root())?0:1,e)}},dependencies:[IM],styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.root[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.whole[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+}
+
+.entries[_ngcontent-%COMP%] {
+  margin: 4px 0 0;
+  padding: 0 0 0 6px;
+  border-left: 1px solid var(--%NS%border);
+  list-style: none;
+}
+
+.entry[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.toggle[_ngcontent-%COMP%], 
+.more[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 24px;
+  max-width: 100%;
+  padding: 0 6px 0 2px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.toggle[_ngcontent-%COMP%]:hover, 
+.more[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.toggle[_ngcontent-%COMP%]:focus-visible, 
+.more[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.more[_ngcontent-%COMP%] {
+  padding-left: 6px;
+  color: var(--%NS%text);
+  text-decoration: underline;
+}
+
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.toggle[aria-expanded=true][_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+.key[_ngcontent-%COMP%] {
+  flex: none;
+  max-width: 50%;
+  overflow-wrap: anywhere;
+  color: var(--%NS%text-2);
+}
+
+.summary[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.leaf[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.leaf-edit[_ngcontent-%COMP%] {
+  flex: 1 1 160px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.error[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron[_ngcontent-%COMP%], 
+   .toggle[_ngcontent-%COMP%], 
+   .more[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})};function xN(e){return e.replace(/^_(?=[A-Z])/,``)}function SN(e,t){let n=e=>e.replace(/\\/g,`/`).replace(/^\.\//,``),[r,i]=[n(e),n(t)];return r===i||r.endsWith(`/`+i)||i.endsWith(`/`+r)}function CN(e,t){let n=[],r=new Set([t]);for(let i=e.get(t);i&&!r.has(i);i=e.get(i))r.add(i),n.push(i);return n}var wN={ArrowDown:`next`,ArrowUp:`previous`,ArrowLeft:`parent`,ArrowRight:`child`,Enter:`pick`},TN=`pangular:components:directive-hosts`;function EN(){try{return localStorage.getItem(TN)!==`hidden`}catch{return!0}}var DN=`pangular:panel-action-result`,ON=6e3,kN=0;function AN(e=window){return e.location.protocol===`chrome-extension:`&&e.parent!==e}function jN(e,t=window){let n=`pa-${Date.now().toString(36)}-${++kN}`;return new Promise(r=>{let i=e=>{t.clearTimeout(o),t.removeEventListener(`message`,a),r(e)},a=({source:e,origin:r,data:a})=>{if(e!==t.parent||r!==t.location.origin)return;let o=a;if(o?.type!==DN||o.requestId!==n)return;let{opened:s,error:c}=a;i({ok:o.ok===!0,...s===`file`||s===`class`?{opened:s}:{},...typeof c==`string`?{error:c}:{}})},o=t.setTimeout(()=>i({ok:!1,error:`timeout`}),ON);t.addEventListener(`message`,a),t.parent.postMessage({...e,requestId:n},t.location.origin)})}var MN=class e{available=AN();reveal(e,t){return jN({type:`pangular:reveal-element`,pageId:e,id:t})}openSource(e,t,n){return jN({type:`pangular:open-source`,pageId:e,id:t,...n?{file:n.file,line:n.line}:{}})}static ɵfac=function(t){return new(t||e)};static ɵprov=Fl({token:e,factory:e.ɵfac})};function NN(e){return Object.fromEntries(e.map(e=>[e.name,e.value??null]))}function PN(e){return e.map(e=>({name:e.name,listened:!!e.listened}))}function FN(e){let t={component:e.name,tag:e.tag,hostPath:e.path};e.selector&&(t.selector=e.selector),e.source&&(t.source=e.source),e.changeDetection&&(t.changeDetection=e.changeDetection),e.encapsulation&&(t.encapsulation=e.encapsulation),t.inputs=NN(e.inputs),t.outputs=PN(e.outputs),t.properties=NN(e.properties??[]),e.listeners.length&&(t.listeners=e.listeners),e.directives.length&&(t.directives=e.directives.map(e=>({name:e.name,inputs:NN(e.inputs),outputs:PN(e.outputs)}))),t.injected=e.dependencies.map(e=>({token:e.token,providedBy:e.providedBy?e.providedByName??`an injector`:null}));try{return JSON.stringify(t,null,2)}catch{return JSON.stringify({component:e.name,tag:e.tag,hostPath:e.path})}}function IN(e){return e.selector||e.path}var LN=1e3;function RN(e,t){let n=[];for(let[r,i]of t){let t=e.get(r);t!==void 0&&t!==i&&n.push(r)}return n}function zN(e){try{return JSON.stringify(e)??`undefined`}catch{return String(e)}}var BN=class{ms;changed=w(new Set);owner=null;last=new Map;timers=new Map;constructor(e=LN){this.ms=e}update(e,t){let n=new Map([...t].map(([e,t])=>[e,zN(t)]));if(e!==this.owner){this.clear(),this.owner=e,this.last=n;return}let r=RN(this.last,n);if(this.last=n,r.length){this.changed.update(e=>new Set([...e,...r]));for(let e of r)clearTimeout(this.timers.get(e)),this.timers.set(e,setTimeout(()=>{this.timers.delete(e),this.changed.update(t=>{let n=new Set(t);return n.delete(e),n})},this.ms))}}clear(){for(let e of this.timers.values())clearTimeout(e);this.timers.clear(),this.changed().size&&this.changed.set(new Set)}};function VN(e,t,n=0){return e===`directive`?`directive:${n}:${t}`:`${e}:${t}`}function HN(e,t){return e.length>t.length&&e.startsWith(`${t.slice(0,-1)},`)}var UN=class{sender;target={rpc:null,pageId:null,componentId:null};fetched=w(new Map);pushed=w({});open=w(new Set);loading=w(new Set);errors=w(new Map);limits=new Map;generation=0;constructor(e){this.sender=e}follow(e,t){let n=e.componentId===this.target.componentId&&e.pageId===this.target.pageId;this.target=e,n||(this.generation++,this.fetched.set(new Map),this.open.set(new Set),this.loading.set(new Set),this.errors.set(new Map),this.limits.clear()),this.pushed.set(t??{})}level(e,t){let n=QM(e,t),r=this.pushed();return Object.hasOwn(r,n)?r[n]:this.fetched().get(n)}isOpen(e,t){return this.open().has(QM(e,t))}toggle(e,t,n){let r=QM(e,t),i=new Set(this.open());if(i.has(r)){for(let e of i)(e===r||HN(e,r))&&i.delete(e);this.open.set(i),this.send({path:e,directive:t,forget:!0});return}i.add(r),this.open.set(i),n&&this.load(e,t,this.limits.get(r)??30)}more(e,t,n){let r=QM(e,t),i=Math.min(LM,Math.max(n,this.limits.get(r)??0)+100);this.limits.set(r,i),this.load(e,t,i)}async read(e,t,n){return this.send({path:e,depth:t,limit:n})}async load(e,t,n){let r=QM(e,t),i=this.generation;this.loading.update(e=>new Set(e).add(r));let a=await this.send({path:e,directive:t,limit:n,watch:!0});i===this.generation&&(this.loading.update(e=>{let t=new Set(e);return t.delete(r),t}),this.errors.update(e=>{let t=new Map(e);return a.ok?t.delete(r):t.set(r,a.error??`The page did not read it.`),t}),a.ok&&this.fetched.update(e=>new Map(e).set(r,a.value)))}async send(e){if(this.sender){if(e.forget)return{ok:!0};let{directive:t,watch:n,...r}=e;try{return await this.sender(r)}catch{return{error:`The devtools server did not answer. Try again.`}}}let{rpc:t,pageId:n,componentId:r}=this.target;if(!t||!n||!r)return{error:`No live page to read from.`};let{directive:i,...a}=e;try{return await t.scope(`pangular`).rpc.call(`request-component-value`,{pageId:n,request:{id:r,...a,...i===void 0?{}:{directive:i}}})??{}}catch{return{error:`The devtools server did not answer. Try again.`}}}};function WN(e){return e?.platform===`angular-native`}function GN(e){return WN(e)||e?.platform===`nativescript`}function KN(e,t){let n=Object.values(e??{}).filter(WN);if(t&&n.some(e=>e.pageId===t))return t;let r=null;for(let e of n)(!r||e.reportedAt>r.reportedAt)&&(r=e);return r?.pageId??null}var qN=12,JN=900;function YN(e){for(let t=e.parentElement;t;t=t.parentElement){let e=getComputedStyle(t);if(/(auto|scroll|overlay)/.test(e.overflowY))return t}return null}var XN=class{options;injector=b(Es);visibleTop=w(0);viewport=w(JN);rowHeight;host=null;scroller=null;detach=null;enabled;range;padTop;padBottom;constructor(e){this.options=e,this.rowHeight=w(e.estimate);let t=e.min??300;this.enabled=X(()=>e.count()>t),this.range=X(()=>{let t=e.count();if(!this.enabled())return{start:0,end:t};let n=this.rowHeight(),r=this.viewport(),i=Math.max(0,Math.min(this.visibleTop(),t*n-r)),a=Math.max(0,Math.min(t-1,Math.floor(i/n)-qN));return{start:a,end:Math.min(t,Math.max(a,Math.ceil((i+r)/n)+qN))}}),this.padTop=X(()=>this.enabled()?this.range().start*this.rowHeight():0),this.padBottom=X(()=>this.enabled()?(e.count()-this.range().end)*this.rowHeight():0),T(()=>{e.count(),Sd(()=>this.update(),{injector:this.injector})}),b(Os).onDestroy(()=>this.detach?.())}get count(){return this.options.count()}rendered(e){let{start:t,end:n}=this.range();return e>=t&&e<n}attach(e){if(this.host===e)return;this.detach?.(),this.host=e,e.style.overflowAnchor=`none`,e.style.transitionProperty=`none`;let t=/(auto|scroll|overlay)/.test(getComputedStyle(e).overflowY);this.scroller=t?e:YN(e);let n=this.scroller??window,r=()=>this.update();n.addEventListener(`scroll`,r,{passive:!0}),window.addEventListener(`resize`,r),this.detach=()=>{n.removeEventListener(`scroll`,r),window.removeEventListener(`resize`,r)},this.update()}update(){let e=this.host;if(e){if(this.scroller===e)this.place(e.scrollTop,e.clientHeight);else{let t=this.scroller?this.scroller.getBoundingClientRect().top:0,n=this.scroller?this.scroller.clientHeight:window.innerHeight;this.place(t-e.getBoundingClientRect().top,n)}this.options.fixed||this.measure()}}place(e,t){this.visibleTop.set(e),this.viewport.set(t>0?t:JN)}measure(){let e=this.host?.querySelectorAll(`[data-vindex]`);if(!e||e.length<2)return;let t=e[0].getBoundingClientRect(),n=(e[e.length-1].getBoundingClientRect().bottom-t.top)/e.length;n>4&&Math.abs(n-this.rowHeight())>1&&this.rowHeight.set(n)}reveal(e,t){if(this.enabled()&&!this.rendered(e)){let t=e*this.rowHeight(),n=this.viewport(),r=Math.max(0,t-n/2);if(this.place(r,n),this.host&&this.scroller===this.host)this.host.scrollTop=r;else if(this.host){let e=this.scroller?this.scroller.getBoundingClientRect().top:0,t=this.host.getBoundingClientRect().top-e+r;this.scroller?this.scroller.scrollTop+=t:window.scrollBy(0,t)}}t&&Sd(t,{injector:this.injector})}};function ZN(e){let t=e.ownerDocument.defaultView;if(!t)return null;for(let n=e.parentElement;n&&n!==e.ownerDocument.documentElement&&n!==e.ownerDocument.body;n=n.parentElement)if(/(auto|scroll|overlay)/.test(t.getComputedStyle(n).overflowY))return n;return null}var QN=e=>{let t=parseFloat(e);return Number.isFinite(t)?t:0};function $N(e,t=8){let n=e.ownerDocument.defaultView;if(!n)return e.offsetHeight+t;let r=ZN(e),i=r?n.getComputedStyle(r):null,a=i?QN(i.paddingTop):0,o=i?QN(i.scrollPaddingTop):0,s=QN(n.getComputedStyle(e).top);return Math.max(0,Math.ceil(a+s+e.offsetHeight+t-o))}function eP(e,t,n=8){let r=ZN(e),i=t.getBoundingClientRect().bottom+n-e.getBoundingClientRect().top;i<=0||(r?r.scrollTop-=i:e.ownerDocument.defaultView?.scrollBy(0,-i))}function tP(e,t){let n=zw(t);if(Bw(n))return{nodes:e,matches:0};let r=0,i=e=>e.flatMap(e=>{let t=Vw(e,n);t&&r++;let a=i(e.children);return t||a.length?[{...e,children:a}]:[]});return{nodes:i(e),matches:r}}function nP(e){return e.flatMap(e=>e.kind===`directive`?nP(e.children):[{...e,children:nP(e.children)}])}function rP(e){return(e.attributes?.length?e.attributes:e.directives??[e.name]).map(e=>`[${e}]`).join(` `)}var iP={hydrated:`Hydrated`,skipped:`Skipped`,mismatched:`Mismatch`,client:`Client`};function aP(e){return iP[e]}function oP(e,t,n,r=!1,i=0){let a=r?`${e}+`:`${e}`;if(n)return`${t} of ${r?`${e+i}+`:e+i}`;let o=i?` · ${i} directive ${i===1?`host`:`hosts`}`:``;return`${a} ${e===1&&!r?`instance`:`instances`}${o}`}function sP(e,t,n,r=!1,i=0){if(!n.trim())return``;if(!t)return`No components match.`;let a=e+i,o=r?`${a}+`:`${a}`,s=!r&&a===1;return`${t} of ${o} ${i?s?`row`:`rows`:s?`instance`:`instances`} match.`}function cP(e){let t=e?.components,n=e?.depth;return t&&n?`Showing the first ${t} component instances, and none nested more than ${n} elements deep. Others are not listed or searchable.`:t?`Showing the first ${t} component instances. Others are not listed or searchable.`:n?`Components nested more than ${n} elements deep are not listed or searchable.`:`The page has more components than the tree shows.`}function lP(e,t){let n=t?.detail?.id??null,r=t?.pageId??null;if(r!==e.pageId)return{pageId:r,selectedId:n,detailId:n,destroyed:null};let i=e.selectedId;return n&&n!==e.detailId&&n!==i&&(i=n),i&&t&&!t.truncated&&!uP(t.roots,i)?{pageId:r,selectedId:null,detailId:n,destroyed:i}:{pageId:r,selectedId:i,detailId:n,destroyed:null}}function uP(e,t){return e.some(e=>e.id===t||uP(e.children,t))}function dP(e,t,n){let r=e.indexOf(n);if(r<0)return null;for(let n=r+1;n<e.length;n++)if(t.has(e[n]))return e[n];for(let n=r-1;n>=0;n--)if(t.has(e[n]))return e[n];return null}var fP=class e{inputs={rpc:w(null),canShowInjector:w(!1),canShowSignals:w(!1),canShowPipes:w(!1)};rpc=X(()=>this.inputs.rpc());canShowInjector=X(()=>this.inputs.canShowInjector());canShowSignals=X(()=>this.inputs.canShowSignals());canShowPipes=X(()=>this.inputs.canShowPipes());staticReport=X(()=>cT(this.rpc()));filter=w(``);pages=w({});chosenPageId=w(null);selectedId=w(null);destroyed=w(null);announcement=w(``);pickMessage=w(``);focusId=w(null);collapsed=w(new Set);showDirectiveHosts=w(EN());routerPages=w([]);pageId=tT();angularPages=pD(()=>this.rpc());angularPage=X(()=>mD(this.angularPages(),this.page()?.pageId??this.pageId));hasControlFlow=X(()=>{let e=this.angularPage()?.version;return!e||Gw(e,`17.0`)});deferUnavailable=X(()=>this.hasControlFlow()&&Kw(this.angularPage(),`deferBlocks`));forUnavailable=X(()=>this.hasControlFlow()&&Kw(this.angularPage(),`forBlocks`));injector=b(Es);host=b(Rl);pagesKnown=w(!1);cleanups=[];selection={pageId:null,detailId:null};gone=!1;shownPageId=Q({source:()=>({pages:this.pages(),chosen:this.chosenPageId()}),computation:({pages:e,chosen:t},n)=>nT(e,{chosen:t,host:this.pageId,previous:n?.value??null})});page=X(()=>{let e=this.shownPageId();return e?this.pages()[e]??null:null});pageOptions=X(()=>Object.values(this.pages()).map(e=>({value:e.pageId,label:e.title||e.url||`Page ${e.pageId}`,hint:e.url})));live=X(()=>(this.page()?.roots.length??0)>0);native=X(()=>GN(this.page()));canEdit=X(()=>this.live()&&!this.native()&&!this.staticReport()&&OT(this.rpc(),`components`));cdPages=w({});cdPage=X(()=>{let e=this.page()?.pageId;return e?this.cdPages()[e]??null:null});cdHosts=X(()=>this.cdPage()?.hosts??{});leaksPages=w({});leaksPage=X(()=>{let e=this.page()?.pageId;return e?this.leaksPages()[e]??null:null});visibleRoots=X(()=>{let e=this.page()?.roots??[];return this.showDirectiveHosts()||!this.page()?.directiveHostCount?e:nP(e)});index=X(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.has(a.id)||(e.set(a.id,a),i&&t.set(a.id,i),n(a.children,a.id))};return n(this.visibleRoots(),null),{map:e,parents:t}});query=X(()=>this.filter().trim().toLowerCase());filtered=X(()=>tP(this.visibleRoots(),this.query()));shownDirectiveHosts=X(()=>this.showDirectiveHosts()?this.page()?.directiveHostCount??0:0);deferBlocks=X(()=>this.page()?.deferBlocks??[]);ownedDeferBlocks=X(()=>{let e=this.selectedId();return e?this.deferBlocks().filter(t=>t.owner?.id===e):[]});countLabel=X(()=>oP(this.page()?.count??0,this.filtered().matches,!!this.query(),!!this.page()?.truncated,this.shownDirectiveHosts()));truncationText=X(()=>cP(this.page()?.truncatedBy));rows=X(()=>{let e=[],t=this.collapsed(),n=!!this.query(),r=(i,a)=>{i.forEach((o,s)=>{let c=n||!t.has(o.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:c,posinset:s+1,setsize:i.length}),c&&r(o.children,a+1)})};return r(this.filtered().nodes,0),e});rowWindow=new XN({count:X(()=>this.rows().length),estimate:32,fixed:!0});shownRows=X(()=>{let{start:e,end:t}=this.rowWindow.range();return this.rows().slice(e,t).map((t,n)=>({row:t,index:e+n}))});tabStop=X(()=>{let e=this.rovingId(),t=this.shownRows();return t.some(({row:t})=>t.node.id===e)?e:t[0]?.row.node.id??null});selectedNode=X(()=>{let e=this.selectedId();return e?this.index().map.get(e)??null:null});selectedHost=X(()=>{let e=this.selectedNode();return e?.kind===`directive`?e:null});detail=X(()=>{let e=this.page()?.detail;return e&&e.id===this.selectedId()?e:null});rovingId=X(()=>{let e=this.rows(),t=new Set(e.map(e=>e.node.id)),n=this.focusId();if(n&&t.has(n))return n;let r=this.selectedId();return r&&t.has(r)?r:e[0]?.node.id??null});outlets=X(()=>{let e=this.page()?.pageId;return this.routerPages().find(t=>t.pageId===e)?.outlets??[]});routedById=X(()=>{let e=new Map,t=n=>{for(let r of n){if(r.activated&&r.devtoolsId){let t=e.get(r.devtoolsId)??[];t.push({route:r.route??``,outlet:r.outlet}),e.set(r.devtoolsId,t)}r.children&&t(r.children)}};return t(this.outlets()),e});connect(e){this.inputs=e}destroy(){this.gone=!0,this.highlight(null);for(let e of this.cleanups.splice(0))e()}async watch(e){for(let e of this.cleanups.splice(0))e();let t=e.scope(`pangular`);try{let e=await t.rpc.sharedState(`component-tree`);if(this.gone)return;let n=e=>{let t=e?.pages;this.applyPages(t&&typeof t==`object`?t:{}),e!==void 0&&this.pagesKnown.set(!0)};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.applyPages({}),this.pagesKnown.set(!0)}try{let e=await t.rpc.sharedState(`change-detection`);if(this.gone)return;let n=e=>{let t=e?.pages;this.cdPages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.cdPages.set({})}try{let e=await t.rpc.sharedState(`leaks`);if(this.gone)return;let n=e=>{let t=e?.pages;this.leaksPages.set(t&&typeof t==`object`?t:{})};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.leaksPages.set({})}try{let e=await t.rpc.sharedState(`router`);if(this.gone)return;let n=e=>{let t=e?.pages;this.routerPages.set(Array.isArray(t)?t:[])};n(e.value()),this.cleanups.push(e.on(`updated`,n))}catch{this.routerPages.set([])}}applyPages(e){let t=document.activeElement,n=t instanceof HTMLElement&&this.host.nativeElement.contains(t)?t.closest(`.row`)?.dataset.id??null:null,r=n?this.rows().map(e=>e.node.id):[],i=this.index().map;if(this.pages.set(e),this.syncSelection(i),!n)return;let a=new Set(this.rows().map(e=>e.node.id));if(a.has(n))return;let o=dP(r,a,n);o&&(this.focusId.set(o),Sd(()=>this.rowElement(o)?.focus(),{injector:this.injector}))}syncSelection(e=this.index().map){let t=this.page(),n=lP({...this.selection,selectedId:this.selectedId()},t?{pageId:t.pageId,roots:t.roots,detail:t.detail,truncated:t.truncated}:null),r=n.destroyed?e.get(n.destroyed)?.name:void 0;this.selection={pageId:n.pageId,detailId:n.detailId},n.selectedId!==this.selectedId()&&this.selectedId.set(n.selectedId),n.selectedId&&this.destroyed.set(null),n.destroyed&&(this.destroyed.set(r??`The component`),this.announcement.set(`The selected component was destroyed.`),this.sendSelection(null))}selectPage(e){e&&(this.chosenPageId.set(e),this.destroyed.set(null),this.syncSelection())}setFilter(e){this.filter.set(e);let{matches:t}=this.filtered();this.announcement.set(sP(this.page()?.count??0,t,e,!!this.page()?.truncated,this.shownDirectiveHosts()))}say(e){this.pickMessage.set(e),this.announce(e)}sendSelection(e){let t=this.rpc();t&&t.scope(`pangular`).rpc.call(`select-component`,{pageId:this.page()?.pageId,id:e,console:!0}).catch(()=>{})}rowElement(e){return this.host.nativeElement.querySelector(`.row[data-id="${CSS.escape(e)}"]`)}select(e){let t=this.selectedId()===e?null:e;this.selectedId.set(t),this.destroyed.set(null),this.focusId.set(e),!(t&&this.index().map.get(t)?.kind===`directive`)&&this.sendSelection(t)}ownerOf(e){let{map:t,parents:n}=this.index();for(let r of CN(n,e)){let e=t.get(r);if(e&&e.kind!==`directive`)return e}return null}toggleDirectiveHosts(){let e=!this.showDirectiveHosts();this.showDirectiveHosts.set(e);try{localStorage.setItem(TN,e?`shown`:`hidden`)}catch{}let t=this.selectedId();!e&&t&&!this.index().map.has(t)&&this.selectedId.set(null),this.announce(e?`Directive hosts are shown.`:`Directive hosts are hidden.`)}setHydrationOverlay(e){let t=this.rpc(),n=this.page()?.pageId;t&&n&&(t.scope(`pangular`).rpc.call(`request-hydration-overlay`,{pageId:n,on:e}).catch(()=>{}),this.announce(e?`Outlining hydration on the page.`:`Hydration outline removed.`))}reveal(e,t=!1){let{parents:n}=this.index();this.collapsed.update(t=>{let r=new Set(t);for(let t of CN(n,e))r.delete(t);return r}),this.rows().some(t=>t.node.id===e)||this.setFilter(``),this.selectedId()!==e&&this.select(e),t&&this.focusId.set(e);let r=this.rows().findIndex(t=>t.node.id===e);r>=0&&this.rowWindow.reveal(r),Sd(()=>{let n=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);this.clearToolbar(),n?.scrollIntoView({block:`nearest`}),n&&this.keepBelowToolbar(n),t&&n?.focus({preventScroll:!0})},{injector:this.injector})}clearToolbar(){let e=this.host.nativeElement.querySelector(`.toolbar`);e&&this.host.nativeElement.style.setProperty(`--ct-toolbar-clearance`,`${$N(e)}px`)}keepBelowToolbar(e){let t=this.host.nativeElement.querySelector(`.toolbar`);t&&eP(e,t)}toggle(e,t){t?.stopPropagation(),!this.query()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}expandAll(){this.query()||(this.collapsed.set(new Set),this.announce(`Expanded every component.`))}collapseAll(){if(this.query())return;let{map:e,parents:t}=this.index(),n=this.rovingId(),r=new Set;for(let t of e.values())t.children.length&&r.add(t.id);if(this.collapsed.set(r),n){let e=new Set(this.rows().map(e=>e.node.id)),r=n;for(;r&&!e.has(r);)r=t.get(r);r&&this.focusId.set(r)}this.announce(`Collapsed every component. Only the top level is shown.`)}announce(e){this.announcement.update(t=>t===e?`${e} `:e)}expandSiblings(e){if(this.query())return;let t=this.index().parents.get(e),n=t?this.index().map.get(t)?.children??[]:this.page()?.roots??[];this.collapsed.update(e=>{let t=new Set(e);for(let e of n)t.delete(e.id);return t})}highlight(e){this.requestHighlight(e?{id:e}:null)}highlightBlock(e){e.rootIds.length>1?this.requestHighlight({ids:e.rootIds}):this.highlight(e.rootIds[0]??e.owner?.id??null)}requestHighlight(e){let t=this.rpc();t&&t.scope(`pangular`).rpc.call(`request-page-highlight`,e&&{pageId:this.page()?.pageId,...e}).catch(()=>{})}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},pP=class e{tree=b(fP);loading=w(!1);error=w(!1);source=w([]);formOwners=w([]);openKey=w(null);guessTitle=`The page gave no exact location. This comes from the source scan, matched by class name.`;sourceByClass=X(()=>{let e=new Map;for(let t of this.source()){let n=xN(t.className);e.set(n,[...e.get(n)??[],t])}return e});filteredSource=X(()=>{let e=this.tree.query(),t=this.source();return e?t.filter(t=>t.selector.toLowerCase().includes(e)||t.className.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):t});sourceCounts=X(()=>{let e=this.source().filter(e=>e.kind===`component`).length;return{components:e,directives:this.source().length-e}});async refresh(){let e=this.tree.rpc();if(!e)return;this.loading.set(!0);let t=e.scope(`pangular`);try{this.source.set(await t.rpc.call(`get-components`)),this.error.set(!1)}catch{this.error.set(!0)}finally{this.loading.set(!1)}let n=await t.rpc.call(`forms-owners`).catch(()=>[]);this.formOwners.set(n??[])}formsIn(e){return this.formOwners().filter(t=>t.file===e)}sourceCandidates(e){let t=(this.sourceByClass().get(xN(e.name))??[]).filter(e=>e.kind===`component`),n=t.filter(t=>t.selector===e.tag);return n.length?n:t}sourceFor(e){let t=this.sourceCandidates(e),n=this.tree.detail()?.source;return n?t.find(e=>SN(e.file,n.file))??null:t.length===1?t[0]:null}directiveSources(e){return(this.sourceByClass().get(xN(e))??[]).filter(e=>e.kind===`directive`)}sourceKey(e){return`${e.file}#${e.className}`}sourceLabel(e){return e.selector?e.kind===`component`&&/^[a-z][\w-]*$/i.test(e.selector)?`<${e.selector}>`:e.selector:xN(e.className)}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},mP=class e{tree=b(fP);scan=b(pP);bridge=b(MN);actionMessage=Q({source:this.tree.selectedId,computation:()=>``});copyMessage=Q({source:this.tree.selectedId,computation:()=>``});flash=new BN;devtoolsActions=X(()=>this.bridge.available&&!!this.tree.page()&&!this.tree.native()&&!this.tree.staticReport());values=new UN;propFilter=w(``);propQuery=X(()=>this.propFilter().trim().toLowerCase());shownValues=X(()=>{let e=this.tree.detail();if(!e)return null;let t=this.propQuery(),n=e=>!t||e.name.toLowerCase().includes(t)||e.prop.toLowerCase().includes(t),r=(e,r)=>n(e)||iN([e.prop],e.value,e=>this.values.level(e,r),t,1).length>0,i=e.inputs.filter(e=>r(e)),a=e.outputs.filter(n),o=(e.properties??[]).filter(e=>r(e)),s=e.directives.map((e,t)=>({...e,index:t,inputs:e.inputs.filter(e=>r(e,t)),outputs:e.outputs.filter(n)})).filter(e=>!t||e.inputs.length||e.outputs.length);return{inputs:i,outputs:a,properties:o,directives:s,count:i.length+a.length+o.length+s.reduce((e,t)=>e+t.inputs.length+t.outputs.length,0)}});valueTotal=X(()=>{let e=this.tree.detail();return e?e.inputs.length+e.outputs.length+(e.properties?.length??0)+e.directives.reduce((e,t)=>e+t.inputs.length+t.outputs.length,0):0});propFilterStatus=X(()=>{if(!this.propQuery())return``;let e=this.shownValues()?.count??0;return e?`${e} of ${this.valueTotal()} values match.`:`No inputs, outputs or properties match.`});followValues(){let e=this.tree.detail(),t={rpc:this.tree.rpc(),pageId:this.tree.page()?.pageId??null,componentId:e?.id??null};Z(()=>this.values.follow(t,e?.expanded))}trackChanges(){let e=this.tree.detail(),t=e?`${this.tree.page()?.pageId??``}|${e.id}`:null,n=new Map;for(let t of e?.inputs??[])n.set(VN(`input`,t.name),t.value);for(let t of e?.properties??[])n.set(VN(`property`,t.name),t.value);e?.directives.forEach((e,t)=>{for(let r of e.inputs)n.set(VN(`directive`,r.name,t),r.value)}),Z(()=>this.flash.update(t,n))}clearChanges(){this.flash.clear()}flashed(e,t,n){return this.flash.changed().has(VN(e,t,n))}whereOf(e){let t=this.tree.detail()?.source;if(t)return t;let n=this.scan.sourceCandidates(e);return n.length===1?n[0]:null}async revealInElements(e){let t=this.tree.page()?.pageId;if(!t)return;this.actionMessage.set(``);let n=await this.bridge.reveal(t,e.id);this.tree.selectedId()===e.id&&this.actionMessage.set(n.ok?``:`Could not reveal it. The component must be rendered in the tab these DevTools inspect.`)}async openSource(e){let t=this.tree.page()?.pageId;if(!t)return;let n=this.whereOf(e);this.actionMessage.set(``);let r=await this.bridge.openSource(t,e.id,n);this.tree.selectedId()===e.id&&(r.ok||this.actionMessage.set(n?`Not found in Sources. Open ${n.file}:${n.line} in your editor.`:`Could not open the source. The component must be rendered in the tab these DevTools inspect.`))}async copyJson(e){await this.copy(e.id,FN(e),`Copied ${e.name} as JSON.`)}async copyHostPath(e){await this.copy(e.id,IN(e),e.selector?`Copied the host selector.`:`Copied the host path.`)}async copy(e,t,n){let r=n;try{await navigator.clipboard.writeText(t)}catch{r=`The clipboard is not available here.`}this.tree.selectedId()===e&&this.copyMessage.set(r)}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},hP=[`propFilterInput`],gP=e=>({kind:`component`,id:e}),_P=()=>[],vP=e=>({$implicit:e});function yP(e,t){return this.sourceKey(t)}var bP=(e,t)=>t.formId,xP=(e,t)=>t.outlet+t.route,SP=(e,t)=>t.name+t.index,CP=(e,t)=>t.name,wP=(e,t)=>t.id,TP=(e,t)=>t.token+e;function EP(e,t){if(e&1&&(P(0,`p`,6),I(1,`app-source-link`,10),F()),e&2){let e=t;E(),N(`file`,e.file)(`line`,e.line)}}function DP(e,t){if(e&1&&(P(0,`p`,11)(1,`span`,13),G(2,`Likely`),F(),P(3,`span`,14),G(4,`, matched by class name: `),F(),I(5,`app-source-link`,10),F()),e&2){U();let e=Y(0);N(`title`,U().guessTitle),E(5),N(`file`,e[0].file)(`line`,e[0].line)}}function OP(e,t){if(e&1&&(P(0,`li`),I(1,`app-source-link`,10),F()),e&2){let e=t.$implicit;E(),N(`file`,e.file)(`line`,e.line)}}function kP(e,t){if(e&1&&(P(0,`div`,12)(1,`p`,15)(2,`span`,13),G(3,`Not certain`),F(),G(4),F(),P(5,`ul`,16),j(6,OP,2,2,`li`,null,yP,!0),F()()),e&2){U();let e=Y(0),t=U(),n=Y(0);N(`title`,t.guessTitle),E(4),J(` `,e.length,` source files define `,t.bareName(n.name),`: `),E(2),M(e)}}function AP(e,t){if(e&1&&(G_(0),k(1,DP,6,3,`p`,11)(2,kP,8,3,`div`,12)),e&2){let e=U(),t=Y(0),n=K_(e.sourceCandidates(t));E(),A(n.length===1?1:n.length>1?2:-1)}}function jP(e,t){if(e&1){let e=z();P(0,`div`,17)(1,`button`,18),V(`click`,function(){x(e);let t=U(),n=Y(0);return S(t.revealInElements(n))}),G(2,`Reveal in Elements`),F(),P(3,`button`,18),V(`click`,function(){x(e);let t=U(),n=Y(0);return S(t.openSource(n))}),G(4,`Open source`),F()(),P(5,`p`,19),G(6),F()}if(e&2){let e=U();E(6),K(e.actionMessage())}}function MP(e,t){if(e&1){let e=z();P(0,`button`,21),V(`click`,function(){let t=x(e).$implicit;return S(U(3).showForm.emit(t.formId))}),G(1),F()}if(e&2){let e=t.$implicit;E(),q(` Show `,e.label,` in Forms `)}}function NP(e,t){if(e&1&&(P(0,`div`,7),j(1,MP,2,1,`button`,20,bP),F()),e&2){let e=U(),t=U();E(),M(t.formsIn(e.file))}}function PP(e,t){e&1&&k(0,NP,3,0,`div`,7),e&2&&A(U().formsIn(t.file).length?0:-1)}function FP(e,t){if(e&1){let e=z();P(0,`button`,18),V(`click`,function(){x(e);let t=U(2),n=Y(0);return S(t.openInjector(n))}),G(1,` Show in Injectors `),P(2,`span`,14),G(3),F()()}if(e&2){U(2);let e=Y(0);E(3),q(`: `,e.name)}}function IP(e,t){if(e&1){let e=z();P(0,`button`,18),V(`click`,function(){x(e);let t=U(2),n=Y(0);return S(t.openSignals(n))}),G(1,` Show in Signals `),P(2,`span`,14),G(3),F()()}if(e&2){U(2);let e=Y(0);E(3),q(`: `,e.name)}}function LP(e,t){if(e&1&&(P(0,`div`,7),k(1,FP,4,1,`button`,22),k(2,IP,4,1,`button`,22),F()),e&2){let e=U();E(),A(e.canShowInjector()?1:-1),E(),A(e.canShowSignals()?2:-1)}}function RP(e,t){if(e&1){let e=z();P(0,`div`,23)(1,`button`,18),V(`click`,function(){let t=x(e);return S(U().copyJson(t))}),G(2,`Copy as JSON`),F(),P(3,`button`,18),V(`click`,function(){let t=x(e);return S(U().copyHostPath(t))}),G(4,`Copy host path`),F()(),P(5,`p`,19),G(6),F()}if(e&2){let e=U();E(6),K(e.copyMessage())}}function zP(e,t){if(e&1&&I(0,`app-store-global`,8),e&2){let e=U(),t=Y(0);N(`rpc`,e.rpc())(`pageId`,e.page()?.pageId)(`target`,av(4,gP,t.id))(`label`,t.name)}}function BP(e,t){if(e&1&&(P(0,`dt`),G(1,`Routed`),F(),P(2,`dd`,25),G(3),F()),e&2){let e=t.$implicit;E(3),J(``,e.route||`/`,` in outlet `,e.outlet)}}function VP(e,t){if(e&1&&(P(0,`span`,28),G(1),F()),e&2){let e=U(2);E(),J(``,e.shownValues()?.count??0,` of `,e.valueTotal())}}function HP(e,t){if(e&1){let e=z();P(0,`div`,36)(1,`p`,37),G(2),F(),P(3,`p`,38),G(4,` The filter searches names, and the nested keys of values you opened. `),F(),P(5,`button`,18),V(`click`,function(){return x(e),S(U(3).clearPropFilter())}),G(6,`Clear filters`),F()()}if(e&2){let e=U(3);E(2),q(` No inputs, outputs or properties match “`,e.propFilter().trim(),`” `)}}function UP(e,t){if(e&1&&(P(0,`span`,43),G(1),F()),e&2){let e=U().$implicit;E(),q(`(`,e.prop,`)`)}}function WP(e,t){if(e&1&&(P(0,`li`,41)(1,`span`,42),G(2),k(3,UP,2,1,`span`,43),F(),I(4,`app-value-tree`,44),F()),e&2){let e=t.$implicit,n=U(4),r=U();W(`changed`,r.flashed(`input`,e.name)),E(2),q(` `,e.name,` `),E(),A(e.prop===e.name?-1:3),E(),N(`prop`,e)(`store`,r.values)(`query`,r.propFilter())(`componentId`,n.id)(`pageId`,r.page()?.pageId??null)(`rpc`,r.rpc())(`writes`,r.canEdit())}}function GP(e,t){if(e&1&&(P(0,`ul`,39),j(1,WP,5,11,`li`,40,CP),F()),e&2){let e=U(2);E(),M(e.inputs)}}function KP(e,t){e&1&&(P(0,`p`,33),G(1,`No inputs.`),F())}function qP(e,t){if(e&1&&(P(0,`div`,30)(1,`h3`),G(2,` Inputs `),P(3,`span`,31),G(4),F()(),k(5,GP,3,0,`ul`,39)(6,KP,2,0,`p`,33),F()),e&2){let e=U();E(4),K(e.inputs.length),E(),A(e.inputs.length?5:6)}}function JP(e,t){if(e&1&&(P(0,`li`,47)(1,`span`,25),G(2),F(),P(3,`span`,48),G(4),F()()),e&2){let e=t.$implicit;W(`on`,e.listened),E(2),K(e.name),E(2),K(e.listened?`listened`:`no listener`)}}function YP(e,t){if(e&1&&(P(0,`ul`,45),j(1,JP,5,4,`li`,46,CP),F()),e&2){let e=U(2);E(),M(e.outputs)}}function XP(e,t){e&1&&(P(0,`p`,33),G(1,`No outputs.`),F())}function ZP(e,t){if(e&1&&(P(0,`div`,30)(1,`h3`),G(2,` Outputs `),P(3,`span`,31),G(4),F()(),k(5,YP,3,0,`ul`,45)(6,XP,2,0,`p`,33),F()),e&2){let e=U();E(4),K(e.outputs.length),E(),A(e.outputs.length?5:6)}}function QP(e,t){if(e&1&&(P(0,`span`,49),G(1),F()),e&2){let e=U().$implicit;E(),K(e.kind)}}function $P(e,t){if(e&1){let e=z();P(0,`button`,51),V(`click`,function(){x(e);let t=U().$implicit,n=U(5),r=Y(0);return S(n.openSignals(r,t.prop))}),G(1,` Show in Signals`),P(2,`span`,14),G(3),F()()}if(e&2){let e=U().$implicit;E(3),q(`: `,e.name)}}function eF(e,t){if(e&1&&(P(0,`li`,41)(1,`span`,42),G(2),k(3,QP,2,1,`span`,49),k(4,$P,4,1,`button`,50),F(),I(5,`app-value-tree`,44),F()),e&2){let e=t.$implicit,n=U(4),r=U();W(`changed`,r.flashed(`property`,e.name)),E(2),q(` `,e.name,` `),E(),A(e.kind?3:-1),E(),A(e.kind===`signal`&&r.canShowSignals()&&!r.staticReport()?4:-1),E(),N(`prop`,e)(`store`,r.values)(`query`,r.propFilter())(`componentId`,n.id)(`pageId`,r.page()?.pageId??null)(`rpc`,r.rpc())(`writes`,r.canEdit())}}function tF(e,t){if(e&1&&(P(0,`ul`,39),j(1,eF,6,12,`li`,40,CP),F()),e&2){let e=U(2);E(),M(e.properties)}}function nF(e,t){e&1&&(P(0,`p`,33),G(1,`No other properties.`),F())}function rF(e,t){if(e&1&&(P(0,`div`,30)(1,`h3`),G(2,` Properties `),P(3,`span`,31),G(4),F()(),k(5,tF,3,0,`ul`,39)(6,nF,2,0,`p`,33),F()),e&2){let e=U();E(4),K(e.properties.length),E(),A(e.properties.length?5:6)}}function iF(e,t){if(e&1&&(P(0,`li`,52),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function aF(e,t){if(e&1&&(P(0,`div`,30)(1,`h3`),G(2,` DOM listeners `),P(3,`span`,31),G(4),F()(),P(5,`ul`,45),j(6,iF,2,1,`li`,52,dg),F()()),e&2){let e=U(2);E(4),K(e.listeners.length),E(2),M(e.listeners)}}function oF(e,t){if(e&1&&(P(0,`li`,47)(1,`span`,25),G(2),F(),P(3,`span`,48),G(4),F()()),e&2){let e=t.$implicit;E(2),K(e.state),E(2),K(e.triggers.join(`, `)||`no triggers`)}}function sF(e,t){if(e&1&&(P(0,`div`,30)(1,`h3`),G(2,` Defer blocks `),P(3,`span`,31),G(4),F()(),P(5,`ul`,45),j(6,oF,5,2,`li`,47,wP),F()()),e&2){let e=U(3);E(4),K(e.ownedDeferBlocks().length),E(2),M(e.ownedDeferBlocks())}}function cF(e,t){if(e&1&&(P(0,`li`,41)(1,`span`,42),G(2),F(),I(3,`app-value-tree`,55),F()),e&2){let e=t.$implicit,n=U(2).$implicit,r=U(2),i=U();W(`changed`,i.flashed(`directive`,e.name,n.index)),E(2),K(e.name),E(),N(`prop`,e)(`store`,i.values)(`query`,i.propFilter())(`directive`,n.index)(`componentId`,r.id)(`pageId`,i.page()?.pageId??null)(`rpc`,i.rpc())}}function lF(e,t){if(e&1&&(P(0,`ul`,39),j(1,cF,4,10,`li`,40,CP),F()),e&2){let e=U().$implicit;E(),M(e.inputs)}}function uF(e,t){if(e&1&&(P(0,`li`,47)(1,`span`,25),G(2),F(),P(3,`span`,48),G(4),F()()),e&2){let e=t.$implicit;W(`on`,e.listened),E(2),K(e.name),E(2),K(e.listened?`listened`:`no listener`)}}function dF(e,t){if(e&1&&(P(0,`ul`,45),j(1,uF,5,4,`li`,46,CP),F()),e&2){let e=U().$implicit;E(),M(e.outputs)}}function fF(e,t){e&1&&(P(0,`p`,33),G(1,`No inputs or outputs.`),F())}function pF(e,t){if(e&1&&(P(0,`div`,30)(1,`h3`)(2,`span`,25),G(3),F(),P(4,`span`,49),G(5,`directive on host`),F()(),P(6,`p`,53),Eg(7,54),F(),k(8,lF,3,0,`ul`,39),k(9,dF,3,0,`ul`,45),k(10,fF,2,0,`p`,33),F()),e&2){let e=t.$implicit;U(3);let n=Gg(18);E(3),K(e.name),E(4),N(`ngTemplateOutlet`,n)(`ngTemplateOutletContext`,av(6,vP,e.name)),E(),A(e.inputs.length?8:-1),E(),A(e.outputs.length?9:-1),E(),A(!e.inputs.length&&!e.outputs.length?10:-1)}}function mF(e,t){if(e&1&&(I(0,`app-redaction-count`,35),k(1,HP,7,1,`div`,36),k(2,qP,7,2,`div`,30),k(3,ZP,7,2,`div`,30),k(4,rF,7,2,`div`,30),k(5,aF,8,1,`div`,30),k(6,sF,8,1,`div`,30),j(7,pF,11,8,`div`,30,SP)),e&2){let e=t,n=U(),r=U();N(`value`,e),E(),A(r.propQuery()&&!e.count?1:-1),E(),A(!r.propQuery()||e.inputs.length?2:-1),E(),A(!r.propQuery()||e.outputs.length?3:-1),E(),A(!r.propQuery()||e.properties.length?4:-1),E(),A(!r.propQuery()&&n.listeners.length?5:-1),E(),A(!r.propQuery()&&r.ownedDeferBlocks().length?6:-1),E(),M(e.directives)}}function hF(e,t){if(e&1&&(P(0,`span`,49),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function gF(e,t){if(e&1&&(P(0,`span`,58),G(1,`from `),P(2,`span`,25),G(3),F()()),e&2){let e=U().$implicit;E(3),K(e.providedByName??`an injector`)}}function _F(e,t){e&1&&(P(0,`span`,59),G(1,`not provided`),F())}function vF(e,t){if(e&1&&(P(0,`li`,56)(1,`span`,57),G(2),F(),j(3,hF,2,1,`span`,49,dg),k(5,gF,4,1,`span`,58)(6,_F,2,0,`span`,59),F()),e&2){let e=t.$implicit;E(2),K(e.token),E(),M(e.flags),E(2),A(e.providedBy?5:6)}}function yF(e,t){if(e&1&&(P(0,`ul`,32),j(1,vF,7,2,`li`,56,TP),F()),e&2){let e=U();E(),M(e.dependencies)}}function bF(e,t){e&1&&(P(0,`p`,33),G(1,`Nothing is injected through the constructor or inject().`),F())}function xF(e,t){if(e&1){let e=z();P(0,`app-component-pipes`,60),V(`showPipe`,function(t){x(e);let n=U(2);return S(n.showPipe.emit({name:t,pageId:n.page()?.pageId}))}),F()}if(e&2){let e=U(2),t=Y(0);N(`rpc`,e.rpc())(`pageId`,e.page()?.pageId)(`component`,e.bareName(t.name))(`canShowPipes`,!e.staticReport())}}function SF(e,t){if(e&1){let e=z();P(0,`dl`,24)(1,`dt`),G(2,`Change detection`),F(),P(3,`dd`),G(4),F(),P(5,`dt`),G(6,`Encapsulation`),F(),P(7,`dd`),G(8),F(),P(9,`dt`),G(10,`Host path`),F(),P(11,`dd`,25),G(12),F(),j(13,BP,4,2,null,null,xP),F(),P(15,`div`,26)(16,`app-search-field`,27,1),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.propFilter,t)||(n.propFilter=t),S(t)}),F(),k(18,VP,2,2,`span`,28),P(19,`p`,29),G(20),F()(),k(21,mF,9,7),P(22,`div`,30)(23,`h3`),G(24,` Injected `),P(25,`span`,31),G(26),F()(),k(27,yF,3,0,`ul`,32)(28,bF,2,0,`p`,33),F(),k(29,xF,1,4,`app-component-pipes`,34)}if(e&2){let e,n=t,r=U(),i=Y(0);E(4),K(n.changeDetection??`Unknown`),E(4),K(n.encapsulation??`Unknown`),E(4),K(n.path),E(),M(r.routedById().get(i.id)??iv(10,_P)),E(3),V_(`value`,r.propFilter),E(2),A(r.propQuery()?18:-1),E(2),K(r.propFilterStatus()),E(),A((e=r.shownValues())?21:-1,e),E(5),K(n.dependencies.length),E(),A(n.dependencies.length?27:28),E(2),A(r.canShowPipes()?29:-1)}}function CF(e,t){e&1&&(P(0,`div`,9),I(1,`span`,61),P(2,`p`,38),G(3,`Reading live values from the page…`),F()())}function wF(e,t){if(e&1&&(P(0,`span`,62)(1,`span`,13),G(2,`Likely`),F(),P(3,`span`,14),G(4,`, matched by class name: `),F(),I(5,`app-source-link`,10),F()),e&2){U();let e=Y(0);N(`title`,U().guessTitle),E(5),N(`file`,e[0].file)(`line`,e[0].line)}}function TF(e,t){if(e&1&&(P(0,`span`,63),G(1),F()),e&2){let e=U().$implicit,t=Y(0),n=U();N(`title`,n.guessTitle),E(),J(``,t.length,` source files define `,n.bareName(e))}}function EF(e,t){if(e&1&&(G_(0),k(1,wF,6,3,`span`,62)(2,TF,2,3,`span`,63)),e&2){let e=t.$implicit,n=K_(U().directiveSources(e));E(),A(n.length===1?1:n.length>1?2:-1)}}var DF=class e{state=b(fP);scan=b(pP);details=b(mP);node=$.required();showForm=xv();showInjector=xv();showSignals=xv();showPipe=xv();rpc=this.state.rpc;page=this.state.page;detail=this.state.detail;native=this.state.native;staticReport=this.state.staticReport;canEdit=this.state.canEdit;canShowInjector=this.state.canShowInjector;canShowSignals=this.state.canShowSignals;canShowPipes=this.state.canShowPipes;routedById=this.state.routedById;ownedDeferBlocks=this.state.ownedDeferBlocks;guessTitle=this.scan.guessTitle;devtoolsActions=this.details.devtoolsActions;actionMessage=this.details.actionMessage;copyMessage=this.details.copyMessage;values=this.details.values;propFilter=this.details.propFilter;propQuery=this.details.propQuery;shownValues=this.details.shownValues;valueTotal=this.details.valueTotal;propFilterStatus=this.details.propFilterStatus;propFilterInput=Ov(`propFilterInput`);clearPropFilter(e){e&&this.propFilter()&&(e.stopPropagation(),e.preventDefault()),this.propFilter.set(``),this.propFilterInput()?.focus()}flashed(e,t,n){return this.details.flashed(e,t,n)}revealInElements(e){return this.details.revealInElements(e)}openSource(e){return this.details.openSource(e)}copyJson(e){return this.details.copyJson(e)}copyHostPath(e){return this.details.copyHostPath(e)}openSignals(e,t){let n=this.page()?.pageId;this.showSignals.emit({componentId:e.id,...n?{pageId:n}:{},...t?{key:t}:{}})}openInjector(e){let t=this.page()?.pageId;this.showInjector.emit(t?{componentId:e.id,pageId:t}:{componentId:e.id})}formsIn(e){return this.scan.formsIn(e)}sourceCandidates(e){return this.scan.sourceCandidates(e)}sourceFor(e){return this.scan.sourceFor(e)}directiveSources(e){return this.scan.directiveSources(e)}sourceKey(e){return this.scan.sourceKey(e)}bareName(e){return xN(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appComponentDetail`,``]],viewQuery:function(e,t){e&1&&Ug(t.propFilterInput,hP,5),e&2&&Wg()},inputs:{node:[1,`node`]},outputs:{showForm:`showForm`,showInjector:`showInjector`,showSignals:`showSignals`,showPipe:`showPipe`},decls:19,vars:10,consts:[[`directiveSource`,``],[`propFilterInput`,``],[1,`detail-head`],[1,`badge`],[`id`,`ct-detail-title`,1,`mono`],[1,`mono`,`muted`],[1,`where`,`mono`],[1,`actions`],[1,`console-global`,3,`rpc`,`pageId`,`target`,`label`],[`role`,`status`,1,`state`,`compact`],[3,`file`,`line`],[1,`where`,`mono`,`guess`,3,`title`],[1,`where`,`guess`,3,`title`],[1,`likely`],[1,`sr-only`],[1,`guess-text`],[1,`guess-list`,`mono`],[`role`,`group`,`aria-label`,`Chrome DevTools`,1,`actions`],[`type`,`button`,3,`click`],[`role`,`status`,1,`where`,`action-message`],[`type`,`button`,1,`show-form`],[`type`,`button`,1,`show-form`,3,`click`],[`type`,`button`],[`role`,`group`,`aria-label`,`Copy`,1,`actions`],[1,`facts`],[1,`mono`],[1,`prop-filter`],[`label`,`Filter values`,`placeholder`,`Filter inputs, outputs and properties by name`,1,`search`,3,`valueChange`,`value`],[1,`count`],[`role`,`status`,1,`sr-only`],[1,`block`],[1,`pill`],[1,`deps`],[1,`empty-line`],[3,`rpc`,`pageId`,`component`,`canShowPipes`],[3,`value`],[1,`state`,`compact`],[1,`state-title`],[1,`state-hint`],[1,`props`],[1,`prop`,3,`changed`],[1,`prop`],[1,`prop-name`,`mono`],[1,`muted`],[3,`prop`,`store`,`query`,`componentId`,`pageId`,`rpc`,`writes`],[1,`chips`],[1,`chip`,3,`on`],[1,`chip`],[1,`chip-note`],[1,`flag`],[`type`,`button`,1,`signal-link`],[`type`,`button`,1,`signal-link`,3,`click`],[1,`chip`,`mono`],[1,`directive-where`,`mono`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[3,`prop`,`store`,`query`,`directive`,`componentId`,`pageId`,`rpc`],[1,`dep`],[1,`token`,`mono`],[1,`from`],[1,`from`,`missing`],[3,`showPipe`,`rpc`,`pageId`,`component`,`canShowPipes`],[`aria-hidden`,`true`,1,`spinner`],[1,`directive-guess`,3,`title`],[1,`chip-note`,3,`title`]],template:function(e,t){if(e&1&&(G_(0),P(1,`header`,2)(2,`span`,3),G(3,`component`),F(),P(4,`h2`,4),G(5),F(),P(6,`span`,5),G(7),F(),k(8,EP,2,2,`p`,6)(9,AP,3,2),k(10,jP,7,1),k(11,PP,1,1),k(12,LP,3,2,`div`,7),k(13,RP,7,1),k(14,zP,1,6,`app-store-global`,8),F(),k(15,SF,30,11)(16,CF,4,0,`div`,9),Hh(17,EF,3,2,`ng-template`,null,0,mv)),e&2){let e,n,r,i,a=K_(t.node());E(5),K(a.name),E(2),q(`<`,a.tag,`>`),E(),A((e=t.detail()?.source)?8:9,e),E(2),A(t.devtoolsActions()?10:-1),E(),A((n=t.sourceFor(a))?11:-1,n),E(),A((t.canShowInjector()||t.canShowSignals())&&!t.staticReport()?12:-1),E(),A((r=t.detail())?13:-1,r),E(),A(!t.staticReport()&&!t.native()?14:-1),E(),A((i=t.detail())?15:16,i)}},dependencies:[uy,Xj,iD,aM,uM,bN,wM],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: 34px;
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[type=search][_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.count[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 14px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.tree-action[aria-pressed=true][_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+
+
+.tree-actions[_ngcontent-%COMP%] {
+  display: contents;
+}
+
+@media (max-width: 600px) {
+  .toolbar[_ngcontent-%COMP%] {
+    gap: 8px;
+  }
+  .search[_ngcontent-%COMP%] {
+    flex-basis: 100%;
+  }
+  .toolbar[_ngcontent-%COMP%]:has(.page-select)   .search[_ngcontent-%COMP%] {
+    flex-basis: 160px;
+  }
+  .page-select[_ngcontent-%COMP%] {
+    flex: 1 1 120px;
+  }
+  .count[_ngcontent-%COMP%] {
+    flex: 1 1 80px;
+    min-width: 0;
+    white-space: normal;
+    line-height: 1.3;
+  }
+  .tree-actions[_ngcontent-%COMP%] {
+    display: flex;
+    flex: none;
+    gap: 8px;
+    margin-left: auto;
+  }
+  .tree-action[_ngcontent-%COMP%], 
+   .pick[_ngcontent-%COMP%] {
+    flex: none;
+    width: var(--%NS%control-h);
+    padding: 0;
+  }
+  .tree-action[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%], 
+   .pick[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+.detail-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.where[_ngcontent-%COMP%] {
+  width: 100%;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.directive-where[_ngcontent-%COMP%] {
+  margin: -4px 0 8px;
+  font-size: 12px;
+}
+
+.directive-where[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.directive-guess[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--%NS%font-sans);
+}
+
+.likely[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 0 6px;
+  border: 1px solid;
+  border-radius: 99px;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+  font-family: var(--%NS%font-sans);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  line-height: 16px;
+  text-transform: uppercase;
+  vertical-align: 1px;
+}
+
+.guess-text[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.guess-list[_ngcontent-%COMP%] {
+  margin: 4px 0 0;
+  padding-left: 18px;
+}
+
+.badge[_ngcontent-%COMP%] {
+  padding: 2px 8px;
+  border-radius: 99px;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.show-form[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.show-form[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 8px 16px;
+  margin: 0;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  align-self: center;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.block[_ngcontent-%COMP%] {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.block[_ngcontent-%COMP%]:last-child {
+  border-bottom: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.props[_ngcontent-%COMP%], 
+.deps[_ngcontent-%COMP%], 
+.chips[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.prop[_ngcontent-%COMP%], 
+.dep[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+}
+
+.prop.changed[_ngcontent-%COMP%] {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -1px;
+  animation: _ngcontent-%COMP%_value-flash 1s var(--%NS%ease) forwards;
+}
+
+@keyframes _ngcontent-%COMP%_value-flash {
+  from {
+    outline-color: var(--%NS%accent);
+  }
+  to {
+    outline-color: transparent;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .prop.changed[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+.signal-link[_ngcontent-%COMP%] {
+  height: auto;
+  min-height: 0;
+  margin-left: 6px;
+  padding: 0 6px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.signal-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.prop-name[_ngcontent-%COMP%] {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+pre[_ngcontent-%COMP%] {
+  max-height: 200px;
+  margin: 0;
+  overflow: auto;
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.chip.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip-note[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.chip.on[_ngcontent-%COMP%]   .chip-note[_ngcontent-%COMP%] {
+  color: inherit;
+}
+
+.dep[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+}
+
+.token[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+}
+
+.from[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.from[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.from.missing[_ngcontent-%COMP%] {
+  color: var(--%NS%warn);
+}
+
+.empty-line[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 24px 12px;
+  border: 0;
+  background: none;
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0 auto;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%], 
+   .refresh.spinning[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}`]})},OF=()=>[],kF=e=>({$implicit:e}),AF=(e,t)=>t+e;function jF(e,t){if(e&1&&(P(0,`li`,8),G(1),Eg(2,11),F()),e&2){let e=t.$implicit;U();let n=Gg(20);E(),q(` `,e,` `),E(),N(`ngTemplateOutlet`,n)(`ngTemplateOutletContext`,av(3,kF,e))}}function MF(e,t){if(e&1){let e=z();P(0,`div`,10)(1,`button`,12),V(`click`,function(){let t=x(e);return S(U().reveal(t.id,!0))}),G(2),F()()}e&2&&(E(2),q(`Show `,t.name))}function NF(e,t){if(e&1&&(P(0,`span`,13)(1,`span`,15),G(2,`Likely`),F(),P(3,`span`,16),G(4,`, matched by class name: `),F(),I(5,`app-source-link`,17),F()),e&2){U();let e=Y(0);N(`title`,U().guessTitle),E(5),N(`file`,e[0].file)(`line`,e[0].line)}}function PF(e,t){if(e&1&&(P(0,`span`,14),G(1),F()),e&2){let e=U().$implicit,t=Y(0),n=U();N(`title`,n.guessTitle),E(),J(``,t.length,` source files define `,n.bareName(e))}}function FF(e,t){if(e&1&&(G_(0),k(1,NF,6,3,`span`,13)(2,PF,2,3,`span`,14)),e&2){let e=t.$implicit,n=K_(U().directiveSources(e));E(),A(n.length===1?1:n.length>1?2:-1)}}var IF=class e{state=b(fP);scan=b(pP);node=$.required();guessTitle=this.scan.guessTitle;hostLabel(e){return rP(e)}ownerOf(e){return this.state.ownerOf(e)}reveal(e,t=!1){this.state.reveal(e,t)}directiveSources(e){return this.scan.directiveSources(e)}bareName(e){return xN(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appHostDetail`,``]],inputs:{node:[1,`node`]},decls:21,vars:5,consts:[[`directiveSource`,``],[1,`detail-head`],[1,`badge`],[`id`,`ct-detail-title`,1,`mono`],[1,`mono`,`muted`],[1,`block`],[1,`pill`],[1,`chips`],[1,`chip`,`mono`],[1,`empty-line`],[1,`actions`,`owner-action`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[`type`,`button`,3,`click`],[1,`directive-guess`,3,`title`],[1,`chip-note`,3,`title`],[1,`likely`],[1,`sr-only`],[3,`file`,`line`]],template:function(e,t){if(e&1&&(P(0,`header`,1)(1,`span`,2),G(2,`directive host`),F(),P(3,`h2`,3),G(4),F(),P(5,`span`,4),G(6),F()(),P(7,`div`,5)(8,`h3`),G(9,` Directives `),P(10,`span`,6),G(11),F()(),P(12,`ul`,7),j(13,jF,3,5,`li`,8,AF),F()(),P(15,`div`,5)(16,`p`,9),G(17,` This element hosts directives but no component. Their inputs are bound in the template of the component that renders it. `),F(),k(18,MF,3,1,`div`,10),F(),Hh(19,FF,3,2,`ng-template`,null,0,mv)),e&2){let e,n=t.node();E(4),q(`<`,n.tag,`>`),E(2),K(t.hostLabel(n)),E(5),K(n.directives?.length??0),E(2),M(n.directives??iv(4,OF)),E(5),A((e=t.ownerOf(n.id))?18:-1,e)}},dependencies:[uy,aM],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 14px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.owner-action[_ngcontent-%COMP%] {
+  margin-top: 10px;
+}
+
+.detail-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.where[_ngcontent-%COMP%] {
+  width: 100%;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.directive-where[_ngcontent-%COMP%] {
+  margin: -4px 0 8px;
+  font-size: 12px;
+}
+
+.directive-where[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.directive-guess[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--%NS%font-sans);
+}
+
+.likely[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin-right: 6px;
+  padding: 0 6px;
+  border: 1px solid;
+  border-radius: 99px;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+  font-family: var(--%NS%font-sans);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  line-height: 16px;
+  text-transform: uppercase;
+  vertical-align: 1px;
+}
+
+.guess-text[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.guess-list[_ngcontent-%COMP%] {
+  margin: 4px 0 0;
+  padding-left: 18px;
+}
+
+.badge[_ngcontent-%COMP%] {
+  padding: 2px 8px;
+  border-radius: 99px;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.block[_ngcontent-%COMP%] {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.block[_ngcontent-%COMP%]:last-child {
+  border-bottom: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.props[_ngcontent-%COMP%], 
+.deps[_ngcontent-%COMP%], 
+.chips[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.prop[_ngcontent-%COMP%], 
+.dep[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+}
+
+.prop.changed[_ngcontent-%COMP%] {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -1px;
+  animation: _ngcontent-%COMP%_value-flash 1s var(--%NS%ease) forwards;
+}
+
+@keyframes _ngcontent-%COMP%_value-flash {
+  from {
+    outline-color: var(--%NS%accent);
+  }
+  to {
+    outline-color: transparent;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .prop.changed[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+.signal-link[_ngcontent-%COMP%] {
+  height: auto;
+  min-height: 0;
+  margin-left: 6px;
+  padding: 0 6px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.signal-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.prop-name[_ngcontent-%COMP%] {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+pre[_ngcontent-%COMP%] {
+  max-height: 200px;
+  margin: 0;
+  overflow: auto;
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.chip.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip-note[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.chip.on[_ngcontent-%COMP%]   .chip-note[_ngcontent-%COMP%] {
+  color: inherit;
+}
+
+.dep[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+}
+
+.token[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 16px;
+  text-transform: none;
+}
+
+.from[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.from[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.from.missing[_ngcontent-%COMP%] {
+  color: var(--%NS%warn);
+}
+
+.empty-line[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}`]})},LF=class e{tree=b(fP);picking=w(!1);pickPageId=null;pickSeq=0;pickLabel=X(()=>this.picking()?`Cancel pick`:this.tree.native()?`Pick component on device`:`Pick component on page`);followPage(e){this.picking()&&e!==this.pickPageId&&this.dropPick()}async pick(){let e=this.tree.rpc();if(!e||this.picking())return;let t=++this.pickSeq;this.pickPageId=this.tree.page()?.pageId??null,this.picking.set(!0),this.tree.say(this.tree.native()?`Tap a component on the device, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.`:`Click a component in the app, or use the arrow keys to move between components and Enter to pick one. Press Escape to cancel.`);let n=await e.scope(`pangular`).rpc.call(`request-component-pick`,{pageId:this.pickPageId??void 0}).catch(()=>({ok:!1,error:`Could not reach the devtools server.`}));if(t===this.pickSeq){if(this.picking.set(!1),!n?.ok||!n.id){this.tree.say(n?.error??`No component was picked.`);return}n.pageId&&n.pageId!==this.tree.page()?.pageId&&this.tree.selectPage(n.pageId),this.tree.say(`Picked ${n.name??`a component`}.`),this.tree.destroyed.set(null),this.tree.index().map.has(n.id)?this.tree.reveal(n.id):this.tree.selectedId.set(n.id)}}pickKey(e){let t=wN[e.key];if(!this.picking()||!t||e.altKey||e.ctrlKey||e.metaKey)return;e.preventDefault();let n=this.tree.rpc();if(!n)return;let r=this.pickSeq;n.scope(`pangular`).rpc.call(`request-component-pick-move`,{pageId:this.pickPageId??void 0,key:t}).then(e=>{let n=e;r===this.pickSeq&&this.picking()&&t!==`pick`&&this.tree.say(n?.moved?`${n.name??`Component`} <${n.tag??``}>. Press Enter to pick it.`:n?.error??`The page did not move.`)}).catch(()=>{})}cancelPick(){let e=this.tree.rpc();e&&this.picking()&&e.scope(`pangular`).rpc.call(`cancel-component-pick`,{pageId:this.pickPageId??void 0}).catch(()=>{})}dropPick(){this.cancelPick(),this.pickSeq++,this.picking.set(!1),this.tree.say(`Picking stopped because the page changed.`)}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})};function RF(e,t){return this.sourceKey(t)}var zF=(e,t)=>t.formId;function BF(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,U().bareName(e.className),` · `)}}function VF(e,t){if(e&1&&(P(0,`dt`),G(1,`Change detection`),F(),P(2,`dd`),G(3),F()),e&2){let e=U(2).$implicit;E(3),K(e.changeDetection??`Unknown`)}}function HF(e,t){if(e&1){let e=z();P(0,`button`,14),V(`click`,function(){let t=x(e).$implicit;return S(U(3).showForm.emit(t.formId))}),G(1),F()}if(e&2){let e=t.$implicit;E(),q(` Show `,e.label,` in Forms `)}}function UF(e,t){if(e&1&&(P(0,`div`,9)(1,`dl`,10)(2,`dt`),G(3,`Class`),F(),P(4,`dd`,11),G(5),F(),P(6,`dt`),G(7,`File`),F(),P(8,`dd`,11),I(9,`app-source-link`,12),F(),P(10,`dt`),G(11,`Standalone`),F(),P(12,`dd`),G(13),F(),k(14,VF,4,1),P(15,`dt`),G(16,`Inputs`),F(),P(17,`dd`,11),G(18),F(),P(19,`dt`),G(20,`Outputs`),F(),P(21,`dd`,11),G(22),F()(),j(23,HF,2,1,`button`,13,zF),F()),e&2){let e=U(),t=e.$implicit,n=e.$index,r=U();N(`id`,`ct-source-`+n),E(5),K(r.bareName(t.className)),E(4),N(`file`,t.file)(`line`,t.line),E(4),K(t.isStandalone?`Yes`:`No`),E(),A(t.kind===`component`?14:-1),E(4),K(t.inputs.join(`, `)||`None`),E(4),K(t.outputs.join(`, `)||`None`),E(),M(r.formsIn(t.file))}}function WF(e,t){if(e&1){let e=z();P(0,`li`,1)(1,`button`,2),V(`click`,function(){let t=x(e).$implicit,n=U();return S(n.openKey.set(n.openKey()===n.sourceKey(t)?null:n.sourceKey(t)))}),P(2,`span`,3),G(3),F(),P(4,`span`,4)(5,`span`,5),G(6),F(),P(7,`span`,6),k(8,BF,1,1),G(9),F()(),C(),P(10,`svg`,7),I(11,`path`,8),F()(),k(12,UF,25,8,`div`,9),F()}if(e&2){let e=t.$implicit,n=t.$index,r=U();W(`expanded`,r.openKey()===r.sourceKey(e)),E(),O(`aria-expanded`,r.openKey()===r.sourceKey(e))(`aria-controls`,r.openKey()===r.sourceKey(e)?`ct-source-`+n:null),E(),W(`directive`,e.kind===`directive`),E(),K(e.kind),E(3),K(r.sourceLabel(e)),E(2),A(e.selector?8:-1),E(),J(` `,e.file,`:`,e.line,` `),E(3),A(r.openKey()===r.sourceKey(e)?12:-1)}}var GF=class e{scan=b(pP);showForm=xv();filteredSource=this.scan.filteredSource;openKey=this.scan.openKey;formsIn(e){return this.scan.formsIn(e)}sourceKey(e){return this.scan.sourceKey(e)}sourceLabel(e){return this.scan.sourceLabel(e)}bareName(e){return xN(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`ul`,`appSourceList`,``]],outputs:{showForm:`showForm`},decls:2,vars:0,consts:[[1,`source-item`,3,`expanded`],[1,`source-item`],[`type`,`button`,1,`source-toggle`,3,`click`],[1,`kind-flag`],[1,`row-main`],[1,`selector`,`mono`],[1,`file`,`mono`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[1,`inline-detail`,3,`id`],[1,`facts`],[1,`mono`],[3,`file`,`line`],[`type`,`button`,1,`show-form`],[`type`,`button`,1,`show-form`,3,`click`]],template:function(e,t){e&1&&j(0,WF,13,12,`li`,0,RF,!0),e&2&&M(t.filteredSource())},dependencies:[aM],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 14px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.show-form[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.show-form[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 8px 16px;
+  margin: 0;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  align-self: center;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.source-item[_ngcontent-%COMP%] {
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  overflow: hidden;
+}
+
+.source-item.expanded[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.source-toggle[_ngcontent-%COMP%] {
+  justify-content: flex-start;
+  gap: 12px;
+  width: 100%;
+  height: auto;
+  min-height: 52px;
+  padding: 10px 16px;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  text-align: left;
+}
+
+.source-toggle[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.source-toggle[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.kind-flag[_ngcontent-%COMP%] {
+  flex: none;
+  padding: 1px 8px;
+  border-radius: 99px;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.kind-flag.directive[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.row-main[_ngcontent-%COMP%] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.selector[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  transition: transform 200ms var(--%NS%ease);
+}
+
+.expanded[_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+  stroke: var(--%NS%accent);
+}
+
+.inline-detail[_ngcontent-%COMP%] {
+  padding: 0 0 12px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+.inline-detail[_ngcontent-%COMP%]   .facts[_ngcontent-%COMP%] {
+  border-bottom: 0;
+}
+
+.inline-detail[_ngcontent-%COMP%]   .show-form[_ngcontent-%COMP%] {
+  margin: 0 16px;
+}`]})},KF=[`treeEl`],qF=()=>[],JF=(e,t)=>t.row.node.id,YF=(e,t)=>t.outlet+t.route;function XF(e,t){e&1&&(L(0,`p`,8),G(1,`The filter only searches the components the tree lists.`),R())}function ZF(e,t){e&1&&(L(0,`p`,8),G(1,`Directive hosts are hidden, so they are not searched.`),R())}function QF(e,t){if(e&1){let e=z();L(0,`div`,2)(1,`p`,7),G(2),R(),k(3,XF,2,0,`p`,8),k(4,ZF,2,0,`p`,8),L(5,`button`,9),H(`click`,function(){return x(e),S(U().clearFilter.emit())}),G(6,`Clear filters`),R()()}if(e&2){let e=U();E(2),q(`No components match “`,e.filter().trim(),`”`),E(),A(e.page().truncated?3:-1),E(),A(!e.showDirectiveHosts()&&e.page().directiveHostCount?4:-1)}}function $F(e,t){if(e&1&&(L(0,`p`,3),G(1),R()),e&2){let e=U();E(),q(` `,e.rows().length,` rows. Rows render as you scroll, so the browser's find only sees the ones near view; the filter above searches them all. `)}}function eI(e,t){if(e&1){let e=z();L(0,`span`,17),H(`click`,function(t){x(e),U();let n=Y(0);return S(U().toggle(n.node.id,t))}),C(),L(1,`svg`,18),Sg(2,`path`,19),R()()}e&2&&(U(),W(`open`,Y(0).expanded))}function tI(e,t){e&1&&Sg(0,`span`,12)}function nI(e,t){if(e&1&&(L(0,`span`,20),G(1),R(),L(2,`span`,21),G(3),R(),L(4,`span`,1),G(5,`directive host`),R()),e&2){U();let e=Y(0),t=U();E(),q(`<`,e.node.tag,`>`),E(),O(`title`,e.node.directives?.join(`, `)),E(),K(t.hostLabel(e.node))}}function rI(e,t){if(e&1&&(L(0,`span`,22),G(1),R(),L(2,`span`,23),G(3),R()),e&2){U();let e=Y(0);O(`title`,e.node.name),E(),K(e.node.name),E(),O(`title`,`<`+e.node.tag+`>`),E(),q(`<`,e.node.tag,`>`)}}function iI(e,t){if(e&1&&(L(0,`span`)(1,`span`,1),G(2,`Hydration: `),R(),G(3),R()),e&2){let e=t,n=U(2);p_(`hyd hyd-`+e),E(3),K(n.hydrationText(e))}}function aI(e,t){if(e&1&&(L(0,`span`,14),G(1),R()),e&2){let e=t.$implicit;E(),K(e.route||`/`)}}function oI(e,t){if(e&1&&(L(0,`span`,15),G(1),L(2,`span`,1),G(3),R()()),e&2){let e=t;E(),q(` `,e),E(2),q(` `,e===1?`check`:`checks`,` while recording`)}}function sI(e,t){if(e&1&&(L(0,`span`,16),G(1),L(2,`span`,1),G(3),R()()),e&2){U();let e=Y(0);O(`title`,e.node.directives.join(`, `)),E(),q(` +`,e.node.directives.length,` `),E(2),q(` `,e.node.directives.length===1?`directive`:`directives`,` `)}}function cI(e,t){if(e&1){let e=z();G_(0),L(1,`div`,10),H(`click`,function(){x(e);let t=Y(0);return S(U().select(t.node.id))})(`focus`,function(t){x(e);let n=Y(0),r=U();return r.focusId.set(n.node.id),r.highlight(n.node.id),S(r.showNameTip(t))})(`blur`,function(){x(e);let t=U();return t.highlight(null),S(t.nameTip.set(null))})(`keydown.escape`,function(){return x(e),S(U().nameTip.set(null))})(`mouseenter`,function(){x(e);let t=Y(0);return S(U().highlight(t.node.id))})(`mouseleave`,function(){return x(e),S(U().highlight(null))}),k(2,eI,3,2,`span`,11)(3,tI,1,0,`span`,12),k(4,nI,6,3)(5,rI,4,4),k(6,iI,4,3,`span`,13),j(7,aI,2,1,`span`,14,YF),k(9,oI,4,2,`span`,15),k(10,sI,4,3,`span`,16),R()}if(e&2){let e,n,r=t.$implicit,i=U(),a=K_(r.row);E(),f_(`--%NS%depth`,a.depth),W(`selected`,i.selectedId()===a.node.id)(`dir-host`,a.node.kind===`directive`),O(`aria-level`,a.depth+1)(`aria-setsize`,a.setsize)(`aria-posinset`,a.posinset)(`aria-expanded`,a.hasChildren?a.expanded:null)(`aria-selected`,i.selectedId()===a.node.id)(`tabindex`,i.tabStop()===a.node.id?0:-1)(`data-vindex`,r.index)(`data-id`,a.node.id),E(),A(a.hasChildren?2:3),E(2),A(a.node.kind===`directive`?4:5),E(2),A((e=a.node.hydration)?6:-1,e),E(),M(i.routedById().get(a.node.id)??iv(20,qF)),E(2),A((n=i.cdHosts()[a.node.id])?9:-1,n),E(),A(a.node.kind!==`directive`&&a.node.directives?.length?10:-1)}}function lI(e,t){if(e&1&&(L(0,`div`,24),G(1),R()),e&2){let e=t;f_(`top`,e.top,`px`),E(),q(` `,e.text,` `)}}var uI=class e{state=b(fP);clearFilter=xv();filter=this.state.filter;page=this.state.page;rows=this.state.rows;rowWindow=this.state.rowWindow;shownRows=this.state.shownRows;selectedId=this.state.selectedId;tabStop=this.state.tabStop;focusId=this.state.focusId;showDirectiveHosts=this.state.showDirectiveHosts;routedById=this.state.routedById;cdHosts=this.state.cdHosts;nameTip=w(null);treeEl=Ov(`treeEl`);constructor(){T(()=>{let e=this.treeEl()?.nativeElement;e&&this.rowWindow.attach(e)})}select(e){this.state.select(e)}toggle(e,t){this.state.toggle(e,t)}highlight(e){this.state.highlight(e)}hostLabel(e){return rP(e)}hydrationText(e){return aP(e)}showNameTip(e){let t=e.currentTarget,n=Array.from(t.querySelectorAll(`.name, .tag, .host-dirs`));if(!n.some(e=>e.scrollWidth>e.clientWidth+1)){this.nameTip.set(null);return}let r=n.map(e=>e.title||e.textContent?.trim()).join(` `);this.nameTip.set({text:r,top:t.offsetTop+t.offsetHeight+2})}onTreeKey(e){let t=this.state,n=t.rows();if(!n.length)return;let r=n.findIndex(e=>e.node.id===t.rovingId()),i=Math.max(r,0),a=n[i],o=-1;switch(e.key){case`ArrowDown`:o=Math.min(i+1,n.length-1);break;case`ArrowUp`:o=Math.max(i-1,0);break;case`Home`:o=0;break;case`End`:o=n.length-1;break;case`ArrowRight`:a.hasChildren&&!a.expanded?t.toggle(a.node.id):a.hasChildren&&(o=i+1);break;case`ArrowLeft`:if(a.hasChildren&&a.expanded&&!t.query())t.toggle(a.node.id);else{let e=t.index().parents.get(a.node.id);o=n.findIndex(t=>t.node.id===e)}break;case`Enter`:case` `:t.select(a.node.id);break;case`*`:t.expandSiblings(a.node.id);break;default:return}if(e.preventDefault(),o>=0){let e=n[o].node.id;t.focusId.set(e);let r=()=>{let n=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);t.clearToolbar(),n?.focus({preventScroll:!0}),n?.scrollIntoView({block:`nearest`}),n&&t.keepBelowToolbar(n)};this.rowWindow.rendered(o)?queueMicrotask(r):this.rowWindow.reveal(o,r)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appTreeRows`,``]],viewQuery:function(e,t){e&1&&Ug(t.treeEl,KF,5),e&2&&Wg()},outputs:{clearFilter:`clearFilter`},decls:9,vars:10,consts:[[`treeEl`,``],[1,`sr-only`],[1,`state`,`compact`,`tree`],[1,`window-note`],[`role`,`tree`,`aria-label`,`Component instances`,1,`tree`,3,`keydown`,`hidden`],[`role`,`treeitem`,1,`row`,3,`selected`,`dir-host`,`--%NS%depth`],[`aria-hidden`,`true`,1,`name-tip`,`mono`,3,`top`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`keydown.escape`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[3,`class`],[1,`routed`],[1,`checks`],[1,`dirs`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`m9 6 6 6-6 6`],[1,`tag`,`host-tag`,`mono`],[1,`host-dirs`,`mono`],[1,`name`,`mono`],[1,`tag`,`mono`],[`aria-hidden`,`true`,1,`name-tip`,`mono`]],template:function(e,t){if(e&1&&(L(0,`h2`,1),G(1,`Component tree`),R(),k(2,QF,7,3,`div`,2),k(3,$F,2,1,`p`,3),L(4,`div`,4,0),H(`keydown`,function(e){return t.onTreeKey(e)}),j(6,cI,11,21,`div`,5,JF),R(),k(8,lI,2,3,`div`,6)),e&2){let e;E(2),A(t.rows().length?-1:2),E(),A(t.rowWindow.enabled()?3:-1),E(),f_(`padding-top`,t.rowWindow.enabled()?6+t.rowWindow.padTop():null,`px`)(`padding-bottom`,t.rowWindow.enabled()?6+t.rowWindow.padBottom():null,`px`),W(`windowed`,t.rowWindow.enabled()),B(`hidden`,!t.rows().length),E(2),M(t.shownRows()),E(2),A((e=t.nameTip())?8:-1,e)}},styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 14px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.tree[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 6px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.window-note[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.tree.windowed[_ngcontent-%COMP%]   .row[_ngcontent-%COMP%] {
+  height: 32px;
+  overflow: hidden;
+}
+
+.row[_ngcontent-%COMP%] {
+  position: relative;
+  scroll-margin-top: var(--%NS%ct-toolbar-clearance, 72px);
+  scroll-margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px);
+  border-radius: var(--%NS%radius-sm);
+  cursor: pointer;
+  transition: background-color 120ms var(--%NS%ease);
+}
+
+.row[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 14px;
+  width: calc(var(--%NS%depth, 0) * 18px);
+  background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px);
+  pointer-events: none;
+}
+
+.row[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.row.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.twisty[_ngcontent-%COMP%], 
+.twisty-space[_ngcontent-%COMP%] {
+  flex: none;
+  width: 20px;
+  height: 20px;
+}
+
+.twisty[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+  color: var(--%NS%text-3);
+}
+
+.twisty[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+}
+
+.twisty[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.twisty.open[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+.name[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tag[_ngcontent-%COMP%] {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.routed[_ngcontent-%COMP%] {
+  flex: none;
+  max-width: 40%;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: 99px;
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  line-height: 18px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checks[_ngcontent-%COMP%] {
+  flex: none;
+  margin-left: auto;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text);
+  font-size: 11px;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+}
+
+.checks[_ngcontent-%COMP%]    + .dirs[_ngcontent-%COMP%] {
+  margin-left: 0;
+}
+
+.row.dir-host[_ngcontent-%COMP%]   .host-tag[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.host-dirs[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-style: italic;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row.dir-host[_ngcontent-%COMP%]   .twisty-space[_ngcontent-%COMP%], 
+.row.dir-host[_ngcontent-%COMP%]   .twisty[_ngcontent-%COMP%] {
+  border-left: 1px dashed var(--%NS%border-strong);
+}
+
+.hyd[_ngcontent-%COMP%] {
+  flex: none;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.hyd-skipped[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.hyd-mismatched[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.name-tip[_ngcontent-%COMP%] {
+  position: absolute;
+  z-index: 1;
+  left: 8px;
+  max-width: calc(100% - 16px);
+  padding: 4px 8px;
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  box-shadow: var(--%NS%shadow);
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  animation: enter 150ms var(--%NS%ease) both;
+}
+
+.dirs[_ngcontent-%COMP%] {
+  flex: none;
+  margin-left: auto;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 24px 12px;
+  border: 0;
+  background: none;
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0 auto;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%], 
+   .refresh.spinning[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}`]})},dI=[`filterInput`],fI=()=>[];function pI(e,t){if(e&1){let e=z();P(0,`span`,30),G(1,`Page`),F(),P(2,`app-select`,31),V(`valueChange`,function(t){return x(e),S(U(2).selectPage(t))}),F()}if(e&2){let e=U(2);E(2),N(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function mI(e,t){if(e&1){let e=z();P(0,`button`,32),V(`click`,function(){return x(e),S(U(2).toggleDirectiveHosts())}),C(),P(1,`svg`,9),I(2,`path`,33)(3,`path`,34),F(),ys(),P(4,`span`,12),G(5,`Directive hosts`),F()()}e&2&&O(`aria-pressed`,U(2).showDirectiveHosts())}function hI(e,t){if(e&1&&(P(0,`p`,19),G(1),F()),e&2){let e=U(2);E(),K(e.pickMessage())}}function gI(e,t){if(e&1&&(P(0,`p`,20),G(1),F()),e&2){let e=U(2);E(),K(e.truncationText())}}function _I(e,t){e&1&&I(0,`section`,23),e&2&&N(`node`,t)}function vI(e,t){if(e&1){let e=z();P(0,`section`,35),V(`showForm`,function(t){return x(e),S(U(2).showForm.emit(t))})(`showInjector`,function(t){return x(e),S(U(2).showInjector.emit(t))})(`showSignals`,function(t){return x(e),S(U(2).showSignals.emit(t))})(`showPipe`,function(t){return x(e),S(U(2).showPipe.emit(t))}),F()}e&2&&N(`node`,t)}function yI(e,t){e&1&&(P(0,`p`,37),G(1,`The selected component was destroyed`),F(),P(2,`p`,36)(3,`span`,38),G(4),F(),G(5,` is no longer on the page. Select another component to see its live values. `),F()),e&2&&(E(4),K(t))}function bI(e,t){e&1&&(P(0,`p`,36),G(1,` Select a component to see its live inputs, properties, outputs, change detection and injected services. `),F())}function xI(e,t){if(e&1&&(P(0,`div`,25),k(1,yI,6,1)(2,bI,2,0,`p`,36),F()),e&2){let e,t=U(2);E(),A((e=t.destroyed())?1:2,e)}}function SI(e,t){e&1&&I(0,`app-angular-unavailable`,27),e&2&&N(`page`,U(2).angularPage())}function CI(e,t){if(e&1){let e=z();P(0,`app-hydration-section`,39),V(`overlay`,function(t){return x(e),S(U(2).setHydrationOverlay(t))})(`showNode`,function(t){return x(e),S(U(2).revealNode(t))})(`highlight`,function(t){return x(e),S(U(2).highlight(t))}),F()}e&2&&N(`report`,U(2).page()?.hydration)}function wI(e,t){if(e&1){let e=z();P(0,`app-cd-recording`,40),V(`showComponent`,function(t){return x(e),S(U(2).showCdComponent(t))}),F(),P(1,`app-leaks-section`,41),V(`showComponent`,function(t){return x(e),S(U(2).showLeakComponent(t))})(`highlight`,function(t){return x(e),S(U(2).highlight(t))}),F()}if(e&2){let e=U(2);N(`page`,e.cdPage())(`pageId`,e.page().pageId)(`rpc`,e.rpc())(`native`,e.native()),E(),N(`report`,e.leaksPage())(`pageId`,e.page().pageId)(`rpc`,e.rpc())(`angular`,e.angularPage())}}function TI(e,t){if(e&1){let e=z();P(0,`p`,1),G(1,` Every component instance on the page, in the order Angular rendered them. Hover a row to highlight its host in the page, and select it to read its live inputs, properties, outputs and injected services. `),F(),P(2,`div`,2)(3,`app-search-field`,3,0),V(`valueChange`,function(t){return x(e),S(U().setFilter(t))}),F(),P(5,`span`,4),G(6,` Type plain text, a tag such as <button>, or a directive such as [routerLink]. Combine them to narrow the tree. `),F(),k(7,pI,3,2),P(8,`span`,5),G(9),F(),P(10,`div`,6),k(11,mI,6,1,`button`,7),P(12,`button`,8),V(`click`,function(){return x(e),S(U().expandAll())}),C(),P(13,`svg`,9),I(14,`path`,10)(15,`path`,11),F(),ys(),P(16,`span`,12),G(17,`Expand all`),F()(),P(18,`button`,13),V(`click`,function(){return x(e),S(U().collapseAll())}),C(),P(19,`svg`,9),I(20,`path`,14)(21,`path`,15),F(),ys(),P(22,`span`,12),G(23,`Collapse all`),F()(),P(24,`button`,16),V(`click`,function(){x(e);let t=U();return S(t.picking()?t.cancelPick():t.pick())}),C(),P(25,`svg`,9),I(26,`path`,17),F(),ys(),P(27,`span`,12),G(28),F()()()(),P(29,`p`,18),G(30),F(),k(31,hI,2,1,`p`,19),k(32,gI,2,1,`p`,20),P(33,`div`,21)(34,`div`,22),V(`clearFilter`,function(){return x(e),S(U().clearFilter())}),F(),k(35,_I,1,1,`section`,23)(36,vI,1,1,`section`,24)(37,xI,3,1,`div`,25),F(),P(38,`app-defer-blocks`,26),V(`showOwner`,function(t){return x(e),S(U().showOwner(t))})(`showNode`,function(t){return x(e),S(U().revealNode(t))})(`highlight`,function(t){x(e);let n=U();return S(t?n.highlightBlock(t):n.highlight(null))}),F(),k(39,SI,1,1,`app-angular-unavailable`,27),k(40,CI,1,1,`app-hydration-section`,28),P(41,`app-for-blocks`,29),V(`showOwner`,function(t){return x(e),S(U().showForOwner(t))})(`highlight`,function(t){return x(e),S(U().highlight(t))}),F(),k(42,wI,2,8)}if(e&2){let e,t=U();E(3),N(`value`,t.filter()),E(4),A(t.pageOptions().length>1?7:-1),E(2),K(t.countLabel()),E(2),A(t.page().directiveHostCount?11:-1),E(),N(`disabled`,!!t.filter().trim()),E(6),N(`disabled`,!!t.filter().trim()),E(6),W(`on`,t.picking()),O(`title`,t.pickLabel()),E(4),K(t.pickLabel()),E(2),K(t.announcement()),E(),A(t.pickMessage()?31:-1),E(),A(t.page().truncated?32:-1),E(3),A((e=t.selectedHost())?35:(e=t.selectedNode())?36:37,e),E(3),N(`blocks`,t.deferBlocks())(`truncated`,t.page()?.deferTruncated===!0)(`clockOffset`,t.page()?.clockOffset??0)(`mismatches`,t.page()?.hydration?.mismatches??iv(25,fI)),E(),A(t.deferUnavailable()?39:-1),E(),A(t.native()?-1:40),E(),N(`blocks`,t.page()?.forBlocks)(`truncated`,t.page()?.forBlocksTruncated===!0)(`supported`,t.page()?.deferBlocks&&!t.page()?.forBlocks||t.forUnavailable()?!1:null)(`angular`,t.angularPage()),E(),A(t.staticReport()?-1:42)}}function EI(e,t){e&1&&(P(0,`p`,20),G(1,` The page reported no component instances. The live tree needs a development build with Angular's debug API. Showing what the source declares instead. `),F())}function DI(e,t){e&1&&(P(0,`p`,20),G(1,`Loading the live component tree…`),F())}function OI(e,t){e&1&&(P(0,`p`,42),G(1,` No page is connected, so this lists what the source declares. Open the app in a browser with the devtools connected to see each rendered instance. `),F())}function kI(e,t){if(e&1&&G(0),e&2){let e=U(3);J(` `,e.filteredSource().length,` of `,e.source().length,` `)}}function AI(e,t){if(e&1&&G(0),e&2){let e=U(3);z_(` `,e.sourceCounts().components,` `,e.sourceCounts().components===1?`component`:`components`,` · `,e.sourceCounts().directives,` `,e.sourceCounts().directives===1?`directive`:`directives`,` `)}}function jI(e,t){if(e&1&&(P(0,`span`,44),k(1,kI,1,2)(2,AI,1,4),F()),e&2){let e=U(2);E(),A(e.filter().trim()?1:2)}}function MI(e,t){e&1&&(P(0,`div`,48),I(1,`span`,52),P(2,`p`,37),G(3,`Scanning components…`),F()())}function NI(e,t){e&1&&(G(0,` Run `),P(1,`code`),G(2,`pangular build`),F(),G(3,` again to rebuild the report. `))}function PI(e,t){e&1&&G(0,` Check that the dev server is running, then try again. `)}function FI(e,t){if(e&1){let e=z();P(0,`div`,49)(1,`p`,37),G(2,`Could not load components`),F(),P(3,`p`,36),k(4,NI,4,0)(5,PI,1,0),F(),P(6,`button`,53),V(`click`,function(){return x(e),S(U(2).refresh())}),G(7,`Retry`),F()()}if(e&2){let e=U(2);E(4),A(e.staticReport()?4:5)}}function II(e,t){e&1&&(P(0,`div`,50)(1,`p`,37),G(2,`No components found`),F(),P(3,`p`,36),G(4,`No @Component or @Directive was found in the source.`),F()())}function LI(e,t){if(e&1){let e=z();P(0,`div`,50)(1,`p`,37),G(2),F(),P(3,`button`,53),V(`click`,function(){return x(e),S(U(2).clearFilter())}),G(4,`Clear filters`),F()()}if(e&2){let e=U(2);E(2),q(`No components match “`,e.filter().trim(),`”`)}}function RI(e,t){if(e&1){let e=z();P(0,`ul`,54),V(`showForm`,function(t){return x(e),S(U(2).showForm.emit(t))}),F()}}function zI(e,t){if(e&1){let e=z();k(0,EI,2,0,`p`,20)(1,DI,2,0,`p`,20)(2,OI,2,0,`p`,42),P(3,`div`,2)(4,`app-search-field`,43,0),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.filter,t)||(n.filter=t),S(t)}),F(),k(6,jI,3,1,`span`,44),P(7,`button`,45),V(`click`,function(){return x(e),S(U().refresh())}),C(),P(8,`svg`,9),I(9,`path`,46)(10,`path`,47),F(),G(11,` Refresh `),F()(),k(12,MI,4,0,`div`,48)(13,FI,8,1,`div`,49)(14,II,5,0,`div`,50)(15,LI,5,1,`div`,50)(16,RI,1,0,`ul`,51)}if(e&2){let e=U();A(e.page()?0:e.pagesKnown()?2:1),E(4),V_(`value`,e.filter),E(2),A(e.source().length?6:-1),E(),W(`spinning`,e.loading()),O(`aria-busy`,e.loading()),E(5),A(e.loading()&&!e.source().length?12:e.error()&&!e.source().length?13:e.source().length?e.filteredSource().length?16:15:14)}}var BI=class e{rpc=$(null);focus=$(null);showForm=xv();focusHandled=xv();command=$(null);commandHandled=xv();canShowInjector=$(!1);canShowPipes=$(!1);showPipe=xv();showInjector=xv();canShowSignals=$(!1);showSignals=xv();state=b(fP);picker=b(LF);scan=b(pP);details=b(mP);destroyRef=b(Os);filterInput=Ov(`filterInput`);cdRecording=Ov(bA);staticReport=X(()=>this.state.staticReport());filter=this.state.filter;pages=this.state.pages;chosenPageId=this.state.chosenPageId;selectedId=this.state.selectedId;destroyed=this.state.destroyed;announcement=this.state.announcement;pickMessage=this.state.pickMessage;focusId=this.state.focusId;collapsed=this.state.collapsed;showDirectiveHosts=this.state.showDirectiveHosts;pagesKnown=this.state.pagesKnown;angularPage=this.state.angularPage;deferUnavailable=this.state.deferUnavailable;forUnavailable=this.state.forUnavailable;page=this.state.page;pageOptions=this.state.pageOptions;live=this.state.live;native=this.state.native;canEdit=this.state.canEdit;cdPage=this.state.cdPage;cdHosts=this.state.cdHosts;leaksPage=this.state.leaksPage;deferBlocks=this.state.deferBlocks;ownedDeferBlocks=this.state.ownedDeferBlocks;countLabel=this.state.countLabel;truncationText=this.state.truncationText;rows=this.state.rows;rowWindow=this.state.rowWindow;shownRows=this.state.shownRows;tabStop=this.state.tabStop;selectedNode=this.state.selectedNode;selectedHost=this.state.selectedHost;detail=this.state.detail;rovingId=this.state.rovingId;routedById=this.state.routedById;picking=this.picker.picking;pickLabel=this.picker.pickLabel;loading=this.scan.loading;error=this.scan.error;source=this.scan.source;formOwners=this.scan.formOwners;openKey=this.scan.openKey;filteredSource=this.scan.filteredSource;sourceCounts=this.scan.sourceCounts;values=this.details.values;propFilter=this.details.propFilter;propQuery=this.details.propQuery;shownValues=this.details.shownValues;valueTotal=this.details.valueTotal;propFilterStatus=this.details.propFilterStatus;actionMessage=this.details.actionMessage;copyMessage=this.details.copyMessage;devtoolsActions=this.details.devtoolsActions;constructor(){let e=this.state;e.connect({rpc:this.rpc,canShowInjector:this.canShowInjector,canShowSignals:this.canShowSignals,canShowPipes:this.canShowPipes}),T(()=>this.details.followValues()),T(()=>{let e=this.page()?.pageId??null;Z(()=>this.picker.followPage(e))}),T(()=>this.details.trackChanges()),this.destroyRef.onDestroy(()=>this.details.clearChanges()),T(()=>{let t=this.rpc();t&&(this.refresh(),e.watch(t))}),T(()=>{let t=this.focus();if(!t)return;let n=this.page()?.pageId??null;if(t.pageId&&n!==t.pageId&&this.pages()[t.pageId]){Z(()=>this.selectPage(t.pageId));return}this.live()&&Z(()=>{(!t.pageId||n===t.pageId)&&e.index().map.has(t.id)?this.reveal(t.id):this.announcement.set(`That component is no longer on the page.`),this.focusHandled.emit()})}),T(()=>{let t=this.command();if(!t)return;if(!this.live()){this.pagesKnown()&&Z(()=>this.commandHandled.emit());return}if(t.kind===`pick`){Z(()=>{this.picking()||this.pick(),this.commandHandled.emit()});return}let n=this.cdRecording();if(!n){(this.native()||this.staticReport())&&Z(()=>{e.say(`This page cannot record change detection.`),this.commandHandled.emit()});return}Z(()=>{t.kind===`cd-clear`?n.clear():t.kind===`cd-start`!==n.recording()&&n.toggle(),this.commandHandled.emit()})}),this.destroyRef.onDestroy(()=>e.destroy())}refresh(){return this.scan.refresh()}selectPage(e){this.state.selectPage(e)}setFilter(e){this.state.setFilter(e)}clearFilter(){this.live()?this.setFilter(``):this.filter.set(``),this.filterInput()?.focus()}pick(){return this.picker.pick()}pickKey(e){this.picker.pickKey(e)}cancelPick(){this.picker.cancelPick()}select(e){this.state.select(e)}toggleDirectiveHosts(){this.state.toggleDirectiveHosts()}setHydrationOverlay(e){this.state.setHydrationOverlay(e)}revealNode(e){this.state.index().map.has(e)&&this.reveal(e)}showLeakComponent(e){this.state.index().map.has(e)&&this.reveal(e,!0)}reveal(e,t=!1){this.state.reveal(e,t)}toggle(e,t){this.state.toggle(e,t)}expandAll(){this.state.expandAll()}collapseAll(){this.state.collapseAll()}highlight(e){this.state.highlight(e)}highlightBlock(e){this.state.highlightBlock(e)}showOwner(e){e.owner&&this.state.index().map.has(e.owner.id)&&this.reveal(e.owner.id)}showCdComponent(e){let t=this.cdHosts(),n=null;for(let r of this.state.index().map.values())r.name===e&&(!n||(t[r.id]??0)>(t[n.id]??0))&&(n=r);if(!n){this.state.say(`No ${e} is in the tree now.`);return}this.state.say(`Showing ${e} in the tree.`),this.reveal(n.id)}showForOwner(e){e.owner&&this.state.index().map.has(e.owner.id)&&this.reveal(e.owner.id)}ownerOf(e){return this.state.ownerOf(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-component-tree`]],viewQuery:function(e,t){e&1&&Ug(t.filterInput,dI,5)(t.cdRecording,bA,5),e&2&&Wg(2)},hostBindings:function(e,t){e&1&&V(`keydown.escape`,function(){return t.cancelPick()})(`keydown`,function(e){return t.pickKey(e)})},inputs:{rpc:[1,`rpc`],focus:[1,`focus`],command:[1,`command`],canShowInjector:[1,`canShowInjector`],canShowPipes:[1,`canShowPipes`],canShowSignals:[1,`canShowSignals`]},outputs:{showForm:`showForm`,focusHandled:`focusHandled`,commandHandled:`commandHandled`,showPipe:`showPipe`,showInjector:`showInjector`,showSignals:`showSignals`},features:[rv([fP,LF,pP,mP])],decls:2,vars:1,consts:[[`filterInput`,``],[1,`intro`],[1,`toolbar`],[`placeholder`,`Filter by text, <tag> or [directive]`,`describedBy`,`ct-filter-hint`,`saveKey`,`components`,1,`search`,3,`valueChange`,`value`],[`id`,`ct-filter-hint`,1,`sr-only`],[1,`count`],[1,`tree-actions`],[`type`,`button`,`title`,`Directive hosts`,1,`tree-action`],[`type`,`button`,`title`,`Expand all`,1,`tree-action`,3,`click`,`disabled`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`m7 15 5 5 5-5`],[`d`,`m7 9 5-5 5 5`],[1,`label`],[`type`,`button`,`title`,`Collapse all`,1,`tree-action`,3,`click`,`disabled`],[`d`,`m7 20 5-5 5 5`],[`d`,`m7 4 5 5 5-5`],[`type`,`button`,1,`pick`,3,`click`],[`d`,`M4 4l6.5 16 2.3-6.7L19.5 11z`],[`role`,`status`,1,`sr-only`],[1,`pick-message`],[`role`,`status`,1,`notice`],[1,`layout`],[`appTreeRows`,``,1,`tree-col`,3,`clearFilter`],[`appHostDetail`,``,`aria-labelledby`,`ct-detail-title`,1,`detail`,3,`node`],[`appComponentDetail`,``,`aria-labelledby`,`ct-detail-title`,1,`detail`,3,`node`],[1,`detail`,`placeholder`],[3,`showOwner`,`showNode`,`highlight`,`blocks`,`truncated`,`clockOffset`,`mismatches`],[`capability`,`deferBlocks`,`compact`,``,1,`defer`,3,`page`],[3,`report`],[3,`showOwner`,`highlight`,`blocks`,`truncated`,`supported`,`angular`],[`id`,`ct-page-label`,1,`sr-only`],[`labelledBy`,`ct-page-label`,1,`page-select`,3,`valueChange`,`options`,`value`],[`type`,`button`,`title`,`Directive hosts`,1,`tree-action`,3,`click`],[`d`,`M8 4H5v16h3`],[`d`,`M16 4h3v16h-3`],[`appComponentDetail`,``,`aria-labelledby`,`ct-detail-title`,1,`detail`,3,`showForm`,`showInjector`,`showSignals`,`showPipe`,`node`],[1,`state-hint`],[1,`state-title`],[1,`mono`],[3,`overlay`,`showNode`,`highlight`,`report`],[3,`showComponent`,`page`,`pageId`,`rpc`,`native`],[3,`showComponent`,`highlight`,`report`,`pageId`,`rpc`,`angular`],[1,`notice`],[`placeholder`,`Filter by selector, class or file`,`saveKey`,`components-source`,1,`search`,3,`valueChange`,`value`],[`aria-live`,`polite`,1,`count`],[`type`,`button`,1,`refresh`,3,`click`],[`d`,`M20 12a8 8 0 1 1-2.34-5.66`],[`d`,`M20 4v5h-5`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[1,`state`],[`appSourceList`,``,`role`,`list`,1,`source-list`],[`aria-hidden`,`true`,1,`spinner`],[`type`,`button`,3,`click`],[`appSourceList`,``,`role`,`list`,1,`source-list`,3,`showForm`]],template:function(e,t){e&1&&k(0,TI,43,26)(1,zI,17,7),e&2&&A(+!t.live())},dependencies:[iD,JE,bA,WA,tj,pj,Wj,RE,uI,IF,DF,GF],styles:[`[_nghost-%COMP%] {
+  display: block;
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.intro[_ngcontent-%COMP%] {
+  max-width: 720px;
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: 34px;
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[type=search][_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.count[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 14px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.refresh.spinning[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  animation: spin 0.8s linear infinite;
+}
+
+.page-select[_ngcontent-%COMP%] {
+  flex: 0 1 220px;
+  min-width: 0;
+}
+
+.tree-action[_ngcontent-%COMP%]:disabled, 
+.tree-action[_ngcontent-%COMP%]:disabled:hover {
+  background: var(--%NS%surface-2);
+  border-color: var(--%NS%border-strong);
+  opacity: 0.5;
+}
+
+.pick.on[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+.defer[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.pick-message[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+@media (min-width: 880px) {
+  .layout[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
+  }
+  .detail[_ngcontent-%COMP%] {
+    position: sticky;
+    top: 64px;
+    max-height: calc(100vh - 150px);
+    overflow: auto;
+  }
+}
+.tree-action[aria-pressed=true][_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+
+
+.tree-actions[_ngcontent-%COMP%] {
+  display: contents;
+}
+
+@media (max-width: 600px) {
+  .toolbar[_ngcontent-%COMP%] {
+    gap: 8px;
+  }
+  .search[_ngcontent-%COMP%] {
+    flex-basis: 100%;
+  }
+  .toolbar[_ngcontent-%COMP%]:has(.page-select)   .search[_ngcontent-%COMP%] {
+    flex-basis: 160px;
+  }
+  .page-select[_ngcontent-%COMP%] {
+    flex: 1 1 120px;
+  }
+  .count[_ngcontent-%COMP%] {
+    flex: 1 1 80px;
+    min-width: 0;
+    white-space: normal;
+    line-height: 1.3;
+  }
+  .tree-actions[_ngcontent-%COMP%] {
+    display: flex;
+    flex: none;
+    gap: 8px;
+    margin-left: auto;
+  }
+  .tree-action[_ngcontent-%COMP%], 
+   .pick[_ngcontent-%COMP%] {
+    flex: none;
+    width: var(--%NS%control-h);
+    padding: 0;
+  }
+  .tree-action[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%], 
+   .pick[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+.tree-col[_ngcontent-%COMP%] {
+  position: relative;
+  min-width: 0;
+}
+
+.detail[_ngcontent-%COMP%] {
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.detail.placeholder[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  text-align: center;
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 24px 12px;
+  border: 0;
+  background: none;
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0 auto;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%], 
+   .refresh.spinning[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+.source-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}`]})};function VI(e){return e.line?`${e.file}:${e.line}`:e.file}function HI(e,t){let n=t.filter(t=>t.fullPath===e.fullPath&&t.redirectTo!==void 0==(e.redirectTo!==void 0));return n.find(t=>!!e.component&&t.component===e.component)??n.find(t=>!t.component||!e.component)}function UI(e){return e?.apps&&e.apps.length>1?e.apps:[]}function WI(e,t){let n=UI(e).find(e=>e.id===t);return n?n.primary?{...e,appId:n.id}:{pageId:e.pageId,reportedAt:e.reportedAt,changedAt:e.changedAt,snapshot:n.snapshot??null,navigations:n.navigations??[],dropped:n.dropped,generation:n.generation,config:n.config,configTruncated:n.configTruncated,activeIds:n.activeIds,setup:n.setup,outlets:n.outlets,links:n.links,linksTruncated:n.linksTruncated,linksUnchecked:n.linksUnchecked,preloads:n.preloads,instrumented:e.instrumented,loops:n.loops,apps:e.apps,appId:n.id}:e}var GI=sT;function KI(e){return e.startsWith(`/`)&&!e.startsWith(`//`)&&!/^\/*[a-z][a-z0-9+.-]*:/i.test(e)&&!e.includes(`[redacted]`)&&e.length<=2e3}var qI=`Could not reach the page.`;async function JI(e,t,n,r){return await GI(e,`request-router-action`,{pageId:t,...r?{app:r}:{},request:n})??{error:`Could not reach the page.`}}function YI(e){return e===`succeeded`?`good`:e===`redirected`||e===`pending`||e===`skipped`?`warn`:e===`cancelled`||e===`failed`?`bad`:``}var XI=()=>[],ZI=(e,t)=>t[0],QI=(e,t)=>t.input;function $I(e,t){if(e&1&&(L(0,`p`,3),G(1,` The browser shows `),L(2,`code`),G(3),R(),G(4,`, not the router URL (skipLocationChange, browserUrl, a failed navigation or code that changed history). `),R()),e&2){let e=U();E(3),K(e.browserUrl)}}function eL(e,t){if(e&1&&(L(0,`p`,13),G(1),R()),e&2){let e=U(3);E(),K(e.navigationOff)}}function tL(e,t){if(e&1){let e=z();L(0,`div`,9),Sg(1,`span`,10),L(2,`span`,11),G(3,`Navigating to `),L(4,`code`),G(5),R(),G(6),R(),L(7,`button`,12),H(`click`,function(){return x(e),S(U(2).abort())}),G(8,` Abort `),R()(),k(9,eL,2,1,`p`,13)}if(e&2){let e=t,n=U(2);E(5),K(e.url),E(),q(` (#`,e.id,`)`),E(),B(`disabled`,!n.navigationAllowed()),O(`aria-describedby`,n.navigationAllowed()?null:`route-current-writes-off`),E(2),A(n.navigationAllowed()?-1:9)}}function nL(e,t){if(e&1&&(L(0,`p`,4),G(1),R()),e&2){let e=U(2);E(),K(e.message())}}function rL(e,t){if(e&1&&(L(0,`dt`),G(1,`Document title`),R(),L(2,`dd`),G(3),R()),e&2){let e=U();E(3),K(e.title)}}function iL(e,t){if(e&1&&(L(0,`dt`),G(1,`Query params`),R(),L(2,`dd`)(3,`code`),G(4),uv(5,`json`),R()()),e&2){let e=U();E(4),K(dv(5,1,e.queryParams))}}function aL(e,t){if(e&1&&(L(0,`dt`),G(1,`Fragment`),R(),L(2,`dd`)(3,`code`),G(4),R()()),e&2){let e=U();E(4),K(e.fragment)}}function oL(e,t){if(e&1&&(L(0,`span`,15),G(1),R()),e&2){let e=U().$implicit;E(),q(`, `,e.nesting)}}function sL(e,t){if(e&1&&(L(0,`span`,16),G(1),R()),e&2){let e=U().$implicit;E(),K(e.route.outlet)}}function cL(e,t){e&1&&(L(0,`span`,16),G(1,`lazy`),R())}function lL(e,t){if(e&1&&(L(0,`div`,17),G(1),R()),e&2){let e=U().$implicit;E(),J(` title `,e.route.title,``,e.route.ownTitle===!1?` (inherited)`:``,` `)}}function uL(e,t){if(e&1&&(L(0,`code`,18),G(1),R()),e&2){let e=U().$implicit;E(),K(e.route.component)}}function dL(e,t){e&1&&(L(0,`span`,21),G(1,`–`),R(),L(2,`span`,15),G(3,`none`),R())}function fL(e,t){e&1&&(L(0,`span`,16),G(1,`inherited`),R())}function pL(e,t){if(e&1&&(L(0,`div`,19)(1,`code`),G(2),uv(3,`json`),R(),k(4,fL,2,0,`span`,16),R()),e&2){let e=t.$implicit,n=U().$implicit;E(2),J(``,e[0],`: `,dv(3,3,e[1])),E(2),A(n.route.paramSources?.[e[0]]===`inherited`?4:-1)}}function mL(e,t){e&1&&(L(0,`span`,21),G(1,`–`),R(),L(2,`span`,15),G(3,`none`),R())}function hL(e,t){e&1&&(L(0,`span`,16),G(1),R()),e&2&&(E(),K(t))}function gL(e,t){if(e&1&&(L(0,`div`,20)(1,`code`),G(2),uv(3,`json`),R(),k(4,hL,2,1,`span`,16),R()),e&2){let e,n=t.$implicit,r=U().$implicit;E(2),J(``,n[0],`: `,dv(3,3,n[1])),E(2),A((e=r.route.dataSources?.[n[0]])?4:-1,e)}}function _L(e,t){e&1&&(L(0,`span`,21),G(1,`–`),R(),L(2,`span`,15),G(3,`none`),R())}function vL(e,t){if(e&1&&(L(0,`span`,16),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function yL(e,t){if(e&1&&(L(0,`span`,16),G(1),R()),e&2){let e=t.$implicit;E(),q(`resolve `,e)}}function bL(e,t){e&1&&(L(0,`span`,21),G(1,`–`),R(),L(2,`span`,15),G(3,`none`),R())}function xL(e,t){if(e&1&&(L(0,`tr`)(1,`td`,14),G(2),k(3,oL,2,1,`span`,15),k(4,sL,2,1,`span`,16),k(5,cL,2,0,`span`,16),k(6,lL,2,2,`div`,17),R(),L(7,`td`),k(8,uL,2,1,`code`,18)(9,dL,4,0),R(),L(10,`td`),j(11,pL,5,5,`div`,19,ZI,!1,mL,4,0),R(),L(14,`td`),j(15,gL,5,5,`div`,20,ZI,!1,_L,4,0),R(),L(18,`td`),j(19,vL,2,1,`span`,16,dg),j(21,yL,2,1,`span`,16,dg),k(23,bL,4,0),R()()),e&2){let e=t.$implicit,n=U(2);E(),f_(`padding-left`,14+e.depth*16,`px`),E(),q(` `,e.label,` `),E(),A(e.nesting?3:-1),E(),A(e.route.outlet===`primary`?-1:4),E(),A(e.route.lazy?5:-1),E(),A(e.route.title?6:-1),E(2),A(e.route.component?8:9),E(3),M(n.entries(e.route.params)),E(4),M(n.entries(e.route.data)),E(4),M(n.guardList(e.route)),E(2),M(e.route.resolvers??iv(11,XI)),E(2),A(!n.guardList(e.route).length&&!e.route.resolvers?.length?23:-1)}}function SL(e,t){if(e&1&&(L(0,`span`,15),G(1),R()),e&2){let e=U().$implicit;E(),q(``,e.nesting,`, `)}}function CL(e,t){if(e&1){let e=z();L(0,`button`,27),H(`click`,function(){x(e);let t=U(2).$implicit,n=U(3);return S(n.showComponent.emit({pageId:n.page().pageId,id:t.outlet.devtoolsId}))}),G(1,` Show in Components`),L(2,`span`,15),G(3),R()()}if(e&2){let e=U(2).$implicit;E(3),q(`: `,e.outlet.component??e.outlet.element??`routed component`)}}function wL(e,t){if(e&1&&(L(0,`code`),G(1),R(),G(2,` for `),L(3,`code`),G(4),R(),k(5,CL,4,1,`button`,26)),e&2){let e=U().$implicit,t=U(3);E(),K(e.outlet.component??`?`),E(3),K(e.outlet.route??`?`),E(),A(e.outlet.devtoolsId&&t.componentsOn()?5:-1)}}function TL(e,t){e&1&&(L(0,`span`,24),G(1,`not activated`),R())}function EL(e,t){e&1&&(L(0,`span`,16),G(1,`detached by reuse strategy`),R())}function DL(e,t){if(e&1&&(L(0,`span`,16),G(1),R()),e&2){let e=t.$implicit;E(),J(`input `,e.input,` ← `,e.source)}}function OL(e,t){if(e&1&&(L(0,`span`,25),G(1,`routerOutletData `),L(2,`code`),G(3),R()()),e&2){let e=U().$implicit;E(3),K(e.outlet.data)}}function kL(e,t){if(e&1&&(L(0,`li`)(1,`span`,16),G(2),R(),k(3,SL,2,1,`span`,15),k(4,wL,6,3)(5,TL,2,0,`span`,24),k(6,EL,2,0,`span`,16),j(7,DL,2,2,`span`,16,QI),k(9,OL,4,1,`span`,25),R()),e&2){let e=t.$implicit,n=U(3);f_(`padding-left`,10+e.depth*16,`px`),E(2),K(e.outlet.outlet),E(),A(e.nesting?3:-1),E(),A(e.outlet.activated?4:5),E(2),A(e.outlet.detached?6:-1),E(),M(n.boundInputs(e.outlet)),E(2),A(e.outlet.data===void 0?-1:9)}}function AL(e,t){if(e&1&&(L(0,`h3`),G(1,`Outlets`),R(),L(2,`ul`,22),j(3,kL,10,7,`li`,23,ug),R()),e&2){let e=U(2);E(3),M(e.outletRows())}}function jL(e,t){if(e&1&&(L(0,`p`,1)(1,`span`,2),G(2,`URL`),R(),L(3,`code`),G(4),R()(),k(5,$I,5,1,`p`,3),k(6,tL,10,5),k(7,nL,2,1,`p`,4),L(8,`dl`,5),k(9,rL,4,1),k(10,iL,6,3),k(11,aL,5,1),R(),L(12,`h3`),G(13,`Active routes`),R(),L(14,`div`,6)(15,`table`,7)(16,`thead`)(17,`tr`)(18,`th`,8),G(19,`Route`),R(),L(20,`th`,8),G(21,`Component`),R(),L(22,`th`,8),G(23,`Params`),R(),L(24,`th`,8),G(25,`Data`),R(),L(26,`th`,8),G(27,`Guards and resolvers`),R()()(),L(28,`tbody`),j(29,xL,24,12,`tr`,null,ug),R()()(),k(31,AL,5,0)),e&2){let e,n=t,r=U();E(4),K(n.url),E(),A(n.urlDrift&&n.browserUrl?5:-1),E(),A((e=n.pending)?6:-1,e),E(),A(r.message()?7:-1),E(2),A(n.title?9:-1),E(),A(r.hasKeys(n.queryParams)?10:-1),E(),A(n.fragment?11:-1),E(18),M(r.rows()),E(2),A(r.outletRows().length?31:-1)}}function ML(e,t){e&1&&(L(0,`div`,0)(1,`p`,28),G(2,`This page reports no Router.`),R(),L(3,`p`,24),G(4,` Add `),L(5,`code`),G(6,`provideRouter()`),R(),G(7,` to the app config and navigate once to see the active routes here. `),R()())}function NL(e){return e.component?`${e.component} in the ${e.outlet} outlet`:`the ${e.outlet} outlet`}var PL=class e{page=$.required();rpc=$(null);navigationAllowed=X(()=>OT(this.rpc(),`router`));navigationOff=Mw(`router`);componentsOn=X(()=>TT(this.rpc()).inspectors.components);showComponent=xv();pageId=X(()=>this.page().pageId);message=Q({source:this.pageId,computation:()=>``});rows=X(()=>{let e=[],t=(n,r,i)=>{let a=r===0&&!n.path?`(root)`:`/`+n.path,o=i===void 0?void 0:`level ${r+1}, child of ${i}`;e.push({route:n,depth:r,label:a,nesting:o});for(let e of n.children)t(e,r+1,a)},n=this.page().snapshot?.root;return n&&t(n,0),e});outletRows=X(()=>{let e=[],t=(n,r,i)=>{for(let a of n){let n=i&&`level ${r+1}, inside ${NL(i)}`;e.push({outlet:a,depth:r,nesting:n}),a.children&&t(a.children,r+1,a)}};return t(this.page().outlets??[],0),e});hasKeys(e){return Object.keys(e).length>0}entries(e){return Object.entries(e)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>(t??[]).map(t=>`${e} ${t}`))}boundInputs(e){return(e.inputs??[]).filter(e=>e.source!==`unset`)}async abort(){let e=this.pageId(),t=await JI(this.rpc(),e,{action:`abort`},this.page().appId);e===this.pageId()&&this.message.set(t.error?String(t.error):`Aborted navigation #${t.aborted}.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-current`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},outputs:{showComponent:`showComponent`},decls:2,vars:1,consts:[[1,`empty`],[1,`url`],[1,`url-label`],[`role`,`note`,1,`note`],[`role`,`status`,1,`muted`],[1,`facts`],[`role`,`region`,`aria-label`,`Active routes`,`tabindex`,`0`,1,`table-scroll`],[1,`active-routes`],[`scope`,`col`],[`role`,`status`,1,`pending`],[`aria-hidden`,`true`,1,`pulse`],[1,`pending-text`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`route-current-writes-off`,1,`muted`],[1,`path`],[1,`visually-hidden`],[1,`tag`],[1,`sub`],[1,`component`],[1,`entry`],[1,`entry`,`data`],[`aria-hidden`,`true`,1,`nil`],[1,`outlets`],[3,`padding-left`],[1,`muted`],[1,`outlet-data`],[`type`,`button`,1,`small`,`show-component`],[`type`,`button`,1,`small`,`show-component`,3,`click`],[1,`empty-title`]],template:function(e,t){if(e&1&&k(0,jL,32,8)(1,ML,8,0,`div`,0),e&2){let e;A((e=t.page().snapshot)?0:1,e)}},dependencies:[fy],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.url[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  min-width: 0;
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+}
+
+.url-label[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.url[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%accent);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.pending[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  padding: 6px 6px 6px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%warn-text);
+  font-size: 13px;
+}
+
+.pending-text[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.pending[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.pulse[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 99px;
+  background: var(--%NS%warn);
+  animation: _ngcontent-%COMP%_pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes _ngcontent-%COMP%_pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pulse[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+.sub[_ngcontent-%COMP%] {
+  margin-top: 4px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-sans);
+  font-size: 12px;
+  white-space: normal;
+}
+
+.component[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  white-space: nowrap;
+}
+
+
+
+.active-routes[_ngcontent-%COMP%] {
+  min-width: 760px;
+}
+
+.active-routes[_ngcontent-%COMP%]   .data[_ngcontent-%COMP%] {
+  min-width: 220px;
+}
+
+.entry[_ngcontent-%COMP%]    + .entry[_ngcontent-%COMP%] {
+  margin-top: 2px;
+}
+
+.data[_ngcontent-%COMP%] {
+  max-width: 360px;
+}
+
+.outlets[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 13px;
+  list-style: none;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.outlets[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  padding-top: 6px;
+  padding-right: 10px;
+  padding-bottom: 6px;
+  border-radius: var(--%NS%radius-sm);
+  line-height: 1.8;
+  overflow-wrap: anywhere;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.outlets[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.show-component[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+.outlet-data[_ngcontent-%COMP%] {
+  display: block;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}`]})},FL=(e,t)=>t.title,IL=(e,t)=>t.field;function LL(e,t){e&1&&(P(0,`div`,1)(1,`p`,2),G(2,`Two navigations are needed to compare.`),F(),P(3,`p`,3),G(4,`Navigate in the app, then come back to this view.`),F()())}function RL(e,t){if(e&1&&(P(0,`p`,10),G(1),F()),e&2){let e=U();E(),K(e.error)}}function zL(e,t){if(e&1&&(P(0,`p`,10),G(1),F()),e&2){let e=U(2);E(),J(`Nothing recorded differs between #`,e.a,` and #`,e.b,`.`)}}function BL(e,t){if(e&1&&(P(0,`code`),G(1),F()),e&2){let e=U().$implicit;E(),K(e.before)}}function VL(e,t){e&1&&(P(0,`span`,16),G(1,`none`),F())}function HL(e,t){if(e&1&&(P(0,`code`),G(1),F()),e&2){let e=U().$implicit;E(),K(e.after)}}function UL(e,t){e&1&&(P(0,`span`,16),G(1,`none`),F())}function WL(e,t){if(e&1&&(P(0,`tr`)(1,`th`,15),G(2),F(),P(3,`td`),k(4,BL,2,1,`code`)(5,VL,2,0,`span`,16),F(),P(6,`td`),k(7,HL,2,1,`code`)(8,UL,2,0,`span`,16),F()()),e&2){let e=t.$implicit;E(2),K(e.field),E(2),A(e.before===void 0?5:4),E(3),A(e.after===void 0?8:7)}}function GL(e,t){if(e&1&&(P(0,`div`,11)(1,`h3`,12),G(2),F(),P(3,`div`,13)(4,`table`)(5,`thead`)(6,`tr`)(7,`th`,14),G(8,`Field`),F(),P(9,`th`,14),G(10),F(),P(11,`th`,14),G(12),F()()(),P(13,`tbody`),j(14,WL,9,3,`tr`,null,IL),F()()()()),e&2){let e=t.$implicit,n=t.$index,r=U(2);E(),N(`id`,`route-diff-`+n),E(),K(e.title),E(),O(`aria-label`,e.title+` changes`),E(7),q(`#`,r.a),E(2),q(`#`,r.b),E(2),M(e.changes)}}function KL(e,t){if(e&1&&(P(0,`p`,3),G(1),F()),e&2){let e=U(2);E(),q(`Same in both: `,e.same.join(`, `),`.`)}}function qL(e,t){if(e&1&&(P(0,`p`,3),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function JL(e,t){if(e&1&&(k(0,zL,2,2,`p`,10),j(1,GL,16,5,`div`,11,FL),k(3,KL,2,1,`p`,3),j(4,qL,2,1,`p`,3,dg)),e&2){let e=U();A(e.sections.length?-1:0),E(),M(e.sections),E(2),A(e.same.length?3:-1),E(),M(e.notes)}}function YL(e,t){e&1&&k(0,RL,2,1,`p`,10)(1,JL,6,2),e&2&&A(`error`in t?0:1)}function XL(e,t){if(e&1){let e=z();P(0,`div`,4)(1,`span`,5),G(2,`Earlier`),F(),P(3,`app-select`,6),V(`valueChange`,function(t){return x(e),S(U().a.set(t))}),F(),P(4,`span`,7),G(5,`Later`),F(),P(6,`app-select`,8),V(`valueChange`,function(t){return x(e),S(U().b.set(t))}),F()(),P(7,`p`,9),G(8),F(),k(9,YL,2,1)}if(e&2){let e,t=U();E(3),N(`options`,t.options())(`value`,t.a()),E(3),N(`options`,t.options())(`value`,t.b()),E(2),K(t.announcement()),E(),A((e=t.result())?9:-1,e)}}function ZL(e){let t=e.filter(e=>!e.probe&&e.outcome!==`pending`),n=t[t.length-1],r=t[t.length-2];return{a:r?String(r.id):null,b:n?String(n.id):null}}var QL=class e{page=$.required();rpc=$(null);start=$(null);pageId=X(()=>this.page().pageId);options=X(()=>[...this.page().navigations].filter(e=>!e.probe).reverse().map(e=>({value:String(e.id),label:`#${e.id} ${e.finalUrl??e.url}`,hint:e.outcome})));b=Q({source:()=>({page:this.pageId(),start:this.start()}),computation:({start:e})=>e===null?ZL(this.page().navigations).b:String(e)});a=Q({source:()=>({page:this.pageId(),b:this.b()}),computation:({b:e},t)=>{let n=this.page().navigations.filter(e=>!e.probe);if(t?.value&&t.value!==e&&t.source.page===this.pageId())return t.value;let r=n.findIndex(t=>String(t.id)===e),i=r>0?n[r-1]:void 0;return i?String(i.id):null}});version=X(()=>this.page().navigations.map(e=>`${e.id}:${e.outcome}`).join(`,`));result=w(null);announcement=w(``);seq=0;constructor(){T(()=>{let e=this.a(),t=this.b(),n=this.pageId();this.version(),this.compare(n,e,t)})}async compare(e,t,n){let r=++this.seq;if(t===null||n===null){this.result.set(null);return}let i=await GI(this.rpc(),`router-diff`,{pageId:e,app:this.page().appId,a:Number(t),b:Number(n)});r===this.seq&&(this.result.set(i??{error:`Could not reach the page.`}),this.announcement.set(!i||`error`in i?i?.error??`Could not reach the page.`:`${i.sections.length} of ${i.sections.length+i.same.length} parts differ between #${i.a} and #${i.b}.`))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-diff`]],inputs:{page:[1,`page`],rpc:[1,`rpc`],start:[1,`start`]},decls:4,vars:1,consts:[[1,`muted`,`intro`],[1,`empty`],[1,`empty-title`],[1,`muted`],[1,`pick`],[`id`,`route-diff-a-label`,1,`pick-label`],[`labelledBy`,`route-diff-a-label`,3,`valueChange`,`options`,`value`],[`id`,`route-diff-b-label`,1,`pick-label`],[`labelledBy`,`route-diff-b-label`,3,`valueChange`,`options`,`value`],[`role`,`status`,1,`visually-hidden`],[1,`message`],[1,`diff`],[3,`id`],[`role`,`region`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[`scope`,`row`,1,`field-name`],[1,`nil`]],template:function(e,t){e&1&&(P(0,`p`,0),G(1,` Pick two recorded navigations to see which params, data, guards, resolvers, outlets and components changed between them. `),F(),k(2,LL,5,0,`div`,1)(3,XL,10,6)),e&2&&(E(2),A(t.options().length<2?2:3))},dependencies:[JE],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.intro[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.pick[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
+  gap: 8px 12px;
+  align-items: center;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.pick-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.message[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.diff[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+}
+
+.field-name[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+
+td[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 560px) {
+  .pick[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}`]})},$L=[`*`,[[``,`detail`,``]],[[``,`actions`,``]]],eR=[`*`,`[detail]`,`[actions]`];function tR(e,t){e&1&&Sg(0,`span`,0)}function nR(e,t){if(e&1){let e=z();L(0,`button`,5),H(`click`,function(){return x(e),S(U(2).onRetry())}),G(1),R()}if(e&2){let e=U(2);O(`aria-disabled`,e.retrying()||null),E(),q(` `,e.retrying()?`Retrying…`:e.retryLabel(),` `)}}function rR(e,t){if(e&1){let e=z();L(0,`button`,5),H(`click`,function(){return x(e),S(U(2).clear.emit())}),G(1,`Clear filters`),R()}}function iR(e,t){if(e&1&&(L(0,`div`,3),k(1,nR,2,2,`button`,4)(2,rR,2,0,`button`,4),Vg(3,2),R()),e&2){let e=U();E(),A(e.kind()===`error`?1:e.kind()===`no-match`?2:-1)}}var aR=class e{kind=$.required();retryLabel=$(`Retry`);retrying=$(!1);compact=$(!1);hasActions=$(!1);retry=xv();clear=xv();role=X(()=>{switch(this.kind()){case`error`:return`alert`;case`no-match`:return null;default:return`status`}});onRetry(){this.retrying()||this.retry.emit()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-state`]],hostVars:4,hostBindings:function(e,t){e&2&&(O(`role`,t.role())(`data-kind`,t.kind()),W(`compact`,t.compact()))},inputs:{kind:[1,`kind`],retryLabel:[1,`retryLabel`],retrying:[1,`retrying`],compact:[1,`compact`],hasActions:[1,`hasActions`]},outputs:{retry:`retry`,clear:`clear`},ngContentSelectors:eR,decls:6,vars:2,consts:[[`aria-hidden`,`true`,1,`spinner`],[1,`body`],[1,`message`],[1,`actions`],[`type`,`button`,1,`action`],[`type`,`button`,1,`action`,3,`click`]],template:function(e,t){e&1&&(Bg($L),k(0,tR,1,0,`span`,0),L(1,`div`,1)(2,`p`,2),Vg(3),R(),Vg(4,1),k(5,iR,4,1,`div`,3),R()),e&2&&(A(t.kind()===`loading`?0:-1),E(5),A(t.kind()===`error`||t.kind()===`no-match`||t.hasActions()?5:-1))},styles:[`app-state {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  margin: 0 0 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+  animation: enter 0.2s var(--%NS%ease) both;
+}
+
+app-state.compact {
+  padding: 8px 12px;
+}
+
+app-state[data-kind=error] {
+  box-shadow: inset 3px 0 0 var(--%NS%danger);
+}
+
+app-state > .body {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+app-state .message {
+  margin: 0;
+  color: var(--%NS%text);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+app-state[data-kind=loading] .message {
+  color: var(--%NS%text-2);
+  font-weight: 400;
+}
+
+app-state [detail] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+app-state code {
+  font-family: var(--%NS%font-mono);
+  color: var(--%NS%text);
+}
+
+app-state .actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+app-state .action {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+app-state .action:hover {
+  background: var(--%NS%surface-3);
+}
+
+app-state .action[aria-disabled=true] {
+  cursor: progress;
+}
+
+app-state .action:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+app-state > .spinner {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin-top: 4px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: app-state-spin 0.8s linear infinite;
+}
+
+@keyframes app-state-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  app-state,
+  app-state > .spinner {
+    animation: none;
+  }
+}`],encapsulation:2})};function oR(e,t){if(e&1&&(P(0,`span`,8),G(1),F()),e&2){let e=U(2);E(),K(e.plural(e.counts().error,`error`))}}function sR(e,t){if(e&1&&(P(0,`span`,9),G(1),F()),e&2){let e=U(2);E(),K(e.plural(e.counts().warning,`warning`))}}function cR(e,t){if(e&1&&(P(0,`span`,10),G(1),F()),e&2){let e=U(2);E(),q(``,e.counts().info,` info`)}}function lR(e,t){if(e&1&&(P(0,`span`,3),k(1,oR,2,1,`span`,8),k(2,sR,2,1,`span`,9),k(3,cR,2,1,`span`,10),F()),e&2){let e=U();E(),A(e.counts().error?1:-1),E(),A(e.counts().warning?2:-1),E(),A(e.counts().info?3:-1)}}function uR(e,t){if(e&1){let e=z();P(0,`app-state`,11),V(`retry`,function(){return x(e),S(U().run())}),G(1,` The route checks could not run. `),P(2,`p`,12),G(3,`The devtools server did not answer. Check that it is still running.`),F()()}}function dR(e,t){e&1&&(P(0,`app-state`,5),G(1,`Checking…`),F())}function fR(e,t){e&1&&G(0,` The page has not reported its route config yet. It runs in events-only mode, which only limits setup detection, so the checks run once the config arrives. `)}function pR(e,t){e&1&&G(0,` The page has not reported its route config yet. It appears after the app finishes bootstrapping. `)}function mR(e,t){e&1&&G(0,` No page with a router is connected. `)}function hR(e,t){if(e&1&&(P(0,`div`,6)(1,`p`,13),G(2,`No checks ran.`),F(),P(3,`p`,2),k(4,fR,1,0)(5,pR,1,0)(6,mR,1,0),F()()),e&2){let e;E(4),A((e=t)===`events-only`?4:e===`no-config`?5:6)}}function gR(e,t){if(e&1&&(P(0,`li`)(1,`div`,14)(2,`span`,10),G(3),F(),P(4,`code`,15),G(5),F(),P(6,`code`,16),G(7),F()(),P(8,`p`,17),G(9),F(),P(10,`p`,18)(11,`span`,19),G(12,`Fix`),F(),P(13,`span`,20),G(14),P(15,`span`,2),G(16),F()()()()),e&2){let e=t.$implicit,n=U(2);O(`data-severity`,e.severity),E(2),O(`data-tone`,n.severityTone(e.severity)),E(),K(e.severity),E(2),K(e.rule),E(2),K(e.route),E(2),K(e.message),E(5),q(``,e.fix,` `),E(2),q(`(Angular `,e.angular===`throws`?`throws`:e.angular===`warns`?`warns`:`does not warn`,`)`)}}function _R(e,t){if(e&1&&(P(0,`ul`,7),j(1,gR,17,8,`li`,null,ug),F()),e&2){let e=U();O(`aria-busy`,e.checking()),E(),M(e.findings())}}function vR(e,t){e&1&&(P(0,`div`,6)(1,`span`,21),C(),P(2,`svg`,22),I(3,`path`,23),F()(),ys(),P(4,`p`,13),G(5,`No route config problems found.`),F(),P(6,`p`,2),G(7,`The check runs again after each navigation or config change.`),F()())}var yR=class e{plural=cD;page=$.required();rpc=$(null);result=w(null);failed=w(!1);checking=w(!1);findings=X(()=>{let e=this.result();return e?.checked?e.findings:[]});notChecked=X(()=>{let e=this.result();return e&&!e.checked?e.reason:null});counts=X(()=>{let e={error:0,warning:0,info:0};for(let t of this.findings())e[t.severity]++;return e});key=X(()=>{let e=this.page(),t=e.navigations[e.navigations.length-1],n=JSON.stringify((e.links??[]).map(e=>[e.text,e.href,e.linkActive!==void 0,e.ariaCurrent===void 0])),r=`${e.setup?.mode}/${e.setup?.features?.componentInputBinding}`;return`${e.pageId}:${e.generation}:${t?.id}:${t?.outcome}:${n}:${r}`});seq=0;checkedPage=null;constructor(){T(()=>{this.key(),Z(()=>void this.run())})}severityTone(e){return e===`error`?`bad`:e===`warning`?`warn`:``}async run(){let e=++this.seq,t=this.page().pageId;t!==this.checkedPage&&this.result.set(null),this.checking.set(!0);let n=await GI(this.rpc(),`router-lint`,this.page().appId?{pageId:t,app:this.page().appId}:t);e===this.seq&&(this.checking.set(!1),this.failed.set(!n),n&&(this.result.set(n),this.checkedPage=t))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-lint`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},decls:11,vars:4,consts:[[1,`toolbar`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[1,`summary`],[`kind`,`error`],[`kind`,`loading`],[1,`empty`],[1,`findings`],[`data-tone`,`bad`,1,`badge`],[`data-tone`,`warn`,1,`badge`],[1,`badge`],[`kind`,`error`,3,`retry`],[`detail`,``],[1,`empty-title`],[1,`head`],[1,`rule`],[1,`route`],[1,`message`],[1,`fix`],[1,`fix-label`],[1,`fix-text`],[`aria-hidden`,`true`,1,`ok-mark`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`]],template:function(e,t){if(e&1&&(P(0,`div`,0)(1,`button`,1),V(`click`,function(){return t.run()}),G(2),F(),P(3,`span`,2),G(4,`Checks the live config, links and recent navigations. Lazy routes that have not loaded are skipped.`),F(),k(5,lR,4,3,`span`,3),F(),k(6,uR,4,0,`app-state`,4)(7,dR,2,0,`app-state`,5)(8,hR,7,1,`div`,6)(9,_R,3,1,`ul`,7)(10,vR,8,0,`div`,6)),e&2){let e;E(),O(`aria-busy`,t.checking()),E(),q(` `,t.checking()?`Checking…`:`Check again`,` `),E(3),A(t.result()?.checked&&t.findings().length?5:-1),E(),A(t.failed()?6:t.result()?(e=t.notChecked())?8:t.findings().length?9:10:7,e)}},dependencies:[aR],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.toolbar[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  flex: 1 1 240px;
+  font-size: 12px;
+}
+
+.summary[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+.ok-mark[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 4px;
+  border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.findings[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+  animation: enter 0.35s var(--%NS%ease) both;
+  transition: border-color 0.15s var(--%NS%ease);
+}
+
+.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.findings[_ngcontent-%COMP%]   li[data-severity=error][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%danger);
+}
+
+.findings[_ngcontent-%COMP%]   li[data-severity=warning][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%warn);
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.rule[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 500;
+}
+
+.route[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+
+.message[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+}
+
+.fix[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  margin: 10px 0 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+.fix-label[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%accent);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.fix-text[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.fix[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  font-size: 12px;
+}`]})},bR=(e,t)=>t.name,xR=(e,t)=>t[0];function SR(e,t){e&1&&(L(0,`p`,1),G(1,` Events-only mode: this build lacks the injector provider debug helper, so setup detection is limited. The preloader, the scroller and the router providers can't be found, and the features and options below can show defaults. `),R())}function CR(e,t){if(e&1&&(L(0,`dt`),G(1,`Angular`),R(),L(2,`dd`),G(3),R()),e&2){let e=U();E(3),K(e.angularVersion)}}function wR(e,t){if(e&1&&(L(0,`dt`),G(1,`Base href`),R(),L(2,`dd`)(3,`code`),G(4),R()()),e&2){let e=U();E(4),K(e.baseHref)}}function TR(e,t){if(e&1&&(L(0,`dt`),G(1,`Hydration`),R(),L(2,`dd`),G(3),R()),e&2){let e=U(),t=U();E(3),q(``,t.plural(e.hydrated,`component`),` hydrated from server HTML`)}}function ER(e,t){if(e&1&&(L(0,`tr`)(1,`td`,5)(2,`code`),G(3),R()(),L(4,`td`)(5,`code`),G(6),R()(),L(7,`td`,6)(8,`span`,7),G(9),R()()()),e&2){let e=t.$implicit;E(3),K(e.name),E(3),K(e.value),E(2),O(`data-tone`,e.set?`warn`:``),E(),K(e.set?`set`:`default`)}}function DR(e,t){if(e&1&&(L(0,`li`)(1,`span`,7),G(2),R()()),e&2){let e=t.$implicit;E(),O(`data-tone`,e[1]===`off`?``:`good`),E(),J(``,e[0],`: `,e[1])}}function OR(e,t){if(e&1&&(L(0,`h3`),G(1,`Features`),R(),L(2,`ul`,8),j(3,DR,3,3,`li`,null,xR),R()),e&2){let e=U(),t=U();E(3),M(t.entries(e.features))}}function kR(e,t){if(e&1&&(L(0,`dt`),G(1),R(),L(2,`dd`)(3,`code`),G(4),R()()),e&2){let e=t.$implicit;E(),K(e[0]),E(3),K(e[1])}}function AR(e,t){if(e&1&&(L(0,`h3`),G(1,`Strategies`),R(),L(2,`dl`,2),j(3,kR,5,2,null,null,xR),R()),e&2){let e=U(),t=U();E(3),M(t.entries(e.strategies))}}function jR(e,t){if(e&1&&(k(0,SR,2,0,`p`,1),L(1,`dl`,2)(2,`dt`),G(3,`Set up with`),R(),L(4,`dd`),G(5),R(),k(6,CR,4,1),k(7,wR,5,1),k(8,TR,4,1),R(),L(9,`h3`),G(10,`Options`),R(),L(11,`div`,3)(12,`table`)(13,`thead`)(14,`tr`)(15,`th`,4),G(16,`Option`),R(),L(17,`th`,4),G(18,`Value`),R(),L(19,`th`,4),G(20,`Source`),R()()(),L(21,`tbody`),j(22,ER,10,4,`tr`,null,bR),R()()(),k(24,OR,5,0),k(25,AR,5,0)),e&2){let e=t,n=U();A(e.mode===`events-only`?0:-1),E(5),J(` `,e.setupKind,``,e.routers>1?`, `+e.routers+` routers on the page`:``,` `),E(),A(e.angularVersion?6:-1),E(),A(e.baseHref?7:-1),E(),A(e.hydrated?8:-1),E(14),M(e.options),E(2),A(n.entries(e.features).length?24:-1),E(),A(n.entries(e.strategies).length?25:-1)}}function MR(e,t){e&1&&(L(0,`div`,0)(1,`p`,9),G(2,`The page has not reported its router setup yet.`),R(),L(3,`p`,10),G(4,` It appears after the app finishes bootstrapping. Reload the app if it stays empty. `),R()())}var NR=class e{plural=cD;page=$.required();entries(e){return Object.entries(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-setup`]],inputs:{page:[1,`page`]},decls:2,vars:1,consts:[[1,`empty`],[`role`,`note`,1,`note`],[1,`facts`],[`role`,`region`,`aria-label`,`Router options`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`],[1,`name`],[1,`source`],[1,`badge`],[1,`chips`],[1,`empty-title`],[1,`muted`]],template:function(e,t){if(e&1&&k(0,jR,26,8)(1,MR,5,0,`div`,0),e&2){let e;A((e=t.page().setup)?0:1,e)}},styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.name[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.source[_ngcontent-%COMP%] {
+  width: 1%;
+  white-space: nowrap;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chips[_ngcontent-%COMP%]   .badge[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-weight: 500;
+}
+
+.facts[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}`]})},PR=`pangular-pref`;function FR(e){try{let t=localStorage.getItem(`${PR}:${e}`);return t===`true`||t!==`false`&&null}catch{return null}}function IR(e,t){try{localStorage.setItem(`${PR}:${e}`,String(t))}catch{}}function LR(e,t){if(e&1&&(L(0,`span`,3),G(1),R()),e&2){let e=U();B(`id`,e.pendingId),E(),K(e.pendingText())}}var RR=class{options;held;followed;items;paused;pending;newestKey;follow;constructor(e){this.options=e;let t=X(()=>e.scope?.());this.held=Q({source:t,computation:(t,n)=>n?.value?Z(e.source):null}),this.followed=w(FR(`follow:${e.name}`)??!1),this.follow=this.followed.asReadonly(),this.items=X(()=>this.held()??e.source()),this.paused=X(()=>this.held()!==null),this.pending=X(()=>{let t=this.held();if(!t)return 0;let n=new Set(t.map(e.key));return e.source().filter(t=>!n.has(e.key(t))).length}),this.newestKey=X(()=>{let t=this.items(),n=e.newest===`last`?t.at(-1):t[0];return n===void 0?void 0:e.key(n)})}pause(){this.paused()||this.held.set([...Z(this.options.source)])}resume(){this.held.set(null)}toggle(){this.paused()?this.resume():this.pause()}setFollow(e){this.followed.set(e),IR(`follow:${this.options.name}`,e)}};function zR(e,t){let n=b(Es),r,i=!1,a=!1;T(()=>{let o=e.newestKey(),s=e.follow();s&&(a&&o!==void 0&&o!==r||!i)&&Sd(t,{injector:n}),r=o,i=s,a=!0})}var BR=class e{static nextId=0;feed=$.required();what=$.required();pendingId=`live-pending-${e.nextId++}`;announcement=w(``);pendingText=X(()=>{let e=this.feed().pending();return e?`${e} new`:`No new ${this.what()}`});toggle(){let e=this.feed(),t=e.pending();e.toggle(),this.announcement.set(e.paused()?`Paused. New ${this.what()} wait until you resume.`:t?`Resumed. New ${this.what()}: ${t}.`:`Resumed.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-live-controls`]],inputs:{feed:[1,`feed`],what:[1,`what`]},decls:10,vars:7,consts:[[`role`,`group`,1,`live`],[`type`,`button`,1,`pause`,3,`click`],[`aria-hidden`,`true`,1,`icon`],[1,`pending`,3,`id`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`role`,`status`,1,`sr-only`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`button`,1),H(`click`,function(){return t.toggle()}),Sg(2,`span`,2),G(3,` Pause `),R(),k(4,LR,2,2,`span`,3),L(5,`label`,4)(6,`input`,5),H(`change`,function(e){return t.feed().setFollow(e.target.checked)}),R(),G(7,` Follow newest `),R(),L(8,`p`,6),G(9),R()()),e&2&&(O(`aria-label`,`Live `+t.what()),E(),O(`aria-pressed`,t.feed().paused())(`aria-describedby`,t.feed().paused()?t.pendingId:null),E(),O(`data-paused`,t.feed().paused()),E(2),A(t.feed().paused()?4:-1),E(2),B(`checked`,t.feed().follow()),E(3),K(t.announcement()))},styles:[`[_nghost-%COMP%] {
+  display: contents;
+}
+
+.live[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px 12px;
+  align-items: center;
+  min-width: 0;
+}
+
+.pause[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.pause[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.pause[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.pause[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.icon[_ngcontent-%COMP%] {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border-right: 3px solid currentColor;
+  border-left: 3px solid currentColor;
+  box-sizing: border-box;
+}
+
+.icon[data-paused=true][_ngcontent-%COMP%] {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-right: 0;
+  border-bottom: 5px solid transparent;
+  border-left: 8px solid currentColor;
+}
+
+.pending[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  padding: 1px 8px;
+  border: 1px solid;
+  border-radius: 999px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: var(--%NS%control-h);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.check[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},VR=(e,t)=>t.id,HR=(e,t)=>t.phase,UR=(e,t)=>t.label;function WR(e,t){if(e&1&&(P(0,`p`,9),G(1),F()),e&2){let e=U();E(),K(e.message())}}function GR(e,t){if(e&1&&(P(0,`p`,10),G(1),F()),e&2){let e=U();E(),K(e.navigationOff)}}function KR(e,t){e&1&&(P(0,`span`,20),G(1,`→`),F(),P(2,`span`,21),G(3,`then`),F())}function qR(e,t){if(e&1&&(k(0,KR,4,0),P(1,`code`),G(2),F()),e&2){let e=t.$implicit,n=t.$index;A(n===0?-1:0),E(2),K(e)}}function JR(e,t){if(e&1&&(P(0,`li`)(1,`code`),G(2),F(),P(3,`span`,20),G(4,` → `),F(),P(5,`span`,21),G(6,` to `),F(),P(7,`code`),G(8),F(),G(9),F()),e&2){let e=t.$implicit,n=U(3);E(2),K(e.from),E(6),K(e.to),E(),q(`: `,n.hopCause(e),` `)}}function YR(e,t){if(e&1&&(P(0,`div`,15)(1,`p`,16)(2,`span`,17),G(3),F(),j(4,qR,3,2,null,null,ug),F(),P(6,`ol`,18),j(7,JR,10,3,`li`,null,ug),F(),P(9,`p`,19),G(10),F()()),e&2){let e=t.$implicit,n=U(2);E(3),K(n.loopTitle(e)),E(),M(e.cycle),E(3),M(e.hops),E(3),K(n.loopMeta(e))}}function XR(e,t){if(e&1&&(P(0,`section`,12)(1,`h3`,14),G(2),F(),j(3,YR,11,2,`div`,15,ug),F()),e&2){let e=U();E(2),q(` `,e.loops().length===1?`Loop detected`:e.loops().length+` loops detected`,` `),E(),M(e.loops())}}function ZR(e,t){e&1&&G(0,` (started by the user) `)}function QR(e,t){if(e&1&&(P(0,`span`,24),G(1),F()),e&2){let e=U().$implicit;E(),q(`failed`,e.error?`: `+e.error:``)}}function $R(e,t){if(e&1&&(P(0,`li`)(1,`time`),G(2),F(),G(3),P(4,`code`),G(5),F(),k(6,ZR,1,0),k(7,QR,2,1,`span`,24),F()),e&2){let e=t.$implicit,n=U(2);E(2),K(n.time(e.at)),E(),q(` `,e.type,` to `),E(2),K(e.url),E(),A(e.userInitiated?6:-1),E(),A(e.result===`failed`?7:-1)}}function ez(e,t){if(e&1&&(P(0,`section`,13)(1,`h3`,22),G(2,`History changes outside the router`),F(),P(3,`p`,23),G(4,` Browser Navigation API events no router navigation came with, such as `),P(5,`code`),G(6,`history.pushState`),F(),G(7,` or a hash change. They explain a browser URL that differs from the router's. `),F(),P(8,`ul`),j(9,$R,8,5,`li`,null,ug),F()()),e&2){let e=U();E(9),M(e.outsideRouter())}}function tz(e,t){if(e&1&&(P(0,`span`),I(1,`i`),G(2),F()),e&2){let e=t.$implicit,n=U(2);E(),f_(`background`,n.color(e)),E(),K(e)}}function nz(e,t){if(e&1&&(P(0,`time`),G(1),F()),e&2){let e=U().$implicit,t=U(2);E(),K(t.time(e.startedAt))}}function rz(e,t){if(e&1&&(P(0,`span`,20),G(1,`→`),F(),P(2,`span`,21),G(3,`redirected to`),F(),P(4,`code`,32),G(5),F()),e&2){let e=U().$implicit;E(5),K(e.finalUrl)}}function iz(e,t){if(e&1&&(P(0,`span`,23),G(1),F()),e&2){let e=U().$implicit;E(),K(e.endedAt===void 0&&e.outcome!==`pending`?`before Pangular Inspector connected`:`started before Pangular Inspector connected`)}}function az(e,t){if(e&1&&(P(0,`span`,35),G(1),F()),e&2){let e=U().$implicit;E(),q(``,e.phases?.total,`ms`)}}function oz(e,t){if(e&1&&(P(0,`span`,35),G(1),F()),e&2){let e=U().$implicit;E(),q(``,e.endedAt-e.startedAt,`ms`)}}function sz(e,t){e&1&&(P(0,`span`,36),G(1,`probe`),F())}function cz(e,t){e&1&&(P(0,`span`,37),G(1,`open redirect risk`),F())}function lz(e,t){if(e&1&&(P(0,`span`,17),G(1,`loop`),P(2,`span`,21),G(3),F()()),e&2){let e=t,n=U(3);E(3),J(`: part of `,n.loopTitle(e),` `,e.cycle.join(` then `))}}function uz(e,t){if(e&1&&I(0,`span`),e&2){let e=t.$implicit,n=U(4);f_(`width`,e.width,`%`)(`background`,n.color(e.phase)),O(`title`,e.phase+` `+e.ms+`ms`)}}function dz(e,t){if(e&1&&(P(0,`div`,38),j(1,uz,1,5,`span`,45,HR),F()),e&2){let e=U().$implicit,t=U(2);O(`aria-label`,t.barLabel(e)),E(),M(t.bars(e))}}function fz(e,t){if(e&1&&(P(0,`dt`),G(1,`From`),F(),P(2,`dd`)(3,`code`),G(4),F()()),e&2){let e=U().$implicit;E(4),K(e.from)}}function pz(e,t){if(e&1&&(P(0,`dt`),G(1,`Started by`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),J(``,e.caller,` (`,e.trigger,`)`)}}function mz(e,t){if(e&1&&(P(0,`dt`),G(1,`Navigation API`),F(),P(2,`dd`),G(3),F()),e&2){let e=t;E(3),J(` `,e.type,``,e.userInitiated?` (started by the user)`:``,` `)}}function hz(e,t){if(e&1&&(P(0,`dt`),G(1,`Extras`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.extras?.join(`, `))}}function gz(e,t){if(e&1&&(P(0,`dt`),G(1,`Redirect of`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),q(`#`,e.redirectedFrom)}}function _z(e,t){if(e&1&&(P(0,`div`),G(1,` This navigation: `),P(2,`code`),G(3),F(),G(4,` to `),P(5,`code`),G(6),F(),G(7),F()),e&2){let e=t.$implicit,n=U(4);E(3),K(e.from),E(3),K(e.to),E(),q(`, `,n.hopCause(e),` `)}}function vz(e,t){if(e&1&&(P(0,`dt`),G(1,`Loop`),F(),P(2,`dd`,46),G(3),j(4,_z,8,3,`div`,null,ug),F()),e&2){let e=t,n=U().$implicit,r=U(2);E(3),q(` `,e.cycle.join(` → `),` `),E(),M(r.hopsOf(e,n))}}function yz(e,t){if(e&1&&(P(0,`dt`),G(1,`Redirects to`),F(),P(2,`dd`)(3,`code`),G(4),F(),G(5),F()),e&2){let e=U().$implicit;E(4),K(e.redirectTo),E(),q(` (`,e.redirectKind,`) `)}}function bz(e,t){if(e&1&&(P(0,`dt`),G(1,`Open redirect`),F(),P(2,`dd`,46),G(3,` The target came from query param `),P(4,`code`),G(5),F(),G(6),F()),e&2){let e=t;E(5),K(e.param),E(),q(` (`,e.by,`). Check return URLs against an allow list. `)}}function xz(e,t){if(e&1&&(P(0,`dt`),G(1,`Guards`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit,t=U(2);E(3),J(``,e.guards.names.join(`, `)||`none`,`: `,t.guardResult(e))}}function Sz(e,t){if(e&1&&(P(0,`div`)(1,`code`),G(2),F(),G(3),P(4,`code`),G(5),F(),G(6,`: `),P(7,`strong`),G(8),F(),G(9),F()),e&2){let e=t.$implicit,n=U(4);E(2),K(e.guard),E(),q(` `,e.kind,` on `),E(2),K(e.route),E(2),W(`bad`,n.isBad(e.result)),E(),K(e.result),E(),q(` (`,e.ms,`ms) `)}}function Cz(e,t){if(e&1&&(P(0,`dt`),G(1,`Runs`),F(),P(2,`dd`),j(3,Sz,10,7,`div`,null,ug),F()),e&2){let e=U().$implicit;E(3),M(e.runs)}}function wz(e,t){if(e&1&&G(0),e&2){let e=U(2).$implicit;q(` leaving `,e.checked.deactivate.join(`, `),`; `)}}function Tz(e,t){if(e&1&&(P(0,`dt`),G(1,`Checked`),F(),P(2,`dd`),k(3,wz,1,1),G(4),F()),e&2){let e=U().$implicit;E(3),A(e.checked.deactivate.length?3:-1),E(),q(` entering `,e.checked.activate.join(`, `)||`nothing new`,` `)}}function Ez(e,t){if(e&1&&(P(0,`dt`),G(1,`Resolvers`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.resolvers?.names?.join(`, `))}}function Dz(e,t){if(e&1&&(P(0,`dt`),G(1,`Lazy loaded`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.lazyLoaded?.join(`, `))}}function Oz(e,t){if(e&1&&(P(0,`dt`),G(1,`Reused`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),q(` `,e.reused?.join(`, `),` (component kept, only inputs and params change) `)}}function kz(e,t){if(e&1&&(P(0,`dt`),G(1,`HTTP`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit,t=U(2);E(3),J(` `,t.plural(e.requests.count,`request`),`: `,e.requests.urls.join(`, `),` `)}}function Az(e,t){if(e&1&&(P(0,`dt`),G(1,`Scroll`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.scroll)}}function jz(e,t){if(e&1&&(P(0,`dt`),G(1,`Title after`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.title)}}function Mz(e,t){if(e&1&&(P(0,`dt`),G(1,`Warnings`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.warnings?.join(` · `))}}function Nz(e,t){if(e&1&&(P(0,`dt`),G(1,`Reason`),F(),P(2,`dd`,46),G(3),F()),e&2){let e=U().$implicit,t=U(2);E(3),K(t.reasonText(e))}}function Pz(e,t){if(e&1&&(P(0,`dt`),G(1,`Error`),F(),P(2,`dd`,46),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.errorCode)}}function Fz(e,t){if(e&1&&(P(0,`dt`),G(1,`Error handler`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit;E(3),K(e.errorHandler)}}function Iz(e,t){if(e&1&&(P(0,`dt`),G(1,`Earlier`),F(),P(2,`dd`),G(3),F()),e&2){let e=U().$implicit,t=U(2);E(3),q(``,t.plural(e.earlier,`navigation`),` before Pangular Inspector connected`)}}function Lz(e,t){if(e&1&&(P(0,`p`,43),G(1,` Replay is off: the URL is redacted or not relative. `),F()),e&2){let e=U().$implicit;N(`id`,q_(`replay-note-`,e.id))}}function Rz(e,t){e&1&&(P(0,`p`,23),G(1,`Loading the HTTP calls…`),F())}function zz(e,t){e&1&&(P(0,`p`,23),G(1,`Could not load the HTTP calls.`),F())}function Bz(e,t){e&1&&(P(0,`p`,23),G(1,` The HTTP inspector recorded no HttpClient call for this navigation. `),F())}function Vz(e,t){if(e&1&&(P(0,`li`)(1,`code`),G(2),F(),G(3,` `),P(4,`span`),G(5),F(),G(6,` `),P(7,`span`,35),G(8),F()()),e&2){let e=t.$implicit,n=U(5);E(2),J(``,e.method,` `,e.url),E(2),W(`bad`,n.isFailedCall(e)),E(),K(n.callStatus(e)),E(3),q(``,n.round(e.durationMs),`ms`)}}function Hz(e,t){if(e&1&&(P(0,`p`,47),G(1),F(),P(2,`ul`),j(3,Vz,9,6,`li`,null,VR),F()),e&2){let e=t.$implicit;E(),K(e.label),E(2),M(e.calls)}}function Uz(e,t){if(e&1&&(k(0,Bz,2,0,`p`,23),j(1,Hz,5,1,null,null,UR)),e&2){let e=U().$implicit,t=U(2),n=t.httpOf(e);A(!n.during.length&&!n.after.length?0:-1),E(),M(t.httpGroups(n))}}function Wz(e,t){if(e&1){let e=z();P(0,`li`)(1,`div`,30),k(2,nz,2,1,`time`),P(3,`span`,31),G(4),F(),P(5,`code`,32),G(6),F(),k(7,rz,6,1),P(8,`span`,33)(9,`span`,34),G(10),F(),k(11,iz,2,1,`span`,23)(12,az,2,1,`span`,35)(13,oz,2,1,`span`,35),k(14,sz,2,0,`span`,36),k(15,cz,2,0,`span`,37),k(16,lz,4,2,`span`,17),F()(),k(17,dz,3,1,`div`,38),P(18,`dl`,39),k(19,fz,5,1),k(20,pz,4,2),k(21,mz,4,2),k(22,hz,4,1),k(23,gz,4,1),k(24,vz,6,1),k(25,yz,6,2),k(26,bz,7,2),k(27,xz,4,2),k(28,Cz,5,0),k(29,Tz,5,2),k(30,Ez,4,1),k(31,Dz,4,1),k(32,Oz,4,1),k(33,kz,4,2),k(34,Az,4,1),k(35,jz,4,1),k(36,Mz,4,1),k(37,Nz,4,1),k(38,Pz,4,1),k(39,Fz,4,1),k(40,Iz,4,1),F(),P(41,`div`,40)(42,`button`,41),V(`click`,function(){let t=x(e).$implicit;return S(U(2).replay(t))}),G(43,` Replay `),F(),P(44,`button`,42),V(`click`,function(){let t=x(e).$implicit;return S(U(2).compare.emit(t.id))}),G(45,` Compare `),F(),P(46,`button`,42),V(`click`,function(){let t=x(e).$implicit;return S(U(2).copy(t))}),G(47,` Copy repro `),F(),P(48,`button`,42),V(`click`,function(){let t=x(e).$implicit;return S(U(2).toggleHttp(t))}),G(49,` HTTP calls `),F(),k(50,Lz,2,2,`p`,43),F(),P(51,`div`,44),k(52,Rz,2,0,`p`,23)(53,zz,2,0,`p`,23)(54,Uz,3,1),F()()}if(e&2){let e,n,r,i,a,o=t.$implicit,s=U(2);W(`in-loop`,!!s.loopOf(o)),E(2),A(o.beforeConnect?-1:2),E(2),q(`#`,o.id),E(2),K(o.url),E(),A(o.finalUrl&&o.finalUrl!==o.url?7:-1),E(2),O(`data-tone`,s.tone(o.outcome)),E(),K(o.outcome),E(),A(o.beforeConnect?11:o.phases?.total===void 0?o.endedAt===void 0?-1:13:12),E(3),A(o.probe?14:-1),E(),A(o.queryRedirect?15:-1),E(),A((e=s.loopOf(o))?16:-1,e),E(),A(s.bars(o).length?17:-1),E(2),A(o.from?19:-1),E(),A(o.caller?20:-1),E(),A((n=o.platform)?21:-1,n),E(),A(o.extras?.length?22:-1),E(),A(o.redirectedFrom===void 0?-1:23),E(),A((r=s.loopOf(o))?24:-1,r),E(),A(o.redirectTo?25:-1),E(),A((i=o.queryRedirect)?26:-1,i),E(),A(o.guards&&(o.guards.names.length||o.guards.passed===!1)?27:-1),E(),A(o.runs?.length?28:-1),E(),A(o.checked&&(o.checked.activate.length||o.checked.deactivate.length)?29:-1),E(),A(o.resolvers?.names?.length?30:-1),E(),A(o.lazyLoaded?.length?31:-1),E(),A(o.reused?.length?32:-1),E(),A(o.requests?33:-1),E(),A(o.scroll?34:-1),E(),A(o.title?35:-1),E(),A(o.warnings?.length?36:-1),E(),A(o.reason||o.code?37:-1),E(),A(o.errorCode?38:-1),E(),A(o.errorHandler?39:-1),E(),A(o.earlier?40:-1),E(2),N(`disabled`,!s.navigationAllowed()||!s.replayable(o)),O(`aria-describedby`,s.replayNote(o))(`aria-label`,`Replay navigation `+o.id),E(2),O(`aria-label`,`Compare navigation `+o.id+` with an earlier one`),E(2),O(`aria-label`,`Copy repro for navigation `+o.id),E(2),O(`aria-expanded`,s.httpShown(o))(`aria-controls`,`nav-http-`+o.id)(`aria-label`,`HTTP calls of navigation `+o.id),E(2),A(s.replayable(o)?-1:50),E(),N(`id`,`nav-http-`+o.id)(`hidden`,!s.httpShown(o)),E(),A((a=s.httpState(o))===`loading`?52:a===`failed`?53:a===`ready`?54:-1)}}function Gz(e,t){if(e&1&&(P(0,`div`,25)(1,`span`,26),G(2),F(),P(3,`div`,27),j(4,tz,3,3,`span`,null,dg),F()(),P(6,`ol`,28),j(7,Wz,55,47,`li`,29,VR),F()),e&2){let e=U();E(2),J(``,e.items().length,` of `,e.plural(e.feed.items().length,`navigation`)),E(2),M(e.phases),E(3),M(e.items())}}function Kz(e,t){if(e&1){let e=z();P(0,`app-state`,50),V(`clear`,function(){x(e);let t=U(2),n=Gg(2);return t.clearFilters(),S(n.focus())}),G(1,` No navigations match the current filters. `),P(2,`p`,51),G(3),F()()}if(e&2){let e=U(2);E(3),q(` `,e.plural(e.feed.items().length,`navigation is`,`navigations are`),` hidden. Clear the filters to see them. `)}}function qz(e,t){e&1&&(P(0,`app-state`,49),G(1,` No navigations since Pangular Inspector connected. `),P(2,`p`,51),G(3,`Earlier ones are not visible. Click a link in the app to record one.`),F()())}function Jz(e,t){e&1&&k(0,Kz,4,1,`app-state`,48)(1,qz,4,0,`app-state`,49),e&2&&A(+!U().feed.items().length)}var Yz=[`recognize`,`guards`,`resolve`,`activate`],Xz=class e{plural=cD;page=$.required();rpc=$(null);compare=xv();maxNavigations=X(()=>TT(this.rpc()).limits.navigations);navigationAllowed=X(()=>OT(this.rpc(),`router`));navigationOff=Mw(`router`);phases=Yz;pageId=X(()=>this.page().pageId);filter=Q({source:this.pageId,computation:()=>``});onlyProblems=Q({source:this.pageId,computation:()=>!1});message=Q({source:this.pageId,computation:()=>``});loops=X(()=>this.page().loops??[]);outsideRouter=X(()=>(this.page().platformNavigations??[]).filter(e=>e.navigationId===void 0).slice(-5).reverse());loopById=X(()=>{let e=new Map;for(let t of this.loops())for(let n of t.ids)e.set(n,t);return e});feed=new RR({name:`router-timeline`,source:()=>this.page().navigations,key:e=>e.id,newest:`last`,scope:this.pageId});host=b(Rl);constructor(){zR(this.feed,()=>this.host.nativeElement.querySelector(`.navs > li`)?.scrollIntoView?.({block:`nearest`}))}items=X(()=>{let e=this.filter().toLowerCase();return[...this.feed.items()].reverse().filter(t=>(!e||t.url.toLowerCase().includes(e)||!!t.finalUrl?.toLowerCase().includes(e))&&(!this.onlyProblems()||this.isProblem(t)))});isProblem(e){return e.probe?!1:![`succeeded`,`pending`].includes(e.outcome)||this.loopById().has(e.id)}loopOf(e){return this.loopById().get(e.id)}loopTitle(e){return e.kind===`burst`?`navigation loop`:`redirect loop`}hopsOf(e,t){return e.hops.filter(e=>e.id===t.id)}hopCause(e){return e.via===`navigate`?`#${e.id} started by ${e.by??`code`}`:`${e.via===`redirectTo`?`config`:`${e.via} redirect`}${e.by?` ${e.by}`:e.via===`redirectTo`?` redirectTo`:``} in #${e.id}`}loopMeta(e){let t=e.ids.length>1?`Navigations #${e.ids[0]} to #${e.ids[e.ids.length-1]}`:`Navigation #${e.ids[0]}`,n=e.bounces>1?`, came back ${e.bounces} times`:``,r=e.guards.length?` Guards involved: ${e.guards.join(`, `)}.`:``;return`${t}${n}; ${e.end}.${r}`}reasonText(e){return[e.code,e.reason].filter(Boolean).join(`: `)}clearFilters(){this.filter.set(``),this.onlyProblems.set(!1)}tone(e){return YI(e)}color(e){return`var(--phase-${e})`}bars(e){let t=e.phases?.total;return t?Yz.filter(t=>(e.phases?.[t]??0)>0).map(n=>({phase:n,ms:e.phases[n],width:Math.max(1,e.phases[n]/t*100)})):[]}barLabel(e){return`Phases: ${this.bars(e).map(e=>`${e.phase} ${e.ms}ms`).join(`, `)}`}guardResult(e){let t=e.guards?.passed;return t===!0?`passed`:t===!1?e.outcome===`redirected`?`redirected`:`blocked`:e.outcome===`pending`?`running`:`did not finish, navigation ${e.outcome}`}isBad(e){return e===`false`||/^(UrlTree|RedirectCommand|threw)/.test(e)}time=aD;http=Q({source:this.pageId,computation:()=>({})});httpOpen=Q({source:this.pageId,computation:()=>({})});round=Math.round;httpShown(e){return!!this.httpOpen()[e.id]}httpState(e){let t=this.http()[e.id];return t===void 0?null:typeof t==`string`?t:`ready`}httpOf(e){let t=this.http()[e.id];return typeof t==`object`?t:{during:[],after:[]}}httpGroups(e){return[{label:`While it ran`,calls:e.during},{label:`After it ended`,calls:e.after}].filter(e=>e.calls.length)}callStatus(e){return e.cancelled?`cancelled`:e.status?String(e.status):`ERR`}isFailedCall(e){return e.status===0||e.status>=400||!!e.error||e.cancelled===!0}async toggleHttp(e){let t=!this.httpShown(e);if(this.httpOpen.update(n=>({...n,[e.id]:t})),!t)return;let n=this.pageId();this.http.update(t=>({...t,[e.id]:`loading`}));let r=await GI(this.rpc(),`router-http`,{pageId:n,app:this.page().appId,id:e.id});n===this.pageId()&&this.http.update(t=>({...t,[e.id]:r??`failed`}))}instrumentSeq=0;async toggleInstrument(e){let t=e.target,n=t.checked,r=this.pageId(),i=++this.instrumentSeq,a=await JI(this.rpc(),r,{action:`instrument`,on:n},this.page().appId);if(i===this.instrumentSeq){if(r!==this.pageId()){t.checked=!!this.page().instrumented;return}if(a.error){t.checked=!!this.page().instrumented,this.message.set(String(a.error));return}this.message.set(n?`Recording each guard and resolver.`:`Stopped recording guards and resolvers.`)}}replayable(e){return KI(e.url)}replayNote(e){return this.navigationAllowed()?this.replayable(e)?null:`replay-note-${e.id}`:`route-timeline-writes-off`}async replay(e){this.message.set(`Replaying #${e.id}…`);let t=this.pageId(),n=await JI(this.rpc(),t,{action:`replay`,id:e.id},this.page().appId);if(t!==this.pageId())return;if(n.error){this.message.set(String(n.error));return}let r=n.replay;this.message.set(`Replay of #${e.id}: ${r?.outcome??`unknown`}${n.same?` (same as before)`:` (different from before)`}.`)}async copy(e){let t=this.pageId(),n=await GI(this.rpc(),`router-export`,{pageId:t,app:this.page().appId,id:e.id});if(t===this.pageId()){if(!n){this.message.set(`Could not build the repro.`);return}try{await navigator.clipboard.writeText(n),t===this.pageId()&&this.message.set(`Copied a markdown repro of #${e.id}.`)}catch{t===this.pageId()&&this.message.set(`The clipboard is not available here.`)}}}async clearNavigations(){let e=this.rpc(),t=this.pageId(),n=`Clearing navigations…`;this.message.set(n);let r;try{if(!e)throw Error(`No connection`);let n=this.page().appId;await oT(e,`clear-router-navigations`,n?{pageId:t,app:n}:t),r=`Navigations cleared.`}catch{r=`Could not clear the navigations.`}t===this.pageId()?this.message.set(r):this.message()===n&&this.message.set(``)}exportJson(){let e=new Blob([JSON.stringify(this.page().navigations,null,2)],{type:`application/json`}),t=URL.createObjectURL(e),n=document.createElement(`a`);n.href=t,n.download=`navigations-${this.page().pageId}.json`,n.click(),URL.revokeObjectURL(t)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-timeline`]],inputs:{page:[1,`page`],rpc:[1,`rpc`]},outputs:{compare:`compare`},decls:23,vars:14,consts:[[`filterInput`,``],[1,`toolbar`],[`placeholder`,`Filter by URL`,`saveKey`,`router-timeline`,3,`valueChange`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`what`,`navigations`,3,`feed`],[`type`,`button`,1,`small`,`export`,3,`click`],[`type`,`button`,`aria-label`,`Clear navigations`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`visually-hidden`],[`aria-hidden`,`true`,1,`message`],[`id`,`route-timeline-writes-off`,1,`message`],[`what`,`navigations`,`limit`,`navigations`,3,`dropped`,`max`],[`aria-labelledby`,`loops-heading`,1,`loops`],[`aria-labelledby`,`outside-heading`,1,`outside`],[`id`,`loops-heading`],[1,`loop`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`hops`],[1,`muted`,`loop-meta`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[`id`,`outside-heading`],[1,`muted`],[1,`bad`],[1,`meta-row`],[1,`muted`,`count`],[`aria-hidden`,`true`,1,`legend`],[1,`navs`],[3,`in-loop`],[1,`head`],[1,`id`],[1,`url`],[1,`meta`],[1,`badge`],[1,`muted`,`ms`],[1,`tag`],[`data-tone`,`warn`,1,`badge`],[`role`,`img`,1,`bar`],[1,`details`],[1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`,`replay-note`,3,`id`],[1,`http`,3,`id`,`hidden`],[3,`width`,`background`],[1,`reason`],[1,`http-label`],[`kind`,`no-match`],[`kind`,`empty`],[`kind`,`no-match`,3,`clear`],[`detail`,``]],template:function(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`app-search-field`,2,0),U_(`valueChange`,function(n){return x(e),H_(t.filter,n)||(t.filter=n),S(n)}),F(),P(3,`label`,3)(4,`input`,4),V(`change`,function(e){return t.onlyProblems.set(e.target.checked)}),F(),G(5,` Only problems `),F(),P(6,`label`,3)(7,`input`,4),V(`change`,function(e){return t.toggleInstrument(e)}),F(),G(8,` Record each guard and resolver `),F(),I(9,`app-live-controls`,5),P(10,`button`,6),V(`click`,function(){return t.exportJson()}),G(11,`Export JSON`),F(),P(12,`button`,7),V(`click`,function(){return t.clearNavigations()}),G(13,` Clear `),F()(),P(14,`p`,8),G(15),F(),k(16,WR,2,1,`p`,9),k(17,GR,2,1,`p`,10),I(18,`app-limit-note`,11),k(19,XR,5,1,`section`,12),k(20,ez,11,0,`section`,13),k(21,Gz,9,2)(22,Jz,2,1)}e&2&&(E(),V_(`value`,t.filter),E(3),N(`checked`,t.onlyProblems()),E(3),N(`checked`,t.page().instrumented),E(2),N(`feed`,t.feed),E(3),N(`disabled`,!t.navigationAllowed()),O(`aria-describedby`,t.navigationAllowed()?null:`route-timeline-writes-off`),E(3),K(t.message()),E(),A(t.message()?16:-1),E(),A(t.navigationAllowed()?-1:17),E(),N(`dropped`,t.page().dropped??0)(`max`,t.maxNavigations()),E(),A(t.loops().length?19:-1),E(),A(t.outsideRouter().length?20:-1),E(),A(t.items().length?21:22))},dependencies:[iD,dD,aR,BR],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.toolbar[_ngcontent-%COMP%]   .field[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.export[_ngcontent-%COMP%] {
+  margin-left: auto;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.15s var(--%NS%ease);
+}
+
+.check[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+.message[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.meta-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+}
+
+.count[_ngcontent-%COMP%] {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.legend[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.legend[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 99px;
+}
+
+.navs[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navs[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+  animation: enter 0.35s var(--%NS%ease) both;
+  transition: border-color 0.15s var(--%NS%ease);
+}
+
+.navs[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.head[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-weight: 500;
+}
+
+.id[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.arrow[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.ms[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+time[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.bar[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 2px;
+  height: 6px;
+  margin: 12px 0 4px;
+  overflow: hidden;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+}
+
+.bar[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  display: block;
+  min-width: 2px;
+}
+
+.details[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 6px 16px;
+  margin: 12px 0 0;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.details[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.details[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  letter-spacing: 0.06em;
+}
+
+.reason[_ngcontent-%COMP%], 
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.navs[_ngcontent-%COMP%]    > li.in-loop[_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%danger);
+}
+
+.outside[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.outside[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.outside[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.outside[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.outside[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  padding-left: 20px;
+}
+
+.loops[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid color-mix(in srgb, var(--%NS%danger) 35%, var(--%NS%border));
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%danger) 6%, var(--%NS%surface));
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.loops[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.loop[_ngcontent-%COMP%]    + .loop[_ngcontent-%COMP%] {
+  padding-top: 8px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+.chain[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  margin: 0;
+}
+
+.hops[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  padding-left: 20px;
+}
+
+.hops[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
+  margin-top: 2px;
+}
+
+.loop-meta[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  font-size: 12px;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+.http[_ngcontent-%COMP%] {
+  margin-top: 8px;
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+.http[hidden][_ngcontent-%COMP%] {
+  display: none;
+}
+
+.http[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.http[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.http[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  padding-left: 20px;
+}
+
+.http[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.http[_ngcontent-%COMP%]   p.http-label[_ngcontent-%COMP%] {
+  margin-top: 6px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.replay-note[_ngcontent-%COMP%] {
+  align-self: center;
+  margin: 0;
+  font-size: 12px;
+}
+
+@media (max-width: 480px) {
+  .details[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .details[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 6px;
+  }
+  .export[_ngcontent-%COMP%] {
+    margin-left: 0;
+  }
+}`]})},Zz=(e,t)=>t.path,Qz=(e,t)=>t.phase;function $z(e,t){if(e&1&&(L(0,`li`),G(1,` Redirect `),L(2,`code`),G(3),R(),L(4,`span`,6),G(5,`→`),R(),L(6,`span`,7),G(7,`to`),R(),L(8,`code`),G(9),R(),G(10,` by `),L(11,`code`),G(12),R()()),e&2){let e=t.$implicit;E(3),K(e.from),E(6),K(e.to),E(3),K(e.route)}}function eB(e,t){if(e&1&&(L(0,`ol`,3),j(1,$z,13,3,`li`,null,ug),R()),e&2){U();let e=Y(0);E(),M(e.hops)}}function tB(e,t){e&1&&(L(0,`span`,9),G(1,`active`),R())}function nB(e,t){e&1&&(L(0,`span`,6),G(1,` → `),R(),L(2,`span`,7),G(3,`then`),R())}function rB(e,t){if(e&1&&(L(0,`code`),G(1),R(),k(2,tB,2,0,`span`,9),k(3,nB,4,0)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;E(),K(e.path),E(),A(e.active?2:-1),E(),A(n===r-1?-1:3)}}function iB(e,t){if(e&1&&(L(0,`p`)(1,`span`,8),G(2),R(),j(3,rB,4,3,null,null,Zz),R()),e&2){U();let e=Y(0);E(),O(`data-tone`,e.matched?`good`:`warn`),E(),K(e.matched?`match`:`stops`),E(),M(e.chain)}}function aB(e,t){if(e&1&&(G(0,` Nearest: `),L(1,`code`),G(2),R()),e&2){U(2);let e=Y(0);E(2),K(e.nearest.join(`, `))}}function oB(e,t){if(e&1&&(L(0,`p`)(1,`span`,10),G(2,`no match`),R(),G(3,` Matches no route (NG04002). `),k(4,aB,3,1),R()),e&2){U();let e=Y(0);E(4),A(e.nearest.length?4:-1)}}function sB(e,t){e&1&&(L(0,`p`,2),G(1,` Params: `),L(2,`code`),G(3),R()()),e&2&&(E(3),K(t))}function cB(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R()()),e&2){let e=t.$implicit;E(2),K(e)}}function lB(e,t){if(e&1&&(L(0,`li`)(1,`span`,11),G(2),R(),L(3,`ul`),j(4,cB,3,1,`li`,null,ug),R()()),e&2){let e=t.$implicit;E(2),K(e.phase),E(2),M(e.items)}}function uB(e,t){if(e&1&&(L(0,`ol`,4),j(1,lB,6,1,`li`,null,Qz),R()),e&2){U();let e=Y(0);E(),M(e.steps)}}function dB(e,t){if(e&1&&(L(0,`code`),G(1),R(),G(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;E(),K(e.source),E(),q(``,n===r-1?``:`, `,` `)}}function fB(e,t){if(e&1&&(L(0,`p`,2),G(1,` Declared in: `),j(2,dB,3,2,null,null,Zz),R()),e&2){let e=U();E(2),M(e.sources())}}function pB(e,t){if(e&1&&(L(0,`p`,2),G(1,` Render mode `),L(2,`code`),G(3),R(),G(4,` (ServerRoute `),L(5,`code`),G(6),R(),G(7,`) `),R()),e&2){let e=t;E(3),K(e.mode),E(3),K(e.path)}}function mB(e,t){if(e&1&&(L(0,`p`,5),G(1),R()),e&2){U();let e=Y(0);E(),K(e.stopped)}}function hB(e,t){if(e&1&&(L(0,`p`,2),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}var gB=class e{preview=$.required();paramText=X(()=>Object.entries(this.preview().params).map(([e,t])=>`${e}=${t}`).join(`, `));sources=X(()=>this.preview().chain.filter(e=>e.source));static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-preview`]],inputs:{preview:[1,`preview`]},decls:18,vars:9,consts:[[`aria-labelledby`,`route-preview-heading`,1,`card`],[`id`,`route-preview-heading`],[1,`muted`],[`aria-label`,`Redirects`,1,`hops`],[1,`steps`],[1,`note`],[`aria-hidden`,`true`],[1,`visually-hidden`],[1,`badge`],[1,`tag`],[`data-tone`,`bad`,1,`badge`],[1,`phase`]],template:function(e,t){if(e&1&&(G_(0),L(1,`section`,0)(2,`h3`,1),G(3,` What happens if you go to `),L(4,`code`),G(5),R()(),L(6,`p`,2),G(7,`Predicted from the live route config. Nothing ran in the app.`),R(),k(8,eB,3,0,`ol`,3),k(9,iB,5,2,`p`)(10,oB,5,1,`p`),k(11,sB,4,1,`p`,2),k(12,uB,3,0,`ol`,4),k(13,fB,4,0,`p`,2),k(14,pB,8,2,`p`,2),k(15,mB,2,1,`p`,5),j(16,hB,2,1,`p`,2,dg),R()),e&2){let e,n,r=K_(t.preview());E(5),K(r.url),E(3),A(r.hops.length?8:-1),E(),A(r.chain.length?9:10),E(2),A((e=t.paramText())?11:-1,e),E(),A(r.steps.length?12:-1),E(),A(t.sources().length?13:-1),E(),A((n=r.renderMode)?14:-1,n),E(),A(r.stopped?15:-1),E(),M(r.notes)}},styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+}
+
+p[_ngcontent-%COMP%], 
+ol[_ngcontent-%COMP%], 
+ul[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.hops[_ngcontent-%COMP%], 
+.steps[_ngcontent-%COMP%] {
+  padding-left: 20px;
+}
+
+.steps[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
+  margin-top: 6px;
+}
+
+.steps[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  padding-left: 16px;
+}
+
+.phase[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}`]})},_B=[`urlInput`],vB=[`grid`],yB=()=>[],bB=(e,t)=>t.node.id;function xB(e,t){if(e&1&&(G(0,` with `),P(1,`code`),G(2),uv(3,`json`),F()),e&2){U(2);let e=Y(0);E(2),K(dv(3,1,e.params))}}function SB(e,t){if(e&1&&(P(0,`span`,23),G(1,`match`),F(),G(2,` Matches `),P(3,`code`,24),G(4),F(),k(5,xB,4,3)),e&2){U();let e=Y(0),t=U();E(4),K(t.chainText(e)),E(),A(t.hasKeys(e.params)?5:-1)}}function CB(e,t){if(e&1&&(G(0,` Nearest: `),P(1,`code`),G(2),F()),e&2){U(2);let e=Y(0);E(2),K(e.nearest.join(`, `))}}function wB(e,t){if(e&1&&(P(0,`span`,25),G(1,`no match`),F(),G(2,` Matches no route (NG04002). `),k(3,CB,3,1)),e&2){U();let e=Y(0);E(3),A(e.nearest.length?3:-1)}}function TB(e,t){if(e&1&&(P(0,`div`,22),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function EB(e,t){if(e&1&&(G_(0),P(1,`div`,10)(2,`span`,21),G(3,`Result for `),P(4,`code`),G(5),F(),G(6,`:`),F(),k(7,SB,6,2)(8,wB,4,1),j(9,TB,2,1,`div`,22,dg),F()),e&2){let e=t,n=K_(e.result);E(),O(`data-matched`,n.matched),E(4),K(e.url),E(2),A(n.matched?7:8),E(2),M(n.notes)}}function DB(e,t){e&1&&I(0,`app-route-preview`,11),e&2&&N(`preview`,t)}function OB(e,t){if(e&1&&(P(0,`p`,12),G(1),F()),e&2){let e=U();E(),K(e.message())}}function kB(e,t){if(e&1&&(P(0,`p`,14),G(1),F()),e&2){let e=U();E(),K(e.navigationOff)}}function AB(e,t){if(e&1&&(P(0,`span`,26),G(1),F(),G(2,`. `)),e&2){let e=U(2);E(),K(e.countText())}}function jB(e,t){if(e&1&&G(0),e&2){let e=U(2);q(` `,e.plural(e.total(),`route`),`. `)}}function MB(e,t){e&1&&G(0),e&2&&q(` `,U(2).plural(t,`route`),` left out: the page lists at most 200 routes per level and 1000 in total. `)}function NB(e,t){if(e&1&&(P(0,`p`,17),G(1),k(2,AB,3,1)(3,jB,1,1),G(4,` Lazy routes show their children once loaded. `),k(5,MB,1,1),F()),e&2){let e,t=U();E(),q(` Generation `,t.page().generation,` · `),E(),A(t.filter()?2:3),E(3),A((e=t.page().configTruncated)?5:-1,e)}}function PB(e,t){e&1&&(P(0,`app-state`,18),G(1,` The page has not reported its route config yet. `),P(2,`p`,27),G(3,`It appears once the router initializes. Navigate in the app if it stays empty.`),F()())}function FB(e,t){if(e&1){let e=z();P(0,`app-state`,28),V(`clear`,function(){x(e);let t=U(),n=Gg(19);return t.setFilter(``),S(n.focus())}),G(1,` No routes match the filter. `),P(2,`p`,27),G(3,`Try a shorter path or a component name.`),F()()}}function IB(e,t){if(e&1){let e=z();P(0,`span`,46),V(`click`,function(){x(e);let t=U().$implicit;return S(U(2).toggle(t.node.id))}),F()}if(e&2){let e=U().$implicit;W(`open`,e.expanded)}}function LB(e,t){e&1&&I(0,`span`,37)}function RB(e,t){e&1&&(P(0,`span`,38),G(1,`active`),F())}function zB(e,t){if(e&1&&(P(0,`span`,38),G(1),F()),e&2){let e=U().$implicit;E(),q(`lazy `,e.node.lazy)}}function BB(e,t){if(e&1&&(P(0,`span`,38),G(1),F()),e&2){let e=U().$implicit;E(),q(`outlet `,e.node.outlet)}}function VB(e,t){if(e&1&&(P(0,`span`,39)(1,`span`,33),G(2,`declared in `),F(),I(3,`app-source-link`,47),F()),e&2){let e=U().$implicit;E(3),N(`file`,e.at.file)(`line`,e.at.line)}}function HB(e,t){if(e&1&&(P(0,`span`,41),G(1,`redirect `),P(2,`span`,48),G(3,`→`),F(),P(4,`code`),G(5),F()()),e&2){let e=U().$implicit;E(5),K(e.node.redirectTo)}}function UB(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,e.node.component??(e.node.lazy===`unloaded`?`lazy, not loaded yet`:e.node.kind),` `)}}function WB(e,t){if(e&1&&(P(0,`span`,38),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function GB(e,t){if(e&1&&(P(0,`span`,38),G(1),F()),e&2){let e=t.$implicit;E(),q(`resolve `,e)}}function KB(e,t){e&1&&(P(0,`span`,49),G(1,`–`),F(),P(2,`span`,33),G(3,`none`),F())}function qB(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,e.node.title,` `)}}function JB(e,t){e&1&&(P(0,`span`,49),G(1,`–`),F(),P(2,`span`,33),G(3,`none`),F())}function YB(e,t){if(e&1){let e=z();P(0,`input`,51),V(`input`,function(t){let n=x(e).$implicit,r=U(2).$implicit;return S(U(2).setParam(r.node.id,n,t.target.value))}),F()}if(e&2){let e=t.$implicit,n=U(2).$implicit,r=U(2);N(`placeholder`,e)(`value`,r.paramValues()[n.node.id]?.[e]??``),O(`aria-label`,e+` for `+n.node.fullPath)(`aria-invalid`,r.isInvalid(n.node,e)?`true`:null)(`aria-describedby`,r.isInvalid(n.node,e)?`route-tree-row-result`:null)}}function XB(e,t){if(e&1){let e=z();j(0,YB,1,5,`input`,50,dg),P(2,`button`,9),V(`click`,function(){x(e);let t=U().$implicit,n=Gg(1);return S(U(2).navigate(t.node,n))}),G(3,` Go `),F()}if(e&2){let e=U().$implicit,t=U(2);M(t.params(e.node)),E(2),N(`disabled`,!t.navigationAllowed()),O(`aria-describedby`,t.navigationAllowed()?null:`route-tree-writes-off`)(`aria-label`,`Navigate to `+e.node.fullPath)}}function ZB(e,t){if(e&1){let e=z();P(0,`button`,8),V(`click`,function(){x(e);let t=U().$implicit;return S(U(2).resolveLazy(t.node))}),G(1,` Read lazy `),F()}if(e&2){let e=U().$implicit;O(`aria-label`,`Read lazy routes of `+e.node.fullPath)}}function QB(e,t){if(e&1&&(P(0,`tr`,45)(1,`td`,52)(2,`p`,53),G(3),F()()()),e&2){let e=U(3);E(3),K(e.rowResult()?.text)}}function $B(e,t){if(e&1){let e=z();P(0,`tr`,34,3),V(`focus`,function(){let t=x(e).$implicit;return S(U(2).focusId.set(t.node.id))})(`keydown`,function(t){let n=x(e).$index;return S(U(2).onRowKey(t,n))}),P(2,`td`,35),k(3,IB,1,2,`span`,36)(4,LB,1,0,`span`,37),G(5),k(6,RB,2,0,`span`,38),k(7,zB,2,1,`span`,38),k(8,BB,2,1,`span`,38),k(9,VB,4,2,`span`,39),F(),P(10,`td`,40),k(11,HB,6,1,`span`,41)(12,UB,1,1),F(),P(13,`td`,40),j(14,WB,2,1,`span`,38,ug),j(16,GB,2,1,`span`,38,dg),k(18,KB,4,0),F(),P(19,`td`,40),k(20,qB,1,1)(21,JB,4,0),F(),P(22,`td`,42)(23,`div`,43),k(24,XB,4,3),k(25,ZB,2,1,`button`,44),F()()(),k(26,QB,4,1,`tr`,45)}if(e&2){let e=t.$implicit,n=U(2);W(`active`,n.isActive(e.node)),O(`data-id`,e.node.id)(`aria-level`,e.depth+1)(`aria-expanded`,e.expandable?e.expanded:null)(`tabindex`,e.node.id===n.focusRowId()?0:-1),E(2),f_(`padding-left`,6+e.depth*16,`px`),E(),A(e.expandable?3:4),E(2),q(` `,e.node.fullPath,` `),E(),A(n.isActive(e.node)?6:-1),E(),A(e.node.lazy?7:-1),E(),A(e.node.outlet?8:-1),E(),A(e.at?9:-1),E(2),A(e.node.redirectTo===void 0?12:11),E(3),M(n.guardList(e.node)),E(2),M(e.node.resolvers??iv(20,yB)),E(2),A(!n.guardList(e.node).length&&!e.node.resolvers?.length?18:-1),E(2),A(e.node.title?20:21),E(4),A(n.canNavigate(e.node)?24:-1),E(),A(e.node.kind===`lazy`&&e.node.lazy===`unloaded`?25:-1),E(),A(n.rowResult()?.id===e.node.id?26:-1)}}function eV(e,t){if(e&1&&(P(0,`div`,20)(1,`table`,29,2)(3,`thead`,30)(4,`tr`,31)(5,`th`,32),G(6,`Path`),F(),P(7,`th`,32),G(8,`Target`),F(),P(9,`th`,32),G(10,`Guards and resolvers`),F(),P(11,`th`,32),G(12,`Title`),F(),P(13,`th`,32)(14,`span`,33),G(15,`Actions`),F()()()(),P(16,`tbody`,30),j(17,$B,27,21,null,null,bB),F()()()),e&2){let e=U();E(17),M(e.rows())}}function tV(e,t){return`${e} of ${t} ${t===1?`route`:`routes`}`}var nV=class e{plural=cD;page=$.required();rpc=$(null);navigationAllowed=X(()=>OT(this.rpc(),`router`));navigationOff=Mw(`router`);sources=$([]);filter=w(``);testUrl=w(``);pageId=X(()=>this.page().pageId);match=Q({source:this.pageId,computation:()=>null});message=Q({source:this.pageId,computation:()=>``});rowResult=Q({source:this.pageId,computation:()=>null});paramValues=Q({source:this.pageId,computation:()=>({})});checkedRow=Q({source:this.pageId,computation:()=>null});filterAnnouncement=Q({source:this.pageId,computation:()=>``});preview=Q({source:this.pageId,computation:()=>null});predictSeq=0;announceFlip=!1;probeSeq=0;urlInput=Ov(`urlInput`);active=X(()=>new Set(this.page().activeIds??[]));collapsed=Q({source:this.pageId,computation:()=>new Set});focusId=Q({source:this.pageId,computation:()=>null});grid=Ov(`grid`);rows=X(()=>{let e=this.filter().toLowerCase(),t=this.sources(),n=this.collapsed(),r=[],i=(a,o)=>{for(let s of a){let a=HI(s,t),c=a&&VI(a),l=!e&&!!s.children?.length,u=l&&!n.has(s.id);(!e||s.fullPath.toLowerCase().includes(e)||s.component?.toLowerCase().includes(e)||c?.toLowerCase().includes(e))&&r.push({node:s,depth:o,source:c,at:a,expandable:l,expanded:u}),s.children&&(e||u)&&i(s.children,o+1)}};return i(this.page().config??[],0),r});focusRowId=X(()=>{let e=this.rows(),t=this.focusId();return e.some(e=>e.node.id===t)?t:e[0]?.node.id??null});toggle(e,t){this.collapsed.update(n=>{let r=new Set(n);return(t===void 0?!r.has(e):!t)?r.add(e):r.delete(e),r})}onRowKey(e,t){if(e.target!==e.currentTarget||e.altKey||e.ctrlKey||e.metaKey)return;let n=this.rows(),r=n[t];if(!r)return;let i=null;switch(e.key){case`ArrowDown`:i=Math.min(n.length-1,t+1);break;case`ArrowUp`:i=Math.max(0,t-1);break;case`Home`:i=0;break;case`End`:i=n.length-1;break;case`ArrowRight`:r.expandable&&!r.expanded?this.toggle(r.node.id,!0):r.expanded&&n[t+1]?.depth===r.depth+1&&(i=t+1);break;case`ArrowLeft`:if(r.expandable&&r.expanded)this.toggle(r.node.id,!1);else for(let e=t-1;e>=0;e--)if(n[e].depth<r.depth){i=e;break}break;default:return}e.preventDefault(),i!==null&&this.focusRow(n[i].node.id)}focusRow(e){this.focusId.set(e);let t=this.grid()?.nativeElement.querySelectorAll(`tr.tree-row`)??[];Array.from(t).find(t=>t.dataset.id===e)?.focus()}total=X(()=>{let e=t=>t.reduce((t,n)=>t+1+e(n.children??[]),0);return e(this.page().config??[])});countText=X(()=>tV(this.rows().length,this.total()));setFilter(e){this.filter.set(e);let t=this.rows().length,n=e?t?`${tV(t,this.total())} match.`:`No routes match.`:``;this.announceFlip=!this.announceFlip,this.filterAnnouncement.set(n&&(this.announceFlip?`${n}\u00a0`:n))}hasKeys(e){return Object.keys(e).length>0}isActive(e){return this.active().has(e.id)}guardList(e){return Object.entries(e.guards??{}).flatMap(([e,t])=>(t??[]).map(t=>`${e} ${t}`))}params(e){return(e.fullPath.match(/:([A-Za-z0-9_]+)/g)??[]).map(e=>e.slice(1))}canNavigate(e){return e.redirectTo===void 0&&!e.matcher&&!e.outlet&&!e.fullPath.includes(`**`)&&(!!e.component||e.kind===`component`||e.kind===`lazy`)}setParam(e,t,n){this.paramValues.update(r=>({...r,[e]:{...r[e],[t]:n}}))}missingParams(e){let t=this.paramValues()[e.id]??{};return this.params(e).filter(e=>!t[e])}isInvalid(e,t){return this.checkedRow()===e.id&&!this.paramValues()[e.id]?.[t]}chainText(e){return e.chain.map(e=>e.fullPath).join(` → `)}editUrl(e){this.testUrl.set(e),this.predictSeq++,this.probeSeq++,this.match.set(null),this.preview.set(null),this.message.set(``)}askForUrl(e){this.match.set(null),this.message.set(`Type a URL to ${e}, for example /users/42.`),this.urlInput()?.nativeElement.focus()}async predict(){let e=this.testUrl().trim(),t=++this.predictSeq;if(!e){this.askForUrl(`predict`);return}let n=this.pageId(),r=await GI(this.rpc(),`router-match`,{pageId:n,app:this.page().appId,url:e});t===this.predictSeq&&n===this.pageId()&&(this.preview.set(null),this.match.set(r&&{url:e,result:r}),r?this.message()===`Could not reach the page.`&&this.message.set(``):this.message.set(qI))}async whatHappens(){let e=this.testUrl().trim(),t=++this.predictSeq;if(!e){this.preview.set(null),this.askForUrl(`preview`);return}let n=this.pageId(),r=await GI(this.rpc(),`router-preview`,{pageId:n,app:this.page().appId,url:e});if(t!==this.predictSeq||n!==this.pageId())return;if(!r||`error`in r){this.preview.set(null),this.message.set(r?.error??`Could not reach the page.`);return}this.match.set(null),this.preview.set(r);let i=r.steps.length?`, ${cD(r.steps.length,`step`)} listed`:``,a=r.chain.length?`${r.matched?`Matches`:`Stops at`} ${r.chain.map(e=>e.path).join(` then `)}${i}.`:`${e} matches no route.`;this.message.set(r.stopped?`${a} ${r.stopped}`:a)}async probe(){let e=this.testUrl().trim(),t=++this.probeSeq;if(!e){this.askForUrl(`probe`);return}this.message.set(`Running the real matcher in the app…`);let n=this.pageId(),r=await JI(this.rpc(),n,{action:`probe`,url:e},this.page().appId);if(t===this.probeSeq&&n===this.pageId()){if(r.error){this.message.set(String(r.error));return}this.message.set(r.matched?`The app recognized ${e} and its canMatch guards passed. The probe stopped before canActivate guards and resolvers, so those did not run. See the probe entry in Navigations.`:typeof r.redirectedTo==`string`?`A canMatch guard or the navigation error handler redirected ${e} to ${r.redirectedTo}. The probe stopped that navigation before it rendered anything.`:`The app could not recognize ${e}: ${String(r.reason??``)}`)}}async navigate(e,t){let n=this.missingParams(e);if(n.length){this.checkedRow.set(e.id),this.rowResult.set({id:e.id,text:`Fill in ${n.map(e=>`:${e}`).join(`, `)} to navigate.`}),Array.from(t?.querySelectorAll(`input.param`)??[]).find(e=>!e.value)?.focus();return}this.checkedRow.set(null),this.rowResult.set({id:e.id,text:`Navigating to ${e.fullPath}…`});let r=this.pageId(),i=await JI(this.rpc(),r,{action:`navigate`,pattern:e.fullPath,params:this.paramValues()[e.id]??{}},this.page().appId);r===this.pageId()&&this.rowResult.set({id:e.id,text:i.error?String(i.error):`Navigation #${i.id}: ${i.outcome}${i.finalUrl?` at ${i.finalUrl}`:``}.`})}async resolveLazy(e){let t=this.pageId(),n=await JI(this.rpc(),t,{action:`resolve-lazy`,id:e.id},this.page().appId);if(t!==this.pageId())return;if(n.error){this.rowResult.set({id:e.id,text:String(n.error)});return}let r=n.routes??[];this.rowResult.set({id:e.id,text:`${e.fullPath} declares ${cD(r.length,`route`)}: ${r.map(e=>`/${e.path}`).join(`, `)}. The router loads them for real on the first navigation that needs them.`})}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-tree`]],viewQuery:function(e,t){e&1&&Ug(t.urlInput,_B,5)(t.grid,vB,5),e&2&&Wg(2)},inputs:{page:[1,`page`],rpc:[1,`rpc`],sources:[1,`sources`]},decls:26,vars:12,consts:[[`urlInput`,``],[`filterInput`,``],[`grid`,``],[`rowEl`,``],[1,`test`,3,`submit`],[`for`,`test-url`],[`id`,`test-url`,`type`,`text`,`placeholder`,`/users/42`,1,`field`,3,`input`,`value`],[`type`,`submit`,1,`small`,`primary`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`result`],[3,`preview`],[`role`,`status`,1,`message`],[`role`,`status`,1,`visually-hidden`],[`id`,`route-tree-writes-off`,1,`message`],[1,`filter-row`],[`placeholder`,`Filter by path, component or file`,`saveKey`,`router-config`,1,`filter`,3,`valueChange`,`value`],[1,`muted`,`summary`],[`kind`,`empty`],[`kind`,`no-match`],[`role`,`region`,`aria-label`,`Live route config`,`tabindex`,`0`,1,`table-scroll`],[1,`for`],[1,`muted`],[`data-tone`,`good`,1,`badge`],[1,`chain`],[`data-tone`,`bad`,1,`badge`],[1,`count`],[`detail`,``],[`kind`,`no-match`,3,`clear`],[`role`,`treegrid`,`aria-label`,`Routes`],[`role`,`rowgroup`],[`role`,`row`],[`role`,`columnheader`,`scope`,`col`],[1,`visually-hidden`],[`role`,`row`,1,`tree-row`,3,`focus`,`keydown`],[`role`,`gridcell`,1,`path`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[1,`tag`],[1,`src`],[`role`,`gridcell`],[1,`redirect`],[`role`,`gridcell`,1,`actions`],[1,`actions-inner`],[`type`,`button`,1,`small`],[`role`,`row`,1,`row-result`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[3,`file`,`line`],[`aria-hidden`,`true`],[`aria-hidden`,`true`,1,`nil`],[`type`,`text`,1,`field`,`param`,3,`placeholder`,`value`],[`type`,`text`,1,`field`,`param`,3,`input`,`placeholder`,`value`],[`role`,`gridcell`,`colspan`,`5`],[`id`,`route-tree-row-result`]],template:function(e,t){if(e&1){let e=z();P(0,`form`,4),V(`submit`,function(n){return x(e),n.preventDefault(),S(t.predict())}),P(1,`label`,5),G(2,`Test a URL`),F(),P(3,`input`,6,0),V(`input`,function(e){return t.editUrl(e.target.value)}),F(),P(5,`button`,7),G(6,`Predict`),F(),P(7,`button`,8),V(`click`,function(){return t.whatHappens()}),G(8,`What happens`),F(),P(9,`button`,9),V(`click`,function(){return t.probe()}),G(10,` Probe in app `),F()(),k(11,EB,11,4,`div`,10),k(12,DB,1,1,`app-route-preview`,11),k(13,OB,2,1,`p`,12),P(14,`p`,13),G(15),F(),k(16,kB,2,1,`p`,14),P(17,`div`,15)(18,`app-search-field`,16,1),V(`valueChange`,function(e){return t.setFilter(e)}),F(),k(20,NB,6,3,`p`,17),F(),P(21,`p`,13),G(22),F(),k(23,PB,4,0,`app-state`,18)(24,FB,4,0,`app-state`,19)(25,eV,19,0,`div`,20)}if(e&2){let e,n;E(3),N(`value`,t.testUrl()),E(6),N(`disabled`,!t.navigationAllowed()),O(`aria-describedby`,t.navigationAllowed()?null:`route-tree-writes-off`),E(2),A((e=t.match())?11:-1,e),E(),A((n=t.preview())?12:-1,n),E(),A(t.message()?13:-1),E(2),K(t.rowResult()?.text),E(),A(t.navigationAllowed()?-1:16),E(2),N(`value`,t.filter()),E(2),A(t.page().config?20:-1),E(2),K(t.filterAnnouncement()),E(),A(t.page().config?t.rows().length?25:24:23)}},dependencies:[iD,gB,aM,aR,fy],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.test[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.test[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+  margin-right: 4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.test[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.result[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  padding: 10px 14px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.result[data-matched=true][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%ok);
+}
+
+.result[data-matched=false][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%danger);
+}
+
+.result[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  flex-basis: 100%;
+  font-size: 12px;
+}
+
+.result[_ngcontent-%COMP%]   .for[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.result[_ngcontent-%COMP%]   .for[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.chain[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+
+.message[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.filter-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+}
+
+.filter[_ngcontent-%COMP%] {
+  flex: 0 1 320px;
+  min-width: 0;
+}
+
+.summary[_ngcontent-%COMP%] {
+  flex: 1 1 240px;
+  margin: 0;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.summary[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 600;
+}
+
+td[_ngcontent-%COMP%] {
+  vertical-align: middle;
+}
+
+.redirect[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.src[_ngcontent-%COMP%] {
+  display: block;
+  margin-top: 2px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+
+.tree-row[_ngcontent-%COMP%] {
+  cursor: default;
+}
+
+.tree-row[_ngcontent-%COMP%]:focus {
+  outline: none;
+}
+
+.tree-row[_ngcontent-%COMP%]:focus-visible   td[_ngcontent-%COMP%] {
+  box-shadow: inset 0 2px 0 var(--%NS%accent), inset 0 -2px 0 var(--%NS%accent);
+}
+
+.tree-row[_ngcontent-%COMP%]:focus-visible   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent), inset 0 2px 0 var(--%NS%accent), inset 0 -2px 0 var(--%NS%accent);
+}
+
+.tree-row[_ngcontent-%COMP%]:focus-visible   td[_ngcontent-%COMP%]:last-child {
+  box-shadow: inset -2px 0 0 var(--%NS%accent), inset 0 2px 0 var(--%NS%accent), inset 0 -2px 0 var(--%NS%accent);
+}
+
+.twisty[_ngcontent-%COMP%], 
+.twisty-space[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+
+.twisty[_ngcontent-%COMP%] {
+  position: relative;
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.twisty[_ngcontent-%COMP%]::before {
+  position: absolute;
+  top: 4px;
+  left: 6px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+  content: "";
+  transition: transform 0.15s var(--%NS%ease);
+}
+
+.twisty.open[_ngcontent-%COMP%]::before {
+  transform: rotate(90deg);
+}
+
+.twisty[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .twisty[_ngcontent-%COMP%]::before {
+    transition: none;
+  }
+}
+tr.active[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+tr.active[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
+}
+
+tr.active[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 3px 0 0 var(--%NS%accent);
+}
+
+.actions[_ngcontent-%COMP%] {
+  width: 1%;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  white-space: nowrap;
+}
+
+.actions-inner[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.param[_ngcontent-%COMP%] {
+  width: 96px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.param[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+}
+
+.row-result[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding-top: 0;
+  background: transparent;
+}
+
+.row-result[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 480px) {
+  .filter[_ngcontent-%COMP%] {
+    flex-basis: 100%;
+  }
+}`]})},rV=(e,t)=>t.id;function iV(e,t){if(e&1){let e=z();P(0,`div`,4)(1,`span`,5),G(2,`Page`),F(),P(3,`app-select`,6),V(`valueChange`,function(t){return x(e),S(U(2).pageId.set(t))}),F()()}if(e&2){let e=U(),t=U();E(3),N(`options`,t.pageOptions())(`value`,e.pageId)}}function aV(e,t){if(e&1){let e=z();P(0,`div`,4)(1,`span`,7),G(2,`App`),F(),P(3,`app-select`,8),V(`valueChange`,function(t){return x(e),S(U(2).appId.set(t))}),F()()}if(e&2){let e=U(),t=U();E(3),N(`options`,t.appOptions())(`value`,e.appId??``)}}function oV(e,t){if(e&1&&(k(0,iV,4,2,`div`,4),k(1,aV,4,2,`div`,4)),e&2){let e=U();A(e.pages().length>1?0:-1),E(),A(e.appOptions().length>1?1:-1)}}function sV(e,t){if(e&1){let e=z();P(0,`app-state`,9),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Could not load the live router state. `),P(2,`p`,10),G(3,` Check that the dev server with Pangular Inspector is still running, then retry. `),F()()}}function cV(e,t){e&1&&(P(0,`app-state`,2),G(1,`Loading the live router state…`),F())}function lV(e,t){if(e&1&&(P(0,`span`,15),G(1),F(),P(2,`span`,16),G(3),F()),e&2){let e=U(3);E(),K(e.problems()),E(2),q(`, `,e.problems(),` problem navigations`)}}function uV(e,t){if(e&1){let e=z();P(0,`button`,14),V(`click`,function(){let t=x(e).$implicit;return S(U(2).selected.set(t.id))}),G(1),k(2,lV,4,2),F()}if(e&2){let e=t.$implicit,n=U(2);N(`id`,`router-tab-`+e.id),O(`aria-selected`,e.id===n.selected())(`aria-controls`,`router-panel-`+e.id)(`tabindex`,e.id===n.selected()?0:-1),E(),q(` `,e.label,` `),E(),A(e.id===`navigations`&&n.problems()>0?2:-1)}}function dV(e,t){if(e&1){let e=z();P(0,`app-route-current`,21),V(`showComponent`,function(t){return x(e),S(U(3).showComponent.emit(t))}),F()}if(e&2){let e=U(2),t=U();N(`page`,e)(`rpc`,t.rpc())}}function fV(e,t){if(e&1){let e=z();P(0,`app-route-timeline`,22),V(`compare`,function(t){return x(e),S(U(3).compareFrom(t))}),F()}if(e&2){let e=U(2),t=U();N(`page`,e)(`rpc`,t.rpc())}}function pV(e,t){if(e&1&&I(0,`app-route-diff`,18),e&2){let e=U(2),t=U();N(`page`,e)(`rpc`,t.rpc())(`start`,t.compareStart())}}function mV(e,t){if(e&1&&I(0,`app-route-tree`,19),e&2){let e=U(2),t=U();N(`page`,e)(`rpc`,t.rpc())(`sources`,t.sources())}}function hV(e,t){e&1&&I(0,`app-route-setup`,20),e&2&&N(`page`,U(2))}function gV(e,t){if(e&1&&I(0,`app-route-lint`,17),e&2){let e=U(2),t=U();N(`page`,e)(`rpc`,t.rpc())}}function _V(e,t){if(e&1&&k(0,dV,1,2,`app-route-current`,17)(1,fV,1,2,`app-route-timeline`,17)(2,pV,1,3,`app-route-diff`,18)(3,mV,1,3,`app-route-tree`,19)(4,hV,1,1,`app-route-setup`,20)(5,gV,1,2,`app-route-lint`,17),e&2){let e;A((e=U(2).selected())===`current`?0:e===`navigations`?1:e===`compare`?2:e===`routes`?3:e===`setup`?4:e===`lint`?5:-1)}}function vV(e,t){if(e&1){let e=z();P(0,`div`,11),V(`keydown`,function(t){return x(e),S(U().onKey(t))}),j(1,uV,3,6,`button`,12,rV),F(),P(3,`div`,13),j(4,_V,6,1,null,null,dg),F()}if(e&2){let e=U();E(),M(e.tabs),E(2),N(`id`,`router-panel-`+e.selected()),O(`aria-labelledby`,`router-tab-`+e.selected()),E(),M(e.viewKey())}}function yV(e,t){e&1&&(P(0,`div`,3)(1,`p`,23),G(2,`No page is reporting router state yet.`),F(),P(3,`p`,24),G(4,` Open the app in a browser. This view updates as soon as a page connects. `),F()())}var bV=[{id:`current`,label:`Current`},{id:`navigations`,label:`Navigations`},{id:`compare`,label:`Compare`},{id:`routes`,label:`Config`},{id:`setup`,label:`Setup`},{id:`lint`,label:`Lint`}],xV=class e{rpc=$(null);sources=$([]);showComponent=xv();tabs=bV;selected=w(`current`);compareStart=w(null);pages=w([]);hostPageId=tT();loading=w(!0);failed=w(!1);pageId=Q({source:this.pages,computation:(e,t)=>nT(Object.fromEntries(e.map(e=>[e.pageId,e])),{chosen:t?.value??null,host:this.hostPageId,previous:null})});unsubscribe=null;destroyRef=b(Os);reported=X(()=>this.pages().find(e=>e.pageId===this.pageId())??null);appId=Q({source:this.reported,computation:(e,t)=>{let n=UI(e);if(!n.length)return null;let r=t?.value;return n.some(e=>e.id===r)?r:n[0].id}});page=X(()=>{let e=this.reported();return e?WI(e,this.appId()):null});viewKey=X(()=>[`${this.pageId()??``} ${this.appId()??``}`]);appOptions=X(()=>UI(this.reported()).map(e=>({value:e.id,label:e.name===e.selector?`<${e.selector}>`:`${e.name} <${e.selector}>`,hint:(e.primary?this.reported()?.snapshot?.url:e.snapshot?.url)??e.id})));problems=X(()=>(this.page()?.navigations??[]).filter(e=>!e.probe&&[`failed`,`cancelled`,`redirected`].includes(e.outcome)).length);constructor(){T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`router`);if(this.destroyRef.destroyed)return;let n=e=>{this.pages.set(e?.pages??[])};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}compareFrom(e){this.compareStart.set(e),this.selected.set(`compare`),setTimeout(()=>document.getElementById(`router-tab-compare`)?.focus())}retry(){let e=this.rpc();e&&this.load(e)}pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.snapshot?.url??e.pageId,hint:e.pageId})));onKey(e){let t=this.tabs.map(e=>e.id),n=t.indexOf(this.selected()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.selected.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#router-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-live-route`]],inputs:{rpc:[1,`rpc`],sources:[1,`sources`]},outputs:{showComponent:`showComponent`},decls:8,vars:2,consts:[[1,`section-head`],[`kind`,`error`],[`kind`,`loading`],[1,`empty`],[1,`page-pick`],[`id`,`live-route-page-label`,1,`page-label`],[`labelledBy`,`live-route-page-label`,3,`valueChange`,`options`,`value`],[`id`,`live-route-app-label`,1,`page-label`],[`labelledBy`,`live-route-app-label`,3,`valueChange`,`options`,`value`],[`kind`,`error`,3,`retry`],[`detail`,``],[`role`,`tablist`,`aria-label`,`Router views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[`aria-hidden`,`true`,1,`count`],[1,`visually-hidden`],[3,`page`,`rpc`],[3,`page`,`rpc`,`start`],[3,`page`,`rpc`,`sources`],[3,`page`],[3,`showComponent`,`page`,`rpc`],[3,`compare`,`page`,`rpc`],[1,`empty-title`],[1,`muted`]],template:function(e,t){if(e&1&&(P(0,`div`,0)(1,`h2`),G(2,`Live router`),F(),k(3,oV,2,2),F(),k(4,sV,4,0,`app-state`,1)(5,cV,2,0,`app-state`,2)(6,vV,6,2)(7,yV,5,0,`div`,3)),e&2){let e,n;E(3),A((e=t.page())?3:-1,e),E(),A(t.failed()?4:t.loading()?5:(n=t.page())?6:7,n)}},dependencies:[aR,PL,QL,yR,NR,Xz,nV,JE],styles:[`[_nghost-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  margin-bottom: 32px;
+}
+
+.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 34px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.retry[_ngcontent-%COMP%] {
+  height: 34px;
+  margin-top: 8px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.retry[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.retry[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.page-pick[_ngcontent-%COMP%] {
+  display: flex;
+  flex: 0 1 420px;
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.page-label[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.page-pick[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  width: 100%;
+}
+
+.tabs[_ngcontent-%COMP%] {
+  display: flex;
+  justify-self: start;
+  max-width: 100%;
+  gap: 2px;
+  padding: 3px;
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: 10px;
+  background: var(--%NS%bg);
+}
+
+[role=tab][_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 12px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+[role=tab][_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+[role=tab][aria-selected=true][_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
+}
+
+[role=tab][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.panel[_ngcontent-%COMP%] {
+  min-width: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.count[_ngcontent-%COMP%] {
+  min-width: 18px;
+  padding: 0 6px;
+  border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}`]})},SV=[`*`];function CV(e,t){return e?.column===t?e.direction===`ascending`?{column:t,direction:`descending`}:null:{column:t,direction:`ascending`}}var wV=new Intl.Collator(void 0,{numeric:!0,sensitivity:`base`});function TV(e,t){let n=e==null||e===``,r=t==null||t===``;return n||r?n===r?0:n?1:-1:typeof e==`number`&&typeof t==`number`?e-t:wV.compare(String(e),String(t))}function EV(e,t,n){let r=t&&n[t.column];if(!t||!r)return e;let i=t.direction===`ascending`?1:-1;return e.map((e,t)=>({row:e,index:t,value:r(e)})).sort((e,t)=>{let n=e.value===void 0||e.value===null||e.value===``;return n===(t.value===void 0||t.value===null||t.value===``)?i*TV(e.value,t.value)||e.index-t.index:n?1:-1}).map(({row:e})=>e)}var DV=class e{column=$.required({alias:`appSortHeader`});sort=Ev(null);direction=X(()=>{let e=this.sort();return e?.column===this.column()?e.direction:null});toggle(){this.sort.set(CV(this.sort(),this.column()))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`th`,`appSortHeader`,``]],hostAttrs:[1,`sortable`],hostVars:1,hostBindings:function(e,t){e&2&&O(`aria-sort`,t.direction())},inputs:{column:[1,`appSortHeader`,`column`],sort:[1,`sort`]},outputs:{sort:`sortChange`},ngContentSelectors:SV,decls:3,vars:1,consts:[[`type`,`button`,1,`sort-button`,3,`click`],[`aria-hidden`,`true`,1,`arrow`]],template:function(e,t){e&1&&(Bg(),L(0,`button`,0),H(`click`,function(){return t.toggle()}),Vg(1),Sg(2,`span`,1),R()),e&2&&(E(2),O(`data-direction`,t.direction()))},styles:[`.sort-button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  max-width: 100%;
+  margin: -2px -4px;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: var(--%NS%radius-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+
+.sort-button[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.sort-button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.arrow[_ngcontent-%COMP%] {
+  display: inline-block;
+  flex: none;
+  width: 0;
+  height: 0;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  opacity: 0.45;
+}
+
+.arrow[_ngcontent-%COMP%]:not([data-direction]) {
+  border-top: 4px solid currentColor;
+  border-bottom: 0;
+  transform: translateY(1px);
+}
+
+.arrow[data-direction=ascending][_ngcontent-%COMP%] {
+  border-bottom: 5px solid var(--%NS%accent);
+  opacity: 1;
+}
+
+.arrow[data-direction=descending][_ngcontent-%COMP%] {
+  border-top: 5px solid var(--%NS%accent);
+  opacity: 1;
+}`]})};function OV(e,t){e&1&&G(0,` The Config view above shows what the router uses. `)}function kV(e,t){if(e&1){let e=z();P(0,`button`,14),V(`click`,function(){x(e);let t=U();return S(t.expanded.set(!t.expanded()))}),G(1),F()}if(e&2){let e=U();O(`aria-expanded`,e.expanded()),E(),q(` `,e.expanded()?`Hide table`:`Show table`,` `)}}function AV(e,t){e&1&&(G(0,` Run `),P(1,`code`),G(2,`pangular build`),F(),G(3,` again to rebuild the report. `))}function jV(e,t){e&1&&G(0,` Check that the dev server is running, then retry. `)}function MV(e,t){if(e&1){let e=z();P(0,`app-state`,15),V(`retry`,function(){return x(e),S(U().refresh())}),G(1,` Could not scan the route files. `),P(2,`p`,16),k(3,AV,4,0)(4,jV,1,0),F()()}if(e&2){let e=U();N(`retrying`,e.loading()),E(3),A(e.staticReport()?3:4)}}function NV(e,t){e&1&&(P(0,`app-state`,13),G(1,`Scanning routes…`),F())}function PV(e,t){if(e&1){let e=z();P(0,`app-state`,19),V(`clear`,function(){x(e);let t=U(2),n=Gg(14);return t.filter.set(``),S(n.focus())}),G(1,` No routes match the filter. `),P(2,`p`,16),G(3,`Search by path, component, guard, title or file name.`),F()()}}function FV(e,t){e&1&&(P(0,`app-state`,18),G(1,` No routes found. `),P(2,`p`,16),G(3,` Routes are read from `),P(4,`code`),G(5,`*.routes.ts`),F(),G(6,` and `),P(7,`code`),G(8,`*routing.module.ts`),F(),G(9,` files, the files they lazy load, plus Analog pages. Add one and refresh. `),F()())}function IV(e,t){e&1&&k(0,PV,4,0,`app-state`,17)(1,FV,10,0,`app-state`,18),e&2&&A(+!U().routes().length)}function LV(e,t){if(e&1&&(P(0,`span`,28),G(1),F()),e&2){let e=U().$implicit;E(),K(e.kind)}}function RV(e,t){if(e&1&&(P(0,`span`,29)(1,`span`,33),G(2,`→`),F(),P(3,`span`,34),G(4,`redirects to`),F(),G(5),F()),e&2){let e=U().$implicit;E(5),q(` `,e.redirectTo)}}function zV(e,t){if(e&1&&(P(0,`code`,30),G(1),F()),e&2){let e=U().$implicit;E(),K(e.component)}}function BV(e,t){e&1&&(P(0,`span`,35),G(1,`–`),F(),P(2,`span`,34),G(3,`none`),F())}function VV(e,t){if(e&1&&(P(0,`span`,28),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function HV(e,t){e&1&&(P(0,`span`,35),G(1,`–`),F(),P(2,`span`,34),G(3,`none`),F())}function UV(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,e.title,` `)}}function WV(e,t){e&1&&(P(0,`span`,35),G(1,`–`),F(),P(2,`span`,34),G(3,`none`),F())}function GV(e,t){if(e&1&&(P(0,`tr`)(1,`td`,27),G(2),k(3,LV,2,1,`span`,28),F(),P(4,`td`),k(5,RV,6,1,`span`,29)(6,zV,2,1,`code`,30)(7,BV,4,0),F(),P(8,`td`),j(9,VV,2,1,`span`,28,ug,!1,HV,4,0),F(),P(12,`td`),k(13,UV,1,1)(14,WV,4,0),F(),P(15,`td`,31),I(16,`app-source-link`,32),F()()),e&2){let e=t.$implicit,n=U(2);E(2),q(` `,e.fullPath,` `),E(),A(e.kind===`page`?-1:3),E(2),A(e.redirectTo===void 0?e.component?6:7:5),E(4),M(n.checks(e)),E(4),A(e.title?13:14),E(3),N(`file`,e.file)(`line`,e.line)}}function KV(e,t){if(e&1){let e=z();P(0,`p`,20),G(1),F(),P(2,`div`,21)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,22),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.sort,t)||(n.sort=t),S(t)}),G(7,`Path`),F(),P(8,`th`,23),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.sort,t)||(n.sort=t),S(t)}),G(9,`Component / Target`),F(),P(10,`th`,24),G(11,`Guards and resolvers`),F(),P(12,`th`,25),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.sort,t)||(n.sort=t),S(t)}),G(13,`Title`),F(),P(14,`th`,26),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.sort,t)||(n.sort=t),S(t)}),G(15,`Declared in`),F()()(),P(16,`tbody`),j(17,GV,17,7,`tr`,null,ug),F()()()}if(e&2){let e=U();E(),R_(` `,e.filtered().length,` of `,e.routes().length,` route entries, `,e.navigable(),` navigable `),E(5),V_(`sort`,e.sort),E(2),V_(`sort`,e.sort),E(4),V_(`sort`,e.sort),E(2),V_(`sort`,e.sort),E(3),M(e.sorted())}}var qV=class e{rpc=$(null);showComponent=xv();staticReport=X(()=>cT(this.rpc()));routes=w([]);filter=w(``);loading=w(!1);error=w(!1);live=Ov(xV);liveHasConfig=X(()=>!!this.live()?.page()?.config);expanded=Q(()=>!this.liveHasConfig());navigable=X(()=>this.filtered().filter(e=>e.kind===`page`).length);filtered=X(()=>{let e=this.filter().toLowerCase().trim(),t=this.routes();return e?t.filter(t=>t.fullPath.toLowerCase().includes(e)||t.component&&t.component.toLowerCase().includes(e)||t.redirectTo&&t.redirectTo.toLowerCase().includes(e)||t.title&&t.title.toLowerCase().includes(e)||this.checks(t).some(t=>t.toLowerCase().includes(e))||t.file.toLowerCase().includes(e)):t});sort=w(null);sorted=X(()=>EV(this.filtered(),this.sort(),{path:e=>e.fullPath,target:e=>e.component??e.redirectTo,title:e=>e.title,file:e=>`${e.file}:${e.line??0}`}));constructor(){T(()=>{this.rpc()&&this.refresh()})}checks(e){return[...Object.entries(e.guards??{}).flatMap(([e,t])=>t.map(t=>`${e} ${t}`)),...(e.resolvers??[]).map(e=>`resolve ${e}`)]}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.error.set(!1);try{let t=await e.scope(`pangular`).rpc.call(`get-routes`);this.routes.set(t)}catch{this.error.set(!0)}finally{this.loading.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-route-inspector`]],viewQuery:function(e,t){e&1&&Ug(t.live,xV,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`]},outputs:{showComponent:`showComponent`},decls:21,vars:9,consts:[[`filterInput`,``],[1,`page-intro`],[3,`showComponent`,`rpc`,`sources`],[`aria-labelledby`,`config-heading`,1,`config`],[1,`section-head`],[`id`,`config-heading`],[1,`muted`,`hint`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`],[`id`,`config-body`,1,`config-body`,3,`hidden`],[1,`toolbar`],[`placeholder`,`Filter by path, component or file`,`saveKey`,`router-source`,3,`valueChange`,`value`],[`type`,`button`,1,`small`,3,`click`],[`kind`,`error`,3,`retrying`],[`kind`,`loading`],[`type`,`button`,`aria-controls`,`config-body`,1,`small`,`toggle`,3,`click`],[`kind`,`error`,3,`retry`,`retrying`],[`detail`,``],[`kind`,`no-match`],[`kind`,`empty`],[`kind`,`no-match`,3,`clear`],[1,`muted`,`count`],[`role`,`region`,`aria-label`,`Source route config table`,`tabindex`,`0`,1,`table-scroll`],[`scope`,`col`,`appSortHeader`,`path`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`target`,3,`sortChange`,`sort`],[`scope`,`col`],[`scope`,`col`,`appSortHeader`,`title`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`file`,3,`sortChange`,`sort`],[1,`path`],[1,`tag`],[1,`redirect`],[1,`component`],[1,`file`],[3,`file`,`line`],[`aria-hidden`,`true`],[1,`visually-hidden`],[`aria-hidden`,`true`,1,`nil`]],template:function(e,t){if(e&1){let e=z();P(0,`p`,1),G(1,` The live route, every navigation, the route config the router uses, the router setup and a route lint, read from the live page. Below them, the routes your source files declare. `),F(),P(2,`app-live-route`,2),V(`showComponent`,function(e){return t.showComponent.emit(e)}),F(),P(3,`section`,3)(4,`div`,4)(5,`h2`,5),G(6,`Source route config`),F(),P(7,`span`,6),G(8,` Read from your source files. `),k(9,OV,1,0),F(),k(10,kV,2,2,`button`,7),F(),P(11,`div`,8)(12,`div`,9)(13,`app-search-field`,10,0),U_(`valueChange`,function(n){return x(e),H_(t.filter,n)||(t.filter=n),S(n)}),F(),P(15,`button`,11),V(`click`,function(){return t.refresh()}),G(16),F()(),k(17,MV,5,2,`app-state`,12)(18,NV,2,0,`app-state`,13)(19,IV,2,1)(20,KV,19,7),F()()}e&2&&(E(2),N(`rpc`,t.rpc())(`sources`,t.routes()),E(7),A(t.liveHasConfig()?9:-1),E(),A(t.liveHasConfig()?10:-1),E(),N(`hidden`,!t.expanded()),E(2),V_(`value`,t.filter),E(2),O(`aria-busy`,t.loading()),E(),q(` `,t.loading()?`Scanning…`:`Refresh`,` `),E(),A(t.error()?17:t.loading()&&t.routes().length===0?18:t.filtered().length===0?19:20))},dependencies:[iD,xV,aM,aR,DV],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.nil[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  min-height: 20px;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  line-height: 1.4;
+  vertical-align: middle;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.badge[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.badge[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+button.small[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+button.small[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+button.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button.small.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button.small[_ngcontent-%COMP%]:focus-visible, 
+.table-scroll[_ngcontent-%COMP%]:focus-visible, 
+input[type=checkbox][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+input.field[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input.field[_ngcontent-%COMP%] {
+  text-overflow: ellipsis;
+}
+
+input.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input.field[_ngcontent-%COMP%]:hover:not(:focus), 
+select[_ngcontent-%COMP%]:hover:not(:focus) {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 50%, var(--%NS%control-border));
+}
+
+input.field[_ngcontent-%COMP%]:focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 480px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px 24px;
+  margin: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  font-size: 13px;
+}
+
+.facts[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  background: color-mix(in srgb, var(--%NS%surface-2) 60%, var(--%NS%surface));
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-align: left;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  line-height: 1.5;
+  vertical-align: top;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 8px 0 -4px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 480px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2px;
+  }
+  .facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}
+.page-intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.config[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  align-items: baseline;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hint[_ngcontent-%COMP%], 
+.count[_ngcontent-%COMP%] {
+  margin: 0;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin-bottom: -4px;
+  padding: 0 4px;
+}
+
+.config-body[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.config-body[hidden][_ngcontent-%COMP%] {
+  display: none;
+}
+
+.toggle[_ngcontent-%COMP%] {
+  margin-left: auto;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.toolbar[_ngcontent-%COMP%]   .field[_ngcontent-%COMP%] {
+  flex: 1;
+  min-width: 0;
+}
+
+.component[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.redirect[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  min-width: 160px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}`]})},JV=[`ArrowDown`,`ArrowUp`,`Home`,`End`],YV=`[aria-pressed="true"], [aria-expanded="true"], [aria-current]:not([aria-current="false"]), .selected`,XV=class e{appRovingList=$(``);rovingWindow=$(null);host=b(Rl).nativeElement;current=null;focusInside=!1;wasSelected=new WeakSet;constructor(){let e=b(Os);Sd(()=>{if(this.sync(),typeof MutationObserver>`u`)return;let t=new MutationObserver(e=>{for(let t of e){let e=t.target;t.type===`attributes`&&this.isItem(e)&&e.matches(YV)&&!this.wasSelected.has(e)&&(this.current=e)}this.sync()});t.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`aria-pressed`,`aria-expanded`,`aria-current`,`class`]}),e.onDestroy(()=>t.disconnect())})}isItem(e){let t=this.appRovingList();return!!t&&!!e?.matches(t)}items(){let e=this.appRovingList();return e?[...this.host.querySelectorAll(e)]:[]}sync(){let e=this.items(),t=!1;if(!this.current||!this.host.contains(this.current)){let n=document.activeElement;t=this.focusInside&&(!n||n===document.body),this.current=e.find(e=>e.matches(YV))??e[0]??null}for(let t of e){t.matches(YV)?this.wasSelected.add(t):this.wasSelected.delete(t);let e=t===this.current?`0`:`-1`;t.getAttribute(`tabindex`)!==e&&t.setAttribute(`tabindex`,e)}t&&this.current?.focus()}onFocusIn(e){this.focusInside=!0;let t=e.target;this.isItem(t)&&t!==this.current&&(this.current?.setAttribute(`tabindex`,`-1`),this.current=t,t.setAttribute(`tabindex`,`0`))}onFocusOut(e){let t=e.relatedTarget;if(t&&this.host.contains(t))return;let n=e.target;setTimeout(()=>{n?.isConnected!==!1&&!this.host.contains(document.activeElement)&&(this.focusInside=!1)})}onKey(e){if(!JV.includes(e.key)||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.target;if(!this.isItem(t))return;let n=this.items(),r=n.indexOf(t);if(r<0)return;let i=this.rovingWindow();if(i?.enabled()&&(e.key===`Home`||e.key===`End`)){e.preventDefault();let t=e.key===`Home`?0:i.count-1,n=()=>{let e=this.host.querySelector(`[data-vindex="${t}"]`);(e?.matches(this.appRovingList())?e:e?.querySelector(this.appRovingList()))?.focus()};i.rendered(t)?n():i.reveal(t,n);return}let a={ArrowDown:Math.min(r+1,n.length-1),ArrowUp:Math.max(r-1,0),Home:0,End:n.length-1}[e.key];e.preventDefault(),n[a].focus()}static ɵfac=function(t){return new(t||e)};static ɵdir=Sh({type:e,selectors:[[``,`appRovingList`,``]],hostBindings:function(e,t){e&1&&V(`keydown`,function(e){return t.onKey(e)})(`focusin`,function(e){return t.onFocusIn(e)})(`focusout`,function(e){return t.onFocusOut(e)})},inputs:{appRovingList:[1,`appRovingList`],rovingWindow:[1,`rovingWindow`]}})},ZV=8,QV=e=>!!e&&typeof e==`object`&&!Array.isArray(e);function $V(e,t){return/^[A-Za-z_$][\w$]*$/.test(t)?e?`${e}.${t}`:t:`${e}[${JSON.stringify(t)}]`}function eH(e,t){if(Object.is(e,t))return!0;if(!e||!t||typeof e!=`object`||typeof t!=`object`)return!1;try{return JSON.stringify(e)===JSON.stringify(t)}catch{return!1}}function tH(e,t){let n=[],r=0,i=e=>{n.length<50?n.push(e):r++},a=(e,t,n,r)=>{if(!eH(e,t)){if(r<ZV&&Array.isArray(e)&&Array.isArray(t)){let o=Math.max(e.length,t.length);for(let s=0;s<o;s++){let o=`${n}[${s}]`;s>=e.length?i({path:o,kind:`added`,after:t[s]}):s>=t.length?i({path:o,kind:`removed`,before:e[s]}):a(e[s],t[s],o,r+1)}return}if(r<ZV&&QV(e)&&QV(t)){for(let o of Object.keys(e)){let s=$V(n,o);o in t?a(e[o],t[o],s,r+1):i({path:s,kind:`removed`,before:e[o]})}for(let r of Object.keys(t))r in e||i({path:$V(n,r),kind:`added`,after:t[r]});return}i({path:n||`(value)`,kind:`changed`,before:e,after:t})}};return a(e,t,``,0),r&&n.push({path:`…`,kind:`changed`,after:`${r} more changes`}),n}var nH=`follow`;function rH(e){return Object.keys(e.pages).length?e.pages:e.graph?{[e.graph.pageId??``]:e.graph}:{}}var iH=`env:`,aH=new Set([`signal`,`computed`,`linkedSignal`]),oH={selected:`picked`,routed:`rendered by the router`,root:`first component with signals`},sH={write:`set`,sample:`sampled`,initial:`initial`},cH={resolved:`ok`,local:`ok`,loading:`warn`,reloading:`warn`,error:`danger`},lH={signal:`signal`,computed:`computed`,linkedSignal:`linked`,effect:`effect`,template:`template`,afterRenderEffectPhase:`after-render`,childSignalProp:`child-prop`,"input (signal)":`input`,"input.required (signal)":`input`,"output (signal)":`output`,"model (signal)":`model`,"model.required (signal)":`model`,"viewChild (signal)":`view-query`,"viewChild.required (signal)":`view-query`,"viewChildren (signal)":`view-query`,"contentChild (signal)":`content-query`,"contentChild.required (signal)":`content-query`,"contentChildren (signal)":`content-query`,resource:`resource`};function uH(e){return oH[e]}function dH(e){return sH[e]}function fH(e){return cH[e]??`neutral`}function pH(e){return`var(--kind-${lH[e]??`unknown`})`}function mH(e,t){return`${e} ${t}${e===1?``:`s`}`}var hH=class e{rpcSource=w(null);rpc=X(()=>this.rpcSource());filterField=()=>void 0;focusedSignal=w(null);pendingPageId=null;destroyRef=b(Os);host=b(Rl);injector=b(Es);pageId=tT();angularPages=pD(()=>this.rpc());angularPage=X(()=>mD(this.angularPages(),this.shownPageId()??this.pageId));cleanups=[];graphLoad=0;treePages=w({});graphState=w({graph:null,pages:{}});chosenPageId=w(null);announcement=w(``);graphPages=X(()=>rH(this.graphState()));shownPageId=Q({source:()=>({pages:this.graphPages(),newest:this.graphState().graph?.pageId??null,chosen:this.chosenPageId()}),computation:({pages:e,newest:t,chosen:n},r)=>{let i={};for(let n of Object.keys(e))i[n]={pageId:n,reportedAt:+(n===t)};return nT(i,{chosen:n,host:this.pageId,previous:r?.value??null})}});reported=X(()=>{let e=this.shownPageId();return e===null?null:this.graphPages()[e]??null});unsupported=X(()=>!!this.reported()?.unsupported);graphKnown=w(!1);graph=X(()=>{let e=this.reported();return e?.unsupported?null:e});graphOwner=X(()=>{let e=this.graph();return e?`${e.pageId??``}|${e.component?.id??e.injector?.id??e.element?.id??``}`:null});pickedByPage=w({});picked=X(()=>this.pickedByPage()[this.targetPageId()??``]??null);pageOptions=X(()=>{if(this.pageId)return[];let e=this.treePages();return Object.keys(this.graphPages()).map(t=>{let n=e[t];return{value:t,label:n?.title||n?.url||`Page ${t}`,hint:n?.url}})});showInternals=w(!1);sourceSignals=w([]);sourceLoaded=w(!1);sourceFailed=w(!1);graphFailed=w(!1);loadFailed=X(()=>this.sourceFailed()||this.graphFailed());retrying=w(!1);filter=w(``);resources=X(()=>this.graph()?.resources??[]);internalIds=X(()=>new Set(this.resources().flatMap(e=>e.nodeIds)));showFramework=w(!1);frameworkCount=X(()=>{let e=this.internalIds();return(this.graph()?.nodes??[]).filter(t=>t.framework&&!e.has(t.id)).length});visibleNodes=X(()=>{let e=this.internalIds(),t=this.showFramework();return(this.graph()?.nodes??[]).filter(n=>!e.has(n.id)&&(t||!n.framework))});showGraph=w(!0);graphLinks=X(()=>{let e=this.graph();if(!e)return[];let t=new Set(this.visibleNodes().map(e=>e.id)),n=[];for(let r of e.edges){let i=e.nodes[r.producer]?.id,a=e.nodes[r.consumer]?.id;i&&a&&t.has(i)&&t.has(a)&&n.push({producer:i,consumer:a})}return n});graphNodes=X(()=>[...this.visibleNodes()].sort((e,t)=>e.id.localeCompare(t.id,void 0,{numeric:!0})));watchedIds=X(()=>new Set(this.graph()?.watch?.ids??[]));stacksOn=X(()=>!!this.graph()?.watch?.stacks);watchedNodes=X(()=>{let e=this.watchedIds();return(this.graph()?.nodes??[]).filter(t=>e.has(t.id))});watchedElsewhere=X(()=>this.watchedIds().size-this.watchedNodes().length);watchLog=X(()=>{let e=this.graph()?.history??{};return this.watchedNodes().flatMap(t=>(e[t.id]??[]).filter(e=>e.source!==`initial`).map(e=>({id:t.id,label:t.label??t.id,change:e}))).sort((e,t)=>t.change.at-e.change.at).slice(0,20)});hasAnySignals=X(()=>this.visibleNodes().length+this.resources().length>0);kindCounts=X(()=>{let e=this.graph()?[...this.visibleNodes().map(e=>e.kind),...this.resources().map(()=>`resource`)]:this.sourceSignals().map(e=>e.kind),t=new Map;for(let n of e)t.set(n,(t.get(n)??0)+1);return[...t].map(([e,t])=>({kind:e,count:t}))});kind=Q({source:this.graphOwner,computation:(e,t)=>{let n=t?.value??null;return n&&Z(this.kindCounts).some(e=>e.kind===n)?n:null}});kindChips=X(()=>{let e=this.kindCounts(),t=this.kind();return t&&!e.some(e=>e.kind===t)?[...e,{kind:t,count:0}]:e});kindTotal=X(()=>this.kindCounts().reduce((e,t)=>e+t.count,0));selectedId=Q({source:this.graphOwner,computation:()=>null});selectedNode=X(()=>this.graph()?.nodes.find(e=>e.id===this.selectedId())??null);jumpedPast=w(null);jumpNote=X(()=>{let e=this.jumpedPast();return!e||this.filter()||this.kind()||this.selectedId()!==e.id?``:`Cleared the filters to show ${e.label}.`});filteredResources=X(()=>{let e=this.filter().toLowerCase(),t=this.kind();return t&&t!==`resource`?[]:this.resources().filter(t=>!e||t.name.toLowerCase().includes(e)||e.length>=3&&`resource`.startsWith(e))});filteredNodes=X(()=>{let e=this.filter().toLowerCase(),t=this.kind();return this.visibleNodes().filter(n=>(!t||n.kind===t)&&(!e||(n.label??``).toLowerCase().includes(e)||n.kind.toLowerCase().includes(e))).sort((e,t)=>e.id.localeCompare(t.id,void 0,{numeric:!0}))});filteredSourceSignals=X(()=>{let e=this.filter().toLowerCase(),t=this.kind();return this.sourceSignals().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.toLowerCase().includes(e)||n.file.toLowerCase().includes(e)))});targetPageId=X(()=>this.pageId??(this.shownPageId()||null)??this.graph()?.pageId??this.latestTreePage()?.pageId??null);latestTreePage=X(()=>{let e=null;for(let[t,n]of Object.entries(this.treePages())){let r=n.reportedAt??0;(!e||r>e.reportedAt)&&(e={pageId:t,reportedAt:r})}return e});componentOptions=X(()=>{let e=this.targetPageId(),t=(e?this.treePages()[e]?.roots:void 0)??[],n=[],r=e=>{for(let t of e)n.push(t),r(t.children)};r(t);let i=this.graph()?.environments??[];if(!n.length&&!i.length)return[];let a=new Map;for(let e of n)a.set(e.name,(a.get(e.name)??0)+1);let o=new Map,s=[{value:nH,label:`Follow the routed component`,hint:`automatic`},...i.map(e=>({value:iH+e.id,label:this.injectorLabel(e),hint:`injector`}))];for(let e of n){let t=(o.get(e.name)??0)+1;o.set(e.name,t),s.push({value:e.id,label:(a.get(e.name)??0)>1?`${e.name} #${t}`:e.name,hint:e.kind===`directive`?`<${e.tag}> directive`:`<${e.tag}>`})}return s});pickerValue=X(()=>{let e=this.picked();return e&&this.componentOptions().some(t=>t.value===e)?e:nH});connect(e,t){this.rpcSource=e,this.filterField=t}async loadSignalGraph(e){for(let e of this.cleanups.splice(0))e();let t=++this.graphLoad,n=()=>this.destroyRef.destroyed||t!==this.graphLoad,r=e.scope(`pangular`);try{let e=await r.rpc.sharedState(`signal-graph`);if(n())return;this.graphFailed.set(!1);let t=e=>{let t=e,n=t?.pages&&typeof t.pages==`object`?t.pages:{},r={graph:t?.graph??null,pages:n};this.notePageGone(rH(r)),this.graphState.set(r);let i=this.pendingPageId;i&&this.graphPages()[i]&&(this.pendingPageId=null,this.chosenPageId.set(i)),e!==void 0&&this.graphKnown.set(!0)};t(e.value()),this.cleanups.push(e.on(`updated`,t))}catch{if(n())return;this.graphState.set({graph:null,pages:{}}),this.graphKnown.set(!0),this.graphFailed.set(!0)}try{let e=await r.rpc.sharedState(`component-tree`);if(n())return;let t=e=>{let t=e?.pages;this.treePages.set(t&&typeof t==`object`?t:{})};t(e.value()),this.cleanups.push(e.on(`updated`,t))}catch{n()||this.treePages.set({})}}notePageGone(e){let t=Object.keys(this.graphPages()).filter(t=>!e[t]);t.length&&this.pickedByPage.update(e=>{let n={...e};for(let e of t)delete n[e];return n});let n=this.chosenPageId();if(!n||e[n])return;let r=this.pageOptions().find(e=>e.value===n)?.label??`The chosen page`;this.chosenPageId.set(null),this.announcement.set(`${r} closed, so this shows another page.`)}selectPage(e){if(!e||e===this.shownPageId())return;this.pendingPageId=null,this.chosenPageId.set(e);let t=this.pageOptions().find(t=>t.value===e)?.label??e;this.announcement.set(`Showing the signal graph of ${t}.`)}showComponent(e){this.pendingPageId=null,e.pageId&&!this.pageId&&(this.graphPages()[e.pageId]?this.chosenPageId.set(e.pageId):this.pendingPageId=e.pageId),this.focusedSignal.set(e.key?{componentId:e.componentId,key:e.key}:null),this.pickComponent(e.componentId,this.pageId??e.pageId)}pickComponent(e,t){let n=e&&e!==`follow`?e:null;this.focusedSignal()?.componentId!==n&&this.focusedSignal.set(null);let r=t??this.targetPageId()??void 0;this.pickedByPage.update(e=>{let t={...e};return n?t[r??``]=n:delete t[r??``],t});let i=this.rpc();if(!i)return;let a=n?.startsWith(`env:`)?{pageId:r,env:n.slice(iH.length)}:{pageId:r,id:n};i.scope(`pangular`).rpc.call(`select-signal-target`,a).catch(()=>{})}injectorLabel(e){return e.name===`Root`?`Root services`:e.name}async loadSourceSignals(e){let t=e.scope(`pangular`);try{let e=await t.rpc.call(`get-signals`);this.sourceSignals.set(e),this.sourceFailed.set(!1)}catch{this.sourceFailed.set(!0)}finally{this.sourceLoaded.set(!0)}}async retry(){let e=this.rpc();if(!e||this.retrying())return;let t=document.activeElement;this.retrying.set(!0);try{await Promise.all([this.loadSignalGraph(e),this.loadSourceSignals(e)])}finally{this.retrying.set(!1)}this.destroyRef.destroyed||Sd(()=>{(!t?.isConnected||document.activeElement===document.body)&&this.filterField()?.focus()},{injector:this.injector})}clearFilters(){this.resetFilters(),this.filterField()?.focus()}resetFilters(){this.filter.set(``),this.kind.set(null)}select(e){this.selectedId.set(this.selectedId()===e?null:e),this.showInternals.set(!1)}selectFromGraph(e){this.selectedId.set(e),this.showInternals.set(!1)}isWatchable(e){return aH.has(e.kind)}toggleWatch(e){let t=!this.watchedIds().has(e.id),n=e.label??`the unnamed signal`;this.sendWatch({id:e.id,watch:t}),this.announcement.set(t?`Watching ${n}. Its changes also log to the page console.`:`Stopped watching ${n}.`)}toggleStacks(){let e=!this.stacksOn();this.sendWatch({stacks:e}),this.announcement.set(e?`Recording write stacks.`:`Stopped recording write stacks.`)}sendWatch(e){let t=this.rpc(),n=this.graph()?.pageId??this.targetPageId()??void 0;t&&t.scope(`pangular`).rpc.call(`set-signal-watch`,{...e,pageId:n}).catch(()=>{})}jumpTo(e){let t=this.resources().find(t=>t.nodeIds.includes(e.id)),n=t?.id??e.id,r=t?!this.filteredResources().some(e=>e.id===n):!this.filteredNodes().some(e=>e.id===n);r&&this.resetFilters(),this.jumpedPast.set(r?{id:n,label:t?.name??e.label??e.id}:null),this.selectedId.set(n),this.showInternals.set(!!t),Sd(()=>{let e=[...this.host.nativeElement.querySelectorAll(`.node-card[data-card]`)].find(e=>e.dataset.card===n);e?.scrollIntoView?.({block:`nearest`}),e?.focus({preventScroll:!0})},{injector:this.injector})}changeCount(e){let t=this.graph(),n=t?.nodes.find(t=>t.id===e)?.changes??t?.resources?.find(t=>t.id===e)?.changes;return n===void 0?(t?.history?.[e]??[]).reduce((e,t)=>e+(t.source===`initial`?0:1+(t.missed??0)),0):n}internalsOf(e){let t=new Set(e.nodeIds);return(this.graph()?.nodes??[]).filter(e=>t.has(e.id))}relations=X(()=>{let e=new Map,t=this.graph();if(!t)return e;for(let n of t.nodes)e.set(n.id,{deps:[],consumers:[]});for(let n of t.edges){let r=t.nodes[n.producer],i=t.nodes[n.consumer];r&&i&&(e.get(i.id)?.deps.push(r),e.get(r.id)?.consumers.push(i))}return e});getDependencies(e){return this.relations().get(e.id)?.deps??[]}getConsumers(e){return this.relations().get(e.id)?.consumers??[]}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},gH=class e{state=b(hH);selectedHistory=X(()=>{let e=this.state.selectedId();return e?[...this.state.graph()?.history?.[e]??[]].reverse():[]});restoreBlocked=X(()=>{let e=this.state.rpc();if(cT(e))return`A saved report cannot write to the app.`;let t=this.state.graph()?.pageId;return GN(t?this.state.treePages()[t]:null)?`It needs the app open in a browser.`:OT(e,`components`)?``:Mw(`components`)});restoring=w(!1);restoreResult=w(null);restorable(e){let t=this.state.graph(),n=t?.nodes.find(t=>t.id===e);return n?.locator?n.locator.owner===`service`?t?.injector&&n.locator.id===t.injector.id?n:null:t?.component&&n.locator.id===t.component.id?n:null:null}async restore(e,t,n){let r=this.state.rpc(),i=this.state.graph()?.pageId,a=e.locator;if(!r||!i||!a||this.restoring()||this.restoreBlocked())return;this.restoring.set(!0);let o;try{o=await r.scope(`pangular`).rpc.call(`request-signal-restore`,{pageId:i,request:{component:a.id,...a.owner===`service`?{owner:`service`}:{},node:e.id,epoch:t.epoch}})??{}}catch{o={error:`The devtools server did not answer. Try again.`}}this.restoring.set(!1),this.restoreResult.set(o.ok?{id:e.id,text:`Restored ${o.key??a.key} to the value from ${n}.`,error:!1}:{id:e.id,text:o.error??`The page did not restore it.`,error:!0})}diffs=X(()=>{let e=this.state.selectedId(),t=e?this.state.graph()?.history?.[e]??[]:[],n=new Map;for(let e=1;e<t.length;e++){let r=t[e-1].value,i=t[e].value;if(!r||!i||typeof r!=`object`||typeof i!=`object`)continue;let a=tH(r,i);a.length&&n.set(t[e].epoch,a)}return n});diffLabel(e){return e===`added`?`added`:e===`removed`?`removed`:`changed`}sourceMatch=X(()=>{let e=this.state.selectedNode(),t=e?.label;if(!e||!t)return null;let n=t=>t===e.kind||t.startsWith(`${e.kind} `)||t.startsWith(`${e.kind}.`)||e.kind===`signal`&&t.startsWith(`model`)||e.kind===`computed`&&t===`toSignal`,r=this.state.sourceSignals().filter(e=>e.name===t&&n(e.kind)),i=this.state.graph(),a=i?.component?.tag??i?.element?.tag,o=a?r.filter(e=>e.component===a):[];return o.length&&(r=o),r.length?r.length===1?{exact:r[0],candidates:[]}:{exact:null,candidates:r.slice(0,5)}:null});writeHint=X(()=>{let e=this.state.selectedNode(),t=this.state.graph();if(!e||!t||t.writeHook===!1||e.kind!==`signal`&&e.kind!==`linkedSignal`)return``;if(!e.label)return`This signal has no name, so its history holds sampled values only. From Angular 20.1 the compiler names a signal that initializes a field or variable, so this one was likely made in a factory or helper. Pass a debugName in its options, for example signal(0, { debugName: 'count' }).`;let n=t.history?.[e.id]??[];return n.some(e=>e.source===`write`)||!n.some(e=>e.source===`sample`)?``:`Every change here was sampled. Writes are matched by name, kind, version and value, so another live signal with the same name and value can hide them.`});historySummary(e){let t=this.state.changeCount(e),n=this.state.graph()?.history?.[e]?.length??0;return t?`${`${t} ${t===1?`change`:`changes`} recorded`}${n>=50&&t>=n?`, showing the last ${n}`:``}, newest first.`:`No changes recorded yet. The entry below is the value seen first.`}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},_H=e=>({id:e,label:`Status history`}),vH=e=>({id:e,label:`Value history`}),yH=(e,t)=>t.epoch,bH=(e,t)=>t.path,xH=(e,t)=>t.id,SH=(e,t)=>t.file+t.line;function CH(e,t){e&1&&(P(0,`p`,4),G(1),F()),e&2&&(E(),q(`Restore is off. `,t))}function wH(e,t){if(e&1&&(k(0,CH,2,1,`p`,4),P(1,`p`,5),G(2),F()),e&2){let e,t=U(2).id,n=U();A((e=n.restoreBlocked())?0:-1,e),E(),W(`has-text`,n.restoreResult()?.id===t)(`restore-error`,n.restoreResult()?.id===t&&n.restoreResult()?.error),E(),q(` `,n.restoreResult()?.id===t?n.restoreResult()?.text:``,` `)}}function TH(e,t){if(e&1&&(P(0,`span`,8),G(1),F()),e&2){let e=U().$implicit;E(),q(``,e.missed,` earlier not captured`)}}function EH(e,t){if(e&1){let e=z();G_(0),uv(1,`date`),P(2,`button`,12),V(`click`,function(){x(e);let t=Y(0),n=U().$implicit;U();let r=Y(4);return S(U(2).restore(r,n,t??``))}),G(3,` Restore `),F()}if(e&2){let e=U().$implicit,t=U(3),n=K_(fv(1,2,e.at,`HH:mm:ss.SSS`));E(2),O(`aria-label`,`Restore value from `+n)(`aria-disabled`,t.restoring()||null)}}function DH(e,t){if(e&1&&(P(0,`code`,18),G(1),uv(2,`json`),F()),e&2){let e=U().$implicit;E(),K(dv(2,1,e.before))}}function OH(e,t){e&1&&(P(0,`span`,16),G(1,`to`),F(),P(2,`span`,20),G(3,`→`),F())}function kH(e,t){if(e&1&&(P(0,`code`,19),G(1),uv(2,`json`),F()),e&2){let e=U().$implicit;E(),K(dv(2,1,e.after))}}function AH(e,t){if(e&1&&(P(0,`li`)(1,`span`,15),G(2),F(),P(3,`span`,16),G(4,`: `),F(),P(5,`code`,17),G(6),F(),P(7,`span`,16),G(8,`, `),F(),k(9,DH,3,3,`code`,18),k(10,OH,4,0),k(11,kH,3,3,`code`,19),F()),e&2){let e=t.$implicit,n=U(5);p_(`diff-`+e.kind),E(2),K(n.diffLabel(e.kind)),E(4),K(e.path),E(3),A(e.kind===`added`?-1:9),E(),A(e.kind===`changed`?10:-1),E(),A(e.kind===`removed`?-1:11)}}function jH(e,t){if(e&1&&(P(0,`details`,10)(1,`summary`),G(2),F(),P(3,`ul`,13),j(4,AH,12,7,`li`,14,bH),F()()),e&2){let e=t;E(2),q(`Changes from the entry before (`,e.length,`)`),E(2),M(e)}}function MH(e,t){if(e&1&&(P(0,`li`),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function NH(e,t){if(e&1&&(P(0,`ol`,11),j(1,MH,2,1,`li`,null,ug),F()),e&2){let e=U().$implicit;E(),M(e.stack)}}function PH(e,t){if(e&1&&(P(0,`li`)(1,`span`,6)(2,`time`),G(3),uv(4,`date`),F(),P(5,`span`,7),G(6),F(),P(7,`span`),G(8),F(),k(9,TH,2,1,`span`,8),k(10,EH,4,6,`button`,9),F(),P(11,`pre`),G(12),uv(13,`json`),F(),k(14,jH,6,1,`details`,10),k(15,NH,3,0,`ol`,11),F()),e&2){let e,n=t.$implicit,r=t.$index;U();let i=Y(4),a=U(2);E(3),K(fv(4,10,n.at,`HH:mm:ss.SSS`)),E(2),p_(`source-`+n.source),E(),K(a.sourceLabel(n.source)),E(2),q(`epoch `,n.epoch),E(),A(n.missed?9:-1),E(),A(i&&!a.restoreBlocked()&&r!==0?10:-1),E(2),K(dv(13,13,n.value)),E(2),A((e=a.diffs().get(n.epoch))?14:-1,e),E(),A(n.stack?.length?15:-1)}}function FH(e,t){if(e&1&&(P(0,`h4`,1),G(1),F(),P(2,`p`,2),G(3),F(),G_(4),k(5,wH,3,6),P(6,`ol`,3),j(7,PH,16,15,`li`,null,yH),F()),e&2){let e=U(),t=e.id,n=e.label,r=U();N(`id`,`history-heading-`+t),E(),K(n),E(2),K(r.historySummary(t)),E();let i=K_(r.restorable(t));E(),A(i?5:-1),E(),O(`aria-labelledby`,`history-heading-`+t),E(),M(r.selectedHistory())}}function IH(e,t){e&1&&k(0,FH,9,6),e&2&&A(U().selectedHistory().length?0:-1)}function LH(e,t){e&1&&(P(0,`p`,4),G(1,` This resource has no name. Pass `),P(2,`code`),G(3,`debugName`),F(),G(4,` to `),P(5,`code`),G(6,`resource()`),F(),G(7,` or `),P(8,`code`),G(9,`httpResource()`),F(),G(10,` to name it here. `),F())}function RH(e,t){if(e&1&&(P(0,`dt`),G(1,`Loading`),F(),P(2,`dd`),G(3),F()),e&2){let e=U();E(3),K(e.isLoading?`yes`:`no`)}}function zH(e,t){if(e&1&&(P(0,`dt`),G(1,`HTTP status`),F(),P(2,`dd`),G(3),F()),e&2){let e=U();E(3),K(e.statusCode)}}function BH(e,t){if(e&1&&(P(0,`dt`),G(1,`Params`),F(),P(2,`dd`)(3,`pre`,24),G(4),uv(5,`json`),F()()),e&2){let e=U();E(3),O(`aria-label`,`Params of `+e.name),E(),K(dv(5,2,e.params))}}function VH(e,t){if(e&1&&(P(0,`dt`),G(1,`Value`),F(),P(2,`dd`)(3,`pre`,24),G(4),uv(5,`json`),F()()),e&2){let e=U();E(3),O(`aria-label`,`Value of `+e.name),E(),K(dv(5,2,e.value))}}function HH(e,t){if(e&1&&(P(0,`dt`),G(1,`Error`),F(),P(2,`dd`)(3,`pre`,24),G(4),uv(5,`json`),F()()),e&2){let e=U();E(3),O(`aria-label`,`Error of `+e.name),E(),K(dv(5,2,e.error))}}function UH(e,t){if(e&1&&(P(0,`li`)(1,`span`,25),G(2),F(),P(3,`span`,26),G(4),F()()),e&2){let e=t.$implicit,n=U(3);E(),f_(`background`,n.kindColor(e.kind)),E(),K(e.kind),E(2),K(e.label??e.id)}}function WH(e,t){if(e&1&&(P(0,`ul`,1),j(1,UH,5,4,`li`,null,xH),F()),e&2){let e=U(),t=U();N(`id`,`resource-internals-`+e.id),E(),M(t.internalsOf(e))}}function GH(e,t){if(e&1){let e=z();P(0,`h3`,21),G(1),F(),k(2,LH,11,0,`p`,4),P(3,`dl`)(4,`dt`),G(5,`Status`),F(),P(6,`dd`),G(7),F(),k(8,RH,4,1),k(9,zH,4,1),k(10,BH,6,4),k(11,VH,6,4),k(12,HH,6,4),F(),Eg(13,22),P(14,`button`,23),V(`click`,function(){x(e);let t=U();return S(t.showInternals.set(!t.showInternals()))}),G(15),F(),k(16,WH,3,1,`ul`,1)}if(e&2){let e=t,n=U(),r=Gg(1);E(),K(e.name),E(),A(e.named?-1:2),E(5),K(e.status??`unknown`),E(),A(e.isLoading===void 0?-1:8),E(),A(e.statusCode===void 0?-1:9),E(),A(e.params===void 0?-1:10),E(),A(e.value===void 0?-1:11),E(),A(e.error===void 0?-1:12),E(),N(`ngTemplateOutlet`,r)(`ngTemplateOutletContext`,av(15,_H,e.id)),E(),O(`aria-expanded`,n.showInternals())(`aria-controls`,`resource-internals-`+e.id),E(),J(` `,n.showInternals()?`Hide`:`Show`,` internal signals (`,e.nodeIds.length,`) `),E(),A(n.showInternals()?16:-1)}}function KH(e,t){if(e&1&&(P(0,`dt`),G(1,`Runs`),F(),P(2,`dd`),G(3),F()),e&2){let e=U(2);E(3),R_(` `,t,`, `,e.selectedNode().runMs??0,` ms in all, last `,e.selectedNode().lastRunMs??0,` ms `)}}function qH(e,t){if(e&1&&I(0,`app-source-link`,28),e&2){let e=U();N(`file`,e.exact.file)(`line`,e.exact.line)}}function JH(e,t){if(e&1&&(P(0,`span`,29),G(1),F()),e&2){let e=U().$implicit;E(),q(`in `,e.component)}}function YH(e,t){if(e&1&&(P(0,`li`),I(1,`app-source-link`,28),k(2,JH,2,1,`span`,29),F()),e&2){let e=t.$implicit;E(),N(`file`,e.file)(`line`,e.line),E(),A(e.component?2:-1)}}function XH(e,t){if(e&1&&(P(0,`span`,29),G(1),F(),P(2,`ul`,30),j(3,YH,3,3,`li`,null,SH),F()),e&2){let e=U();E(),q(``,e.candidates.length,` declarations match this name:`),E(2),M(e.candidates)}}function ZH(e,t){e&1&&(P(0,`dt`),G(1,`Source`),F(),P(2,`dd`,27),k(3,qH,1,2,`app-source-link`,28)(4,XH,5,1),F()),e&2&&(E(3),A(t.exact?3:4))}function QH(e,t){if(e&1&&(P(0,`dt`),G(1,`Value`),F(),P(2,`dd`)(3,`pre`,24),G(4),uv(5,`json`),F()()),e&2){let e=U(2);E(3),O(`aria-label`,`Value of `+(e.selectedNode().label??`signal`)),E(),K(dv(5,2,e.selectedNode().value))}}function $H(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,31),V(`click`,function(){let t=x(e).$implicit;return S(U(3).jumpTo(t))}),P(2,`span`,25),G(3),F(),P(4,`span`,26),G(5),F()()()}if(e&2){let e=t.$implicit,n=U(3);E(),O(`aria-label`,`Go to `+e.kind+` `+(e.label??e.id)),E(),f_(`background`,n.kindColor(e.kind)),E(),K(e.kind),E(2),K(e.label??e.id)}}function eU(e,t){if(e&1&&(P(0,`h4`),G(1,`Dependencies (producers)`),F(),P(2,`ul`),j(3,$H,6,5,`li`,null,xH),F()),e&2){let e=U(2);E(3),M(e.getDependencies(e.selectedNode()))}}function tU(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,31),V(`click`,function(){let t=x(e).$implicit;return S(U(3).jumpTo(t))}),P(2,`span`,25),G(3),F(),P(4,`span`,26),G(5),F()()()}if(e&2){let e=t.$implicit,n=U(3);E(),O(`aria-label`,`Go to `+e.kind+` `+(e.label??e.id)),E(),f_(`background`,n.kindColor(e.kind)),E(),K(e.kind),E(2),K(e.label??e.id)}}function nU(e,t){if(e&1&&(P(0,`h4`),G(1,`Consumers`),F(),P(2,`ul`),j(3,tU,6,5,`li`,null,xH),F()),e&2){let e=U(2);E(3),M(e.getConsumers(e.selectedNode()))}}function rU(e,t){if(e&1){let e=z();P(0,`button`,32),V(`click`,function(){x(e);let t=U(2);return S(t.toggleWatch(t.selectedNode()))}),G(1,` Watch `),F(),P(2,`p`,4),G(3,` A watched signal is listed under Watched and logs each change to the page console. `),F()}if(e&2){let e=U(2);O(`aria-pressed`,e.watchedIds().has(e.selectedNode().id))}}function iU(e,t){e&1&&(P(0,`p`,4),G(1),F()),e&2&&(E(),K(t))}function aU(e,t){if(e&1&&(P(0,`h3`,21),G(1),F(),P(2,`dl`)(3,`dt`),G(4,`Kind`),F(),P(5,`dd`),G(6),F(),P(7,`dt`),G(8,`Epoch`),F(),P(9,`dd`),G(10),F(),k(11,KH,4,3),k(12,ZH,5,1),k(13,QH,6,4),F(),k(14,eU,5,0),k(15,nU,5,0),k(16,rU,4,1),k(17,iU,2,1,`p`,4),Eg(18,22)),e&2){let e,n,r,i=U(),a=Gg(1);E(),K(i.selectedNode().label??i.selectedNode().id),E(5),K(i.selectedNode().kind),E(4),K(i.selectedNode().epoch),E(),A((e=i.selectedNode().runs)?11:-1,e),E(),A((n=i.sourceMatch())?12:-1,n),E(),A(i.selectedNode().value===void 0?-1:13),E(),A(i.getDependencies(i.selectedNode()).length?14:-1),E(),A(i.getConsumers(i.selectedNode()).length?15:-1),E(),A(i.isWatchable(i.selectedNode())?16:-1),E(),A((r=i.writeHint())?17:-1,r),E(),N(`ngTemplateOutlet`,a)(`ngTemplateOutletContext`,av(12,vH,t.id))}}var oU=class e{resource=$(null);state=b(hH);detail=b(gH);selectedNode=this.state.selectedNode;showInternals=this.state.showInternals;watchedIds=this.state.watchedIds;selectedHistory=this.detail.selectedHistory;restoreBlocked=this.detail.restoreBlocked;restoring=this.detail.restoring;restoreResult=this.detail.restoreResult;diffs=this.detail.diffs;sourceMatch=this.detail.sourceMatch;writeHint=this.detail.writeHint;kindColor=pH;sourceLabel=dH;getDependencies(e){return this.state.getDependencies(e)}getConsumers(e){return this.state.getConsumers(e)}jumpTo(e){this.state.jumpTo(e)}isWatchable(e){return this.state.isWatchable(e)}toggleWatch(e){this.state.toggleWatch(e)}internalsOf(e){return this.state.internalsOf(e)}historySummary(e){return this.detail.historySummary(e)}restorable(e){return this.detail.restorable(e)}restore(e,t,n){return this.detail.restore(e,t,n)}diffLabel(e){return this.detail.diffLabel(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appSignalDetail`,``]],inputs:{resource:[1,`resource`]},decls:4,vars:1,consts:[[`historyTpl`,``],[3,`id`],[1,`history-summary`],[`tabindex`,`0`,1,`history`,`scroll-box`],[1,`hint`],[`role`,`status`,1,`restore-result`],[1,`history-meta`],[1,`source-tag`],[1,`missed`],[`type`,`button`,1,`restore`],[1,`diff`],[`aria-label`,`Written from`,1,`stack`],[`type`,`button`,1,`restore`,3,`click`],[1,`diff-list`],[3,`class`],[1,`diff-kind`],[1,`sr-only`],[1,`diff-path`],[1,`diff-old`],[1,`diff-new`],[`aria-hidden`,`true`],[1,`detail-title`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[`type`,`button`,1,`reset`,`internals-toggle`,3,`click`],[`role`,`region`,`tabindex`,`0`,1,`scroll-box`],[1,`kind-badge`,`sm`],[1,`rel-label`],[1,`source-matches`],[3,`file`,`line`],[1,`hint-inline`],[1,`source-candidates`],[`type`,`button`,1,`rel-link`,3,`click`],[`type`,`button`,1,`reset`,`watch-toggle`,3,`click`]],template:function(e,t){if(e&1&&(Hh(0,IH,1,1,`ng-template`,null,0,mv),k(2,GH,17,17)(3,aU,19,14)),e&2){let e;E(2),A((e=t.resource())?2:(e=t.selectedNode())?3:-1,e)}},dependencies:[uy,aM,dy,fy],styles:[`.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 460px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.reset[_ngcontent-%COMP%] {
+  height: 34px;
+  margin-top: 4px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.reset[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.reset[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+    border-top-color: var(--%NS%border-strong);
+  }
+}
+.node-header[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  min-width: 0;
+}
+
+.kind-badge[_ngcontent-%COMP%] {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10.5px;
+  line-height: 18px;
+  padding: 0 8px;
+  border-radius: 99px;
+  color: var(--%NS%kind-ink);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.node-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.node-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 6px;
+  min-width: 0;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--%NS%text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.node-meta[_ngcontent-%COMP%]   .file[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+
+.sep[_ngcontent-%COMP%] {
+  color: var(--%NS%border-strong);
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 8px 16px;
+  margin: 0;
+  font-size: 13px;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding-top: 2px;
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+pre[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  margin: 0;
+  color: var(--%NS%text);
+}
+
+.kind-badge.sm[_ngcontent-%COMP%] {
+  font-size: 10px;
+  line-height: 16px;
+  padding: 0 6px;
+}
+
+.detail-panel[_nghost-%COMP%] {
+  margin-top: 8px;
+  padding: 16px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.25s var(--%NS%ease) both;
+}
+
+.detail-title[_ngcontent-%COMP%] {
+  margin: 0 0 16px;
+  font-family: var(--%NS%font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--%NS%accent);
+  overflow-wrap: anywhere;
+}
+
+.detail-panel[_nghost-%COMP%]   h4[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 20px 0 8px;
+}
+
+.detail-panel[_nghost-%COMP%]   dd[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {
+  max-height: 240px;
+  overflow: auto;
+  padding: 8px 12px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.scroll-box[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.detail-panel[_nghost-%COMP%]   .hint[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+}
+
+.internals-toggle[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.detail-panel[_nghost-%COMP%]   .internals-toggle[_ngcontent-%COMP%]    + ul[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.detail-panel[_nghost-%COMP%]   ul[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 13px;
+}
+
+.detail-panel[_nghost-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], 
+.rel-link[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 28px;
+  padding: 4px 8px;
+  color: var(--%NS%text-2);
+  border-radius: 6px;
+}
+
+.detail-panel[_nghost-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:has(> .rel-link) {
+  padding: 0;
+}
+
+.rel-link[_ngcontent-%COMP%] {
+  width: 100%;
+  font: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease);
+}
+
+.rel-link[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+.rel-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.rel-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.history-summary[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.history[_ngcontent-%COMP%] {
+  list-style: none;
+  padding: 4px;
+  margin: 0;
+  max-height: 320px;
+  overflow: auto;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: block;
+  padding: 8px;
+  border-radius: 6px;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
+  border-top: 1px solid var(--%NS%border);
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.history-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.history-meta[_ngcontent-%COMP%]   time[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  color: var(--%NS%text);
+}
+
+.source-tag[_ngcontent-%COMP%] {
+  line-height: 16px;
+  padding: 0 8px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border-strong);
+  color: var(--%NS%text);
+}
+
+.source-write[_ngcontent-%COMP%] {
+  color: var(--%NS%hue-info-text);
+  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
+  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+}
+
+.missed[_ngcontent-%COMP%] {
+  color: var(--%NS%warn);
+}
+
+.restore[_ngcontent-%COMP%] {
+  margin-left: auto;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+.restore[_ngcontent-%COMP%]:hover:not([aria-disabled=true]) {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+.restore[aria-disabled=true][_ngcontent-%COMP%] {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.restore[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.diff[_ngcontent-%COMP%] {
+  margin-top: 6px;
+  font-size: 12px;
+}
+
+.diff[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.diff[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.diff-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 6px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.diff-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.diff-kind[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 5px;
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.diff-added[_ngcontent-%COMP%]   .diff-kind[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.diff-removed[_ngcontent-%COMP%]   .diff-kind[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.diff-changed[_ngcontent-%COMP%]   .diff-kind[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.diff-path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.diff-old[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-decoration: line-through;
+}
+
+.diff-new[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.source-matches[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+.source-candidates[_ngcontent-%COMP%] {
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hint-inline[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.restore-result[_ngcontent-%COMP%] {
+  margin: 0;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.restore-result.has-text[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+}
+
+.restore-result.restore-error[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .restore[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}
+.stack[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  padding: 0 0 0 18px;
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  color: var(--%NS%text-2);
+  overflow-wrap: anywhere;
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .stack[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+}
+
+.watch-toggle[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+}
+
+.watch-toggle[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+@media (max-width: 480px) {
+  .detail-panel[_nghost-%COMP%] {
+    padding: 12px;
+  }
+  dl[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+  }
+  dd[_ngcontent-%COMP%]    + dt[_ngcontent-%COMP%] {
+    margin-top: 8px;
+  }
+}`]})},sU=(e,t)=>t.id;function cU(e,t){if(e&1&&(P(0,`span`,9),G(1),F()),e&2){let e=U().$implicit;p_(`tone-`+U().statusTone(e.status)),E(),K(e.status)}}function lU(e,t){if(e&1&&(P(0,`span`,5),G(1),F()),e&2){let e=t;E(),J(``,e,` `,e===1?`change`:`changes`)}}function uU(e,t){if(e&1&&(P(0,`span`,7),G(1),uv(2,`json`),F()),e&2){let e=U().$implicit;E(),K(dv(2,1,e.error))}}function dU(e,t){if(e&1&&(P(0,`span`,7),G(1),uv(2,`json`),F()),e&2){let e=U().$implicit;E(),K(dv(2,1,e.value))}}function fU(e,t){if(e&1&&I(0,`div`,8),e&2){let e=U().$implicit;N(`resource`,e)(`id`,`signal-detail-`+e.id)}}function pU(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,0),V(`click`,function(){let t=x(e).$implicit;return S(U().select(t.id))}),P(2,`span`,1)(3,`span`,2),G(4,`resource`),F(),P(5,`span`,3),G(6),F(),k(7,cU,2,3,`span`,4),k(8,lU,2,2,`span`,5),I(9,`span`,6),F(),k(10,uU,3,3,`span`,7)(11,dU,3,3,`span`,7),F(),k(12,fU,1,2,`div`,8),F()}if(e&2){let e,n=t.$implicit,r=U();E(),W(`selected`,r.selectedId()===n.id),O(`aria-expanded`,r.selectedId()===n.id)(`aria-controls`,`signal-detail-`+n.id)(`data-card`,n.id),E(2),f_(`background`,r.kindColor(`resource`)),E(3),K(n.name),E(),A(n.status?7:-1),E(),A((e=n.changes)?8:-1,e),E(2),A(n.error===void 0?n.value===void 0?-1:11:10),E(2),A(r.selectedId()===n.id?12:-1)}}var mU=class e{state=b(hH);filteredResources=this.state.filteredResources;selectedId=this.state.selectedId;kindColor=pH;statusTone=fH;select(e){this.state.select(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`ul`,`appResourceList`,``]],decls:2,vars:0,consts:[[`type`,`button`,1,`node-card`,3,`click`],[1,`node-header`],[1,`kind-badge`],[1,`node-label`],[1,`status-tag`,3,`class`],[1,`changed-badge`],[`aria-hidden`,`true`,1,`chevron`],[1,`node-value`],[`appSignalDetail`,``,1,`detail-panel`,3,`resource`,`id`],[1,`status-tag`]],template:function(e,t){e&1&&j(0,pU,13,12,`li`,null,sU),e&2&&M(t.filteredResources())},dependencies:[oU,fy],styles:[`.node-header[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  min-width: 0;
+}
+
+.kind-badge[_ngcontent-%COMP%] {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10.5px;
+  line-height: 18px;
+  padding: 0 8px;
+  border-radius: 99px;
+  color: var(--%NS%kind-ink);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.node-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.node-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 6px;
+  min-width: 0;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--%NS%text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.node-meta[_ngcontent-%COMP%]   .file[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+
+.sep[_ngcontent-%COMP%] {
+  color: var(--%NS%border-strong);
+}
+
+.nodes[_nghost-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.node-card[_ngcontent-%COMP%] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  padding: 12px 16px;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+.node-card[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  border-color: var(--%NS%border-strong);
+}
+
+.nodes[_nghost-%COMP%]    > li[_ngcontent-%COMP%] {
+  display: block;
+  min-width: 0;
+  padding: 0;
+}
+
+
+.nodes[_nghost-%COMP%]    > li.empty[_ngcontent-%COMP%] {
+  display: flex;
+  padding: 24px 16px;
+}
+
+button.node-card[_ngcontent-%COMP%] {
+  cursor: pointer;
+}
+
+.node-card[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.node-card.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  margin-left: auto;
+  border-right: 1.5px solid var(--%NS%text-3);
+  border-bottom: 1.5px solid var(--%NS%text-3);
+  transform: translateY(-2px) rotate(45deg);
+  transition: transform 0.2s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.node-card[_ngcontent-%COMP%]:hover   .chevron[_ngcontent-%COMP%] {
+  border-color: var(--%NS%text);
+}
+
+.node-card.selected[_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  transform: translateY(2px) rotate(-135deg);
+}
+
+.node-value[_ngcontent-%COMP%] {
+  display: block;
+  margin-top: 8px;
+  padding: 4px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text-2);
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+}
+
+.node-card.selected[_ngcontent-%COMP%]   .node-value[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%bg) 70%, transparent);
+}
+
+.changed-badge[_ngcontent-%COMP%] {
+  flex: none;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 99px;
+  font-variant-numeric: tabular-nums;
+}
+
+.changed-badge[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.resources[_nghost-%COMP%] {
+  margin-bottom: 8px;
+}
+
+.status-tag[_ngcontent-%COMP%] {
+  flex: none;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 99px;
+}
+
+.tone-ok[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.tone-warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.tone-danger[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tone-neutral[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  border-color: var(--%NS%border-strong);
+}
+
+@media (max-width: 480px) {
+  .node-card[_ngcontent-%COMP%] {
+    padding: 12px;
+  }
+}`]})},hU=56,gU=12,_U=8,vU=4;function yU(e,t){let n=new Set(e),r=new Map(e.map(e=>[e,[]])),i=new Map(e.map(e=>[e,[]]));for(let{producer:e,consumer:a}of t)n.has(e)&&n.has(a)&&e!==a&&(r.get(a).push(e),i.get(e).push(a));return{producers:r,consumers:i}}function bU(e,t){let n=new Map,r=new Set,i=e=>{let a=n.get(e);if(a!==void 0)return a;if(r.has(e))return-1;r.add(e);let o=0;for(let n of t.get(e)??[])o=Math.max(o,i(n)+1);return r.delete(e),n.set(e,o),o};for(let t of e)i(t);return n}function xU(e,t){let{producers:n,consumers:r}=yU(e,t),i=bU(e,n),a=[];for(let t of e)(a[i.get(t)]??=[]).push(t);for(let e=0;e<a.length;e++)a[e]??=[];let o=new Map,s=e=>e.forEach((e,t)=>o.set(e,t));a.forEach(s);let c=(e,t)=>{let n=new Map;for(let[r,i]of e.entries()){let e=(t.get(i)??[]).map(e=>o.get(e));n.set(i,e.length?e.reduce((e,t)=>e+t,0)/e.length:r)}e.sort((e,t)=>n.get(e)-n.get(t)),s(e)};for(let e=0;e<vU;e++){for(let e=1;e<a.length;e++)c(a[e],n);for(let e=a.length-2;e>=0;e--)c(a[e],r)}let l=[],u=new Map;for(let[e,t]of a.entries())for(let[n,r]of t.entries()){let t={id:r,layer:e,row:n,x:_U+e*224,y:_U+n*56};l.push(t),u.set(r,t)}let d=[];for(let[e,t]of n){let n=u.get(e);for(let r of t){let t=u.get(r),i=t.x+168,a=t.y+22,o=n.x,s=n.y+22,c=Math.max(24,(o-i)/2);d.push({producer:r,consumer:e,path:`M${i} ${a} C${i+c} ${a} ${o-c} ${s} ${o} ${s}`})}}let f=Math.max(0,...a.map(e=>e.length));return{nodes:l,edges:d,layers:a,width:16+Math.max(1,a.length)*224-hU,height:16+Math.max(1,f)*56-gU}}function SU(e,t){let n=(n,r)=>{let i=new Set,a=[e];for(;a.length;){let o=a.pop();for(let s of t)s[n]!==o||i.has(s[r])||s[r]===e||(i.add(s[r]),a.push(s[r]))}return i};return{upstream:n(`consumer`,`producer`),downstream:n(`producer`,`consumer`)}}function CU(e,t,n,r=120){if(e.length<=r)return[...e];if(!n||!e.includes(n))return e.slice(0,r);let{upstream:i,downstream:a}=SU(n,t),o=new Set([n]);for(let e of[...i,...a]){if(o.size>=r)break;o.add(e)}return e.filter(e=>o.has(e))}function wU(e,t,n,r){let i=e.nodes.find(e=>e.id===n);if(!i||r===`Home`)return e.nodes[0]?.id??null;if(r===`End`)return e.nodes.at(-1)?.id??null;let a=e.layers[i.layer]??[];if(r===`ArrowUp`)return a[i.row-1]??null;if(r===`ArrowDown`)return a[i.row+1]??null;let o=r===`ArrowLeft`?-1:1,s=new Set(t.flatMap(e=>o<0?e.consumer===n?[e.producer]:[]:e.producer===n?[e.consumer]:[])),c=e=>e.sort((e,t)=>Math.abs(e.y-i.y)-Math.abs(t.y-i.y)||e.x-t.x)[0]?.id??null,l=e.nodes.filter(e=>s.has(e.id));return l.length?c(l):c(e.nodes.filter(e=>e.layer===i.layer+o))}var TU=(e,t)=>t.producer+`>`+t.consumer,EU=(e,t)=>t.id;function DU(e,t){if(e&1&&(L(0,`p`,5),G(1),R()),e&2){let e=t,n=U();E(),R_(` Drawing `,e.drawn,` of `,e.total,` signals. `,n.selectedId()?`The selected signal and its chain are drawn first.`:`Select a signal in the list to draw its chain.`,` `)}}function OU(e,t){if(e&1&&(C(),Sg(0,`path`,11)),e&2){let e=t.$implicit;p_(U().edgeTone(e)),O(`d`,e.path)}}function kU(e,t){e&1&&(L(0,`span`,15),G(1,`watching`),R())}function AU(e,t){if(e&1){let e=z();L(0,`button`,12),H(`click`,function(){let t=x(e).$implicit;return S(U().pick(t.id))})(`focus`,function(){let t=x(e).$implicit;return S(U().focused.set(t.id))})(`keydown`,function(t){let n=x(e).$implicit;return S(U().onKey(t,n.id))}),L(1,`span`,13),Sg(2,`span`,14),G(3),k(4,kU,2,0,`span`,15),R(),L(5,`span`,16),G(6),R()()}if(e&2){let e=t.$implicit,n=U();p_(n.tone(e.id)),f_(`left`,e.x,`px`)(`top`,e.y,`px`)(`width`,n.nodeWidth,`px`)(`height`,n.nodeHeight,`px`),B(`title`,n.labelOf(e.id)),O(`tabindex`,e.id===n.focusId()?0:-1)(`aria-pressed`,e.id===n.selectedId())(`aria-label`,n.describe(e.id))(`data-node`,e.id),E(2),f_(`background`,n.colorOf(e.id)),E(),q(` `,n.byId().get(e.id)?.kind,` `),E(),A(n.watched().has(e.id)?4:-1),E(2),K(n.labelOf(e.id))}}var jU=new Set([`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`]),MU=class e{nodes=$.required();links=$.required();selectedId=$(null);watched=$(new Set);kindColor=$(()=>`var(--text-3)`);selected=xv();host=b(Rl).nativeElement;static seq=0;helpId=`signal-graph-help-${++e.seq}`;nodeWidth=168;nodeHeight=44;byId=X(()=>new Map(this.nodes().map(e=>[e.id,e])));drawn=X(()=>CU(this.nodes().map(e=>e.id),this.links(),this.selectedId()));capped=X(()=>{let e=this.nodes().length,t=this.drawn().length;return t<e?{drawn:t,total:e}:null});layout=X(()=>xU(this.drawn(),this.links()));chain=X(()=>{let e=this.selectedId();return e&&this.byId().has(e)?SU(e,this.links()):null});counts=X(()=>{let e=new Map,t=t=>{let n=e.get(t);return n||e.set(t,n={producers:0,consumers:0}),n};for(let e of this.links())t(e.consumer).producers++,t(e.producer).consumers++;return e});focused=w(null);focusId=X(()=>{let e=new Set(this.drawn()),t=this.focused();if(t&&e.has(t))return t;let n=this.selectedId();return n&&e.has(n)?n:this.layout().nodes[0]?.id??null});labelOf(e){let t=this.byId().get(e);return t?.label??`(unnamed ${t?.kind??`node`})`}colorOf(e){return this.kindColor()(this.byId().get(e)?.kind??`unknown`)}tone(e){if(e===this.selectedId())return`selected`;let t=this.chain();return t?t.upstream.has(e)?`up`:t.downstream.has(e)?`down`:`faded`:``}edgeTone(e){let t=this.chain(),n=this.selectedId();return!t||!n?``:(e=>e===n||t.upstream.has(e))(e.consumer)&&t.upstream.has(e.producer)?`up`:(e=>e===n||t.downstream.has(e))(e.producer)&&t.downstream.has(e.consumer)?`down`:`faded`}describe(e){let t=this.byId().get(e),{producers:n=0,consumers:r=0}=this.counts().get(e)??{},i=[`${t?.kind??`node`} ${t?.label??`unnamed`}`,`${n} ${n===1?`producer`:`producers`}`,`${r} ${r===1?`consumer`:`consumers`}`],a=this.tone(e);return a===`up`&&i.push(`upstream of the selected signal`),a===`down`&&i.push(`downstream of the selected signal`),this.watched().has(e)&&i.push(`watched`),i.join(`, `)}pick(e){this.focused.set(e),this.selected.emit(e)}onKey(e,t){if(!jU.has(e.key))return;e.preventDefault();let n=wU(this.layout(),this.links(),t,e.key);if(!n)return;this.focused.set(n);let r=[...this.host.querySelectorAll(`[data-node]`)].find(e=>e.dataset.node===n);r?.scrollIntoView?.({block:`nearest`,inline:`nearest`}),r?.focus({preventScroll:!0})}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-signal-graph-view`]],inputs:{nodes:[1,`nodes`],links:[1,`links`],selectedId:[1,`selectedId`],watched:[1,`watched`],kindColor:[1,`kindColor`]},outputs:{selected:`selected`},decls:17,vars:11,consts:[[1,`sr-only`,3,`id`],[`aria-hidden`,`true`,1,`legend`],[1,`key`,`key-selected`],[1,`key`,`key-up`],[1,`key`,`key-down`],[`role`,`status`,1,`cap-note`],[`role`,`group`,1,`canvas`],[1,`plane`],[`aria-hidden`,`true`,`focusable`,`false`],[1,`edge`,3,`class`],[`type`,`button`,1,`gnode`,3,`class`,`left`,`top`,`width`,`height`,`title`],[1,`edge`],[`type`,`button`,1,`gnode`,3,`click`,`focus`,`keydown`,`title`],[1,`gkind`],[`aria-hidden`,`true`,1,`dot`],[1,`watching`],[1,`glabel`]],template:function(e,t){if(e&1&&(L(0,`p`,0),G(1,` Producers are on the left and consumers on the right. Use the arrow keys to move between signals and Enter to select one. The list below has the same signals. `),R(),L(2,`div`,1)(3,`span`,2),G(4,`Selected`),R(),L(5,`span`,3),G(6,`Upstream (producers)`),R(),L(7,`span`,4),G(8,`Downstream (consumers)`),R()(),k(9,DU,2,3,`p`,5),L(10,`div`,6)(11,`div`,7),C(),L(12,`svg`,8),j(13,OU,1,3,`:svg:path`,9,TU),R(),j(15,AU,7,20,`button`,10,EU),R()()),e&2){let e;B(`id`,t.helpId),E(9),A((e=t.capped())?9:-1,e),E(),O(`aria-label`,`Signal graph, `+t.layout().nodes.length+` signals`)(`aria-describedby`,t.helpId),E(),f_(`width`,t.layout().width,`px`)(`height`,t.layout().height,`px`),E(),O(`width`,t.layout().width)(`height`,t.layout().height)(`viewBox`,`0 0 `+t.layout().width+` `+t.layout().height),E(),M(t.layout().edges),E(2),M(t.layout().nodes)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.legend[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.key[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.key[_ngcontent-%COMP%]::before {
+  content: "";
+  width: 18px;
+  height: 0;
+  border-top: 2px solid var(--%NS%graph-edge);
+}
+
+.key-selected[_ngcontent-%COMP%]::before {
+  height: 10px;
+  border: 2px solid var(--%NS%accent);
+  border-radius: 3px;
+  background: var(--%NS%accent-soft);
+}
+
+.key-up[_ngcontent-%COMP%]::before {
+  border-top-color: var(--%NS%accent);
+}
+
+.key-down[_ngcontent-%COMP%]::before {
+  border-top: 2px dashed var(--%NS%ok);
+}
+
+.cap-note[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.canvas[_ngcontent-%COMP%] {
+  max-height: 420px;
+  overflow: auto;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.plane[_ngcontent-%COMP%] {
+  position: relative;
+}
+
+svg[_ngcontent-%COMP%] {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+}
+
+.edge[_ngcontent-%COMP%] {
+  fill: none;
+  stroke: var(--%NS%graph-edge);
+  stroke-width: 1.5;
+  transition: stroke 0.15s var(--%NS%ease);
+}
+
+.edge.up[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+  stroke-width: 2;
+}
+
+.edge.down[_ngcontent-%COMP%] {
+  stroke: var(--%NS%ok);
+  stroke-width: 2;
+  stroke-dasharray: 5 3;
+}
+
+.edge.faded[_ngcontent-%COMP%] {
+  stroke: var(--%NS%border);
+}
+
+.gnode[_ngcontent-%COMP%] {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 4px 8px;
+  text-align: left;
+  font: inherit;
+  color: var(--%NS%text);
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.gnode[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.gnode[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.gnode.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border: 2px solid var(--%NS%accent);
+}
+
+.gnode.up[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  box-shadow: inset 3px 0 0 var(--%NS%accent);
+}
+
+.gnode.down[_ngcontent-%COMP%] {
+  border: 1px dashed var(--%NS%ok);
+  box-shadow: inset 3px 0 0 var(--%NS%ok);
+}
+
+.gnode.faded[_ngcontent-%COMP%] {
+  background: var(--%NS%bg);
+  border-color: var(--%NS%border);
+}
+
+.gkind[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 10.5px;
+  color: var(--%NS%text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.watching[_ngcontent-%COMP%] {
+  margin-left: auto;
+  padding: 0 5px;
+  border: 1px solid;
+  border-radius: 99px;
+  text-transform: none;
+  letter-spacing: 0;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.glabel[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text-strong);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .edge[_ngcontent-%COMP%], 
+   .gnode[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})};function NU(e,t){if(e&1){let e=z();P(0,`button`,4),V(`click`,function(){x(e);let t=U();return S(t.showFramework.set(!t.showFramework()))}),G(1,` Show framework signals `),P(2,`span`,8),G(3),F()()}if(e&2){let e=U();O(`aria-pressed`,e.showFramework()),E(3),J(``,t,` `,e.showFramework()?`shown`:`hidden`)}}function PU(e,t){e&1&&(P(0,`p`,6),G(1,` Write stacks are on for this page. Each set of a named signal keeps the first 3 app frames of the code that wrote it, shown in its value history. Taking a stack slows every write, so turn it off when you are done. `),F())}function FU(e,t){if(e&1){let e=z();P(0,`app-signal-graph-view`,11),V(`selected`,function(t){return x(e),S(U(2).selectFromGraph(t))}),F()}if(e&2){let e=U(2);N(`nodes`,e.graphNodes())(`links`,e.graphLinks())(`selectedId`,e.selectedId())(`watched`,e.watchedIds())(`kindColor`,e.kindColorOf)}}function IU(e,t){e&1&&(P(0,`p`,6),G(1,` Every signal in this graph was created by Angular. Show framework signals to see them. `),F())}function LU(e,t){if(e&1){let e=z();P(0,`p`,10)(1,`span`),G(2,`Selected`),F(),P(3,`span`,12),G(4),F(),P(5,`span`,13),G(6,`·`),F(),P(7,`span`),G(8),F(),P(9,`span`,13),G(10,`·`),F(),P(11,`span`),G(12),F(),P(13,`button`,14),V(`click`,function(){let t=x(e);return S(U(2).jumpTo(t))}),G(14,`Show details`),F()()}if(e&2){let e=t,n=U(2);E(4),K(e.label??`(unnamed)`),E(4),K(n.plural(n.getDependencies(e).length,`producer`)),E(4),K(n.plural(n.getConsumers(e).length,`consumer`))}}function RU(e,t){if(e&1&&(P(0,`div`,7),k(1,FU,1,5,`app-signal-graph-view`,9)(2,IU,2,0,`p`,6),k(3,LU,15,3,`p`,10),F()),e&2){let e,t=U();E(),A(t.graphNodes().length?1:2),E(2),A((e=t.selectedNode())?3:-1,e)}}var zU=class e{state=b(hH);frameworkCount=this.state.frameworkCount;showFramework=this.state.showFramework;stacksOn=this.state.stacksOn;showGraph=this.state.showGraph;graphNodes=this.state.graphNodes;graphLinks=this.state.graphLinks;selectedId=this.state.selectedId;selectedNode=this.state.selectedNode;watchedIds=this.state.watchedIds;kindColorOf=e=>pH(e);plural=mH;toggleStacks(){this.state.toggleStacks()}selectFromGraph(e){this.state.selectFromGraph(e)}getDependencies(e){return this.state.getDependencies(e)}getConsumers(e){return this.state.getConsumers(e)}jumpTo(e){this.state.jumpTo(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appSignalGraphSection`,``]],decls:11,vars:6,consts:[[1,`section-head`],[`id`,`signal-graph-heading`,1,`list-heading`],[1,`section-actions`],[`type`,`button`,1,`toggle`],[`type`,`button`,1,`toggle`,3,`click`],[`type`,`button`,`aria-controls`,`signal-graph-body`,1,`toggle`,3,`click`],[1,`hint`,`graph-hint`],[`id`,`signal-graph-body`],[1,`count`],[3,`nodes`,`links`,`selectedId`,`watched`,`kindColor`],[1,`graph-selection`],[3,`selected`,`nodes`,`links`,`selectedId`,`watched`,`kindColor`],[1,`rel-label`],[`aria-hidden`,`true`,1,`sep`],[`type`,`button`,1,`link-button`,3,`click`]],template:function(e,t){if(e&1&&(P(0,`div`,0)(1,`h2`,1),G(2,`Graph`),F(),P(3,`div`,2),k(4,NU,4,3,`button`,3),P(5,`button`,4),V(`click`,function(){return t.toggleStacks()}),G(6,` Record write stacks `),F(),P(7,`button`,5),V(`click`,function(){return t.showGraph.set(!t.showGraph())}),G(8),F()()(),k(9,PU,2,0,`p`,6),k(10,RU,4,2,`div`,7)),e&2){let e;E(4),A((e=t.frameworkCount())?4:-1,e),E(),O(`aria-pressed`,t.stacksOn()),E(2),O(`aria-expanded`,t.showGraph()),E(),q(` `,t.showGraph()?`Hide graph`:`Show graph`,` `),E(),A(t.stacksOn()?9:-1),E(),A(t.showGraph()?10:-1)}},dependencies:[MU],styles:[`.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 460px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.reset[_ngcontent-%COMP%] {
+  height: 34px;
+  margin-top: 4px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.reset[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.reset[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+    border-top-color: var(--%NS%border-strong);
+  }
+}
+.sep[_ngcontent-%COMP%] {
+  color: var(--%NS%border-strong);
+}
+
+.list-heading[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 16px 0 8px;
+}
+
+.rel-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.graph-section[_nghost-%COMP%] {
+  margin-bottom: 16px;
+}
+
+.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 12px;
+  margin: 16px 0 8px;
+}
+
+.section-head[_ngcontent-%COMP%]   .list-heading[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.section-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.toggle[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.toggle[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.toggle[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.toggle[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.toggle[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+
+.graph-hint[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  max-width: none;
+}
+
+.graph-selection[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.link-button[_ngcontent-%COMP%] {
+  min-height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--%NS%accent-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.link-button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.link-button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},BU=(e,t)=>t.id;function VU(e,t){e&1&&(P(0,`span`,5),G(1,`watching`),F())}function HU(e,t){e&1&&(P(0,`span`,6),G(1,`framework`),F())}function UU(e,t){if(e&1&&(P(0,`span`,7),G(1),F()),e&2){let e=t;E(),J(``,e,` `,e===1?`change`:`changes`)}}function WU(e,t){if(e&1&&(P(0,`span`,9),G(1),uv(2,`json`),F()),e&2){let e=U().$implicit;E(),K(dv(2,1,e.value))}}function GU(e,t){if(e&1&&(P(0,`span`,12),G(1,`·`),F(),P(2,`span`),G(3),F()),e&2){let e=U().$implicit,t=U();E(3),q(`Deps: `,t.getDependencies(e).length)}}function KU(e,t){if(e&1&&(P(0,`span`,12),G(1,`·`),F(),P(2,`span`),G(3),F()),e&2){let e=U().$implicit,t=U();E(3),q(`Consumers: `,t.getConsumers(e).length)}}function qU(e,t){if(e&1&&I(0,`div`,11),e&2){let e=U().$implicit;N(`id`,`signal-detail-`+e.id)}}function JU(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,1),V(`click`,function(){let t=x(e).$implicit;return S(U().select(t.id))}),P(2,`span`,2)(3,`span`,3),G(4),F(),P(5,`span`,4),G(6),F(),k(7,VU,2,0,`span`,5),k(8,HU,2,0,`span`,6),k(9,UU,2,2,`span`,7),I(10,`span`,8),F(),k(11,WU,3,3,`span`,9),P(12,`span`,10)(13,`span`),G(14),F(),k(15,GU,4,1),k(16,KU,4,1),F()(),k(17,qU,1,1,`div`,11),F()}if(e&2){let e,n=t.$implicit,r=U();E(),W(`selected`,r.selectedId()===n.id),O(`aria-expanded`,r.selectedId()===n.id)(`aria-controls`,`signal-detail-`+n.id)(`data-card`,n.id),E(2),f_(`background`,r.kindColor(n.kind)),E(),K(n.kind),E(2),K(n.label??`(unnamed)`),E(),A(r.watchedIds().has(n.id)?7:-1),E(),A(n.framework?8:-1),E(),A((e=r.changeCount(n.id))?9:-1,e),E(2),A(n.value===void 0?-1:11),E(3),q(`Epoch: `,n.epoch),E(),A(r.getDependencies(n).length?15:-1),E(),A(r.getConsumers(n).length?16:-1),E(),A(r.selectedId()===n.id&&r.selectedNode()?17:-1)}}function YU(e,t){if(e&1){let e=z();P(0,`button`,16),V(`click`,function(){return x(e),S(U(2).clearFilters())}),G(1,`Clear filters`),F()}}function XU(e,t){if(e&1&&(P(0,`li`,0)(1,`p`,13),G(2),F(),P(3,`p`,14),G(4),F(),k(5,YU,2,0,`button`,15),F()),e&2){let e=U();E(2),q(` `,e.hasAnySignals()?`No signals match.`:`No signals in this graph.`,` `),E(2),q(` `,e.hasAnySignals()?`Try a different name or kind.`:`Select a component that reads signals, or interact with the page to create some.`,` `),E(),A(e.hasAnySignals()||e.filter()||e.kind()?5:-1)}}var ZU=class e{state=b(hH);filteredNodes=this.state.filteredNodes;selectedId=this.state.selectedId;selectedNode=this.state.selectedNode;watchedIds=this.state.watchedIds;hasAnySignals=this.state.hasAnySignals;filter=this.state.filter;kind=this.state.kind;kindColor=pH;select(e){this.state.select(e)}changeCount(e){return this.state.changeCount(e)}getDependencies(e){return this.state.getDependencies(e)}getConsumers(e){return this.state.getConsumers(e)}clearFilters(){this.state.clearFilters()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`ul`,`appSignalList`,``]],decls:3,vars:1,consts:[[1,`empty`,`compact`],[`type`,`button`,1,`node-card`,3,`click`],[1,`node-header`],[1,`kind-badge`],[1,`node-label`],[1,`watching-badge`],[1,`framework-badge`],[1,`changed-badge`],[`aria-hidden`,`true`,1,`chevron`],[1,`node-value`],[1,`node-meta`],[`appSignalDetail`,``,1,`detail-panel`,3,`id`],[`aria-hidden`,`true`,1,`sep`],[1,`empty-title`],[1,`hint`],[`type`,`button`,1,`reset`],[`type`,`button`,1,`reset`,3,`click`]],template:function(e,t){e&1&&j(0,JU,18,17,`li`,null,BU,!1,XU,6,3,`li`,0),e&2&&M(t.filteredNodes())},dependencies:[oU,fy],styles:[`.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 460px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.reset[_ngcontent-%COMP%] {
+  height: 34px;
+  margin-top: 4px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.reset[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.reset[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+    border-top-color: var(--%NS%border-strong);
+  }
+}
+.node-header[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  min-width: 0;
+}
+
+.kind-badge[_ngcontent-%COMP%] {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10.5px;
+  line-height: 18px;
+  padding: 0 8px;
+  border-radius: 99px;
+  color: var(--%NS%kind-ink);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.node-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.node-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 6px;
+  min-width: 0;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--%NS%text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.node-meta[_ngcontent-%COMP%]   .file[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+
+.sep[_ngcontent-%COMP%] {
+  color: var(--%NS%border-strong);
+}
+
+.nodes[_nghost-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.node-card[_ngcontent-%COMP%] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  padding: 12px 16px;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+.node-card[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  border-color: var(--%NS%border-strong);
+}
+
+.nodes[_nghost-%COMP%]    > li[_ngcontent-%COMP%] {
+  display: block;
+  min-width: 0;
+  padding: 0;
+}
+
+
+.nodes[_nghost-%COMP%]    > li.empty[_ngcontent-%COMP%] {
+  display: flex;
+  padding: 24px 16px;
+}
+
+button.node-card[_ngcontent-%COMP%] {
+  cursor: pointer;
+}
+
+.node-card[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.node-card.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  margin-left: auto;
+  border-right: 1.5px solid var(--%NS%text-3);
+  border-bottom: 1.5px solid var(--%NS%text-3);
+  transform: translateY(-2px) rotate(45deg);
+  transition: transform 0.2s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.node-card[_ngcontent-%COMP%]:hover   .chevron[_ngcontent-%COMP%] {
+  border-color: var(--%NS%text);
+}
+
+.node-card.selected[_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  transform: translateY(2px) rotate(-135deg);
+}
+
+.node-value[_ngcontent-%COMP%] {
+  display: block;
+  margin-top: 8px;
+  padding: 4px 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text-2);
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+}
+
+.node-card.selected[_ngcontent-%COMP%]   .node-value[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%bg) 70%, transparent);
+}
+
+.changed-badge[_ngcontent-%COMP%] {
+  flex: none;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 99px;
+  font-variant-numeric: tabular-nums;
+}
+
+.changed-badge[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.watching-badge[_ngcontent-%COMP%], 
+.framework-badge[_ngcontent-%COMP%] {
+  flex: none;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 99px;
+}
+
+.watching-badge[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.framework-badge[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  border-color: var(--%NS%border-strong);
+}
+
+@media (max-width: 480px) {
+  .node-card[_ngcontent-%COMP%] {
+    padding: 12px;
+  }
+}`]})},QU=(e,t)=>t.name+t.file+t.line;function $U(e,t){if(e&1&&(P(0,`span`,7),G(1,`·`),F(),P(2,`span`),G(3),F()),e&2){let e=U().$implicit;E(3),q(`in <`,e.component,`>`)}}function eW(e,t){if(e&1&&(P(0,`div`,0)(1,`div`,2)(2,`span`,3),G(3),F(),P(4,`span`,4),G(5),F()(),P(6,`div`,5),I(7,`app-source-link`,6),k(8,$U,4,1),F()()),e&2){let e=t.$implicit,n=U();E(2),f_(`background`,n.kindColor(e.kind)),E(),K(e.kind),E(2),K(e.name),E(2),N(`file`,e.file)(`line`,e.line),E(),A(e.component?8:-1)}}function tW(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`p`,8),G(2,`No signals match.`),F(),P(3,`p`,9),G(4,`Try a different name or kind.`),F(),P(5,`button`,10),V(`click`,function(){return x(e),S(U().clearFilters())}),G(6,`Clear filters`),F()()}}var nW=class e{state=b(hH);filteredSourceSignals=this.state.filteredSourceSignals;kindColor=pH;clearFilters(){this.state.clearFilters()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appSourceSignals`,``]],decls:3,vars:1,consts:[[1,`node-card`],[`role`,`status`,1,`empty`,`compact`],[1,`node-header`],[1,`kind-badge`],[1,`node-label`],[1,`node-meta`],[1,`file`,3,`file`,`line`],[`aria-hidden`,`true`,1,`sep`],[1,`empty-title`],[1,`hint`],[`type`,`button`,1,`reset`,3,`click`]],template:function(e,t){e&1&&j(0,eW,9,7,`div`,0,QU,!1,tW,7,0,`div`,1),e&2&&M(t.filteredSourceSignals())},dependencies:[aM],styles:[`.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 460px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.reset[_ngcontent-%COMP%] {
+  height: 34px;
+  margin-top: 4px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.reset[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.reset[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+    border-top-color: var(--%NS%border-strong);
+  }
+}
+.node-header[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  min-width: 0;
+}
+
+.kind-badge[_ngcontent-%COMP%] {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10.5px;
+  line-height: 18px;
+  padding: 0 8px;
+  border-radius: 99px;
+  color: var(--%NS%kind-ink);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.node-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.node-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 6px;
+  min-width: 0;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--%NS%text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.node-meta[_ngcontent-%COMP%]   .file[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+
+.sep[_ngcontent-%COMP%] {
+  color: var(--%NS%border-strong);
+}
+
+.nodes[_nghost-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.node-card[_ngcontent-%COMP%] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  padding: 12px 16px;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+.node-card[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  border-color: var(--%NS%border-strong);
+}
+
+@media (max-width: 480px) {
+  .node-card[_ngcontent-%COMP%] {
+    padding: 12px;
+  }
+}`]})},rW=(e,t)=>t.id,iW=(e,t)=>t.id+`:`+t.change.epoch;function aW(e,t){if(e&1&&(L(0,`p`,1),G(1),R()),e&2){let e=t;E(),J(` `,e,` watched `,e===1?`signal is`:`signals are`,` not in this graph. Their changes still log to the page console. `)}}function oW(e,t){if(e&1&&(L(0,`span`,4),G(1),uv(2,`json`),R()),e&2){let e=U().$implicit;E(),K(dv(2,1,e.value))}}function sW(e,t){if(e&1&&(L(0,`span`,5),G(1),R()),e&2){let e=t;E(),J(``,e,` `,e===1?`change`:`changes`)}}function cW(e,t){if(e&1){let e=z();L(0,`li`)(1,`span`,3),G(2),R(),k(3,oW,3,3,`span`,4),k(4,sW,2,2,`span`,5),L(5,`button`,6),H(`click`,function(){let t=x(e).$implicit;return S(U().toggleWatch(t))}),G(6,` Stop watching `),R()()}if(e&2){let e,n=t.$implicit,r=U();E(2),K(n.label??`(unnamed)`),E(),A(n.value===void 0?-1:3),E(),A((e=r.changeCount(n.id))?4:-1,e),E(),O(`aria-label`,`Stop watching `+(n.label??`the unnamed signal`))}}function lW(e,t){if(e&1&&(L(0,`li`),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function uW(e,t){if(e&1&&(L(0,`ol`,12),j(1,lW,2,1,`li`,null,ug),R()),e&2){let e=U().$implicit;E(),M(e.change.stack)}}function dW(e,t){if(e&1&&(L(0,`li`)(1,`span`,10)(2,`time`),G(3),uv(4,`date`),R(),L(5,`span`,3),G(6),R(),L(7,`span`,11),G(8),R()(),L(9,`pre`),G(10),uv(11,`json`),R(),k(12,uW,3,0,`ol`,12),R()),e&2){let e=t.$implicit,n=U(2);E(3),K(fv(4,7,e.change.at,`HH:mm:ss.SSS`)),E(3),K(e.label),E(),p_(`source-`+e.change.source),E(),K(n.sourceLabel(e.change.source)),E(2),K(dv(11,10,e.change.value)),E(2),A(e.change.stack?.length?12:-1)}}function fW(e,t){if(e&1&&(L(0,`h3`,7),G(1,`Recent changes`),R(),L(2,`div`,8)(3,`ol`,9),j(4,dW,13,12,`li`,null,iW),R()()),e&2){let e=U();E(4),M(e.watchLog())}}var pW=class e{state=b(hH);watchedNodes=this.state.watchedNodes;watchedElsewhere=this.state.watchedElsewhere;watchLog=this.state.watchLog;sourceLabel=dH;changeCount(e){return this.state.changeCount(e)}toggleWatch(e){this.state.toggleWatch(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appWatchedSignals`,``]],decls:7,vars:2,consts:[[`id`,`signal-watched-heading`,1,`list-heading`],[1,`hint`],[1,`watched-list`],[1,`rel-label`],[1,`watched-value`],[1,`changed-badge`],[`type`,`button`,1,`link-button`,3,`click`],[`id`,`signal-watch-log-heading`,1,`sub-heading`],[`role`,`log`,`tabindex`,`0`,`aria-labelledby`,`signal-watch-log-heading`,1,`watch-log`,`scroll-box`],[1,`history`],[1,`history-meta`],[1,`source-tag`],[`aria-label`,`Written from`,1,`stack`]],template:function(e,t){if(e&1&&(L(0,`h2`,0),G(1,`Watched`),R(),k(2,aW,2,2,`p`,1),L(3,`ul`,2),j(4,cW,7,4,`li`,null,rW),R(),k(6,fW,6,0)),e&2){let e;E(2),A((e=t.watchedElsewhere())?2:-1,e),E(2),M(t.watchedNodes()),E(2),A(t.watchLog().length?6:-1)}},dependencies:[dy,fy],styles:[`.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 460px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.reset[_ngcontent-%COMP%] {
+  height: 34px;
+  margin-top: 4px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.reset[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.reset[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+    border-top-color: var(--%NS%border-strong);
+  }
+}
+pre[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  margin: 0;
+  color: var(--%NS%text);
+}
+
+.changed-badge[_ngcontent-%COMP%] {
+  flex: none;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  padding: 0 8px;
+  border: 1px solid;
+  border-radius: 99px;
+  font-variant-numeric: tabular-nums;
+}
+
+.changed-badge[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.scroll-box[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.list-heading[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 16px 0 8px;
+}
+
+.rel-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.history[_ngcontent-%COMP%] {
+  list-style: none;
+  padding: 4px;
+  margin: 0;
+  max-height: 320px;
+  overflow: auto;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: block;
+  padding: 8px;
+  border-radius: 6px;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
+  border-top: 1px solid var(--%NS%border);
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.history-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.history-meta[_ngcontent-%COMP%]   time[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  color: var(--%NS%text);
+}
+
+.source-tag[_ngcontent-%COMP%] {
+  line-height: 16px;
+  padding: 0 8px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border-strong);
+  color: var(--%NS%text);
+}
+
+.source-write[_ngcontent-%COMP%] {
+  color: var(--%NS%hue-info-text);
+  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
+  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+}
+
+.watched[_nghost-%COMP%] {
+  margin-bottom: 16px;
+}
+
+.link-button[_ngcontent-%COMP%] {
+  min-height: 28px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--%NS%accent-text);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.link-button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.link-button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.watched-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+}
+
+.watched-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  padding: 6px 10px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.watched-value[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 120px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.sub-heading[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 12px 0 8px;
+}
+
+.watch-log[_ngcontent-%COMP%] {
+  max-height: 320px;
+  overflow: auto;
+  border-radius: var(--%NS%radius-sm);
+}
+
+.watch-log[_ngcontent-%COMP%]   .history[_ngcontent-%COMP%] {
+  max-height: none;
+  overflow: visible;
+}
+
+.stack[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  padding: 0 0 0 18px;
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  color: var(--%NS%text-2);
+  overflow-wrap: anywhere;
+}
+
+.history[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .stack[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+}`]})},mW=[`filterInput`],hW=(e,t)=>t.kind;function gW(e,t){if(e&1){let e=z();P(0,`div`,3)(1,`span`,17),G(2,`Page`),F(),P(3,`app-select`,18),V(`valueChange`,function(t){return x(e),S(U().selectPage(t))}),F()()}if(e&2){let e=U();E(3),N(`options`,e.pageOptions())(`value`,e.shownPageId())}}function _W(e,t){if(e&1){let e=z();P(0,`div`,4)(1,`span`,19),G(2,`Graph of`),F(),P(3,`app-select`,20),V(`valueChange`,function(t){return x(e),S(U().pickComponent(t))}),F()()}if(e&2){let e=U();E(3),N(`options`,e.componentOptions())(`value`,e.pickerValue())}}function vW(e,t){if(e&1&&(P(0,`span`,23),G(1),F()),e&2){let e=U(2);E(),K(e.sourceNote(e.graph().source))}}function yW(e,t){if(e&1&&(P(0,`p`,6)(1,`span`,21),G(2),F(),P(3,`span`,22),G(4),F(),k(5,vW,2,1,`span`,23),F()),e&2){let e=t,n=U();E(2),K(e.name),E(2),K(e.path),E(),A(n.graph().source?5:-1)}}function bW(e,t){if(e&1&&(P(0,`p`,6)(1,`span`,21),G(2),F(),P(3,`span`,23),G(4,`environment injector`),F()()),e&2){let e=U();E(2),K(e.injectorLabel(t))}}function xW(e,t){if(e&1&&(P(0,`p`,6)(1,`span`,21),G(2),F(),P(3,`span`,22),G(4),F(),P(5,`span`,23),G(6,`directives, no component`),F()()),e&2){let e=t;E(2),K(e.directives.join(`, `)||`<`+e.tag+`>`),E(2),q(`<`,e.tag,`>`)}}function SW(e,t){e&1&&(P(0,`p`,7),G(1,` The picked component or injector is gone or has no signal graph, so this shows another one. `),F())}function CW(e,t){e&1&&G(0,` The effects registered on this injector and the signals they read. A signal that no effect reads is not part of the graph. Pick a kind to filter. `)}function wW(e,t){e&1&&G(0,` The live signal graph of one component. Only signals that its template or an effect has read appear here; a signal nothing has read yet is not part of the graph. Pick a kind to filter. `)}function TW(e,t){e&1&&G(0,` Loading the live signal graph… `)}function EW(e,t){e&1&&G(0,` Every signal, computed and effect found in your source. Pick a kind to filter. `)}function DW(e,t){if(e&1&&(P(0,`app-angular-unavailable`,9),G(1,` This list comes from a source scan. `),F()),e&2){let e=U();N(`page`,e.angularPage())(`missing`,e.unsupported())}}function OW(e,t){e&1&&(P(0,`p`,7),G(1,` The signal write hook did not load. Value history shows sampled values only, with no exact set entries. `),F())}function kW(e,t){if(e&1&&(P(0,`p`,7),G(1),F()),e&2){let e=U();E(),J(` Showing `,e.graph().nodes.length,` of `,t,` signals. The rest and their edges are left out. `)}}function AW(e,t){if(e&1){let e=z();P(0,`button`,24),V(`click`,function(){let t=x(e).$implicit,n=U(2);return S(n.kind.set(n.kind()===t.kind?null:t.kind))}),I(1,`span`,27),P(2,`span`,28),G(3),F(),P(4,`span`,25),G(5),F()()}if(e&2){let e=t.$implicit,n=U(2);W(`active`,n.kind()===e.kind),O(`aria-pressed`,n.kind()===e.kind),E(),f_(`background`,n.kindColor(e.kind)),E(2),K(e.kind),E(2),K(e.count)}}function jW(e,t){if(e&1){let e=z();P(0,`div`,10)(1,`button`,24),V(`click`,function(){return x(e),S(U().kind.set(null))}),G(2,` All `),P(3,`span`,25),G(4),F()(),j(5,AW,6,7,`button`,26,hW),F()}if(e&2){let e=U();E(),W(`active`,!e.kind()),O(`aria-pressed`,!e.kind()),E(3),K(e.kindTotal()),E(),M(e.kindChips())}}function MW(e,t){e&1&&(P(0,`div`,11),I(1,`span`,29),P(2,`p`,30),G(3,`Scanning source for signals…`),F()())}function NW(e,t){if(e&1){let e=z();P(0,`div`,31)(1,`p`,30),G(2,`Couldn't load signals`),F(),P(3,`p`,32),G(4,` The devtools server did not answer. Check that it is still running, then retry. `),F(),P(5,`button`,33),V(`click`,function(){return x(e),S(U().retry())}),G(6),F()()}if(e&2){let e=U();W(`compact`,e.sourceSignals().length>0),E(5),O(`aria-disabled`,e.retrying()||null),E(),q(` `,e.retrying()?`Retrying…`:`Retry`,` `)}}function PW(e,t){e&1&&(P(0,`div`,13)(1,`p`,30),G(2,`No signals found.`),F(),P(3,`p`,32),G(4,` No `),P(5,`code`),G(6,`signal()`),F(),G(7,`, `),P(8,`code`),G(9,`computed()`),F(),G(10,` or `),P(11,`code`),G(12,`effect()`),F(),G(13,` calls were found in your source. To see the live graph, run Angular 20.1 or later with the overlay connected and select a component. `),F()())}function FW(e,t){e&1&&(P(0,`p`,34),G(1,`Signals from the source scan:`),F(),I(2,`div`,35))}function IW(e,t){e&1&&I(0,`section`,14)}function LW(e,t){e&1&&I(0,`section`,15)}function RW(e,t){e&1&&(P(0,`h2`,36),G(1,`Resources`),F(),I(2,`ul`,37))}function zW(e,t){e&1&&(P(0,`h2`,36),G(1,`Signals`),F(),I(2,`ul`,38))}var BW=class e{rpc=$(null);focus=$(null);state=b(hH);detail=b(gH);filterInput=Ov(`filterInput`);angularPage=this.state.angularPage;chosenPageId=this.state.chosenPageId;announcement=this.state.announcement;shownPageId=this.state.shownPageId;unsupported=this.state.unsupported;graphKnown=this.state.graphKnown;graph=this.state.graph;picked=this.state.picked;pageOptions=this.state.pageOptions;showInternals=this.state.showInternals;sourceSignals=this.state.sourceSignals;sourceLoaded=this.state.sourceLoaded;loadFailed=this.state.loadFailed;retrying=this.state.retrying;filter=this.state.filter;resources=this.state.resources;showFramework=this.state.showFramework;frameworkCount=this.state.frameworkCount;visibleNodes=this.state.visibleNodes;watchedNodes=this.state.watchedNodes;watchedElsewhere=this.state.watchedElsewhere;kindCounts=this.state.kindCounts;kind=this.state.kind;kindChips=this.state.kindChips;kindTotal=this.state.kindTotal;selectedId=this.state.selectedId;selectedNode=this.state.selectedNode;jumpNote=this.state.jumpNote;writeHint=this.detail.writeHint;filteredResources=this.state.filteredResources;filteredNodes=this.state.filteredNodes;filteredSourceSignals=this.state.filteredSourceSignals;componentOptions=this.state.componentOptions;pickerValue=this.state.pickerValue;sourceNote=uH;kindColor=pH;constructor(){this.state.connect(this.rpc,()=>this.filterInput()),T(()=>{let e=this.rpc();e&&(this.state.loadSignalGraph(e),this.state.loadSourceSignals(e))}),T(()=>{let e=this.focus();e&&Z(()=>this.state.showComponent(e))}),T(()=>{let e=this.state.focusedSignal(),t=this.graph();if(!e||t?.component?.id!==e.componentId)return;let n=t.nodes.find(t=>t.locator?.id===e.componentId&&t.locator.key===e.key);Z(()=>{this.state.focusedSignal.set(null),n&&this.state.jumpTo(n)})}),b(Os).onDestroy(()=>{for(let e of this.state.cleanups.splice(0))e()})}selectPage(e){this.state.selectPage(e)}pickComponent(e,t){this.state.pickComponent(e,t)}injectorLabel(e){return this.state.injectorLabel(e)}retry(){return this.state.retry()}clearFilters(){this.state.clearFilters()}select(e){this.state.select(e)}getDependencies(e){return this.state.getDependencies(e)}getConsumers(e){return this.state.getConsumers(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-signal-inspector`]],viewQuery:function(e,t){e&1&&Ug(t.filterInput,mW,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},features:[rv([hH,gH])],decls:30,vars:19,consts:[[`filterInput`,``],[1,`toolbar`],[`placeholder`,`Filter by name or kind`,`saveKey`,`signals`,3,`valueChange`,`value`],[1,`picker`,`page-picker`],[1,`picker`],[`role`,`status`,1,`sr-only`],[1,`showing`],[`role`,`status`,1,`fallback`],[1,`intro`],[`capability`,`signalGraph`,`compact`,``,3,`page`,`missing`],[`role`,`group`,`aria-label`,`Filter by kind`,1,`kinds`],[`role`,`status`,1,`empty`],[`role`,`alert`,1,`empty`,3,`compact`],[1,`empty`],[`appSignalGraphSection`,``,`aria-labelledby`,`signal-graph-heading`,1,`graph-section`],[`appWatchedSignals`,``,`aria-labelledby`,`signal-watched-heading`,1,`watched`],[`role`,`status`,1,`jump-note`],[`id`,`signals-page-label`,1,`label-key`],[`labelledBy`,`signals-page-label`,3,`valueChange`,`options`,`value`],[`id`,`signals-component-label`,1,`label-key`],[`labelledBy`,`signals-component-label`,3,`valueChange`,`options`,`value`],[1,`showing-name`],[1,`mono`],[1,`source-note`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[`aria-hidden`,`true`,1,`dot`],[1,`chip-text`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[`role`,`alert`,1,`empty`],[1,`hint`],[`type`,`button`,1,`reset`,3,`click`],[1,`source-label`],[`appSourceSignals`,``,1,`nodes`],[1,`list-heading`],[`role`,`list`,`appResourceList`,``,1,`nodes`,`resources`],[`role`,`list`,`appRovingList`,`button.node-card`,`appSignalList`,``,1,`nodes`]],template:function(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`app-search-field`,2,0),U_(`valueChange`,function(n){return x(e),H_(t.filter,n)||(t.filter=n),S(n)}),F(),k(3,gW,4,2,`div`,3),k(4,_W,4,2,`div`,4),F(),P(5,`p`,5),G(6),F(),k(7,yW,6,3,`p`,6)(8,bW,5,1,`p`,6)(9,xW,7,2,`p`,6),k(10,SW,2,0,`p`,7),P(11,`p`,8),k(12,CW,1,0)(13,wW,1,0)(14,TW,1,0)(15,EW,1,0),F(),k(16,DW,2,2,`app-angular-unavailable`,9),k(17,OW,2,0,`p`,7),k(18,kW,2,2,`p`,7),k(19,jW,7,4,`div`,10),k(20,MW,4,0,`div`,11),k(21,NW,7,4,`div`,12)(22,PW,14,0,`div`,13),k(23,FW,3,0),k(24,IW,1,0,`section`,14),k(25,LW,1,0,`section`,15),P(26,`p`,16),G(27),F(),k(28,RW,3,0),k(29,zW,3,0)}if(e&2){let e,n;E(),V_(`value`,t.filter),E(2),A(t.pageOptions().length>1?3:-1),E(),A(t.componentOptions().length?4:-1),E(2),K(t.announcement()),E(),A((e=t.graph()?.component)?7:(e=t.graph()?.injector)?8:(e=t.graph()?.element)?9:-1,e),E(3),A(t.graph()&&t.picked()&&t.graph().source!==`selected`?10:-1),E(2),A(t.graph()?.injector?12:t.graph()?13:t.graphKnown()?15:14),E(4),A(t.graph()?-1:16),E(),A(t.graph()?.writeHook===!1?17:-1),E(),A((n=t.graph()?.nodeCount)?18:-1,n),E(),A(t.kindChips().length?19:-1),E(),A(!t.graph()&&!t.sourceLoaded()?20:-1),E(),A(!t.graph()&&t.sourceLoaded()&&t.loadFailed()?21:!t.graph()&&t.sourceLoaded()&&t.sourceSignals().length===0?22:-1),E(2),A(!t.graph()&&t.sourceSignals().length>0?23:-1),E(),A(t.graph()&&(t.visibleNodes().length||t.frameworkCount())?24:-1),E(),A(t.watchedNodes().length||t.watchedElsewhere()?25:-1),E(2),K(t.jumpNote()),E(),A(t.graph()&&t.filteredResources().length?28:-1),E(),A(t.graph()&&(t.visibleNodes().length||!t.filteredResources().length)?29:-1)}},dependencies:[RE,mU,XV,iD,JE,zU,ZU,nW,pW],styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+input[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 60%, var(--%NS%control-border));
+}
+
+input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 460px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.reset[_ngcontent-%COMP%] {
+  height: 34px;
+  margin-top: 4px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.reset[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.reset[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+    border-top-color: var(--%NS%border-strong);
+  }
+}
+.intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.kinds[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.kind-chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease);
+}
+
+.kind-chip[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%text-3);
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text);
+}
+
+.kind-chip[_ngcontent-%COMP%]:active {
+  transform: translateY(0.5px);
+}
+
+.kind-chip.active[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.kind-chip[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.chip-text[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kind-chip[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  flex: none;
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 16px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.kind-chip.active[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 22%, transparent);
+  color: var(--%NS%text-strong);
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.picker[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 1 260px;
+  min-width: 0;
+}
+
+.picker[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.page-picker[_ngcontent-%COMP%] {
+  flex: 0 1 240px;
+}
+
+.label-key[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.showing[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 10px;
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.showing-name[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  overflow-wrap: anywhere;
+}
+
+.source-note[_ngcontent-%COMP%] {
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  line-height: 18px;
+}
+
+.fallback[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%warn);
+  font-size: 12px;
+}
+
+.source-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 12px;
+}
+
+.list-heading[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 16px 0 8px;
+}
+
+.jump-note[_ngcontent-%COMP%] {
+  margin: 0;
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.jump-note[_ngcontent-%COMP%]:not(:empty) {
+  margin-bottom: 8px;
+}
+
+@media (max-width: 480px) {
+  .toolbar[_ngcontent-%COMP%] {
+    padding: 8px;
+  }
+  .toolbar[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], 
+   .picker[_ngcontent-%COMP%] {
+    flex-basis: 100%;
+  }
+}`]})},VW=`pangular-pref:pane`;function HW(e,t){try{let n=Number(localStorage.getItem(`${VW}:${e}`));return Number.isFinite(n)&&n>0?Math.round(n):t}catch{return t}}function UW(e,t){try{t===null?localStorage.removeItem(`${VW}:${e}`):localStorage.setItem(`${VW}:${e}`,String(Math.round(t)))}catch{}}var WW=class e{view=$.required();pane=$(`after`);size=Ev(380);min=$(240);max=$(720);defaultSize=$(380);label=$(`Resize the detail panel`);controls=$(null);valueText=X(()=>`${this.size()} pixels wide`);dragging=w(!1);start=null;clamp(e){return Math.round(Math.min(this.max(),Math.max(this.min(),e)))}set(e,t=!0){let n=this.clamp(e);n!==this.size()&&this.size.set(n),t&&UW(this.view(),n)}onKey(e){let t=e.shiftKey?64:16,n=this.pane()===`before`?1:-1,r={ArrowLeft:-t*n,ArrowRight:t*n};e.key in r?(e.preventDefault(),this.set(this.size()+r[e.key])):(e.key===`Home`||e.key===`End`)&&(e.preventDefault(),this.set(e.key===`Home`?this.min():this.max()))}onPointerDown(e){e.button===0&&(e.preventDefault(),this.start={x:e.clientX,size:this.size()},this.dragging.set(!0),e.currentTarget?.setPointerCapture?.(e.pointerId))}onPointerMove(e){if(!this.start)return;let t=e.clientX-this.start.x;this.set(this.start.size+(this.pane()===`before`?t:-t),!1)}onPointerEnd(e){this.start&&(this.start=null,this.dragging.set(!1),e.currentTarget?.releasePointerCapture?.(e.pointerId),UW(this.view(),this.size()))}reset(){this.size.set(this.clamp(this.defaultSize())),UW(this.view(),null)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-splitter`]],hostAttrs:[`role`,`separator`,`tabindex`,`0`,`aria-orientation`,`vertical`,`title`,`Drag or use the arrow keys to resize. Double click to reset the width.`],hostVars:8,hostBindings:function(e,t){e&1&&V(`keydown`,function(e){return t.onKey(e)})(`pointerdown`,function(e){return t.onPointerDown(e)})(`pointermove`,function(e){return t.onPointerMove(e)})(`pointerup`,function(e){return t.onPointerEnd(e)})(`pointercancel`,function(e){return t.onPointerEnd(e)})(`dblclick`,function(){return t.reset()}),e&2&&(O(`aria-label`,t.label())(`aria-controls`,t.controls())(`aria-valuenow`,t.size())(`aria-valuemin`,t.min())(`aria-valuemax`,t.max())(`aria-valuetext`,t.valueText()),W(`dragging`,t.dragging()))},inputs:{view:[1,`view`],pane:[1,`pane`],size:[1,`size`],min:[1,`min`],max:[1,`max`],defaultSize:[1,`defaultSize`],label:[1,`label`],controls:[1,`controls`]},outputs:{size:`sizeChange`},decls:1,vars:0,consts:[[`aria-hidden`,`true`,1,`grip`]],template:function(e,t){e&1&&Sg(0,`span`,0)},styles:[`[_nghost-%COMP%] {
+  position: relative;
+  display: block;
+  align-self: stretch;
+  width: 12px;
+  min-height: 32px;
+  margin: 0 -4px;
+  border-radius: var(--%NS%radius-sm);
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.grip[_ngcontent-%COMP%] {
+  position: absolute;
+  inset: 0 auto 0 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  border-radius: 1px;
+  background: var(--%NS%control-border);
+  transition: background 150ms var(--%NS%ease);
+}
+
+[_nghost-%COMP%]:hover   .grip[_ngcontent-%COMP%], 
+.dragging[_nghost-%COMP%]   .grip[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+}
+
+[_nghost-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+[_nghost-%COMP%]:focus-visible   .grip[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .grip[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},GW=(e,t)=>t.label,KW=(e,t)=>t.name;function qW(e,t){if(e&1&&(L(0,`tr`)(1,`td`),G(2),R(),L(3,`td`,7),G(4),R(),L(5,`td`,6),G(6),R()()),e&2){let e=t.$implicit,n=U(2);E(2),K(e.label),E(2),K(n.format(e.at)),E(2),K(e.source)}}function JW(e,t){e&1&&(L(0,`p`,6),G(1,` Load `),L(2,`code`),G(3,`@pangular-inspector/devtools/startup-hook`),R(),G(4,` from the polyfills of the development build to time each provider's construction. `),R())}function YW(e,t){if(e&1&&(L(0,`p`,6),G(1),R()),e&2){let e=U();E(),q(` `,e.providers.note||`Provider timing is unavailable on this page.`,` `)}}function XW(e,t){e&1&&G(0,` Recording until one second after the app is first stable. `)}function ZW(e,t){if(e&1&&(L(0,`tr`)(1,`td`,9),G(2),R(),L(3,`td`,7),G(4),R(),L(5,`td`,7),G(6),R(),L(7,`td`,7),G(8),R()()),e&2){let e=t.$implicit,n=U(4);E(2),K(e.name),E(2),K(n.format(e.selfMs)),E(2),K(n.format(e.ms)),E(2),K(e.count)}}function QW(e,t){if(e&1&&(L(0,`div`,8)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,4),G(5,`Provider`),R(),L(6,`th`,4),G(7,`Own time`),R(),L(8,`th`,4),G(9,`Total`),R(),L(10,`th`,4),G(11,`Instances`),R()()(),L(12,`tbody`),j(13,ZW,9,4,`tr`,null,KW),R()()()),e&2){let e=U(3);E(13),M(e.slowest())}}function $W(e,t){if(e&1&&(L(0,`p`,6),k(1,XW,1,0),G(2),R(),k(3,QW,15,0,`div`,8)),e&2){let e=U(),t=U();E(),A(e.providers.status===`recording`?1:-1),E(),J(` `,e.providers.count,` provider instances, `,t.format(e.providers.totalSelfMs),` of construction, from Angular's own profiling. Own time leaves out what each one created. Components and directives show up too, since Angular creates them through injectors. `),E(),A(t.slowest().length?3:-1)}}function eG(e,t){if(e&1&&(L(0,`section`,0)(1,`h2`,1),G(2,`Startup`),R(),L(3,`p`,2),G(4),R(),L(5,`div`,3)(6,`table`)(7,`thead`)(8,`tr`)(9,`th`,4),G(10,`Milestone`),R(),L(11,`th`,4),G(12,`At`),R(),L(13,`th`,4),G(14,`Source`),R()()(),L(15,`tbody`),j(16,qW,7,3,`tr`,null,GW),R()()(),L(18,`h3`,5),G(19,`Slowest providers`),R(),k(20,JW,5,0,`p`,6)(21,YW,2,1,`p`,6)(22,$W,4,4),R()),e&2){let e,n=U();E(4),K(n.intro()),E(12),M(n.steps()),E(4),A((e=t.providers.status)===`needs-hook`?20:e===`unavailable`?21:22)}}function tG(e){return e>=1e3?`${(e/1e3).toFixed(2)} s`:`${Math.round(e*10)/10} ms`}function nG(e){let t=[],n=(e,n,r)=>{typeof n==`number`&&t.push({label:e,at:n,source:r})};return n(`DOM content loaded`,e.navigation.domContentLoaded,`Navigation timing`),n(`First contentful paint`,e.navigation.firstContentfulPaint,`Paint timing`),n(`Angular started`,e.angularStart?.at,e.angularStart?.source===`hook`?`Startup hook`:`First Angular feature mark`),n(`Root component created`,e.bootstrapComponent?.end,`Angular profiler`),n(e.firstStable?.exact===!1?`First stable, at the latest`:`First stable`,e.firstStable?.at,`ApplicationRef.isStable`),n(`Load event`,e.navigation.load,`Navigation timing`),n(`Overlay started`,e.overlayStart,`Overlay`),t.sort((e,t)=>e.at-t.at)}function rG(e){let t=e?.pages;return!t||typeof t!=`object`?[]:Object.values(t).filter(e=>e&&typeof e.pageId==`string`&&e.providers).sort((e,t)=>t.reportedAt-e.reportedAt)}var iG=10,aG=class e{rpc=$(null);pageId=$(null);destroyRef=b(Os);unsubscribe;format=tG;pages=w([]);page=X(()=>{let e=this.pages(),t=this.pageId();return(t?e.find(e=>e.pageId===t):void 0)??e[0]??null});steps=X(()=>{let e=this.page();return e?nG(e):[]});slowest=X(()=>this.page()?.providers.slowest.slice(0,iG)??[]);intro=X(()=>{let e=this.page(),t=e?.angularVersion?` (Angular ${e.angularVersion})`:``,n=this.total();return`From navigation start to the app's first stable state on the live page${t}${n?`: ${n.exact?``:`at most `}${tG(n.ms)} from Angular's start to stable`:``}.`});total=X(()=>{let e=this.page();return!e?.angularStart||!e.firstStable?null:{ms:Math.max(0,e.firstStable.at-e.angularStart.at),exact:e.firstStable.exact}});constructor(){T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}loadId=0;async load(e){let t=++this.loadId,n=()=>!this.destroyRef.destroyed&&t===this.loadId&&this.rpc()===e;try{let t=await e.scope(`pangular`).rpc.sharedState(`startup`);if(!n())return;let r=e=>this.pages.set(rG(e));r(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,r)}catch{if(!n())return;this.pages.set([])}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-startup-section`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`]},decls:1,vars:1,consts:[[`aria-labelledby`,`startup-title`,1,`startup`],[`id`,`startup-title`],[1,`intro`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Startup milestones`,1,`table-wrap`],[`scope`,`col`],[1,`label`],[1,`muted`],[1,`num`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Slowest providers`,1,`table-wrap`],[1,`mono`]],template:function(e,t){if(e&1&&k(0,eG,23,2,`section`,0),e&2){let e;A((e=t.page())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.startup[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  margin-top: 16px;
+  padding: 12px;
+  font-size: 13px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 8px 0 0;
+}
+
+.intro[_ngcontent-%COMP%], 
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%], 
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+td.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.num[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}`]})},oG=`inj-null`,sG=`injectors.hideFramework`,cG=`helper`,lG=new Set([`provider`,`injectable`]),uG={component:`var(--accent-text)`,directive:`var(--directive)`,environment:`var(--ok-text)`,null:`var(--text-3)`};function dG(e){return e.injector.type===`element`?e.injector.component?`component`:`directive`:`environment`}function fG(e){return e.injector.type===`element`?`<${e.injector.name}>`:e.injector.name}function pG(e){return uG[e]??uG.null}function mG(e){return Array.isArray(e)}var hG=class e{rpcSource=w(null);rpc=X(()=>this.rpcSource());injector=b(Es);host=b(Rl);destroyRef=b(Os);hostPage=tT();treeState=w(null);pageTitles=w({});chosenPageId=w(null);treePages=X(()=>{let e=this.treeState();if(!e)return{};let t=e.pages&&typeof e.pages==`object`?e.pages:{};return Object.keys(t).length||this.hostPage?t:{"":e}});shownPageId=Q({source:()=>({pages:this.treePages(),chosen:this.chosenPageId()}),computation:({pages:e,chosen:t},n)=>{let r={};for(let[t,n]of Object.entries(e))r[t]={pageId:t,reportedAt:typeof n?.reportedAt==`number`?n.reportedAt:0};return nT(r,{chosen:t,host:this.hostPage,previous:n?.value??null})}});shownPage=X(()=>{let e=this.shownPageId();return e===null?null:this.treePages()[e]??null});roots=X(()=>{let e=this.shownPage()?.roots;return mG(e)?e:[]});environment=X(()=>{let e=this.shownPage()?.environment;return mG(e)?e:[]});truncated=X(()=>this.shownPage()?.truncated===!0);limits=X(()=>{let e=this.shownPage()?.limits,t=(e,t)=>typeof e==`number`&&Number.isInteger(e)&&e>0?e:t;return{elements:t(e?.elements,2e3),injectors:t(e?.injectors,2500),depth:t(e?.depth,1e3)}});zone=X(()=>{let e=this.shownPage()?.zone;return typeof e==`string`?CE(e):null});multiPage=X(()=>!this.hostPage&&Object.keys(this.treePages()).length>1);pageOptions=X(()=>{if(!this.multiPage())return[];let e=this.pageTitles();return Object.keys(this.treePages()).map(t=>{let n=e[t];return{value:t,label:n?.title||n?.url||`Page ${t}`,hint:n?.url}})});pageKey=X(()=>this.shownPageId()??``);perPage(e){let t=new Map;return Q({source:this.pageKey,computation:(n,r)=>(r&&t.set(r.source,r.value),t.has(n)?t.get(n):e())})}sourceProviders=w([]);loaded=w(!1);treeFailed=w(!1);sourceFailed=w(!1);loadFailed=X(()=>this.treeFailed()||this.sourceFailed());retrying=w(!1);view=w(`element`);query=w(``);onlyProviding=w(!1);componentsOnly=w(!0);hideFramework=w(FR(`injectors.hideFramework`)??!1);collapsed=this.perPage(()=>new Set);selectedId=this.perPage(()=>null);focusId=this.perPage(()=>null);announcement=w(``);selectedLabel=this.perPage(()=>null);wasGone=!1;resolvingKey=w(null);index=X(()=>{let e=new Map,t=new Map,n=(r,i)=>{for(let a of r)e.set(a.injector.id,a),i&&t.set(a.injector.id,i),n(a.children,a.injector.id)};n(this.roots(),null),n(this.environment(),null);let r=new Map;for(let t of e.values()){let e=t.injector.componentId;e&&t.injector.type===`element`&&r.set(e,t.injector.id)}return{map:e,parents:t,byComponent:r}});shownRoots=X(()=>this.withoutFramework(this.roots()));shownEnvironment=X(()=>this.withoutFramework(this.environment()));elementCount=X(()=>this.count(this.shownRoots()));environmentCount=X(()=>this.count(this.shownEnvironment()));frameworkHiddenCount=X(()=>{let e=this.view()===`element`?this.roots():this.environment(),t=0,n=0,r=e=>{for(let i of e)i.injector.framework?t++:n+=i.providers.filter(e=>e.framework).length,r(i.children)};return r(e),{injectors:t,providers:n}});frameworkHiddenText=X(()=>{let{injectors:e,providers:t}=this.frameworkHiddenCount(),n=(e,t)=>`${e} ${t}${e===1?``:`s`}`;return!e&&!t?`Nothing hidden`:t?e?`${n(e,`injector`)} and ${n(t,`provider`)} hidden`:`${n(t,`provider`)} hidden`:`${n(e,`injector`)} hidden`});visible=X(()=>{let e=this.view()===`element`?this.shownRoots():this.shownEnvironment();this.view()===`element`&&this.componentsOnly()&&(e=this.prune(e,e=>!!e.injector.component)),this.onlyProviding()&&(e=this.prune(e,e=>this.providerCount(e)>0));let t=this.normalizedQuery();return t&&(e=this.prune(e,e=>this.nodeMatches(e,t))),e});rows=X(()=>{let e=[],t=this.collapsed(),n=!!this.normalizedQuery(),r=(i,a)=>{for(let o of i){let i=n||!t.has(o.injector.id);e.push({node:o,depth:a,hasChildren:o.children.length>0,expanded:i}),i&&r(o.children,a+1)}};return r(this.visible(),0),e});selected=X(()=>{let e=this.selectedId();return e?this.index().map.get(e)??null:this.rows()[0]?.node??null});gone=X(()=>{let e=this.selectedId();return e&&!this.index().map.has(e)?this.selectedLabel()??`The injector`:null});rovingId=X(()=>{let e=this.rows(),t=this.focusId()??this.selected()?.injector.id;return t&&e.some(e=>e.node.injector.id===t)?t:e[0]?.node.injector.id??null});path=X(()=>{let e=this.selected();if(!e)return[];let{map:t,parents:n}=this.index(),r=e.injector.path??[];if(!r.length){r=[e.injector.id];let t=n.get(e.injector.id);for(;t;)r.push(t),t=n.get(t);r.push(oG)}return r.map(e=>{let n=t.get(e);return{id:e,label:n?fG(n):e===`inj-null`?`Null injector`:`Not listed`,kind:n?dG(n):`null`,providers:n?this.providerCount(n):0}})});providerHits=X(()=>{let e=this.normalizedQuery();if(!e)return[];let t=[];for(let n of this.index().map.values()){if(this.isHiddenInjector(n))continue;let r=n.providers.filter(t=>!this.isHidden(t)&&t.token.toLowerCase().includes(e));r.length&&t.push({id:n.injector.id,label:fG(n),kind:dG(n),tokens:r.map(e=>e.token).join(`, `)})}return t});providedBy=X(()=>this.providerHits().slice(0,12));providedByMore=X(()=>Math.max(0,this.providerHits().length-12));searchSummary=X(()=>{let e=this.query().trim();if(!e)return``;let t=this.providerHits().length;return t===1?`1 injector provides “${e}”.`:t>1?`${t} injectors provide “${e}”.`:this.rows().length?`No injector provides “${e}”.`:`Nothing here matches “${e}”.`});normalizedQuery=X(()=>this.query().trim().toLowerCase());stopTree=null;treeLoad=0;connect(e){this.rpcSource=e}ngOnDestroy(){this.stopTree?.(),this.highlight(null)}depKey(e,t){return`${t}|${e.from}|${e.tokenId??e.token}`}toggleResolve(e){this.resolvingKey.update(t=>t===e?null:e)}setHideFramework(e){this.hideFramework.set(e),IR(sG,e)}tokenPosition(e,t){let n=e[t]?.token,r=0,i=0;return e.forEach((e,a)=>{e.token!==n||this.isHidden(e)||(i++,a<=t&&r++)}),i>1?`(${r} of ${i})`:``}positionSuffix(e,t){let n=this.tokenPosition(e,t);return n?` ${n}`:``}isHidden(e){return this.hideFramework()&&e.framework===!0}isHiddenInjector(e){return this.hideFramework()&&e.injector.framework===!0}providerCount(e){if(!this.hideFramework())return e.injector.providerCount;let t=e.providers.filter(e=>e.framework).length;return Math.max(0,e.injector.providerCount-t)}hiddenProviders(e){return this.hideFramework()?e.providers.filter(e=>e.framework).length:0}async retry(){let e=this.rpc();if(!e||this.retrying())return;let t=document.activeElement;this.retrying.set(!0);try{await Promise.all([this.loadInjectorTree(e),this.loadSourceProviders(e)])}finally{this.retrying.set(!1)}this.destroyRef.destroyed||Sd(()=>{t?.isConnected&&document.activeElement!==document.body||this.host.nativeElement.querySelector(`.toolbar input, .toolbar button`)?.focus()},{injector:this.injector})}refresh(){let e=this.shownPageId();e&&(this.requestRefresh(e),this.announcement.set(`Reading the injectors again.`))}requestRefresh(e,t){let n=this.rpc();n&&n.scope(`pangular`).rpc.call(`request-injector-refresh`,t?{pageId:e,injectorId:t}:{pageId:e}).catch(()=>{})}kindById(e){let t=this.index().map.get(e);return t?dG(t):`null`}labelById(e){let t=this.index().map.get(e);return t?fG(t):e===`inj-null`?`Null injector`:`not listed`}matches(e){let t=this.normalizedQuery();return!!t&&e.toLowerCase().includes(t)}setView(e){this.view()!==e&&(this.view.set(e),this.choose(null),this.focusId.set(null))}select(e){this.choose(e),this.focusId.set(e)}choose(e){let t=e?this.index().map.get(e):void 0;this.selectedId.set(e),this.selectedLabel.set(t?fG(t):null),this.wasGone=!1}syncGone(){let e=this.gone()!==null;if(e&&!this.wasGone){let e=`The selected injector is no longer on the page.`;this.announcement.update(t=>t===e?`${e} `:e)}this.wasGone=e}selectPage(e){if(!e||e===this.shownPageId())return;this.chosenPageId.set(e),this.wasGone=this.gone()!==null;let t=this.pageOptions().find(t=>t.value===e)?.label??e;this.announcement.set(`Showing the injectors of ${t}.`)}notePageGone(e){let t=this.chosenPageId();if(!t||e?.[t])return;let n=this.pageOptions().find(e=>e.value===t)?.label??`The chosen page`;this.chosenPageId.set(null),this.announcement.set(`${n} closed, so this shows another page.`),this.wasGone=!0}toggle(e,t){t?.stopPropagation(),!this.normalizedQuery()&&this.collapsed.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}reveal(e){let t=this.index().map.get(e);if(!t)return;this.setView(t.injector.type===`element`?`element`:`environment`);let{parents:n}=this.index();this.collapsed.update(t=>{let r=new Set(t),i=n.get(e);for(;i;)r.delete(i),i=n.get(i);return r}),this.onlyProviding()&&this.providerCount(t)===0&&this.onlyProviding.set(!1),t.injector.type===`element`&&!t.injector.component&&this.componentsOnly.set(!1),this.isHiddenInjector(t)&&this.hideFramework.set(!1);let r=this.normalizedQuery();r&&!this.nodeMatches(t,r)&&this.query.set(``),this.select(e),Sd(()=>this.focusRow(e,!1),{injector:this.injector})}highlight(e){let t=this.rpc();if(!t)return;let n=e?.injector.type===`element`?e.injector.selector??null:null,r=n?{pageId:this.shownPageId()||null,selector:n}:null;t.scope(`pangular`).rpc.call(`request-page-highlight`,r).catch(()=>{})}focusRow(e,t){let n=document.querySelector(`.row[data-id="${CSS.escape(e)}"]`);n&&(t&&n.focus(),n.scrollIntoView({block:`nearest`}))}clearTree(){this.stopTree?.(),this.stopTree=null}async loadInjectorTree(e){let t=++this.treeLoad;this.clearTree();let n=e.scope(`pangular`),r;try{r=await n.rpc.sharedState(`injector-tree`)}catch{t===this.treeLoad&&this.treeFailed.set(!0);return}if(this.destroyRef.destroyed||this.rpc()!==e||t!==this.treeLoad)return;this.treeFailed.set(!1);let i=e=>{let t=e&&typeof e==`object`?e:null;this.notePageGone(t?.pages),this.treeState.set(t),this.syncGone()};i(r.value()),this.clearTree(),this.stopTree=r.on(`updated`,i)}async loadSourceProviders(e){let t=e.scope(`pangular`);try{this.sourceProviders.set(await t.rpc.call(`get-providers`)),this.sourceFailed.set(!1)}catch{this.sourceProviders.set([]),this.sourceFailed.set(!0)}finally{this.loaded.set(!0)}}count(e){return e.reduce((e,t)=>e+1+this.count(t.children),0)}nodeMatches(e,t){let n=e.injector;return n.name.toLowerCase().includes(t)||!!n.component?.toLowerCase().includes(t)||!!n.directives?.some(e=>e.toLowerCase().includes(t))||e.providers.some(e=>e.token.toLowerCase().includes(t))||!!e.dependencies?.some(e=>e.token.toLowerCase().includes(t))}withoutFramework(e){if(!this.hideFramework())return e;let t=e=>e.flatMap(e=>e.injector.framework?t(e.children):[{...e,children:t(e.children)}]);return t(e)}prune(e,t){let n=[];for(let r of e){let e=this.prune(r.children,t);(t(r)||e.length)&&n.push({...r,children:e})}return n}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},gG=(e,t)=>t.from+(t.tokenId??t.token)+e,_G=(e,t)=>t.id+e;function vG(e,t){e&1&&(L(0,`p`,1),G(1,`Only services this injector has already created are listed.`),R())}function yG(e,t){if(e&1&&(L(0,`span`,8),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function bG(e,t){if(e&1&&(L(0,`span`),G(1),R()),e&2){let e=U().$implicit;E(),q(`for `,e.from)}}function xG(e,t){if(e&1){let e=z();L(0,`button`,17),H(`click`,function(){let t=x(e);return S(U(3).reveal(t))}),Sg(1,`span`,18),G(2,` from `),L(3,`span`,19),G(4),R()()}if(e&2){let e=t,n=U(3);E(),f_(`background`,n.tone(n.kindById(e))),E(3),K(n.labelById(e))}}function SG(e,t){e&1&&(L(0,`span`,11),G(1,`optional, not provided`),R())}function CG(e,t){e&1&&(L(0,`span`,12),G(1,`not provided anywhere`),R())}function wG(e,t){e&1&&(L(0,`span`,19),G(1,`Null injector`),R())}function TG(e,t){if(e&1){let e=z();L(0,`button`,24),H(`click`,function(){x(e);let t=U().$implicit;return S(U(4).reveal(t.id))}),L(1,`span`,19),G(2),R()()}if(e&2){let e=U().$implicit;E(2),K(e.label)}}function EG(e,t){if(e&1&&(L(0,`li`),Sg(1,`span`,21),k(2,wG,2,0,`span`,19)(3,TG,3,1,`button`,22),L(4,`span`,23),G(5),R()()),e&2){let e=t.$implicit,n=U(4);p_(`resolve-`+e.state),E(2),A(e.id===n.nullId?2:3),E(3),K(e.text)}}function DG(e,t){if(e&1&&(L(0,`ol`,16),j(1,EG,6,4,`li`,20,_G),R()),e&2){let e=U().$implicit,t=U(2);O(`aria-label`,`How Angular resolves `+e.token),E(),M(t.resolution(e))}}function OG(e,t){if(e&1){let e=z();L(0,`li`,5)(1,`div`,6)(2,`span`,7),G(3),R(),j(4,yG,2,1,`span`,8,dg),R(),L(6,`div`,9),k(7,bG,2,1,`span`),k(8,xG,5,3,`button`,10)(9,SG,2,0,`span`,11)(10,CG,2,0,`span`,12),L(11,`button`,13),H(`click`,function(){let t=x(e),n=t.$implicit,r=t.$index,i=U(2);return S(i.toggleResolve(i.depKey(n,r)))}),G(12,` Resolution `),L(13,`span`,14),G(14),R()()(),L(15,`div`,15),k(16,DG,3,1,`ol`,16),R()()}if(e&2){let e,n=t.$implicit,r=t.$index,i=U(2),a=Y(0);W(`hit`,i.matches(n.token)),E(3),K(n.token),E(),M(n.flags),E(3),A(a.injector.type!==`element`||a.injector.directives&&a.injector.directives.length>1?7:-1),E(),A((e=n.providedBy)?8:n.flags.includes(`optional`)?9:10,e),E(3),O(`aria-expanded`,i.resolvingKey()===i.depKey(n,r))(`aria-controls`,`di-resolve-`+r),E(3),q(`of `,n.token),E(),B(`id`,`di-resolve-`+r)(`hidden`,i.resolvingKey()!==i.depKey(n,r)),E(),A(i.resolvingKey()===i.depKey(n,r)?16:-1)}}function kG(e,t){if(e&1&&(L(0,`ul`,2),j(1,OG,17,11,`li`,4,gG),R()),e&2){U();let e=Y(0);E(),M(e.dependencies)}}function AG(e,t){e&1&&(L(0,`p`,3),G(1,`Nothing is injected through the constructor or inject().`),R())}function jG(e,t){e&1&&(L(0,`p`,3),G(1,`No service created here has injected anything yet.`),R())}var MG=class e{state=b(hG);node=$.required();nullId=oG;resolvingKey=this.state.resolvingKey;depKey(e,t){return this.state.depKey(e,t)}toggleResolve(e){this.state.toggleResolve(e)}resolution(e){let t=this.state.path(),n=e.providedBy?t.findIndex(t=>t.id===e.providedBy):-1,r=e.flags.includes(`self`),i=e.flags.includes(`skipSelf`),a=e.flags.includes(`optional`);return t.map((e,t)=>{let o;o=t===0&&i?`skipped`:n>=0?t<n?`asked`:t===n?`provides`:`not-asked`:r&&t>+!!i?`not-asked`:e.id===`inj-null`?a?`null`:`throws`:`asked`;let s={asked:`asked, not here`,provides:`provides it`,skipped:`skipped (skipSelf)`,"not-asked":`not asked`,throws:`throws NullInjectorError`,null:`gives null (optional)`}[o];return{...e,state:o,text:s}})}matches(e){return this.state.matches(e)}reveal(e){this.state.reveal(e)}tone(e){return pG(e)}kindById(e){return this.state.kindById(e)}labelById(e){return this.state.labelById(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appInjectorDeps`,``]],inputs:{node:[1,`node`]},decls:9,vars:5,consts:[[1,`pill`],[1,`hint`],[1,`deps`],[1,`empty-line`],[1,`dep`,3,`hit`],[1,`dep`],[1,`dep-main`],[1,`token`,`mono`],[1,`flag`],[1,`dep-meta`],[`type`,`button`,1,`from`],[1,`from`,`absent`],[1,`from`,`missing`],[`type`,`button`,1,`link`,`resolve-toggle`,3,`click`],[1,`sr-only`],[1,`resolution`,3,`id`,`hidden`],[1,`resolve-graph`],[`type`,`button`,1,`from`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`mono`],[3,`class`],[`aria-hidden`,`true`,1,`resolve-dot`],[`type`,`button`,1,`step`],[1,`resolve-state`],[`type`,`button`,1,`step`,3,`click`]],template:function(e,t){if(e&1&&(G_(0),L(1,`h3`),G(2),L(3,`span`,0),G(4),R()(),k(5,vG,2,0,`p`,1),k(6,kG,3,0,`ul`,2)(7,AG,2,0,`p`,3)(8,jG,2,0,`p`,3)),e&2){let e=K_(t.node());E(2),q(` `,e.injector.type===`element`?`Injected here`:`Injected by its services`,` `),E(2),K(e.dependencies?.length??0),E(),A(e.injector.type===`element`?-1:5),E(),A(e.dependencies?.length?6:e.injector.type===`element`?7:8)}},styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  justify-content: center;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.chip[_ngcontent-%COMP%], 
+.from[_ngcontent-%COMP%], 
+.step[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+
+.chip[_ngcontent-%COMP%]:hover, 
+.from[_ngcontent-%COMP%]:hover, 
+.step[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-2);
+}
+
+.chip[_ngcontent-%COMP%]:focus-visible, 
+.from[_ngcontent-%COMP%]:focus-visible, 
+.step[_ngcontent-%COMP%]:focus-visible, 
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.link[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--%NS%accent);
+  font-size: 13px;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: -4px 0 10px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.deps[_ngcontent-%COMP%], 
+.providers[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dep[_ngcontent-%COMP%], 
+.provider[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+}
+
+.dep.hit[_ngcontent-%COMP%], 
+.provider.hit[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.dep-main[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.token[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.dep-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  margin-top: 6px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.from[_ngcontent-%COMP%] {
+  height: 22px;
+  padding: 0 8px;
+  color: var(--%NS%text-2);
+}
+
+.from[_ngcontent-%COMP%]   .mono[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.from.absent[_ngcontent-%COMP%] {
+  cursor: default;
+  background: none;
+}
+
+.from.missing[_ngcontent-%COMP%] {
+  cursor: default;
+  border-color: color-mix(in srgb, var(--%NS%warn) 40%, transparent);
+  background: none;
+  color: var(--%NS%warn);
+}
+
+.empty-line[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+button[_ngcontent-%COMP%] {
+  font: inherit;
+}
+
+.resolve-toggle[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.resolution[hidden][_ngcontent-%COMP%] {
+  display: none;
+}
+
+.resolve-graph[_ngcontent-%COMP%] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 8px 0 0;
+  padding: 0 0 0 4px;
+  list-style: none;
+}
+
+.resolve-graph[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  padding-left: 18px;
+  font-size: 12px;
+}
+
+.resolve-graph[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: -6px;
+  bottom: 50%;
+  width: 2px;
+  background: var(--%NS%border-strong);
+}
+
+.resolve-graph[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:first-child::before {
+  display: none;
+}
+
+.resolve-dot[_ngcontent-%COMP%] {
+  position: absolute;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--%NS%border-strong);
+  border-radius: 50%;
+  background: var(--%NS%surface);
+}
+
+.resolve-provides[_ngcontent-%COMP%]   .resolve-dot[_ngcontent-%COMP%] {
+  border-color: var(--%NS%ok);
+  background: var(--%NS%ok);
+}
+
+.resolve-throws[_ngcontent-%COMP%]   .resolve-dot[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  background: var(--%NS%danger);
+}
+
+.resolve-state[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.resolve-provides[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%] {
+  color: var(--%NS%ok-text);
+  font-weight: 600;
+}
+
+.resolve-throws[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}
+
+.resolve-not-asked[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%], 
+.resolve-skipped[_ngcontent-%COMP%]   .resolve-state[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}`]})},NG=(e,t)=>t.prop;function PG(e,t){if(e&1){let e=z();P(0,`button`,6),V(`click`,function(){return x(e),S(U().load())}),G(1,` Refresh `),F()}e&2&&O(`aria-label`,`Read the value of `+U().name()+` again`)}function FG(e,t){e&1&&(P(0,`p`,7),G(1,`Reading from the page…`),F())}function IG(e,t){if(e&1&&(P(0,`p`,8),G(1),F()),e&2){let e=U(2);E(),K(e.error())}}function LG(e,t){if(e&1&&(P(0,`p`,9),G(1),F()),e&2){let e=U(3);E(),q(``,e.type(),`, read from the page. Getters never run.`)}}function RG(e,t){e&1&&(P(0,`span`,14),G(1),F()),e&2&&(E(),K(t))}function zG(e,t){if(e&1&&(P(0,`span`,12),G(1),k(2,RG,2,1,`span`,14),F()),e&2){let e,t=U().$implicit,n=U(3);E(),q(``,t.name,` `),E(),A((e=n.kinds()[t.prop])?2:-1,e)}}function BG(e,t){if(e&1&&(P(0,`li`,11),k(1,zG,3,2,`span`,12),I(2,`app-value-tree`,13),F()),e&2){let e=t.$implicit,n=U(3);E(),A(e.prop===n.whole?-1:1),E(),N(`prop`,e)(`store`,n.store)(`componentId`,n.key())(`pageId`,n.pageId())(`rpc`,n.rpc())}}function VG(e,t){if(e&1&&(P(0,`p`,9),G(1),F()),e&2){let e=U(3);E(),q(``,e.more(),` more members are not listed.`)}}function HG(e,t){if(e&1&&(k(0,LG,2,1,`p`,9),P(1,`ul`,10),j(2,BG,3,6,`li`,11,NG),F(),k(4,VG,2,1,`p`,9)),e&2){let e=U(2);A(e.type()?0:-1),E(2),M(e.props()),E(2),A(e.more()?4:-1)}}function UG(e,t){e&1&&(P(0,`p`,9),G(1,`No fields to show: the instance has only methods or getters.`),F())}function WG(e,t){if(e&1&&(P(0,`div`,5),k(1,FG,2,0,`p`,7)(2,IG,2,1,`p`,8)(3,HG,5,2)(4,UG,2,0,`p`,9),F()),e&2){let e=U();N(`id`,e.regionId),O(`aria-label`,`Value of `+e.name()),E(),A(e.loading()?1:e.error()?2:e.props().length?3:4)}}var GG=`$value`,KG=0,qG=class e{rpc=$(null);pageId=$(null);injectorId=$.required();token=$.required();tokenId=$(void 0);index=$.required();position=$(``);name=X(()=>this.position()?`${this.token()} ${this.position()}`:this.token());regionId=`provider-value-${++KG}`;whole=GG;key=X(()=>`${this.pageId()}|${this.injectorId()}|${this.index()}|${this.tokenId()??this.token()}`);open=Q({source:this.key,computation:()=>!1});answer=Q({source:this.key,computation:()=>null});loading=w(!1);error=X(()=>{let e=this.answer();return e&&!e.ok?e.error??`The page did not read it.`:``});type=X(()=>this.answer()?.type??``);more=X(()=>this.answer()?.more??0);props=X(()=>(this.answer()?.members??[]).map(e=>({name:e.name===GG?`value`:e.name,prop:e.name,value:e.value})));kinds=X(()=>Object.fromEntries((this.answer()?.members??[]).filter(e=>e.kind).map(e=>[e.name,e.kind])));store=new UN(e=>this.read({path:[...e.path],limit:e.limit,depth:e.depth}));async read(e){let t=this.pageId();if(!t)return{error:`No live page to read from.`};try{return await oT(this.rpc(),`request-provider-value`,{pageId:t,request:{injectorId:this.injectorId(),token:this.token(),...this.tokenId()?{tokenId:this.tokenId()}:{},index:this.index(),...e}})??{error:`The devtools server is not connected.`}}catch{return{error:`The devtools server did not answer. Try again.`}}}toggle(){let e=!this.open();this.open.set(e),e&&!this.answer()&&this.load()}requests=0;async load(){let e=this.key(),t=++this.requests;this.loading.set(!0),this.store.follow({rpc:null,pageId:null,componentId:`${e}#${Date.now()}`},void 0);let n=await this.read({path:[]});t===this.requests&&e===this.key()&&(this.loading.set(!1),this.answer.set(n))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-provider-value`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],injectorId:[1,`injectorId`],token:[1,`token`],tokenId:[1,`tokenId`],index:[1,`index`],position:[1,`position`]},decls:7,vars:6,consts:[[1,`bar`],[`type`,`button`,1,`toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[`type`,`button`,1,`link`],[`role`,`region`,1,`value`,3,`id`],[`type`,`button`,1,`link`,3,`click`],[`role`,`status`,1,`muted`],[`role`,`alert`,1,`error`],[1,`muted`],[1,`props`],[1,`prop`],[1,`name`,`mono`],[3,`prop`,`store`,`componentId`,`pageId`,`rpc`],[1,`kind`]],template:function(e,t){e&1&&(P(0,`div`,0)(1,`button`,1),V(`click`,function(){return t.toggle()}),C(),P(2,`svg`,2),I(3,`path`,3),F(),G(4),F(),k(5,PG,2,1,`button`,4),F(),k(6,WG,5,3,`div`,5)),e&2&&(E(),O(`aria-expanded`,t.open())(`aria-controls`,t.open()?t.regionId:null)(`aria-label`,(t.open()?`Hide the value of `:`Show the value of `)+t.name()),E(3),q(` `,t.open()?`Hide value`:`Show value`,` `),E(),A(t.open()&&!t.loading()?5:-1),E(),A(t.open()?6:-1))},dependencies:[bN],styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+  margin-top: 6px;
+}
+
+.bar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle[_ngcontent-%COMP%], 
+.link[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 28px;
+  padding: 0 8px 0 4px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.link[_ngcontent-%COMP%] {
+  padding: 0 8px;
+  border-color: transparent;
+  background: none;
+  text-decoration: underline;
+}
+
+.toggle[_ngcontent-%COMP%]:hover, 
+.link[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.toggle[_ngcontent-%COMP%]:focus-visible, 
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.chevron[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.toggle[aria-expanded=true][_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+.value[_ngcontent-%COMP%] {
+  margin-top: 6px;
+  padding: 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+}
+
+.props[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.prop[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  font-size: 12px;
+}
+
+.name[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  overflow-wrap: anywhere;
+}
+
+.kind[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  margin-left: 4px;
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 10px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.error[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%danger-text);
+  font-size: 12px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron[_ngcontent-%COMP%], 
+   .toggle[_ngcontent-%COMP%], 
+   .link[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},JG=class e{state=b(hG);groupedProviders=X(()=>{let e=this.state.normalizedQuery(),t=e?this.state.sourceProviders().filter(t=>t.token.toLowerCase().includes(e)||t.file.toLowerCase().includes(e)):this.state.sourceProviders(),n=[{type:`root-provider`,label:`Root Providers (provide*)`,items:[]},{type:`injectable`,label:`Injectable Services`,items:[]},{type:`injection`,label:`inject() Calls`,items:[]},{type:`provider`,label:`Component Providers`,items:[]},{type:cG,label:`Helpers (unresolved)`,items:[]}];for(let e of t)n.find(t=>t.type===e.type)?.items.push(e);return n.filter(e=>e.items.length>0)});sourceMatchCount=X(()=>this.groupedProviders().reduce((e,t)=>e+t.items.length,0));helpersOpen=w(!1);helpersShown=X(()=>this.helpersOpen()||!!this.state.normalizedQuery());orphaned=X(()=>{if(!this.state.roots().length)return[];let e=new Set,t=new Set;for(let n of this.state.index().map.values()){for(let t of n.dependencies??[])e.add(t.token);if(n.injector.type!==`element`)for(let e of n.providers)t.add(e.token)}let n=[],r=new Set;for(let i of this.state.sourceProviders()){if(!lG.has(i.type))continue;let a=i.token.slice(i.token.lastIndexOf(`.`)+1);if(e.has(a)||i.providedIn&&t.has(a))continue;let o=`${i.token}|${i.file}|${i.line}`;r.has(o)||(r.add(o),n.push(i))}return n});orphansOpen=w(!1);orphanedText=X(()=>{let e=new Set(this.orphaned().map(e=>e.token)).size;return e===1?`1 provider in source is never injected on this page`:`${e} providers in source are never injected on this page`});sourceByToken=X(()=>{let e=new Map;for(let t of this.state.sourceProviders()){if(!lG.has(t.type)&&t.type!==`root-provider`)continue;let n=t.token.slice(t.token.lastIndexOf(`.`)+1),r=e.get(n);r||e.set(n,r=[]),r.some(e=>e.file===t.file&&e.line===t.line)||r.push(t)}return e});sourceOf(e){let t=this.sourceByToken().get(e);return t?.length?{shown:t.slice(0,3),more:Math.max(0,t.length-3)}:null}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},YG=(e,t,n,r)=>({kind:`provider`,injectorId:e,token:t,tokenId:n,index:r}),XG=(e,t)=>(t.tokenId??t.token)+e,ZG=(e,t)=>t.file+t.line;function QG(e,t){if(e&1){let e=z();P(0,`p`,1),G(1),P(2,`button`,4),V(`click`,function(){return x(e),S(U().setHideFramework(!1))}),G(3,` Show them `),F()()}if(e&2){let e=t;E(),J(` `,e,` framework `,e===1?`provider`:`providers`,` hidden. `)}}function $G(e,t){e&1&&(P(0,`span`,10),G(1,`viewProviders`),F())}function eK(e,t){e&1&&(P(0,`span`,10),G(1,`multi`),F())}function tK(e,t){e&1&&(P(0,`span`,10),G(1,`Angular`),F())}function nK(e,t){if(e&1&&(P(0,`div`,11),G(1),F()),e&2){let e=U(2).$implicit;E(),q(`via `,e.importPath.join(` › `))}}function rK(e,t){if(e&1&&I(0,`app-source-link`,15),e&2){let e=t.$implicit;N(`file`,e.file)(`line`,e.line)}}function iK(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U();E(),q(`+`,e.more,` more`)}}function aK(e,t){if(e&1&&(P(0,`div`,12)(1,`span`),G(2,`Declared in`),F(),j(3,rK,1,2,`app-source-link`,15,ZG),k(5,iK,2,1,`span`),F()),e&2){let e=t;E(3),M(e.shown),E(2),A(e.more?5:-1)}}function oK(e,t){if(e&1&&(P(0,`li`,6)(1,`div`,7)(2,`span`,8),G(3),F(),P(4,`span`,9),G(5),F(),k(6,$G,2,0,`span`,10),k(7,eK,2,0,`span`,10),k(8,tK,2,0,`span`,10),F(),k(9,nK,2,1,`div`,11),k(10,aK,6,1,`div`,12),I(11,`app-store-global`,13)(12,`app-provider-value`,14),F()),e&2){let e,t=U(),n=t.$implicit,r=t.$index,i=U(2),a=Y(0);W(`hit`,i.matches(n.token)),E(3),K(n.token),E(2),K(n.type===`unknown`?`provider`:`use`+i.capital(n.type)),E(),A(n.isViewProvider?6:-1),E(),A(n.multi?7:-1),E(),A(n.framework?8:-1),E(),A(n.importPath?.length?9:-1),E(),A((e=i.sourceOf(n.token))?10:-1,e),E(),N(`rpc`,i.rpc())(`pageId`,i.shownPageId())(`target`,Wte(21,YG,a.injector.id,n.token,n.tokenId,r))(`label`,n.token+i.positionSuffix(a.providers,r))(`canLog`,!0),E(),N(`rpc`,i.rpc())(`pageId`,i.shownPageId())(`injectorId`,a.injector.id)(`token`,n.token)(`tokenId`,n.tokenId)(`index`,r)(`position`,i.tokenPosition(a.providers,r))}}function sK(e,t){if(e&1&&k(0,oK,13,26,`li`,5),e&2){let e=t.$implicit;A(U(2).isHidden(e)?-1:0)}}function cK(e,t){if(e&1&&(P(0,`ul`,2),j(1,sK,1,1,null,null,XG),F()),e&2){U();let e=Y(0);E(),M(e.providers)}}function lK(e,t){e&1&&G(0,` No providers or viewProviders on this element. `)}function uK(e,t){e&1&&G(0,` This injector has no providers of its own. `)}function dK(e,t){if(e&1&&(P(0,`p`,3),k(1,lK,1,0)(2,uK,1,0),F()),e&2){U();let e=Y(0);E(),A(e.injector.type===`element`?1:2)}}var fK=class e{state=b(hG);scan=b(JG);node=$.required();rpc=this.state.rpc;shownPageId=this.state.shownPageId;providerCount(e){return this.state.providerCount(e)}hiddenProviders(e){return this.state.hiddenProviders(e)}isHidden(e){return this.state.isHidden(e)}setHideFramework(e){this.state.setHideFramework(e)}matches(e){return this.state.matches(e)}sourceOf(e){return this.scan.sourceOf(e)}tokenPosition(e,t){return this.state.tokenPosition(e,t)}positionSuffix(e,t){return this.state.positionSuffix(e,t)}capital(e){return e.charAt(0).toUpperCase()+e.slice(1)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appInjectorProviders`,``]],inputs:{node:[1,`node`]},decls:8,vars:4,consts:[[1,`pill`],[1,`hint`,`framework-note`],[1,`providers`],[1,`empty-line`],[`type`,`button`,1,`link`,3,`click`],[1,`provider`,3,`hit`],[1,`provider`],[1,`dep-main`],[1,`token`,`mono`],[1,`flag`,`kind-flag`],[1,`flag`],[1,`dep-meta`],[1,`dep-meta`,`declared`],[1,`provider-global`,3,`rpc`,`pageId`,`target`,`label`,`canLog`],[3,`rpc`,`pageId`,`injectorId`,`token`,`tokenId`,`index`,`position`],[1,`decl-file`,3,`file`,`line`]],template:function(e,t){if(e&1&&(G_(0),P(1,`h3`),G(2,` Provides `),P(3,`span`,0),G(4),F()(),k(5,QG,4,2,`p`,1),k(6,cK,3,0,`ul`,2)(7,dK,3,1,`p`,3)),e&2){let e,n=K_(t.node());E(4),K(t.providerCount(n)),E(),A((e=t.hiddenProviders(n))?5:-1,e),E(),A(t.providerCount(n)?6:t.hiddenProviders(n)?-1:7)}},dependencies:[qG,aM,uM],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  justify-content: center;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.chip[_ngcontent-%COMP%], 
+.from[_ngcontent-%COMP%], 
+.step[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+
+.chip[_ngcontent-%COMP%]:hover, 
+.from[_ngcontent-%COMP%]:hover, 
+.step[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-2);
+}
+
+.chip[_ngcontent-%COMP%]:focus-visible, 
+.from[_ngcontent-%COMP%]:focus-visible, 
+.step[_ngcontent-%COMP%]:focus-visible, 
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.link[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--%NS%accent);
+  font-size: 13px;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: -4px 0 10px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.deps[_ngcontent-%COMP%], 
+.providers[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dep[_ngcontent-%COMP%], 
+.provider[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+}
+
+.dep.hit[_ngcontent-%COMP%], 
+.provider.hit[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.provider-global[_ngcontent-%COMP%] {
+  margin-top: 6px;
+}
+
+.framework-note[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+  color: var(--%NS%text-2);
+}
+
+.dep-main[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.token[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.kind-flag[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.dep-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  margin-top: 6px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.empty-line[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+button[_ngcontent-%COMP%] {
+  font: inherit;
+}
+
+.declared[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.decl-file[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}`]})},pK=(e,t)=>t.id;function mK(e,t){if(e&1&&(P(0,`li`),G(1),F()),e&2){let e=t.$implicit;U(2),W(`is-component`,e===Y(0).injector.component),E(),K(e)}}function hK(e,t){if(e&1&&(P(0,`ul`,3),j(1,mK,2,3,`li`,12,dg),F()),e&2){U();let e=Y(0);E(),M(e.injector.directives)}}function gK(e,t){if(e&1){let e=z();P(0,`button`,13),V(`click`,function(){let t=x(e);return S(U().openComponent(t))}),G(1,` Show in Components `),P(2,`span`,14),G(3),F()()}if(e&2){U();let e=Y(0);E(3),q(`: `,e.injector.component)}}function _K(e,t){e&1&&(P(0,`p`,5),G(1,` Inactive: the router loaded this route's injector, but no element on the page uses it now. It keeps the services it created until the app is reloaded. `),F())}function vK(e,t){if(e&1&&(P(0,`span`,15),I(1,`span`,17),G(2,` Null injector `),P(3,`span`,18),G(4,`throws NullInjectorError`),F()()),e&2){let e=U(2);E(),f_(`background`,e.tone(`null`))}}function yK(e,t){if(e&1&&(P(0,`span`,21),G(1),P(2,`span`,14),G(3),F()()),e&2){let e=U(2).$implicit;E(),q(` `,e.providers,` `),E(2),K(e.providers===1?`provider`:`providers`)}}function bK(e,t){if(e&1){let e=z();P(0,`button`,19),V(`click`,function(){x(e);let t=U().$implicit;return S(U().reveal(t.id))}),I(1,`span`,17),P(2,`span`,20),G(3),F(),k(4,yK,4,2,`span`,21),F()}if(e&2){let e=U().$implicit,t=U();E(),f_(`background`,t.tone(e.kind)),E(2),K(e.label),E(),A(e.providers?4:-1)}}function xK(e,t){if(e&1&&(P(0,`li`),k(1,vK,5,2,`span`,15)(2,bK,5,4,`button`,16),F()),e&2){let e=t.$implicit,n=t.$index,r=U();W(`current`,n===0),E(),A(e.id===r.nullId?1:2)}}function SK(e,t){e&1&&I(0,`div`,10),e&2&&(U(),N(`node`,Y(0)))}var CK=class e{state=b(hG);node=$.required();canShowComponent=$(!1);showComponent=xv();nullId=oG;path=this.state.path;openComponent(e){this.showComponent.emit(e)}reveal(e){this.state.reveal(e)}label(e){return fG(e)}kind(e){return dG(e)}tone(e){return pG(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appInjectorDetail`,``]],inputs:{node:[1,`node`],canShowComponent:[1,`canShowComponent`]},outputs:{showComponent:`showComponent`},decls:19,vars:10,consts:[[1,`detail-head`],[1,`badge`],[`id`,`di-detail-title`,1,`mono`],[`aria-label`,`Classes on this element`,1,`classes`],[`type`,`button`,1,`show-component`],[1,`hint`,`inactive-note`],[1,`block`],[1,`hint`],[1,`path`],[3,`current`],[`appInjectorDeps`,``,1,`block`,3,`node`],[`appInjectorProviders`,``,1,`block`,3,`node`],[3,`is-component`],[`type`,`button`,1,`show-component`,3,`click`],[1,`sr-only`],[1,`step`,`null`],[`type`,`button`,1,`step`],[`aria-hidden`,`true`,1,`dot`],[1,`hint-inline`],[`type`,`button`,1,`step`,3,`click`],[1,`mono`],[1,`step-count`]],template:function(e,t){if(e&1&&(G_(0),P(1,`header`,0)(2,`span`,1),G(3),F(),P(4,`h2`,2),G(5),F(),k(6,hK,3,0,`ul`,3),k(7,gK,4,1,`button`,4),F(),k(8,_K,2,0,`p`,5),P(9,`div`,6)(10,`h3`),G(11,`Lookup path`),F(),P(12,`p`,7),G(13,`Angular asks these injectors in order until one has the token.`),F(),P(14,`ol`,8),j(15,xK,3,3,`li`,9,pK),F()(),k(17,SK,1,1,`div`,10),I(18,`div`,11)),e&2){let e,n=K_(t.node());E(2),f_(`--%NS%tone`,t.tone(t.kind(n))),E(),K(t.kind(n)),E(2),K(t.label(n)),E(),A(n.injector.directives?.length?6:-1),E(),A((e=t.canShowComponent()&&n.injector.componentId)?7:-1,e),E(),A(n.injector.inactive?8:-1),E(7),M(t.path()),E(2),A(n.injector.type===`element`||n.dependencies?17:-1),E(),N(`node`,n)}},dependencies:[MG,fK],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.chip[_ngcontent-%COMP%], 
+.from[_ngcontent-%COMP%], 
+.step[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+
+.chip[_ngcontent-%COMP%]:hover, 
+.from[_ngcontent-%COMP%]:hover, 
+.step[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-2);
+}
+
+.chip[_ngcontent-%COMP%]:focus-visible, 
+.from[_ngcontent-%COMP%]:focus-visible, 
+.step[_ngcontent-%COMP%]:focus-visible, 
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.detail-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.badge[_ngcontent-%COMP%] {
+  padding: 2px 8px;
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--%NS%tone) 14%, transparent);
+  color: var(--%NS%tone);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.classes[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.classes[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 6px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+}
+
+.classes[_ngcontent-%COMP%]   li.is-component[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%accent);
+}
+
+.block[_ngcontent-%COMP%] {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.block[_ngcontent-%COMP%]:last-child {
+  border-bottom: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 8px;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: -4px 0 10px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.path[_ngcontent-%COMP%] {
+  position: relative;
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0 0 0 18px;
+  list-style: none;
+}
+
+.path[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  top: 13px;
+  bottom: 13px;
+  left: 5px;
+  width: 1px;
+  background: var(--%NS%border-strong);
+}
+
+.path[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  position: relative;
+  min-width: 0;
+}
+
+.path[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: -16px;
+  width: 9px;
+  height: 1px;
+  background: var(--%NS%border-strong);
+}
+
+.path[_ngcontent-%COMP%]   li.current[_ngcontent-%COMP%]   .step[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent-soft);
+}
+
+.step.null[_ngcontent-%COMP%] {
+  cursor: default;
+  color: var(--%NS%text-2);
+}
+
+.step.null[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface);
+}
+
+.hint-inline[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.step-count[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+}
+
+.show-component[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+.show-component[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+.show-component[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%] {
+  font: inherit;
+}
+
+.inactive-note[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+}`]})};function wK(e,t){if(e&1){let e=z();L(0,`button`,5),H(`click`,function(){let t=x(e);return S(U().reveal(t.node.injector.id))}),G(1),R()}if(e&2){let e=U();E(),q(` Show `,e.label(t.node),` `)}}var TK=class e{state=b(hG);name=$.required();rows=this.state.rows;reveal(e){this.state.reveal(e)}label(e){return fG(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appInjectorGone`,``]],inputs:{name:[1,`name`]},decls:7,vars:2,consts:[[1,`detail-head`],[`id`,`di-detail-title`,1,`mono`],[1,`state`,`compact`],[1,`state-hint`],[`type`,`button`],[`type`,`button`,3,`click`]],template:function(e,t){if(e&1&&(L(0,`header`,0)(1,`h2`,1),G(2),R()(),L(3,`div`,2)(4,`p`,3),G(5,` This injector is no longer on the page. Its component or directive was destroyed. `),R(),k(6,wK,2,1,`button`,4),R()),e&2){let e;E(2),K(t.name()),E(4),A((e=t.rows()[0])?6:-1,e)}},styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.detail-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 24px 12px;
+  border: 0;
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+button[_ngcontent-%COMP%] {
+  font: inherit;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%], 
+.provider-group[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.gone[_nghost-%COMP%]   .state[_ngcontent-%COMP%] {
+  align-items: flex-start;
+  text-align: left;
+}`]})},EK=(e,t)=>t.token+t.file+t.line;function DK(e,t){if(e&1&&(P(0,`span`,8),G(1),F()),e&2){let e=U().$implicit;E(),q(`providedIn: `,e.providedIn)}}function OK(e,t){if(e&1&&(P(0,`li`)(1,`span`,7),G(2),F(),k(3,DK,2,1,`span`,8),I(4,`app-source-link`,9),F()),e&2){let e=t.$implicit;E(2),K(e.token),E(),A(e.providedIn?3:-1),E(),N(`file`,e.file)(`line`,e.line)}}var kK=class e{scan=b(JG);orphaned=this.scan.orphaned;orphansOpen=this.scan.orphansOpen;orphanedText=this.scan.orphanedText;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appInjectorOrphans`,``]],decls:12,vars:5,consts:[[`type`,`button`,`aria-controls`,`di-orphans`,1,`orphans-toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[1,`hint-tag`],[`id`,`di-orphans`,1,`orphans-body`,3,`hidden`],[1,`hint`],[1,`orphan-list`],[1,`token`,`mono`],[1,`flag`],[1,`orphan-file`,3,`file`,`line`]],template:function(e,t){e&1&&(P(0,`button`,0),V(`click`,function(){return t.orphansOpen.set(!t.orphansOpen())}),C(),P(1,`svg`,1),I(2,`path`,2),F(),ys(),P(3,`span`,3),G(4,`Hint`),F(),G(5),F(),P(6,`div`,4)(7,`p`,5),G(8,` Provided in your source, but nothing on this page has injected them so far. This is not an error: a guard, an interceptor or code that has not run yet may still use them. `),F(),P(9,`ul`,6),j(10,OK,5,4,`li`,null,EK),F()()),e&2&&(O(`aria-expanded`,t.orphansOpen()),E(),W(`open`,t.orphansOpen()),E(4),q(` `,t.orphanedText(),`
+`),E(),N(`hidden`,!t.orphansOpen()),E(4),M(t.orphaned()))},dependencies:[aM],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: -4px 0 10px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.token[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+button[_ngcontent-%COMP%] {
+  font: inherit;
+}
+
+.refresh[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%], 
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.chevron[_ngcontent-%COMP%] {
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.chevron.open[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}
+.orphans-toggle[_ngcontent-%COMP%], 
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--%NS%radius-sm);
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%] {
+  width: auto;
+  height: auto;
+  min-height: 0;
+  padding: 2px 4px;
+  margin-left: -4px;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+}
+
+.orphans-toggle[_ngcontent-%COMP%]:hover, 
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.orphans-toggle[_ngcontent-%COMP%]:focus-visible, 
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.hint-tag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 5px;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.orphans-body[_ngcontent-%COMP%] {
+  padding: 0 12px 12px;
+}
+
+.orphan-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.orphan-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  font-size: 12px;
+}
+
+.orphans-body[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.orphan-list[_ngcontent-%COMP%]   .orphan-file[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.provider-list[hidden][_ngcontent-%COMP%], 
+.orphans-body[hidden][_ngcontent-%COMP%], 
+.helper-hint[hidden][_ngcontent-%COMP%] {
+  display: none;
+}`]})},AK=(e,t)=>t.node.injector.id;function jK(e,t){if(e&1){let e=z();L(0,`span`,12),H(`click`,function(t){x(e);let n=U().$implicit;return S(U().toggle(n.node.injector.id,t))}),C(),L(1,`svg`,13),Sg(2,`path`,14),R()()}if(e&2){let e=U().$implicit;W(`open`,e.expanded)}}function MK(e,t){e&1&&Sg(0,`span`,3)}function NK(e,t){e&1&&(L(0,`span`,7),G(1,`inactive`),R())}function PK(e,t){if(e&1&&(L(0,`span`,8),G(1),R()),e&2){let e=U().$implicit;E(),K(e.node.injector.component)}}function FK(e,t){if(e&1&&(L(0,`span`,8),G(1),R()),e&2){let e=U().$implicit;E(),K(e.node.injector.directives.join(`, `))}}function IK(e,t){if(e&1&&(L(0,`span`,10),C(),L(1,`svg`,15),Sg(2,`path`,16),R(),ys(),L(3,`span`,5),G(4,`injects`),R(),G(5),R()),e&2){let e=U().$implicit;O(`title`,e.node.dependencies.length+` injected`),E(5),q(` `,e.node.dependencies.length,` `)}}function LK(e,t){if(e&1&&(L(0,`span`,11),C(),L(1,`svg`,15),Sg(2,`path`,17),R(),ys(),L(3,`span`,5),G(4,`provides`),R(),G(5),R()),e&2){let e=t;O(`title`,e+` provided`),E(5),q(` `,e,` `)}}function RK(e,t){if(e&1){let e=z();L(0,`div`,1),H(`click`,function(){let t=x(e).$implicit;return S(U().select(t.node.injector.id))})(`focus`,function(){let t=x(e).$implicit,n=U();return n.focusId.set(t.node.injector.id),S(n.highlight(t.node))})(`blur`,function(){return x(e),S(U().highlight(null))})(`mouseenter`,function(){let t=x(e).$implicit;return S(U().highlight(t.node))})(`mouseleave`,function(){return x(e),S(U().highlight(null))}),k(1,jK,3,2,`span`,2)(2,MK,1,0,`span`,3),L(3,`span`,4),G(4),R(),L(5,`span`,5),G(6),R(),L(7,`span`,6),G(8),R(),k(9,NK,2,0,`span`,7),k(10,PK,2,1,`span`,8)(11,FK,2,1,`span`,8),L(12,`span`,9),k(13,IK,6,2,`span`,10),k(14,LK,6,2,`span`,11),R()()}if(e&2){let e,n=t.$implicit,r=U();f_(`--%NS%depth`,n.depth),W(`selected`,r.selected()?.injector?.id===n.node.injector.id),O(`aria-level`,n.depth+1)(`aria-expanded`,n.hasChildren?n.expanded:null)(`aria-selected`,r.selected()?.injector?.id===n.node.injector.id)(`tabindex`,r.rovingId()===n.node.injector.id?0:-1)(`data-id`,n.node.injector.id),E(),A(n.hasChildren?1:2),E(2),f_(`--%NS%tone`,r.tone(r.kind(n.node))),O(`title`,r.kind(n.node)),E(),K(r.kind(n.node)[0].toUpperCase()),E(2),K(r.kind(n.node)),E(2),K(r.label(n.node)),E(),A(n.node.injector.inactive?9:-1),E(),A(n.node.injector.component?10:n.node.injector.directives?.length?11:-1),E(3),A((n.node.dependencies?.length??0)>0?13:-1),E(),A((e=r.providerCount(n.node))?14:-1,e)}}var zK=class e{state=b(hG);rows=this.state.rows;selected=this.state.selected;rovingId=this.state.rovingId;focusId=this.state.focusId;select(e){this.state.select(e)}toggle(e,t){this.state.toggle(e,t)}highlight(e){this.state.highlight(e)}providerCount(e){return this.state.providerCount(e)}label(e){return fG(e)}kind(e){return dG(e)}tone(e){return pG(e)}onTreeKey(e){let t=this.rows();if(!t.length)return;let n=this.rovingId(),r=t.findIndex(e=>e.node.injector.id===n),i=Math.max(r,0),a=t[i],o=-1;switch(e.key){case`ArrowDown`:o=Math.min(i+1,t.length-1);break;case`ArrowUp`:o=Math.max(i-1,0);break;case`Home`:o=0;break;case`End`:o=t.length-1;break;case`ArrowRight`:a.hasChildren&&!a.expanded?this.toggle(a.node.injector.id):a.hasChildren&&(o=i+1);break;case`ArrowLeft`:if(a.hasChildren&&a.expanded&&!this.state.normalizedQuery())this.toggle(a.node.injector.id);else{let{parents:e}=this.state.index(),n=e.get(a.node.injector.id);for(o=-1;n&&o<0;){let r=n;o=t.findIndex(e=>e.node.injector.id===r),n=e.get(n)}}break;case`Enter`:case` `:this.select(a.node.injector.id);break;default:return}if(e.preventDefault(),o>=0){let e=t[o].node.injector.id;this.focusId.set(e),this.state.choose(e),queueMicrotask(()=>this.state.focusRow(e,!0))}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appInjectorTree`,``]],hostBindings:function(e,t){e&1&&V(`keydown`,function(e){return t.onTreeKey(e)})},decls:2,vars:0,consts:[[`role`,`treeitem`,1,`row`,3,`selected`,`--%NS%depth`],[`role`,`treeitem`,1,`row`,3,`click`,`focus`,`blur`,`mouseenter`,`mouseleave`],[`aria-hidden`,`true`,1,`twisty`,3,`open`],[`aria-hidden`,`true`,1,`twisty-space`],[`aria-hidden`,`true`,1,`kind`],[1,`sr-only`],[1,`name`,`mono`],[1,`flag`,`inactive-flag`],[1,`sub`],[1,`meta`],[1,`count`],[1,`count`,`provides`],[`aria-hidden`,`true`,1,`twisty`,3,`click`],[`viewBox`,`0 0 24 24`],[`d`,`m9 6 6 6-6 6`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M12 5v14M5 12l7 7 7-7`],[`d`,`M21 8 12 3 3 8v8l9 5 9-5z`]],template:function(e,t){e&1&&j(0,RK,15,20,`div`,0,AK),e&2&&M(t.rows())},styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.row[_ngcontent-%COMP%] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 8px 0 calc(4px + var(--%NS%depth, 0) * 18px);
+  border-radius: var(--%NS%radius-sm);
+  cursor: pointer;
+  transition: background-color 120ms var(--%NS%ease);
+}
+
+.row[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 14px;
+  width: calc(var(--%NS%depth, 0) * 18px);
+  background: repeating-linear-gradient(to right, var(--%NS%border) 0 1px, transparent 1px 18px);
+  pointer-events: none;
+}
+
+.row[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.row.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.twisty[_ngcontent-%COMP%], 
+.twisty-space[_ngcontent-%COMP%] {
+  flex: none;
+  width: 20px;
+  height: 20px;
+}
+
+.twisty[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text-3);
+  cursor: pointer;
+}
+
+.twisty[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+}
+
+.twisty[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.twisty.open[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+.kind[_ngcontent-%COMP%] {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--%NS%tone) 16%, transparent);
+  color: var(--%NS%tone);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.name[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text);
+  font-size: 12px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row.selected[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.sub[_ngcontent-%COMP%] {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  gap: 4px;
+  margin-left: auto;
+  padding-left: 8px;
+}
+
+.count[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.count.provides[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.count[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  width: 11px;
+  height: 11px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+.inactive-flag[_ngcontent-%COMP%] {
+  flex: none;
+}`]})},BK=(e,t)=>t.type,VK=(e,t)=>t.token+t.file+t.line;function HK(e,t){if(e&1){let e=z();P(0,`h2`)(1,`button`,3),V(`click`,function(){x(e);let t=U(2);return S(t.helpersOpen.set(!t.helpersOpen()))}),C(),P(2,`svg`,4),I(3,`path`,5),F(),G(4),ys(),P(5,`span`,6),G(6),F()()(),P(7,`p`,7),G(8,` provide*() calls the scan can't resolve to the tokens they register, such as your own provider functions. `),F()}if(e&2){let e=U().$implicit,t=U();E(),O(`aria-expanded`,t.helpersShown()),E(),W(`open`,t.helpersShown()),E(2),q(` `,e.label,` `),E(2),K(e.items.length),E(),N(`hidden`,!t.helpersShown())}}function UK(e,t){if(e&1&&(P(0,`h2`),G(1),P(2,`span`,6),G(3),F()()),e&2){let e=U().$implicit;E(),q(` `,e.label,` `),E(2),K(e.items.length)}}function WK(e,t){if(e&1&&(P(0,`span`,10),G(1),F()),e&2){let e=U().$implicit;E(),q(`providedIn: `,e.providedIn)}}function GK(e,t){e&1&&(P(0,`span`,11),G(1,`helper (unresolved)`),F())}function KK(e,t){if(e&1&&(P(0,`span`,14),G(1),F()),e&2){let e=U().$implicit;E(),q(`as `,e.source)}}function qK(e,t){if(e&1&&(P(0,`li`,2)(1,`div`,8)(2,`span`,9),G(3),F(),k(4,WK,2,1,`span`,10),k(5,GK,2,0,`span`,11),F(),P(6,`div`,12),I(7,`app-source-link`,13),k(8,KK,2,1,`span`,14),F()()),e&2){let e=t.$implicit,n=U(2);E(3),K(e.token),E(),A(e.providedIn?4:-1),E(),A(e.type===n.helperType?5:-1),E(2),N(`file`,e.file)(`line`,e.line),E(),A(e.source!==`class`&&e.source!==`providers array`&&e.type!==n.helperType?8:-1)}}function JK(e,t){if(e&1&&(P(0,`section`,0),k(1,HK,9,6)(2,UK,4,2,`h2`),P(3,`ul`,1),j(4,qK,9,6,`li`,2,VK),F()()),e&2){let e=t.$implicit,n=U();E(),A(e.type===n.helperType?1:2),E(2),N(`hidden`,e.type===n.helperType&&!n.helpersShown()),O(`id`,e.type===n.helperType?`di-helpers`:null),E(),M(e.items)}}var YK=class e{scan=b(JG);helperType=cG;groupedProviders=this.scan.groupedProviders;helpersOpen=this.scan.helpersOpen;helpersShown=this.scan.helpersShown;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appSourceProviders`,``]],decls:2,vars:0,consts:[[1,`provider-group`],[`role`,`list`,1,`provider-list`,3,`hidden`],[1,`provider-card`],[`type`,`button`,`aria-controls`,`di-helpers`,1,`group-toggle`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`chevron`],[`d`,`m9 6 6 6-6 6`],[1,`section-count`],[1,`hint`,`helper-hint`,3,`hidden`],[1,`provider-header`],[1,`token`],[1,`provided-in`],[1,`flag`],[1,`provider-meta`],[1,`path`,3,`file`,`line`],[1,`as`]],template:function(e,t){e&1&&j(0,JK,6,3,`section`,0,BK),e&2&&M(t.groupedProviders())},dependencies:[aM],styles:[`.hint[_ngcontent-%COMP%] {
+  margin: -4px 0 10px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.path[_ngcontent-%COMP%] {
+  position: relative;
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0 0 0 18px;
+  list-style: none;
+}
+
+.path[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  top: 13px;
+  bottom: 13px;
+  left: 5px;
+  width: 1px;
+  background: var(--%NS%border-strong);
+}
+
+.path[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  position: relative;
+  min-width: 0;
+}
+
+.path[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: -16px;
+  width: 9px;
+  height: 1px;
+  background: var(--%NS%border-strong);
+}
+
+.path[_ngcontent-%COMP%]   li.current[_ngcontent-%COMP%]   .step[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent-soft);
+}
+
+.step.null[_ngcontent-%COMP%] {
+  cursor: default;
+  color: var(--%NS%text-2);
+}
+
+.step.null[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface);
+}
+
+.hint-inline[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.step-count[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+}
+
+.token[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.flag[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 5px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 10px;
+  line-height: 16px;
+}
+
+button[_ngcontent-%COMP%] {
+  font: inherit;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%], 
+.provider-group[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.refresh[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%], 
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.chevron[_ngcontent-%COMP%] {
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.chevron.open[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}
+.orphans-toggle[_ngcontent-%COMP%], 
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--%NS%radius-sm);
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%] {
+  width: auto;
+  height: auto;
+  min-height: 0;
+  padding: 2px 4px;
+  margin-left: -4px;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+}
+
+.orphans-toggle[_ngcontent-%COMP%]:hover, 
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.orphans-toggle[_ngcontent-%COMP%]:focus-visible, 
+.provider-group[_ngcontent-%COMP%]   .group-toggle[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.helper-hint[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.provider-list[hidden][_ngcontent-%COMP%], 
+.orphans-body[hidden][_ngcontent-%COMP%], 
+.helper-hint[hidden][_ngcontent-%COMP%] {
+  display: none;
+}
+
+.provider-group[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+
+.section-count[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  letter-spacing: 0;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+
+.provider-list[_ngcontent-%COMP%] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.provider-card[_ngcontent-%COMP%] {
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  padding: 8px 12px;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+.provider-card[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  border-color: var(--%NS%border-strong);
+}
+
+.provider-header[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+}
+
+.provider-header[_ngcontent-%COMP%]   .token[_ngcontent-%COMP%] {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.provided-in[_ngcontent-%COMP%] {
+  font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 99px;
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+  border-width: 1px;
+  border-style: solid;
+}
+
+.provider-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 8px;
+  margin-top: 4px;
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  color: var(--%NS%text-3);
+}
+
+.provider-meta[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.provider-meta[_ngcontent-%COMP%]   .as[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}`]})},XK=[`queryInput`],ZK=()=>({compact:!1}),QK=()=>({compact:!0}),$K=(e,t)=>t.id;function eq(e,t){if(e&1){let e=z();P(0,`div`,6)(1,`p`,7),G(2),F(),P(3,`p`,8),G(4,` The devtools server did not answer. Check that it is still running, then retry. `),F(),P(5,`button`,9),V(`click`,function(){return x(e),S(U().retry())}),G(6),F()()}if(e&2){let e=t.compact,n=U();W(`compact`,e),E(2),q(` `,e?`Couldn't load the live injector tree`:`Couldn't load DI data`,` `),E(3),O(`aria-disabled`,n.retrying()||null),E(),q(` `,n.retrying()?`Retrying…`:`Retry`,` `)}}function tq(e,t){if(e&1){let e=z();P(0,`div`,10)(1,`span`,11),G(2,`Page`),F(),P(3,`app-select`,12),V(`valueChange`,function(t){return x(e),S(U(2).selectPage(t))}),F()()}if(e&2){let e=U(2);E(3),N(`options`,e.pageOptions())(`value`,e.shownPageId())}}function nq(e,t){e&1&&k(0,tq,4,2,`div`,10),e&2&&A(U().pageOptions().length>1?0:-1)}function rq(e,t){if(e&1){let e=z();P(0,`label`,20)(1,`input`,21),V(`change`,function(){x(e);let t=U(2);return S(t.componentsOnly.set(!t.componentsOnly()))}),F(),G(2,` Components only `),F()}if(e&2){let e=U(2);E(),N(`checked`,e.componentsOnly())}}function iq(e,t){if(e&1&&(P(0,`span`,22),G(1),F()),e&2){let e=U(2);E(),K(e.frameworkHiddenText())}}function aq(e,t){e&1&&(P(0,`span`,23),G(1),F()),e&2&&(E(),q(`Change detection: `,t))}function oq(e,t){if(e&1&&(P(0,`p`,27),C(),P(1,`svg`,25),I(2,`circle`,38)(3,`path`,39),F(),ys(),P(4,`span`)(5,`strong`),G(6,`The page reported only part of its injector tree.`),F(),G(7),F()()),e&2){let e=U(2);E(7),R_(` It keeps at most `,e.limits().elements,` element injectors and `,e.limits().injectors,` in all, and leaves out injectors nested more than `,e.limits().depth,` levels deep, so a lookup path or a provider can point to one that is not listed. `)}}function sq(e,t){if(e&1){let e=z();P(0,`button`,43),V(`click`,function(){let t=x(e).$implicit;return S(U(3).reveal(t.id))}),I(1,`span`,44),P(2,`span`,45),G(3),F(),P(4,`span`,46),G(5),F()()}if(e&2){let e=t.$implicit,n=U(3);E(),f_(`background`,n.tone(e.kind)),E(2),K(e.label),E(2),K(e.tokens)}}function cq(e,t){e&1&&(P(0,`span`,42),G(1),F()),e&2&&(E(),q(`+`,t,` more`))}function lq(e,t){if(e&1&&(P(0,`div`,28)(1,`span`,40),G(2,`Provided by`),F(),j(3,sq,6,4,`button`,41,$K),k(5,cq,2,1,`span`,42),F()),e&2){let e,t=U(2);E(3),M(t.providedBy()),E(2),A((e=t.providedByMore())?5:-1,e)}}function uq(e,t){if(e&1){let e=z();P(0,`div`,29),G(1),P(2,`button`,47),V(`click`,function(){return x(e),S(U(2).clearQuery())}),G(3,`Clear filters`),F()()}if(e&2){let e=U(2);E(),q(` Nothing here matches “`,e.query().trim(),`”. `)}}function dq(e,t){e&1&&I(0,`div`,30)}function fq(e,t){e&1&&G(0,` Turn off “Hide framework” to see Angular's own injectors. `)}function pq(e,t){e&1&&G(0,` None of them provide anything themselves. `)}function mq(e,t){e&1&&G(0,` Turn off “Components only” to see directives. `)}function hq(e,t){e&1&&G(0,` Try a different search. `)}function gq(e,t){if(e&1&&(P(0,`div`,32)(1,`p`,7),G(2,`No injectors to show`),F(),P(3,`p`,8),k(4,fq,1,0)(5,pq,1,0)(6,mq,1,0)(7,hq,1,0),F()()),e&2){let e=U(2);E(4),A(e.hideFramework()&&e.frameworkHiddenCount().injectors>0?4:e.onlyProviding()?5:e.componentsOnly()&&e.view()===`element`?6:7)}}function _q(e,t){e&1&&I(0,`section`,35),e&2&&N(`name`,t)}function vq(e,t){if(e&1){let e=z();P(0,`section`,48),V(`showComponent`,function(t){return x(e),S(U(2).openComponent(t))}),F()}if(e&2){let e=U(2);N(`node`,t)(`canShowComponent`,e.canShowComponent())}}function yq(e,t){if(e&1){let e=z();P(0,`p`,13),G(1,` Every component and directive gets an injector. When it asks for a token, Angular walks up this tree, then through the environment injectors, until something provides it. `),F(),P(2,`app-angular-unavailable`,14),G(3,` This tree shows the element injectors the page reports, with providers and environment injectors only where its Angular exposes them. `),F(),P(4,`div`,15)(5,`div`,16)(6,`button`,9),V(`click`,function(){return x(e),S(U().setView(`element`))}),G(7,` Elements `),P(8,`span`,17),G(9),F()(),P(10,`button`,9),V(`click`,function(){return x(e),S(U().setView(`environment`))}),G(11,` Environment `),P(12,`span`,17),G(13),F()()(),P(14,`app-search-field`,18,2),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.query,t)||(n.query=t),S(t)}),F(),Eg(16,19),k(17,rq,3,1,`label`,20),P(18,`label`,20)(19,`input`,21),V(`change`,function(){x(e);let t=U();return S(t.onlyProviding.set(!t.onlyProviding()))}),F(),G(20,` With providers `),F(),P(21,`label`,20)(22,`input`,21),V(`change`,function(){x(e);let t=U();return S(t.setHideFramework(!t.hideFramework()))}),F(),G(23,` Hide framework `),F(),k(24,iq,2,1,`span`,22),k(25,aq,2,1,`span`,23),P(26,`button`,24),V(`click`,function(){return x(e),S(U().refresh())}),C(),P(27,`svg`,25),I(28,`path`,26),F(),G(29,` Refresh `),F()(),k(30,oq,8,3,`p`,27),k(31,lq,6,1,`div`,28)(32,uq,4,1,`div`,29),k(33,dq,1,0,`div`,30),ys(),P(34,`div`,31),k(35,gq,8,1,`div`,32),I(36,`div`,33),P(37,`app-splitter`,34),U_(`sizeChange`,function(t){x(e);let n=U();return H_(n.detailSize,t)||(n.detailSize=t),S(t)}),F(),k(38,_q,1,1,`section`,35)(39,vq,1,2,`section`,36),F(),I(40,`app-startup-section`,37)}if(e&2){let e,t,n=U(),r=Gg(5);E(2),N(`page`,n.angularPage()),E(4),W(`active`,n.view()===`element`),O(`aria-pressed`,n.view()===`element`),E(3),K(n.elementCount()),E(),W(`active`,n.view()===`environment`),O(`aria-pressed`,n.view()===`environment`),E(3),K(n.environmentCount()),E(),V_(`value`,n.query),E(2),N(`ngTemplateOutlet`,r),E(),A(n.view()===`element`?17:-1),E(2),N(`checked`,n.onlyProviding()),E(3),N(`checked`,n.hideFramework()),E(2),A(n.hideFramework()?24:-1),E(),A((e=n.zone())?25:-1,e),E(),O(`aria-disabled`,!n.shownPageId()||null),E(4),A(n.truncated()?30:-1),E(),A(n.providedBy().length?31:n.query().trim()&&!n.rows().length?32:-1),E(2),A(n.orphaned().length?33:-1),E(),f_(`--%NS%detail-size`,n.detailSize(),`px`),E(),A(n.rows().length?-1:35),E(),N(`hidden`,!n.rows().length),O(`aria-label`,n.view()===`element`?`Element injectors`:`Environment injectors`),E(),N(`min`,300)(`max`,900)(`defaultSize`,420),V_(`size`,n.detailSize),E(),A((t=n.gone())?38:(t=n.selected())?39:-1,t),E(2),N(`rpc`,n.rpc())(`pageId`,n.shownPageId())}}function bq(e,t){e&1&&(P(0,`div`,4),I(1,`span`,49),P(2,`p`,7),G(3,`Loading dependency injection data…`),F()())}function xq(e,t){e&1&&Eg(0,5),e&2&&(U(),N(`ngTemplateOutlet`,Gg(3))(`ngTemplateOutletContext`,iv(2,ZK)))}function Sq(e,t){if(e&1&&(P(0,`div`,15),Eg(1,19),F()),e&2){U(2);let e=Gg(5);E(),N(`ngTemplateOutlet`,e)}}function Cq(e,t){e&1&&(k(0,Sq,2,1,`div`,15),P(1,`div`,32)(2,`p`,7),G(3,`No DI data found`),F(),P(4,`p`,8),G(5,` Open the app in a browser with the devtools connected to see its live injectors. No providers, injectables or inject() calls were found in the source either. `),F()()),e&2&&A(U().pageOptions().length>1?0:-1)}function wq(e,t){e&1&&Eg(0,5),e&2&&(U(2),N(`ngTemplateOutlet`,Gg(3))(`ngTemplateOutletContext`,iv(2,QK)))}function Tq(e,t){if(e&1){let e=z();P(0,`div`,32)(1,`p`,7),G(2),F(),P(3,`p`,8),G(4,`Try part of a token name or a file path.`),F(),P(5,`button`,9),V(`click`,function(){return x(e),S(U(2).clearQuery())}),G(6,`Clear filters`),F()()}if(e&2){let e=U(2);E(2),q(`No providers match “`,e.query(),`”`)}}function Eq(e,t){e&1&&I(0,`div`,53)}function Dq(e,t){if(e&1){let e=z();P(0,`div`,15)(1,`app-search-field`,50,2),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.query,t)||(n.query=t),S(t)}),F(),Eg(3,19),P(4,`span`,51),G(5),F()(),k(6,wq,1,3,`ng-container`,5),P(7,`p`,27),C(),P(8,`svg`,25),I(9,`circle`,38)(10,`path`,39),F(),ys(),P(11,`span`)(12,`strong`),G(13,`DI from the source scan.`),F(),G(14,` Connect the overlay to a development build to see the live injector tree. `),F()(),I(15,`app-angular-unavailable`,52),k(16,Tq,7,1,`div`,32)(17,Eq,1,0,`div`,53)}if(e&2){let e=U(),t=Gg(5);E(),V_(`value`,e.query),E(2),N(`ngTemplateOutlet`,t),E(2),J(` `,e.sourceMatchCount(),` of `,e.sourceProviders().length,` `),E(),A(e.loadFailed()?6:-1),E(9),N(`page`,e.angularPage()),E(),A(e.groupedProviders().length===0?16:17)}}var Oq=class e{rpc=$(null);focus=$(null);canShowComponent=$(!1);focusHandled=xv();showComponent=xv();state=b(hG);scan=b(JG);angularPages=pD(()=>this.rpc());angularPage=X(()=>mD(this.angularPages(),this.shownPageId()||this.state.hostPage));chosenPageId=this.state.chosenPageId;shownPageId=this.state.shownPageId;roots=this.state.roots;environment=this.state.environment;truncated=this.state.truncated;limits=this.state.limits;zone=this.state.zone;pageOptions=this.state.pageOptions;sourceProviders=this.state.sourceProviders;loaded=this.state.loaded;loadFailed=this.state.loadFailed;retrying=this.state.retrying;view=this.state.view;query=this.state.query;detailSize=w(HW(`injectors`,420));queryInput=Ov(`queryInput`);onlyProviding=this.state.onlyProviding;componentsOnly=this.state.componentsOnly;hideFramework=this.state.hideFramework;collapsed=this.state.collapsed;selectedId=this.state.selectedId;focusId=this.state.focusId;announcement=this.state.announcement;elementCount=this.state.elementCount;environmentCount=this.state.environmentCount;frameworkHiddenCount=this.state.frameworkHiddenCount;frameworkHiddenText=this.state.frameworkHiddenText;rows=this.state.rows;selected=this.state.selected;gone=this.state.gone;rovingId=this.state.rovingId;path=this.state.path;providedBy=this.state.providedBy;providedByMore=this.state.providedByMore;resolvingKey=this.state.resolvingKey;groupedProviders=this.scan.groupedProviders;sourceMatchCount=this.scan.sourceMatchCount;helpersOpen=this.scan.helpersOpen;helpersShown=this.scan.helpersShown;orphaned=this.scan.orphaned;orphansOpen=this.scan.orphansOpen;orphanedText=this.scan.orphanedText;lastSearchMessage=``;refreshedKey=null;constructor(){this.state.connect(this.rpc),T(e=>{let t=this.state.searchSummary();if(!t){this.lastSearchMessage=``;return}if(t===this.lastSearchMessage)return;let n=setTimeout(()=>{this.lastSearchMessage=t,this.announcement.set(t)},600);e(()=>clearTimeout(n))}),T(()=>{let e=this.rpc();e&&(this.state.loadInjectorTree(e),this.state.loadSourceProviders(e))}),T(()=>{let e=this.selected(),t=this.shownPageId(),n=e?.injector.type===`element`?e.injector.id:null,r=n&&t?`${t}|${n}`:null;r&&r!==this.refreshedKey&&(this.refreshedKey=r,Z(()=>this.state.requestRefresh(t,n)))}),T(e=>{let t=this.rpc();if(!t||!this.state.multiPage())return;let n=!0,r=null;e(()=>{n=!1,r?.()}),t.scope(`pangular`).rpc.sharedState(`component-tree`).then(e=>{if(!n)return;let t=e=>{let t=e?.pages;this.state.pageTitles.set(t&&typeof t==`object`?t:{})};t(e.value()),r=e.on(`updated`,t)}).catch(()=>{})}),T(()=>{let e=this.focus();if(!e)return;let t=this.state.treePages(),n=this.shownPageId();if(e.pageId&&n!==e.pageId&&t[e.pageId]){Z(()=>this.selectPage(e.pageId));return}(this.state.treeState()||this.state.treeFailed())&&Z(()=>{let t=!e.pageId||n===e.pageId,r=this.state.index(),i=t?r.byComponent.get(e.componentId):void 0,a=i?r.map.get(i):void 0;i&&a?(this.reveal(i),this.announcement.set(`Showing the injector of ${fG(a)}.`)):this.announcement.set(`That component's injector is not on this page.`),this.focusHandled.emit()})})}setHideFramework(e){this.state.setHideFramework(e)}openComponent(e){let t=this.shownPageId();this.showComponent.emit(t?{id:e,pageId:t}:{id:e})}retry(){return this.state.retry()}refresh(){this.state.refresh()}clearQuery(){this.query.set(``),this.queryInput()?.focus()}tone(e){return pG(e)}providerCount(e){return this.state.providerCount(e)}setView(e){this.state.setView(e)}select(e){this.state.select(e)}selectPage(e){this.state.selectPage(e)}toggle(e,t){this.state.toggle(e,t)}reveal(e){this.state.reveal(e)}highlight(e){this.state.highlight(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-di-inspector`]],viewQuery:function(e,t){e&1&&Ug(t.queryInput,XK,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`],focus:[1,`focus`],canShowComponent:[1,`canShowComponent`]},outputs:{focusHandled:`focusHandled`,showComponent:`showComponent`},features:[rv([hG,JG])],decls:11,vars:2,consts:[[`loadError`,``],[`pagePicker`,``],[`queryInput`,``],[`role`,`status`,1,`sr-only`],[`role`,`status`,1,`state`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[`role`,`alert`,1,`state`,`load-error`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[1,`page-picker`],[`id`,`di-page-label`,1,`label-key`],[`labelledBy`,`di-page-label`,3,`valueChange`,`options`,`value`],[1,`intro`],[`capability`,`injectorMetadata`,`compact`,``,3,`page`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Injector tree`,1,`segmented`],[1,`pill`],[`placeholder`,`Filter by token, component or injector`,`saveKey`,`injectors`,1,`search`,3,`valueChange`,`value`],[3,`ngTemplateOutlet`],[1,`checkbox`],[`type`,`checkbox`,3,`change`,`checked`],[1,`total`,`framework-hidden`],[1,`total`],[`type`,`button`,1,`refresh`,3,`click`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7`],[1,`notice`],[1,`where`],[1,`where`,`muted`],[`appInjectorOrphans`,``,1,`orphans`],[1,`layout`],[1,`state`],[`appInjectorTree`,``,`role`,`tree`,1,`tree`,3,`hidden`],[`view`,`injectors`,`label`,`Resize the injector detail`,3,`sizeChange`,`min`,`max`,`defaultSize`,`size`],[`appInjectorGone`,``,`aria-labelledby`,`di-detail-title`,1,`detail`,`gone`,3,`name`],[`appInjectorDetail`,``,`aria-labelledby`,`di-detail-title`,1,`detail`,3,`node`,`canShowComponent`],[3,`rpc`,`pageId`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[1,`where-label`],[`type`,`button`,1,`chip`],[1,`more`],[`type`,`button`,1,`chip`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`mono`],[1,`chip-tokens`],[`type`,`button`,1,`link`,3,`click`],[`appInjectorDetail`,``,`aria-labelledby`,`di-detail-title`,1,`detail`,3,`showComponent`,`node`,`canShowComponent`],[`aria-hidden`,`true`,1,`spinner`],[`placeholder`,`Filter by token or file`,`saveKey`,`injectors-source`,1,`search`,3,`valueChange`,`value`],[`aria-live`,`polite`,1,`total`],[`capability`,`debugApi`,`compact`,``,3,`page`],[`appSourceProviders`,``,1,`source-providers`]],template:function(e,t){e&1&&(P(0,`p`,3),G(1),F(),Hh(2,eq,7,5,`ng-template`,null,0,mv)(4,nq,1,1,`ng-template`,null,1,mv),k(6,yq,41,32)(7,bq,4,0,`div`,4)(8,xq,1,3,`ng-container`,5)(9,Cq,6,1)(10,Dq,18,7)),e&2&&(E(),K(t.announcement()),E(5),A(t.roots().length>0?6:t.loaded()?t.loadFailed()&&t.sourceProviders().length===0?8:t.sourceProviders().length===0?9:10:7))},dependencies:[iD,WW,RE,uy,CK,TK,kK,zK,JE,YK,aG],styles:[`[_nghost-%COMP%] {
+  --%NS%directive: #7cb4ff;
+  display: block;
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%] {
+    --%NS%directive: #1e40af;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%] {
+  --%NS%directive: #1e40af;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.intro[_ngcontent-%COMP%] {
+  max-width: 720px;
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.page-picker[_ngcontent-%COMP%] {
+  display: flex;
+  flex: 0 1 240px;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.page-picker[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.label-key[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.segmented[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 3px;
+  gap: 2px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+}
+
+.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease);
+}
+
+.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.segmented[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+}
+
+.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  justify-content: center;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.segmented[_ngcontent-%COMP%]   .active[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%accent);
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: 34px;
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+input[type=search][_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[type=search][_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.checkbox[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  color: var(--%NS%text-2);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.checkbox[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.checkbox[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+.checkbox[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.total[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.where[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%accent-soft);
+  animation: enter 0.2s var(--%NS%ease) both;
+}
+
+.where.muted[_ngcontent-%COMP%] {
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+}
+
+.where-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-right: 4px;
+  color: var(--%NS%accent);
+}
+
+.chip[_ngcontent-%COMP%], 
+.from[_ngcontent-%COMP%], 
+.step[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+
+.chip[_ngcontent-%COMP%]:hover, 
+.from[_ngcontent-%COMP%]:hover, 
+.step[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-2);
+}
+
+.chip[_ngcontent-%COMP%]:focus-visible, 
+.from[_ngcontent-%COMP%]:focus-visible, 
+.step[_ngcontent-%COMP%]:focus-visible, 
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.chip-tokens[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.more[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.link[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--%NS%accent);
+  font-size: 13px;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+.layout[_ngcontent-%COMP%]    > app-splitter[_ngcontent-%COMP%] {
+  display: none;
+}
+
+@media (min-width: 880px) {
+  .layout[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr) auto min(var(--%NS%detail-size, 420px), 70%);
+  }
+  .layout[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {
+    grid-column: 1;
+    grid-row: 1;
+  }
+  .layout[_ngcontent-%COMP%]    > app-splitter[_ngcontent-%COMP%] {
+    display: block;
+    grid-column: 2;
+  }
+  .layout[_ngcontent-%COMP%]    > .detail[_ngcontent-%COMP%] {
+    grid-column: 3;
+  }
+  .detail[_ngcontent-%COMP%] {
+    position: sticky;
+    top: 64px;
+    max-height: calc(100vh - 150px);
+    overflow: auto;
+  }
+}
+.tree[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 6px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.detail[_ngcontent-%COMP%] {
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 24px 12px;
+  border: 0;
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+button[_ngcontent-%COMP%] {
+  font: inherit;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%], 
+.provider-group[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.load-error.compact[_ngcontent-%COMP%] {
+  margin: 0 0 16px;
+  border: 1px solid var(--%NS%border);
+  background: var(--%NS%surface);
+}
+
+.state-title[_ngcontent-%COMP%]    + .state-hint[_ngcontent-%COMP%]    + button[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.notice[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.notice[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 600;
+}
+
+.notice[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  fill: none;
+  stroke: var(--%NS%accent);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.refresh[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--%NS%control-h);
+  margin-left: auto;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+.refresh[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+
+.refresh[aria-disabled=true][_ngcontent-%COMP%] {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.refresh[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.refresh[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%], 
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.chevron[_ngcontent-%COMP%] {
+  transition: transform 150ms var(--%NS%ease);
+}
+
+.chevron.open[_ngcontent-%COMP%] {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}
+.orphans[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+}
+
+.source-providers[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  animation: enter 0.35s var(--%NS%ease) both;
+}`]})},kq=`pangular-view`,Aq=class e{values=new Map;view=()=>`panel`;useView(e){this.view=e}key(e){return`${kq}:${Z(this.view)}:${tT()??``}:${e}`}read(e){let t=this.key(e);try{let e=sessionStorage.getItem(t);return e===null?void 0:JSON.parse(e)}catch{return this.values.get(t)}}write(e,t){let n=this.key(e);try{t==null?sessionStorage.removeItem(n):sessionStorage.setItem(n,JSON.stringify(t))}catch{this.values.set(n,t)}}static ɵfac=function(t){return new(t||e)};static ɵprov=Fl({token:e,factory:e.ɵfac})};function jq(e,t,n=`selection`){let r=b(Aq),i=`${e}:${n}`,a=r.read(i);a!=null&&t.set(a),T(()=>r.write(i,t()))}function Mq(e,t,n=120,r){let i=n,a=0,o=!1,s=[`wheel`,`touchstart`,`pointerdown`,`keydown`],c=()=>{if(!o){o=!0,cancelAnimationFrame(a);for(let t of s)e.removeEventListener(t,c);r?.()}};for(let t of s)e.addEventListener(t,c,{passive:!0});let l=()=>{o||(e.scrollTop=t,Math.abs(e.scrollTop-t)<2||--i<=0?c():a=requestAnimationFrame(l))};return t>0?l():(e.scrollTop=0,c()),c}var Nq={action:`#f59e0b`,reducer:`#a78bfa`,effect:`#fb923c`,selector:`#60a5fa`,feature:`#34d399`,"store-setup":`#94a3b8`,"signal-store":`#e879f9`,"signal-state":`#22d3ee`,"signal-method":`#fb7185`,store:`#a78bfa`,event:`var(--warn)`,redux:`#38bdf8`},Pq={"signal-store":`signalStore`,"signal-state":`signalState`,"signal-method":`signalMethod`,"store-setup":`store setup`,store:`@ngrx/store`,event:`event`,redux:`Redux DevTools`},Fq={dispatch:`store.dispatch(action)`,effect:`NgRx effect (Store.next)`,reactive:`store.dispatch(() => action)`},Iq=new Set([`action`,`reducer`,`effect`,`selector`,`feature`,`store-setup`]);function Lq(e){if(!e.trim())return{};let t;try{t=JSON.parse(e)}catch{return{error:`The payload is not valid JSON.`}}return!t||typeof t!=`object`||Array.isArray(t)?{error:`The payload must be a JSON object, like {"id": 7}.`}:Object.prototype.hasOwnProperty.call(t,`type`)?{error:`The payload cannot have a "type" key. Put the action type in the Type field.`}:{payload:t}}function Rq(e){return Nq[e]??`var(--text-3)`}function zq(e){return Pq[e]??e}function Bq(e){return Fq[e]??e}function Vq(e){return e===`add`?`added`:e===`remove`?`removed`:`changed`}function Hq(e){return e<=0?`<1ms`:`${Math.round(e)}ms`}function Uq(e){let t=[];return e.avgDurationMs!==void 0&&t.push(`avg ${Hq(e.avgDurationMs)}`),e.lastDurationMs!==void 0&&t.push(`last ${Hq(e.lastDurationMs)}`),t.length?` · ${t.join(` · `)}`:``}function Wq(e,t){let{start:n,end:r}=t.range();return e.slice(n,r).map((e,t)=>({entry:e,index:n+t}))}var Gq=`redux:`;function Kq(e){let t=e;return!!t&&typeof t.id==`string`&&typeof t.name==`string`&&typeof t.library==`string`}function qq(e){let t=e?.pages;return!t||typeof t!=`object`||Array.isArray(t)?[]:Object.values(t).filter(e=>{let t=e;return!!t&&typeof t.pageId==`string`&&Array.isArray(t.stores)&&t.stores.every(Kq)&&Array.isArray(t.log)}).sort((e,t)=>t.reportedAt-e.reportedAt)}function Jq(e){return(e?.stores??[]).map(e=>({id:Gq+e.id,label:e.name,kind:`redux`,scope:e.library,redux:e}))}function Yq(e,t){if(!e||!t?.startsWith(`redux:`))return[];let n=t.slice(6);return e.log.filter(e=>e.storeId===n).map(e=>({seq:e.seq,source:`redux`,storeId:t,type:e.type,...e.action===void 0?{}:{action:e.action},timestamp:e.timestamp,diff:e.diff,restorable:!1,...e.diffTruncated?{diffTruncated:e.diffTruncated}:{}}))}function Xq(e){let t=/^(.*?)\s*\((.+?):(\d+)(?::\d+)?\)$/.exec(e)??/^()(.+?):(\d+)(?::\d+)?$/.exec(e);return t?{name:t[1],file:t[2],line:Number(t[3])}:{name:e}}var Zq=1e3;function Qq(e){return`${e>=1e3?`${Zq}+`:String(e)} more ${e===1?`change`:`changes`} not shown`}function $q(e){let t=e.diffTruncated??0,n=e.diff.length+t;return n===0?`no change`:`${t>=1e3?`${n}+`:String(n)} ${n===1?`change`:`changes`}`}function eJ(e,t){if(e.pageId!==t.pageId)return!1;let n=e.log.at(-1);if(!n)return!0;let r=t.log.at(-1);if(!r||r.seq<n.seq)return!1;let i=t.log.find(e=>e.seq===n.seq);return!i||i.timestamp===n.timestamp}var tJ=`@type`,nJ=new Set([`undefined`,`number`,`bigint`,`symbol`,`function`,`Date`,`RegExp`,`Error`,`Element`,`Map`,`Set`]);function rJ(e){return!!e&&typeof e==`object`&&!Array.isArray(e)&&tJ in e&&nJ.has(e[tJ])}function iJ(e){return/^[A-Za-z_$][\w$]*$/.test(e)?e:JSON.stringify(e)}function aJ(e,t=``){if(e===null)return`null`;if(typeof e==`string`)return JSON.stringify(e);if(typeof e!=`object`)return String(e);let n=t+`  `;if(Array.isArray(e))return e.length?`[\n${e.map(e=>n+aJ(e,n)).join(`,
+`)}\n${t}]`:`[]`;if(rJ(e)){let r=e;switch(r[tJ]){case`undefined`:return`undefined`;case`Date`:return`Date(${r.value})`;case`bigint`:return`${r.value}n`;case`symbol`:return`Symbol(${r.value})`;case`function`:return`ƒ ${r.name}()`;case`Error`:return`${r.name??`Error`}: ${r.message}`;case`Element`:return`<${r.value}>`;case`Map`:{let e=r.entries??[];if(!e.length)return`Map(${r.size}) {}`;let i=e.map(([e,t])=>`${n}${aJ(e,n)} => ${aJ(t,n)}`);return`Map(${r.size}) {\n${i.join(`,
+`)}\n${t}}`}case`Set`:{let e=r.values??[];return e.length?`Set(${r.size}) {\n${e.map(e=>n+aJ(e,n)).join(`,
+`)}\n${t}}`:`Set(${r.size}) {}`}default:return String(r.value??r[tJ])}}let r=Object.entries(e);return r.length?`{\n${r.map(([e,t])=>`${n}${iJ(e)}: ${aJ(t,n)}`).join(`,
+`)}\n${t}}`:`{}`}function oJ(e,t=120){let n=aJ(e).replace(/\s*\n\s*/g,` `);return n.length>t?`${n.slice(0,t-1)}…`:n}var sJ=class e{rpcSource=w(null);rpc=X(()=>this.rpcSource());canRestore=X(()=>OT(this.rpc(),`ngrx`));restoreOff=Mw(`ngrx`);filter=w(``);kind=w(null);sourceEntries=w([]);sourceLoaded=w(!1);pages=w([]);reduxPages=w([]);allPages=X(()=>{let e=this.pages(),t=new Set(e.map(e=>e.pageId)),n=this.reduxPages().filter(e=>!t.has(e.pageId)).map(e=>({pageId:e.pageId,url:e.url,title:e.title,stores:[],classic:null,log:[],reportedAt:e.reportedAt}));return[...e,...n]});failed=w(!1);stateLoaded=w(!1);selectedPageId=w(null);hostPageId=tT();angularPages=pD(()=>this.rpc());angularPage=X(()=>mD(this.angularPages(),this.page()?.pageId??this.hostPageId));maxLog=X(()=>TT(this.rpc()).limits.changeLog);selectedStoreId=w(null);message=w(``);destroyRef=b(Os);unsubscribe=null;unsubscribeOthers=null;focusFilter=()=>{};page=X(()=>{let e=this.allPages();return e.find(e=>e.pageId===this.selectedPageId())??e.find(e=>e.pageId===this.hostPageId)??e[0]??null});pageConnected=X(()=>!!this.page()||!!this.angularPage());reduxPage=X(()=>this.reduxPages().find(e=>e.pageId===this.page()?.pageId)??null);logKey=X(()=>{let e=this.page(),t=this.store();return t?.redux?{pageId:`${e?.pageId}/${t.id}`,log:Yq(this.reduxPage(),t.id)}:{pageId:e?.pageId??null,log:e?.log??[]}});logSession=Q({source:this.logKey,computation:(e,t)=>t?eJ(t.source,e)?t.value:t.value+1:0});selectedChangeSeq=Q({source:this.logSession,computation:()=>null});selectedEventSeq=Q({source:this.logSession,computation:()=>null});confirmSeq=Q({source:this.logSession,computation:()=>null});pageOptions=X(()=>this.allPages().map(e=>({value:e.pageId,label:e.title||e.url,hint:e.url})));liveStores=X(()=>{let e=this.page();if(!e)return[];let t=e.stores.map(e=>({id:e.id,label:e.name??e.references[0]??e.className,kind:e.kind,scope:e.scope,signal:e}));return e.classic&&t.push({id:`store`,label:`Store`,kind:`store`,scope:e.classic.scope,classic:e.classic}),t.push(...Jq(this.reduxPage())),t});filteredStores=X(()=>{let e=this.filter().trim().toLowerCase();return e?this.liveStores().filter(t=>t.label.toLowerCase().includes(e)||t.kind.includes(e)||(t.signal?.stateKeys??[]).some(t=>t.toLowerCase().includes(e))||this.logOf(t).some(t=>t.type.toLowerCase().includes(e))):this.liveStores()});store=X(()=>{let e=this.liveStores();return e.find(e=>e.id===this.selectedStoreId())??e[0]??null});stateText=X(()=>{let e=this.store();return e?aJ(e.signal?e.signal.state:e.redux?e.redux.state:e.classic?.state):``});stateValue=X(()=>{let e=this.store();if(e)return e.signal?e.signal.state:e.redux?e.redux.state:e.classic?.state});changedPaths=X(()=>{let e=this.store(),t=e?this.logOf(e):[],n;for(let e=t.length-1;e>=0&&!n;e--)t[e].diff.length&&(n=t[e]);return(n?.diff??[]).map(e=>e.path)});storeStats=X(()=>{let e=this.store();if(!e||e.redux)return[];let t=this.page()?.stats;return Array.isArray(t)?t.filter(t=>t.storeId===e.id):[]});hasLoop=X(()=>this.storeStats().some(e=>e.loop));skippedSeqs=X(()=>new Set(Array.isArray(this.page()?.classic?.skipped)?this.page().classic.skipped:[]));computedEntries=X(()=>Object.entries(this.store()?.signal?.computed??{}).map(([e,t])=>({key:e,value:oJ(t,160),full:aJ(t)})));logFeed=new RR({name:`store-log`,source:()=>{let e=this.store();return e?this.logOf(e):[]},key:e=>e.seq,newest:`last`,scope:()=>`${this.store()?.id??``}:${this.logSession()}`});storeLog=X(()=>{let e=this.filter().trim().toLowerCase();return this.logFeed.items().filter(t=>!e||t.type.toLowerCase().includes(e)||this.storeMatches(e)).slice().reverse()});sessionEntries=X(()=>{let e=this.store();return!e||e.redux?[]:(this.page()?.log??[]).filter(t=>t.storeId===e.id&&t.source!==`event`)});loadEntry=async e=>{let t=this.page()?.pageId;return t?await oT(this.rpc(),`request-ngrx-history`,{pageId:t,request:{type:`entry`,seq:e}})??{error:`The devtools server is not connected.`}:{error:`No live page to read from.`}};logOf(e){return e.redux?Yq(this.reduxPage(),e.id):(this.page()?.log??[]).filter(t=>t.storeId===e.id)}hasEvents=X(()=>(this.page()?.log??[]).some(e=>e.source===`event`));pageEvents=X(()=>{let e=this.filter().trim().toLowerCase();return(this.page()?.log??[]).filter(t=>t.source===`event`&&(!e||t.type.toLowerCase().includes(e))).slice().reverse()});changeEntry=X(()=>{let e=this.selectedChangeSeq();return e===null?null:this.storeLog().find(t=>t.seq===e)??null});eventEntry=X(()=>{let e=this.selectedEventSeq();return e===null?null:this.pageEvents().find(t=>t.seq===e)??null});actionTypes=X(()=>{let e=new Set;for(let t of this.sourceEntries())for(let n of t.types??[])e.add(n);for(let t of this.page()?.log??[])t.source===`store`&&t.action!==void 0&&e.add(t.type);return[...e].sort().slice(0,200)});usesSignals=X(()=>this.sourceEntries().some(e=>e.kind===`signal-store`||e.kind===`signal-state`));usesClassic=X(()=>this.sourceEntries().some(e=>Iq.has(e.kind)));filteredEntries=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.kind();return this.sourceEntries().filter(n=>(!t||n.kind===t)&&(!e||n.name.toLowerCase().includes(e)||n.kind.includes(e)||(n.detail??``).toLowerCase().includes(e)))});groupedEntries=X(()=>{let e=new Map;for(let t of this.sourceEntries())e.set(t.kind,(e.get(t.kind)??0)+1);return[...e.entries()].map(([e,t])=>({kind:e,count:t}))});constructor(){this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.unsubscribeOthers?.()})}connect(e){this.rpcSource=e}storeMatches(e){let t=this.store();return!!t&&t.label.toLowerCase().includes(e)}async load(e){this.failed.set(!1),oT(e,`get-ngrx-store`).then(e=>this.sourceEntries.set(Array.isArray(e)?e:[])).catch(()=>this.sourceEntries.set([])).finally(()=>this.sourceLoaded.set(!0));try{let t=await e.scope(`pangular`).rpc.sharedState(`ngrx-store`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.pages.set(Array.isArray(t?.pages)?t.pages:[]),e!==void 0&&this.stateLoaded.set(!0)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}try{let t=await e.scope(`pangular`).rpc.sharedState(`redux-stores`);if(this.destroyRef.destroyed)return;let n=e=>this.reduxPages.set(qq(e));n(t.value()),this.unsubscribeOthers?.(),this.unsubscribeOthers=t.on(`updated`,n)}catch{this.reduxPages.set([])}}retry(){let e=this.rpc();e&&this.load(e)}selectPage(e){this.selectedPageId.set(e),this.selectedStoreId.set(null),this.selectedChangeSeq.set(null),this.selectedEventSeq.set(null),this.confirmSeq.set(null),this.message.set(``)}selectStore(e){this.selectedStoreId.set(e),this.selectedChangeSeq.set(null),this.confirmSeq.set(null),this.message.set(``)}selectChange(e){this.selectedChangeSeq.set(this.selectedChangeSeq()===e?null:e),this.confirmSeq.set(null),this.message.set(``)}copyState(){return this.copyText(this.stateText())}copyPath(e){return this.copyText(e,`Copied the path ${e}.`)}copyDiff(e){return this.copyText(aJ(e.diff))}async copyText(e,t=`Copied.`){try{await navigator.clipboard.writeText(e),this.message.set(t)}catch{this.message.set(`The clipboard is not available here.`)}}isSkipped(e){return this.skippedSeqs().has(e)}canToggle(e){return e.source===`store`&&e.action!==void 0&&!!this.page()?.classic?.devtools&&(e.restorable||this.isSkipped(e.seq))}canAgain(e){return e.source===`store`&&e.action!==void 0}clearFilters(){this.filter.set(``),this.kind.set(null),this.focusFilter()}countText(e){let t=this.changeCount(e.id);return`${t} ${e.redux?t===1?`action`:`actions`:t===1?`change`:`changes`}`}changeCount(e){let t=this.liveStores().find(t=>t.id===e);return t?this.logOf(t).length:0}changesLabel=$q;static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},cJ=class e{state=b(sJ);busy=w(!1);focusLatest=w(!1);focusConfirm=w(null);focusReset=w(null);focusEventSeq=w(null);focusStateTree=()=>{};confirmReset=Q({source:()=>this.state.store()?.id,computation:()=>!1});dispatchType=w(``);dispatchPayload=w(``);payloadError=X(()=>Lq(this.dispatchPayload()).error??``);dispatchRequest=X(()=>{let e=this.dispatchType().trim(),{payload:t,error:n}=Lq(this.dispatchPayload());return!e||n?null:{type:`dispatch`,action:e,...t?{payload:t}:{}}});askRestore(e){this.state.confirmSeq.set(e),this.focusConfirm.set(`cancel`)}cancelRestore(e){e?.preventDefault(),this.state.confirmSeq.set(null),this.focusConfirm.set(`restore`)}async restore(e,t){let n=this.state.page();if(!n)return;this.busy.set(!0),this.focusLatest.set(!1);let r=!1;try{let i=await oT(this.state.rpc(),`request-ngrx-action`,{pageId:n.pageId,request:{type:`restore`,seq:e}});this.state.message.set(i?.error??i?.message??`Restored.`),r=t&&!i?.error&&!!i?.paused}catch{this.state.message.set(`Could not reach the page to restore the state.`)}finally{this.busy.set(!1),this.state.confirmSeq.set(null),this.focusLatest.set(r),r||this.focusStateTree()}}selectEvent(e){let t=this.state.selectedEventSeq()===e?null:e;this.state.selectedEventSeq.set(t),t!==null&&this.focusEventSeq.set(t)}async backToLatest(){let e=this.state.page();if(e){this.busy.set(!0);try{let t=await oT(this.state.rpc(),`request-ngrx-action`,{pageId:e.pageId,request:{type:`latest`}});this.focusLatest.set(!1),this.focusStateTree(),this.state.message.set(t?.error??t?.message??`Back on the latest state.`)}catch{this.state.message.set(`Could not reach the page to go back to the latest state.`)}finally{this.busy.set(!1)}}}askReset(){this.confirmReset.set(!0),this.focusReset.set(`cancel`)}cancelReset(e){e?.preventDefault(),this.confirmReset.set(!1),this.focusReset.set(`reset`)}async devtoolsOp(e){let t=this.state.page();if(!t||this.busy())return;let n=e.op===`reset`;this.busy.set(!0);try{let n=await oT(this.state.rpc(),`request-ngrx-action`,{pageId:t.pageId,request:{type:`devtools`,...e}});this.state.message.set(n?.error??n?.message??`Done.`)}catch{this.state.message.set(`Could not reach the page to change the Store DevTools history.`)}finally{this.busy.set(!1),n&&(this.confirmReset.set(!1),this.focusReset.set(`reset`))}}async dispatchAction(e){e.preventDefault();let t=this.dispatchRequest();t&&await this.send(t,`Could not reach the page to dispatch the action.`)}dispatchAgain(e){return this.send({type:`dispatch-again`,seq:e},`Could not reach the page to dispatch the action again.`)}async send(e,t){let n=this.state.page();if(!n||this.busy())return;let r=this.state.logSession();this.busy.set(!0);try{let t=await oT(this.state.rpc(),`request-ngrx-action`,{pageId:n.pageId,request:e});this.state.message.set(t?.error??t?.message??`Dispatched.`),t?.entry&&this.state.logSession()===r&&(this.state.selectedStoreId.set(`store`),this.state.selectedChangeSeq.set(t.entry.seq))}catch{this.state.message.set(t)}finally{this.busy.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},lJ=[[[``,`tab-action`,``]],[[``,`tab-diff`,``]]],uJ=[`[tab-action]`,`[tab-diff]`],dJ=(e,t)=>t.id,fJ=(e,t)=>t.path+e;function pJ(e,t){if(e&1){let e=z();L(0,`button`,5),H(`click`,function(){let t=x(e).$implicit;return S(U().select(t.id))}),G(1),R()}if(e&2){let e=t.$implicit,n=U();B(`id`,n.idPrefix()+`-tab-`+e.id),O(`aria-selected`,n.active()===e.id)(`aria-controls`,n.idPrefix()+`-panel-`+e.id)(`tabindex`,n.active()===e.id?0:-1),E(),q(` `,e.label,` `)}}function mJ(e,t){e&1&&(L(0,`p`,9),G(1,`The state did not change.`),R())}function hJ(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U().$implicit,t=U(3);E(),K(t.shortText(e.before))}}function gJ(e,t){e&1&&(L(0,`span`,13),G(1,`→`),R(),L(2,`span`,14),G(3,`became`),R())}function _J(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U().$implicit,t=U(3);E(),K(t.shortText(e.after))}}function vJ(e,t){if(e&1&&(L(0,`li`)(1,`code`,11),G(2),R(),L(3,`span`,12),G(4),R(),k(5,hJ,2,1,`code`),k(6,gJ,4,0),k(7,_J,2,1,`code`),R()),e&2){let e=t.$implicit;E(2),K(e.path),E(2),K(e.op),E(),A(e.op===`add`?-1:5),E(),A(e.op===`change`?6:-1),E(),A(e.op===`remove`?-1:7)}}function yJ(e,t){if(e&1&&(L(0,`p`,9),G(1),R()),e&2){let e=U(),t=U(2);E(),K(t.moreChanges(e.diffTruncated))}}function bJ(e,t){if(e&1&&(L(0,`p`,8),G(1),R(),k(2,mJ,2,0,`p`,9),L(3,`ul`,10),j(4,vJ,8,5,`li`,null,fJ),R(),k(6,yJ,2,1,`p`,9)),e&2){let e=t;E(),q(`All changes (`,e.diff.length+(e.diffTruncated??0),`)`),E(),A(e.diff.length?-1:2),E(2),M(e.diff),E(2),A(e.diffTruncated?6:-1)}}function xJ(e,t){if(e&1&&(L(0,`p`,6),G(1),R()),e&2){let e=U(2);E(),K(e.error())}}function SJ(e,t){if(e&1){let e=z();L(0,`button`,15),H(`click`,function(){return x(e),S(U(2).load())}),G(1,` Show all changes `),R()}e&2&&B(`disabled`,U(2).loading())}function CJ(e,t){if(e&1&&k(0,bJ,7,3)(1,xJ,2,1,`p`,6)(2,SJ,2,1,`button`,7),e&2){let e,t=U();A((e=t.detail())?0:t.error()?1:2,e)}}function wJ(e,t){e&1&&(L(0,`p`,3),G(1,`Reading the state…`),R())}function TJ(e,t){if(e&1){let e=z();L(0,`div`,4)(1,`p`),G(2),R(),L(3,`button`,16),H(`click`,function(){return x(e),S(U().load())}),G(4,`Retry`),R()()}if(e&2){let e=U();E(2),K(e.error())}}function EJ(e,t){if(e&1&&(L(0,`p`,3),G(1),R()),e&2){let e=U(2);E(),K(e.copied())}}function DJ(e,t){if(e&1){let e=z();L(0,`div`,17)(1,`div`,18)(2,`button`,19),H(`click`,function(){return x(e),S(U().showBefore.set(!1))}),G(3),R(),L(4,`button`,19),H(`click`,function(){return x(e),S(U().showBefore.set(!0))}),G(5),R()(),L(6,`button`,16),H(`click`,function(){return x(e),S(U().copy())}),G(7,` Copy `),R()(),L(8,`pre`,20),G(9),R(),L(10,`p`,21),G(11,`Secret-looking fields are redacted, and very large values are cut.`),R(),k(12,EJ,2,1,`p`,3)}if(e&2){let e=t,n=U();E(2),O(`aria-pressed`,!n.showBefore()),E(),q(` After #`,e.seq,` `),E(),O(`aria-pressed`,n.showBefore()),E(),q(` Before #`,e.seq,` `),E(),O(`aria-label`,`Copy the state `+(n.showBefore()?`before`:`after`)+` #`+e.seq),E(2),O(`aria-label`,n.stateLabel()),E(),K(n.stateText()),E(3),A(n.copied()?12:-1)}}var OJ=[{id:`action`,label:`Action`},{id:`diff`,label:`Diff`},{id:`state`,label:`State`}],kJ=class e{seq=$.required();diffTruncated=$(void 0);idPrefix=$.required();loader=$.required();loadDiff=$(!1);tabs=OJ;host=b(Rl);active=Q({source:this.seq,computation:()=>`diff`});detail=Q({source:this.seq,computation:()=>null});error=Q({source:this.seq,computation:()=>``});loading=Q({source:this.seq,computation:()=>!1});showBefore=w(!1);copied=w(``);truncated=X(()=>(this.diffTruncated()??0)>0);constructor(){T(()=>{this.loadDiff()&&(this.seq(),Z(()=>void this.load()))})}stateText=X(()=>{let e=this.detail();return e?aJ(this.showBefore()?e.before:e.after):``});stateLabel=X(()=>`State ${this.showBefore()?`before`:`after`} entry #${this.seq()}`);select(e){this.active.set(e),e===`state`&&!this.detail()&&!this.loading()&&this.load()}request=0;async load(){let e=this.seq(),t=++this.request;this.loading.set(!0),this.error.set(``);let n;try{n=await this.loader()(e)}catch{n={error:`The devtools server did not answer. Try again.`}}t===this.request&&e===this.seq()&&(this.loading.set(!1),n.ok&&n.detail?this.detail.set(n.detail):this.error.set(n.error??`The page sent no state for this entry.`))}onKey(e){let t=OJ.findIndex(e=>e.id===this.active()),n=e.key===`ArrowRight`?(t+1)%OJ.length:e.key===`ArrowLeft`?(t+OJ.length-1)%OJ.length:e.key===`Home`?0:e.key===`End`?OJ.length-1:-1;n<0||(e.preventDefault(),this.select(OJ[n].id),this.host.nativeElement.querySelector(`#${this.idPrefix()}-tab-${OJ[n].id}`)?.focus())}async copy(){try{await navigator.clipboard.writeText(this.stateText()),this.copied.set(`Copied the state.`)}catch{this.copied.set(`The clipboard is not available here.`)}}shortText(e){return oJ(e,80)}moreChanges(e){return Qq(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-entry-tabs`]],inputs:{seq:[1,`seq`],diffTruncated:[1,`diffTruncated`],idPrefix:[1,`idPrefix`],loader:[1,`loader`],loadDiff:[1,`loadDiff`]},ngContentSelectors:uJ,decls:12,vars:12,consts:[[`role`,`tablist`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,1,`tab`,3,`id`],[`role`,`tabpanel`,`tabindex`,`0`,1,`panel`,3,`id`,`hidden`],[`role`,`status`,1,`muted`],[`role`,`alert`,1,`error-box`],[`type`,`button`,`role`,`tab`,1,`tab`,3,`click`,`id`],[`role`,`alert`,1,`error-text`],[`type`,`button`,1,`btn`,3,`disabled`],[1,`sub`],[1,`muted`],[1,`all-diff`],[1,`path`],[1,`op`],[`aria-hidden`,`true`],[1,`visually-hidden`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,3,`click`],[1,`state-head`],[`role`,`group`,`aria-label`,`Which state to show`,1,`segmented`],[`type`,`button`,3,`click`],[`tabindex`,`0`,1,`state`],[1,`hint`]],template:function(e,t){if(e&1&&(Bg(lJ),L(0,`div`,0),H(`keydown`,function(e){return t.onKey(e)}),j(1,pJ,2,5,`button`,1,dJ),R(),L(3,`div`,2),Vg(4),R(),L(5,`div`,2),Vg(6,1),k(7,CJ,3,1),R(),L(8,`div`,2),k(9,wJ,2,0,`p`,3)(10,TJ,5,1,`div`,4)(11,DJ,13,8),R()),e&2){let e;O(`aria-label`,`Entry #`+t.seq()+` details`),E(),M(t.tabs),E(2),B(`id`,t.idPrefix()+`-panel-action`)(`hidden`,t.active()!==`action`),O(`aria-labelledby`,t.idPrefix()+`-tab-action`),E(2),B(`id`,t.idPrefix()+`-panel-diff`)(`hidden`,t.active()!==`diff`),O(`aria-labelledby`,t.idPrefix()+`-tab-diff`),E(2),A(t.truncated()||t.loadDiff()?7:-1),E(),B(`id`,t.idPrefix()+`-panel-state`)(`hidden`,t.active()!==`state`),O(`aria-labelledby`,t.idPrefix()+`-tab-state`),E(),A(t.loading()?9:t.error()?10:(e=t.detail())?11:-1,e)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+  margin-top: 10px;
+}
+
+.tabs[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.tab[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+.tab[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.tab[aria-selected=true][_ngcontent-%COMP%] {
+  border-bottom-color: var(--%NS%accent);
+  color: var(--%NS%text-strong);
+}
+
+.tab[_ngcontent-%COMP%]:focus-visible, 
+.panel[_ngcontent-%COMP%]:focus-visible, 
+.state[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.panel[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding-top: 8px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 12px 0 6px;
+}
+
+.all-diff[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  max-height: 320px;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+  font-size: 12px;
+}
+
+.all-diff[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.op[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.state-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.segmented[_ngcontent-%COMP%] {
+  display: inline-flex;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  overflow: hidden;
+}
+
+.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: none;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]    + button[_ngcontent-%COMP%] {
+  border-left: 1px solid var(--%NS%border-strong);
+}
+
+.segmented[_ngcontent-%COMP%]   button[aria-pressed=true][_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.segmented[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.state[_ngcontent-%COMP%] {
+  max-height: 360px;
+  margin: 0;
+  padding: 10px 12px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%], 
+.muted[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.error-text[_ngcontent-%COMP%], 
+.error-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%danger-text);
+}
+
+.visually-hidden[_ngcontent-%COMP%] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},AJ=[`cancelButton`],jJ=[`restoreButton`],MJ=e=>({selected:e}),NJ=(e,t)=>t.path;function PJ(e,t){if(e&1&&(P(0,`dt`),G(1,`Origin`),F(),P(2,`dd`),G(3),F()),e&2){let e=U(),t=Y(0);E(3),K(e.originText(t.origin))}}function FJ(e,t){if(e&1&&(P(0,`dt`),G(1,`Duration`),F(),P(2,`dd`),G(3),F()),e&2){let e=U(),t=Y(0);E(3),K(e.formatDuration(t.durationMs))}}function IJ(e,t){if(e&1&&(P(0,`app-source-link`,11),G(1),F()),e&2){let e=U().$implicit;N(`file`,e.file)(`line`,e.line),E(),R_(``,e.name?e.name+` `:``,`(`,e.file,`:`,e.line,`)`)}}function LJ(e,t){if(e&1&&(P(0,`code`),G(1),F()),e&2){let e=U().$implicit;E(),K(e.name)}}function RJ(e,t){if(e&1&&(P(0,`li`),k(1,IJ,2,5,`app-source-link`,11)(2,LJ,2,1,`code`),F()),e&2){let e=t.$implicit;E(),A(e.file?1:2)}}function zJ(e,t){if(e&1&&(P(0,`dt`),G(1,`Called from`),F(),P(2,`dd`)(3,`ol`,10),j(4,RJ,3,1,`li`,null,ug),F()()),e&2){let e=U(),t=Y(0);E(4),M(e.traceFrames(t.trace))}}function BJ(e,t){if(e&1&&Eg(0,6),e&2){U();let e=Gg(15),t=Y(0);N(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,av(2,MJ,t))}}function VJ(e,t){if(e&1&&(P(0,`dt`),G(1,`Action`),F(),P(2,`dd`)(3,`pre`,12),G(4),F()()),e&2){let e=U().selected,t=U();E(4),K(t.prettyText(e.action))}}function HJ(e,t){if(e&1&&(P(0,`dt`),G(1,`Arguments`),F(),P(2,`dd`)(3,`pre`,12),G(4),F()()),e&2){let e=U().selected,t=U();E(4),K(t.prettyText(e.args))}}function UJ(e,t){if(e&1&&(P(0,`dt`),G(1,`Payload`),F(),P(2,`dd`)(3,`pre`,12),G(4),F()()),e&2){let e=U().selected,t=U();E(4),K(t.prettyText(e.payload))}}function WJ(e,t){if(e&1&&(P(0,`pre`,12),G(1),F()),e&2){let e=U(),t=U(2);E(),K(t.prettyText(e.payload))}}function GJ(e,t){if(e&1&&(P(0,`dt`),G(1,`Caused by event`),F(),P(2,`dd`)(3,`code`,13),G(4),F(),k(5,WJ,2,1,`pre`,12),F()),e&2){let e=t;E(4),K(e.type),E(),A(e.payload===void 0?-1:5)}}function KJ(e,t){if(e&1&&(k(0,VJ,5,1),k(1,HJ,5,1),k(2,UJ,5,1),k(3,GJ,6,2)),e&2){let e,n=t.selected;A(n.action===void 0?-1:0),E(),A(n.args?.length?1:-1),E(),A(n.source===`event`&&n.payload!==void 0?2:-1),E(),A((e=n.causedByEvent)?3:-1,e)}}function qJ(e,t){if(e&1){let e=z();P(0,`button`,18),V(`click`,function(){x(e);let t=U().selected;return S(U().copyDiff(t))}),G(1,` Copy `),F()}if(e&2){let e=U().selected;O(`aria-label`,`Copy the state diff of #`+e.seq)}}function JJ(e,t){if(e&1&&(P(0,`code`,24),G(1),F()),e&2){let e=U().$implicit,t=U(3);E(),K(t.shortText(e.before))}}function YJ(e,t){e&1&&(P(0,`span`,26),G(1,`→`),F(),P(2,`span`,27),G(3,`became`),F())}function XJ(e,t){if(e&1&&(P(0,`code`,25),G(1),F()),e&2){let e=U().$implicit,t=U(3);E(),K(t.shortText(e.after))}}function ZJ(e,t){if(e&1&&(P(0,`li`)(1,`span`,21),G(2),F(),P(3,`code`,22),G(4),F(),P(5,`span`,23),k(6,JJ,2,1,`code`,24),k(7,YJ,4,0),k(8,XJ,2,1,`code`,25),F()()),e&2){let e=t.$implicit,n=U(3);p_(`diff-row `+e.op),E(2),K(n.opLabel(e.op)),E(2),K(e.path),E(2),A(e.op===`add`?-1:6),E(),A(e.op===`change`?7:-1),E(),A(e.op===`remove`?-1:8)}}function QJ(e,t){if(e&1&&(P(0,`p`,17),G(1),F()),e&2){let e=U(2).selected,t=U();E(),K(t.moreChanges(e.diffTruncated))}}function $J(e,t){if(e&1&&(P(0,`ul`,19),j(1,ZJ,9,7,`li`,20,NJ),F(),k(3,QJ,2,1,`p`,17)),e&2){let e=U().selected;E(),M(e.diff),E(2),A(e.diffTruncated?3:-1)}}function eY(e,t){e&1&&(P(0,`p`,17),G(1,`The state did not change.`),F())}function tY(e,t){if(e&1&&(P(0,`div`,14)(1,`div`,15),G(2,`State diff`),F(),k(3,qJ,2,1,`button`,16),F(),k(4,$J,4,1)(5,eY,2,0,`p`,17)),e&2){let e=t.selected;U();let n=Y(1);E(),O(`aria-level`,n+1),E(2),A(e.diff.length?3:-1),E(),A(e.diff.length?4:5)}}function nY(e,t){if(e&1&&(P(0,`dl`,28),Eg(1,6),F()),e&2){U(2);let e=Gg(15),t=Y(0);E(),N(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,av(2,MJ,t))}}function rY(e,t){if(e&1&&(k(0,nY,2,4,`dl`,28),Eg(1,6)),e&2){U();let e=Gg(17),t=Y(0);A(t.action===void 0?-1:0),E(),N(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,av(3,MJ,t))}}function iY(e,t){if(e&1&&(P(0,`dl`,5),Eg(1,6),F()),e&2){U(2);let e=Gg(15),t=Y(0);E(),N(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,av(2,MJ,t))}}function aY(e,t){e&1&&(P(0,`p`,17),G(1,` No action or arguments: a restore, or a patchState write outside a method. `),F())}function oY(e,t){if(e&1&&(P(0,`app-entry-tabs`,7)(1,`div`,29),k(2,iY,2,4,`dl`,5)(3,aY,2,0,`p`,17),F(),P(4,`div`,30),Eg(5,6),F()()),e&2){let e=U(),t=Gg(17),n=Y(0);N(`idPrefix`,Y(2)+`-`+n.seq)(`seq`,n.seq)(`diffTruncated`,n.diffTruncated)(`loader`,e.loadEntry),E(2),A(n.action!==void 0||n.args?.length||n.causedByEvent?2:3),E(3),N(`ngTemplateOutlet`,t)(`ngTemplateOutletContext`,av(7,MJ,n))}}function sY(e,t){e&1&&G(0),e&2&&(U(2),q(` Store DevTools jumps the app state to the state right after action #`,Y(0).seq,`. Until you go back to the latest state, new actions are logged but do not change the state. `))}function cY(e,t){if(e&1&&G(0),e&2){U(3);let e=Y(0);J(` This sets every state key of `,t.label,` back to its value right after change #`,e.seq,`. Components that read the store update at once, and a new "Restore" entry is added to the log. `)}}function lY(e,t){e&1&&G(0),e&2&&(U(3),q(` This sets every state key of the store back to its value right after change #`,Y(0).seq,`. Components that read the store update at once, and a new "Restore" entry is added to the log. `))}function uY(e,t){if(e&1&&k(0,cY,1,2)(1,lY,1,1),e&2){let e;A((e=U(2).store())?0:1,e)}}function dY(e,t){if(e&1){let e=z();P(0,`div`,31),V(`keydown.escape`,function(t){return x(e),S(U().cancelRestore(t))}),P(1,`p`,32),k(2,sY,1,1)(3,uY,2,1),F(),P(4,`div`,33)(5,`button`,34),V(`click`,function(){x(e);let t=U(),n=Y(0);return S(t.restore(n.seq,n.source===`store`))}),G(6,` Restore `),F(),P(7,`button`,35,2),V(`click`,function(){return x(e),S(U().cancelRestore())}),G(9,`Cancel`),F()()()}if(e&2){let e=U(),t=Y(0),n=Y(2);O(`aria-labelledby`,n+`-confirm-text`),E(),N(`id`,n+`-confirm-text`),E(),A(t.source===`store`?2:3),E(3),N(`disabled`,e.busy())}}function fY(e,t){if(e&1){let e=z();P(0,`button`,40),V(`click`,function(){x(e);let t=U(2),n=Y(0);return S(t.devtoolsOp({op:`toggle`,seq:n.seq}))}),G(1),F()}if(e&2){let e=U(2),t=Y(0),n=Y(2);N(`disabled`,e.busy()||!e.canRestore()),O(`aria-describedby`,e.canRestore()?null:n+`-writes-off`),E(),q(` `,e.isSkipped(t.seq)?`Include this action`:`Skip this action`,` `)}}function pY(e,t){if(e&1){let e=z();P(0,`button`,41,3),V(`click`,function(){x(e);let t=U(2),n=Y(0);return S(t.askRestore(n.seq))}),G(2,` Restore this state `),F()}if(e&2){let e=U(2),t=Y(2);N(`disabled`,!e.canRestore()),O(`aria-describedby`,e.canRestore()?null:t+`-writes-off`)}}function mY(e,t){if(e&1){let e=z();P(0,`button`,40),V(`click`,function(){x(e);let t=U(2),n=Y(0);return S(t.dispatchAgain(n.seq))}),G(1,` Dispatch again `),F()}if(e&2){let e=U(2),t=Y(2);N(`disabled`,e.busy()||!e.canRestore()),O(`aria-describedby`,e.canRestore()?null:t+`-writes-off`)}}function hY(e,t){if(e&1&&(P(0,`p`,39),G(1),F()),e&2){let e=U(2);N(`id`,Y(2)+`-writes-off`),E(),K(e.restoreOff)}}function gY(e,t){if(e&1&&(P(0,`div`,36),k(1,fY,2,3,`button`,37),k(2,pY,3,2,`button`,38),k(3,mY,2,2,`button`,37),F(),k(4,hY,2,2,`p`,39)),e&2){let e=U(),t=Y(0);E(),A(e.canToggle(t)?1:-1),E(),A(t.restorable?2:-1),E(),A(e.canAgain(t)?3:-1),E(),A(e.canRestore()?-1:4)}}function _Y(e,t){e&1&&(P(0,`p`,9),G(1,` This store reports through its Redux DevTools integration, which the panel reads but does not write to, so its state cannot be restored from here. `),F())}function vY(e,t){e&1&&(G(0,` Store DevTools no longer holds this action, so this state cannot be restored. It was dropped past `),P(1,`code`),G(2,`maxAge`),F(),G(3,`, or the Store DevTools history was committed, reset or imported. `))}function yY(e,t){e&1&&(G(0,` Store DevTools never recorded this action, so this state cannot be restored. An `),P(1,`code`),G(2,`actionsBlocklist`),F(),G(3,`, `),P(4,`code`),G(5,`actionsSafelist`),F(),G(6,` or `),P(7,`code`),G(8,`predicate`),F(),G(9,` option filtered it out, or recording was paused. `))}function bY(e,t){e&1&&(G(0,` Time travel for @ngrx/store needs `),P(1,`code`),G(2,`provideStoreDevtools()`),F(),G(3,`. Without it, entries cannot be restored. `))}function xY(e,t){if(e&1&&(P(0,`p`,9),k(1,vY,4,0)(2,yY,10,0)(3,bY,4,0),F()),e&2){U();let e=Y(0);E(),A(e.unrestorable===`dropped`?1:e.unrestorable===`not-recorded`?2:3)}}var SY=class e{state=b(sJ);actions=b(cJ);cancelButton=Ov(`cancelButton`);restoreButton=Ov(`restoreButton`);entry=$.required({alias:`selected`});level=$.required({alias:`headingLevel`});prefix=$.required({alias:`idPrefix`});store=this.state.store;confirmSeq=this.state.confirmSeq;canRestore=this.state.canRestore;restoreOff=this.state.restoreOff;loadEntry=this.state.loadEntry;busy=this.actions.busy;formatTime=aD;formatDuration=Hq;originText=Bq;opLabel=Vq;moreChanges=Qq;constructor(){T(()=>{let e=this.actions.focusConfirm(),t=e===`cancel`?this.cancelButton():this.restoreButton();e&&t&&(this.actions.focusConfirm.set(null),t.nativeElement.focus())})}traceFrames(e){return e.map(Xq)}prettyText(e){return aJ(e)}shortText(e){return oJ(e)}copyDiff(e){return this.state.copyDiff(e)}isSkipped(e){return this.state.isSkipped(e)}canToggle(e){return this.state.canToggle(e)}canAgain(e){return this.state.canAgain(e)}askRestore(e){this.actions.askRestore(e)}cancelRestore(e){this.actions.cancelRestore(e)}restore(e,t){return this.actions.restore(e,t)}devtoolsOp(e){return this.actions.devtoolsOp(e)}dispatchAgain(e){return this.actions.dispatchAgain(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appStoreEntry`,``]],viewQuery:function(e,t){e&1&&Ug(t.cancelButton,AJ,5)(t.restoreButton,jJ,5),e&2&&Wg(2)},hostVars:1,hostBindings:function(e,t){e&2&&O(`aria-labelledby`,t.prefix()+`-entry-heading`)},inputs:{entry:[1,`selected`,`entry`],level:[1,`headingLevel`,`level`],prefix:[1,`idPrefix`,`prefix`]},decls:24,vars:17,consts:[[`actionRowsTpl`,``],[`diffTpl`,``],[`cancelButton`,``],[`restoreButton`,``],[`role`,`heading`,1,`entry-heading`,3,`id`],[1,`kv`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[3,`idPrefix`,`seq`,`diffTruncated`,`loader`],[`role`,`group`,1,`confirm`],[1,`hint`,`small`],[1,`trace`],[3,`file`,`line`],[1,`code`],[1,`mono`],[1,`sub-head`],[`role`,`heading`,1,`sub`],[`type`,`button`,1,`btn`,`copy`],[1,`muted`],[`type`,`button`,1,`btn`,`copy`,3,`click`],[1,`diff`],[3,`class`],[1,`op`],[1,`path`],[1,`values`],[1,`before`],[1,`after`],[`aria-hidden`,`true`,1,`arrow`],[1,`visually-hidden`],[1,`kv`,`redux-action`],[`tab-action`,``],[`tab-diff`,``],[`role`,`group`,1,`confirm`,3,`keydown.escape`],[3,`id`],[1,`actions`],[`type`,`button`,1,`btn`,`primary`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,3,`click`],[1,`entry-actions`],[`type`,`button`,1,`btn`,3,`disabled`],[`type`,`button`,1,`btn`,`restore`,3,`disabled`],[1,`hint`,`small`,3,`id`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,`restore`,3,`click`,`disabled`]],template:function(e,t){if(e&1&&(G_(0)(1)(2),P(3,`div`,4),G(4),F(),P(5,`dl`,5)(6,`dt`),G(7,`Time`),F(),P(8,`dd`),G(9),F(),k(10,PJ,4,1),k(11,FJ,4,1),k(12,zJ,6,0),k(13,BJ,1,4,`ng-container`,6),F(),Hh(14,KJ,4,4,`ng-template`,null,0,mv)(16,tY,6,3,`ng-template`,null,1,mv),k(18,rY,2,5)(19,oY,6,9,`app-entry-tabs`,7),k(20,dY,10,4,`div`,8),k(21,gY,5,4),k(22,_Y,2,0,`p`,9),k(23,xY,4,1,`p`,9)),e&2){let e=K_(t.entry());E();let n=K_(t.level());E();let r=K_(t.prefix());E(),N(`id`,r+`-entry-heading`),O(`aria-level`,n),E(),J(` #`,e.seq,` `,e.type,`
+`),E(5),K(t.formatTime(e.timestamp)),E(),A(e.origin?10:-1),E(),A(e.durationMs===void 0?-1:11),E(),A(e.trace?.length?12:-1),E(),A(e.source===`event`?13:-1),E(5),A(e.source===`redux`?18:e.source===`event`?-1:19),E(2),A(e.restorable&&t.confirmSeq()===e.seq?20:-1),E(),A(t.confirmSeq()!==e.seq&&(e.restorable||t.canAgain(e)||t.canToggle(e))?21:-1),E(),A(e.source===`redux`?22:-1),E(),A(!e.restorable&&e.source===`store`?23:-1)}},dependencies:[kJ,uy,aM],styles:[`.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.live-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  overflow: hidden;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+ul[_ngcontent-%COMP%] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.store-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+}
+
+.store-item[_ngcontent-%COMP%], 
+.log-item[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.store-item[_ngcontent-%COMP%]:hover, 
+.log-item[_ngcontent-%COMP%]:hover, 
+.event-item[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.store-item[_ngcontent-%COMP%]:focus-visible, 
+.log-item[_ngcontent-%COMP%]:focus-visible, 
+.event-item[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.store-item.selected[_ngcontent-%COMP%], 
+.log-item.selected[_ngcontent-%COMP%], 
+.event-item.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.store-top[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.store-name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.store-meta[_ngcontent-%COMP%], 
+.log-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+pre[_ngcontent-%COMP%] {
+  margin: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--%NS%text);
+}
+
+.tree[_ngcontent-%COMP%], 
+.code[_ngcontent-%COMP%] {
+  max-height: 360px;
+  overflow: auto;
+  padding: 10px 12px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.code[_ngcontent-%COMP%] {
+  max-height: 220px;
+}
+
+.tree[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.kv[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 6px 14px;
+  margin: 0;
+}
+
+
+.kv.redux-action[_ngcontent-%COMP%] {
+  margin-top: 10px;
+}
+
+.kv[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.kv[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.entry[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  animation: enter 0.25s var(--%NS%ease) both;
+}
+
+[_nghost-%COMP%]   .entry-heading[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.diff[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+}
+
+.diff-row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
+  gap: 8px;
+  align-items: baseline;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+}
+
+.op[_ngcontent-%COMP%] {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--%NS%text-2);
+}
+
+.diff-row.add[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.diff-row.remove[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.values[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.before[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-decoration: line-through;
+}
+
+.after[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.arrow[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.confirm[_ngcontent-%COMP%] {
+  margin-top: 14px;
+  padding: 12px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%accent-soft);
+}
+
+.confirm[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+  line-height: 1.5;
+}
+
+.actions[_ngcontent-%COMP%], 
+.entry-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.entry-actions[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.entry-actions[_ngcontent-%COMP%]   .btn.restore[_ngcontent-%COMP%] {
+  margin-top: 0;
+}
+
+.history[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin-top: 16px;
+}
+
+.history[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+}
+
+.history[_ngcontent-%COMP%]   .actions[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: 280px;
+  overflow: auto;
+  margin-top: 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.stats[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.stats[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: baseline;
+}
+
+.stats[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.stats[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  font-weight: 400;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.stats[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.loop[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 5px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 10.5px;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.trace[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding-left: 18px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+@media (max-width: 480px) {
+  .kv[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}`]})},CY=[`eventsList`],wY=[`eventDetailHeading`],TY=(e,t)=>t.entry.seq;function EY(e,t){if(e&1&&(P(0,`code`,12),G(1),F()),e&2){U();let e=Y(0),t=U();N(`title`,t.prettyText(e.payload)),E(),K(t.shortText(e.payload))}}function DY(e,t){if(e&1){let e=z();G_(0),P(1,`li`)(2,`button`,9),V(`click`,function(){x(e);let t=Y(0);return S(U().selectEvent(t.seq))}),I(3,`span`,10),P(4,`span`,11),G(5),F(),k(6,EY,2,2,`code`,12),P(7,`span`,13),G(8),F()()()}if(e&2){let e=t.$implicit,n=U(),r=K_(e.entry);E(),O(`data-vindex`,e.index)(`aria-setsize`,n.eventWindow.enabled()?n.pageEvents().length:null)(`aria-posinset`,n.eventWindow.enabled()?e.index+1:null),E(),W(`selected`,r.seq===n.selectedEventSeq()),O(`aria-pressed`,r.seq===n.selectedEventSeq())(`aria-controls`,r.seq===n.selectedEventSeq()?`ngrx-event-detail`:null),E(),f_(`background`,n.kindColor(`event`)),E(),N(`title`,r.eventType??r.type),E(),K(r.eventType??r.type),E(),A(r.payload===void 0?-1:6),E(2),K(n.formatTime(r.timestamp))}}function OY(e,t){e&1&&(P(0,`li`,7),G(1,`No events match this filter.`),F())}function kY(e,t){e&1&&(P(0,`div`,8,1),I(2,`section`,14),F()),e&2&&(E(2),N(`selected`,t)(`headingLevel`,3)(`idPrefix`,`ngrx-event`))}var AY=class e{state=b(sJ);actions=b(cJ);eventsList=Ov(`eventsList`);eventDetailHeading=Ov(`eventDetailHeading`);pageEvents=this.state.pageEvents;selectedEventSeq=this.state.selectedEventSeq;eventEntry=this.state.eventEntry;kindColor=Rq;formatTime=aD;eventWindow=new XN({count:X(()=>this.pageEvents().length),estimate:36});shownEvents=X(()=>Wq(this.pageEvents(),this.eventWindow));constructor(){T(()=>{let e=this.eventsList()?.nativeElement;e&&this.eventWindow.attach(e)}),Fv(()=>{let e=this.actions.focusEventSeq(),t=this.eventDetailHeading();e!==null&&t&&(this.actions.focusEventSeq.set(null),t.nativeElement.focus())})}selectEvent(e){this.actions.selectEvent(e)}prettyText(e){return aJ(e)}shortText(e){return oJ(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appStoreEvents`,``]],viewQuery:function(e,t){e&1&&Ug(t.eventsList,CY,5)(t.eventDetailHeading,wY,5),e&2&&Wg(2)},decls:13,vars:8,consts:[[`eventsList`,``],[`eventDetailHeading`,``],[1,`section-head`],[`id`,`ngrx-events-heading`],[1,`pill`],[1,`intro`],[`appRovingList`,`button.event-item`,`aria-label`,`Dispatched events`,1,`events-list`,3,`rovingWindow`],[1,`muted`,`pad`],[`id`,`ngrx-event-detail`,`tabindex`,`-1`,1,`event-detail-focus`],[`type`,`button`,1,`event-item`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`event-type`,`mono`,3,`title`],[1,`event-payload`,3,`title`],[1,`event-time`],[`appStoreEntry`,``,1,`entry`,3,`selected`,`headingLevel`,`idPrefix`]],template:function(e,t){if(e&1&&(P(0,`div`,2)(1,`h2`,3),G(2,`Events`),F(),P(3,`span`,4),G(4),F()(),P(5,`p`,5),G(6,` Events dispatched through @ngrx/signals/events, across every store on this page.
+`),F(),P(7,`ul`,6,0),j(9,DY,9,14,`li`,null,TY,!1,OY,2,0,`li`,7),F(),k(12,kY,3,3,`div`,8)),e&2){let e;E(4),K(t.pageEvents().length),E(3),f_(`padding-top`,t.eventWindow.enabled()?6+t.eventWindow.padTop():null,`px`)(`padding-bottom`,t.eventWindow.enabled()?6+t.eventWindow.padBottom():null,`px`),N(`rovingWindow`,t.eventWindow),E(2),M(t.shownEvents()),E(3),A((e=t.eventEntry())?12:-1,e)}},dependencies:[XV,SY],styles:[`.intro[_ngcontent-%COMP%] {
+  max-width: 720px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.live-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  overflow: hidden;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+ul[_ngcontent-%COMP%] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.store-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+}
+
+.store-item[_ngcontent-%COMP%], 
+.log-item[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.store-item[_ngcontent-%COMP%]:hover, 
+.log-item[_ngcontent-%COMP%]:hover, 
+.event-item[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.store-item[_ngcontent-%COMP%]:focus-visible, 
+.log-item[_ngcontent-%COMP%]:focus-visible, 
+.event-item[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.store-item.selected[_ngcontent-%COMP%], 
+.log-item.selected[_ngcontent-%COMP%], 
+.event-item.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.store-top[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.store-name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.store-meta[_ngcontent-%COMP%], 
+.log-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.events-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 260px;
+  overflow: auto;
+  padding: 6px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.event-item[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  width: 100%;
+  min-width: 0;
+  padding: 7px 10px;
+  border: none;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.event-type[_ngcontent-%COMP%] {
+  flex: none;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+  font-size: 12.5px;
+}
+
+.event-payload[_ngcontent-%COMP%] {
+  flex: 1 1 160px;
+  min-width: 0;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--%NS%text-2);
+}
+
+.event-time[_ngcontent-%COMP%] {
+  flex: none;
+  margin-left: auto;
+  color: var(--%NS%text-3);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.entry[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  animation: enter 0.25s var(--%NS%ease) both;
+}
+
+.entry[_ngcontent-%COMP%]   .entry-heading[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.diff[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+}
+
+.diff-row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
+  gap: 8px;
+  align-items: baseline;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+}
+
+.op[_ngcontent-%COMP%] {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--%NS%text-2);
+}
+
+.diff-row.add[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.diff-row.remove[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.values[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.before[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-decoration: line-through;
+}
+
+.after[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.arrow[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.history[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin-top: 16px;
+}
+
+.history[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+}
+
+.history[_ngcontent-%COMP%]   .actions[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: 280px;
+  overflow: auto;
+  margin-top: 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.stats[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.stats[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: baseline;
+}
+
+.stats[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.stats[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  font-weight: 400;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.stats[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.loop[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 5px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 10.5px;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}`]})},jY=[`generateLive`],MY=[`generateImported`],NY=[`importButton`],PY=[`testHeading`],FY=(e,t)=>t.seq;function IY(e,t){if(e&1){let e=z();P(0,`div`,8)(1,`div`,18)(2,`span`,19),G(3,`From`),F(),P(4,`app-select`,20),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.from,t)||(n.from=t),S(t)}),F()(),P(5,`div`,18)(6,`span`,21),G(7,`To`),F(),P(8,`app-select`,22),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.to,t)||(n.to=t),S(t)}),F()()()}if(e&2){let e=U();E(4),N(`options`,e.options()),V_(`value`,e.from),E(4),N(`options`,e.options()),V_(`value`,e.to)}}function LY(e,t){e&1&&(P(0,`p`,9),G(1,`No recorded changes on this store yet, so there is nothing to export.`),F())}function RY(e,t){if(e&1&&(P(0,`p`,15),G(1),F()),e&2){let e=U();E(),K(e.error())}}function zY(e,t){if(e&1&&(P(0,`li`),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function BY(e,t){if(e&1&&(P(0,`ul`,25),j(1,zY,2,1,`li`,null,dg),F()),e&2){let e=U();E(),M(e.notes)}}function VY(e,t){if(e&1){let e=z();P(0,`div`,16)(1,`div`,23)(2,`h5`,24,3),G(4),F(),P(5,`div`,10)(6,`button`,12),V(`click`,function(){return x(e),S(U().copyTest())}),G(7,`Copy`),F(),P(8,`button`,12),V(`click`,function(){return x(e),S(U().downloadTest())}),G(9,`Download`),F(),P(10,`button`,12),V(`click`,function(){return x(e),S(U().closeTest())}),G(11,`Close`),F()()(),k(12,BY,3,0,`ul`,25),P(13,`pre`,26),G(14),F()()}if(e&2){let e=t;E(4),q(` Generated test (`,e.framework,`) `),E(8),A(e.notes.length?12:-1),E(),O(`aria-label`,`Test code, `+e.file),E(),K(e.code)}}function HY(e,t){e&1&&(P(0,`p`,9),G(1),F()),e&2&&(E(),q(`Recorded on `,t))}function UY(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,31),V(`click`,function(){let t=x(e).$implicit;return S(U(2).importedSeq.set(t.seq))}),P(2,`span`,32),G(3),F(),P(4,`span`,33),G(5),F()()()}if(e&2){let e=t.$implicit,n=U(2);E(),O(`aria-pressed`,e.seq===n.importedSeq()),E(2),q(`#`,e.seq),E(2),K(e.type)}}function WY(e,t){if(e&1&&(P(0,`p`,35),G(1,`Action`),F(),P(2,`pre`,36),G(3),F()),e&2){let e=U(),t=U(2);E(3),K(t.prettyText(e.action))}}function GY(e,t){if(e&1&&(P(0,`p`,35),G(1,`Arguments`),F(),P(2,`pre`,36),G(3),F()),e&2){let e=U(),t=U(2);E(3),K(t.prettyText(e.args))}}function KY(e,t){e&1&&(P(0,`p`,9),G(1,`No action or arguments were recorded for this entry.`),F())}function qY(e,t){if(e&1&&(P(0,`app-entry-tabs`,30)(1,`div`,34),k(2,WY,4,1),k(3,GY,4,1),k(4,KY,2,0,`p`,9),F()()),e&2){let e=t,n=U(2);N(`seq`,e.seq)(`loadDiff`,!0)(`loader`,n.importedLoader),E(2),A(e.action===void 0?-1:2),E(),A(e.args?.length?3:-1),E(),A(e.action===void 0&&!e.args?.length?4:-1)}}function JY(e,t){if(e&1){let e=z();P(0,`div`,17)(1,`div`,23)(2,`h5`,27),G(3),P(4,`span`,28),G(5),F()(),P(6,`div`,10)(7,`button`,12,4),V(`click`,function(){let t=x(e);return S(U().generate(t.id))}),G(9,` Generate test `),F(),P(10,`button`,12),V(`click`,function(){return x(e),S(U().closeImported())}),G(11,`Close`),F()()(),k(12,HY,2,1,`p`,9),P(13,`ul`,29),j(14,UY,6,3,`li`,null,FY),F(),k(16,qY,5,6,`app-entry-tabs`,30),F()}if(e&2){let e,n,r=t,i=U();E(3),q(` Imported: `,r.store.name??r.store.id,` `),E(2),K(r.entries.length),E(2),O(`aria-disabled`,i.busy()?`true`:null),E(5),A((e=r.page?.url)?12:-1,e),E(2),M(r.entries),E(2),A((n=i.importedEntry())?16:-1,n)}}function YY(e,t,n){let r=new Blob([e],{type:n}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=t,document.body.append(a),a.click(),a.remove(),setTimeout(()=>URL.revokeObjectURL(i),0)}var XY=class e{rpc=$(null);pageId=$(null);storeId=$(null);entries=$([]);framework=`Vitest`;options=X(()=>this.entries().map(e=>({value:String(e.seq),label:`#${e.seq} ${e.type}`})));from=Q({source:this.entries,computation:(e,t)=>t?.value&&e.some(e=>String(e.seq)===t.value)?t.value:e[0]?String(e[0].seq):null});to=Q({source:this.entries,computation:(e,t)=>{let n=e.at(-1),r=t?.value&&e.some(e=>String(e.seq)===t.value),i=t&&t.value===String(t.source.at(-1)?.seq);return r&&!i?t.value:n?String(n.seq):null}});injector=b(Es);generateLive=Ov(`generateLive`);generateImported=Ov(`generateImported`);importButton=Ov(`importButton`);testHeading=Ov(`testHeading`);testFrom=`live`;busy=w(!1);message=w(``);error=w(``);test=w(null);imported=w(null);importedSeq=w(null);canExport=X(()=>!!this.rpc()&&!!this.pageId()&&!!this.storeId()&&this.entries().length>0);importedEntry=X(()=>{let e=this.imported(),t=this.importedSeq();return e?.entries.find(e=>e.seq===t)??null});range(){let e=Number(this.from()),t=Number(this.to()),[n,r]=e<=t?[e,t]:[t,e];return{storeId:this.storeId()??void 0,...Number.isFinite(n)?{from:n}:{},...Number.isFinite(r)?{to:r}:{}}}async ask(e){try{return await oT(this.rpc(),`request-ngrx-history`,e)??{error:`The devtools server is not connected.`}}catch{return{error:`The devtools server did not answer. Try again.`}}}importedLoader=e=>{let t=this.imported()?.id;return t?this.ask({session:t,request:{type:`entry`,seq:e}}):Promise.resolve({error:`No session is imported.`})};focusAfterRender(e){Sd(()=>e()?.nativeElement.focus(),{injector:this.injector})}async exportLive(){if(this.busy()||!this.canExport())return;this.busy.set(!0),this.error.set(``),this.message.set(``);let e=await this.ask({pageId:this.pageId(),request:{type:`export`,...this.range()}});if(this.busy.set(!1),!e.ok||!e.session){this.error.set(e.error??`Nothing was exported.`);return}YY(JSON.stringify(e.session,null,2),`ngrx-session-${this.storeId()}.json`,`application/json`),this.message.set(e.message??`Exported the session.`)}async generate(e){if(this.busy()||!e&&!this.canExport())return;this.busy.set(!0),this.error.set(``),this.message.set(``);let t=await this.ask(e?{session:e,request:{type:`test`}}:{pageId:this.pageId(),request:{type:`test`,...this.range()}});if(this.busy.set(!1),!t.ok||!t.test){this.error.set(t.error??`No test was generated.`);return}this.test.set(t.test),this.testFrom=e?`imported`:`live`,this.message.set(`Generated ${t.test.file}.`),this.focusAfterRender(()=>this.testHeading())}pickFile(e){this.busy()||e.click()}async read(e){let t=e.files?.[0];if(e.value=``,!t)return;if(this.error.set(``),this.message.set(``),t.size>4e6){this.error.set(`The file is larger than 4 MB, so it was not imported.`);return}this.busy.set(!0);let n;try{n=await oT(this.rpc(),`import-ngrx-session`,{session:await t.text()})}catch{n={error:`The devtools server did not answer. Try again.`}}if(this.busy.set(!1),!n||!(`id`in n)||!n.ok){this.error.set(`Not imported: ${n?.error??`the devtools server is not connected.`}`);return}this.imported.set(n),this.importedSeq.set(n.entries[0]?.seq??null),this.message.set(`Imported ${n.entries.length} entries from ${t.name}.`)}closeImported(){this.imported.set(null),this.importedSeq.set(null),this.testFrom===`imported`&&(this.testFrom=`live`),this.focusAfterRender(()=>this.importButton())}closeTest(){this.test.set(null);let e=this.testFrom;this.focusAfterRender(()=>{let t=this.generateLive(),n=this.generateImported();return e===`imported`&&n?n:t&&!t.nativeElement.disabled?t:this.importButton()})}async copyTest(){let e=this.test();if(e)try{await navigator.clipboard.writeText(e.code),this.message.set(`Copied the test.`)}catch{this.message.set(`The clipboard is not available here.`)}}downloadTest(){let e=this.test();e&&YY(e.code,e.file,`text/plain`)}prettyText(e){return aJ(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-store-session`]],viewQuery:function(e,t){e&1&&Ug(t.generateLive,jY,5)(t.generateImported,MY,5)(t.importButton,NY,5)(t.testHeading,PY,5),e&2&&Wg(4)},inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`],storeId:[1,`storeId`],entries:[1,`entries`]},decls:23,vars:11,consts:[[`generateLive`,``],[`importButton`,``],[`file`,``],[`testHeading`,``],[`generateImported`,``],[`aria-labelledby`,`ngrx-session-heading`,1,`session`],[`id`,`ngrx-session-heading`],[1,`intro`],[1,`range`],[1,`muted`],[1,`actions`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,3,`click`],[`type`,`file`,`accept`,`.json,application/json`,`hidden`,``,`aria-label`,`Session file`,3,`change`],[`role`,`status`,1,`session-message`],[`role`,`alert`,1,`error`],[`role`,`region`,`aria-labelledby`,`ngrx-test-heading`,1,`test`],[`role`,`region`,`aria-labelledby`,`ngrx-imported-heading`,1,`imported`],[1,`field`],[`id`,`ngrx-range-from`,1,`label`],[`labelledBy`,`ngrx-range-from`,3,`valueChange`,`options`,`value`],[`id`,`ngrx-range-to`,1,`label`],[`labelledBy`,`ngrx-range-to`,3,`valueChange`,`options`,`value`],[1,`head`],[`id`,`ngrx-test-heading`,`tabindex`,`-1`],[1,`notes`],[`tabindex`,`0`,1,`code`],[`id`,`ngrx-imported-heading`],[1,`pill`],[`aria-label`,`Imported entries`,1,`entries`],[`idPrefix`,`ngrx-imported`,3,`seq`,`loadDiff`,`loader`],[`type`,`button`,1,`entry`,3,`click`],[1,`seq`],[1,`type`],[`tab-action`,``],[1,`label`],[1,`code`]],template:function(e,t){if(e&1){let e=z();P(0,`section`,5)(1,`h4`,6),G(2,`Session`),F(),P(3,`p`,7),G(4),F(),k(5,IY,9,4,`div`,8)(6,LY,2,0,`p`,9),P(7,`div`,10)(8,`button`,11),V(`click`,function(){return t.exportLive()}),G(9,` Export session `),F(),P(10,`button`,11,0),V(`click`,function(){return t.generate(null)}),G(12,` Generate test `),F(),P(13,`button`,12,1),V(`click`,function(){x(e);let n=Gg(17);return S(t.pickFile(n))}),G(15,` Import session `),F(),P(16,`input`,13,2),V(`change`,function(){x(e);let n=Gg(17);return S(t.read(n))}),F()(),P(18,`p`,14),G(19),F(),k(20,RY,2,1,`p`,15),k(21,VY,15,4,`div`,16),k(22,JY,17,5,`div`,17),F()}if(e&2){let e,n;E(4),q(` Export a range of this store's log with the state it produced, import a session file to read it here, or turn the range into a `,t.framework,` spec. Values are redacted like the rest of the page. `),E(),A(t.options().length?5:6),E(3),N(`disabled`,!t.canExport()),O(`aria-disabled`,t.busy()?`true`:null),E(2),N(`disabled`,!t.canExport()),O(`aria-disabled`,t.busy()?`true`:null),E(3),O(`aria-disabled`,t.busy()?`true`:null),E(6),K(t.message()),E(),A(t.error()?20:-1),E(),A((e=t.test())?21:-1,e),E(),A((n=t.imported())?22:-1,n)}},dependencies:[JE,kJ],styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.session[_ngcontent-%COMP%] {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+h4[_ngcontent-%COMP%], 
+h5[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+}
+
+h5[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.intro[_ngcontent-%COMP%], 
+.muted[_ngcontent-%COMP%] {
+  margin: 6px 0 10px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.range[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+}
+
+.field[_ngcontent-%COMP%] {
+  display: grid;
+  flex: 1 1 160px;
+  gap: 4px;
+  min-width: 0;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.head[_ngcontent-%COMP%]   .actions[_ngcontent-%COMP%] {
+  margin-top: 0;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled, 
+.btn[aria-disabled=true][_ngcontent-%COMP%] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+h5[tabindex="-1"][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.session-message[_ngcontent-%COMP%] {
+  min-height: 1em;
+  margin: 8px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.error[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  color: var(--%NS%danger-text);
+  font-size: 12px;
+}
+
+.test[_ngcontent-%COMP%], 
+.imported[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  padding: 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.notes[_ngcontent-%COMP%] {
+  margin: 8px 0;
+  padding-left: 18px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.code[_ngcontent-%COMP%] {
+  max-height: 360px;
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  white-space: pre;
+}
+
+.code[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+}
+
+.entries[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  max-height: 240px;
+  margin: 8px 0 0;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+}
+
+.entry[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  min-height: var(--%NS%control-h);
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--%NS%radius-sm);
+  background: none;
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.entry[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.entry[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+}
+
+.entry[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.seq[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.type[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},ZY=[`box`],QY=(e,t)=>t.path;function $Y(e,t){if(e&1&&(P(0,`span`,4),G(1),F()),e&2){let e=U();E(),J(``,e.matches(),` `,e.matches()===1?`match`:`matches`)}}function eX(e,t){if(e&1&&(P(0,`p`,6),G(1),F()),e&2){let e=U();E(),K(e.query()?`No key or value matches.`:`The state is empty.`)}}function tX(e,t){if(e&1){let e=z();P(0,`button`,15),V(`click`,function(){x(e);let t=U().$implicit;return S(U().toggle(t))}),P(1,`span`,16),G(2),F(),P(3,`span`,17),G(4),F(),P(5,`span`,18),G(6),F()()}if(e&2){let e=U().$implicit;O(`aria-expanded`,e.open)(`aria-label`,e.key+` `+e.text),E(2),K(e.open?`▾`:`▸`),E(2),K(e.key),E(2),K(e.text)}}function nX(e,t){if(e&1&&(P(0,`span`,11)(1,`span`,17),G(2),P(3,`span`,19),G(4,`:`),F()(),P(5,`code`,20),G(6),F()()),e&2){let e=U().$implicit;E(2),K(e.key),E(4),K(e.text)}}function rX(e,t){e&1&&(P(0,`span`,12),G(1,`changed`),F())}function iX(e,t){e&1&&(P(0,`span`,13),G(1,`holds a change`),F())}function aX(e,t){if(e&1){let e=z();P(0,`li`,9),k(1,tX,7,5,`button`,10)(2,nX,7,2,`span`,11),k(3,rX,2,0,`span`,12)(4,iX,2,0,`span`,13),P(5,`button`,14),V(`click`,function(){let t=x(e).$implicit;return S(U().copied.emit(t.path))}),G(6,` Copy path `),F()()}if(e&2){let e=t.$implicit;f_(`padding-left`,e.depth*14,`px`),W(`changed`,e.changed),E(),A(e.node?1:2),E(2),A(e.changed?3:e.holdsChange&&!e.open?4:-1),E(2),N(`title`,`Copy path `+e.path),O(`aria-label`,`Copy path `+e.path)}}function oX(e,t){if(e&1&&(P(0,`p`,6),G(1),F()),e&2){let e=U();E(),q(` `,e.view().rows.length-e.shown().length,` more rows not shown. Search to narrow the tree. `)}}var sX=`@type`;function cX(e){return Array.isArray(e)?!0:!!e&&typeof e==`object`&&!Object.hasOwn(e,sX)}function lX(e,t){if(typeof t==`number`)return`${e}[${t}]`;let n=/^[A-Za-z_$][\w$]*$/.test(t)?t:JSON.stringify(t);return e?n.startsWith(`"`)?`${e}[${n}]`:`${e}.${n}`:n}function uX(e,t){return t.startsWith(`${e}.`)||t.startsWith(`${e}[`)}function dX(e){return Array.isArray(e)?e.map((e,t)=>[t,e]):Object.entries(e)}function fX(e){return Array.isArray(e)?`[${e.length}]`:`{${Object.keys(e).length}}`}function pX(e,t={}){let n=t.query?.trim().toLowerCase()??``,r=t.changed??[],i=[],a=0,o=(e,s,c,l)=>{let u=cX(e),d=r.some(e=>e===s||uX(e,s)),f=r.some(e=>uX(s,e)),p=u?fX(e):oJ(e,160),m=!!n&&(c.toLowerCase().includes(n)||!u&&p.toLowerCase().includes(n));m&&a++;let ee=u?n?!0:!t.closed?.has(s)&&(l<1||f||!!t.opened?.has(s)):!1,h=i.length;if(i.push({path:s,key:c,depth:l,node:u,open:ee,text:p,changed:d,holdsChange:f}),ee&&u)for(let[t,n]of dX(e))o(n,lX(s,t),String(t),l+1);n&&!m&&i.length===h+1&&(i.length=h)};if(cX(e))for(let[t,n]of dX(e))o(n,lX(``,t),String(t),0);else e!==void 0&&o(e,`(root)`,`(root)`,0);return{rows:i,matches:a}}var mX=class e{value=$(void 0);changed=$([]);label=$(`State`);copied=xv();query=w(``);opened=Q({source:()=>this.label(),computation:()=>new Set});closed=Q({source:()=>this.label(),computation:()=>new Set});box=Ov(`box`);view=X(()=>pX(this.value(),{query:this.query(),changed:this.changed(),opened:this.opened(),closed:this.closed()}));shown=X(()=>this.view().rows.slice(0,400));matches=X(()=>this.view().matches);toggle(e){let t=new Set(this.opened()),n=new Set(this.closed());e.open?(t.delete(e.path),n.add(e.path)):(n.delete(e.path),t.add(e.path)),this.opened.set(t),this.closed.set(n)}focus(){this.box()?.nativeElement.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-state-tree`]],viewQuery:function(e,t){e&1&&Ug(t.box,ZY,5),e&2&&Wg()},inputs:{value:[1,`value`],changed:[1,`changed`],label:[1,`label`]},outputs:{copied:`copied`},decls:11,vars:7,consts:[[`box`,``],[3,`value`],[1,`tree-tools`],[`placeholder`,`Filter by key or value`,1,`tree-search`,3,`valueChange`,`label`,`value`],[1,`count`],[`tabindex`,`-1`,`role`,`group`,1,`tree`],[1,`muted`],[1,`rows`],[1,`row`,3,`changed`,`padding-left`],[1,`row`],[`type`,`button`,1,`toggle`],[1,`leaf`],[1,`mark`],[1,`mark`,`soft`],[`type`,`button`,1,`copy-path`,3,`click`,`title`],[`type`,`button`,1,`toggle`,3,`click`],[`aria-hidden`,`true`,1,`caret`],[1,`key`],[`aria-hidden`,`true`,1,`summary`],[1,`colon`],[1,`value`]],template:function(e,t){if(e&1){let e=z();I(0,`app-redaction-count`,1),P(1,`div`,2)(2,`app-search-field`,3),U_(`valueChange`,function(n){return x(e),H_(t.query,n)||(t.query=n),S(n)}),F(),k(3,$Y,2,2,`span`,4),F(),P(4,`div`,5,0),k(6,eX,2,1,`p`,6),P(7,`ul`,7),j(8,aX,7,8,`li`,8,QY),F(),k(10,oX,2,1,`p`,6),F()}e&2&&(N(`value`,t.value()),E(2),N(`label`,`Filter `+t.label()),V_(`value`,t.query),E(),A(t.query()?3:-1),E(),O(`aria-label`,t.label()),E(2),A(t.view().rows.length?-1:6),E(2),M(t.shown()),E(2),A(t.view().rows.length>t.shown().length?10:-1))},dependencies:[iD,Xj],styles:[`[_nghost-%COMP%] {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.tree-tools[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tree-search[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.tree[_ngcontent-%COMP%] {
+  max-height: 360px;
+  overflow: auto;
+  padding: 6px 8px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.tree[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.rows[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  border-radius: 4px;
+}
+
+.row.changed[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+}
+
+.toggle[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 0;
+  padding: 1px 2px;
+  border: 0;
+  background: none;
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.toggle[_ngcontent-%COMP%]:focus-visible, 
+.copy-path[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.caret[_ngcontent-%COMP%] {
+  width: 10px;
+  color: var(--%NS%text-2);
+}
+
+.leaf[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 4px;
+  min-width: 0;
+  padding: 1px 2px 1px 16px;
+}
+
+.key[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.colon[_ngcontent-%COMP%], 
+.summary[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.value[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-family: inherit;
+  color: var(--%NS%text);
+}
+
+.mark[_ngcontent-%COMP%] {
+  flex: none;
+  padding: 0 5px;
+  border-radius: 4px;
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 10.5px;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.mark.soft[_ngcontent-%COMP%] {
+  background: none;
+  color: var(--%NS%text-2);
+}
+
+.copy-path[_ngcontent-%COMP%] {
+  flex: none;
+  margin-left: auto;
+  padding: 0 6px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 11px;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.row[_ngcontent-%COMP%]:hover   .copy-path[_ngcontent-%COMP%], 
+.copy-path[_ngcontent-%COMP%]:focus-visible {
+  opacity: 1;
+  border-color: var(--%NS%control-border);
+}
+
+@media (hover: none) {
+  .copy-path[_ngcontent-%COMP%] {
+    opacity: 1;
+  }
+}
+.muted[_ngcontent-%COMP%] {
+  margin: 4px 2px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-sans, inherit);
+}`]})};function hX(e,t){if(e&1&&Sg(0,`option`,4),e&2){let e=t.$implicit;B(`value`,e)}}function gX(e,t){if(e&1&&(L(0,`p`,10),G(1),R()),e&2){let e=U();E(),K(e.restoreOff)}}var _X=class e{state=b(sJ);actions=b(cJ);canRestore=this.state.canRestore;restoreOff=this.state.restoreOff;actionTypes=this.state.actionTypes;busy=this.actions.busy;dispatchType=this.actions.dispatchType;dispatchPayload=this.actions.dispatchPayload;payloadError=this.actions.payloadError;dispatchRequest=this.actions.dispatchRequest;dispatchAction(e){return this.actions.dispatchAction(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appStoreDispatch`,``]],decls:22,vars:7,consts:[[`id`,`ngrx-dispatch-heading`],[1,`dispatch-form`,3,`submit`],[`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`list`,`ngrx-action-types`,`placeholder`,`e.g. [Cart] Add Item`,3,`input`,`value`],[`id`,`ngrx-action-types`],[3,`value`],[1,`optional`],[`rows`,`3`,`spellcheck`,`false`,`placeholder`,`e.g. {"id": 7}`,`aria-describedby`,`ngrx-payload-error`,3,`input`,`value`],[`id`,`ngrx-payload-error`,1,`field-error`],[1,`actions`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`id`,`store-dispatch-off`,1,`hint`,`small`]],template:function(e,t){e&1&&(L(0,`h4`,0),G(1,`Dispatch an action`),R(),L(2,`form`,1),H(`submit`,function(e){return t.dispatchAction(e)}),L(3,`label`)(4,`span`),G(5,`Type`),R(),L(6,`input`,2),H(`input`,function(e){return t.dispatchType.set(e.target.value)}),R()(),L(7,`datalist`,3),j(8,hX,1,1,`option`,4,dg),R(),L(10,`label`)(11,`span`),G(12,`Payload `),L(13,`span`,5),G(14,`(JSON object, optional)`),R()(),L(15,`textarea`,6),H(`input`,function(e){return t.dispatchPayload.set(e.target.value)}),R()(),L(16,`p`,7),G(17),R(),L(18,`div`,8)(19,`button`,9),G(20,` Dispatch `),R()(),k(21,gX,2,1,`p`,10),R()),e&2&&(E(6),B(`value`,t.dispatchType()),E(2),M(t.actionTypes()),E(7),B(`value`,t.dispatchPayload()),O(`aria-invalid`,t.payloadError()?`true`:null),E(2),K(t.payloadError()),E(2),B(`disabled`,t.busy()||!t.canRestore()||!t.dispatchRequest()),O(`aria-describedby`,t.canRestore()?null:`store-dispatch-off`),E(2),A(t.canRestore()?-1:21))},styles:[`input[_ngcontent-%COMP%] {
+  flex: 1 1 220px;
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.confirm[_ngcontent-%COMP%] {
+  margin-top: 14px;
+  padding: 12px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%accent-soft);
+}
+
+.confirm[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+  line-height: 1.5;
+}
+
+.actions[_ngcontent-%COMP%], 
+.entry-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.entry-actions[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.entry-actions[_ngcontent-%COMP%]   .btn.restore[_ngcontent-%COMP%] {
+  margin-top: 0;
+}
+
+.dispatch[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+.dispatch-form[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 10px;
+  max-width: 560px;
+}
+
+.dispatch-form[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.optional[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+.dispatch-form[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 100%;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  resize: vertical;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+.field-error[_ngcontent-%COMP%] {
+  margin: -4px 0 0;
+  color: var(--%NS%danger);
+  font-size: 12px;
+}
+
+.field-error[_ngcontent-%COMP%]:empty {
+  display: none;
+}`]})},vX=[`resetButton`],yX=[`resetCancel`];function bX(e,t){if(e&1&&G(0),e&2){let e=t;J(` `,e,` skipped `,e===1?`action is`:`actions are`,` left out of the state. `)}}function xX(e,t){if(e&1){let e=z();L(0,`div`,7),H(`keydown.escape`,function(t){return x(e),S(U(2).cancelReset(t))}),L(1,`p`,8),G(2,` Reset puts the store back on its initial state and empties the Store DevTools history. Entries logged so far can no longer be restored. `),R(),L(3,`div`,5)(4,`button`,9),H(`click`,function(){return x(e),S(U(2).devtoolsOp({op:`reset`}))}),G(5,` Reset history `),R(),L(6,`button`,10,0),H(`click`,function(){return x(e),S(U(2).cancelReset())}),G(8,`Cancel`),R()()()}if(e&2){let e=U(2);E(4),B(`disabled`,e.busy())}}function SX(e,t){if(e&1){let e=z();L(0,`div`,5)(1,`button`,11),H(`click`,function(){x(e);let t=U();return S(U().devtoolsOp({op:`pause`,paused:!t.classic.recordingPaused}))}),G(2),R(),L(3,`button`,11),H(`click`,function(){return x(e),S(U(2).devtoolsOp({op:`jump`,index:0}))}),G(4,` Jump to committed state `),R(),L(5,`button`,11),H(`click`,function(){return x(e),S(U(2).devtoolsOp({op:`commit`}))}),G(6,` Commit `),R(),L(7,`button`,11,1),H(`click`,function(){return x(e),S(U(2).askReset())}),G(9,` Reset… `),R()()}if(e&2){let e=U(),t=U();E(),B(`disabled`,t.busy()||!t.canRestore()),O(`aria-describedby`,t.canRestore()?null:`store-history-off`),E(),q(` `,e.classic.recordingPaused?`Resume recording`:`Pause recording`,` `),E(),B(`disabled`,t.busy()||!t.canRestore()),O(`aria-describedby`,t.canRestore()?null:`store-history-off`),E(2),B(`disabled`,t.busy()||!t.canRestore()),O(`aria-describedby`,t.canRestore()?null:`store-history-off`),E(2),B(`disabled`,t.busy()||!t.canRestore()),O(`aria-describedby`,t.canRestore()?null:`store-history-off`)}}function CX(e,t){if(e&1&&(L(0,`p`,6),G(1),R()),e&2){let e=U(2);E(),K(e.restoreOff)}}function wX(e,t){if(e&1&&(L(0,`h4`,2),G(1,`Store DevTools history`),R(),L(2,`p`,3),G(3),k(4,bX,1,2),R(),k(5,xX,9,1,`div`,4)(6,SX,10,9,`div`,5),k(7,CX,2,1,`p`,6)),e&2){let e,n=t,r=U();E(3),q(` `,n.classic.recordingPaused?`Recording is paused: new actions change the state but are not recorded.`:`Recording new actions.`,` `),E(),A((e=n.classic.skipped?.length)?4:-1,e),E(),A(r.confirmReset()?5:6),E(2),A(r.canRestore()?-1:7)}}var TX=class e{state=b(sJ);actions=b(cJ);resetButton=Ov(`resetButton`);resetCancel=Ov(`resetCancel`);store=this.state.store;canRestore=this.state.canRestore;restoreOff=this.state.restoreOff;busy=this.actions.busy;confirmReset=this.actions.confirmReset;constructor(){Fv(()=>{let e=this.actions.focusReset(),t=e===`cancel`?this.resetCancel():this.resetButton();e&&t&&(this.actions.focusReset.set(null),t.nativeElement.focus())})}askReset(){this.actions.askReset()}cancelReset(e){this.actions.cancelReset(e)}devtoolsOp(e){return this.actions.devtoolsOp(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appStoreHistory`,``]],viewQuery:function(e,t){e&1&&Ug(t.resetButton,vX,5)(t.resetCancel,yX,5),e&2&&Wg(2)},decls:1,vars:1,consts:[[`resetCancel`,``],[`resetButton`,``],[`id`,`ngrx-devtools-heading`],[1,`hint`,`small`],[`role`,`group`,`aria-labelledby`,`ngrx-reset-text`,1,`confirm`],[1,`actions`],[`id`,`store-history-off`,1,`hint`,`small`],[`role`,`group`,`aria-labelledby`,`ngrx-reset-text`,1,`confirm`,3,`keydown.escape`],[`id`,`ngrx-reset-text`],[`type`,`button`,1,`btn`,`primary`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,3,`click`],[`type`,`button`,1,`btn`,3,`click`,`disabled`]],template:function(e,t){if(e&1&&k(0,wX,8,4),e&2){let e;A((e=t.store())?0:-1,e)}},styles:[`.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.confirm[_ngcontent-%COMP%] {
+  margin-top: 14px;
+  padding: 12px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%accent-soft);
+}
+
+.confirm[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+  line-height: 1.5;
+}
+
+.actions[_ngcontent-%COMP%], 
+.entry-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.entry-actions[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.entry-actions[_ngcontent-%COMP%]   .btn.restore[_ngcontent-%COMP%] {
+  margin-top: 0;
+}
+
+.history[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin-top: 16px;
+}
+
+[_nghost-%COMP%]   h4[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+}
+
+[_nghost-%COMP%]   .actions[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: 280px;
+  overflow: auto;
+  margin-top: 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.stats[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.stats[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: baseline;
+}
+
+.stats[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.stats[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  font-weight: 400;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.stats[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.loop[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 5px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 10.5px;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}`]})},EX=[`logList`],DX=(e,t)=>t.entry.seq;function OX(e,t){if(e&1&&(P(0,`span`,15),G(1),F()),e&2){let e=t;N(`title`,`Caused by `+U(3).kindLabel(`event`)+`: `+e.type),E(),K(e.type)}}function kX(e,t){e&1&&(P(0,`span`,17),G(1,`skipped`),F())}function AX(e,t){if(e&1&&(P(0,`span`,17),G(1),F()),e&2){U();let e=Y(0);E(),K(e.origin)}}function jX(e,t){if(e&1&&G(0),e&2){U();let e=Y(0);q(` · `,U(2).formatDuration(e.durationMs),` `)}}function MX(e,t){if(e&1){let e=z();G_(0),P(1,`li`)(2,`button`,11),V(`click`,function(){x(e);let t=Y(0);return S(U(2).selectChange(t.seq))}),P(3,`span`,12),G(4),F(),P(5,`span`,13)(6,`span`,14),G(7),F(),k(8,OX,2,2,`span`,15),F(),P(9,`span`,16),k(10,kX,2,0,`span`,17),k(11,AX,2,1,`span`,17),G(12),k(13,jX,1,1),F()()()}if(e&2){let e,n=t.$implicit,r=U(2),i=K_(n.entry);E(),O(`data-vindex`,n.index)(`aria-setsize`,r.logWindow.enabled()?r.storeLog().length:null)(`aria-posinset`,r.logWindow.enabled()?n.index+1:null),E(),W(`selected`,i.seq===r.selectedChangeSeq()),O(`aria-pressed`,i.seq===r.selectedChangeSeq())(`aria-controls`,i.seq===r.selectedChangeSeq()?`ngrx-change-detail`:null),E(2),q(`#`,i.seq),E(2),N(`title`,i.type),E(),K(i.type),E(),A((e=i.causedByEvent)?8:-1,e),E(2),A(r.isSkipped(i.seq)?10:-1),E(),A(i.origin?11:-1),E(),J(` `,r.changesLabel(i),` · `,r.formatTime(i.timestamp),` `),E(),A(i.durationMs===void 0?-1:13)}}function NX(e,t){e&1&&G(0,` No entries match this filter. `)}function PX(e,t){e&1&&G(0,` No actions dispatched since the page connected. `)}function FX(e,t){e&1&&G(0,` No state changes yet. Method calls and patchState writes that change the state are recorded here. `)}function IX(e,t){if(e&1&&(P(0,`li`,8),k(1,NX,1,0)(2,PX,1,0)(3,FX,1,0),F()),e&2){let e=U(),t=U();E(),A(t.filter()?1:e.classic||e.redux?2:3)}}function LX(e,t){e&1&&(P(0,`div`,10),I(1,`section`,18),F()),e&2&&(E(),N(`selected`,t)(`headingLevel`,5)(`idPrefix`,`ngrx-change`))}function RX(e,t){if(e&1){let e=z();P(0,`h4`,1),G(1),P(2,`span`,2),G(3),F()(),P(4,`div`,3),I(5,`app-live-controls`,4),F(),I(6,`app-limit-note`,5),P(7,`div`,6)(8,`ul`,7,0),j(10,MX,14,17,`li`,null,DX,!1,IX,4,1,`li`,8),F(),P(13,`app-splitter`,9),U_(`sizeChange`,function(t){x(e);let n=U();return H_(n.logListSize,t)||(n.logListSize=t),S(t)}),F(),k(14,LX,2,3,`div`,10),F()}if(e&2){let e,n=t,r=U();E(),q(` `,n.classic||n.redux?`Action log`:`Change log`,` `),E(2),K(r.storeLog().length),E(2),N(`feed`,r.logFeed)(`what`,n.classic||n.redux?`actions`:`changes`),E(),N(`dropped`,(n.redux?r.reduxPage()?.dropped:r.page()?.dropped)??0)(`max`,r.maxLog()),E(),f_(`--%NS%log-list-size`,r.logListSize(),`px`),E(),f_(`padding-top`,r.logWindow.enabled()?2+r.logWindow.padTop():null,`px`)(`padding-bottom`,r.logWindow.enabled()?2+r.logWindow.padBottom():null,`px`),N(`rovingWindow`,r.logWindow),O(`aria-label`,n.classic||n.redux?`Actions`:`Changes`),E(2),M(r.shownLog()),E(3),N(`min`,200)(`max`,640)(`defaultSize`,300),V_(`size`,r.logListSize),E(),A((e=r.changeEntry())?14:-1,e)}}var zX=class e{state=b(sJ);logListSize=w(HW(`store-log`,300));store=this.state.store;page=this.state.page;reduxPage=this.state.reduxPage;maxLog=this.state.maxLog;filter=this.state.filter;logFeed=this.state.logFeed;storeLog=this.state.storeLog;selectedChangeSeq=this.state.selectedChangeSeq;changeEntry=this.state.changeEntry;changesLabel=this.state.changesLabel;kindLabel=zq;formatTime=aD;formatDuration=Hq;logWindow=new XN({count:X(()=>this.storeLog().length),estimate:56});shownLog=X(()=>Wq(this.storeLog(),this.logWindow));logList=Ov(`logList`);constructor(){zR(this.logFeed,()=>{let e=this.logList()?.nativeElement;e&&(e.scrollTop=0)}),T(()=>{let e=this.logList()?.nativeElement;e&&this.logWindow.attach(e)})}selectChange(e){this.state.selectChange(e)}isSkipped(e){return this.state.isSkipped(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appStoreLog`,``]],viewQuery:function(e,t){e&1&&Ug(t.logList,EX,5),e&2&&Wg()},decls:1,vars:1,consts:[[`logList`,``],[`id`,`ngrx-log-heading`],[1,`pill`],[1,`live-row`],[3,`feed`,`what`],[`what`,`changes on this page`,`limit`,`changeLog`,3,`dropped`,`max`],[1,`log-layout`],[`appRovingList`,`button.log-item`,1,`log-list`,3,`rovingWindow`],[1,`muted`,`pad`],[`view`,`store-log`,`pane`,`before`,`label`,`Resize the change list`,3,`sizeChange`,`min`,`max`,`defaultSize`,`size`],[`id`,`ngrx-change-detail`],[`type`,`button`,1,`log-item`,3,`click`],[1,`seq`],[1,`log-type-row`],[1,`log-type`,3,`title`],[1,`tag`,3,`title`],[1,`log-meta`],[1,`tag`],[`appStoreEntry`,``,1,`entry`,3,`selected`,`headingLevel`,`idPrefix`]],template:function(e,t){if(e&1&&k(0,RX,15,20),e&2){let e;A((e=t.store())?0:-1,e)}},dependencies:[dD,BR,XV,WW,SY],styles:[`.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.live-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  overflow: hidden;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+ul[_ngcontent-%COMP%] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.store-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+}
+
+.store-item[_ngcontent-%COMP%], 
+.log-item[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.store-item[_ngcontent-%COMP%]:hover, 
+.log-item[_ngcontent-%COMP%]:hover, 
+.event-item[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.store-item[_ngcontent-%COMP%]:focus-visible, 
+.log-item[_ngcontent-%COMP%]:focus-visible, 
+.event-item[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.store-item.selected[_ngcontent-%COMP%], 
+.log-item.selected[_ngcontent-%COMP%], 
+.event-item.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.store-top[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.store-name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.store-meta[_ngcontent-%COMP%], 
+.log-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.methods[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.methods[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+  font-size: 10.5px;
+}
+
+.calls[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 11px;
+}
+
+.entities[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 14px;
+}
+
+.entity-group[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+}
+
+.entity-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.entity-count[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.entity-ids[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.chip.more[_ngcontent-%COMP%] {
+  border-style: dashed;
+  color: var(--%NS%text-3);
+}
+
+.log[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding-top: 16px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+.live-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 8px;
+}
+
+.log-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: min(var(--%NS%log-list-size, 300px), 60%) auto minmax(0, 1fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.log-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 420px;
+  overflow: auto;
+  padding: 2px;
+}
+
+.log-item[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 8px;
+  row-gap: 2px;
+}
+
+.seq[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.log-type-row[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.log-type[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+}
+
+.log-meta[_ngcontent-%COMP%] {
+  grid-column: 2;
+}
+
+.entry[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 14px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  animation: enter 0.25s var(--%NS%ease) both;
+}
+
+.entry[_ngcontent-%COMP%]   .entry-heading[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.diff[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+}
+
+.diff-row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
+  gap: 8px;
+  align-items: baseline;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+}
+
+.op[_ngcontent-%COMP%] {
+  font-size: 10.5px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--%NS%text-2);
+}
+
+.diff-row.add[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.diff-row.remove[_ngcontent-%COMP%]   .op[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.values[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.before[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-decoration: line-through;
+}
+
+.after[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.arrow[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+@media (max-width: 760px) {
+  .log-layout[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .log-layout[_ngcontent-%COMP%]    > app-splitter[_ngcontent-%COMP%] {
+    display: none;
+  }
+}`]})},BX=(e,t)=>t.type;function VX(e,t){e&1&&(L(0,`span`,6),G(1,`Possible effect loop`),R())}function HX(e,t){if(e&1&&(L(0,`tr`)(1,`th`,5),G(2),k(3,VX,2,0,`span`,6),R(),L(4,`td`,7),G(5),R(),L(6,`td`,7),G(7),R(),L(8,`td`,7),G(9),R(),L(10,`td`,7),G(11),R()()),e&2){let e=t.$implicit,n=U(2);E(2),q(` `,e.type,` `),E(),A(e.loop?3:-1),E(2),K(e.count),E(2),q(` `,e.avgMs===void 0?`n/a`:n.formatDuration(e.avgMs),` `),E(2),q(` `,e.maxMs===void 0?`n/a`:n.formatDuration(e.maxMs),` `),E(2),K(e.burst)}}function UX(e,t){if(e&1&&(L(0,`p`,1),G(1),R()),e&2){let e=U(2);E(),q(` A possible effect loop is an action an NgRx effect dispatched `,e.loopBurst,` or more times within one second. Check the effect that dispatches it for a missing filter or a dispatch of its own trigger. `)}}function WX(e,t){if(e&1&&(L(0,`h4`,0),G(1,`Action frequency`),R(),L(2,`p`,1),G(3),R(),L(4,`div`,2)(5,`table`)(6,`thead`)(7,`tr`)(8,`th`,3),G(9),R(),L(10,`th`,4),G(11,`Count`),R(),L(12,`th`,4),G(13,`Avg`),R(),L(14,`th`,4),G(15,`Longest`),R(),L(16,`th`,4),G(17,`Peak per second`),R()()(),L(18,`tbody`),j(19,HX,12,6,`tr`,null,BX),R()()(),k(21,UX,2,1,`p`,1)),e&2){let e=t,n=U();E(3),q(` How often each `,e.classic?`action`:`change`,` ran since the page loaded, including entries the log no longer keeps. `),E(6),K(e.classic?`Action`:`Method or write`),E(10),M(n.storeStats()),E(2),A(n.hasLoop()?21:-1)}}var GX=class e{state=b(sJ);store=this.state.store;storeStats=this.state.storeStats;hasLoop=this.state.hasLoop;formatDuration=Hq;loopBurst=20;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appStoreStats`,``]],decls:1,vars:1,consts:[[`id`,`ngrx-stats-heading`],[1,`hint`,`small`],[`tabindex`,`0`,`role`,`region`,`aria-labelledby`,`ngrx-stats-heading`,1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[`scope`,`row`,1,`mono`],[1,`loop`],[1,`num`]],template:function(e,t){if(e&1&&k(0,WX,22,3),e&2){let e;A((e=t.store())?0:-1,e)}},styles:[`.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.history[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin-top: 16px;
+}
+
+.history[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], 
+[_nghost-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+}
+
+.history[_ngcontent-%COMP%]   .actions[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: 280px;
+  overflow: auto;
+  margin-top: 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+[_nghost-%COMP%]   table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+[_nghost-%COMP%]   th[_ngcontent-%COMP%], 
+[_nghost-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: baseline;
+}
+
+[_nghost-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+[_nghost-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  font-weight: 400;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+[_nghost-%COMP%]   .num[_ngcontent-%COMP%] {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.loop[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 5px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 10.5px;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}`]})},KX=[`latestButton`],qX=e=>({kind:`ngrx`,storeId:e}),JX=(e,t)=>t.key,YX=(e,t)=>t.name,XX=(e,t)=>t.idsKey;function ZX(e,t){e&1&&(P(0,`span`,3),G(1),F()),e&2&&(E(),K(t.library))}function QX(e,t){if(e&1&&(P(0,`span`,3),G(1),F()),e&2){let e=U();E(),q(`scope: `,e.scope)}}function $X(e,t){e&1&&I(0,`app-source-link`,4),e&2&&N(`file`,t)}function eZ(e,t){if(e&1&&(P(0,`span`,3),G(1),F()),e&2){let e=U();E(),K(e.classic.devtools?`Store DevTools on`:`Store DevTools off`)}}function tZ(e,t){e&1&&(P(0,`span`,3),G(1,`withDevtools: watched only`),F())}function nZ(e,t){e&1&&(P(0,`p`,5),G(1,` This store uses `),P(2,`code`),G(3,`withDevtools()`),F(),G(4,`, so the inspector does not wrap its methods or signals. Changes are logged as `),P(5,`code`),G(6,`patchState`),F(),G(7,` entries, and method calls are not counted. `),F())}function rZ(e,t){if(e&1&&(P(0,`code`),G(1),F(),G(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;E(),K(e),E(),q(``,n===r-1?``:`, `,` `)}}function iZ(e,t){if(e&1&&(P(0,`p`,6),G(1,` Referenced by `),j(2,rZ,3,2,null,null,dg),F()),e&2){let e=U();E(2),M(e.signal.references)}}function aZ(e,t){if(e&1&&(P(0,`p`,22),G(1),F()),e&2){let e=U(3);E(),K(e.restoreOff)}}function oZ(e,t){if(e&1){let e=z();P(0,`div`,7)(1,`p`)(2,`strong`),G(3,`Viewing a past state.`),F(),G(4,` New actions are logged but do not change the state until you go back to the latest state. `),F(),P(5,`button`,21,0),V(`click`,function(){return x(e),S(U(2).backToLatest())}),G(7,` Back to latest `),F(),k(8,aZ,2,1,`p`,22),F()}if(e&2){let e=U(2);E(5),N(`disabled`,e.busy()||!e.canRestore()),O(`aria-describedby`,e.canRestore()?null:`store-latest-off`),E(3),A(e.canRestore()?-1:8)}}function sZ(e,t){if(e&1&&I(0,`app-store-global`,13),e&2){let e=U(),t=U();N(`rpc`,t.rpc())(`pageId`,t.page()?.pageId)(`target`,av(4,qX,e.id))(`label`,e.label+` state`)}}function cZ(e,t){if(e&1&&(P(0,`dt`),G(1),F(),P(2,`dd`)(3,`code`,30),G(4),F()()),e&2){let e=t.$implicit;E(),K(e.key),E(2),N(`title`,e.full),E(),K(e.value)}}function lZ(e,t){if(e&1&&(P(0,`dl`,25),j(1,cZ,5,3,null,null,JX),F()),e&2){let e=U(3);E(),M(e.computedEntries())}}function uZ(e,t){e&1&&(P(0,`p`,26),G(1,`No computed signals.`),F())}function dZ(e,t){e&1&&(P(0,`span`,32),G(1,`signalMethod`),F())}function fZ(e,t){e&1&&(P(0,`span`,32),G(1,`rxMethod`),F())}function pZ(e,t){if(e&1&&(P(0,`li`,31),G(1),k(2,dZ,2,0,`span`,32)(3,fZ,2,0,`span`,32),P(4,`span`,33),G(5),F()()),e&2){let e=t.$implicit,n=U(4);E(),q(` `,e.name,` `),E(),A(e.signalMethod?2:e.rx?3:-1),E(3),R_(``,e.calls,` `,e.calls===1?`call`:`calls`,``,n.methodDuration(e))}}function mZ(e,t){if(e&1&&(P(0,`ul`,28),j(1,pZ,6,5,`li`,31,YX),F()),e&2){let e=U();E(),M(e.methods)}}function hZ(e,t){e&1&&(P(0,`p`,26),G(1,`No methods.`),F())}function gZ(e,t){if(e&1&&(P(0,`li`,31),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function _Z(e,t){if(e&1&&(P(0,`li`,40),G(1),F()),e&2){let e=U().$implicit;N(`title`,U(4).entityOverflowTitle(e.ids,e.count)),E(),q(` +`,e.count-30,` more `)}}function vZ(e,t){if(e&1&&(P(0,`code`,30),G(1),F()),e&2){let e=U(2).$implicit,t=U(4);N(`title`,t.prettyText(e.selected)),E(),K(t.shortText(e.selected))}}function yZ(e,t){e&1&&(P(0,`span`,26),G(1,`None selected`),F())}function bZ(e,t){if(e&1&&(P(0,`dl`,25)(1,`dt`),G(2,`Selected`),F(),P(3,`dd`),k(4,vZ,2,2,`code`,30)(5,yZ,2,0,`span`,26),F()()),e&2){let e=U().$implicit;E(4),A(e.selected===void 0?5:4)}}function xZ(e,t){if(e&1&&(P(0,`div`,36)(1,`div`,37)(2,`span`,31),G(3),F(),P(4,`span`,38),G(5),F()(),P(6,`ul`,39),j(7,gZ,2,1,`li`,31,dg),k(9,_Z,2,2,`li`,40),F(),k(10,bZ,6,1,`dl`,25),F()),e&2){let e=t.$implicit,n=U(4);E(3),K(e.collection??`entities`),E(2),J(``,e.count,` `,e.count===1?`entity`:`entities`),E(),O(`aria-label`,(e.collection??`entities`)+` ids`),E(),M(n.entityIds(e.ids)),E(2),A(e.count>30?9:-1),E(),A(e.selectedId===void 0?-1:10)}}function SZ(e,t){if(e&1&&(P(0,`section`,29)(1,`h4`,34),G(2,`Entities`),F(),P(3,`div`,35),j(4,xZ,11,6,`div`,36,XX),F()()),e&2){let e=U();E(4),M(e.entities)}}function CZ(e,t){if(e&1&&(P(0,`section`,23)(1,`h4`,24),G(2,`Computed`),F(),k(3,lZ,3,0,`dl`,25)(4,uZ,2,0,`p`,26),P(5,`h4`,27),G(6,`Methods`),F(),k(7,mZ,3,0,`ul`,28)(8,hZ,2,0,`p`,26),F(),k(9,SZ,6,0,`section`,29)),e&2){let e=t,n=U(2);E(3),A(n.computedEntries().length?3:4),E(4),A(e.methods.length?7:8),E(2),A(e.entities?.length?9:-1)}}function wZ(e,t){e&1&&I(0,`section`,16)}function TZ(e,t){e&1&&I(0,`div`,18)}function EZ(e,t){if(e&1&&I(0,`app-store-session`,19),e&2){let e=U(),t=U();N(`rpc`,t.rpc())(`pageId`,t.page()?.pageId??null)(`storeId`,e.id)(`entries`,t.sessionEntries())}}function DZ(e,t){e&1&&I(0,`section`,20)}function OZ(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`h3`),G(2),F(),P(3,`div`,2)(4,`span`,3),G(5),F(),k(6,ZX,2,1,`span`,3)(7,QX,2,1,`span`,3),k(8,$X,1,1,`app-source-link`,4),k(9,eZ,2,1,`span`,3),k(10,tZ,2,0,`span`,3),F(),k(11,nZ,8,0,`p`,5),k(12,iZ,4,0,`p`,6),F(),k(13,oZ,9,3,`div`,7),P(14,`div`,8)(15,`section`,9)(16,`div`,10)(17,`h4`,11),G(18,`State`),F(),P(19,`div`,12),k(20,sZ,1,6,`app-store-global`,13),P(21,`button`,14),V(`click`,function(){return x(e),S(U().copyState())}),G(22,` Copy `),F()()(),P(23,`app-state-tree`,15),V(`copied`,function(t){return x(e),S(U().copyPath(t))}),F()(),k(24,CZ,10,3),F(),k(25,wZ,1,0,`section`,16),I(26,`section`,17),k(27,TZ,1,0,`div`,18),k(28,EZ,1,4,`app-store-session`,19),k(29,DZ,1,0,`section`,20)}if(e&2){let e,n,r,i=t,a=U();E(2),K(i.label),E(3),K(a.kindLabel(i.kind)),E(),A((e=i.redux)?6:7,e),E(2),A((n=i.signal?.declaredIn)?8:-1,n),E(),A(i.classic?9:-1),E(),A(i.signal?.watchOnly?10:-1),E(),A(i.signal?.watchOnly?11:-1),E(),A(i.signal?.references?.length?12:-1),E(),A(i.classic?.paused?13:-1),E(7),A(i.redux?-1:20),E(3),N(`value`,a.stateValue())(`changed`,a.changedPaths())(`label`,i.label+` state`),E(),A((r=i.signal)?24:-1,r),E(),A(i.classic?.devtools?25:-1),E(2),A(a.storeStats().length?27:-1),E(),A(i.redux?-1:28),E(),A(i.classic?29:-1)}}var kZ=class e{state=b(sJ);actions=b(cJ);latestButton=Ov(`latestButton`);stateTree=Ov(mX);rpc=this.state.rpc;page=this.state.page;store=this.state.store;canRestore=this.state.canRestore;restoreOff=this.state.restoreOff;stateValue=this.state.stateValue;changedPaths=this.state.changedPaths;computedEntries=this.state.computedEntries;storeStats=this.state.storeStats;sessionEntries=this.state.sessionEntries;busy=this.actions.busy;kindLabel=zq;methodDuration=Uq;constructor(){this.actions.focusStateTree=()=>this.stateTree()?.focus(),Fv(()=>{let e=this.latestButton();e&&this.actions.focusLatest()&&!this.busy()&&(this.actions.focusLatest.set(!1),e.nativeElement.focus())})}backToLatest(){return this.actions.backToLatest()}copyState(){return this.state.copyState()}copyPath(e){return this.state.copyPath(e)}entityIds(e){return e.slice(0,30)}entityOverflowTitle(e,t){let n=e.slice(30).join(`, `);return t>e.length?`${n} (first ${e.length} of ${t} shown)`:n}prettyText(e){return aJ(e)}shortText(e){return oJ(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appStoreDetail`,``]],viewQuery:function(e,t){e&1&&Ug(t.latestButton,KX,5)(t.stateTree,mX,5),e&2&&Wg(2)},decls:1,vars:1,consts:[[`latestButton`,``],[1,`detail-head`],[1,`chips`],[1,`chip`],[1,`chip`,`mono`,3,`file`],[1,`hint`,`small`],[1,`refs`],[1,`paused`],[1,`facts`],[`aria-labelledby`,`ngrx-state-heading`,1,`fact`],[1,`fact-head`],[`id`,`ngrx-state-heading`],[1,`state-actions`],[3,`rpc`,`pageId`,`target`,`label`],[`type`,`button`,`aria-label`,`Copy state`,1,`btn`,`copy`,3,`click`],[3,`copied`,`value`,`changed`,`label`],[`appStoreHistory`,``,`aria-labelledby`,`ngrx-devtools-heading`,1,`history`],[`appStoreLog`,``,`aria-labelledby`,`ngrx-log-heading`,1,`log`],[`appStoreStats`,``,1,`stats`],[3,`rpc`,`pageId`,`storeId`,`entries`],[`appStoreDispatch`,``,`aria-labelledby`,`ngrx-dispatch-heading`,1,`dispatch`],[`type`,`button`,1,`btn`,`primary`,3,`click`,`disabled`],[`id`,`store-latest-off`,1,`hint`,`small`],[`aria-labelledby`,`ngrx-computed-heading`,1,`fact`],[`id`,`ngrx-computed-heading`],[1,`kv`],[1,`muted`],[`id`,`ngrx-methods-heading`,1,`spaced`],[`aria-labelledby`,`ngrx-methods-heading`,1,`methods`],[`aria-labelledby`,`ngrx-entities-heading`,1,`fact`],[3,`title`],[1,`chip`,`mono`],[1,`tag`],[1,`calls`],[`id`,`ngrx-entities-heading`],[1,`entities`],[1,`entity-group`],[1,`entity-head`],[1,`entity-count`],[1,`chips`,`entity-ids`],[1,`chip`,`more`,3,`title`]],template:function(e,t){if(e&1&&k(0,OZ,30,18),e&2){let e;A((e=t.store())?0:-1,e)}},dependencies:[aM,_X,uM,TX,zX,XY,mX,GX],styles:[`.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.live-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  overflow: hidden;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+ul[_ngcontent-%COMP%] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.store-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+}
+
+.store-item[_ngcontent-%COMP%], 
+.log-item[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.store-item[_ngcontent-%COMP%]:hover, 
+.log-item[_ngcontent-%COMP%]:hover, 
+.event-item[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.store-item[_ngcontent-%COMP%]:focus-visible, 
+.log-item[_ngcontent-%COMP%]:focus-visible, 
+.event-item[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.store-item.selected[_ngcontent-%COMP%], 
+.log-item.selected[_ngcontent-%COMP%], 
+.event-item.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.store-top[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.store-name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.store-meta[_ngcontent-%COMP%], 
+.log-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.store-detail[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 16px;
+}
+
+.detail-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.refs[_ngcontent-%COMP%] {
+  margin: 10px 0 0;
+  color: var(--%NS%text-2);
+  line-height: 1.8;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+  min-width: 0;
+}
+
+.fact[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+pre[_ngcontent-%COMP%] {
+  margin: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--%NS%text);
+}
+
+.tree[_ngcontent-%COMP%], 
+.code[_ngcontent-%COMP%] {
+  max-height: 360px;
+  overflow: auto;
+  padding: 10px 12px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.code[_ngcontent-%COMP%] {
+  max-height: 220px;
+}
+
+.tree[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.kv[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 6px 14px;
+  margin: 0;
+}
+
+
+.kv.redux-action[_ngcontent-%COMP%] {
+  margin-top: 10px;
+}
+
+.kv[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  color: var(--%NS%text-2);
+}
+
+.kv[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.methods[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.methods[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  padding: 0 5px;
+  border-radius: 4px;
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+  font-size: 10.5px;
+}
+
+.calls[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 11px;
+}
+
+.entities[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 14px;
+}
+
+.entity-group[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+}
+
+.entity-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.entity-count[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.entity-ids[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.chip.more[_ngcontent-%COMP%] {
+  border-style: dashed;
+  color: var(--%NS%text-3);
+}
+
+.log[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding-top: 16px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+.live-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 8px;
+}
+
+.log-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: min(var(--%NS%log-list-size, 300px), 60%) auto minmax(0, 1fr);
+  gap: 16px;
+  min-width: 0;
+}
+
+.log-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 420px;
+  overflow: auto;
+  padding: 2px;
+}
+
+.log-item[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: 8px;
+  row-gap: 2px;
+}
+
+.seq[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.log-type-row[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.log-type[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+}
+
+.log-meta[_ngcontent-%COMP%] {
+  grid-column: 2;
+}
+
+.dispatch[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--%NS%border);
+}
+
+.dispatch-form[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 10px;
+  max-width: 560px;
+}
+
+.dispatch-form[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.optional[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+.dispatch-form[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 100%;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  resize: vertical;
+  transition: border-color 0.15s var(--%NS%ease), box-shadow 0.15s var(--%NS%ease);
+}
+
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+.field-error[_ngcontent-%COMP%] {
+  margin: -4px 0 0;
+  color: var(--%NS%danger);
+  font-size: 12px;
+}
+
+.field-error[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.history[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin-top: 16px;
+}
+
+.history[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+}
+
+.history[_ngcontent-%COMP%]   .actions[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: 280px;
+  overflow: auto;
+  margin-top: 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.stats[_ngcontent-%COMP%]   table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.stats[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
+.stats[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: baseline;
+}
+
+.stats[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.stats[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  font-weight: 400;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.stats[_ngcontent-%COMP%]   .num[_ngcontent-%COMP%] {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.loop[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 0 5px;
+  border: 1px solid;
+  border-radius: 4px;
+  font-family: var(--%NS%font-sans, inherit);
+  font-size: 10.5px;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.paused[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+  margin-bottom: 14px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 40%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 10%, transparent);
+}
+
+.paused[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  flex: 1 1 240px;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.paused[_ngcontent-%COMP%]   .hint.small[_ngcontent-%COMP%] {
+  flex-basis: 100%;
+  margin-top: 0;
+}
+
+@media (max-width: 480px) {
+  .kv[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}`]})},AZ=(e,t)=>t.id;function jZ(e,t){if(e&1&&(P(0,`span`,2),G(1),F()),e&2){let e=U();E(),K(e.liveStores().length)}}function MZ(e,t){if(e&1){let e=z();P(0,`app-state`,8),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Could not load the live store state. `),P(2,`p`,9),G(3,`Check that the dev server with Pangular Inspector is still running.`),F()()}}function NZ(e,t){e&1&&(P(0,`app-state`,4),G(1,`Loading the live stores…`),F())}function PZ(e,t){e&1&&(P(0,`app-state`,5),G(1,` No page is reporting store state yet. `),P(2,`p`,9),G(3,`Open the app in a browser. Stores show up here as soon as the page creates them.`),F()())}function FZ(e,t){e&1&&(P(0,`p`,12),G(1,`No signal store instance on this page yet.`),F(),P(2,`p`,13),G(3,` A `),P(4,`code`),G(5,`signalStore`),F(),G(6,` is created the first time something injects it. Navigate to a page that uses the store and it appears here. `),F())}function IZ(e,t){e&1&&(P(0,`p`,12),G(1,`The @ngrx/store Store was not found on this page.`),F(),P(2,`p`,13),G(3,` Check that `),P(4,`code`),G(5,`provideStore()`),F(),G(6,` or `),P(7,`code`),G(8,`StoreModule.forRoot()`),F(),G(9,` is part of the providers of the running app. `),F())}function LZ(e,t){e&1&&(P(0,`p`,12),G(1,`This page has no store.`),F(),P(2,`p`,13),G(3,` Stores from `),P(4,`code`),G(5,`@ngrx/signals`),F(),G(6,` (`),P(7,`code`),G(8,`signalStore`),F(),G(9,`, `),P(10,`code`),G(11,`signalState`),F(),G(12,`) and `),P(13,`code`),G(14,`@ngrx/store`),F(),G(15,` are listed here once the app creates them. NGXS, Elf and MiniRx stores show up through their Redux DevTools integration when the app loads `),P(16,`code`),G(17,`@pangular-inspector/devtools/store-hook`),F(),G(18,` first. `),F())}function RZ(e,t){if(e&1&&(P(0,`app-angular-unavailable`,10),G(1,` The overlay finds stores through the injectors, so stores it can't reach from a component are not listed. `),F(),P(2,`div`,11),k(3,FZ,7,0)(4,IZ,10,0)(5,LZ,19,0),F()),e&2){let e=U();N(`page`,e.angularPage()),E(3),A(e.usesSignals()?3:e.usesClassic()?4:5)}}function zZ(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,17),V(`click`,function(){let t=x(e).$implicit;return S(U(2).selectStore(t.id))}),P(2,`span`,18),I(3,`span`,19),P(4,`span`,20),G(5),F()(),P(6,`span`,21),G(7),F()()()}if(e&2){let e=t.$implicit,n=U(2);E(),W(`selected`,e.id===n.store()?.id),O(`aria-pressed`,e.id===n.store()?.id),E(2),f_(`background`,n.kindColor(e.kind)),E(2),K(e.label),E(2),R_(` `,n.kindLabel(e.kind),` · `,e.scope,` · `,n.countText(e),` `)}}function BZ(e,t){e&1&&(P(0,`li`,15),G(1,`No stores match this filter.`),F())}function VZ(e,t){e&1&&I(0,`div`,16)}function HZ(e,t){if(e&1&&(P(0,`div`,6)(1,`ul`,14),j(2,zZ,8,9,`li`,null,AZ,!1,BZ,2,0,`li`,15),F(),k(5,VZ,1,0,`div`,16),F()),e&2){let e=U();E(2),M(e.filteredStores()),E(3),A(e.store()?5:-1)}}var UZ=class e{state=b(sJ);failed=this.state.failed;stateLoaded=this.state.stateLoaded;page=this.state.page;angularPage=this.state.angularPage;liveStores=this.state.liveStores;filteredStores=this.state.filteredStores;store=this.state.store;usesSignals=this.state.usesSignals;usesClassic=this.state.usesClassic;message=this.state.message;kindColor=Rq;kindLabel=zq;retry(){this.state.retry()}selectStore(e){this.state.selectStore(e)}countText(e){return this.state.countText(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appStoreLive`,``]],decls:11,vars:3,consts:[[1,`section-head`],[`id`,`ngrx-live-heading`],[1,`pill`],[`kind`,`error`],[`kind`,`loading`],[`kind`,`empty`],[1,`live-layout`],[`role`,`status`,1,`message`],[`kind`,`error`,3,`retry`],[`detail`,``],[`capability`,`injectorProviders`,`compact`,``,3,`page`],[1,`empty`],[1,`empty-title`],[1,`hint`],[`aria-label`,`Stores on this page`,1,`store-list`],[1,`muted`,`pad`],[`appStoreDetail`,``,1,`store-detail`],[`type`,`button`,1,`store-item`,3,`click`],[1,`store-top`],[`aria-hidden`,`true`,1,`dot`],[1,`store-name`],[1,`store-meta`]],template:function(e,t){e&1&&(P(0,`div`,0)(1,`h2`,1),G(2,`Live stores`),F(),k(3,jZ,2,1,`span`,2),F(),k(4,MZ,4,0,`app-state`,3)(5,NZ,2,0,`app-state`,4)(6,PZ,4,0,`app-state`,5)(7,RZ,6,2)(8,HZ,6,2,`div`,6),P(9,`p`,7),G(10),F()),e&2&&(E(3),A(t.liveStores().length?3:-1),E(),A(t.failed()?4:t.stateLoaded()?t.page()?t.liveStores().length?8:7:6:5),E(6),K(t.message()))},dependencies:[RE,aR,kZ],styles:[`.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.live-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  overflow: hidden;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+ul[_ngcontent-%COMP%] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.store-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+}
+
+.store-item[_ngcontent-%COMP%], 
+.log-item[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.store-item[_ngcontent-%COMP%]:hover, 
+.log-item[_ngcontent-%COMP%]:hover, 
+.event-item[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.store-item[_ngcontent-%COMP%]:focus-visible, 
+.log-item[_ngcontent-%COMP%]:focus-visible, 
+.event-item[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.store-item.selected[_ngcontent-%COMP%], 
+.log-item.selected[_ngcontent-%COMP%], 
+.event-item.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.store-top[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.store-name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.store-meta[_ngcontent-%COMP%], 
+.log-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.store-detail[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 16px;
+}
+
+.detail-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.refs[_ngcontent-%COMP%] {
+  margin: 10px 0 0;
+  color: var(--%NS%text-2);
+  line-height: 1.8;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+  min-width: 0;
+}
+
+.fact[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+.message[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.message[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+@media (max-width: 760px) {
+  .live-layout[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .store-list[_ngcontent-%COMP%] {
+    border-right: none;
+    border-bottom: 1px solid var(--%NS%border);
+  }
+}
+@media (max-width: 480px) {
+  .store-detail[_ngcontent-%COMP%] {
+    padding: 12px;
+  }
+}`]})},WZ=(e,t)=>t.kind,GZ=(e,t)=>t.name+t.file+t.line;function KZ(e,t){if(e&1&&(P(0,`span`,2),G(1),F()),e&2){let e=U();E(),K(e.sourceEntries().length)}}function qZ(e,t){e&1&&(P(0,`div`,3),I(1,`span`,5),P(2,`p`,6),G(3,`Scanning source for NgRx declarations…`),F()())}function JZ(e,t){e&1&&(P(0,`div`,4)(1,`p`,6),G(2,`No NgRx declarations found in source.`),F(),P(3,`p`,7),G(4,` The scan looks for `),P(5,`code`),G(6,`signalStore`),F(),G(7,`, `),P(8,`code`),G(9,`signalState`),F(),G(10,`, `),P(11,`code`),G(12,`signalMethod`),F(),G(13,`, `),P(14,`code`),G(15,`createAction`),F(),G(16,`, `),P(17,`code`),G(18,`createReducer`),F(),G(19,`, `),P(20,`code`),G(21,`createEffect`),F(),G(22,`, `),P(23,`code`),G(24,`createSelector`),F(),G(25,` and `),P(26,`code`),G(27,`createFeature`),F(),G(28,`. `),F()())}function YZ(e,t){if(e&1){let e=z();P(0,`button`,9),V(`click`,function(){let t=x(e).$implicit,n=U(2);return S(n.kind.set(n.kind()===t.kind?null:t.kind))}),I(1,`span`,14),P(2,`span`,15),G(3),F(),P(4,`span`,10),G(5),F()()}if(e&2){let e=t.$implicit,n=U(2);W(`active`,n.kind()===e.kind),O(`aria-pressed`,n.kind()===e.kind),E(),f_(`background`,n.kindColor(e.kind)),E(2),K(n.kindLabel(e.kind)),E(2),K(e.count)}}function XZ(e,t){if(e&1&&(P(0,`p`,21),G(1),F()),e&2){let e=U().$implicit;E(),K(e.detail)}}function ZZ(e,t){if(e&1&&(P(0,`li`,13)(1,`div`,16),I(2,`span`,14),P(3,`span`,17),G(4),F(),P(5,`span`,18),G(6),F()(),P(7,`div`,19),I(8,`app-source-link`,20),F(),k(9,XZ,2,1,`p`,21),F()),e&2){let e=t.$implicit,n=U(2);E(2),f_(`background`,n.kindColor(e.kind)),E(2),K(e.name),E(2),K(n.kindLabel(e.kind)),E(2),N(`file`,e.file)(`line`,e.line),E(),A(e.detail?9:-1)}}function QZ(e,t){if(e&1){let e=z();P(0,`li`)(1,`div`,3)(2,`p`,6),G(3,`No declarations match.`),F(),P(4,`button`,22),V(`click`,function(){return x(e),S(U(2).clearFilters())}),G(5,`Clear filters`),F()()()}}function $Z(e,t){if(e&1){let e=z();P(0,`div`,8)(1,`button`,9),V(`click`,function(){return x(e),S(U().kind.set(null))}),G(2,` All `),P(3,`span`,10),G(4),F()(),j(5,YZ,6,7,`button`,11,WZ),F(),P(7,`ul`,12),j(8,ZZ,10,7,`li`,13,GZ,!1,QZ,6,0,`li`),F()}if(e&2){let e=U();E(),W(`active`,!e.kind()),O(`aria-pressed`,!e.kind()),E(3),K(e.sourceEntries().length),E(),M(e.groupedEntries()),E(3),M(e.filteredEntries())}}var eQ=class e{state=b(sJ);sourceEntries=this.state.sourceEntries;sourceLoaded=this.state.sourceLoaded;kind=this.state.kind;groupedEntries=this.state.groupedEntries;filteredEntries=this.state.filteredEntries;kindColor=Rq;kindLabel=zq;clearFilters(){this.state.clearFilters()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appStoreSource`,``]],decls:7,vars:2,consts:[[1,`section-head`],[`id`,`ngrx-source-heading`],[1,`pill`],[`role`,`status`,1,`empty`,`compact`],[1,`empty`,`compact`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`hint`],[`role`,`group`,`aria-label`,`Filter declarations by kind`,1,`kinds`],[`type`,`button`,1,`kind-chip`,3,`click`],[1,`count`],[`type`,`button`,1,`kind-chip`,3,`active`],[1,`nodes`],[1,`node-card`],[`aria-hidden`,`true`,1,`dot`],[1,`chip-text`],[1,`node-header`],[1,`node-label`],[1,`chip`],[1,`node-meta`],[1,`file`,3,`file`,`line`],[1,`detail`],[`type`,`button`,1,`btn`,3,`click`]],template:function(e,t){e&1&&(P(0,`div`,0)(1,`h2`,1),G(2,`Source declarations`),F(),k(3,KZ,2,1,`span`,2),F(),k(4,qZ,4,0,`div`,3)(5,JZ,29,0,`div`,4)(6,$Z,11,5)),e&2&&(E(3),A(t.sourceEntries().length?3:-1),E(),A(t.sourceLoaded()?t.sourceEntries().length===0?5:6:4))},dependencies:[aM],styles:[`.section-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+h2[_ngcontent-%COMP%], 
+h4[_ngcontent-%COMP%], 
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+}
+
+h4[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.spaced[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.sub[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.fact-head[_ngcontent-%COMP%], 
+.sub-head[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%] {
+  margin-bottom: 10px;
+}
+
+.state-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fact-head[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.sub-head[_ngcontent-%COMP%] {
+  margin: 14px 0 8px;
+}
+
+.sub-head[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.btn.copy[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.pill[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 7px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 36px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty.compact[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  border-style: dashed;
+  background: transparent;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.hint[_ngcontent-%COMP%] {
+  max-width: 520px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.hint.small[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.hint[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.refs[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  color: var(--%NS%text);
+  background: var(--%NS%surface-3);
+  border: 1px solid var(--%NS%border);
+  border-radius: 5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.pad[_ngcontent-%COMP%] {
+  padding: 20px 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.btn[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.btn.primary[_ngcontent-%COMP%], 
+.btn.restore[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.btn.restore[_ngcontent-%COMP%] {
+  margin-top: 14px;
+}
+
+.live-layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+  min-width: 0;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  overflow: hidden;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+ul[_ngcontent-%COMP%] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.store-list[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+}
+
+.store-item[_ngcontent-%COMP%], 
+.log-item[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+.store-item[_ngcontent-%COMP%]:hover, 
+.log-item[_ngcontent-%COMP%]:hover, 
+.event-item[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.store-item[_ngcontent-%COMP%]:focus-visible, 
+.log-item[_ngcontent-%COMP%]:focus-visible, 
+.event-item[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.store-item.selected[_ngcontent-%COMP%], 
+.log-item.selected[_ngcontent-%COMP%], 
+.event-item.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.store-top[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.store-name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.store-meta[_ngcontent-%COMP%], 
+.log-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dot[_ngcontent-%COMP%] {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.store-detail[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 16px;
+}
+
+.detail-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%accent);
+  font-family: var(--%NS%font-mono);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  line-height: 18px;
+  overflow-wrap: anywhere;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.refs[_ngcontent-%COMP%] {
+  margin: 10px 0 0;
+  color: var(--%NS%text-2);
+  line-height: 1.8;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+  min-width: 0;
+}
+
+.fact[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+.kinds[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.kind-chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease), border-color 0.15s var(--%NS%ease), color 0.15s var(--%NS%ease);
+}
+
+.kind-chip[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%text-3);
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text);
+}
+
+.kind-chip.active[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.kind-chip[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.chip-text[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kind-chip[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  flex: none;
+  min-width: 18px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 16px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.nodes[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.node-card[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.node-header[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+  min-width: 0;
+}
+
+.node-label[_ngcontent-%COMP%] {
+  min-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-weight: 500;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.node-meta[_ngcontent-%COMP%] {
+  margin-top: 6px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+  overflow-wrap: anywhere;
+}
+
+.detail[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}`]})},tQ=[`filterInput`];function nQ(e,t){if(e&1){let e=z();P(0,`span`,9),G(1,`Page`),F(),P(2,`app-select`,10),V(`valueChange`,function(t){return x(e),S(U().selectPage(t))}),F()}if(e&2){let e=U();E(2),N(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function rQ(e,t){e&1&&I(0,`section`,7)}var iQ=class e{rpc=$(null);state=b(sJ);actions=b(cJ);filterInput=Ov(`filterInput`);canRestore=this.state.canRestore;filter=this.state.filter;kind=this.state.kind;sourceEntries=this.state.sourceEntries;sourceLoaded=this.state.sourceLoaded;pages=this.state.pages;reduxPages=this.state.reduxPages;allPages=this.state.allPages;failed=this.state.failed;stateLoaded=this.state.stateLoaded;selectedPageId=this.state.selectedPageId;angularPage=this.state.angularPage;maxLog=this.state.maxLog;selectedStoreId=this.state.selectedStoreId;message=this.state.message;page=this.state.page;pageConnected=this.state.pageConnected;reduxPage=this.state.reduxPage;selectedChangeSeq=this.state.selectedChangeSeq;selectedEventSeq=this.state.selectedEventSeq;confirmSeq=this.state.confirmSeq;pageOptions=this.state.pageOptions;liveStores=this.state.liveStores;filteredStores=this.state.filteredStores;store=this.state.store;stateText=this.state.stateText;stateValue=this.state.stateValue;changedPaths=this.state.changedPaths;storeStats=this.state.storeStats;hasLoop=this.state.hasLoop;computedEntries=this.state.computedEntries;logFeed=this.state.logFeed;storeLog=this.state.storeLog;sessionEntries=this.state.sessionEntries;hasEvents=this.state.hasEvents;pageEvents=this.state.pageEvents;changeEntry=this.state.changeEntry;eventEntry=this.state.eventEntry;actionTypes=this.state.actionTypes;usesSignals=this.state.usesSignals;usesClassic=this.state.usesClassic;filteredEntries=this.state.filteredEntries;groupedEntries=this.state.groupedEntries;busy=this.actions.busy;confirmReset=this.actions.confirmReset;dispatchType=this.actions.dispatchType;dispatchPayload=this.actions.dispatchPayload;payloadError=this.actions.payloadError;dispatchRequest=this.actions.dispatchRequest;constructor(){this.state.connect(this.rpc),this.state.focusFilter=()=>this.filterInput()?.focus(),jq(`store`,this.selectedStoreId),T(()=>{let e=this.rpc();e&&this.state.load(e)})}load(e){return this.state.load(e)}retry(){this.state.retry()}selectPage(e){this.state.selectPage(e)}selectStore(e){this.state.selectStore(e)}selectChange(e){this.state.selectChange(e)}selectEvent(e){this.actions.selectEvent(e)}copyState(){return this.state.copyState()}copyPath(e){return this.state.copyPath(e)}copyDiff(e){return this.state.copyDiff(e)}askRestore(e){this.actions.askRestore(e)}cancelRestore(e){this.actions.cancelRestore(e)}restore(e,t){return this.actions.restore(e,t)}backToLatest(){return this.actions.backToLatest()}isSkipped(e){return this.state.isSkipped(e)}canToggle(e){return this.state.canToggle(e)}canAgain(e){return this.state.canAgain(e)}askReset(){this.actions.askReset()}cancelReset(e){this.actions.cancelReset(e)}devtoolsOp(e){return this.actions.devtoolsOp(e)}dispatchAction(e){return this.actions.dispatchAction(e)}dispatchAgain(e){return this.actions.dispatchAgain(e)}clearFilters(){this.state.clearFilters()}changeCount(e){return this.state.changeCount(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-store-inspector`]],viewQuery:function(e,t){e&1&&Ug(t.filterInput,tQ,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`]},features:[rv([sJ,cJ])],decls:12,vars:6,consts:[[`filterInput`,``],[1,`page-intro`],[1,`toolbar`],[`placeholder`,`Filter stores, changes and declarations`,`saveKey`,`store`,1,`search`,3,`valueChange`,`value`],[1,`status`],[`aria-hidden`,`true`,1,`live-dot`],[`appStoreLive`,``,`aria-labelledby`,`ngrx-live-heading`,1,`block`],[`appStoreEvents`,``,`aria-labelledby`,`ngrx-events-heading`,1,`block`],[`appStoreSource`,``,`aria-labelledby`,`ngrx-source-heading`,1,`block`],[`id`,`ngrx-page-label`,1,`visually-hidden`],[`labelledBy`,`ngrx-page-label`,1,`page-select`,3,`valueChange`,`options`,`value`]],template:function(e,t){if(e&1){let e=z();P(0,`p`,1),G(1,` NgRx signal stores and @ngrx/store state from the live page, with every change, plus NGXS, Elf and MiniRx stores. Source declarations lists the stores your files declare.
+`),F(),P(2,`div`,2)(3,`app-search-field`,3,0),U_(`valueChange`,function(n){return x(e),H_(t.filter,n)||(t.filter=n),S(n)}),F(),k(5,nQ,3,2),P(6,`span`,4),I(7,`span`,5),G(8),F()(),I(9,`section`,6),k(10,rQ,1,0,`section`,7),I(11,`section`,8)}e&2&&(E(3),V_(`value`,t.filter),E(2),A(t.allPages().length>1?5:-1),E(),W(`on`,t.pageConnected()),E(2),q(` `,t.stateLoaded()?t.pageConnected()?`Live`:`No page connected`:`Loading…`,` `),E(2),A(t.hasEvents()?10:-1))},dependencies:[iD,JE,AY,UZ,eQ],styles:[`.page-intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  display: flex;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search[_ngcontent-%COMP%]    > input[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  width: 100%;
+  padding-left: 34px;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 24px;
+  min-width: 0;
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  padding: 10px 12px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.page-select[_ngcontent-%COMP%] {
+  flex: 0 1 220px;
+  min-width: 0;
+}
+
+.status[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.live-dot[_ngcontent-%COMP%] {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--%NS%text-3);
+}
+
+.status.on[_ngcontent-%COMP%]   .live-dot[_ngcontent-%COMP%] {
+  background: var(--%NS%ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 20%, transparent);
+  animation: _ngcontent-%COMP%_pulse 2s infinite;
+}
+
+@keyframes _ngcontent-%COMP%_pulse {
+  50% {
+    opacity: 0.4;
+  }
+}
+.block[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .status.on[_ngcontent-%COMP%]   .live-dot[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+@media (max-width: 480px) {
+  .toolbar[_ngcontent-%COMP%] {
+    padding: 8px;
+  }
+  .toolbar[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], 
+   .page-select[_ngcontent-%COMP%] {
+    flex-basis: 100%;
+  }
+}`]})};function aQ(e){let t=e?.pages;return!t||typeof t!=`object`||Array.isArray(t)?[]:Object.values(t).filter(e=>{let t=e;return!!t&&typeof t.pageId==`string`&&Array.isArray(t.clients)&&Array.isArray(t.queries)&&Array.isArray(t.mutations)}).sort((e,t)=>t.reportedAt-e.reportedAt)}function oQ(e){return e.invalidated?`invalidated`:e.stale?`stale`:`fresh`}function sQ(e,t){if(!t)return`never`;let n=Math.max(0,Math.round(e/1e3));return n<60?`${n} s ago`:n<3600?`${Math.round(n/60)} min ago`:`${Math.round(n/3600)} h ago`}function cQ(e){return e===void 0?`not set`:e===null?`Infinity`:e===`static`?`static`:e<1e3?`${e} ms`:e<6e4?`${Math.round(e/100)/10} s`:`${Math.round(e/6e3)/10} min`}function lQ(e,t){return t===`fetching`?`accent`:t===`paused`?`warn`:e===`error`?`danger`:e===`success`?`ok`:e===`pending`?`warn`:`plain`}function uQ(e,t){switch(t){case`all`:return!0;case`fetching`:return e.fetchStatus===`fetching`;case`stale`:return e.stale||e.invalidated;case`inactive`:return e.observers===0;default:return e.status===t}}var dQ=[`detailPanel`],fQ=(e,t)=>({preview:e,id:t}),pQ=(e,t)=>t.id;function mQ(e,t){e&1&&(P(0,`app-state`,3),G(1,`Loading queries…`),F())}function hQ(e,t){if(e&1){let e=z();P(0,`app-state`,5),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Can't read TanStack Query from the devtools server. `),F()}}function gQ(e,t){e&1&&(P(0,`app-state`,6),G(1,` The connected page has no QueryClient yet. `),P(2,`p`,7),G(3,` Add `),P(4,`code`),G(5,`provideTanStackQuery(new QueryClient())`),F(),G(6,` to the app's providers. The tab reads it once something in the app injects it, such as `),P(7,`code`),G(8,`injectQuery()`),F(),G(9,`. `),F()())}function _Q(e,t){e&1&&(P(0,`app-state`,6),G(1,` No page reports a QueryClient yet. `),P(2,`p`,7),G(3,` Open the app with the overlay loaded. The tab reads the `),P(4,`code`),G(5,`QueryClient`),F(),G(6,` that `),P(7,`code`),G(8,`provideTanStackQuery()`),F(),G(9,` registers, once something in the app injects it. `),F()())}function vQ(e,t){e&1&&k(0,gQ,10,0,`app-state`,6)(1,_Q,10,0,`app-state`,6),e&2&&A(+!U().connected())}function yQ(e,t){if(e&1){let e=z();P(0,`app-select`,19),V(`valueChange`,function(t){return x(e),S(U(2).status.set(t??`all`))}),F()}if(e&2){let e=U(2);N(`options`,e.filters)(`value`,e.status())}}function bQ(e,t){if(e&1){let e=z();P(0,`app-select`,20),V(`valueChange`,function(t){return x(e),S(U(2).selectPage(t))}),F()}if(e&2){let e=U(2);N(`options`,e.pageOptions())(`value`,e.page()?.pageId??null)}}function xQ(e,t){if(e&1&&(P(0,`p`,21),G(1),F()),e&2){let e=U(),t=U(2);E(),J(` The page reports the `,t.view()===`queries`?`300 queries`:`100 mutations`,` it updated last and leaves out `,t.view()===`queries`?e.queries:e.mutations,` more. `)}}function SQ(e,t){if(e&1&&k(0,xQ,2,2,`p`,21),e&2){let e=t;A(e.queries||e.mutations?0:-1)}}function CQ(e,t){e&1&&(P(0,`p`,22),G(1,`No query in the cache yet.`),F(),P(2,`p`),G(3,`Queries show up here when the app creates them with `),P(4,`code`),G(5,`injectQuery()`),F(),G(6,`.`),F())}function wQ(e,t){e&1&&(P(0,`p`,22),G(1,`No mutation yet.`),F(),P(2,`p`),G(3,`Mutations show up here once the app calls `),P(4,`code`),G(5,`mutate()`),F(),G(6,`.`),F())}function TQ(e,t){if(e&1&&(P(0,`div`,17),k(1,CQ,7,0)(2,wQ,7,0),F()),e&2){let e=U(2);E(),A(e.view()===`queries`?1:2)}}function EQ(e,t){if(e&1){let e=z();P(0,`div`,17)(1,`p`,22),G(2,`Nothing matches the filters.`),F(),P(3,`button`,23),V(`click`,function(){x(e),U();let t=Gg(13);return U().clearFilters(),S(t.focus())}),G(4,` Clear filters `),F()()}}function DQ(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,27),V(`click`,function(){let t=x(e).$implicit;return S(U(3).select(t.id))}),P(2,`span`,28)(3,`code`,29),G(4),F(),P(5,`span`,30),G(6),F()(),P(7,`span`,31),G(8),F()()()}if(e&2){let e=t.$implicit,n=U(3);E(),W(`selected`,e.id===n.selected()?.id),O(`aria-pressed`,e.id===n.selected()?.id),E(2),N(`title`,e.label),E(),K(e.label),E(),O(`data-tone`,e.tone),E(),K(e.status),E(2),K(e.meta)}}function OQ(e,t){if(e&1&&(P(0,`span`,34),G(1),F()),e&2){let e=U();E(),J(`(`,e.dataUpdateCount,` `,e.dataUpdateCount===1?`update`:`updates`,`)`)}}function kQ(e,t){e&1&&(P(0,`span`,34),G(1,`(disabled)`),F())}function AQ(e,t){if(e&1&&(P(0,`dt`),G(1,`Failures`),F(),P(2,`dd`),G(3),F()),e&2){let e=U();E(3),K(e.failureCount)}}function jQ(e,t){if(e&1&&(P(0,`dt`),G(1,`Error`),F(),P(2,`dd`)(3,`code`,40),G(4),F()()),e&2){let e=U();E(4),K(e.error)}}function MQ(e,t){if(e&1&&(P(0,`p`,37),G(1),F()),e&2){let e=U(4);E(),K(e.writesOff)}}function NQ(e,t){e&1&&(P(0,`p`,34),G(1,`No data yet.`),F())}function PQ(e,t){if(e&1&&Eg(0,39),e&2){let e=U();U(3),N(`ngTemplateOutlet`,Gg(5))(`ngTemplateOutletContext`,ov(2,fQ,e.preview,e.id))}}function FQ(e,t){if(e&1){let e=z();P(0,`h2`,32)(1,`code`),G(2),F()(),P(3,`dl`,33)(4,`dt`),G(5,`Status`),F(),P(6,`dd`)(7,`span`,30),G(8),F()(),P(9,`dt`),G(10,`Fetch status`),F(),P(11,`dd`),G(12),F(),P(13,`dt`),G(14,`Freshness`),F(),P(15,`dd`),G(16),F(),P(17,`dt`),G(18,`Data updated`),F(),P(19,`dd`),G(20),k(21,OQ,2,2,`span`,34),F(),P(22,`dt`),G(23,`Observers`),F(),P(24,`dd`),G(25),k(26,kQ,2,0,`span`,34),F(),P(27,`dt`),G(28,`staleTime`),F(),P(29,`dd`),G(30),F(),P(31,`dt`),G(32,`gcTime`),F(),P(33,`dd`),G(34),F(),k(35,AQ,4,1),k(36,jQ,5,1),F(),P(37,`div`,35)(38,`button`,36),V(`click`,function(){let t=x(e);return S(U(3).act(`invalidate`,t.id))}),G(39,` Invalidate `),F(),P(40,`button`,36),V(`click`,function(){let t=x(e);return S(U(3).act(`refetch`,t.id))}),G(41,` Refetch `),F()(),k(42,MQ,2,1,`p`,37),P(43,`h3`,38),G(44,`Data`),F(),k(45,NQ,2,0,`p`,34)(46,PQ,1,5,`ng-container`,39)}if(e&2){let e=t,n=U(3);E(2),K(e.keyText),E(5),O(`data-tone`,n.tone(e.status)),E(),K(e.status),E(4),K(e.fetchStatus),E(4),K(n.freshnessOf(e)),E(4),q(` `,n.age(e.dataUpdatedAt),` `),E(),A(e.dataUpdateCount?21:-1),E(4),q(` `,e.observers,` `),E(),A(e.disabled?26:-1),E(4),K(n.duration(e.staleTime)),E(4),K(n.duration(e.gcTime)),E(),A(e.failureCount?35:-1),E(),A(e.error?36:-1),E(2),N(`disabled`,n.busy()||!n.canWrite()),O(`aria-describedby`,n.canWrite()?null:`query-writes-off`),E(2),N(`disabled`,n.busy()||!n.canWrite()),O(`aria-describedby`,n.canWrite()?null:`query-writes-off`),E(2),A(n.canWrite()?-1:42),E(3),A(e.hasData?46:45)}}function IQ(e,t){e&1&&(P(0,`span`,34),G(1,`(paused)`),F())}function LQ(e,t){if(e&1&&(P(0,`dt`),G(1,`Failures`),F(),P(2,`dd`),G(3),F()),e&2){let e=U();E(3),K(e.failureCount)}}function RQ(e,t){if(e&1&&(P(0,`dt`),G(1,`Error`),F(),P(2,`dd`)(3,`code`,40),G(4),F()()),e&2){let e=U();E(4),K(e.error)}}function zQ(e,t){if(e&1&&(P(0,`h2`,32)(1,`code`),G(2),F()(),P(3,`dl`,33)(4,`dt`),G(5,`Status`),F(),P(6,`dd`)(7,`span`,30),G(8),F(),k(9,IQ,2,0,`span`,34),F(),P(10,`dt`),G(11,`Submitted`),F(),P(12,`dd`),G(13),F(),k(14,LQ,4,1),k(15,RQ,5,1),F(),P(16,`h3`,38),G(17,`Variables and data`),F(),Eg(18,39)),e&2){let e=t,n=U(3),r=Gg(5);E(2),K(n.mutationLabel(e)),E(5),O(`data-tone`,n.tone(e.status)),E(),K(e.status),E(),A(e.isPaused?9:-1),E(4),K(n.age(e.submittedAt)),E(),A(e.failureCount?14:-1),E(),A(e.error?15:-1),E(3),N(`ngTemplateOutlet`,r)(`ngTemplateOutletContext`,ov(9,fQ,e.variables,e.id))}}function BQ(e,t){if(e&1&&(P(0,`h2`,41),G(1,`Details`),F(),P(2,`p`,34),G(3),F()),e&2){let e=U(3);E(3),q(` Select a `,e.view()===`queries`?`query`:`mutation`,` to see its details. `)}}function VQ(e,t){if(e&1&&(P(0,`div`,18)(1,`ul`,24),j(2,DQ,9,8,`li`,null,pQ),F(),P(4,`section`,25,2),k(6,FQ,47,19)(7,zQ,19,12)(8,BQ,4,1),P(9,`p`,26),G(10),F()()()),e&2){let e,t=U(2);E(),O(`aria-label`,t.view()===`queries`?`Queries`:`Mutations`),E(),M(t.rows()),E(4),A((e=t.selectedQuery())?6:(e=t.selectedMutation())?7:8,e),E(4),K(t.message())}}function HQ(e,t){if(e&1){let e=z();P(0,`p`,8),G(1,` The queries and mutations of the TanStack Query client the app provides, read from the live page. Keys, errors and data are masked like other live data. `),F(),P(2,`div`,9)(3,`div`,10)(4,`button`,11),V(`click`,function(){return x(e),S(U().setView(`queries`))}),G(5,` Queries `),P(6,`span`,12),G(7),F()(),P(8,`button`,11),V(`click`,function(){return x(e),S(U().setView(`mutations`))}),G(9,` Mutations `),P(10,`span`,12),G(11),F()()(),P(12,`app-search-field`,13,1),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.filter,t)||(n.filter=t),S(t)}),F(),k(14,yQ,1,2,`app-select`,14),k(15,bQ,1,2,`app-select`,15),P(16,`span`,16),G(17),F()(),k(18,SQ,1,1),k(19,TQ,3,1,`div`,17)(20,EQ,5,0,`div`,17)(21,VQ,11,3,`div`,18)}if(e&2){let e,t=U();E(4),O(`aria-pressed`,t.view()===`queries`),E(3),K(t.page()?.queries.length??0),E(),O(`aria-pressed`,t.view()===`mutations`),E(3),K(t.page()?.mutations.length??0),E(),V_(`value`,t.filter),E(2),A(t.view()===`queries`?14:-1),E(),A(t.pages().length>1?15:-1),E(2),K(t.countText()),E(),A((e=t.page()?.more)?18:-1,e),E(),A(t.allRows().length?t.rows().length?21:20:19)}}function UQ(e,t){if(e&1&&(P(0,`p`,42),G(1,`Variables`),F(),P(2,`pre`,44),G(3),F()),e&2){let e=U(),t=U(3);E(3),K(t.prettyText(e.variables))}}function WQ(e,t){if(e&1&&(k(0,UQ,4,1),P(1,`p`,42),G(2,`Data`),F(),P(3,`pre`,43),G(4),F()),e&2){let e=t,n=U(3);A(e.variables===void 0?-1:0),E(4),K(e.data===void 0?`No data.`:n.prettyText(e.data))}}function GQ(e,t){if(e&1&&(P(0,`p`,34),G(1),F()),e&2){let e=U(3);E(),K(e.full().result.error??`The page did not send the data.`)}}function KQ(e,t){if(e&1&&k(0,WQ,5,2)(1,GQ,2,1,`p`,34),e&2){let e;A((e=U(2).full().result.detail)?0:1,e)}}function qQ(e,t){if(e&1&&(P(0,`pre`,45),G(1),F()),e&2){let e=U(2).preview,t=U();E(),K(t.prettyText(e))}}function JQ(e,t){if(e&1){let e=z();k(0,qQ,2,1,`pre`,45),P(1,`button`,36),V(`click`,function(){x(e);let t=U().id;return S(U().loadData(t))}),G(2),F()}if(e&2){let e=U().preview,t=U();A(e===void 0?-1:0),E(),N(`disabled`,t.loadingData()),E(),q(` `,t.loadingData()?`Loading…`:`Show all data`,` `)}}function YQ(e,t){if(e&1&&k(0,KQ,2,1)(1,JQ,3,3),e&2){let e=t.id;A(U().full()?.id===e?0:1)}}var XQ=[{value:`all`,label:`All statuses`},{value:`fetching`,label:`Fetching`},{value:`success`,label:`Success`},{value:`error`,label:`Error`},{value:`pending`,label:`Pending`},{value:`stale`,label:`Stale or invalidated`},{value:`inactive`,label:`No observers`}],ZQ=class e{rpc=$(null);angularPages=pD(()=>this.rpc());connected=X(()=>Object.keys(this.angularPages()).length>0);destroyRef=b(Os);hostPageId=tT();unsubscribe;detailPanel=Ov(`detailPanel`);filters=XQ;writesOff=Mw(`tanstackQuery`);canWrite=X(()=>OT(this.rpc(),`tanstackQuery`));pages=w([]);loaded=w(!1);failed=w(!1);view=w(`queries`);filter=w(``);status=w(`all`);selectedPageId=w(null);selectedId=w(null);busy=w(!1);message=w(``);loadingData=w(!1);full=Q({source:()=>this.selectedId(),computation:()=>null});now=w(Date.now());page=X(()=>{let e=this.pages();return e.find(e=>e.pageId===this.selectedPageId())??e.find(e=>e.pageId===this.hostPageId)??e[0]??null});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url})));queries=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.status();return(this.page()?.queries??[]).filter(n=>uQ(n,t)&&(!e||n.keyText.toLowerCase().includes(e)))});mutations=X(()=>{let e=this.filter().trim().toLowerCase();return(this.page()?.mutations??[]).filter(t=>!e||this.mutationLabel(t).toLowerCase().includes(e))});allRows=X(()=>this.view()===`queries`?this.page()?.queries??[]:this.page()?.mutations??[]);rows=X(()=>(this.now(),this.view()===`queries`?this.queries().map(e=>({id:e.id,label:e.keyText,status:e.fetchStatus===`idle`?e.status:e.fetchStatus,tone:lQ(e.status,e.fetchStatus),meta:`${oQ(e)} · ${e.observers} ${e.observers===1?`observer`:`observers`} · ${this.age(e.dataUpdatedAt)}`})):this.mutations().map(e=>({id:e.id,label:this.mutationLabel(e),status:e.isPaused?`paused`:e.status,tone:e.isPaused?`warn`:lQ(e.status),meta:`submitted ${this.age(e.submittedAt)}`}))));countText=X(()=>{let e=this.allRows().length;return`${this.rows().length} of ${e} ${this.view()===`queries`?`queries`:`mutations`}`});selectedQuery=X(()=>this.view()===`queries`?this.page()?.queries.find(e=>e.id===this.selectedId())??null:null);selectedMutation=X(()=>this.view()===`mutations`?this.page()?.mutations.find(e=>e.id===this.selectedId())??null:null);selected=X(()=>this.selectedQuery()??this.selectedMutation());constructor(){jq(`queries`,this.selectedId),T(()=>{let e=this.rpc();e&&this.load(e)});let e=setInterval(()=>this.now.set(Date.now()),1e3);this.destroyRef.onDestroy(()=>{clearInterval(e),this.unsubscribe?.()})}age(e){let t=this.page();if(!t)return sQ(0,e);let n=t.at-t.reportedAt;return sQ(this.now()+n-e,e)}freshnessOf(e){return oQ(e)}duration(e){return cQ(e)}tone(e){return lQ(e)}prettyText(e){return aJ(e)}mutationLabel(e){return e.keyText??`Mutation ${e.id}`}setView(e){this.view.set(e),this.selectedId.set(null),this.message.set(``)}selectPage(e){this.selectedPageId.set(e),this.selectedId.set(null),this.message.set(``)}select(e){this.selectedId.set(e),this.message.set(``),typeof matchMedia==`function`&&matchMedia(`(max-width: 880px)`).matches&&this.detailPanel()?.nativeElement.scrollIntoView?.({block:`nearest`})}clearFilters(){this.filter.set(``),this.status.set(`all`)}retry(){let e=this.rpc();e&&this.load(e)}async loadData(e){let t=this.page();if(t&&!this.loadingData()){this.loadingData.set(!0);try{let n=await oT(this.rpc(),`request-tanstack-query`,{pageId:t.pageId,request:{type:`detail`,id:e}});this.selectedId()===e&&this.full.set({id:e,result:n??{}})}catch{this.selectedId()===e&&this.full.set({id:e,result:{error:`Could not reach the page to read the data.`}})}finally{this.loadingData.set(!1)}}}async act(e,t){let n=this.page();if(n&&!this.busy()){this.busy.set(!0);try{let r=await oT(this.rpc(),`request-tanstack-query`,{pageId:n.pageId,request:{type:e,id:t}});this.message.set(r?.error??r?.message??`Done.`),this.full.set(null)}catch{this.message.set(`Could not reach the page.`)}finally{this.busy.set(!1)}}}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`tanstack-query`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(aQ(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-query-inspector`]],viewQuery:function(e,t){e&1&&Ug(t.detailPanel,dQ,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`]},decls:6,vars:1,consts:[[`dataTpl`,``],[`search`,``],[`detailPanel`,``],[`kind`,`loading`],[`kind`,`error`],[`kind`,`error`,3,`retry`],[`kind`,`empty`],[`detail`,``],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Show`,1,`views`],[`type`,`button`,1,`view`,3,`click`],[1,`badge`],[`placeholder`,`Filter by key`,`saveKey`,`query`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Status`,1,`filter-select`,3,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[`role`,`status`,1,`count`],[`role`,`status`,1,`state`,`empty-card`],[1,`layout`],[`ariaLabel`,`Status`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[1,`notice`],[1,`state-title`],[`type`,`button`,1,`btn`,3,`click`],[`appRovingList`,`button.row`,1,`rows`],[`aria-labelledby`,`query-detail-heading`,1,`detail`],[`role`,`status`,1,`message`],[`type`,`button`,1,`row`,3,`click`],[1,`row-top`],[1,`key`,3,`title`],[1,`pill`],[1,`row-meta`],[`id`,`query-detail-heading`,1,`detail-title`],[1,`kv`],[1,`muted`],[1,`actions`],[`type`,`button`,1,`btn`,3,`click`,`disabled`],[`id`,`query-writes-off`,1,`hint`],[1,`sub`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[1,`error`],[`id`,`query-detail-heading`,1,`sr-only`],[1,`label`],[`tabindex`,`0`,`aria-label`,`Data`],[`tabindex`,`0`,`aria-label`,`Variables`],[`tabindex`,`0`,`aria-label`,`Preview`]],template:function(e,t){e&1&&(k(0,mQ,2,0,`app-state`,3)(1,hQ,2,0,`app-state`,4)(2,vQ,2,1)(3,HQ,22,10),Hh(4,YQ,2,1,`ng-template`,null,0,mv)),e&2&&A(t.loaded()?t.failed()?1:t.pages().length?3:2:0)},dependencies:[iD,uy,XV,JE,aR],styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+  font-size: 13px;
+  color: var(--%NS%text);
+}
+
+code[_ngcontent-%COMP%], 
+pre[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.intro[_ngcontent-%COMP%] {
+  max-width: 720px;
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.sr-only[_ngcontent-%COMP%] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.views[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.view[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.view[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.view[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.view[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.badge[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.filter-select[_ngcontent-%COMP%], 
+.page-select[_ngcontent-%COMP%] {
+  flex: 0 1 200px;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(220px, 2fr) minmax(0, 3fr);
+  gap: 12px;
+  align-items: start;
+  min-width: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+ul[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rows[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  padding: 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 100%;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.row[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.row.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.row-top[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.key[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.pill[_ngcontent-%COMP%] {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.pill[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: transparent;
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.pill[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: transparent;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.pill[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: transparent;
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.pill[data-tone=accent][_ngcontent-%COMP%] {
+  border-color: transparent;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.detail[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 64px;
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+  padding: 14px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.detail-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.kv[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 6px 14px;
+  margin: 0;
+}
+
+.kv[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.kv[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.error[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+  white-space: pre-wrap;
+}
+
+.sub[_ngcontent-%COMP%], 
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 4px 0 0;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+pre[_ngcontent-%COMP%] {
+  max-height: 320px;
+  margin: 0;
+  padding: 8px 10px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+pre[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  justify-self: start;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.message[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.message[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  line-height: 1.5;
+}
+
+.empty-card[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 32px 20px;
+  text-align: center;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.state-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+@media (max-width: 880px) {
+  .layout[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .detail[_ngcontent-%COMP%] {
+    position: static;
+  }
+}
+@media (max-width: 480px) {
+  .search[_ngcontent-%COMP%], 
+   .filter-select[_ngcontent-%COMP%], 
+   .page-select[_ngcontent-%COMP%] {
+    flex-basis: 100%;
+  }
+  .count[_ngcontent-%COMP%] {
+    margin-left: 0;
+  }
+  .kv[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}`]})};function QQ(e,t){if(e&1){let e=z();L(0,`button`,2),H(`click`,function(){return x(e),S(U().confirmAct.emit(`restore`))}),G(1),R()}if(e&2){let e=U();W(`armed`,e.armed()===`restore`),B(`disabled`,!e.canWrite()),O(`aria-describedby`,e.canWrite()?null:`forms-writes-off`)(`title`,`Restore `+e.snapshot()),E(),q(` `,e.armed()===`restore`?`Confirm restore`:`Restore `+e.snapshot(),` `)}}function $Q(e,t){if(e&1&&(L(0,`p`,9),G(1),R()),e&2){let e=U();E(),K(e.writesOff())}}var e$=class e{canWrite=$(!1);writesOff=$(``);picking=$(null);snapshot=$(null);armed=$(null);message=$(``);act=xv();confirmAct=xv();pick=xv();cancelPick=xv();static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-action-bar`]],inputs:{canWrite:[1,`canWrite`],writesOff:[1,`writesOff`],picking:[1,`picking`],snapshot:[1,`snapshot`],armed:[1,`armed`],message:[1,`message`]},outputs:{act:`act`,confirmAct:`confirmAct`,pick:`pick`,cancelPick:`cancelPick`},decls:22,vars:21,consts:[[1,`action-bar`],[`role`,`group`,`aria-label`,`Form actions`,1,`actions`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`type`,`button`,1,`small`,3,`click`],[`aria-hidden`,`true`,1,`divider`],[`type`,`button`,1,`small`,3,`armed`,`disabled`],[`aria-hidden`,`true`,1,`spacer`],[`type`,`button`,1,`small`,`danger`,3,`click`,`disabled`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`id`,`forms-writes-off`,1,`muted`],[`role`,`status`,1,`status`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`div`,1)(2,`button`,2),H(`click`,function(){return t.act.emit(`touch-all`)}),G(3,` Touch all `),R(),L(4,`button`,2),H(`click`,function(){return t.act.emit(`revalidate`)}),G(5,` Revalidate `),R(),L(6,`button`,3),H(`click`,function(){return t.act.emit(`focus-first-invalid`)}),G(7,` Focus first invalid `),R(),L(8,`button`,3),H(`click`,function(){return t.picking()?t.cancelPick.emit():t.pick.emit()}),G(9),R(),Sg(10,`span`,4),L(11,`button`,3),H(`click`,function(){return t.act.emit(`snapshot`)}),G(12,`Snapshot`),R(),k(13,QQ,2,6,`button`,5),Sg(14,`span`,6),L(15,`button`,7),H(`click`,function(){return t.confirmAct.emit(`reset`)}),G(16),R(),L(17,`button`,8),H(`click`,function(){return t.confirmAct.emit(`submit`)}),G(18),R()(),k(19,$Q,2,1,`p`,9),L(20,`p`,10),G(21),R()()),e&2&&(E(2),B(`disabled`,!t.canWrite()),O(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),E(2),B(`disabled`,!t.canWrite()),O(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),E(4),W(`on`,t.picking()),O(`aria-pressed`,!!t.picking()),E(),q(` `,t.picking()?`Cancel picking`:`Pick field on page`,` `),E(4),A(t.snapshot()?13:-1),E(2),W(`armed`,t.armed()===`reset`),B(`disabled`,!t.canWrite()),O(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),E(),q(` `,t.armed()===`reset`?`Confirm reset`:`Reset`,` `),E(),W(`armed`,t.armed()===`submit`),B(`disabled`,!t.canWrite()),O(`aria-describedby`,t.canWrite()?null:`forms-writes-off`),E(),q(` `,t.armed()===`submit`?`Confirm submit`:`Submit`,` `),E(),A(t.canWrite()?-1:19),E(2),K(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.action-bar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.divider[_ngcontent-%COMP%] {
+  width: 1px;
+  height: 20px;
+  background: var(--%NS%border-strong);
+}
+
+.spacer[_ngcontent-%COMP%] {
+  flex: 1 1 0;
+}
+
+.actions[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%]:not(.primary):not(.danger) {
+  max-width: 240px;
+}
+
+.small.on[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+.status[_ngcontent-%COMP%]:empty {
+  height: 0;
+  margin-top: -8px;
+}
+
+@media (max-width: 480px) {
+  .spacer[_ngcontent-%COMP%], 
+   .divider[_ngcontent-%COMP%] {
+    display: none;
+  }
+}`]})};function t$(e){return(e??``).match(/```ts\n([\s\S]*)```\s*$/)?.[1]??null}function n$(e){return`${e.split(`@`)[0].replace(/[^a-zA-Z0-9]+/g,`-`).replace(/([a-z0-9])([A-Z])/g,`$1-$2`).replace(/^-+|-+$/g,``).toLowerCase()||`form`}.spec.ts`}var r$=class e{formId=$.required();rpc=$(null);message=Q({source:this.formId,computation:()=>``});async run(e){let t=this.formId(),n=await mT(this.rpc(),`forms-explain`,{kind:`playwright`,form:t});if(this.formId()!==t)return;if(n===null){this.message.set(`The devtools server did not answer. Try again.`);return}let r=t$(n);if(!r){this.message.set(xT(n));return}if(e===`download`){let e=URL.createObjectURL(new Blob([r],{type:`text/typescript`})),n=document.createElement(`a`);n.href=e,n.download=n$(t),n.click(),setTimeout(()=>URL.revokeObjectURL(e),0),this.message.set(`Downloaded ${n.download}.`);return}try{await navigator.clipboard.writeText(r),this.message.set(`Copied.`)}catch{this.message.set(`Clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-export-test`]],inputs:{formId:[1,`formId`],rpc:[1,`rpc`]},decls:9,vars:1,consts:[[`role`,`group`,`aria-label`,`Export the history as a test`,1,`export`],[1,`label`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`span`,1),G(2,`Playwright test`),R(),L(3,`button`,2),H(`click`,function(){return t.run(`copy`)}),G(4,`Copy Playwright test`),R(),L(5,`button`,2),H(`click`,function(){return t.run(`download`)}),G(6,`Download test`),R(),L(7,`span`,3),G(8),R()()),e&2&&(E(8),K(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.export[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.status[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+}`]})},i$=[`heading`];function a$(e,t){if(e&1){let e=z();L(0,`div`,6)(1,`p`,9),G(2,`Could not explain this field. The devtools server did not answer.`),R(),L(3,`button`,11),H(`click`,function(){return x(e),S(U().retry())}),G(4,`Try again`),R()()}}function o$(e,t){if(e&1&&(L(0,`pre`,7),G(1),R()),e&2){let e=U();O(`aria-busy`,e.text()===null?`true`:null),E(),K(e.text()??`Loading…`)}}function s$(e,t){if(e&1){let e=z();L(0,`div`,8)(1,`label`,15),G(2),R(),L(3,`input`,16),H(`input`,function(t){return x(e),S(U().draft.set(t.target.value))})(`keydown.enter`,function(){return x(e),S(U().setValue())}),R(),L(4,`button`,17),H(`click`,function(){return x(e),S(U().setValue())}),G(5,` Set `),R()()}if(e&2){let e=U();E(2),q(`New value for `,e.node().path),E(),B(`value`,e.draft()),E(),B(`disabled`,!e.canWrite()),O(`aria-describedby`,e.canWrite()?null:`field-writes-off`)}}function c$(e,t){if(e&1&&(L(0,`p`,9),G(1),L(2,`a`,18),G(3,`How to unmask it`),R()()),e&2){let e=U();E(),q(` No Set editor: this field is redacted (`,e.redactLabel(e.node().redacted),`). `),E(),B(`href`,e.unmaskDocsUrl,Fu)}}function l$(e,t){if(e&1&&(L(0,`p`,13),G(1),R()),e&2){let e=U();E(),K(e.writesOff)}}var u$=class e{form=$.required();node=$.required();version=$(0);rpc=$(null);closed=xv();canWrite=X(()=>OT(this.rpc(),`forms`));writesOff=Mw(`forms`);redactLabel=gT;unmaskDocsUrl=_T;target=X(()=>`${this.form().id}|${this.node().path}`);text=Q({source:this.target,computation:()=>null});failed=Q({source:this.target,computation:()=>!1});attempt=w(0);heading=Ov.required(`heading`);host=b(Rl);draft=Q({source:this.target,computation:()=>``});message=Q({source:this.target,computation:()=>``});constructor(){T(()=>{let e=this.form().id,t=this.node().path;this.version(),this.attempt();let n=this.rpc();Z(()=>this.load(n,e,t))}),Fv(()=>{this.target();let e=Z(this.heading).nativeElement;this.host.nativeElement.scrollIntoView?.({block:`nearest`}),e.focus({preventScroll:!0})})}async load(e,t,n){if(!e)return;let r=await mT(e,`forms-explain`,{kind:`field`,form:t,path:n});if(this.form().id===t&&this.node().path===n){if(r===null){this.failed.set(!0);return}this.failed.set(!1),this.text.set(xT(r))}}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}async act(e){let t=this.form().id,n=this.node().path,r=await vT(this.rpc(),{action:e,formId:t,path:n});this.form().id===t&&this.node().path===n&&this.message.set(r.expression?`${yT(r)} ${r.expression}`:yT(r))}async setValue(){let e=this.form().id,t=this.node().path,n=await vT(this.rpc(),{action:`set-value`,formId:e,path:t,value:this.draft(),coerce:!0,mode:`user`});this.form().id===e&&this.node().path===t&&this.message.set(yT(n))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-field-detail`]],viewQuery:function(e,t){e&1&&Ug(t.heading,i$,5),e&2&&Wg()},hostAttrs:[`role`,`region`,`aria-labelledby`,`forms-field-heading`],inputs:{form:[1,`form`],node:[1,`node`],version:[1,`version`],rpc:[1,`rpc`]},outputs:{closed:`closed`},decls:26,vars:11,consts:[[`heading`,``],[1,`head`],[1,`section-label`],[`id`,`forms-field-heading`,`tabindex`,`-1`],[1,`tag`],[`type`,`button`,1,`small`,`close`,3,`click`],[`role`,`alert`,1,`failed`],[1,`explain`],[1,`editor`],[1,`muted`],[`role`,`group`,`aria-label`,`Field actions`,1,`row`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`id`,`field-writes-off`,1,`muted`],[`role`,`status`,1,`status`],[`for`,`field-value`,1,`sr-only`],[`id`,`field-value`,`type`,`text`,`placeholder`,`New value, read as the current value's type`,`autocomplete`,`off`,`spellcheck`,`false`,1,`field-input`,3,`input`,`keydown.enter`,`value`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){e&1&&(L(0,`div`,1)(1,`span`,2),G(2,`Field`),R(),L(3,`h3`,3,0),G(5),R(),L(6,`span`,4),G(7),R(),L(8,`button`,5),H(`click`,function(){return t.closed.emit()}),G(9,` Close `),R()(),k(10,a$,5,0,`div`,6)(11,o$,2,2,`pre`,7),k(12,s$,6,4,`div`,8)(13,c$,4,2,`p`,9),L(14,`div`,10)(15,`button`,11),H(`click`,function(){return t.act(`focus`)}),G(16,`Focus`),R(),L(17,`button`,12),H(`click`,function(){return t.act(`mark-touched`)}),G(18,` Touch `),R(),L(19,`button`,12),H(`click`,function(){return t.act(`revalidate`)}),G(20,` Revalidate `),R(),L(21,`button`,11),H(`click`,function(){return t.act(`store-as-global`)}),G(22,`Store as global`),R()(),k(23,l$,2,1,`p`,13),L(24,`p`,14),G(25),R()),e&2&&(E(5),K(t.node().path||`(form)`),E(2),K(t.node().type),E(),O(`aria-label`,`Close details for `+(t.node().path||`the form`)),E(2),A(t.failed()?10:11),E(2),A(t.node().type===`control`&&!t.node().redacted?12:t.node().type===`control`?13:-1),E(5),B(`disabled`,!t.canWrite()),O(`aria-describedby`,t.canWrite()?null:`field-writes-off`),E(2),B(`disabled`,!t.canWrite()),O(`aria-describedby`,t.canWrite()?null:`field-writes-off`),E(4),A(t.canWrite()?-1:23),E(2),K(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.head[_ngcontent-%COMP%]   .section-label[_ngcontent-%COMP%] {
+  flex-basis: 100%;
+}
+
+h3[_ngcontent-%COMP%] {
+  flex: 1 1 0;
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  border-radius: 4px;
+}
+
+h3[_ngcontent-%COMP%]:focus {
+  outline: none;
+}
+
+a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  border-radius: 2px;
+}
+
+a[_ngcontent-%COMP%]:focus-visible, 
+h3[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.close[_ngcontent-%COMP%] {
+  margin-left: auto;
+}
+
+.failed[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.failed[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  font-size: 12.5px;
+}
+
+.editor[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.editor[_ngcontent-%COMP%]   .field-input[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.status[_ngcontent-%COMP%] {
+  margin-top: -4px;
+}
+
+.status[_ngcontent-%COMP%]:empty {
+  height: 0;
+  margin: -12px 0 0;
+}`]})},d$=()=>[],f$=(e,t)=>t.id,p$=(e,t)=>t.node.path;function m$(e,t){if(e&1){let e=z();P(0,`label`)(1,`input`,10),V(`change`,function(){let t=x(e).$implicit;return S(U().toggleChip(t.id))}),F(),G(2),F()}if(e&2){let e=t.$implicit,n=U();E(),N(`checked`,n.active().has(e.id)),E(),q(` `,e.label,` `)}}function h$(e,t){if(e&1){let e=z();P(0,`button`,25),V(`click`,function(){x(e);let t=U(2).$implicit;return S(U().toggleEdit(t.node))}),G(1,` Edit `),F()}if(e&2){let e=U(2).$implicit,t=U();N(`disabled`,!t.canWrite()),O(`aria-label`,`Edit `+(e.node.path||`the form`))(`aria-expanded`,t.editing()===e.node.path)(`aria-controls`,t.editing()===e.node.path?`forms-inline-editor`:null)(`aria-describedby`,t.canWrite()?null:`forms-writes-off`)}}function g$(e,t){if(e&1&&(P(0,`div`,17),G(1,` typed `),P(2,`code`),G(3),uv(4,`json`),F(),G(5,`, not in the model yet `),F()),e&2){let e=U(2).$implicit;E(3),K(dv(4,1,e.node.uncommitted))}}function _$(e,t){if(e&1&&(P(0,`div`,17),G(1,` resets to `),P(2,`code`),G(3),uv(4,`json`),F()()),e&2){let e=U(2).$implicit;E(3),K(dv(4,1,e.node.defaultValue))}}function v$(e,t){if(e&1&&(P(0,`code`),G(1),uv(2,`json`),F(),k(3,h$,2,5,`button`,24),k(4,g$,6,3,`div`,17),k(5,_$,5,3,`div`,17)),e&2){let e=U().$implicit;E(),K(dv(2,4,e.node.value)),E(2),A(e.node.materialized===!1?-1:3),E(),A(e.node.uncommitted===void 0?-1:4),E(),A(e.node.defaultValue===void 0?-1:5)}}function y$(e,t){e&1&&(P(0,`span`,17),G(1,`not created yet`),F())}function b$(e,t){if(e&1&&(P(0,`span`,18),G(1),F()),e&2){let e=U().$implicit;O(`data-status`,e.node.status),E(),K(e.node.status)}}function x$(e,t){e&1&&(P(0,`span`),G(1,`touched`),F())}function S$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),K(e.node.changed===!1?`dirty, unchanged`:`dirty`)}}function C$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),q(`not validated (`,e.node.skipped,`)`)}}function w$(e,t){if(e&1&&(P(0,`span`,20),G(1),F()),e&2){let e=U().$implicit;E(),q(`stale: `,e.node.stale.join(`, `))}}function T$(e,t){e&1&&(P(0,`span`,20),G(1,`view out of sync`),F())}function E$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit,t=U();E(),q(`redacted: `,t.redactLabel(e.node.redacted))}}function D$(e,t){e&1&&(P(0,`span`),G(1,`required`),F())}function O$(e,t){e&1&&(P(0,`span`),G(1,`readonly`),F())}function k$(e,t){e&1&&(P(0,`span`),G(1,`hidden`),F())}function A$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),q(`updates on `,e.node.updateOn)}}function j$(e,t){e&1&&(P(0,`span`),G(1,`debouncing`),F())}function M$(e,t){e&1&&(P(0,`span`),G(1,`validators`),F())}function N$(e,t){e&1&&(P(0,`span`),G(1,`async validator`),F())}function P$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function F$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),K(e.node.accessor)}}function I$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),q(`name `,e.node.name)}}function L$(e,t){if(e&1&&(P(0,`span`),G(1),uv(2,`json`),F()),e&2){let e=t.$implicit;E(),q(`metadata `,dv(2,1,e))}}function R$(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=t.$implicit;E(),q(`disabled: `,e)}}function z$(e,t){if(e&1&&(P(0,`span`,27),G(1),F()),e&2){let e=U().$implicit;E(),q(`at `,e.params.path)}}function B$(e,t){if(e&1&&(P(0,`span`,27),G(1),F()),e&2){let e=U().$implicit,t=U(2);E(),K(t.sourceText(e))}}function V$(e,t){if(e&1&&(P(0,`div`),G(1),P(2,`code`,26),G(3),F(),k(4,z$,2,1,`span`,27),k(5,B$,2,1,`span`,27),F()),e&2){let e=t.$implicit,n=U().$implicit,r=U();E(),q(` `,r.errorText(n.node,e),` `),E(2),K(e.kind),E(),A(e.kind===`standardSchema`&&e.params?.path?4:-1),E(),A(e.source?5:-1)}}function H$(e,t){e&1&&(P(0,`div`,22),G(1,`not shown to the user`),F())}function U$(e,t){if(e&1){let e=z();P(0,`label`,34),G(1),F(),P(2,`input`,35),V(`input`,function(t){return x(e),S(U(3).draft.set(t.target.value))})(`keydown.enter`,function(){x(e);let t=U(2).$implicit;return S(U().saveValue(t.node))})(`keydown.escape`,function(t){return x(e),S(U(3).stopEdit(t))}),F(),P(3,`button`,36),V(`click`,function(){x(e);let t=U(2).$implicit;return S(U().saveValue(t.node))}),G(4,` Set value `),F()}if(e&2){let e=U(2).$implicit,t=U();E(),q(`New value for `,e.node.path),E(),N(`value`,t.draft())}}function W$(e,t){if(e&1&&(P(0,`span`,17),G(1),F()),e&2){let e=U(2).$implicit,t=U();E(),q(`The value is redacted (`,t.redactLabel(e.node.redacted),`), so it cannot be edited here.`)}}function G$(e,t){if(e&1){let e=z();P(0,`tr`,23)(1,`td`,28)(2,`div`,29),k(3,U$,5,2)(4,W$,2,1,`span`,17),P(5,`label`,30)(6,`input`,31),V(`change`,function(t){x(e);let n=U().$implicit;return S(U().mark(n.node,`touched`,t))})(`keydown.escape`,function(t){return x(e),S(U(2).stopEdit(t))}),F(),G(7,` Touched `),F(),P(8,`label`,30)(9,`input`,31),V(`change`,function(t){x(e);let n=U().$implicit;return S(U().mark(n.node,`dirty`,t))})(`keydown.escape`,function(t){return x(e),S(U(2).stopEdit(t))}),F(),G(10,` Dirty `),F(),P(11,`button`,32),V(`click`,function(){return x(e),S(U(2).stopEdit())}),G(12,`Done`),F()(),P(13,`p`,33),G(14),F()()()}if(e&2){let e=U().$implicit,t=U();E(),f_(`padding-left`,28+e.depth*16,`px`),E(),O(`aria-label`,`Edit `+(e.node.path||`the form`)),E(),A(e.node.redacted?4:3),E(3),N(`checked`,e.node.touched),E(3),N(`checked`,e.node.dirty),E(5),K(t.editMessage())}}function K$(e,t){if(e&1&&(P(0,`tr`)(1,`td`,37),G(2),F()()),e&2){let e=U().$implicit;E(),f_(`padding-left`,28+e.depth*16,`px`),E(),J(` `,e.node.truncated,` more fields under `,e.node.path||`the form`,` not shown `)}}function q$(e,t){if(e&1){let e=z();P(0,`tr`,11),V(`mouseenter`,function(){let t=x(e).$implicit,n=U();return S(n.highlight.emit({formId:n.form().id,path:t.node.path}))})(`mouseleave`,function(){return x(e),S(U().highlight.emit(null))}),P(1,`th`,12)(2,`button`,13),V(`focus`,function(){let t=x(e).$implicit,n=U();return S(n.highlight.emit({formId:n.form().id,path:t.node.path}))})(`blur`,function(){return x(e),S(U().highlight.emit(null))})(`click`,function(){let t=x(e).$implicit;return S(U().toggleField.emit(t.node.path))}),G(3),F(),P(4,`span`,14),G(5),F()(),P(6,`td`,15),k(7,v$,6,6),F(),P(8,`td`,16),k(9,y$,2,0,`span`,17)(10,b$,2,2,`span`,18),F(),P(11,`td`,19),k(12,x$,2,0,`span`),k(13,S$,2,1,`span`),k(14,C$,2,1,`span`),k(15,w$,2,1,`span`,20),k(16,T$,2,0,`span`,20),k(17,E$,2,1,`span`),k(18,D$,2,0,`span`),k(19,O$,2,0,`span`),k(20,k$,2,0,`span`),k(21,A$,2,1,`span`),k(22,j$,2,0,`span`),k(23,M$,2,0,`span`),k(24,N$,2,0,`span`),j(25,P$,2,1,`span`,null,dg),k(27,F$,2,1,`span`),k(28,I$,2,1,`span`),j(29,L$,3,3,`span`,null,ug),j(31,R$,2,1,`span`,null,ug),F(),P(33,`td`,21),j(34,V$,6,4,`div`,null,ug),k(36,H$,2,0,`div`,22),F()(),k(37,G$,15,7,`tr`,23),k(38,K$,3,4,`tr`)}if(e&2){let e=t.$implicit,n=U();W(`invalid`,e.node.errors.length),E(),f_(`padding-left`,12+e.depth*16,`px`),E(),O(`aria-label`,`Show details for `+(e.node.path||`the form`))(`aria-pressed`,e.node.path===n.fieldPath())(`title`,e.node.path||`(form)`),E(),q(` `,e.node.key||`(form)`,` `),E(2),K(e.node.type),E(2),A(e.node.type===`control`?7:-1),E(2),A(e.node.materialized===!1?9:10),E(3),A(e.node.touched?12:-1),E(),A(e.node.dirty?13:-1),E(),A(e.node.skipped?14:-1),E(),A(e.node.stale?.length?15:-1),E(),A(e.node.dom?.drift===void 0?-1:16),E(),A(e.node.redacted?17:-1),E(),A(e.node.required?18:-1),E(),A(e.node.readonly?19:-1),E(),A(e.node.hidden?20:-1),E(),A(e.node.updateOn?21:-1),E(),A(e.node.debouncing?22:-1),E(),A(e.node.validators?.sync?23:-1),E(),A(e.node.validators?.async?24:-1),E(),M(n.constraintList(e.node)),E(2),A(e.node.accessor?27:-1),E(),A(e.node.name?28:-1),E(),M(e.node.metadata??iv(29,d$)),E(2),M(e.node.disabledReasons??iv(30,d$)),E(3),M(e.node.errors),E(2),A(e.node.errors.length&&e.node.dom?.errorShown===!1?36:-1),E(),A(n.editing()===e.node.path?37:-1),E(),A(e.node.truncated?38:-1)}}function J$(e,t){e&1&&G(0),e&2&&q(` No field path matches "`,U(2).filter(),`". `)}function Y$(e,t){e&1&&G(0,` No field matches the selected filters. `)}function X$(e,t){if(e&1){let e=z();P(0,`button`,32),V(`click`,function(){x(e);let t=U(2),n=Gg(2);return S(t.clearFilters.emit(n))}),G(1,` Clear filters `),F()}}function Z$(e,t){if(e&1&&(P(0,`tr`)(1,`td`,38)(2,`p`),k(3,J$,1,1)(4,Y$,1,0),F(),k(5,X$,2,0,`button`,39),F()()),e&2){let e=U();E(3),A(e.filter()?3:4),E(2),A(e.filtering()?5:-1)}}function Q$(e,t){if(e&1){let e=z();P(0,`app-forms-field-detail`,40),V(`closed`,function(){return x(e),S(U().closeField.emit())}),F()}if(e&2){let e=U();N(`form`,e.form())(`node`,t)(`version`,e.version())(`rpc`,e.rpc())}}var $$=[{id:`invalid`,label:`Invalid`},{id:`dirty`,label:`Dirty`},{id:`touched`,label:`Touched`},{id:`disabled`,label:`Disabled`},{id:`hidden-error`,label:`Error not shown`}];function e1(e,t){switch(t){case`invalid`:return e.errors.length>0;case`dirty`:return e.dirty&&e.type===`control`;case`touched`:return e.touched&&e.type===`control`;case`disabled`:return e.status===`DISABLED`;case`hidden-error`:return e.dom?.errorShown===!1}}function t1(e){if(typeof e==`string`)return e;if(e===void 0)return``;try{return JSON.stringify(e)??``}catch{return``}}var n1=class e{form=$.required();rows=$.required();fieldPath=$(null);selectedNode=$(null);version=$(0);rpc=$(null);filtering=$(!1);filterStatus=$(``);filter=Ev(``);active=Ev(new Set);toggleField=xv();closeField=xv();clearFilters=xv();highlight=xv();chips=$$;redactLabel=gT;canWrite=X(()=>OT(this.rpc(),`forms`));formId=X(()=>this.form().id);editing=Q({source:this.formId,computation:()=>null});draft=w(``);editMessage=Q({source:this.editing,computation:()=>``});host=b(Rl);injector=b(Es);toggleEdit(e){if(this.editing()===e.path){this.stopEdit();return}this.draft.set(t1(e.value)),this.editing.set(e.path),Sd(()=>this.host.nativeElement.querySelector(`#forms-inline-editor input`)?.focus(),{injector:this.injector})}stopEdit(e){if(e?.stopPropagation(),this.editing()===null)return;let t=this.host.nativeElement.querySelector(`#forms-inline-editor`)?.closest(`tr`)?.previousElementSibling?.querySelector(`button.edit`);this.editing.set(null),t?.focus()}async saveValue(e){let t=this.form().id,n=await vT(this.rpc(),{action:`set-value`,formId:t,path:e.path,value:this.draft(),coerce:!0,mode:`user`});this.form().id===t&&this.editing()===e.path&&this.editMessage.set(yT(n))}async mark(e,t,n){let r=n.target,i=r.checked,a=t===`touched`?i?`mark-touched`:`mark-untouched`:i?`mark-dirty`:`mark-pristine`,o=this.form().id,s=await vT(this.rpc(),{action:a,formId:o,path:e.path});s.ok||(r.checked=!i),this.form().id===o&&this.editing()===e.path&&this.editMessage.set(yT(s))}toggleChip(e){this.active.update(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})}sourceText(e){let t=pT[e.source??``]??e.source??``;return e.from===void 0?t:`${t} on ${e.from||`the form`}`}constraintList(e){return Object.entries(e.constraints??{}).map(([e,t])=>`${e} ${t}`)}errorText(e,t){return/^[a-z]/.test(t.message)?`${e.key||`The form`} ${t.message}`:t.message}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-fields`]],inputs:{form:[1,`form`],rows:[1,`rows`],fieldPath:[1,`fieldPath`],selectedNode:[1,`selectedNode`],version:[1,`version`],rpc:[1,`rpc`],filtering:[1,`filtering`],filterStatus:[1,`filterStatus`],filter:[1,`filter`],active:[1,`active`]},outputs:{filter:`filterChange`,active:`activeChange`,toggleField:`toggleField`,closeField:`closeField`,clearFilters:`clearFilters`,highlight:`highlight`},decls:29,vars:4,consts:[[`fieldFilter`,``],[1,`filters`],[`placeholder`,`Filter fields by path`,`saveKey`,`forms`,1,`search`,3,`valueChange`,`value`],[1,`chips`],[1,`sr-only`],[`role`,`status`,1,`sr-only`],[`role`,`region`,`aria-label`,`Fields`,`tabindex`,`0`,1,`table-scroll`],[1,`fields`],[`scope`,`col`],[3,`form`,`node`,`version`,`rpc`],[`type`,`checkbox`,3,`change`,`checked`],[3,`mouseenter`,`mouseleave`],[`scope`,`row`,1,`name`],[`type`,`button`,1,`field`,3,`focus`,`blur`,`click`],[1,`type`],[1,`value`],[1,`status-cell`],[1,`muted`],[1,`badge`],[1,`flags`],[1,`warn`],[1,`errors`],[1,`unseen`],[1,`edit-row`],[`type`,`button`,1,`edit`,3,`disabled`],[`type`,`button`,1,`edit`,3,`click`,`disabled`],[1,`kind-tag`],[1,`source`],[`colspan`,`5`],[`id`,`forms-inline-editor`,`role`,`group`,1,`inline-editor`],[1,`check`],[`type`,`checkbox`,3,`change`,`keydown.escape`,`checked`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`],[`for`,`forms-inline-value`,1,`sr-only`],[`id`,`forms-inline-value`,`type`,`text`,`autocomplete`,`off`,`spellcheck`,`false`,1,`filter`,`inline-input`,3,`input`,`keydown.enter`,`keydown.escape`,`value`],[`type`,`button`,1,`small`,`primary`,3,`click`],[`colspan`,`5`,1,`muted`,`truncated`],[`colspan`,`5`,1,`no-match`],[`type`,`button`,1,`small`],[3,`closed`,`form`,`node`,`version`,`rpc`]],template:function(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`app-search-field`,2,0),U_(`valueChange`,function(n){return x(e),H_(t.filter,n)||(t.filter=n),S(n)}),F(),P(3,`fieldset`,3)(4,`legend`,4),G(5,`Show only fields that are`),F(),j(6,m$,3,2,`label`,null,f$),F()(),P(8,`p`,5),G(9),F(),P(10,`div`,6)(11,`table`,7)(12,`thead`)(13,`tr`)(14,`th`,8),G(15,`Field`),F(),P(16,`th`,8),G(17,`Value`),F(),P(18,`th`,8),G(19,`Status`),F(),P(20,`th`,8),G(21,`State`),F(),P(22,`th`,8),G(23,`Errors`),F()()(),P(24,`tbody`),j(25,q$,39,31,null,null,p$,!1,Z$,6,2,`tr`),F()()(),k(28,Q$,1,4,`app-forms-field-detail`,9)}if(e&2){let e;E(),V_(`value`,t.filter),E(5),M(t.chips),E(3),K(t.filterStatus()),E(16),M(t.rows()),E(3),A((e=t.selectedNode())?28:-1,e)}},dependencies:[iD,u$,fy],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 0 8px;
+  border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.summary[_ngcontent-%COMP%]    > .badge[_ngcontent-%COMP%] {
+  line-height: 22px;
+}
+
+.badge[data-status=INVALID][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.badge[data-status=PENDING][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-status=DISABLED][_ngcontent-%COMP%] {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+[_nghost-%COMP%] {
+  display: contents;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  display: flex;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search[_ngcontent-%COMP%]    > input[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  width: 100%;
+  padding-left: 34px;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+.filters[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease);
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+  border-color: var(--%NS%text-3);
+}
+
+.chips[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:checked) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%accent);
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:focus-visible) {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.filter[_ngcontent-%COMP%] {
+  flex: 1 1 220px;
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.filter[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.filter[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.filter[_ngcontent-%COMP%]:focus, 
+.filter[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-scroll[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.fields[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 680px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.fields[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
+.fields[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+  line-height: 20px;
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
+  border-bottom: 0;
+}
+
+.fields[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  line-height: 16px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.invalid[_ngcontent-%COMP%]    > th[_ngcontent-%COMP%] {
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true]) {
+  background: var(--%NS%accent-soft);
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:has(.field[aria-pressed=true])    > th[_ngcontent-%COMP%] {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+  color: var(--%NS%text-strong);
+}
+
+.name[_ngcontent-%COMP%] {
+  max-width: 280px;
+}
+
+.field[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 200px;
+  padding: 0;
+  overflow: hidden;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
+  text-overflow: ellipsis;
+  vertical-align: top;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 150ms var(--%NS%ease);
+}
+
+.field[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%accent-hover);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.field[aria-pressed=true][_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.type[_ngcontent-%COMP%] {
+  margin-left: 8px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 400;
+  vertical-align: top;
+}
+
+.value[_ngcontent-%COMP%] {
+  min-width: 140px;
+  max-width: 320px;
+}
+
+.value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+.errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  color: #fde68a;
+  overflow-wrap: anywhere;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+   :root:not([data-theme=dark])   [_nghost-%COMP%]   .errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+    color: var(--%NS%accent);
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], 
+:root[data-theme=light]   [_nghost-%COMP%]   .errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+
+.value[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  margin-top: 2px;
+  font-size: 12px;
+}
+
+.status-cell[_ngcontent-%COMP%] {
+  white-space: nowrap;
+}
+
+.edit[_ngcontent-%COMP%] {
+  min-width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 12px;
+  line-height: 22px;
+  vertical-align: middle;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+.edit[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.edit[aria-expanded=true][_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+.edit[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 1px;
+}
+
+.edit[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.edit-row[_ngcontent-%COMP%], 
+.fields[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.edit-row[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.inline-editor[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.inline-input[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  min-height: 24px;
+  color: var(--%NS%text);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.edit-row[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+}
+
+.edit-row[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.flags[_ngcontent-%COMP%] {
+  min-width: 160px;
+}
+
+.flags[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0 4px 4px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.flags[_ngcontent-%COMP%]   span.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.errors[_ngcontent-%COMP%] {
+  min-width: 180px;
+}
+
+.errors[_ngcontent-%COMP%]   div[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+  overflow-wrap: anywhere;
+}
+
+.errors[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]    + div[_ngcontent-%COMP%] {
+  margin-top: 4px;
+}
+
+.errors[_ngcontent-%COMP%]   .kind-tag[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+}
+
+.source[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.errors[_ngcontent-%COMP%]   .unseen[_ngcontent-%COMP%] {
+  color: var(--%NS%warn);
+  font-size: 11px;
+}
+
+.truncated[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  font-style: italic;
+}
+
+.fields[_ngcontent-%COMP%]   .no-match[_ngcontent-%COMP%] {
+  padding: 24px 12px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+.fields[_ngcontent-%COMP%]   .no-match[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+}
+
+.fields[_ngcontent-%COMP%]   .no-match[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]:last-child {
+  margin-bottom: 0;
+}`]})},r1=(e,t)=>t.id;function i1(e,t){if(e&1){let e=z();L(0,`label`,3)(1,`input`,5),H(`change`,function(t){return x(e),S(U().allPages.set(t.target.checked))}),R(),G(2,` All pages `),R()}if(e&2){let e=U();E(),B(`checked`,e.allPages())}}function a1(e,t){if(e&1&&(L(0,`span`,12),G(1),L(2,`span`,11),G(3),R()()),e&2){let e=t;E(),K(e),E(2),q(` `,e===1?`error`:`errors`)}}function o1(e,t){if(e&1){let e=z();L(0,`li`)(1,`button`,6),H(`click`,function(){let t=x(e).$implicit;return S(U().selectForm.emit(t.id))}),Sg(2,`span`,7),L(3,`span`,8),G(4),R(),L(5,`span`,9),G(6),L(7,`span`,10),G(8),R(),L(9,`span`,11),G(10),R()(),k(11,a1,4,2,`span`,12),R()()}if(e&2){let e,n=t.$implicit,r=U();E(),W(`active`,n.id===r.selectedId()),O(`aria-current`,n.id===r.selectedId()?`true`:null),E(),O(`data-status`,n.root.status),E(),O(`title`,n.label),E(),K(n.label),E(2),q(``,r.kindLabel(n.kind),` · `),E(2),K(n.id),E(2),q(`, `,n.root.status),E(),A((e=r.counts().get(n.id)?.errors)?11:-1,e)}}var s1=class e{forms=$.required();selectedId=$(null);counts=$.required();showToggle=$(!1);allPages=Ev(!1);selectForm=xv();kindLabel(e){return fT[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-list`]],inputs:{forms:[1,`forms`],selectedId:[1,`selectedId`],counts:[1,`counts`],showToggle:[1,`showToggle`],allPages:[1,`allPages`]},outputs:{allPages:`allPagesChange`,selectForm:`selectForm`},decls:9,vars:2,consts:[[1,`sidebar`],[`id`,`forms-list-heading`,1,`list-heading`],[1,`list-count`],[1,`page-toggle`],[`aria-labelledby`,`forms-list-heading`,1,`form-list`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`form-item`,3,`click`],[`aria-hidden`,`true`,1,`dot`],[1,`label`],[1,`kind`],[1,`id`],[1,`sr-only`],[1,`count`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`h2`,1),G(2,` Forms `),L(3,`span`,2),G(4),R()(),k(5,i1,3,1,`label`,3),L(6,`ul`,4),j(7,o1,12,10,`li`,null,r1),R()()),e&2&&(E(4),K(t.forms().length),E(),A(t.showToggle()?5:-1),E(2),M(t.forms()))},styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-width: 0;
+}
+
+.sidebar[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 8px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.list-heading[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 4px 8px 8px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.list-count[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  letter-spacing: 0;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+}
+
+.form-list[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  align-content: start;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.form-list[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
+  
+  content-visibility: auto;
+  contain-intrinsic-size: auto 52px;
+}
+
+.form-item[_ngcontent-%COMP%] {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  grid-template-areas: "dot label count" ". kind kind";
+  gap: 2px 10px;
+  align-items: center;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: var(--%NS%text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.form-item[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.form-item[_ngcontent-%COMP%]:active {
+  background: var(--%NS%surface-3);
+}
+
+.form-item.active[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+  color: var(--%NS%text-strong);
+}
+
+.form-item[_ngcontent-%COMP%]:focus-visible {
+  
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.form-item[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
+  grid-area: dot;
+}
+
+.form-item[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {
+  grid-area: label;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.form-item[_ngcontent-%COMP%]   .kind[_ngcontent-%COMP%] {
+  grid-area: kind;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.form-item[_ngcontent-%COMP%]   .id[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 11.5px;
+}
+
+.form-item.active[_ngcontent-%COMP%]   .kind[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.form-item[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  grid-area: count;
+  min-width: 20px;
+  padding: 0 7px;
+  border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.dot[_ngcontent-%COMP%] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--%NS%ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%ok) 15%, transparent);
+}
+
+.dot[data-status=INVALID][_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 15%, transparent);
+}
+
+.dot[data-status=PENDING][_ngcontent-%COMP%] {
+  background: var(--%NS%warn);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%warn) 15%, transparent);
+}
+
+.dot[data-status=DISABLED][_ngcontent-%COMP%] {
+  background: var(--%NS%text-3);
+  box-shadow: none;
+}
+
+.page-toggle[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 32px;
+  margin: 0 8px 8px;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.page-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.page-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 720px) {
+  .form-list[_ngcontent-%COMP%] {
+    max-height: 240px;
+    overflow-y: auto;
+  }
+}`]})},c1=()=>[],l1=(e,t)=>t.node.path;function u1(e,t){if(e&1&&(L(0,`span`,7),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function d1(e,t){if(e&1&&(L(0,`span`,7),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function f1(e,t){if(e&1&&(L(0,`span`,7),G(1),uv(2,`json`),R()),e&2){let e=t.$implicit;E(),q(`metadata `,dv(2,1,e))}}function p1(e,t){if(e&1&&(L(0,`span`,7),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function m1(e,t){if(e&1&&(L(0,`tr`)(1,`th`,5)(2,`code`),G(3),R(),L(4,`span`,6),G(5),R()(),L(6,`td`),j(7,u1,2,1,`span`,7,dg),R(),L(9,`td`),j(10,d1,2,1,`span`,7,dg),j(12,f1,3,3,`span`,7,ug),R(),L(14,`td`),j(15,p1,2,1,`span`,7,dg),R()()),e&2){let e=t.$implicit;E(),f_(`padding-left`,12+e.depth*16,`px`),E(2),K(e.node.key||`(form)`),E(2),K(e.node.type),E(2),M(e.rules),E(3),M(e.constraints),E(2),M(e.node.metadata??iv(4,c1)),E(3),M(e.states)}}function h1(e,t){if(e&1&&(L(0,`div`,1)(1,`table`,3)(2,`thead`)(3,`tr`)(4,`th`,4),G(5,`Field`),R(),L(6,`th`,4),G(7,`Rules`),R(),L(8,`th`,4),G(9,`Constraints`),R(),L(10,`th`,4),G(11,`State now`),R()()(),L(12,`tbody`),j(13,m1,17,5,`tr`,null,l1),R()()()),e&2){let e=U();E(13),M(e.rows())}}function g1(e,t){e&1&&(L(0,`p`,2),G(1,` No field of this form has a schema rule. Pass a schema function as the second argument of `),L(2,`code`),G(3,`form()`),R(),G(4,` to add validators and rules. `),R())}var _1=[[`sync`,`validator`,`validators`],[`tree`,`cross-field rule`,`cross-field rules`],[`async`,`async validator`,`async validators`],[`hidden`,`hidden rule`,`hidden rules`],[`disabled`,`disabled rule`,`disabled rules`],[`readonly`,`readonly rule`,`readonly rules`],[`metadata`,`metadata entry`,`metadata entries`]];function v1(e){let t=e.required?[`required`]:[];for(let[n,r,i]of _1){let a=e.rules?.[n];a&&t.push(`${a} ${a===1?r:i}`)}return t}function y1(e){let t=[];e.hidden&&t.push(e.hiddenBy===`parent`?`hidden by a parent`:`hidden`),e.readonly&&t.push(e.readonlyBy===`parent`?`readonly by a parent`:`readonly`);for(let n of e.disabledReasons??[])t.push(`disabled: ${n}`);return e.debouncing&&t.push(`debouncing`),t}var b1=class e{form=$.required();rows=X(()=>{let e=[],t=(n,r)=>{let i=e.length,a={node:n,depth:r,rules:v1(n),constraints:Object.entries(n.constraints??{}).map(([e,t])=>`${e} ${t}`),states:y1(n)},o=a.rules.length>0||a.constraints.length>0||a.states.length>0||!!n.metadata?.length;for(let e of n.children??[])o=t(e,r+1)||o;return o&&e.splice(i,0,a),o};return t(this.form().root,0),e});static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-schema`]],inputs:{form:[1,`form`]},decls:7,vars:1,consts:[[1,`intro`],[`role`,`region`,`aria-label`,`Schema rules`,`tabindex`,`0`,1,`table-scroll`],[1,`empty`],[1,`schema`],[`scope`,`col`],[`scope`,`row`],[1,`type`],[1,`chip`]],template:function(e,t){e&1&&(L(0,`p`,0),G(1,` The rules the schema function of `),L(2,`code`),G(3,`form()`),R(),G(4,` sets on each field, read from Angular's logic tree, with the constraints and states they produce right now. Fields without rules are left out. `),R(),k(5,h1,15,0,`div`,1)(6,g1,5,0,`p`,2)),e&2&&(E(5),A(t.rows().length?5:6))},dependencies:[fy],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.intro[_ngcontent-%COMP%], 
+.empty[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.table-scroll[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-scroll[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.schema[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.schema[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], 
+.schema[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.schema[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
+  border-bottom: 0;
+}
+
+.schema[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.schema[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.type[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 2px 4px 2px 0;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}`]})};function x1(e,t){if(e&1){let e=z();L(0,`div`,0)(1,`p`,4),G(2,`Could not explain this form`),R(),L(3,`p`),G(4,`The devtools server did not answer. Check that the app is running, then try again.`),R(),L(5,`button`,2),H(`click`,function(){return x(e),S(U().retry())}),G(6,`Try again`),R()()}}function S1(e,t){if(e&1&&(L(0,`section`,5)(1,`h3`,6),G(2,`Submit`),R(),L(3,`pre`,7),G(4),R()(),L(5,`section`,8)(6,`h3`,9),G(7,`Payload`),R(),L(8,`pre`,7),G(9),R()()),e&2){let e=U();E(3),O(`aria-busy`,e.submit()===null?`true`:null),E(),K(e.submit()??`Loading…`),E(4),O(`aria-busy`,e.payload()===null?`true`:null),E(),K(e.payload()??`Loading…`)}}function C1(e,t){if(e&1){let e=z();L(0,`div`,0)(1,`p`,3),G(2,`Could not check this form`),R(),L(3,`p`),G(4,`The devtools server did not answer. Check that the app is running, then try again.`),R(),L(5,`button`,4),H(`click`,function(){return x(e),S(U().retry())}),G(6,`Try again`),R()()}}function w1(e,t){e&1&&(L(0,`div`,1),Sg(1,`span`,5),L(2,`p`),G(3,`Checking the form for problems…`),R()())}function T1(e,t){e&1&&(L(0,`div`,2)(1,`span`,6),C(),L(2,`svg`,7),Sg(3,`path`,8),R()(),ys(),L(4,`p`,3),G(5,`No problems found`),R(),L(6,`p`),G(7,`For generic accessibility checks, run axe on the page.`),R()())}function E1(e,t){if(e&1){let e=z();L(0,`span`,15),G(1,`at `),L(2,`button`,19),H(`click`,function(){let t=x(e);return S(U(3).showField.emit(t))}),L(3,`span`,20),G(4,`Show field `),R(),L(5,`code`),G(6),R()()()}e&2&&(E(6),K(t))}function D1(e,t){if(e&1&&(L(0,`li`)(1,`div`,12)(2,`span`,13),G(3),R(),L(4,`code`,14),G(5),R(),k(6,E1,7,1,`span`,15),R(),L(7,`p`,16),G(8),R(),L(9,`p`,17)(10,`span`,18),G(11,`Fix`),R(),G(12),R()()),e&2){let e,n=t.$implicit;O(`data-severity`,n.severity),E(2),O(`data-tone`,n.severity===`info`?``:n.severity===`error`?`bad`:`warn`),E(),K(n.severity),E(2),K(n.rule),E(),A((e=n.path)?6:-1,e),E(2),K(n.message),E(4),q(` `,n.fix)}}function O1(e,t){if(e&1&&(L(0,`p`,9)(1,`span`,10),G(2),R(),G(3),R(),L(4,`ul`,11),j(5,D1,13,7,`li`,null,ug),R()),e&2){let e=U();E(2),K(e.findings().length),E(),q(` `,e.findings().length===1?`finding`:`findings`,` `),E(2),M(e.findings())}}var k1=class e{formId=$.required();version=$(0);rpc=$(null);submit=Q({source:this.formId,computation:()=>null});payload=Q({source:this.formId,computation:()=>null});failed=Q({source:this.formId,computation:()=>!1});message=w(``);attempt=w(0);constructor(){T(()=>{let e=this.formId();this.version(),this.attempt();let t=this.rpc();t&&Z(async()=>{let[n,r]=await Promise.all([mT(t,`forms-explain`,{kind:`submit`,form:e}),mT(t,`forms-explain`,{kind:`payload`,form:e})]);if(this.formId()===e){if(n===null||r===null){this.failed.set(!0);return}this.failed.set(!1),this.submit.set(xT(n)),this.payload.set(xT(r))}})})}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}async copyFixture(){let e=(await mT(this.rpc(),`forms-explain`,{kind:`fixture`,form:this.formId()})??``).match(/```ts\n([\s\S]*)```\s*$/)?.[1];if(!e){this.message.set(`No test fixture is available for this form.`);return}try{await navigator.clipboard.writeText(e),this.message.set(`Copied.`)}catch{this.message.set(`Clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-submit`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},decls:7,vars:2,consts:[[`role`,`alert`,1,`empty-state`],[1,`fixture`],[`type`,`button`,1,`small`,3,`click`],[`role`,`status`,1,`status`],[1,`empty-title`],[`aria-labelledby`,`forms-submit-title`,1,`block`],[`id`,`forms-submit-title`,1,`section-label`],[1,`explain`],[`aria-labelledby`,`forms-payload-title`,1,`block`],[`id`,`forms-payload-title`,1,`section-label`]],template:function(e,t){e&1&&(k(0,x1,7,0,`div`,0)(1,S1,10,4),L(2,`div`,1)(3,`button`,2),H(`click`,function(){return t.copyFixture()}),G(4,`Copy test fixture`),R(),L(5,`span`,3),G(6),R()()),e&2&&(A(+!t.failed()),E(6),K(t.message()))},styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.block[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.explain[_ngcontent-%COMP%] {
+  max-height: 420px;
+  overflow: auto;
+}
+
+.fixture[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}`]})},A1=class e{formId=$.required();version=$(0);rpc=$(null);showField=xv();findings=Q({source:this.formId,computation:()=>null});failed=Q({source:this.formId,computation:()=>!1});attempt=w(0);constructor(){T(()=>{let e=this.formId();this.version(),this.attempt();let t=this.rpc();t&&Z(async()=>{let n=await mT(t,`forms-lint`,{form:e});this.formId()===e&&(this.failed.set(n===null),n&&this.findings.set(n))})})}retry(){this.failed.set(!1),this.attempt.update(e=>e+1)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-lint`]],inputs:{formId:[1,`formId`],version:[1,`version`],rpc:[1,`rpc`]},outputs:{showField:`showField`},decls:4,vars:1,consts:[[`role`,`alert`,1,`empty-state`],[`role`,`status`,1,`empty-state`],[1,`empty-state`],[1,`empty-title`],[`type`,`button`,1,`small`,3,`click`],[`aria-hidden`,`true`,1,`spinner`],[`aria-hidden`,`true`,1,`ok-icon`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`fill`,`none`,`stroke`,`currentColor`,`stroke-width`,`2.5`,`stroke-linecap`,`round`,`stroke-linejoin`,`round`],[`d`,`M20 6 9 17l-5-5`],[1,`summary`],[1,`tabular`],[1,`findings`],[1,`meta`],[1,`tag`,`severity`],[1,`rule`],[1,`muted`,`path`],[1,`message`],[1,`fix`],[1,`fix-label`],[`type`,`button`,1,`summary-link`,3,`click`],[1,`sr-only`]],template:function(e,t){e&1&&k(0,C1,7,0,`div`,0)(1,w1,4,0,`div`,1)(2,T1,8,0,`div`,2)(3,O1,7,2),e&2&&A(t.failed()?0:t.findings()===null?1:t.findings().length?3:2)},styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.ok-icon[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 4px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.summary[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+}
+
+.tabular[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.findings[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--%NS%text);
+  font-size: 13px;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 12px 16px;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  box-shadow: inset 3px 0 0 var(--%NS%border-strong);
+  transition: border-color 150ms var(--%NS%ease);
+}
+
+.findings[_ngcontent-%COMP%]   li[data-severity=error][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%danger);
+}
+
+.findings[_ngcontent-%COMP%]   li[data-severity=warning][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%warn);
+}
+
+.findings[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.severity[_ngcontent-%COMP%] {
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.rule[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.path[_ngcontent-%COMP%] {
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.message[_ngcontent-%COMP%], 
+.fix[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.fix[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+}
+
+.fix-label[_ngcontent-%COMP%] {
+  margin-right: 4px;
+  color: var(--%NS%accent);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}`]})};function j1(e,t){if(e&1&&(L(0,`span`,3),G(1),R()),e&2){let e=U().$implicit;E(),q(`on page `,e.pageId)}}function M1(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R(),k(3,j1,2,1,`span`,3),R()),e&2){let e=t.$implicit,n=U();E(2),K(e.message),E(),A(n.showPages()?3:-1)}}var N1=class e{errors=$.required();showPages=$(!1);static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-setup-errors`]],inputs:{errors:[1,`errors`],showPages:[1,`showPages`]},decls:8,vars:2,consts:[[`role`,`status`,1,`setup-errors`],[1,`setup-title`],[1,`setup-hint`],[1,`setup-page`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`p`,1),G(2),R(),L(3,`p`,2),G(4,` A form with a setup error can be missing from the list or behave unlike its template. Check the directives and value accessors it names. `),R(),L(5,`ul`),j(6,M1,4,2,`li`,null,ug),R()()),e&2&&(E(2),J(` Angular reported `,t.errors().length,` forms setup `,t.errors().length===1?`error`:`errors`,` `),E(4),M(t.errors()))},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.setup-errors[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid;
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+  border-radius: var(--%NS%radius-sm);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.setup-errors[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.setup-title[_ngcontent-%COMP%] {
+  font-weight: 600;
+}
+
+.setup-errors[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 0 0 0 16px;
+  min-width: 0;
+}
+
+.setup-errors[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.setup-page[_ngcontent-%COMP%] {
+  margin-left: 6px;
+}`]})},P1=[`pathInput`],F1=()=>[],I1=(e,t)=>t.formId+`#`+t.seq;function L1(e,t){e&1&&I(0,`span`,6)}function R1(e,t){if(e&1){let e=z();P(0,`label`)(1,`input`,17),V(`change`,function(){let t=x(e).$implicit;return S(U().filter.set(t))}),F(),G(2),F()}if(e&2){let e=t.$implicit,n=U();E(),N(`value`,e)(`checked`,e===n.filter()),E(),q(` `,e,` `)}}function z1(e,t){if(e&1&&(P(0,`span`,22),G(1),F()),e&2){let e=U().$implicit;O(`data-tone`,e.outcome===`ran`?``:`bad`),E(),K(e.outcome)}}function B1(e,t){if(e&1&&(P(0,`span`,22),G(1),F()),e&2){let e=U().$implicit;E(),q(`×`,e.count)}}function V1(e,t){if(e&1&&(P(0,`span`,22),G(1),F()),e&2){let e=U().$implicit;E(),K(e.origin)}}function H1(e,t){if(e&1&&(P(0,`span`,22),G(1),F()),e&2){let e=U().$implicit;O(`data-tone`,e.ms>1e3?`warn`:``),E(),q(`pending `,e.ms,`ms`)}}function U1(e,t){if(e&1&&(P(0,`span`,22),G(1),F()),e&2){let e=U().$implicit;O(`data-tone`,e.renders>20?`warn`:``),E(),J(``,e.renders,` renders: `,(e.rendered??iv(3,F1)).join(`, `))}}function W1(e,t){if(e&1&&(P(0,`span`,25),G(1),F(),P(2,`span`,26),G(3,`→`),F(),P(4,`span`,9),G(5,`changed to`),F()),e&2){let e=U(2).$implicit;E(),K(e.prev)}}function G1(e,t){if(e&1&&(P(0,`div`,23),k(1,W1,6,1),G(2),F()),e&2){let e=U().$implicit;E(),A(e.prev===void 0?-1:1),E(),q(` `,e.detail,` `)}}function K1(e,t){if(e&1&&(P(0,`span`,24),G(1),F()),e&2){let e=U().$implicit;E(),q(`from `,e.caller)}}function q1(e,t){if(e&1&&(P(0,`li`)(1,`time`),G(2),F(),P(3,`div`,18)(4,`div`,19)(5,`code`,20),G(6),F(),P(7,`span`,21),G(8),F(),k(9,z1,2,2,`span`,22),k(10,B1,2,1,`span`,22),k(11,V1,2,1,`span`,22),k(12,H1,2,2,`span`,22),k(13,U1,2,4,`span`,22),F(),k(14,G1,3,2,`div`,23),k(15,K1,2,1,`span`,24),F()()),e&2){let e=t.$implicit,n=U(2);O(`data-type`,e.type),E(),O(`datetime`,n.iso(e.timestamp)),E(),K(n.time(e.timestamp)),E(4),K(e.path||`(form)`),E(2),K(e.type),E(),A(e.outcome?9:-1),E(),A(e.count&&e.count>1?10:-1),E(),A(e.origin?11:-1),E(),A(e.ms===void 0?-1:12),E(),A(e.renders?13:-1),E(),A(e.prev!==void 0||e.detail?14:-1),E(),A(e.caller?15:-1)}}function J1(e,t){if(e&1&&(P(0,`ol`,15),j(1,q1,16,12,`li`,null,I1),F()),e&2){let e=U();E(),M(e.shown())}}function Y1(e,t){if(e&1){let e=z();P(0,`div`,16)(1,`p`,27),G(2,`No events match these filters`),F(),P(3,`p`),G(4,`Change the path, type or origin, or interact with the form to record more.`),F(),P(5,`button`,28),V(`click`,function(){return x(e),S(U().clearFilters())}),G(6,`Clear filters`),F()()}}function X1(e,t){e&1&&(P(0,`div`,16)(1,`p`,27),G(2,`No changes yet`),F(),P(3,`p`),G(4,`Type into the form to see them here.`),F()())}var Z1=[`all`,`user`,`code`,`agent`,`devtools`],Q1=[`value`,`status`,`touched`,`dirty`,`submit`,`reset`,`added`,`removed`,`moved`,`validators`],$1=class e{events=$.required();recording=$(!1);record=xv();toggle(e){let t=e.target;t.checked=this.recording(),this.record.emit(!this.recording())}origins=Z1;filter=w(`all`);pathFilter=w(``);typeFilter=w(`all`);pathInput=Ov(`pathInput`);typeOptions=X(()=>{let e=new Set(this.events().map(e=>e.type)),t=this.typeFilter();t&&t!==`all`&&e.add(t);let n=Q1.filter(t=>e.has(t)),r=[...e].filter(e=>!Q1.includes(e)).sort();return[{value:`all`,label:`All types`},...[...n,...r].map(e=>({value:e,label:e}))]});matching=X(()=>{let e=this.filter(),t=this.typeFilter()??`all`,n=this.pathFilter().trim().toLowerCase();return this.events().filter(r=>(e===`all`||r.origin===e)&&(t===`all`||r.type===t)&&(!n||r.path.toLowerCase().includes(n)))});shown=X(()=>this.matching().slice(-100).reverse());filtered=X(()=>this.filter()!==`all`||(this.typeFilter()??`all`)!==`all`||!!this.pathFilter().trim());summary=X(()=>{let e=this.events().length,t=this.matching().length,n=e=>e===1?`event`:`events`,r=this.filtered()?` matching ${n(t)}`:` ${n(t)}`;return t>100?`Showing the latest 100 of ${t}${r}`:this.filtered()?`${t} of ${e} ${n(e)}`:`${e} ${n(e)}`});filterStatus=X(()=>(this.filter(),this.typeFilter(),this.pathFilter(),Z(()=>this.summary())));clearFilters(){this.pathFilter.set(``),this.typeFilter.set(`all`),this.filter.set(`all`),this.pathInput()?.focus()}iso(e){return new Date(e).toISOString()}time=aD;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-timeline`]],viewQuery:function(e,t){e&1&&Ug(t.pathInput,P1,5),e&2&&Wg()},inputs:{events:[1,`events`],recording:[1,`recording`]},outputs:{record:`record`},decls:25,vars:10,consts:[[`pathInput`,``],[1,`toolbar`],[1,`record`],[`type`,`checkbox`,3,`change`,`checked`],[1,`record-text`],[1,`record-title`],[`aria-hidden`,`true`,1,`rec-dot`],[1,`record-hint`],[1,`chips`],[1,`sr-only`],[1,`filters`],[`placeholder`,`Filter by field path`,`saveKey`,`forms-timeline`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Event type`,3,`valueChange`,`options`,`value`],[1,`total`],[`role`,`status`,1,`sr-only`],[1,`events`],[1,`empty-state`],[`type`,`radio`,`name`,`timeline-origin`,3,`change`,`value`,`checked`],[1,`body`],[1,`line`],[1,`path`],[1,`event-type`],[1,`tag`],[1,`detail`],[1,`caller`],[1,`prev`],[`aria-hidden`,`true`,1,`arrow`],[1,`empty-title`],[`type`,`button`,1,`small`,3,`click`]],template:function(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`label`,2)(2,`input`,3),V(`change`,function(e){return t.toggle(e)}),F(),P(3,`span`,4)(4,`span`,5),k(5,L1,1,0,`span`,6),G(6,` Record details `),F(),P(7,`span`,7),G(8,`Record calling code, validator changes and renders per keystroke`),F()()(),P(9,`fieldset`,8)(10,`legend`,9),G(11,`Show changes from`),F(),j(12,R1,3,3,`label`,null,dg),F()(),P(14,`div`,10)(15,`app-search-field`,11,0),U_(`valueChange`,function(n){return x(e),H_(t.pathFilter,n)||(t.pathFilter=n),S(n)}),F(),P(17,`app-select`,12),U_(`valueChange`,function(n){return x(e),H_(t.typeFilter,n)||(t.typeFilter=n),S(n)}),F(),P(18,`span`,13),G(19),F(),P(20,`span`,14),G(21),F()(),k(22,J1,3,0,`ol`,15)(23,Y1,7,0,`div`,16)(24,X1,5,0,`div`,16)}e&2&&(E(),W(`on`,t.recording()),E(),N(`checked`,t.recording()),E(3),A(t.recording()?5:-1),E(7),M(t.origins),E(3),V_(`value`,t.pathFilter),E(2),N(`options`,t.typeOptions()),V_(`value`,t.typeFilter),E(2),K(t.summary()),E(2),K(t.filterStatus()),E(),A(t.shown().length?22:t.events().length?23:24))},dependencies:[iD,JE],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.record[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: 1 1 260px;
+  gap: 10px;
+  align-items: flex-start;
+  min-width: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  cursor: pointer;
+  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+
+.record[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.record.on[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+}
+
+.record[_ngcontent-%COMP%]:has(input:focus-visible) {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.record[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 2px 0 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+.record[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+}
+
+.record-text[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.record-title[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.record-hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.rec-dot[_ngcontent-%COMP%] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--%NS%danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 20%, transparent);
+  animation: _ngcontent-%COMP%_rec-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes _ngcontent-%COMP%_rec-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+.chips[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: none;
+  gap: 2px;
+  min-width: 0;
+  height: 34px;
+  margin: 0;
+  padding: 2px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 7px;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  font-weight: 500;
+  text-transform: capitalize;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+  background: var(--%NS%surface-2);
+}
+
+.chips[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:checked) {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
+}
+
+.chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:has(input:focus-visible) {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.filters[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  min-width: 0;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+input[type=search][_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[type=search][_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.filters[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  width: 150px;
+}
+
+.total[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty-state[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 6px;
+}
+
+.events[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--%NS%surface-2);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  font-size: 13px;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.events[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: 11ch minmax(0, 1fr);
+  gap: 12px;
+  align-items: baseline;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: var(--%NS%text);
+  transition: background-color 150ms var(--%NS%ease);
+  
+  content-visibility: auto;
+  contain-intrinsic-size: auto 52px;
+}
+
+.events[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.events[_ngcontent-%COMP%]   li[data-type=submit][_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+  color: var(--%NS%text-strong);
+}
+
+.events[_ngcontent-%COMP%]   li[data-type=submit][_ngcontent-%COMP%]   time[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+time[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.body[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.line[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.path[_ngcontent-%COMP%] {
+  color: #fde68a;
+  overflow-wrap: anywhere;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .path[_ngcontent-%COMP%] {
+    color: var(--%NS%accent);
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .path[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+
+.event-type[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.tag[_ngcontent-%COMP%] {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detail[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.prev[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-decoration: line-through;
+  text-decoration-color: color-mix(in srgb, var(--%NS%text-2) 50%, transparent);
+}
+
+.arrow[_ngcontent-%COMP%] {
+  margin: 0 6px;
+  color: var(--%NS%text-3);
+}
+
+.caller[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 480px) {
+  .events[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 4px;
+  }
+  .chips[_ngcontent-%COMP%] {
+    width: 100%;
+  }
+  .filters[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+    flex: 1 1 140px;
+    width: auto;
+  }
+  .total[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+  .chips[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+    flex: 1;
+    justify-content: center;
+    padding: 0 8px;
+  }
+}`]})},e0=(e,t)=>t.path;function t0(e,t){e&1&&(L(0,`span`,6),G(1,`duplicate name`),R())}function n0(e,t){if(e&1&&(L(0,`p`,7),G(1),R()),e&2){let e=U();E(),K(e.description)}}function r0(e,t){if(e&1&&(L(0,`p`,8),G(1),R()),e&2){let e=U();E(),K(e.error)}}function i0(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R(),G(3),R()),e&2){let e=t.$implicit;E(2),K(e.path),E(),q(` is `,e.reason,` `)}}function a0(e,t){if(e&1&&(L(0,`div`,9)(1,`p`,10),G(2,`Angular could not infer an input schema. These fields block it:`),R(),L(3,`ul`),j(4,i0,4,2,`li`,null,e0),R()()),e&2){let e=U();E(4),M(e.blocking)}}function o0(e,t){e&1&&(L(0,`span`,14),G(1,`required`),R())}function s0(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R(),k(3,o0,2,0,`span`,14),R()),e&2){let e=t.$implicit,n=U(3);E(2),K(e),E(),A(n.isRequired(e)?3:-1)}}function c0(e,t){if(e&1&&(L(0,`div`,9)(1,`p`,10),G(2,`Inputs`),R(),L(3,`ul`,13),j(4,s0,4,2,`li`,null,dg),R()()),e&2){let e=U();E(4),M(e.inputs)}}function l0(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R(),G(3),R()),e&2){let e=t.$implicit;E(2),K(e.path),E(),q(` is now `,e.now?`required`:`optional`,` `)}}function u0(e,t){if(e&1&&(L(0,`div`,9)(1,`p`,10),G(2,` Required changed since registration. Angular reads it once, so agents still see the old schema: `),R(),L(3,`ul`),j(4,l0,4,2,`li`,null,e0),R()()),e&2){let e=U();E(4),M(e.requiredChanged)}}function d0(e,t){e&1&&(L(0,`span`,14),G(1,`tried from the panel`),R())}function f0(e,t){if(e&1&&(L(0,`span`,10),G(1),R()),e&2){let e=U().$implicit;E(),q(``,e.ms,` ms`)}}function p0(e,t){if(e&1&&(L(0,`span`,10),G(1),R()),e&2){let e=U().$implicit;E(),q(`fields `,e.fields.join(`, `))}}function m0(e,t){if(e&1&&(L(0,`pre`,15),G(1),R()),e&2){let e=U().$implicit;E(),K(e.detail)}}function h0(e,t){if(e&1&&(L(0,`li`)(1,`time`),G(2),uv(3,`date`),R(),L(4,`span`,5),G(5),R(),k(6,d0,2,0,`span`,14),k(7,f0,2,1,`span`,10),k(8,p0,2,1,`span`,10),k(9,m0,2,1,`pre`,15),R()),e&2){let e=t.$implicit,n=U(3);E(),O(`datetime`,n.iso(e.at)),E(),K(fv(3,8,e.at,`HH:mm:ss`)),E(2),O(`data-state`,e.outcome),E(),K(n.outcome(e.outcome)),E(),A(e.tried?6:-1),E(),A(e.ms===void 0?-1:7),E(),A(e.fields?.length?8:-1),E(),A(e.detail?9:-1)}}function g0(e,t){if(e&1&&(L(0,`ul`),j(1,h0,10,11,`li`,null,ug),R()),e&2){let e=U();E(),M(e.calls)}}function _0(e,t){e&1&&(L(0,`p`,10),G(1,` Calls are not recorded for a tool registered before the inspector attached. `),R())}function v0(e,t){e&1&&(L(0,`p`,10),G(1,`No agent has called this tool since the inspector attached.`),R())}function y0(e,t){if(e&1&&(L(0,`details`,11)(1,`summary`),G(2,`Input schema`),R(),L(3,`pre`,15),G(4),uv(5,`json`),R()()),e&2){let e=U();E(4),K(dv(5,1,e.schema))}}function b0(e,t){if(e&1&&(L(0,`p`,18),G(1),R()),e&2){let e=U(3);B(`id`,e.uid+`-try-off`),E(),K(e.writesOff)}}function x0(e,t){if(e&1){let e=z();L(0,`div`,12)(1,`label`,16),G(2,`Tool input (JSON)`),R(),L(3,`textarea`,17),H(`input`,function(t){return x(e),S(U(2).draft.set(t.target.value))}),R(),L(4,`p`,18),G(5,` Runs the tool in the app the way an agent call does: it fills the form and submits it. `),R(),L(6,`div`,19)(7,`button`,20),H(`click`,function(){return x(e),S(U(2).tryTool())}),G(8),R()(),k(9,b0,2,2,`p`,18),L(10,`p`,21),G(11),R()()}if(e&2){let e=U(2);O(`aria-labelledby`,e.uid+`-try-label`),E(),B(`id`,e.uid+`-try-label`)(`htmlFor`,e.uid+`-try-input`),E(2),B(`id`,e.uid+`-try-input`)(`value`,e.draft()),O(`aria-describedby`,e.uid+`-try-hint`),E(),B(`id`,e.uid+`-try-hint`),E(3),W(`armed`,e.armed()),B(`disabled`,!e.canWrite()||e.running()),O(`aria-describedby`,e.canWrite()?null:e.uid+`-try-off`),E(),q(` `,e.armed()?`Confirm try`:`Try this tool`,` `),E(),A(e.canWrite()?-1:9),E(2),K(e.message())}}function S0(e,t){if(e&1&&(L(0,`section`,0)(1,`div`,2)(2,`h3`,3),G(3,`WebMCP tool`),R(),L(4,`code`,4),G(5),R(),L(6,`span`,5),G(7),R(),k(8,t0,2,0,`span`,6),R(),k(9,n0,2,1,`p`,7),k(10,r0,2,1,`p`,8),k(11,a0,6,0,`div`,9),k(12,c0,6,0,`div`,9),k(13,u0,6,0,`div`,9),L(14,`div`,9)(15,`p`,10),G(16,`Recent calls`),R(),k(17,g0,3,0,`ul`)(18,_0,2,0,`p`,10)(19,v0,2,0,`p`,10),R(),k(20,y0,6,3,`details`,11),k(21,x0,12,14,`div`,12),R()),e&2){let e=t,n=U();O(`aria-labelledby`,n.uid+`-title `+n.uid+`-name`),E(2),B(`id`,n.uid+`-title`),E(2),B(`id`,n.uid+`-name`),E(),K(e.name),E(),O(`data-state`,e.status),E(),K(n.statusText()),E(),A(e.duplicate?8:-1),E(),A(e.description?9:-1),E(),A(e.status===`failed`&&e.error&&e.error!==`schema`?10:-1),E(),A(e.blocking?.length?11:-1),E(),A(e.inputs?.length?12:-1),E(),A(e.requiredChanged?.length?13:-1),E(4),A(e.calls?.length?17:e.seen===`list`?18:19),E(3),A(e.schema?20:-1),E(),A(n.formId()&&e.status===`registered`?21:-1)}}function C0(e,t){e&1&&(L(0,`p`,1),G(1,` This app uses `),L(2,`code`),G(3,`provideExperimentalWebMcpForms()`),R(),G(4,`, but the browser has no `),L(5,`code`),G(6,`modelContext`),R(),G(7,`, so Angular registers no WebMCP tool for this form. `),R())}function w0(e,t){if(e&1&&(P(0,`p`,5),G(1,` Page `),P(2,`code`),G(3),F()()),e&2){let e=U().$implicit;E(3),K(e.pageId)}}function T0(e,t){if(e&1&&(P(0,`li`),k(1,w0,4,1,`p`,5),I(2,`app-forms-webmcp`,6),F()),e&2){let e=t.$implicit,n=U(2);E(),A(n.manyPages()?1:-1),E(),N(`tool`,e.tool)}}function E0(e,t){if(e&1&&(P(0,`section`,0)(1,`h2`,1),G(2,` Other WebMCP tools `),P(3,`span`,2),G(4),F()(),P(5,`p`,3),G(6,` Tools registered on the page that are not linked to a form in the list, such as tools the app registers itself. `),F(),P(7,`ul`,4),j(8,T0,3,2,`li`,null,ug),F()()),e&2){let e=U();E(4),K(e.tools().length),E(4),M(e.tools())}}var D0=0,O0={running:`running`,submitted:`submitted`,failed:`submit failed`,done:`done`,threw:`threw`};function k0(e,t=0){if(!e||typeof e!=`object`||t>10)return null;let n=e;switch(n.type){case`object`:{let e={},r=n.properties??{};for(let[n,i]of Object.entries(r))e[n]=k0(i,t+1);return e}case`array`:return[k0(n.items,t+1)];case`string`:return``;case`number`:case`integer`:return 0;case`boolean`:return!1;default:return null}}var A0=class e{uid=`forms-webmcp-${++D0}`;tool=$();page=$();signalForm=$(!1);formId=$();rpc=$(null);canWrite=X(()=>OT(this.rpc(),`forms`));writesOff=Mw(`forms`);target=X(()=>`${this.formId()??``}|${this.tool()?.name??``}`);schemaText=X(()=>JSON.stringify(k0(this.tool()?.schema)??{},null,2));draft=Q({source:()=>({target:this.target(),sample:this.schemaText()}),computation:(e,t)=>t&&t.source.target===e.target?t.value:e.sample});armed=Q({source:this.target,computation:()=>!1});running=Q({source:this.target,computation:()=>!1});message=Q({source:this.target,computation:()=>``});async tryTool(){let e=this.formId();if(!e||this.running())return;let t;try{t=JSON.parse(this.draft())}catch{this.message.set(`The tool input is not valid JSON.`);return}if(!t||typeof t!=`object`||Array.isArray(t)){this.message.set(`The tool input must be a JSON object.`);return}if(!this.armed()){this.armed.set(!0),this.message.set(`Press "Confirm try" to run the tool in the app. It submits the form.`);return}this.armed.set(!1);let n=this.target();this.running.set(!0);try{let r=await vT(this.rpc(),{action:`try-webmcp`,formId:e,value:t,confirm:!0});if(this.target()!==n)return;this.message.set(yT(r))}finally{this.target()===n&&this.running.set(!1)}}statusText=X(()=>{let e=this.tool();return e?e.status===`failed`?`not registered`:e.status===`registering`?`registering`:e.seen===`list`?`registered before the inspector attached`:`registered`:``});noModelContext=X(()=>{let e=this.page();return this.signalForm()&&!!e&&!e.modelContext&&!!e.provided});isRequired(e){let t=e.slice(0,e.lastIndexOf(`:`));return this.tool()?.required?.includes(t)??!1}outcome(e){return O0[e]??e}iso(e){return new Date(e).toISOString()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-webmcp`]],inputs:{tool:[1,`tool`],page:[1,`page`],signalForm:[1,`signalForm`],formId:[1,`formId`],rpc:[1,`rpc`]},decls:2,vars:1,consts:[[1,`webmcp`],[1,`note`],[1,`head`],[1,`section-label`,3,`id`],[1,`name`,3,`id`],[1,`state`],[`data-state`,`failed`,1,`state`],[1,`description`],[1,`problem`],[1,`group`],[1,`muted`],[1,`schema`],[`role`,`group`,1,`try`],[1,`inputs`],[1,`tag`],[1,`detail`],[1,`muted`,3,`id`,`for`],[`rows`,`4`,`spellcheck`,`false`,`autocomplete`,`off`,1,`try-input`,3,`input`,`id`,`value`],[1,`muted`,3,`id`],[1,`try-row`],[`type`,`button`,1,`small`,`primary`,3,`click`,`disabled`],[`role`,`status`,1,`status`]],template:function(e,t){if(e&1&&k(0,S0,22,15,`section`,0)(1,C0,8,0,`p`,1),e&2){let e;A((e=t.tool())?0:t.noModelContext()?1:-1,e)}},dependencies:[dy,fy],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+[_nghost-%COMP%] {
+  display: contents;
+}
+
+.webmcp[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-size: 13px;
+  color: var(--%NS%text);
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: center;
+}
+
+.section-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.name[_ngcontent-%COMP%] {
+  font-weight: 600;
+}
+
+.state[_ngcontent-%COMP%] {
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 999px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.state[data-state=failed][_ngcontent-%COMP%], 
+.state[data-state=threw][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 45%, transparent);
+  color: var(--%NS%danger);
+}
+
+.state[data-state=registered][_ngcontent-%COMP%], 
+.state[data-state=submitted][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text);
+}
+
+.description[_ngcontent-%COMP%], 
+.problem[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.problem[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.note[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 13px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.group[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+ul[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0 0 0 16px;
+  overflow-wrap: anywhere;
+}
+
+li[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+li[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%]    + *[_ngcontent-%COMP%] {
+  margin-left: 6px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.detail[_ngcontent-%COMP%] {
+  margin: 4px 0 0;
+  padding: 6px 8px;
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.schema[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.schema[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.try[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.try-input[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  resize: vertical;
+}
+
+.try-input[_ngcontent-%COMP%]:focus, 
+.try-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.try-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.status[_ngcontent-%COMP%]:empty {
+  display: none;
+}`]})},j0=class e{pages=$([]);tools=X(()=>this.pages().flatMap(e=>e.tools.map(t=>({tool:t,pageId:e.pageId}))));manyPages=X(()=>new Set(this.tools().map(e=>e.pageId)).size>1);static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-webmcp-others`]],inputs:{pages:[1,`pages`]},decls:1,vars:1,consts:[[`aria-labelledby`,`forms-webmcp-others-title`,1,`others`],[`id`,`forms-webmcp-others-title`],[1,`count`],[1,`muted`],[1,`tools`],[1,`page`],[3,`tool`]],template:function(e,t){e&1&&k(0,E0,10,1,`section`,0),e&2&&A(t.tools().length?0:-1)},dependencies:[A0],styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.others[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  margin-top: 16px;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+h2[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.count[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  letter-spacing: 0;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+}
+
+.muted[_ngcontent-%COMP%], 
+.page[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+.tools[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tools[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}`]})},M0=(e,t)=>t.id;function N0(e,t){if(e&1&&I(0,`app-forms-setup-errors`,1),e&2){let e=U();N(`errors`,e.pageSetupErrors())(`showPages`,e.setupErrorPages())}}function P0(e,t){e&1&&(P(0,`div`,2),I(1,`span`,7),P(2,`p`),G(3,`Connecting to the devtools server…`),F()())}function F0(e,t){if(e&1){let e=z();P(0,`div`,3)(1,`p`,8),G(2,`Could not load forms`),F(),P(3,`p`,9),G(4,` The devtools server did not answer. Check that the app is running, then try again. `),F(),P(5,`button`,10),V(`click`,function(){return x(e),S(U().retry())}),G(6,`Try again`),F()()}}function Hre(e,t){e&1&&(P(0,`div`,2),I(1,`span`,7),P(2,`p`),G(3,`Loading forms…`),F()())}function I0(e,t){e&1&&(P(0,`div`,4)(1,`p`,8),G(2,`No forms on the page yet`),F(),P(3,`p`,9),G(4,` Open a page that renders a form. Signal Forms, reactive and template-driven forms all show up here, in development builds. `),F()())}function L0(e,t){if(e&1){let e=z();P(0,`div`,4)(1,`p`,8),G(2,`No forms on this page`),F(),P(3,`p`,9),G(4),F(),P(5,`button`,10),V(`click`,function(){return x(e),S(U().allPages.set(!0))}),G(6,` Show forms from all pages `),F()()}if(e&2){let e=U();E(4),J(` Other connected tabs report `,e.forms().length,` `,e.forms().length===1?`form`:`forms`,`. `)}}function R0(e,t){if(e&1){let e=z();P(0,`section`,12)(1,`h2`,14),G(2),F(),P(3,`p`,15),G(4,` This form is no longer on the page. It comes back here if the page renders it again. `),F(),P(5,`button`,10),V(`click`,function(){x(e);let t=U(2);return S(t.selectForm(t.visible()[0].id))}),G(6),F()()}if(e&2){let e=U(2);E(2),K(t),E(4),q(` Show `,e.visible()[0].label,` `)}}function z0(e,t){if(e&1){let e=z();P(0,`section`,12)(1,`h2`,14),G(2),F(),P(3,`p`,9),G(4,`This form is on another page. Tick "All pages" to see it again.`),F(),P(5,`button`,10),V(`click`,function(){return x(e),S(U(2).allPages.set(!0))}),G(6,` Show forms from all pages `),F()()}e&2&&(E(2),K(t))}function B0(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U();E(),K(e.submitted?`submitted`:`not submitted`)}}function V0(e,t){e&1&&(P(0,`span`),G(1,`submitting`),F())}function H0(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,29),V(`click`,function(){let t=x(e).$implicit;return S(U(4).showField(t.path))}),P(2,`span`,30),G(3,`Show field `),F(),P(4,`code`),G(5),F(),P(6,`span`,30),G(7,`:`),F(),G(8),P(9,`code`,31),G(10),F()()()}if(e&2){let e=t.$implicit;E(5),K(e.path||`(form)`),E(3),q(` `,e.message,` `),E(2),K(e.kind)}}function U0(e,t){if(e&1&&(P(0,`details`,21)(1,`summary`),G(2),F(),P(3,`ul`),j(4,H0,11,3,`li`,null,ug),F()()),e&2){let e=U();E(2),q(`Error summary (`,e.errorSummary.length,`)`),E(2),M(e.errorSummary)}}function W0(e,t){if(e&1){let e=z();P(0,`button`,32),V(`click`,function(){let t=x(e).$implicit;return S(U(3).tab_.set(t.id))}),G(1),F()}if(e&2){let e=t.$implicit,n=U(3);N(`id`,`forms-tab-`+e.id),O(`aria-selected`,e.id===n.tab_())(`aria-controls`,`forms-panel-`+e.id)(`tabindex`,e.id===n.tab_()?0:-1),E(),q(` `,e.label,` `)}}function G0(e,t){if(e&1){let e=z();I(0,`app-redaction-count`,33),P(1,`app-forms-fields`,34),U_(`filterChange`,function(t){x(e);let n=U(3);return H_(n.filter,t)||(n.filter=t),S(t)})(`activeChange`,function(t){x(e);let n=U(3);return H_(n.active,t)||(n.active=t),S(t)}),V(`toggleField`,function(t){return x(e),S(U(3).toggleField(t))})(`closeField`,function(){return x(e),S(U(3).closeField())})(`clearFilters`,function(t){return x(e),S(U(3).clearFilters(t))})(`highlight`,function(t){return x(e),S(U(3).highlight(t?.formId??null,t?.path??``))}),F()}if(e&2){let e=U(),t=U(2);N(`value`,e),E(),N(`form`,e)(`rows`,t.rows())(`fieldPath`,t.fieldPath())(`selectedNode`,t.selectedNode())(`version`,t.version())(`rpc`,t.rpc())(`filtering`,t.filtering())(`filterStatus`,t.filterStatus()),V_(`filter`,t.filter)(`active`,t.active)}}function K0(e,t){e&1&&I(0,`app-forms-schema`,27),e&2&&N(`form`,U())}function q0(e,t){if(e&1){let e=z();I(0,`app-forms-export-test`,35)(1,`app-limit-note`,36),P(2,`app-forms-timeline`,37),V(`record`,function(t){return x(e),S(U(3).setRecording(t))}),F()}if(e&2){let e=U(),t=U(2);N(`formId`,e.id)(`rpc`,t.rpc()),E(),N(`dropped`,t.droppedEvents())(`max`,t.maxEvents()),E(),N(`events`,t.selectedEvents())(`recording`,t.recording())}}function J0(e,t){if(e&1&&I(0,`app-forms-submit`,28),e&2){let e=U(),t=U(2);N(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function Y0(e,t){if(e&1){let e=z();P(0,`app-forms-lint`,38),V(`showField`,function(t){return x(e),S(U(3).showField(t))}),F()}if(e&2){let e=U(),t=U(2);N(`formId`,e.id)(`version`,t.version())(`rpc`,t.rpc())}}function X0(e,t){if(e&1){let e=z();P(0,`section`,13)(1,`div`,16)(2,`h2`,14),G(3),F(),P(4,`p`,17),G(5),P(6,`code`),G(7),F()()(),P(8,`div`,18)(9,`span`,19),G(10),F(),P(11,`span`),G(12),F(),P(13,`span`),G(14),F(),k(15,B0,2,1,`span`),k(16,V0,2,0,`span`),P(17,`span`,20)(18,`b`),G(19),F(),G(20,` fields · `),P(21,`b`),G(22),F(),G(23,` errors`),F()(),k(24,U0,6,1,`details`,21),I(25,`app-forms-webmcp`,22),P(26,`app-forms-action-bar`,23),V(`act`,function(t){return x(e),S(U(2).act(t))})(`confirmAct`,function(t){return x(e),S(U(2).confirmAct(t))})(`pick`,function(){return x(e),S(U(2).pick())})(`cancelPick`,function(){return x(e),S(U(2).cancelPick())}),F(),P(27,`div`,24),V(`keydown`,function(t){return x(e),S(U(2).onKey(t))}),j(28,W0,2,5,`button`,25,M0),F(),P(30,`div`,26),k(31,G0,2,11)(32,K0,1,1,`app-forms-schema`,27)(33,q0,3,6)(34,J0,1,3,`app-forms-submit`,28)(35,Y0,1,3,`app-forms-lint`,28),F()()}if(e&2){let e,n=t,r=U(2);E(3),K(n.label),E(2),q(` `,r.kindLabel(n.kind),` · `),E(2),K(n.id),E(2),O(`data-status`,n.root.status),E(),K(n.root.status),E(2),K(n.root.dirty?`dirty`:`pristine`),E(2),K(n.root.touched?`touched`:`untouched`),E(),A(n.submitted===void 0?-1:15),E(),A(n.root.submitting?16:-1),E(3),K(r.counts().get(n.id)?.fields),E(2),W(`has-errors`,r.counts().get(n.id)?.errors),E(),K(r.counts().get(n.id)?.errors),E(2),A(n.errorSummary?.length?24:-1),E(),N(`tool`,n.webMcp)(`page`,r.webMcpPage(n.id))(`signalForm`,n.kind===`signal`)(`formId`,n.id)(`rpc`,r.rpc()),E(),N(`canWrite`,r.canWrite())(`writesOff`,r.writesOff)(`picking`,r.picking())(`snapshot`,r.snapshot())(`armed`,r.armed())(`message`,r.message()),E(2),M(r.tabs()),E(2),N(`id`,`forms-panel-`+r.tab_()),O(`aria-labelledby`,`forms-tab-`+r.tab_()),E(),A((e=r.tab_())===`fields`?31:e===`schema`?32:e===`timeline`?33:e===`submit`?34:e===`lint`?35:-1)}}function Z0(e,t){if(e&1){let e=z();P(0,`div`,5)(1,`app-forms-list`,11),U_(`allPagesChange`,function(t){x(e);let n=U();return H_(n.allPages,t)||(n.allPages=t),S(t)}),V(`selectForm`,function(t){return x(e),S(U().selectForm(t))}),F(),k(2,R0,7,2,`section`,12)(3,z0,7,1,`section`,12)(4,X0,36,28,`section`,13),F()}if(e&2){let e,t=U();E(),N(`forms`,t.visible())(`selectedId`,t.selected()?.id)(`counts`,t.counts())(`showToggle`,!!t.hostPageId&&(t.allPages()||t.otherPages())),V_(`allPages`,t.allPages),E(),A((e=t.missing())?2:(e=t.hidden())?3:(e=t.selected())?4:-1,e)}}function Q0(e,t){e&1&&I(0,`app-forms-webmcp-others`,6),e&2&&N(`pages`,U().pageWebMcp())}var $0=[{id:`fields`,label:`Fields`},{id:`schema`,label:`Schema`},{id:`timeline`,label:`Timeline`},{id:`submit`,label:`Submit`},{id:`lint`,label:`Lint`}];function e2(e){return e.errors.length+(e.children??[]).reduce((e,t)=>e+e2(t),0)}function t2(e){return e.children?e.children.reduce((e,t)=>e+t2(t),0):+(e.type===`control`&&e.materialized!==!1)}var n2=class e{rpc=$(null);focus=$(null);canWrite=X(()=>OT(this.rpc(),`forms`));writesOff=Mw(`forms`);focusHandled=xv();forms=w([]);webMcp=w([]);events=w([]);loading=w(!0);failed=w(!1);selectedId=w(null);selectedLabel=w(null);hostPageId=tT();allPages=w(!1);visible=X(()=>{let e=this.forms(),t=this.hostPageId;return t&&!this.allPages()?e.filter(e=>dT(e.id)===t):e});otherPages=X(()=>this.forms().some(e=>dT(e.id)!==this.hostPageId));instrumented=w([]);recording=X(()=>{let e=this.selected()?.id??``;return this.instrumented().some(t=>e.endsWith(`@${t}`))});filter=w(``);tabs=X(()=>this.selected()?.kind===`signal`?$0:$0.filter(e=>e.id!==`schema`));tab_=Q({source:this.tabs,computation:(e,t)=>t&&e.some(e=>e.id===t.value)?t.value:`fields`});active=w(new Set);filtering=X(()=>!!this.filter()||this.active().size>0);filterStatus=w(``);version=w(0);message=w(``);setupErrors=w([]);pageSetupErrors=X(()=>this.onShownPages(this.setupErrors()));setupErrorPages=X(()=>new Set(this.pageSetupErrors().map(e=>e.pageId)).size>1);pageWebMcp=X(()=>this.onShownPages(this.webMcp()).filter(e=>e.tools.length));onShownPages(e){let t=this.hostPageId;return t&&!this.allPages()?e.filter(e=>e.pageId===t):e}webMcpPage(e){let t=dT(e);return this.webMcp().find(e=>e.pageId===t)}picking=w(null);pickSeq=0;unsubscribe=null;destroyRef=b(Os);host=b(Rl);injector=b(Es);counts=X(()=>new Map(this.visible().map(e=>[e.id,{fields:t2(e.root),errors:e2(e.root)}])));chosen=X(()=>{let e=this.selectedId();if(e===null)return null;let t=this.forms(),n=this.selectedLabel(),r=dT(e);return t.find(t=>t.id===e)??t.find(e=>e.label===n&&dT(e.id)===r)??null});selected=X(()=>{let e=this.visible();if(this.selectedId()===null)return e[0]??null;let t=this.chosen();return t&&e.includes(t)?t:null});missing=X(()=>this.selectedId()!==null&&!this.chosen()&&this.visible().length?this.selectedLabel()??this.selectedId():null);hidden=X(()=>{let e=this.chosen();return e&&!this.selected()&&this.visible().length?e.label:null});selectedFormId=X(()=>this.selected()?.id??null);fieldPath=Q({source:this.selectedFormId,computation:()=>null});armed=Q({source:this.selectedFormId,computation:()=>null});snapshot=Q({source:this.selectedFormId,computation:()=>null});rows=X(()=>{let e=this.selected();if(!e)return[];let t=this.filter().toLowerCase(),n=Array.from(this.active()),r=[],i=(e,a)=>{let o=r.length,s=(!t||e.path.toLowerCase().includes(t))&&n.every(t=>e1(e,t));for(let t of e.children??[])s=i(t,a+1)||s;return s&&r.splice(o,0,{node:e,depth:a}),s};return i(e.root,0),r});selectedNode=X(()=>{let e=this.fieldPath(),t=this.selected();if(e===null||!t)return null;let n=t=>t.path===e?t:(t.children??[]).map(n).find(Boolean)??null;return n(t.root)});dropped=w({});droppedEvents=X(()=>{let e=this.selected()?.id;return e?this.dropped()[dT(e)]??0:0});maxEvents=X(()=>TT(this.rpc()).limits.formTimeline);selectedEvents=X(()=>{let e=this.selected()?.id;return this.events().filter(t=>t.formId===e)});constructor(){jq(`forms`,this.selectedId),jq(`forms`,this.selectedLabel,`label`),T(()=>{let e=this.rpc();e&&this.load(e)}),T(()=>{let e=this.focus();e&&Z(()=>{this.selectForm(e.id),this.focusHandled.emit()})}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.highlight(null,``)})}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`forms`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.forms.set(t?.forms??[]),this.events.set(t?.events??[]),this.instrumented.set(t?.instrumented??[]),this.dropped.set(t?.dropped??{}),this.webMcp.set(t?.webMcp??[]),this.setupErrors.set(t?.setupErrors??[]),this.version.update(e=>e+1)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}async pick(){let e=this.selected();if(!e)return;let t=++this.pickSeq;this.picking.set(e.id),this.message.set(`Click a field in the app. Press Escape or Cancel picking to stop.`);let n=await vT(this.rpc(),{action:`pick`,formId:e.id});if(t!==this.pickSeq)return;this.picking.set(null);let r=n;if(!n.ok||!r.formId){this.message.set(yT(n));return}this.selectForm(r.formId),this.tab_.set(`fields`),this.fieldPath.set(r.path??``),this.message.set(`Picked ${r.path||`(form)`}.`)}cancelPick(){let e=this.picking();e&&vT(this.rpc(),{action:`cancel-pick`,formId:e})}async setRecording(e){let t=this.selected();if(!t)return;let n=await vT(this.rpc(),{action:`instrument`,formId:t.id,value:e});this.message.set(yT(n))}selectForm(e){this.hostPageId&&dT(e)&&dT(e)!==this.hostPageId&&this.allPages.set(!0),this.selectedId.set(e),this.selectedLabel.set(this.forms().find(t=>t.id===e)?.label??null),this.filter.set(``),this.fieldPath.set(null),this.snapshot.set(null),this.armed.set(null)}toggleField(e){this.fieldPath.update(t=>t===e?null:e)}closeField(){let e=this.host.nativeElement,t=e.querySelector(`button.field[aria-pressed="true"]`)??e.querySelector(`.table-scroll`);this.fieldPath.set(null),t?.focus()}showField(e){this.tab_.set(`fields`);let t=()=>this.rows().some(t=>t.node.path===e);t()||this.filter.set(``),t()||this.active.set(new Set),this.fieldPath.set(e),Sd(()=>{let e=this.host.nativeElement;e.querySelector(`button.field[aria-pressed="true"]`)?.scrollIntoView?.({block:`nearest`}),(e.querySelector(`#forms-field-heading`)??e.querySelector(`.table-scroll`))?.focus()},{injector:this.injector})}async act(e,t={}){let n=this.selected();if(!n)return;this.armed.set(null);let r=await vT(this.rpc(),{action:e,formId:n.id,...t});r.snapshot&&this.selected()?.id===n.id&&this.snapshot.set(r.snapshot),this.message.set(yT(r))}confirmAct(e){if(this.armed()!==e){this.armed.set(e),this.message.set(`Press "Confirm ${e}" to ${e} the form in the app.`);return}this.act(e,{confirm:!0,snapshot:this.snapshot()??void 0})}onKey(e){let t=this.tabs().map(e=>e.id),n=t.indexOf(this.tab_()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.tab_.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#forms-tab-${t[r]}`)?.focus())}clearFilters(e){this.filter.set(``),this.active.set(new Set);let t=this.rows().length,n=`Filters cleared. Showing ${t} ${t===1?`field`:`fields`}.`;this.filterStatus.update(e=>e===n?`${n}\u00a0`:n),e.focus()}highlight(e,t){let n=this.rpc();n&&n.scope(`pangular`).rpc.callEvent(`request-form-highlight`,e?{formId:e,path:t}:null)}kindLabel(e){return fT[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-forms-inspector`]],hostBindings:function(e,t){e&1&&V(`keydown.escape`,function(){return t.cancelPick()})},inputs:{rpc:[1,`rpc`],focus:[1,`focus`]},outputs:{focusHandled:`focusHandled`},decls:10,vars:3,consts:[[1,`page-intro`],[3,`errors`,`showPages`],[`role`,`status`,1,`empty`],[`role`,`alert`,1,`empty`],[1,`empty`],[1,`layout`],[3,`pages`],[`aria-hidden`,`true`,1,`spinner`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`small`,3,`click`],[3,`allPagesChange`,`selectForm`,`forms`,`selectedId`,`counts`,`showToggle`,`allPages`],[`aria-labelledby`,`forms-detail-title`,1,`detail`,`gone`],[`aria-labelledby`,`forms-detail-title`,1,`detail`],[`id`,`forms-detail-title`],[`role`,`status`,1,`muted`],[1,`detail-head`],[1,`detail-meta`],[1,`summary`],[1,`badge`],[1,`totals`],[1,`error-summary`],[3,`tool`,`page`,`signalForm`,`formId`,`rpc`],[3,`act`,`confirmAct`,`pick`,`cancelPick`,`canWrite`,`writesOff`,`picking`,`snapshot`,`armed`,`message`],[`role`,`tablist`,`aria-label`,`Form views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[3,`form`],[3,`formId`,`version`,`rpc`],[`type`,`button`,1,`summary-link`,3,`click`],[1,`sr-only`],[1,`kind-tag`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[3,`value`],[3,`filterChange`,`activeChange`,`toggleField`,`closeField`,`clearFilters`,`highlight`,`form`,`rows`,`fieldPath`,`selectedNode`,`version`,`rpc`,`filtering`,`filterStatus`,`filter`,`active`],[3,`formId`,`rpc`],[`what`,`form events on this page`,`limit`,`formTimeline`,3,`dropped`,`max`],[3,`record`,`events`,`recording`],[3,`showField`,`formId`,`version`,`rpc`]],template:function(e,t){e&1&&(P(0,`p`,0),G(1,` Signal Forms, reactive and template-driven forms on the live page, with each field's state and errors, a change timeline, submit explanations and a lint. Development builds only. `),F(),k(2,N0,1,2,`app-forms-setup-errors`,1),k(3,P0,4,0,`div`,2)(4,F0,7,0,`div`,3)(5,Hre,4,0,`div`,2)(6,I0,5,0,`div`,4)(7,L0,7,2,`div`,4)(8,Z0,5,6,`div`,5),k(9,Q0,1,1,`app-forms-webmcp-others`,6)),e&2&&(E(2),A(t.pageSetupErrors().length?2:-1),E(),A(t.rpc()?t.failed()?4:t.loading()?5:t.forms().length?t.visible().length?8:7:6:3),E(6),A(t.rpc()&&!t.failed()&&!t.loading()?9:-1))},dependencies:[Xj,e$,r$,n1,s1,b1,N1,$1,k1,A1,A0,j0,dD],styles:[`.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+}
+
+.small[_ngcontent-%COMP%] {
+  display: inline-block;
+  max-width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.small[_ngcontent-%COMP%]:active {
+  background: var(--%NS%border-strong);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  border-color: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.small.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.small.danger[_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+  color: var(--%NS%danger);
+}
+
+.small.danger[_ngcontent-%COMP%]:hover {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  border-color: var(--%NS%danger);
+}
+
+.small.armed[_ngcontent-%COMP%] {
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.small.danger.armed[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  border-color: var(--%NS%danger);
+  color: #1f0707;
+  font-weight: 600;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%danger) 18%, transparent);
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+    color: #fff;
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .small.danger.armed[_ngcontent-%COMP%] {
+  color: #fff;
+}
+
+.summary-link[_ngcontent-%COMP%] {
+  display: inline;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.summary-link[_ngcontent-%COMP%]   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.summary-link[_ngcontent-%COMP%]:hover   code[_ngcontent-%COMP%]:first-of-type {
+  color: var(--%NS%accent-hover);
+}
+
+.summary-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.field-input[_ngcontent-%COMP%] {
+  min-width: 0;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.field-input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%font-sans);
+}
+
+.field-input[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%text-3) 55%, var(--%NS%control-border));
+}
+
+.field-input[_ngcontent-%COMP%]:focus, 
+.field-input[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.explain[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  tab-size: 2;
+}
+
+.explain[aria-busy=true][_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.section-label[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-block;
+  margin: 0;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+}
+
+.tag[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.tag[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.empty-state[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 40px 24px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.page-intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+[_nghost-%COMP%] {
+  display: block;
+}
+
+.layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.detail[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  padding: 16px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.detail-head[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.detail-meta[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.detail-meta[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+}
+
+.gone[_ngcontent-%COMP%] {
+  justify-items: start;
+}
+
+.gone[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 16px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.gone[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.error-summary[_ngcontent-%COMP%] {
+  min-width: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-size: 13px;
+}
+
+.error-summary[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.error-summary[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.error-summary[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 8px 0 0;
+  padding: 0 0 0 16px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.error-summary[_ngcontent-%COMP%]   .kind-tag[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.summary[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.summary[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]:not(.badge):not(.totals) {
+  padding: 0 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  line-height: 22px;
+}
+
+.totals[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.totals[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 600;
+}
+
+.totals[_ngcontent-%COMP%]   b.has-errors[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+
+.badge[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 0 8px;
+  border: 1px solid color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--%NS%ok) 12%, var(--%NS%surface));
+  color: var(--%NS%ok-text);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.summary[_ngcontent-%COMP%]    > .badge[_ngcontent-%COMP%] {
+  line-height: 22px;
+}
+
+.badge[data-status=INVALID][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, var(--%NS%surface));
+  color: var(--%NS%danger-text);
+}
+
+.badge[data-status=PENDING][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, var(--%NS%surface));
+  color: var(--%NS%warn-text);
+}
+
+.badge[data-status=DISABLED][_ngcontent-%COMP%] {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.tabs[_ngcontent-%COMP%] {
+  display: inline-flex;
+  justify-self: start;
+  gap: 2px;
+  max-width: 100%;
+  height: 34px;
+  padding: 2px;
+  overflow-x: auto;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%] {
+  flex: none;
+  height: 28px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+  background: var(--%NS%surface-2);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][aria-selected=true][_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.panel[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 48px 24px;
+  background: var(--%NS%surface);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  color: var(--%NS%text-2);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  max-width: 52ch;
+  margin: 0;
+}
+
+.empty[_ngcontent-%COMP%]   .small[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+@media (max-width: 720px) {
+  .layout[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 480px) {
+  .detail[_ngcontent-%COMP%] {
+    padding: 12px;
+  }
+  .totals[_ngcontent-%COMP%] {
+    flex-basis: 100%;
+    margin-left: 0;
+  }
+}`]})},r2=5e3,i2=[{value:`all`,label:`All pipes`},{value:`custom`,label:`Custom`},{value:`builtin`,label:`Built-in`},{value:`runtime`,label:`Runtime only`},{value:`impure`,label:`Impure`},{value:`live`,label:`On the page`},{value:`called`,label:`Called while recording`}],a2=[{value:`source`,label:`Source order`},{value:`calls`,label:`Most calls`},{value:`time`,label:`Most time`}];function o2(e){return e.builtin?`@angular/common`:e.runtime?`Seen on the page only`:`This project`}function s2(e){return`${e<10?e.toFixed(2):Math.round(e)} ms`}function c2(e){if(Array.isArray(e))return e.map(e=>c2(e)).join(`, `);if(typeof e==`string`)return e.length>80?`${e.slice(0,80)}…`:e;try{let t=JSON.stringify(e);return t&&t.length>120?`${t.slice(0,120)}…`:t??String(e)}catch{return String(e)}}var l2=class e{destroyRef=b(Os);host=b(Rl);injector=b(Es);rpcSource=w(null);rpc=X(()=>this.rpcSource());pageIdSource=w(null);pipes=w([]);filter=w(``);kind=w(`all`);sort=w(`source`);loading=w(!1);loadFailed=w(!1);selected=w(null);snapshot=w(void 0);shown=X(()=>{let e=this.snapshot(),t=this.livePageId();return(t?e?.pages?.find(e=>e.pageId===t):void 0)??e});live=X(()=>this.shown()?.pipes??[]);async=X(()=>this.shown()?.async??[]);asyncTotal=X(()=>this.shown()?.asyncTotal);lint=w(null);lintFailed=w(!1);instrumentedPages=w([]);instrumenting=X(()=>this.instrumentedPages().length>0);pendingRecord=w(null);recordMessage=w(null);recordLabel=X(()=>{let e=this.pendingRecord();return e===null?this.instrumenting()?`Stop recording`:`Record calls`:e?`Starting…`:`Stopping…`});pendingTimer;liveByName=X(()=>new Map(this.live().map(e=>[e.name,e])));allPipes=X(()=>{let e=this.pipes(),t=new Set(e.map(e=>e.name)),n=this.live().filter(e=>!t.has(e.name)).map(e=>({name:e.name,className:e.className,file:``,line:0,isStandalone:!0,isPure:e.isPure,runtime:!0}));return n.length?[...e,...n]:e});filtered=X(()=>{let e=this.filter(),t=this.kind()??`all`,n=this.allPipes().filter(n=>this.fitsKind(n,t)&&this.fitsQuery(n,e)),r=this.sort()??`source`;if(r===`source`)return n;let i=e=>{let t=this.liveFor(e.name)?.call;return t?r===`calls`?t.callCount:t.totalMs??0:-1};return n.map((e,t)=>({p:e,index:t,weight:i(e)})).sort((e,t)=>t.weight-e.weight||e.index-t.index).map(({p:e})=>e)});pipesByName=X(()=>{let e=new Map;for(let t of this.allPipes())e.set(t.name,[...e.get(t.name)??[],t]);return e});unsubscribe;constructor(){this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.pendingTimer),this.highlight(null)})}connect(e,t){this.rpcSource=e,this.pageIdSource=t}async refresh(){let e=this.rpc();if(e){this.loading.set(!0),this.loadFailed.set(!1);try{let t=await e.scope(`pangular`).rpc.call(`get-pipes`);this.pipes.set(t);let n=this.selected();if(n){let e=this.allPipes().find(e=>e.name===n.name&&e.file===n.file);this.selected.set(e??null)}}catch{this.loadFailed.set(!0)}finally{this.loading.set(!1)}this.loadLint(e)}}async loadLint(e){this.lintFailed.set(!1);try{let t=await e.scope(`pangular`).rpc.call(`pipe-lint`);this.lint.set(t)}catch{this.lintFailed.set(!0)}}async loadLive(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`pipe-usage`);if(this.destroyRef.destroyed)return;let n=e=>{let t=e;this.snapshot.set(t);let n=this.selected();n?.runtime&&!this.liveByName().has(n.name)&&this.selected.set(null);let r=t?.instrumented??[];this.instrumentedPages.set(r),this.pendingRecord()===r.length>0&&this.settleRecord(null)};n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}livePageId(){return this.pageIdSource()??tT()}async toggleInstrument(){let e=this.rpc();if(!e||this.pendingRecord()!==null)return;let t=!this.instrumenting();this.recordMessage.set(null),this.pendingRecord.set(t);let n;try{let r=t?{pageId:this.livePageId()??void 0,on:t}:{on:t};n=await e.scope(`pangular`).rpc.call(`request-instrument-pipes`,r)}catch{this.settleRecord(`Couldn't reach the devtools server. Try again.`);return}if(this.pendingRecord()===t){if(n?.pages===0){this.settleRecord(`No page is connected. Open your app in the browser with the devtools running, then record again.`);return}clearTimeout(this.pendingTimer),this.pendingTimer=setTimeout(()=>{this.pendingRecord()===t&&this.settleRecord(t?`No page confirmed recording. Reload the app and try again.`:`No page confirmed it stopped recording. Reload the app to stop it.`)},r2)}}settleRecord(e){clearTimeout(this.pendingTimer),this.pendingRecord.set(null),e!==null&&this.recordMessage.set(e)}liveFor(e){return this.liveByName().get(e)}isSelected(e){let t=this.selected();return t!==null&&t.name===e.name&&t.file===e.file}select(e){this.selected.set(this.isSelected(e)?null:e)}pipeFor(e){let t=this.pipesByName().get(e.pipe);return t?.length?t.find(t=>t.file===e.file)??t[0]:null}showPipe(e){this.fitsQuery(e,this.filter())||this.filter.set(``),this.fitsKind(e,this.kind()??`all`)||this.kind.set(`all`),this.selected.set(e),Sd(()=>{let e=this.host.nativeElement;e.querySelector(`.row.selected`)?.scrollIntoView?.({block:`nearest`}),e.querySelector(`#pipe-detail-title`)?.focus()},{injector:this.injector})}fitsKind(e,t){return t===`custom`?!e.builtin&&!e.runtime:t===`builtin`?!!e.builtin:t===`runtime`?!!e.runtime:t===`impure`?!e.isPure:t===`live`?this.liveByName().has(e.name):t!==`called`||!!this.liveByName().get(e.name)?.call}fitsQuery(e,t){let n=t.trim().toLowerCase();return!n||e.name.toLowerCase().includes(n)||e.className.toLowerCase().includes(n)||e.file.toLowerCase().includes(n)}highlightPipe(e){this.highlight(e?.components.find(e=>e.targets?.length)?.targets?.[0])}highlight(e,t=!1){let n=this.rpc();n&&n.scope(`pangular`).rpc.call(`request-page-highlight`,e?{...e,...t?{reveal:t}:{}}:null).catch(()=>{})}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})};function u2(e,t){if(e&1&&(L(0,`p`,2),G(1),R()),e&2){let e=U();E(),J(`Showing `,e.async().length,` of `,t,` subscriptions.`)}}function d2(e,t){if(e&1){let e=z();L(0,`button`,12),H(`click`,function(){let t=x(e);return S(U(2).highlight(t))})(`focus`,function(){let t=x(e);return S(U(2).highlight(t))})(`blur`,function(){return x(e),S(U(2).highlight(null))}),G(1),R()}if(e&2){let e=U().$implicit;O(`aria-label`,`Highlight `+e.component+` on the page`),E(),q(` `,e.component,` `)}}function f2(e,t){if(e&1&&(L(0,`span`,8),G(1),R()),e&2){let e=U().$implicit;E(),K(e.component)}}function p2(e,t){e&1&&(L(0,`span`,9),G(1,`no source`),R())}function m2(e,t){e&1&&(L(0,`span`,10),G(1,`possible duplicate subscription`),R())}function h2(e,t){e&1&&(L(0,`span`,10),G(1,`resubscribing`),R())}function g2(e,t){if(e&1){let e=z();L(0,`li`,6),H(`mouseenter`,function(){let t=x(e).$implicit;return S(U().highlight(t.target))})(`mouseleave`,function(){return x(e),S(U().highlight(null))}),k(1,d2,2,2,`button`,7)(2,f2,2,1,`span`,8),k(3,p2,2,0,`span`,9),k(4,m2,2,0,`span`,10),k(5,h2,2,0,`span`,10),L(6,`span`,11),G(7),R()()}if(e&2){let e,n=t.$implicit;E(),A((e=n.target)?1:2,e),E(2),A(n.hasSource?-1:3),E(),A(n.duplicate?4:-1),E(),A(n.resubscribing?5:-1),E(2),K(n.latestValue??`no value yet`)}}var _2=class e{state=b(l2);async=this.state.async;asyncTotal=this.state.asyncTotal;highlight(...e){this.state.highlight(...e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appPipeAsync`,``]],decls:16,vars:2,consts:[[`id`,`async-title`],[1,`pill`],[1,`hint`],[1,`mono`],[1,`async-list`],[1,`async-row`],[1,`async-row`,3,`mouseenter`,`mouseleave`],[`type`,`button`,1,`component-name`,`mono`],[1,`mono`,`component-name`],[1,`chip`],[1,`chip`,`warn`],[1,`mono`,`value`,`latest`],[`type`,`button`,1,`component-name`,`mono`,3,`click`,`focus`,`blur`]],template:function(e,t){if(e&1&&(L(0,`h2`,0),G(1,` Async subscriptions `),L(2,`span`,1),G(3),R()(),L(4,`p`,2),G(5,` Each `),L(6,`span`,3),G(7,`| async`),R(),G(8,` subscribes on its own. Two on the same source mean the work runs twice. A source that changes on every check, like `),L(9,`span`,3),G(10,`getData() | async`),R(),G(11,`, resubscribes each time.
+`),R(),k(12,u2,2,2,`p`,2),L(13,`ul`,4),j(14,g2,8,5,`li`,5,ug),R()),e&2){let e;E(3),K(t.async().length),E(9),A((e=t.asyncTotal())?12:-1,e),E(2),M(t.async())}},styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 7px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.chip.impure[_ngcontent-%COMP%], 
+.chip.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip.live[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip.hot[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.value[_ngcontent-%COMP%] {
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.empty-line[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.empty-line.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.section[_nghost-%COMP%]   h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+
+.section[_nghost-%COMP%]    > .hint[_ngcontent-%COMP%] {
+  margin: -2px 0 10px;
+}
+
+.async-list[_ngcontent-%COMP%], 
+.findings[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.async-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+  min-width: 0;
+  padding: 8px 12px;
+  border-radius: var(--%NS%radius-sm);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+.async-row[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+}
+
+.component-name[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+button.component-name[_ngcontent-%COMP%] {
+  height: 24px;
+  padding: 0 8px;
+  margin-left: -8px;
+  border-color: transparent;
+  background: none;
+  font-size: 13px;
+}
+
+.latest[_ngcontent-%COMP%] {
+  flex: 1 1 100%;
+  color: var(--%NS%text-2);
+}`]})},v2=(e,t)=>t.file+`:`+t.line,y2=(e,t)=>t.name;function b2(e,t){e&1&&(P(0,`span`,2),G(1,`built-in`),F())}function x2(e,t){e&1&&(P(0,`span`,2),G(1,`runtime only`),F())}function S2(e,t){if(e&1&&(P(0,`dt`),G(1,`File`),F(),P(2,`dd`,4),I(3,`app-source-link`,6),F()),e&2){let e=U();E(3),N(`file`,e.file)(`line`,e.line)}}function C2(e,t){if(e&1&&(P(0,`dt`),G(1,`Standalone`),F(),P(2,`dd`),G(3),F()),e&2){let e=U();E(3),K(e.isStandalone?`Yes`:`No, declared in an NgModule`)}}function w2(e,t){if(e&1&&(P(0,`li`,4),I(1,`app-source-link`,6),F()),e&2){let e=t.$implicit;E(),N(`file`,e.file)(`line`,e.line)}}function T2(e,t){if(e&1&&(P(0,`div`,3)(1,`h3`),G(2,` Used in templates `),P(3,`span`,7),G(4),F()(),P(5,`ul`,8),j(6,w2,2,2,`li`,4,v2),F()()),e&2){let e=U();E(4),K(e.usageCount),E(2),M(e.usages)}}function E2(e,t){e&1&&G(0),e&2&&q(` An instance ran `,U().streak,` times in a row and returned an equal result each time: its input changes reference while its contents stay the same. Keep the input stable, for example in a computed(). `)}function D2(e,t){e&1&&G(0),e&2&&q(` An instance returned an equal object or array as a new reference `,U().streak,` times in a row, so the bindings that read it update for nothing. Return the previous result when it is equal, or use a computed(). `)}function O2(e,t){if(e&1&&(P(0,`p`,9)(1,`span`,12),G(2,`churning`),F(),k(3,E2,1,1)(4,D2,1,1),F()),e&2){let e=U();E(3),A(e.isPure?3:4)}}function k2(e,t){e&1&&(P(0,`p`,9)(1,`span`,12),G(2,`experimental`),F(),G(3,` This pure pipe got an argument whose contents changed while its reference stayed the same, so it may be showing a stale value. `),F())}function A2(e,t){if(e&1){let e=z();P(0,`button`,15),V(`click`,function(){let t=x(e);return S(U(4).highlight(t,!0))})(`mouseenter`,function(){let t=x(e);return S(U(4).highlight(t))})(`mouseleave`,function(){return x(e),S(U(4).highlight(null))})(`focus`,function(){let t=x(e);return S(U(4).highlight(t))})(`blur`,function(){return x(e),S(U(4).highlight(null))}),P(1,`span`,4),G(2),F(),P(3,`span`,16),G(4),F()()}if(e&2){let e=U().$implicit;O(`aria-label`,`Highlight `+e.name+` on the page`),E(2),K(e.name),E(2),K(e.count)}}function j2(e,t){if(e&1&&(P(0,`span`,14)(1,`span`,4),G(2),F(),P(3,`span`,16),G(4),F()()),e&2){let e=U().$implicit;E(2),K(e.name),E(2),K(e.count)}}function M2(e,t){if(e&1&&(P(0,`li`),k(1,A2,5,3,`button`,13)(2,j2,5,2,`span`,14),F()),e&2){let e,n=t.$implicit;E(),A((e=n.targets?.[0])?1:2,e)}}function N2(e,t){if(e&1&&(P(0,`dt`),G(1,`Time`),F(),P(2,`dd`),G(3),F()),e&2){let e=U(),t=U(3);E(3),R_(` `,t.ms(e.totalMs),` total, `,t.ms(e.totalMs/e.callCount),` average, `,t.ms(e.maxMs??0),` slowest `)}}function P2(e,t){if(e&1&&(P(0,`span`,17),G(1),F()),e&2){let e=U(2);E(),K(e.lastError)}}function F2(e,t){if(e&1&&(P(0,`dt`),G(1,`Errors`),F(),P(2,`dd`),G(3),k(4,P2,2,1,`span`,17),F()),e&2){let e=U();E(3),q(` `,e.errorCount,` `),E(),A(e.lastError?4:-1)}}function I2(e,t){if(e&1){let e=z();P(0,`button`,15),V(`click`,function(){let t=x(e);return S(U(6).highlight(t,!0))})(`mouseenter`,function(){let t=x(e);return S(U(6).highlight(t))})(`mouseleave`,function(){return x(e),S(U(6).highlight(null))})(`focus`,function(){let t=x(e);return S(U(6).highlight(t))})(`blur`,function(){return x(e),S(U(6).highlight(null))}),P(1,`span`,4),G(2),F()()}if(e&2){let e=U().$implicit;O(`aria-label`,`Highlight `+e.component+` on the page`),E(2),K(e.component)}}function L2(e,t){if(e&1&&(P(0,`span`,14)(1,`span`,4),G(2),F()()),e&2){let e=U().$implicit;E(2),K(e.component)}}function R2(e,t){if(e&1&&(P(0,`span`,19),G(1),F()),e&2){let e=U().$implicit,t=U(5);E(),K(t.ms(e.totalMs))}}function z2(e,t){if(e&1&&(P(0,`span`,20),G(1),F()),e&2){let e=U().$implicit;E(),K(e.lastCaller)}}function B2(e,t){if(e&1&&(P(0,`li`,18),k(1,I2,3,2,`button`,13)(2,L2,3,1,`span`,14),P(3,`span`,17),G(4),P(5,`span`,19),G(6),F(),k(7,R2,2,1,`span`,19),F(),k(8,z2,2,1,`span`,20),F()),e&2){let e,n=t.$implicit,r=U(5);E(),A((e=n.target)?1:2,e),E(3),J(` `,r.describe(n.lastArgs),` → `,r.describe(n.lastResult),` `),E(2),q(``,n.callCount,`×`),E(),A(n.totalMs===void 0?-1:7),E(),A(n.lastCaller?8:-1)}}function V2(e,t){if(e&1&&(P(0,`p`,11),G(1),F()),e&2){let e=U(2);E(),J(` Showing `,e.instances.length,` of `,e.instanceTotal,` instances. `)}}function H2(e,t){if(e&1&&(P(0,`dt`),G(1,`Per instance`),F(),P(2,`dd`)(3,`ul`,8),j(4,B2,9,6,`li`,18,ug),F(),k(6,V2,2,2,`p`,11),F()),e&2){let e=U();E(4),M(e.instances),E(2),A(e.instanceTotal?6:-1)}}function U2(e,t){if(e&1&&(P(0,`dt`),G(1,`Last caller`),F(),P(2,`dd`,17),G(3),F()),e&2){let e=U();E(3),K(e.lastCaller)}}function W2(e,t){if(e&1&&(P(0,`dt`),G(1,`Calls`),F(),P(2,`dd`),G(3),F(),k(4,N2,4,3),k(5,F2,5,2),P(6,`dt`),G(7,`Last input`),F(),P(8,`dd`,17),G(9),F(),P(10,`dt`),G(11,`Last output`),F(),P(12,`dd`,17),G(13),F(),k(14,H2,7,1),k(15,U2,4,1)),e&2){let e=t,n=U(3);E(3),K(e.callCount),E(),A(e.totalMs===void 0?-1:4),E(),A(e.errorCount?5:-1),E(4),K(n.describe(e.lastArgs)),E(4),K(n.describe(e.lastResult)),E(),A(e.instances?.length?14:-1),E(),A(e.lastCaller?15:-1)}}function G2(e,t){e&1&&(P(0,`dt`),G(1,`Calls`),F(),P(2,`dd`,21),G(3,`None recorded yet.`),F())}function K2(e,t){e&1&&(P(0,`p`,11),G(1,` The stale check is off for this pipe: it couldn't read the compiled template, which happens in minified builds. `),F())}function q2(e,t){e&1&&(P(0,`p`,11),G(1,`Turn on “Record calls” to see call counts and values.`),F())}function J2(e,t){if(e&1&&(k(0,O2,5,1,`p`,9),k(1,k2,4,0,`p`,9),P(2,`dl`)(3,`dt`),G(4,`Instances`),F(),P(5,`dd`),G(6),F(),P(7,`dt`),G(8,`Used by`),F(),P(9,`dd`)(10,`ul`,10),j(11,M2,3,1,`li`,null,y2),F()(),k(13,W2,16,7)(14,G2,4,0),F(),k(15,K2,2,0,`p`,11),k(16,q2,2,0,`p`,11)),e&2){let e,n,r=t,i=U(2);A((e=r.churn)?0:-1,e),E(),A(r.stale?1:-1),E(5),K(r.instanceCount),E(5),M(r.components),E(2),A((n=r.call)?13:i.instrumenting()?14:-1,n),E(2),A(r.staleCheck===`unavailable`?15:-1),E(),A(!r.call&&!i.instrumenting()?16:-1)}}function Y2(e,t){e&1&&(P(0,`p`,5),G(1,` Not in use on the connected page. Open a view that uses it, or connect the app. `),F())}function X2(e,t){if(e&1&&(P(0,`header`,0)(1,`h2`,1),G(2),F(),P(3,`span`,2),G(4),F(),k(5,b2,2,0,`span`,2),k(6,x2,2,0,`span`,2),F(),P(7,`div`,3)(8,`h3`),G(9,`Declaration`),F(),P(10,`dl`)(11,`dt`),G(12,`Class`),F(),P(13,`dd`,4),G(14),F(),P(15,`dt`),G(16,`Source`),F(),P(17,`dd`),G(18),F(),k(19,S2,4,2),k(20,C2,4,1),P(21,`dt`),G(22,`Pure`),F(),P(23,`dd`),G(24),F()()(),k(25,T2,8,1,`div`,3),P(26,`div`,3)(27,`h3`),G(28,`Live on the page`),F(),k(29,J2,17,6)(30,Y2,2,0,`p`,5),F()),e&2){let e,n=t,r=U();E(2),K(n.name),E(),W(`impure`,!n.isPure),E(),K(n.isPure?`pure`:`impure`),E(),A(n.builtin?5:-1),E(),A(n.runtime?6:-1),E(8),K(n.className),E(4),K(r.sourceLabel(n)),E(),A(!n.builtin&&!n.runtime?19:-1),E(),A(n.runtime?-1:20),E(4),q(` `,n.isPure?`Yes, reruns only when an input changes`:`No, reruns on every check`,` `),E(),A(n.usages?.length?25:-1),E(4),A((e=r.liveFor(n.name))?29:30,e)}}function Z2(e,t){e&1&&(P(0,`h2`,22),G(1,`Pipe details`),F(),P(2,`div`,23)(3,`p`,24),G(4,`Pick a pipe`),F(),P(5,`p`,25),G(6,` See where it is declared, which components use it and what it last returned. `),F()())}var Q2=class e{state=b(l2);ms=s2;describe=c2;sourceLabel=o2;selected=this.state.selected;instrumenting=this.state.instrumenting;liveFor(e){return this.state.liveFor(e)}highlight(...e){this.state.highlight(...e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appPipeDetail`,``]],decls:2,vars:1,consts:[[1,`detail-head`],[`id`,`pipe-detail-title`,`tabindex`,`-1`,1,`mono`],[1,`chip`],[1,`block`],[1,`mono`],[1,`empty-line`],[3,`file`,`line`],[1,`pill`],[1,`sites`],[`role`,`note`,1,`warning`],[1,`chips`],[1,`hint`],[1,`chip`,`warn`],[`type`,`button`,1,`component`],[1,`component`],[`type`,`button`,1,`component`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`count`],[1,`mono`,`value`],[1,`instance`],[1,`calls`],[1,`mono`,`value`,`caller`],[1,`muted`],[`id`,`pipe-detail-title`,1,`visually-hidden`],[1,`state`,`compact`],[1,`state-title`],[1,`state-hint`]],template:function(e,t){if(e&1&&k(0,X2,31,13)(1,Z2,7,0),e&2){let e;A((e=t.selected())?0:1,e)}},dependencies:[aM],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 7px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.chip.impure[_ngcontent-%COMP%], 
+.chip.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip.live[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip.hot[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.detail-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+  border-radius: 4px;
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]:focus {
+  outline: none;
+}
+
+.detail-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.block[_ngcontent-%COMP%] {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.block[_ngcontent-%COMP%]:last-child {
+  border-bottom: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 10px;
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 6px 14px;
+  margin: 0;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text);
+}
+
+.value[_ngcontent-%COMP%] {
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.sites[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.calls[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%text-3);
+}
+
+.instance[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.instance[_ngcontent-%COMP%]   .component[_ngcontent-%COMP%] {
+  padding-right: 10px;
+}
+
+.caller[_ngcontent-%COMP%] {
+  flex-basis: 100%;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.component[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 4px 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%bg);
+  font-size: 12px;
+  transition: border-color 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+
+button.component[_ngcontent-%COMP%] {
+  height: 24px;
+  padding: 0 4px 0 10px;
+  border-radius: 99px;
+  background: var(--%NS%bg);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.count[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  line-height: 16px;
+  font-variant-numeric: tabular-nums;
+}
+
+.warning[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%warn) 8%, transparent);
+  color: var(--%NS%text);
+  line-height: 1.5;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.empty-line[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.empty-line.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 28px 16px;
+  border: 0;
+  background: none;
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}`]})};function $2(e,t){e&1&&(P(0,`span`,1),G(1),F()),e&2&&(E(),K(t.length))}function e4(e,t){e&1&&(P(0,`p`,2),G(1,`Couldn't run the lint check. Try Refresh.`),F())}function t4(e,t){e&1&&(P(0,`p`,3),G(1,`Checking…`),F())}function n4(e,t){e&1&&(P(0,`p`,4),G(1,`No problems found.`),F())}function r4(e,t){if(e&1){let e=z();P(0,`button`,16),V(`click`,function(){x(e),U();let t=Y(6);return S(U(2).showPipe(t))}),P(1,`span`,17),G(2,`Show pipe `),F(),G(3),F()}if(e&2){let e=U().$implicit;E(3),q(``,e.pipe,` `)}}function i4(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,e.pipe,` `)}}function a4(e,t){if(e&1&&(P(0,`li`,6)(1,`div`,7)(2,`span`,8),G(3),F(),P(4,`code`,9),G(5),F(),G_(6),P(7,`span`,10),k(8,r4,4,1,`button`,11)(9,i4,1,1),G(10,` · `),I(11,`app-source-link`,12),F()(),P(12,`p`,13),G(13),F(),P(14,`p`,14)(15,`span`,15),G(16,`Fix`),F(),G(17),F()()),e&2){let e=t.$implicit;E(2),O(`data-tone`,e.severity),E(),K(e.severity),E(2),K(e.rule),E();let n=K_(U(2).pipeFor(e));E(2),A(n?8:9),E(3),N(`file`,e.file)(`line`,e.line),E(2),K(e.message),E(4),q(` `,e.fix)}}function o4(e,t){if(e&1&&(P(0,`ul`,5),j(1,a4,18,9,`li`,6,ug),F()),e&2){let e=U();E(),M(e.lint())}}var s4=class e{state=b(l2);lint=this.state.lint;lintFailed=this.state.lintFailed;pipeFor(...e){return this.state.pipeFor(...e)}showPipe(...e){this.state.showPipe(...e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appPipeLint`,``]],decls:7,vars:2,consts:[[`id`,`lint-title`],[1,`pill`],[`role`,`alert`,1,`empty-line`],[`role`,`status`,1,`empty-line`],[1,`empty-line`,`ok`],[1,`findings`],[1,`finding`],[1,`finding-head`],[1,`severity`],[1,`mono`,`rule`],[1,`where`,`mono`],[`type`,`button`,1,`pipe-link`],[3,`file`,`line`],[1,`finding-message`],[1,`finding-fix`],[1,`fix-label`],[`type`,`button`,1,`pipe-link`,3,`click`],[1,`sr-only`]],template:function(e,t){if(e&1&&(P(0,`h2`,0),G(1,` Lint `),k(2,$2,2,1,`span`,1),F(),k(3,e4,2,0,`p`,2)(4,t4,2,0,`p`,3)(5,n4,2,0,`p`,4)(6,o4,3,0,`ul`,5)),e&2){let e;E(2),A((e=t.lint())?2:-1,e),E(),A(t.lintFailed()?3:t.lint()===null?4:t.lint().length?6:5)}},dependencies:[aM],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 7px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.chip.impure[_ngcontent-%COMP%], 
+.chip.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip.live[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip.hot[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}
+
+.empty-line[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.empty-line.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.section[_nghost-%COMP%]   h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 8px;
+}
+
+.section[_nghost-%COMP%]    > .hint[_ngcontent-%COMP%] {
+  margin: -2px 0 10px;
+}
+
+.async-list[_ngcontent-%COMP%], 
+.findings[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.finding[_ngcontent-%COMP%] {
+  padding: 10px 12px;
+  border-radius: var(--%NS%radius-sm);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.finding-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+}
+
+.severity[_ngcontent-%COMP%] {
+  padding: 0 7px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  line-height: 16px;
+  text-transform: uppercase;
+}
+
+.severity[data-tone=warning][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.severity[data-tone=error][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.rule[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-size: 12px;
+}
+
+.where[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+button.pipe-link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%accent);
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  white-space: normal;
+}
+
+button.pipe-link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%accent-hover);
+}
+
+button.pipe-link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.finding-message[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  color: var(--%NS%text);
+  line-height: 1.5;
+}
+
+.finding-fix[_ngcontent-%COMP%] {
+  margin: 4px 0 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.fix-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-right: 4px;
+}`]})},c4=(e,t)=>t.file+t.name;function l4(e,t){e&1&&(P(0,`span`,7),G(1,`churning`),F())}function u4(e,t){e&1&&(P(0,`span`,7),G(1,`stale?`),F())}function d4(e,t){if(e&1&&(P(0,`span`,13),G(1),F()),e&2){let e=U(),t=U(3);E(),K(t.ms(e.totalMs))}}function f4(e,t){if(e&1&&(P(0,`span`,13),G(1),F(),k(2,d4,2,1,`span`,13)),e&2){let e=t,n=U(3);E(),K(n.plural(e.callCount,`call`)),E(),A(e.totalMs===void 0?-1:2)}}function p4(e,t){if(e&1&&(P(0,`span`,8),G(1),F()),e&2){U();let e=Y(0);E(),q(``,e.instanceCount,` live`)}}function m4(e,t){e&1&&(P(0,`span`,9),G(1,`built-in`),F())}function h4(e,t){e&1&&(P(0,`span`,9),G(1,`runtime only`),F())}function g4(e,t){e&1&&(P(0,`span`,9),G(1,`NgModule`),F())}function _4(e,t){e&1&&(P(0,`span`,11),G(1,`No source location`),F())}function v4(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;J(` `,e.file,`:`,e.line,` `)}}function y4(e,t){if(e&1&&(P(0,`span`,12),G(1),F()),e&2){let e=U().$implicit;E(),q(`+`,(e.usageCount??1)-1,` more`)}}function b4(e,t){if(e&1&&(P(0,`span`,12),G(1),F()),e&2){let e=U().$implicit;E(),J(``,e.usageCount,` `,e.usageCount===1?`use`:`uses`)}}function x4(e,t){if(e&1){let e=z();G_(0),P(1,`li`)(2,`button`,2),V(`click`,function(){let t=x(e).$implicit;return S(U(2).select(t))})(`mouseenter`,function(){x(e);let t=Y(0);return S(U(2).highlightPipe(t))})(`mouseleave`,function(){return x(e),S(U(2).highlight(null))})(`focus`,function(){x(e);let t=Y(0);return S(U(2).highlightPipe(t))})(`blur`,function(){return x(e),S(U(2).highlight(null))}),P(3,`span`,3)(4,`span`,4),G(5),F(),P(6,`span`,5),G(7),F()(),P(8,`span`,6),k(9,l4,2,0,`span`,7),k(10,u4,2,0,`span`,7),k(11,f4,3,2),k(12,p4,2,1,`span`,8),k(13,m4,2,0,`span`,9),k(14,h4,2,0,`span`,9),k(15,g4,2,0,`span`,9),P(16,`span`,9),G(17),F()(),P(18,`span`,10),k(19,_4,2,0,`span`,11)(20,v4,1,2),k(21,y4,2,1,`span`,12)(22,b4,2,2,`span`,12),F()()()}if(e&2){let e,n=t.$implicit,r=U(2),i=K_(r.liveFor(n.name));E(2),W(`selected`,r.isSelected(n)),O(`aria-current`,r.isSelected(n)||null),E(3),K(n.name),E(2),K(n.className),E(2),A(i?.churn?9:-1),E(),A(i?.stale?10:-1),E(),A((e=i?.call)?11:-1,e),E(),A(i?12:-1),E(),A(n.builtin?13:-1),E(),A(n.runtime?14:-1),E(),A(n.isStandalone?-1:15),E(),W(`impure`,!n.isPure),E(),K(n.isPure?`pure`:`impure`),E(2),A(n.runtime?19:20),E(2),A(n.builtin&&(n.usageCount??0)>1?21:!n.builtin&&n.usageCount?22:-1)}}function S4(e,t){if(e&1&&(P(0,`ul`,0),j(1,x4,23,18,`li`,null,c4),F()),e&2){let e=U();E(),M(e.filtered())}}function C4(e,t){e&1&&G(0),e&2&&q(` Nothing matches “`,U(2).filter().trim(),`” in this view. `)}function w4(e,t){e&1&&G(0,` None of the pipes fit this filter. `)}function T4(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`p`,14),G(2,`No pipes match`),F(),P(3,`p`,15),k(4,C4,1,1)(5,w4,1,0),F(),P(6,`button`,16),V(`click`,function(){return x(e),S(U().clearFilters())}),G(7,`Clear filters`),F()()}if(e&2){let e=U();E(4),A(e.filter().trim()?4:5)}}var E4=class e{state=b(l2);clear=xv();plural=cD;ms=s2;filtered=this.state.filtered;filter=this.state.filter;liveFor(e){return this.state.liveFor(e)}isSelected(...e){return this.state.isSelected(...e)}select(...e){this.state.select(...e)}highlightPipe(...e){this.state.highlightPipe(...e)}highlight(...e){this.state.highlight(...e)}clearFilters(){this.clear.emit()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appPipeList`,``]],outputs:{clear:`clear`},decls:2,vars:1,consts:[[`aria-label`,`Pipes`,`appRovingList`,`[data-pipe-row]`,1,`pipe-list`],[`role`,`status`,1,`state`,`compact`],[`type`,`button`,`data-pipe-row`,``,`aria-controls`,`pipe-detail`,1,`row`,3,`click`,`mouseenter`,`mouseleave`,`focus`,`blur`],[1,`row-main`],[1,`name`,`mono`],[1,`sub`,`mono`],[1,`row-meta`],[1,`chip`,`warn`],[1,`chip`,`live`],[1,`chip`],[1,`row-file`,`mono`],[1,`no-source`],[1,`more`],[1,`chip`,`hot`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`]],template:function(e,t){e&1&&k(0,S4,3,0,`ul`,0)(1,T4,8,1,`div`,1),e&2&&A(+!t.filtered().length)},dependencies:[XV],styles:[`.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.pipe-list[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2px 12px;
+  width: 100%;
+  height: auto;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: var(--%NS%radius-sm);
+  background: none;
+  text-align: left;
+  font-weight: 400;
+  white-space: normal;
+}
+
+.row[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: transparent;
+  background: var(--%NS%surface-2);
+}
+
+.row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.row.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.row-main[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.name[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.sub[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.row-file[_ngcontent-%COMP%] {
+  grid-column: 1/-1;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+
+.no-source[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-sans);
+  font-style: italic;
+}
+
+.more[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%text-2);
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  padding: 0 7px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.chip.impure[_ngcontent-%COMP%], 
+.chip.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip.live[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip.hot[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.pill[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 28px 16px;
+  border: 0;
+  background: none;
+}
+
+.list-wrap[_nghost-%COMP%]   .state.compact[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}`]})},D4=[`filterInput`];function O4(e,t){e&1&&(P(0,`p`,11),C(),P(1,`svg`,17),I(2,`circle`,18)(3,`path`,19),F(),ys(),P(4,`span`),G(5),F()()),e&2&&(E(5),K(t))}function k4(e,t){if(e&1&&(P(0,`p`,11),C(),P(1,`svg`,17),I(2,`circle`,18)(3,`path`,19),F(),ys(),P(4,`span`)(5,`strong`),G(6),F(),G(7,` Pipe prototypes are patched in the inspected page to count calls and keep the last input and output. Stop recording when you are done. `),F()()),e&2){let e=U();E(6),q(`Recording on `,e.plural(e.instrumentedPages().length,`page`),`.`)}}function A4(e,t){e&1&&(P(0,`div`,12),I(1,`span`,20),P(2,`p`,21),G(3,`Scanning pipes…`),F()())}function j4(e,t){if(e&1){let e=z();P(0,`div`,13)(1,`p`,21),G(2,`Couldn't load pipes`),F(),P(3,`p`,22),G(4,`The devtools server did not answer. Check that it is running.`),F(),P(5,`button`,23),V(`click`,function(){return x(e),S(U().refresh())}),G(6,`Try again`),F()()}}function M4(e,t){e&1&&(P(0,`div`,14)(1,`p`,21),G(2,`No pipes found`),F(),P(3,`p`,22),G(4,` No @Pipe classes were found in the source, and no template uses a built-in pipe yet. `),F()())}function N4(e,t){e&1&&G(0,` Couldn't scan the source again. The list keeps the last scan. `)}function P4(e,t){e&1&&G(0,` Couldn't scan the source. Only pipes seen on the page are listed. `)}function F4(e,t){if(e&1){let e=z();P(0,`div`,24),C(),P(1,`svg`,17),I(2,`circle`,18)(3,`path`,28),F(),ys(),P(4,`span`),k(5,N4,1,0)(6,P4,1,0),F(),P(7,`button`,8),V(`click`,function(){return x(e),S(U(2).refresh())}),G(8,`Try again`),F()()}if(e&2){let e=U(2);E(5),A(e.pipes().length?5:6),E(2),N(`disabled`,e.loading())}}function I4(e,t){if(e&1){let e=z();k(0,F4,9,2,`div`,24),P(1,`div`,25)(2,`div`,26),V(`clear`,function(){return x(e),S(U().clearFilters())}),F(),I(3,`section`,27),F()}e&2&&A(U().loadFailed()?0:-1)}function L4(e,t){e&1&&I(0,`section`,15)}var R4=class e{state=b(l2);plural=cD;filterInput=Ov(`filterInput`);rpc=$(null);focus=$(null);focusHandled=xv();pageId=$(null);kindOptions=i2;sortOptions=a2;pipes=this.state.pipes;filter=this.state.filter;kind=this.state.kind;sort=this.state.sort;loading=this.state.loading;loadFailed=this.state.loadFailed;selected=this.state.selected;live=this.state.live;async=this.state.async;asyncTotal=this.state.asyncTotal;lint=this.state.lint;lintFailed=this.state.lintFailed;instrumentedPages=this.state.instrumentedPages;instrumenting=this.state.instrumenting;pendingRecord=this.state.pendingRecord;recordMessage=this.state.recordMessage;recordLabel=this.state.recordLabel;allPipes=this.state.allPipes;filtered=this.state.filtered;constructor(){this.state.connect(this.rpc,this.pageId),T(()=>{let e=this.rpc();e&&(this.refresh(),this.loadLive(e))}),T(()=>{let e=this.focus();if(!e)return;let t=this.state.pipesByName().get(e)?.[0];t&&Z(()=>{this.showPipe(t),this.focusHandled.emit()})})}refresh(){return this.state.refresh()}loadLint(e){return this.state.loadLint(e)}loadLive(e){return this.state.loadLive(e)}toggleInstrument(){return this.state.toggleInstrument()}sourceLabel(e){return o2(e)}liveFor(e){return this.state.liveFor(e)}ms(e){return s2(e)}describe(e){return c2(e)}isSelected(e){return this.state.isSelected(e)}select(e){this.state.select(e)}pipeFor(e){return this.state.pipeFor(e)}showPipe(e){this.state.showPipe(e)}clearFilters(){this.filter.set(``),this.kind.set(`all`),this.filterInput()?.focus()}highlightPipe(e){this.state.highlightPipe(e)}highlight(e,t=!1){this.state.highlight(e,t)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-pipes-inspector`]],viewQuery:function(e,t){e&1&&Ug(t.filterInput,D4,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`],focus:[1,`focus`],pageId:[1,`pageId`]},outputs:{focusHandled:`focusHandled`},features:[rv([l2])],decls:23,vars:18,consts:[[`filterInput`,``],[1,`intro`],[1,`toolbar`],[`placeholder`,`Filter by pipe, class or file`,`saveKey`,`pipes`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Show pipes`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Sort pipes`,3,`valueChange`,`options`,`value`],[`aria-live`,`polite`,1,`total`],[1,`actions`],[`type`,`button`,3,`click`,`disabled`],[`type`,`button`,1,`record`,3,`click`],[`aria-hidden`,`true`,1,`rec-dot`],[`role`,`status`,1,`notice`],[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[1,`state`],[`appPipeAsync`,``,`aria-labelledby`,`async-title`,1,`section`],[`appPipeLint`,``,`aria-labelledby`,`lint-title`,1,`section`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`M12 11v5M12 8h.01`],[`aria-hidden`,`true`,1,`spinner`],[1,`state-title`],[1,`state-hint`],[`type`,`button`,3,`click`],[`role`,`alert`,1,`notice`,`error`],[1,`layout`],[`appPipeList`,``,1,`list-wrap`,3,`clear`],[`appPipeDetail`,``,`id`,`pipe-detail`,`aria-labelledby`,`pipe-detail-title`,1,`detail`],[`d`,`M12 8v5M12 16h.01`]],template:function(e,t){if(e&1){let e=z();P(0,`p`,1),G(1,` Pipes declared in your source, the built-in pipes your templates use and library pipes seen on the page. Live data shows which components use each pipe on the page; turn on recording to capture calls and the last input and output.
+`),F(),P(2,`div`,2)(3,`app-search-field`,3,0),U_(`valueChange`,function(n){return x(e),H_(t.filter,n)||(t.filter=n),S(n)}),F(),P(5,`app-select`,4),U_(`valueChange`,function(n){return x(e),H_(t.kind,n)||(t.kind=n),S(n)}),F(),P(6,`app-select`,5),U_(`valueChange`,function(n){return x(e),H_(t.sort,n)||(t.sort=n),S(n)}),F(),P(7,`span`,6),G(8),F(),P(9,`div`,7)(10,`button`,8),V(`click`,function(){return t.refresh()}),G(11,`Refresh`),F(),P(12,`button`,9),V(`click`,function(){return t.toggleInstrument()}),I(13,`span`,10),G(14),F()()(),k(15,O4,6,1,`p`,11),k(16,k4,8,1,`p`,11),k(17,A4,4,0,`div`,12)(18,j4,7,0,`div`,13)(19,M4,5,0,`div`,14)(20,I4,4,1),k(21,L4,1,0,`section`,15),I(22,`section`,16)}if(e&2){let e;E(3),V_(`value`,t.filter),E(2),N(`options`,t.kindOptions),V_(`value`,t.kind),E(),N(`options`,t.sortOptions),V_(`value`,t.sort),E(2),J(``,t.filtered().length,` of `,t.allPipes().length),E(2),N(`disabled`,t.loading()),E(2),W(`on`,t.instrumenting()),O(`aria-pressed`,t.instrumenting())(`aria-busy`,t.pendingRecord()!==null)(`aria-disabled`,t.pendingRecord()!==null),E(2),q(` `,t.recordLabel(),` `),E(),A((e=t.recordMessage())?15:-1,e),E(),A(t.instrumenting()?16:-1),E(),A(t.loading()&&t.allPipes().length===0?17:t.loadFailed()&&t.allPipes().length===0?18:t.allPipes().length===0?19:20),E(4),A(t.async().length>0?21:-1)}},dependencies:[_2,Q2,s4,E4,iD,JE],styles:[`[_nghost-%COMP%] {
+  display: block;
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.intro[_ngcontent-%COMP%] {
+  max-width: 720px;
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+  transition: border-color 150ms var(--%NS%ease), box-shadow 150ms var(--%NS%ease);
+}
+
+input[type=search][_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[type=search][_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.toolbar[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  width: 150px;
+}
+
+.total[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.record[aria-busy=true][_ngcontent-%COMP%] {
+  cursor: progress;
+}
+
+.rec-dot[_ngcontent-%COMP%] {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--%NS%text-3);
+}
+
+.record.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.record.on[_ngcontent-%COMP%]   .rec-dot[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.notice[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--%NS%accent-line);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+  animation: enter 0.2s var(--%NS%ease) both;
+}
+
+.notice[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.notice[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  fill: none;
+  stroke: var(--%NS%accent);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.notice.error[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.notice.error[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  margin-top: 0;
+  stroke: currentColor;
+}
+
+.notice.error[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+}
+
+.layout[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+@media (min-width: 880px) {
+  .layout[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr) minmax(340px, 44%);
+  }
+  .detail[_ngcontent-%COMP%] {
+    position: sticky;
+    top: 64px;
+    max-height: calc(100vh - 150px);
+    overflow: auto;
+  }
+}
+.list-wrap[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+.detail[_ngcontent-%COMP%] {
+  min-width: 0;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.section[_ngcontent-%COMP%] {
+  margin-top: 20px;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 40px 16px;
+  text-align: center;
+  background: var(--%NS%surface);
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.state.compact[_ngcontent-%COMP%] {
+  padding: 28px 16px;
+  border: 0;
+  background: none;
+}
+
+.state-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.state-hint[_ngcontent-%COMP%] {
+  max-width: 440px;
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}`]})},z4=(e,t)=>t.file;function B4(e,t){e&1&&(L(0,`p`,4),G(1,`Reading the build output…`),R())}function V4(e,t){e&1&&(L(0,`p`,5),G(1,`Could not read the build output.`),R())}function H4(e,t){e&1&&(L(0,`p`,6),G(1,` No client build yet. Run `),L(2,`code`),G(3,`analog build`),R(),G(4,` to see each page's chunk sizes here. `),R())}function U4(e,t){if(e&1&&(L(0,`dt`),G(1,`Entry`),R(),L(2,`dd`)(3,`span`,8),G(4),R(),L(5,`span`,15),G(6),R()()),e&2){U();let e=Y(0),t=U();E(4),K(e.entry.chunk),E(2),J(` loads `,t.size(e.entry.size),` (`,t.size(e.entry.gzip),` gzip) with its imports`)}}function W4(e,t){if(e&1&&(L(0,`div`,17),G(1),R()),e&2){let e=U(2).$implicit;E(),J(` + `,e.shared.length,` shared chunk`,e.shared.length===1?``:`s`,` `)}}function G4(e,t){if(e&1&&(L(0,`span`,16),G(1),R(),k(2,W4,2,2,`div`,17)),e&2){let e=U().$implicit;E(),K(e.chunk),E(),A(e.shared.length?2:-1)}}function K4(e,t){e&1&&(L(0,`span`,17),G(1,`not found`),R())}function q4(e,t){if(e&1&&(G(0),L(1,`div`,17),G(2),R()),e&2){let e=U().$implicit,t=U(2);q(` `,t.size(e.size),` `),E(2),q(``,t.size(e.gzip),` gzip`)}}function J4(e,t){if(e&1&&(L(0,`span`,19),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function Y4(e,t){if(e&1&&(L(0,`tr`)(1,`td`,16),G(2),R(),L(3,`td`),k(4,G4,3,2)(5,K4,2,0,`span`,17),R(),L(6,`td`,18),k(7,q4,3,2),R(),L(8,`td`),j(9,J4,2,1,`span`,19,dg),R()()),e&2){let e=t.$implicit;E(2),K(e.path),E(2),A(e.chunk?4:5),E(3),A(e.chunk?7:-1),E(2),M(e.lazy)}}function X4(e,t){e&1&&(L(0,`tr`)(1,`td`,20),G(2,`No pages to match with the build.`),R()())}function Z4(e,t){if(e&1&&(L(0,`li`)(1,`span`,16),G(2),R(),L(3,`span`,21),G(4),R()()),e&2){let e=t.$implicit,n=U(2);E(2),K(e.file),E(2),J(``,n.size(e.size),` · `,n.size(e.gzip),` gzip`)}}function Q4(e,t){if(e&1&&(L(0,`p`,14),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function $4(e,t){if(e&1&&(G_(0),L(1,`dl`,7)(2,`dt`),G(3,`Output`),R(),L(4,`dd`,8),G(5),R(),L(6,`dt`),G(7,`JavaScript`),R(),L(8,`dd`,9),G(9),R(),L(10,`dt`),G(11,`CSS`),R(),L(12,`dd`,9),G(13),R(),k(14,U4,7,3),R(),L(15,`div`,10)(16,`table`)(17,`thead`)(18,`tr`)(19,`th`,11),G(20,`Route`),R(),L(21,`th`,11),G(22,`Page chunk`),R(),L(23,`th`,12),G(24,`Beyond the entry`),R(),L(25,`th`,11),G(26,`Lazy chunks`),R()()(),L(27,`tbody`),j(28,Y4,11,3,`tr`,null,z4,!1,X4,3,0,`tr`),R()()(),L(31,`details`)(32,`summary`),G(33),R(),L(34,`ul`,13),j(35,Z4,5,3,`li`,null,z4),R()(),j(37,Q4,2,1,`p`,14,dg)),e&2){let e=U(),t=K_(e.analysis());E(5),J(``,t.dir,` · `,t.totals.chunks,` files`),E(4),J(``,e.size(t.totals.js),` (`,e.size(t.totals.jsGzip),` gzip)`),E(4),J(``,e.size(t.totals.css),` (`,e.size(t.totals.cssGzip),` gzip)`),E(),A(t.entry?14:-1),E(14),M(t.routes),E(5),q(`Largest files (`,t.chunks.length,`)`),E(2),M(t.chunks),E(2),M(t.notes)}}function e3(e){return e<1024?`${e} B`:e<1048576?`${(e/1024).toFixed(1)} kB`:`${(e/1024/1024).toFixed(2)} MB`}var t3=class e{rpc=$(null);analysis=w(null);loading=w(!0);size=e3;hasBuild=X(()=>!!this.analysis()?.found);constructor(){T(()=>{let e=this.rpc();Z(()=>void this.fetch(e))})}reload(){this.fetch(this.rpc())}async fetch(e){this.loading.set(!0);let t=await sT(e,`analog-build`);this.analysis.set(t),this.loading.set(!1)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-build`]],inputs:{rpc:[1,`rpc`]},decls:10,vars:3,consts:[[`aria-labelledby`,`build-heading`,1,`card`],[1,`row`,`head`],[`id`,`build-heading`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[1,`muted`],[1,`facts`],[1,`mono`],[1,`tnum`],[`role`,`region`,`aria-label`,`Page chunks`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`plain`],[1,`note`],[1,`muted`,`tnum`],[1,`mono`,`path`],[1,`muted`,`small`],[1,`num`],[1,`chip`,`mono`],[`colspan`,`4`,1,`muted`],[1,`muted`,`small`,`tnum`]],template:function(e,t){e&1&&(L(0,`section`,0)(1,`div`,1)(2,`h2`,2),G(3,`Build analysis`),R(),L(4,`button`,3),H(`click`,function(){return t.reload()}),G(5),R()(),k(6,B4,2,0,`p`,4)(7,V4,2,0,`p`,5)(8,H4,5,0,`p`,6)(9,$4,39,10),R()),e&2&&(E(4),B(`disabled`,t.loading()),E(),q(` `,t.loading()?`Reading…`:`Read again`,` `),E(),A(t.loading()&&!t.analysis()?6:t.analysis()?t.analysis().found?9:8:7))},styles:[`h2[_ngcontent-%COMP%], 
+h3[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.danger[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 480px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.path[_ngcontent-%COMP%], 
+.file[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%], 
+[data-status=good].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%], 
+[data-status=warn].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%], 
+[data-status=bad].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.note[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.note[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 2px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+summary[_ngcontent-%COMP%] {
+  cursor: pointer;
+  color: var(--%NS%text-2);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+@media (max-width: 560px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+[_nghost-%COMP%] {
+  display: block;
+}
+
+.head[_ngcontent-%COMP%] {
+  justify-content: space-between;
+}
+
+.plain[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 4px;
+  font-family: var(--%NS%mono);
+  font-size: 12px;
+}`]})},n3=(e,t)=>t[0];function r3(e,t){if(e&1&&(P(0,`li`),I(1,`app-analog-value-node`,6),F()),e&2){let e=t.$implicit;E(),N(`name`,e[0])(`value`,e[1])}}function i3(e,t){if(e&1&&(P(0,`li`,4),G(1),F()),e&2){let e=U(3);E(),q(``,e.hidden(),` more not shown`)}}function a3(e,t){if(e&1&&(P(0,`ul`,5),j(1,r3,2,2,`li`,null,n3),k(3,i3,2,1,`li`,4),F()),e&2){let e=U(2);E(),M(e.entries()),E(2),A(e.hidden()?3:-1)}}function o3(e,t){if(e&1){let e=z();P(0,`details`,2),V(`toggle`,function(t){return x(e),S(U().open.set(t.target.open))}),P(1,`summary`)(2,`span`,3),G(3),F(),P(4,`span`,4),G(5),F()(),k(6,a3,4,1,`ul`,5),F()}if(e&2){let e=U();N(`open`,e.open()),E(3),K(e.name()),E(2),K(e.summary()),E(),A(e.open()?6:-1)}}function s3(e,t){if(e&1&&(P(0,`span`,1)(1,`span`,3),G(2),F(),G(3,`: `),P(4,`span`,7),G(5),F()()),e&2){let e=U();E(2),K(e.name()),E(2),O(`data-type`,e.type()),E(),K(e.text())}}var c3=200,l3=class e{name=$(`value`);value=$(void 0);open=w(!1);isBranch=X(()=>{let e=this.value();return!!e&&typeof e==`object`});all=X(()=>{let e=this.value();return!e||typeof e!=`object`?[]:Array.isArray(e)?e.map((e,t)=>[String(t),e]):Object.entries(e)});entries=X(()=>this.all().slice(0,c3));hidden=X(()=>Math.max(0,this.all().length-c3));summary=X(()=>{let e=this.all().length;return Array.isArray(this.value())?`[${e}]`:`{${e} key${e===1?``:`s`}}`});type=X(()=>this.value()===null?`null`:typeof this.value());text=X(()=>{let e=this.value();return typeof e==`string`?JSON.stringify(e):String(e)});static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-value-node`]],inputs:{name:[1,`name`],value:[1,`value`]},decls:2,vars:1,consts:[[3,`open`],[1,`leaf`],[3,`toggle`,`open`],[1,`key`],[1,`muted`,`small`],[`role`,`list`],[3,`name`,`value`],[1,`value`]],template:function(e,t){e&1&&k(0,o3,7,4,`details`,0)(1,s3,6,3,`span`,1),e&2&&A(+!t.isBranch())},dependencies:[e],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.6;
+}
+
+ul[_ngcontent-%COMP%] {
+  margin: 0;
+  padding-left: 18px;
+  list-style: none;
+  border-left: 1px solid var(--%NS%border);
+}
+
+summary[_ngcontent-%COMP%] {
+  cursor: pointer;
+  color: var(--%NS%text);
+}
+
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.key[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin-left: 6px;
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.value[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+  color: var(--%NS%text);
+}
+
+.value[data-type=string][_ngcontent-%COMP%] {
+  color: var(--%NS%ok-text, var(--%NS%text));
+}`]})},u3=(e,t)=>t.key;function d3(e,t){e&1&&(P(0,`p`,3),G(1,`Open a page of the app to see the data its load() returned.`),F())}function f3(e,t){if(e&1&&(P(0,`p`,3),G(1),F()),e&2){let e=U();E(),q(``,e.page().url,` has no load() data.`)}}function p3(e,t){if(e&1&&(P(0,`span`,9),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function m3(e,t){if(e&1&&(P(0,`p`,14),G(1),F()),e&2){let e=U();E(),K(e.error)}}function h3(e,t){if(e&1&&(P(0,`div`,15),I(1,`app-analog-value-node`,16),F()),e&2){let e=U();E(),N(`value`,e.value)}}function g3(e,t){e&1&&(P(0,`p`,3),G(1,`The page has no load() data now.`),F())}function _3(e,t){if(e&1&&k(0,m3,2,1,`p`,14)(1,h3,2,1,`div`,15)(2,g3,2,0,`p`,3),e&2){let e=t;A(e.error?0:e.found?1:2)}}function v3(e,t){if(e&1&&(P(0,`pre`,10),G(1),F()),e&2){U();let e=Y(0);E(),K(e.preview)}}function y3(e,t){if(e&1){let e=z();G_(0),P(1,`dl`,6)(2,`dt`),G(3,`Page`),F(),P(4,`dd`,7),G(5),F(),P(6,`dt`),G(7,`Size`),F(),P(8,`dd`,8),G(9),F(),P(10,`dt`),G(11,`Keys`),F(),P(12,`dd`),j(13,p3,2,1,`span`,9,dg),F()(),k(15,_3,3,1)(16,v3,2,1,`pre`,10),P(17,`div`,11)(18,`button`,12),V(`click`,function(){return x(e),S(U().loadFull())}),G(19),F(),P(20,`span`,13),G(21,`Masked by the redaction rules, up to 200 KB.`),F()()}if(e&2){let e,t=U(),n=K_(t.page().load);E(5),K(t.page().url),E(4),K(t.size(n.bytes)),E(4),M(n.keys),E(2),A((e=t.full())?15:16,e),E(3),N(`disabled`,t.loading()),E(),q(` `,t.loading()?`Asking the page…`:t.full()?`Read again`:`Load the full value`,` `)}}function b3(e,t){e&1&&(P(0,`p`,3),G(1,` No payload from this page. It shows once a server rendered page reports its TransferState (the SSR & HTTP inspector must be on). `),F())}function x3(e,t){e&1&&(P(0,`p`,3),G(1,`The page has no TransferState script, so it was not server rendered.`),F())}function S3(e,t){e&1&&G(0),e&2&&q(` · `,U(2).refetchedCount(),` fetched again by the browser `)}function C3(e,t){if(e&1&&(P(0,`p`,18),G(1),F()),e&2){let e=U(2);E(),K(e.payload().error)}}function w3(e,t){if(e&1&&(P(0,`div`,24),G(1),F()),e&2){let e=U().$implicit;E(),K(e.file)}}function T3(e,t){e&1&&(P(0,`span`,26),G(1,`fetched again`),F())}function E3(e,t){e&1&&(P(0,`span`,27),G(1,`reused`),F())}function D3(e,t){if(e&1&&(P(0,`tr`)(1,`td`,22),G(2),F(),P(3,`td`)(4,`span`,23),G(5),F(),P(6,`span`,22),G(7),F(),k(8,w3,2,1,`div`,24),F(),P(9,`td`,25),G(10),F(),P(11,`td`),k(12,T3,2,0,`span`,26)(13,E3,2,0,`span`,27),F()()),e&2){let e=t.$implicit,n=U(2);E(2),K(e.key),E(3),K(n.kindLabel(e.kind)),E(2),K(e.label),E(),A(e.file?8:-1),E(2),K(n.size(e.size)),E(2),A(e.reuse===`refetched`?12:e.reuse===`reused`?13:-1)}}function O3(e,t){e&1&&(P(0,`tr`)(1,`td`,28),G(2,`The payload is empty.`),F()())}function k3(e,t){if(e&1&&(P(0,`p`,17),G(1),k(2,S3,1,1),F(),k(3,C3,2,1,`p`,18),P(4,`div`,19)(5,`table`)(6,`thead`)(7,`tr`)(8,`th`,20),G(9,`Key`),F(),P(10,`th`,20),G(11,`From`),F(),P(12,`th`,21),G(13,`Size`),F(),P(14,`th`,20),G(15,`In the browser`),F()()(),P(16,`tbody`),j(17,D3,14,6,`tr`,null,u3,!1,O3,3,0,`tr`),F()()()),e&2){let e=U();E(),R_(` `,e.rows().length,` entr`,e.rows().length===1?`y`:`ies`,`, `,e.size(e.payload().size),` `),E(),A(e.refetchedCount()?2:-1),E(),A(e.payload().error?3:-1),E(14),M(e.rows())}}function A3(e){if(!e)return;let t=e.replace(/^[a-z]+:\/\/[^/]+/i,``).split(/[?#]/)[0],n=t.indexOf(`/_analog/pages`);if(!(n<0))return(t.slice(n+14)||`/`).replace(/\/\([^/]*\)(?=\/|$)/g,``).replace(/\/-[^/]+-$/,``).replace(/\/index$/,``)||`/`}function j3(e,t,n,r){return e.map(e=>{if(e.fn){let n=t.find(t=>t.id===e.fn.id);return{key:e.key,kind:`fn`,label:`${e.fn.name??n?.name??e.fn.id}()`,file:e.fn.file??n?.file,size:e.size,reuse:r.some(t=>t.id===e.fn.id)?`refetched`:`reused`}}let i=A3(e.http?.url);return i?{key:e.key,kind:`load`,label:`load() of ${i}`,size:e.size,reuse:n.some(e=>e.route===i)?`refetched`:`reused`}:e.source===`hydration`?{key:e.key,kind:`hydration`,label:`Hydration data`,size:e.size}:e.http?{key:e.key,kind:`http`,label:e.http.url??`HTTP response`,size:e.size}:{key:e.key,kind:`state`,label:`App state`,size:e.size}})}var M3={load:`load()`,fn:`server function`,http:`HttpClient`,hydration:`hydration`,state:`state`},N3=class e{rpc=$(null);page=$(null);serverFns=$([]);duplicates=$([]);refetches=$([]);payloads=w({});full=w(null);loading=w(!1);size=e3;destroyRef=b(Os);unsubscribe=null;pageKey=X(()=>`${this.page()?.pageId??``} ${this.page()?.url??``}`);payload=X(()=>{let e=this.page()?.pageId;return e?this.payloads()[e]??null:null});rows=X(()=>j3(this.payload()?.entries??[],this.serverFns(),this.duplicates(),this.refetches()));refetchedCount=X(()=>this.rows().filter(e=>e.reuse===`refetched`).length);constructor(){T(()=>{let e=this.rpc();Z(()=>void this.subscribe(e))}),T(()=>{this.pageKey(),Z(()=>this.full.set(null))}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async subscribe(e){if(this.unsubscribe?.(),this.unsubscribe=null,e)try{let t=await e.scope(`pangular`).rpc.sharedState(`http-payloads`);if(this.destroyRef.destroyed)return;let n=e=>this.payloads.set(e?.pages??{});n(t.value()),this.unsubscribe=t.on(`updated`,n)}catch{this.payloads.set({})}}async loadFull(){let e=this.page();if(!e)return;let t=this.pageKey();this.loading.set(!0);try{let n=await sT(this.rpc(),`analog-load-data`,e.pageId);if(t!==this.pageKey())return;this.full.set(n??{found:!1,error:`No answer from the devtools server.`})}finally{this.loading.set(!1)}}kindLabel(e){return M3[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-data`]],inputs:{rpc:[1,`rpc`],page:[1,`page`],serverFns:[1,`serverFns`],duplicates:[1,`duplicates`],refetches:[1,`refetches`]},decls:13,vars:2,consts:[[1,`stack`],[`aria-labelledby`,`data-load-heading`,1,`card`],[`id`,`data-load-heading`],[1,`muted`],[`aria-labelledby`,`data-payload-heading`,1,`card`],[`id`,`data-payload-heading`],[1,`facts`],[1,`mono`],[1,`tnum`],[1,`chip`,`mono`],[1,`code`],[1,`row`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[1,`muted`,`small`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[`role`,`region`,`aria-label`,`Full load() value`,`tabindex`,`0`,1,`tree`],[`name`,`load()`,3,`value`],[1,`muted`,`small`,`tnum`],[`data-tone`,`bad`,1,`note`],[`role`,`region`,`aria-label`,`TransferState entries`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`mono`,`path`],[1,`pill`],[1,`muted`,`small`,`file`],[1,`num`],[`data-tone`,`warn`,1,`pill`],[`data-tone`,`good`,1,`pill`],[`colspan`,`4`,1,`muted`]],template:function(e,t){e&1&&(P(0,`div`,0)(1,`section`,1)(2,`h2`,2),G(3,`load() data of the open page`),F(),k(4,d3,2,0,`p`,3)(5,f3,2,1,`p`,3)(6,y3,22,6),F(),P(7,`section`,4)(8,`h2`,5),G(9,`TransferState payload`),F(),k(10,b3,2,0,`p`,3)(11,x3,2,0,`p`,3)(12,k3,20,6),F()()),e&2&&(E(4),A(t.page()?t.page().load?6:5:4),E(6),A(t.payload()?t.payload().found?12:11:10))},dependencies:[l3],styles:[`h2[_ngcontent-%COMP%], 
+h3[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.danger[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 480px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.path[_ngcontent-%COMP%], 
+.file[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%], 
+[data-status=good].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%], 
+[data-status=warn].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%], 
+[data-status=bad].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.note[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.note[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 2px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+summary[_ngcontent-%COMP%] {
+  cursor: pointer;
+  color: var(--%NS%text-2);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+@media (max-width: 560px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+[_nghost-%COMP%] {
+  display: block;
+}
+
+.stack[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+}
+
+.tree[_ngcontent-%COMP%] {
+  max-height: 420px;
+  overflow: auto;
+  padding: 10px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+}
+
+.tree[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}`]})},P3=(e,t)=>t.id,F3=(e,t)=>t.key,I3=(e,t)=>t.from+t.name,L3=(e,t)=>t.path,R3=(e,t)=>t.name,z3=(e,t)=>t.file;function B3(e,t){e&1&&(L(0,`p`,2),G(1,`Reading the runtime config…`),R())}function V3(e,t){if(e&1){let e=z();L(0,`div`,3)(1,`p`),G(2,`Could not read the runtime config.`),R(),L(3,`button`,4),H(`click`,function(){return x(e),S(U().reload())}),G(4,`Retry`),R()()}}function H3(e,t){e&1&&(L(0,`span`,11),G(1,`masked`),R())}function U3(e,t){e&1&&(L(0,`span`,11),G(1,`code`),R())}function W3(e,t){if(e&1&&(L(0,`tr`)(1,`td`,10),G(2),R(),L(3,`td`,10),G(4),k(5,H3,2,0,`span`,11),k(6,U3,2,0,`span`,11),R(),L(7,`td`,12),G(8),R()()),e&2){let e=t.$implicit;E(2),K(e.key),E(2),q(` `,e.value,` `),E(),A(e.masked?5:-1),E(),A(e.expression?6:-1),E(2),K(e.from)}}function G3(e,t){if(e&1&&(L(0,`div`,8)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,9),G(5,`Key`),R(),L(6,`th`,9),G(7,`Value`),R(),L(8,`th`,9),G(9,`From`),R()()(),L(10,`tbody`),j(11,W3,9,5,`tr`,null,F3),R()()()),e&2){let e=U().$implicit;O(`aria-label`,e.title+` values`),E(11),M(e.values)}}function K3(e,t){if(e&1&&(L(0,`p`,1),G(1),R()),e&2){let e=U().$implicit;E(),K(e.empty)}}function q3(e,t){if(e&1&&(L(0,`section`,5)(1,`h2`,7),G(2),R(),k(3,G3,13,1,`div`,8)(4,K3,2,1,`p`,1),R()),e&2){let e=t.$implicit;O(`aria-labelledby`,`runtime-`+e.id),E(),B(`id`,`runtime-`+e.id),E(),K(e.title),E(),A(e.values.length?3:4)}}function J3(e,t){if(e&1&&(L(0,`span`,15),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function Y3(e,t){e&1&&(L(0,`span`,12),G(1,`none under src/server/plugins`),R())}function X3(e,t){if(e&1&&(L(0,`span`,15),G(1),R()),e&2){let e=t.$implicit;E(),R_(``,e.name,`: `,e.driver??`computed`,``,e.from===`devStorage`?` (dev)`:``)}}function Z3(e,t){e&1&&(L(0,`span`,12),G(1,`no mounts in nitro.storage or nitro.devStorage`),R())}function Q3(e,t){if(e&1&&(L(0,`span`,15),G(1),R()),e&2){let e=t.$implicit;E(),J(``,e.path,` · `,e.rule)}}function $3(e,t){e&1&&(L(0,`span`,12),G(1,`no isr, swr or cache rule`),R())}function e6(e,t){if(e&1){let e=z();L(0,`div`,29)(1,`p`,7),G(2),R(),L(3,`label`,31),G(4,`Payload (JSON, optional)`),R(),L(5,`textarea`,32),H(`input`,function(t){return x(e),S(U(5).taskPayload.set(t.target.value))}),R(),L(6,`div`,26)(7,`button`,33),H(`click`,function(){x(e);let t=U().$implicit;return S(U(4).runTask(t.name))}),G(8,` Run task `),R(),L(9,`button`,4),H(`click`,function(){return x(e),S(U(5).taskConfirm.set(null))}),G(10,` Cancel `),R()()()}if(e&2){let e=U(),t=e.$implicit,n=e.$index,r=U(4);O(`aria-labelledby`,`task-confirm-`+n),E(),B(`id`,`task-confirm-`+n),E(),q(` Run `,t.name,` on the dev server? A task can change data. `),E(),B(`htmlFor`,`task-payload-`+n),E(2),B(`id`,`task-payload-`+n)(`value`,r.taskPayload()),E(2),B(`disabled`,r.runningTask()!==null)}}function t6(e,t){if(e&1&&(L(0,`span`,34),G(1),R()),e&2){let e=U();O(`data-status`,e.ok?`good`:`bad`),E(),K(e.status)}}function n6(e,t){if(e&1&&(L(0,`span`,35),G(1),R()),e&2){let e=U();E(),q(` `,e.ms,` ms`)}}function r6(e,t){if(e&1&&(L(0,`span`),G(1),R()),e&2){let e=U();E(),q(` `,e.error)}}function i6(e,t){if(e&1&&(L(0,`pre`,36),G(1),R()),e&2){let e=U();E(),K(e.output)}}function a6(e,t){if(e&1&&(L(0,`div`,30)(1,`p`),k(2,t6,2,2,`span`,34),k(3,n6,2,1,`span`,35),k(4,r6,2,1,`span`),R(),k(5,i6,2,1,`pre`,36),R()),e&2){let e=t;E(2),A(e.status===void 0?-1:2),E(),A(e.ms===void 0?-1:3),E(),A(e.error?4:-1),E(),A(e.output?5:-1)}}function o6(e,t){if(e&1){let e=z();L(0,`li`)(1,`div`,26)(2,`span`,10),G(3),R(),L(4,`span`,27),G(5),R(),L(6,`button`,28),H(`click`,function(){let t=x(e).$implicit;return S(U(4).askTask(t.name))}),G(7),R()(),k(8,e6,11,7,`div`,29),k(9,a6,6,4,`div`,30),R()}if(e&2){let e,n=t.$implicit,r=U(4);E(3),K(n.name),E(2),K(n.file),E(),B(`disabled`,!r.canPurge()||r.runningTask()!==null),O(`aria-describedby`,r.canPurge()?null:`nitro-purge-off`)(`aria-label`,`Run the task `+n.name),E(),q(` `,r.runningTask()===n.name?`Running…`:`Run`,` `),E(),A(r.taskConfirm()===n.name?8:-1),E(),A((e=r.taskResults()[n.name])?9:-1,e)}}function s6(e,t){if(e&1&&(L(0,`ul`,17),j(1,o6,10,8,`li`,null,R3),R()),e&2){let e=U();E(),M(e.tasks)}}function c6(e,t){e&1&&(L(0,`p`,12),G(1,`No tasks under src/server/tasks.`),R())}function l6(e,t){if(e&1){let e=z();L(0,`button`,37),H(`click`,function(){return x(e),S(U(3).ask(null))}),G(1,` Purge all `),R()}if(e&2){let e=U(3);B(`disabled`,!e.canPurge()||e.purging()),O(`aria-describedby`,e.canPurge()?null:`nitro-purge-off`)}}function u6(e,t){if(e&1&&(L(0,`p`,21),G(1),R()),e&2){let e=U(3);E(),K(e.purgeOff)}}function d6(e,t){if(e&1){let e=z();L(0,`div`,22)(1,`p`,38),G(2),R(),L(3,`div`,26)(4,`button`,39),H(`click`,function(){let t=x(e);return S(U(3).purge(t))}),G(5,` Delete `),R(),L(6,`button`,4),H(`click`,function(){return x(e),S(U(3).confirming.set(null))}),G(7,` Cancel `),R()()()}if(e&2){let e=t;E(2),q(` Delete `,e.length===1?`this cache entry`:e.length+` cache entries`,`? The next request renders those routes again. `)}}function f6(e,t){if(e&1){let e=z();L(0,`tr`)(1,`td`,42),G(2),R(),L(3,`td`),G(4),R(),L(5,`td`,43),G(6),R(),L(7,`td`,43)(8,`button`,28),H(`click`,function(){let t=x(e).$implicit;return S(U(4).ask([t.file]))}),G(9,` Purge `),R()()()}if(e&2){let e=t.$implicit,n=U(4);E(),B(`title`,e.file),E(),K(e.key),E(2),K(e.group),E(2),K(n.size(e.size)),E(2),B(`disabled`,!n.canPurge()||n.purging()),O(`aria-label`,`Purge `+e.key)}}function p6(e,t){if(e&1&&(L(0,`div`,24)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,9),G(5,`Key`),R(),L(6,`th`,9),G(7,`Group`),R(),L(8,`th`,40),G(9,`Size`),R(),L(10,`th`,9)(11,`span`,41),G(12,`Actions`),R()()()(),L(13,`tbody`),j(14,f6,10,6,`tr`,null,z3),R()()()),e&2){let e=U();E(14),M(e.entries)}}function m6(e,t){e&1&&G(0),e&2&&q(` The cache folders (`,U(2).cacheDirs.join(`, `),`) hold no entries yet. `)}function h6(e,t){e&1&&G(0,` No Nitro cache folder in the project. `)}function g6(e,t){if(e&1&&(L(0,`p`,1),k(1,m6,1,1)(2,h6,1,0),R()),e&2){let e=U();E(),A(e.cacheDirs.length?1:2)}}function _6(e,t){if(e&1&&(L(0,`p`,25),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function v6(e,t){if(e&1&&(L(0,`section`,6)(1,`h2`,13),G(2,`Nitro`),R(),L(3,`dl`,14)(4,`dt`),G(5,`Plugins`),R(),L(6,`dd`),j(7,J3,2,1,`span`,15,dg,!1,Y3,2,0,`span`,12),R(),L(10,`dt`),G(11,`Storage`),R(),L(12,`dd`),j(13,X3,2,3,`span`,15,I3,!1,Z3,2,0,`span`,12),R(),L(16,`dt`),G(17,`Cached routes`),R(),L(18,`dd`),j(19,Q3,2,2,`span`,15,L3,!1,$3,2,0,`span`,12),R()(),L(22,`h3`,16),G(23),R(),k(24,s6,3,0,`ul`,17)(25,c6,2,0,`p`,12),L(26,`div`,18)(27,`h3`,19),G(28),R(),k(29,l6,2,2,`button`,20),R(),k(30,u6,2,1,`p`,21),k(31,d6,8,1,`div`,22),L(32,`p`,23),G(33),R(),k(34,p6,16,0,`div`,24)(35,g6,3,1,`p`,1),j(36,_6,2,1,`p`,25,dg),R()),e&2){let e,n=t,r=U(2);E(7),M(n.plugins),E(6),M(n.storage),E(6),M(n.cachedRules),E(4),q(`Tasks (`,n.tasks.length,`)`),E(),A(n.tasks.length?24:25),E(4),q(`Cache entries on disk (`,n.entries.length,`)`),E(),A(n.entries.length?29:-1),E(),A(r.canPurge()?-1:30),E(),A((e=r.confirming())?31:-1,e),E(2),K(r.message()),E(),A(n.entries.length?34:35),E(2),M(n.notes)}}function y6(e,t){if(e&1&&(j(0,q3,5,4,`section`,5,P3),k(2,v6,38,11,`section`,6)),e&2){let e,t=U();M(t.sections()),E(2),A((e=t.nitro())?2:-1,e)}}var b6=class e{rpc=$(null);config=w(null);injector=b(Es);nitro=w(null);loading=w(!0);failed=w(!1);purging=w(!1);message=w(``);confirming=w(null);taskConfirm=w(null);taskPayload=w(``);runningTask=w(null);taskResults=w({});canPurge=X(()=>OT(this.rpc(),`analog`));purgeOff=Mw(`analog`);size=e3;sections=X(()=>{let e=this.config();return e?[{id:`env`,title:`import.meta.env`,values:e.env,empty:`No VITE_ or ANALOG_ keys in the .env files.`},{id:`runtime-config`,title:`Nitro runtimeConfig`,values:e.runtimeConfig,empty:`No nitro.runtimeConfig in ${e.configFile??`vite.config`}.`},{id:`options`,title:`analog() options`,values:e.options,empty:``}]:[]});constructor(){T(()=>{let e=this.rpc();Z(()=>void this.fetch(e))})}reload(){this.fetch(this.rpc())}async fetch(e){this.loading.set(!0);let[t,n]=await Promise.all([sT(e,`analog-runtime-config`),sT(e,`analog-nitro`)]);this.config.set(t),this.nitro.set(n),this.failed.set(!t),this.loading.set(!1)}askTask(e){this.taskConfirm.set(e),this.taskPayload.set(``),this.focusAfterRender(`task-run-confirm`)}async runTask(e){if(this.runningTask()!==null)return;let t;if(this.taskPayload().trim())try{t=JSON.parse(this.taskPayload())}catch{this.taskResults.update(t=>({...t,[e]:{ok:!1,name:e,error:`The payload is not valid JSON.`}}));return}this.runningTask.set(e);try{let n=await sT(this.rpc(),`analog-run-nitro-task`,{name:e,payload:t,confirm:!0});this.taskResults.update(t=>({...t,[e]:n??{ok:!1,name:e,error:`No answer from the devtools server.`}})),n?.ok&&this.taskConfirm()===e&&this.taskConfirm.set(null)}finally{this.runningTask.set(null)}}focusAfterRender(e){Sd(()=>document.getElementById(e)?.focus(),{injector:this.injector})}ask(e){let t=this.nitro()?.entries.map(e=>e.file)??[];this.confirming.set(e??t),this.message.set(``),this.focusAfterRender(`nitro-confirm`)}async purge(e){this.purging.set(!0),this.confirming.set(null);try{let t=e.length===(this.nitro()?.entries.length??-1),n=await sT(this.rpc(),`analog-nitro-purge`,{files:t?void 0:e,confirm:!0});n?.ok?this.message.set(`Deleted ${n.removed} cache entr${n.removed===1?`y`:`ies`}.`):this.message.set(n?.error??`Could not purge the cache.`),this.nitro.set(await sT(this.rpc(),`analog-nitro`))}finally{this.purging.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-runtime`]],inputs:{rpc:[1,`rpc`]},decls:9,vars:1,consts:[[1,`stack`],[1,`muted`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[1,`card`],[`aria-labelledby`,`runtime-nitro`,1,`card`],[3,`id`],[`role`,`region`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[1,`mono`,`path`],[1,`pill`],[1,`muted`,`small`],[`id`,`runtime-nitro`],[1,`facts`],[1,`chip`,`mono`],[`id`,`nitro-tasks-heading`],[`aria-labelledby`,`nitro-tasks-heading`,1,`tasks`],[1,`row`,`head`],[`id`,`nitro-cache-heading`],[`type`,`button`,1,`btn`,`ghost`,`danger`,3,`disabled`],[`id`,`nitro-purge-off`,1,`muted`,`small`],[`role`,`alertdialog`,`aria-labelledby`,`nitro-confirm-text`,1,`note`,`confirm`],[`role`,`status`,1,`muted`,`small`],[`role`,`region`,`aria-labelledby`,`nitro-cache-heading`,`tabindex`,`0`,1,`table-wrap`],[1,`note`],[1,`row`],[1,`muted`,`small`,`file`,`grow`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`alertdialog`,1,`note`,`confirm`],[`role`,`status`,1,`task-result`],[1,`label`,3,`for`],[`rows`,`2`,`placeholder`,`{"dryRun": true}`,1,`field`,`mono`,3,`input`,`id`,`value`],[`type`,`button`,`id`,`task-run-confirm`,1,`btn`,`primary`,3,`click`,`disabled`],[1,`status`],[1,`muted`,`small`,`tnum`],[1,`code`],[`type`,`button`,1,`btn`,`ghost`,`danger`,3,`click`,`disabled`],[`id`,`nitro-confirm-text`],[`type`,`button`,`id`,`nitro-confirm`,1,`btn`,`danger`,3,`click`],[`scope`,`col`,1,`num`],[1,`sr-only`],[1,`mono`,`path`,3,`title`],[1,`num`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`p`,1),G(2,` What the app reads at runtime and what Nitro keeps between requests. Secret names, tokens and the names in `),L(3,`code`),G(4,`redaction.secretNames`),R(),G(5,` are masked. `),R(),k(6,B3,2,0,`p`,2)(7,V3,5,0,`div`,3)(8,y6,3,1),R()),e&2&&(E(6),A(t.loading()&&!t.config()?6:t.failed()?7:8))},styles:[`h2[_ngcontent-%COMP%], 
+h3[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.danger[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 480px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.path[_ngcontent-%COMP%], 
+.file[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%], 
+[data-status=good].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%], 
+[data-status=warn].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%], 
+[data-status=bad].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.note[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.note[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 2px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+summary[_ngcontent-%COMP%] {
+  cursor: pointer;
+  color: var(--%NS%text-2);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+@media (max-width: 560px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+[_nghost-%COMP%] {
+  display: block;
+}
+
+.stack[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+}
+
+.head[_ngcontent-%COMP%] {
+  justify-content: space-between;
+}
+
+.confirm[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.tasks[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.task-result[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 4px;
+  font-family: var(--%NS%mono);
+  font-size: 12px;
+}`]})},x6={"scan-error":{title:`A folder could not be read`,summary:`Its files are missing from routes, API routes and lint results.`},"duplicate-url":{title:`Two files serve the same URL`,summary:`Only one of them is reachable; the other never renders.`},"sibling-params":{title:`Two dynamic pages in one folder`,summary:`Both are [param] pages at the same level, so the first one always wins.`},"missing-default-export":{title:`Page has no default export`,summary:`Analog needs the component as the default export, so the page renders nothing.`},"redirect-with-component":{title:`Redirect page also exports a component`,summary:`The redirect runs first, so the component never shows.`},"redirect-path-match":{title:`Redirect matches too much`,summary:`An empty-path redirect without pathMatch "full" catches every URL below it.`},"layout-without-outlet":{title:`Layout has no router-outlet`,summary:`The layout has child pages, but without <router-outlet> they never render.`},"server-without-load":{title:`.server.ts without load or action`,summary:`The server file exports no load, action or server function, so Analog calls nothing.`},"orphan-server-file":{title:`.server.ts without a page`,summary:`No page file sits next to it, so its load never runs.`},"api-method-suffix":{title:`Unknown method suffix on an API file`,summary:`The suffix is not an HTTP method, so it becomes part of the URL.`},"duplicate-api-route":{title:`Two handlers for one API route`,summary:`Two files answer the same method and path.`},"api-outside-prefix":{title:`Server route outside the API prefix`,summary:`During vite dev only routes under the prefix reach Nitro.`},"prerender-unknown-route":{title:`Prerender entry matches no page`,summary:`prerender.routes lists a path that no page file serves.`},"prerender-missing-root":{title:`Home page is not prerendered`,summary:`static is on, but prerender.routes leaves out /.`},"content-frontmatter":{title:`Broken frontmatter`,summary:`The markdown frontmatter cannot be read.`},"content-schema":{title:`Frontmatter does not match the content schema`,summary:`The keys or values differ from the JSON Schema that analog.contentSchema names.`},"content-schema-unreadable":{title:`The content schema could not be used`,summary:`analog.contentSchema names a file that is missing, outside the project or not JSON.`},"duplicate-slug":{title:`Two posts share a slug`,summary:`injectContent picks one of them at random.`},"content-shadows-page":{title:`Markdown file takes over a page`,summary:`Files under src/content are routes too, so these URLs render the markdown file instead of the [param] page.`},"load-fetched-twice":{title:`load() runs twice`,summary:`These pages fetched their data while rendering on the server and again in the browser.`},"fn-fetched-twice":{title:`Server function read runs twice`,summary:`These reads ran while rendering on the server and again in the browser right after hydration.`},"restart-needed":{title:`New pages need a restart`,summary:`These page files exist, but the running router does not know them yet.`},"hydration-error":{title:`Hydration error`,summary:`The browser DOM did not match the server HTML.`},"api-not-found":{title:`API call failed with 404 or 405`,summary:`A request hit a path or method that no server route handles.`}},S6=new Set([`missing-default-export`,`redirect-with-component`,`redirect-path-match`,`layout-without-outlet`,`server-without-load`,`orphan-server-file`,`load-fetched-twice`,`restart-needed`,`prerender-missing-root`]),C6={ssr:`SSR`,ssg:`Prerendered`,client:`Client only`,cached:`Cached`,redirect:`Redirect`},w6={all:`All`,page:`Pages`,load:`load()`,action:`Actions`,fn:`Server fn`,api:`API`},T6={success:`succeeded`,redirect:`redirected`,invalid:`validation errors`,error:`failed`},E6={success:`good`,redirect:`info`,invalid:`warn`,error:`bad`};function D6(e,t=0,n=[]){for(let r of e)n.push({route:r,depth:t}),D6(r.children,t+1,n);return n}function O6(e){return e?.replace(/^\/src\/app\//,``).replace(/^\//,``)}function k6(e){let t=O6(e)??e;return t.includes(`/`)?t.slice(0,t.lastIndexOf(`/`)+1):``}function A6(e){return e.slice(e.lastIndexOf(`/`)+1)}function j6(e){return e>=500||e===0?`bad`:e>=400?`warn`:`good`}function M6(e){return C6[e]}var N6=class e{rpcSource=w(null);rpc=X(()=>this.rpcSource());view=w(`routes`);project=w(null);loadFailed=w(!1);state=w({});findings=w([]);renderRows=w([]);plan=w(null);filter=w(``);testUrl=w(``);explained=w(null);explainError=w(``);explaining=w(!1);devOrigin=X(()=>{let e=this.page()?.url??``;if(/^https?:\/\//.test(e))try{return new URL(e).origin}catch{return``}return/^https?:$/.test(location.protocol)?location.origin:``});transformFile=w(null);previewFile=w(null);checks=w({});unsubscribe=null;refreshTimer;refreshRun=0;destroyRef=b(Os);hostPageId=tT();page=X(()=>{let e=this.state().pages??[];return(this.hostPageId?e.find(e=>e.pageId===this.hostPageId):e[0])??null});openFiles=X(()=>{let e=new Map;for(let t of this.page()?.chain??[])t.file&&(!e.has(t.file)||!t.outlet)&&e.set(t.file,t.outlet??``);return e});allCalls=X(()=>this.state().calls??[]);scopePageId=X(()=>this.page()?.pageId);allTabs=w(!1);tabCalls=X(()=>{let e=this.scopePageId(),t=this.allCalls();return this.allTabs()||!e?t:t.filter(t=>t.pageId===e)});allRoutes=X(()=>D6(this.project()?.routes??[]));pageCount=X(()=>this.allRoutes().filter(e=>e.route.file&&e.route.kind!==`layout`).length);serverFns=X(()=>this.project()?.serverFns??[]);fnById=X(()=>new Map(this.serverFns().map(e=>[e.id,e])));lintCards=X(()=>{let e={error:0,warning:1,info:2},t=new Map;for(let e of this.findings()){let n=t.get(e.rule);if(!n){let r=x6[e.rule];n={rule:e.rule,severity:e.severity,title:r?.title??e.rule,summary:r?.summary??e.message,fix:e.fix,items:[]},t.set(e.rule,n)}let r=S6.has(e.rule)||e.message===n.summary?void 0:e.message;n.items.some(t=>t.file===e.file&&t.path===e.path&&t.message===r)||n.items.push({file:e.file,path:e.path,message:r})}return Array.from(t.values()).sort((t,n)=>e[t.severity]-e[n.severity])});lintCount=X(()=>{let e=this.findings();return{errors:e.filter(e=>e.severity===`error`).length,warnings:e.filter(e=>e.severity===`warning`).length}});lintTone=X(()=>{let{errors:e,warnings:t}=this.lintCount();return e?`bad`:t?`warn`:``});views=X(()=>{let{errors:e,warnings:t}=this.lintCount();return[{id:`routes`,label:`Routes`,count:this.pageCount(),tone:``},{id:`server`,label:`Server`,count:this.tabCalls().length,tone:``},{id:`render`,label:`Render`,count:this.renderRows().length,tone:``},{id:`content`,label:`Content`,count:this.project()?.content.length??0,tone:``},{id:`data`,label:`Data`,count:null,tone:``},{id:`runtime`,label:`Runtime`,count:null,tone:``},{id:`lint`,label:`Lint`,count:e+t,tone:this.lintTone()}]});constructor(){this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.refreshTimer)})}connect(e){this.rpcSource=e}async load(e){let t=await sT(e,`analog-project`);if(!this.destroyRef.destroyed){this.project.set(t),this.loadFailed.set(t===null);try{let t=await e.scope(`pangular`).rpc.sharedState(`analog`);if(this.destroyRef.destroyed)return;let n=e=>this.state.set(e??{});n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.state.set({})}this.destroyRef.destroyed||await this.refresh(this.view())}}retry(){let e=this.rpc();e&&(this.loadFailed.set(!1),this.load(e))}scheduleRefresh(e){clearTimeout(this.refreshTimer),this.refreshTimer=setTimeout(()=>void this.refresh(e),300)}async refresh(e){let t=this.rpc();if(!t)return;let n=++this.refreshRun,[r,i]=await Promise.all([sT(t,`analog-lint`,this.hostPageId??void 0),sT(t,`analog-render`)]);if(n===this.refreshRun&&(this.findings.set(r??[]),this.renderRows.set(i?.rows??[]),this.plan.set(i?.plan??null),e===`routes`||e===`content`||this.project()===null)){let e=await sT(t,`analog-project`);e&&n===this.refreshRun&&(this.project.set(e),this.loadFailed.set(!1))}}isOpen(e){return!!e.file&&this.openFiles().has(e.file)}openText(e){let t=e.file?this.openFiles().get(e.file):void 0;return t?`open in ${t}`:`open`}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},P6=class e{page=b(N6);kinds=[`all`,`page`,`load`,`action`,`fn`,`api`];kind=w(`all`);tryTarget=Q({source:this.page.view,computation:()=>null});tryNonce=0;maxServerCalls=200;callQuery=w(``);failedOnly=w(!1);callsMessage=w(``);callFiltered=X(()=>!!this.callQuery().trim()||this.failedOnly());matchingCalls=X(()=>{let e=this.kind(),t=this.callQuery().trim().toLowerCase(),n=this.failedOnly();return this.page.tabCalls().filter(r=>(e===`all`||r.kind===e)&&(!n||this.isFailed(r))&&(!t||this.callText(r).includes(t)))});calls=X(()=>this.matchingCalls().slice(-150).reverse());shownCount=X(()=>this.calls().length);serverFull=X(()=>this.page.allCalls().length>=200);shownRoutes=X(()=>new Set(this.page.tabCalls().map(e=>`${e.kind} ${e.route??``}`)));refetchedFns=X(()=>Array.from(new Set((this.page.state().refetches??[]).filter(e=>this.shownRoutes().has(`fn ${e.id}`)).map(e=>this.page.fnById().get(e.id)?.name??e.id))));duplicates=X(()=>Array.from(new Set((this.page.state().duplicates??[]).filter(e=>this.shownRoutes().has(`load ${e.route}`)).map(e=>e.route))));kindLabel(e){return w6[e]}kindCount(e){return e===`all`?this.page.tabCalls().length:this.page.tabCalls().filter(t=>t.kind===e).length}fnOf(e){return e.kind===`fn`&&e.route?this.page.fnById().get(e.route):void 0}fnCalls(e){return this.page.tabCalls().filter(t=>t.kind===`fn`&&t.route===e).length}outcomeLabel(e){return T6[e]}outcomeTone(e){return E6[e]}tryApi(e){this.tryTarget.set({route:e,nonce:++this.tryNonce})}isFailed(e){return!e.status||e.status>=400||e.outcome===`error`}callText(e){let t=this.fnOf(e);return[e.url,e.route,t?.name,t?.file].filter(Boolean).join(` `).toLowerCase()}resetFilters(){this.callQuery.set(``),this.failedOnly.set(!1),this.kind.set(`all`)}async clearCalls(){let e=this.page.rpc();try{if(!e)throw Error(`No devtools server`);return await oT(e,`analog-clear-calls`),this.callsMessage.set(`Calls cleared.`),!0}catch{return this.callsMessage.set(`Could not clear the calls.`),!1}}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},F6=400;function I6(e){let t=[];for(let[n,r]of e.split(/(`[^`]+`)/).entries())r&&(n%2==1?t.push({text:r.slice(1,-1),code:!0}):t.push(...R6(L6(r))));return t}function L6(e){return e.replace(/!\[([^\]]*)\]\([^)]*\)/g,`$1`).replace(/\[([^\]]+)\]\([^)]*\)/g,`$1`).replace(/<[^>]+>/g,``)}function R6(e){let t=[],n=/(\*\*[^*]+\*\*|__[^_]+__|\*[^*\s][^*]*\*|_[^_\s][^_]*_)/g,r=0;for(let i of e.matchAll(n)){i.index>r&&t.push({text:e.slice(r,i.index)});let n=i[0];n.startsWith(`**`)||n.startsWith(`__`)?t.push({text:n.slice(2,-2),strong:!0}):t.push({text:n.slice(1,-1),em:!0}),r=i.index+n.length}return r<e.length&&t.push({text:e.slice(r)}),t}function z6(e){let t=[],n=e.replace(/\r/g,``).split(`
+`),r=[],i=()=>{r.length&&t.push({kind:`paragraph`,parts:I6(r.join(` `))}),r=[]};for(let e=0;e<n.length&&t.length<F6;e++){let a=n[e],o=a.match(/^\s*(```|~~~)\s*([\w-]*)/);if(o){i();let r=[];for(e++;e<n.length&&!n[e].trim().startsWith(o[1]);e++)r.push(n[e]);t.push({kind:`code`,lang:o[2],text:r.join(`
+`)});continue}let s=a.match(/^(#{1,6})\s+(.*?)\s*#*\s*$/);if(s){i();let e=s[1].length;t.push({kind:`heading`,level:e,parts:I6(s[2])});continue}if(/^\s*([-*_])(\s*\1){2,}\s*$/.test(a)){i(),t.push({kind:`rule`});continue}let c=a.match(/^\s*([-*+]|\d+[.)])\s+(.*)$/);if(c){i();let r=/\d/.test(c[1]),a=[I6(c[2])];for(;e+1<n.length;){let t=n[e+1].match(/^\s*([-*+]|\d+[.)])\s+(.*)$/);if(!t||/\d/.test(t[1])!==r)break;a.push(I6(t[2])),e++}t.push({kind:`list`,ordered:r,items:a});continue}let l=a.match(/^\s*>\s?(.*)$/);if(l){i();let r=[l[1]];for(;e+1<n.length&&/^\s*>/.test(n[e+1]);)r.push(n[++e].replace(/^\s*>\s?/,``));t.push({kind:`quote`,parts:I6(r.join(` `))});continue}a.trim()?r.push(a.trim()):i()}return i(),t}function B6(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function V6(e,t){if(e&1&&(L(0,`strong`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function H6(e,t){if(e&1&&(L(0,`em`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function U6(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,e.text,` `)}}function W6(e,t){if(e&1&&k(0,B6,2,1,`code`)(1,V6,2,1,`strong`)(2,H6,2,1,`em`)(3,U6,1,1),e&2){let e=t.$implicit;A(e.code?0:e.strong?1:e.em?2:3)}}var G6=(e,t)=>t[0];function K6(e,t){if(e&1&&(P(0,`p`,5),G(1),F()),e&2){let e=U();E(),q(`Reading `,e.file(),`…`)}}function q6(e,t){if(e&1&&(P(0,`p`,6),G(1),F()),e&2){let e=U();E(),K(e.error)}}function J6(e,t){if(e&1&&(P(0,`li`),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function Y6(e,t){if(e&1&&(P(0,`div`,7)(1,`p`)(2,`strong`),G(3,`Does not match the content schema`),F()(),P(4,`ul`,12),j(5,J6,2,1,`li`,null,dg),F()()),e&2){let e=U();E(5),M(e.schemaErrors)}}function X6(e,t){if(e&1&&(P(0,`p`,8),G(1),F()),e&2){let e=U(2);E(),q(`Matches `,e.schema(),`.`)}}function Z6(e,t){if(e&1&&(P(0,`dt`,13),G(1),F(),P(2,`dd`,13),G(3),F()),e&2){let e=t.$implicit;E(),K(e[0]),E(2),K(e[1])}}function Q6(e,t){if(e&1&&(P(0,`dl`,9),j(1,Z6,4,2,null,null,G6),F()),e&2){let e=U(2);E(),M(e.frontmatter())}}function $6(e,t){if(e&1&&(P(0,`p`,14),I(1,`app-md-inline`,16),F()),e&2){let e=U().$implicit;O(`data-level`,e.level),E(),N(`parts`,e.parts)}}function e8(e,t){if(e&1&&(P(0,`p`),I(1,`app-md-inline`,16),F()),e&2){let e=U().$implicit;E(),N(`parts`,e.parts)}}function t8(e,t){if(e&1&&(P(0,`blockquote`),I(1,`app-md-inline`,16),F()),e&2){let e=U().$implicit;E(),N(`parts`,e.parts)}}function n8(e,t){if(e&1&&(P(0,`li`),I(1,`app-md-inline`,16),F()),e&2){let e=t.$implicit;E(),N(`parts`,e)}}function r8(e,t){if(e&1&&(P(0,`ol`),j(1,n8,2,1,`li`,null,ug),F()),e&2){let e=U(2).$implicit;E(),M(e.items)}}function i8(e,t){if(e&1&&(P(0,`li`),I(1,`app-md-inline`,16),F()),e&2){let e=t.$implicit;E(),N(`parts`,e)}}function a8(e,t){if(e&1&&(P(0,`ul`),j(1,i8,2,1,`li`,null,ug),F()),e&2){let e=U(2).$implicit;E(),M(e.items)}}function o8(e,t){if(e&1&&k(0,r8,3,0,`ol`)(1,a8,3,0,`ul`),e&2){let e=U().$implicit;A(+!e.ordered)}}function s8(e,t){if(e&1&&(P(0,`pre`,15),G(1),F()),e&2){let e=U().$implicit;E(),K(e.text)}}function c8(e,t){e&1&&I(0,`hr`)}function l8(e,t){if(e&1&&k(0,$6,2,2,`p`,14)(1,e8,2,1,`p`)(2,t8,2,1,`blockquote`)(3,o8,2,1)(4,s8,2,1,`pre`,15)(5,c8,1,0,`hr`),e&2){let e,n=t.$implicit;A((e=n.kind)===`heading`?0:e===`paragraph`?1:e===`quote`?2:e===`list`?3:e===`code`?4:e===`rule`?5:-1)}}function u8(e,t){e&1&&(P(0,`p`,11),G(1,`The file has no markdown after its frontmatter.`),F())}function d8(e,t){e&1&&(P(0,`p`,8),G(1,`The preview stops after 20,000 characters.`),F())}function Ure(e,t){if(e&1&&(k(0,q6,2,1,`p`,6),k(1,Y6,7,0,`div`,7)(2,X6,2,1,`p`,8),k(3,Q6,3,0,`dl`,9),P(4,`div`,10),j(5,l8,6,1,null,null,ug,!1,u8,2,0,`p`,11),k(8,d8,2,0,`p`,8),F()),e&2){let e=t,n=U();A(e.error?0:-1),E(),A(e.schemaErrors?.length?1:n.schema()&&!e.error?2:-1),E(2),A(n.frontmatter().length?3:-1),E(),O(`aria-label`,`Rendered markdown of `+n.file()),E(),M(n.blocks()),E(3),A(e.truncated?8:-1)}}function Wre(e,t){if(e&1&&(P(0,`p`,6),G(1),F()),e&2){let e=U();E(),q(`Could not read `,e.file(),`.`)}}var Gre=class e{parts=$([]);static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-md-inline`]],inputs:{parts:[1,`parts`]},decls:2,vars:0,template:function(e,t){e&1&&j(0,W6,4,1,null,null,ug),e&2&&M(t.parts())},styles:[`code[_ngcontent-%COMP%] {
+  padding: 1px 5px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 4px;
+  font-family: var(--%NS%mono);
+  font-size: 12px;
+}`]})},Kre=class e{rpc=$(null);file=$.required();schema=$(void 0);closed=xv();data=w(null);loading=w(!0);blocks=X(()=>z6(this.data()?.body??``));frontmatter=X(()=>Object.entries(this.data()?.values??{}).map(([e,t])=>[e,typeof t==`string`?t:JSON.stringify(t)]));run=0;constructor(){T(()=>{let e=this.file(),t=this.rpc();Z(()=>void this.fetch(t,e))})}async fetch(e,t){let n=++this.run;this.loading.set(!0);let r=await sT(e,`analog-content-preview`,t);n===this.run&&(this.data.set(r),this.loading.set(!1))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-content-preview`]],inputs:{rpc:[1,`rpc`],file:[1,`file`],schema:[1,`schema`]},outputs:{closed:`closed`},decls:11,vars:2,consts:[[`aria-labelledby`,`content-preview-heading`,1,`card`],[1,`row`,`head`],[`id`,`content-preview-heading`],[1,`file`,`grow`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[`data-tone`,`bad`,`role`,`status`,1,`note`],[1,`muted`,`small`],[1,`facts`],[`role`,`region`,`tabindex`,`0`,1,`md`],[1,`muted`],[1,`plain`],[1,`mono`],[1,`md-heading`],[1,`code`],[3,`parts`]],template:function(e,t){if(e&1&&(P(0,`section`,0)(1,`div`,1)(2,`h2`,2),G(3,`Preview`),F(),P(4,`span`,3),G(5),F(),P(6,`button`,4),V(`click`,function(){return t.closed.emit()}),G(7,`Close preview`),F()(),k(8,K6,2,1,`p`,5)(9,Ure,9,6)(10,Wre,2,1,`p`,6),F()),e&2){let e;E(5),K(t.file()),E(3),A(t.loading()?8:(e=t.data())?9:10,e)}},dependencies:[Gre],styles:[`h2[_ngcontent-%COMP%], 
+h3[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.danger[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 480px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.path[_ngcontent-%COMP%], 
+.file[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%], 
+[data-status=good].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%], 
+[data-status=warn].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%], 
+[data-status=bad].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.note[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.note[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 2px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+summary[_ngcontent-%COMP%] {
+  cursor: pointer;
+  color: var(--%NS%text-2);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+@media (max-width: 560px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+[_nghost-%COMP%] {
+  display: block;
+}
+
+.head[_ngcontent-%COMP%] {
+  justify-content: space-between;
+}
+
+.plain[_ngcontent-%COMP%] {
+  margin: 4px 0 0;
+  padding-left: 18px;
+}
+
+.md[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 10px;
+  max-height: 420px;
+  overflow: auto;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  line-height: 1.6;
+}
+
+.md[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.md[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], 
+.md[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {
+  margin: 0;
+  padding-left: 22px;
+}
+
+.md-heading[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 650;
+}
+
+.md-heading[data-level="1"][_ngcontent-%COMP%] {
+  font-size: 20px;
+}
+
+.md-heading[data-level="2"][_ngcontent-%COMP%] {
+  font-size: 17px;
+}
+
+.md-heading[data-level="3"][_ngcontent-%COMP%] {
+  font-size: 15px;
+}
+
+blockquote[_ngcontent-%COMP%] {
+  margin: 0;
+  padding-left: 12px;
+  border-left: 3px solid var(--%NS%border-strong);
+  color: var(--%NS%text-2);
+}
+
+hr[_ngcontent-%COMP%] {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--%NS%border);
+}`]})},qre=()=>[],Jre=(e,t)=>t.file,Yre=(e,t)=>t.file+t.line;function Xre(e,t){if(e&1&&(P(0,`div`)(1,`span`,13),G(2),F()()),e&2){let e=U().$implicit;E(2),K(e.error)}}function Zre(e,t){if(e&1&&(P(0,`div`)(1,`span`,14),G(2),F()()),e&2){let e=U(3);E(2),q(`takes over `,e.base(t))}}function Qre(e,t){if(e&1&&(P(0,`div`)(1,`span`,14),G(2),F()()),e&2){let e=U().$implicit,t=U(2);E(2),K(t.plural(e.schemaErrors.length,`schema problem`))}}function $re(e,t){if(e&1){let e=z();P(0,`tr`)(1,`td`)(2,`strong`),G(3),F(),k(4,Xre,3,1,`div`),k(5,Zre,3,1,`div`),k(6,Qre,3,1,`div`),F(),P(7,`td`,6),G(8),F(),P(9,`td`,7),G(10),F(),P(11,`td`,8),G(12),F(),P(13,`td`)(14,`app-source-link`,9)(15,`span`,10),G(16),F(),G(17),F()(),P(18,`td`,11)(19,`button`,12),V(`click`,function(){let t=x(e).$implicit;return S(U(2).showPreview(t.file))}),G(20,` Preview `),F()()()}if(e&2){let e,n=t.$implicit,r=U(2);E(3),K(n.attributes.title||`(no title)`),E(),A(n.error?4:-1),E(),A((e=r.shadowed(n.file))?5:-1,e),E(),A(n.schemaErrors?.length?6:-1),E(2),K(r.contentUrl(n.file)??``),E(2),K(n.slug),E(2),K(n.attributes.date||``),E(2),N(`file`,n.file),E(2),K(r.dir(n.file)),E(),K(r.base(n.file)),E(2),O(`aria-label`,`Preview `+n.file)(`aria-pressed`,r.previewFile()===n.file)}}function eie(e,t){if(e&1&&(P(0,`div`,0)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,4),G(5,`Title`),F(),P(6,`th`,4),G(7,`URL`),F(),P(8,`th`,4),G(9,`Slug`),F(),P(10,`th`,4),G(11,`Date`),F(),P(12,`th`,4),G(13,`File`),F(),P(14,`th`,4)(15,`span`,5),G(16,`Actions`),F()()()(),P(17,`tbody`),j(18,$re,21,12,`tr`,null,Jre),F()()()),e&2){let e=U();E(18),M(e.project().content)}}function tie(e,t){e&1&&(P(0,`div`,1)(1,`p`,15),G(2,`No markdown files under src/content.`),F(),P(3,`p`,16),G(4,`Add a .md file there to see its title, slug, date and the URL it serves.`),F()())}function nie(e,t){if(e&1&&(P(0,`span`,13),G(1),F()),e&2){let e=U();E(),K(e.error)}}function rie(e,t){if(e&1&&(P(0,`span`,17),G(1),F()),e&2){let e=U(2);E(),q(` (skips `,e.unsupported.join(`, `),`)`)}}function iie(e,t){if(e&1&&(P(0,`span`,7),G(1),F(),k(2,rie,2,1,`span`,17)),e&2){let e=U();E(),K(e.file),E(),A(e.unsupported?.length?2:-1)}}function aie(e,t){e&1&&k(0,nie,2,1,`span`,13)(1,iie,3,2),e&2&&A(+!t.error)}function oie(e,t){e&1&&(P(0,`span`,17),G(1,`none; set `),P(2,`code`),G(3,`analog.contentSchema`),F(),G(4,` to check frontmatter`),F())}function sie(e,t){if(e&1&&(P(0,`app-source-link`,18),G(1),F()),e&2){let e=t.$implicit,n=U(2);N(`file`,e.file)(`line`,e.line),E(),R_(``,e.api,` · `,n.base(e.file),`:`,e.line)}}function cie(e,t){e&1&&(P(0,`span`,17),G(1,`no injectContentFiles, injectContent or contentFilesSource call under src`),F())}function lie(e,t){if(e&1&&(P(0,`dl`,2)(1,`dt`),G(2,`Schema`),F(),P(3,`dd`),k(4,aie,2,1)(5,oie,5,0,`span`,17),F(),P(6,`dt`),G(7,`Read by`),F(),P(8,`dd`),j(9,sie,2,5,`app-source-link`,18,Yre,!1,cie,2,0,`span`,17),F()()),e&2){let e,t=U();E(4),A((e=t.project().contentSchema)?4:5,e),E(5),M(t.project().contentUsage??iv(2,qre))}}function uie(e,t){if(e&1){let e=z();P(0,`app-analog-content-preview`,19),V(`closed`,function(){let t=x(e);return S(U().closePreview(t))}),F()}if(e&2){let e=U();N(`rpc`,e.rpc())(`file`,t)(`schema`,e.project().contentSchema?.error?void 0:e.project().contentSchema?.file)}}var die=class e{page=b(N6);host=b(Rl);plural=cD;rpc=this.page.rpc;project=this.page.project;previewFile=this.page.previewFile;dir=k6;base=A6;shadowed(e){return this.page.findings().find(t=>t.rule===`content-shadows-page`&&t.file===e)?.relatedFile}contentUrl(e){return this.page.allRoutes().find(t=>t.route.file===e)?.route.fullPath}showPreview(e){this.previewFile.set(this.previewFile()===e?null:e)}closePreview(e){this.previewFile.set(null),this.refocus(`Preview ${e}`)}refocus(e){queueMicrotask(()=>this.host.nativeElement.querySelector(`button[aria-label="${CSS.escape(e)}"]`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appAnalogContent`,``]],decls:4,vars:3,consts:[[`role`,`region`,`aria-label`,`Content files`,`tabindex`,`0`,1,`table-wrap`],[1,`empty-box`],[1,`facts`,`content-facts`],[3,`rpc`,`file`,`schema`],[`scope`,`col`],[1,`sr-only`],[1,`mono`,`path`],[1,`mono`],[1,`muted`,`nowrap`,`tnum`],[1,`file`,3,`file`],[1,`dir`],[1,`actions`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`data-tone`,`bad`,1,`pill`],[`data-tone`,`warn`,1,`pill`],[1,`empty-lead`],[1,`muted`],[1,`muted`,`small`],[1,`chip`,`mono`,3,`file`,`line`],[3,`closed`,`rpc`,`file`,`schema`]],template:function(e,t){if(e&1&&(k(0,eie,20,0,`div`,0)(1,tie,5,0,`div`,1),k(2,lie,12,3,`dl`,2),k(3,uie,1,3,`app-analog-content-preview`,3)),e&2){let e;A(+!t.project().content.length),E(2),A(t.project().content.length?2:-1),E(),A((e=t.previewFile())?3:-1,e)}},dependencies:[aM,Kre],styles:[`[_nghost-%COMP%] {
+  display: contents;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.empty-row[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td.empty-row[_ngcontent-%COMP%] {
+  background: transparent;
+}
+
+.empty-box[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  text-align: center;
+}
+
+.empty-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.empty-lead[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.nowrap[_ngcontent-%COMP%] {
+  white-space: nowrap;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.explain[_ngcontent-%COMP%] {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+
+.filter[_ngcontent-%COMP%] {
+  flex: 0 1 240px;
+  min-width: 0;
+}
+
+@media (max-width: 560px) {
+  .filter[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+}
+.inline[_ngcontent-%COMP%], 
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.inline[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%], 
+.playground[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:not(.check) {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 13px;
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+  outline: none;
+}
+
+.method-select[_ngcontent-%COMP%] {
+  width: 112px;
+  font-family: var(--%NS%mono);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%control-border);
+}
+
+.btn[_ngcontent-%COMP%]:active {
+  transform: translateY(1px);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.ghost[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+td.actions[_ngcontent-%COMP%] {
+  width: 1%;
+  text-align: right;
+  vertical-align: middle;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[role=tab][_ngcontent-%COMP%]:focus-visible, 
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible, 
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:focus-within {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+td.nowrap[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  transition: background-color 160ms var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+tr.open[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+tr.dim[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.route[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.guide[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%mono);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.dir[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%], 
+.method[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.pill[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  padding: 3px 10px;
+  border: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chips[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
+  padding: 3px 10px;
+  font-size: 12px;
+}
+
+.pill.live[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, var(--%NS%surface));
+  color: var(--%NS%accent-text);
+}
+
+.pill[data-kind=layout][_ngcontent-%COMP%], 
+.pill[data-mode=redirect][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-slate);
+  color: var(--%NS%hue-slate-text);
+}
+
+.pill[data-kind=markdown][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-sky);
+  color: var(--%NS%hue-sky-text);
+}
+
+.pill[data-kind=load][_ngcontent-%COMP%], 
+.pill[data-call=load][_ngcontent-%COMP%], 
+.pill[data-call=fn][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-teal);
+  color: var(--%NS%hue-teal-text);
+}
+
+.pill[data-mode=ssr][_ngcontent-%COMP%], 
+.pill[data-call=page][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-blue);
+  color: var(--%NS%hue-blue-text);
+}
+
+.pill[data-mode=ssg][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-green);
+  color: var(--%NS%hue-green-text);
+}
+
+.pill[data-mode=client][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-yellow);
+  color: var(--%NS%hue-yellow-text);
+}
+
+.pill[data-mode=cached][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-purple);
+  color: var(--%NS%hue-purple-text);
+}
+
+.pill[data-call=api][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-orange);
+  color: var(--%NS%hue-orange-text);
+}
+
+.pill[data-call=action][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-pink);
+  color: var(--%NS%hue-pink-text);
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+[data-tone=info].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
+  color: var(--%NS%hue-info-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.status[data-status=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.status[data-status=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.status[data-status=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.method[_ngcontent-%COMP%] {
+  min-width: 52px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  text-align: center;
+}
+
+.method[data-method=GET][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-sky) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-sky) 12%, transparent);
+  color: var(--%NS%hue-sky-text);
+}
+
+.method[data-method=POST][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.method[data-method=PUT][_ngcontent-%COMP%], 
+.method[data-method=PATCH][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.method[data-method=DELETE][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.request[_ngcontent-%COMP%] {
+  min-width: 260px;
+}
+
+.request[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+details[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  border-radius: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 160ms var(--%NS%ease);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+h2[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 0 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.card[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.response[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.response[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 10px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 3px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+}`]})},fie=(e,t)=>t.rule;function pie(e,t){if(e&1&&(P(0,`span`,6),G(1),F()),e&2){let e=U().$implicit;E(),K(e.items.length)}}function mie(e,t){if(e&1&&(P(0,`app-source-link`,10)(1,`span`,13),G(2),F(),G(3),F()),e&2){let e=U().$implicit,t=U(3);N(`file`,e.file),E(2),K(t.dir(e.file)),E(),K(t.base(e.file))}}function hie(e,t){if(e&1&&(P(0,`span`,11),G(1),F()),e&2){let e=U().$implicit;E(),K(e.path)}}function gie(e,t){if(e&1&&(P(0,`p`,12),G(1),F()),e&2){let e=U().$implicit;E(),K(e.message)}}function _ie(e,t){if(e&1&&(P(0,`li`),k(1,mie,4,3,`app-source-link`,10),k(2,hie,2,1,`span`,11),k(3,gie,2,1,`p`,12),F()),e&2){let e=t.$implicit;E(),A(e.file?1:-1),E(),A(e.path&&e.path!==e.file?2:-1),E(),A(e.message?3:-1)}}function vie(e,t){if(e&1&&(P(0,`li`)(1,`div`,3)(2,`span`,4),G(3),F(),P(4,`strong`,5),G(5),F(),k(6,pie,2,1,`span`,6),F(),P(7,`p`),G(8),F(),P(9,`ul`,7),j(10,_ie,4,3,`li`,null,ug),F(),P(12,`div`,8)(13,`strong`),G(14,`How to fix`),F(),G(15),F(),P(16,`span`,9),G(17),F()()),e&2){let e=t.$implicit,n=U(2);O(`data-tone`,n.tone(e.severity)),E(2),O(`data-tone`,n.tone(e.severity)),E(),K(e.severity),E(2),K(e.title),E(),A(e.items.length>1?6:-1),E(2),K(e.summary),E(2),M(e.items),E(5),q(` `,e.fix),E(2),K(e.rule)}}function yie(e,t){if(e&1&&(P(0,`p`,1),G(1),F(),P(2,`ul`,2),j(3,vie,18,8,`li`,null,fie),F()),e&2){let e=U();E(),J(` `,e.plural(e.findings().length,`issue`),` in `,e.plural(e.lintCards().length,`group`),`. Each card says what is wrong, where, and how to fix it. `),E(2),M(e.lintCards())}}function bie(e,t){e&1&&(P(0,`div`,0)(1,`strong`),G(2,`No Analog problems found.`),F(),G(3,` Routes, server files, prerender config and content all check out. `),F())}var xie=class e{page=b(N6);plural=cD;findings=this.page.findings;lintCards=this.page.lintCards;dir=k6;base=A6;tone(e){return e===`error`?`bad`:e===`warning`?`warn`:`info`}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appAnalogLint`,``]],decls:2,vars:1,consts:[[`data-tone`,`good`,`role`,`status`,1,`callout`],[1,`muted`],[1,`findings`],[1,`finding-head`],[1,`pill`],[1,`finding-title`],[1,`count`],[1,`where`],[1,`fix`],[1,`rule`,`mono`],[1,`file`,3,`file`],[1,`mono`,`path`],[1,`detail`],[1,`dir`]],template:function(e,t){e&1&&k(0,yie,5,2)(1,bie,4,0,`div`,0),e&2&&A(+!t.findings().length)},dependencies:[aM],styles:[`@charset "UTF-8";
+[_nghost-%COMP%] {
+  display: contents;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.empty-row[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td.empty-row[_ngcontent-%COMP%] {
+  background: transparent;
+}
+
+.empty-box[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  text-align: center;
+}
+
+.empty-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.empty-lead[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.nowrap[_ngcontent-%COMP%] {
+  white-space: nowrap;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.count[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  background: var(--%NS%border-strong);
+  color: var(--%NS%text);
+}
+
+.count[data-tone=warn][_ngcontent-%COMP%], 
+[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[data-tone=warn][_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.count[data-tone=bad][_ngcontent-%COMP%], 
+[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[data-tone=bad][_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.callout[_ngcontent-%COMP%] {
+  padding: 12px 16px;
+  border: 1px solid color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%hue-info) 8%, var(--%NS%surface));
+  line-height: 1.6;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.callout[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+}
+
+.callout[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+}
+
+.callout[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+}
+
+.callout[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.callout[_ngcontent-%COMP%]   strong.mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.chain[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(:last-child)::after {
+  content: "›";
+  margin-left: 2px;
+  color: var(--%NS%text-3);
+}
+
+.callout[_ngcontent-%COMP%]   .chips[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.plain[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding-left: 18px;
+}
+
+.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+td.nowrap[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  transition: background-color 160ms var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+tr.open[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+tr.dim[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.route[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.guide[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%mono);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.dir[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%], 
+.method[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.pill[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  padding: 3px 10px;
+  border: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chips[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
+  padding: 3px 10px;
+  font-size: 12px;
+}
+
+.pill.live[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, var(--%NS%surface));
+  color: var(--%NS%accent-text);
+}
+
+.pill[data-kind=layout][_ngcontent-%COMP%], 
+.pill[data-mode=redirect][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-slate);
+  color: var(--%NS%hue-slate-text);
+}
+
+.pill[data-kind=markdown][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-sky);
+  color: var(--%NS%hue-sky-text);
+}
+
+.pill[data-kind=load][_ngcontent-%COMP%], 
+.pill[data-call=load][_ngcontent-%COMP%], 
+.pill[data-call=fn][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-teal);
+  color: var(--%NS%hue-teal-text);
+}
+
+.pill[data-mode=ssr][_ngcontent-%COMP%], 
+.pill[data-call=page][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-blue);
+  color: var(--%NS%hue-blue-text);
+}
+
+.pill[data-mode=ssg][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-green);
+  color: var(--%NS%hue-green-text);
+}
+
+.pill[data-mode=client][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-yellow);
+  color: var(--%NS%hue-yellow-text);
+}
+
+.pill[data-mode=cached][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-purple);
+  color: var(--%NS%hue-purple-text);
+}
+
+.pill[data-call=api][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-orange);
+  color: var(--%NS%hue-orange-text);
+}
+
+.pill[data-call=action][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-pink);
+  color: var(--%NS%hue-pink-text);
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+[data-tone=info].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
+  color: var(--%NS%hue-info-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.status[data-status=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.status[data-status=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.status[data-status=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.method[_ngcontent-%COMP%] {
+  min-width: 52px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  text-align: center;
+}
+
+.method[data-method=GET][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-sky) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-sky) 12%, transparent);
+  color: var(--%NS%hue-sky-text);
+}
+
+.method[data-method=POST][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.method[data-method=PUT][_ngcontent-%COMP%], 
+.method[data-method=PATCH][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.method[data-method=DELETE][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.request[_ngcontent-%COMP%] {
+  min-width: 260px;
+}
+
+.request[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+details[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  border-radius: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 160ms var(--%NS%ease);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.findings[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.findings[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%] {
+  position: relative;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: inset 3px 0 0 var(--%NS%hue-info), var(--%NS%shadow);
+  transition: border-color 180ms var(--%NS%ease);
+}
+
+.findings[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.findings[_ngcontent-%COMP%]    > li[data-tone=bad][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%danger), var(--%NS%shadow);
+}
+
+.findings[_ngcontent-%COMP%]    > li[data-tone=warn][_ngcontent-%COMP%] {
+  box-shadow: inset 3px 0 0 var(--%NS%warn), var(--%NS%shadow);
+}
+
+.findings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  line-height: 1.55;
+}
+
+.findings[_ngcontent-%COMP%]    > li[_ngcontent-%COMP%]    > p[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.finding-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.finding-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.where[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 12px 0 0;
+  padding: 10px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  list-style: none;
+}
+
+.where[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+}
+
+.where[_ngcontent-%COMP%]   .detail[_ngcontent-%COMP%] {
+  flex-basis: 100%;
+  margin: 0;
+  color: var(--%NS%text-2);
+  overflow-wrap: anywhere;
+}
+
+.fix[_ngcontent-%COMP%] {
+  margin-top: 12px;
+  color: var(--%NS%text);
+  line-height: 1.55;
+}
+
+.fix[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--%NS%ok);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.rule[_ngcontent-%COMP%] {
+  display: block;
+  margin-top: 12px;
+  color: var(--%NS%text-3);
+  font-size: 12px;
+}`]})},Sie=()=>[`/`],Cie=(e,t)=>t.path,wie=(e,t)=>t.mode;function Tie(e,t){if(e&1&&G(0),e&2){let e=t.$implicit;q(` `,e,` `)}}function Eie(e,t){if(e&1&&(P(0,`p`,0),G(1,` The analog() options in vite.config could not be read in full, so these modes and the prerender plan may be incomplete. `),j(2,Tie,1,1,null,null,dg),F()),e&2){let e=U();E(2),M(e.plan().configPartial)}}function Die(e,t){if(e&1&&(P(0,`span`,6),G(1),F()),e&2){let e=t.$implicit;O(`data-mode`,e.mode),E(),J(``,e.label,` · `,e.count)}}function Oie(e,t){if(e&1&&(P(0,`div`,1),j(1,Die,2,3,`span`,6,wie),F()),e&2){let e=U();E(),M(e.modeCounts())}}function kie(e,t){e&1&&(P(0,`span`,14),G(1,`differs from config`),F())}function Aie(e,t){if(e&1&&(P(0,`div`,8)(1,`span`,12),G(2),F(),P(3,`span`,13),G(4),F(),k(5,kie,2,0,`span`,14),F()),e&2){let e=t,n=U().$implicit,r=U();E(),O(`data-status`,r.statusClass(e.status)),E(),K(e.status),E(2),J(``,e.render===`client`?`client only`:`server rendered`,` · `,e.ms,` ms`),E(),A(r.mismatch(n)?5:-1)}}function jie(e,t){e&1&&(P(0,`span`,9),G(1,`not requested yet`),F())}function Mie(e,t){e&1&&(P(0,`span`,15),G(1,`Checking…`),F())}function Nie(e,t){if(e&1&&(P(0,`span`,16),G(1),F()),e&2){let e=U();E(),K(e.error)}}function Pie(e,t){if(e&1&&(P(0,`span`,9),G(1),F()),e&2){let e=U(2);E(),K(e.note)}}function Fie(e,t){if(e&1&&(P(0,`div`,8)(1,`span`,6),G(2),F(),P(3,`span`,6),G(4),F(),k(5,Pie,2,1,`span`,9),F()),e&2){let e=U(),t=U(2);E(),O(`data-mode`,e.observed),E(),K(t.modeLabel(e.observed)),E(),O(`data-tone`,e.matches?`good`:`warn`),E(),K(e.matches?`fits the config`:`differs from config`),E(),A(e.note?5:-1)}}function Iie(e,t){if(e&1&&k(0,Mie,2,0,`span`,15)(1,Nie,2,1,`span`,16)(2,Fie,6,5,`div`,8),e&2){let e=t;A(e===`running`?0:e.error?1:2)}}function Lie(e,t){if(e&1&&(P(0,`app-source-link`,11)(1,`span`,17),G(2),F(),G(3),F()),e&2){let e=U().$implicit,t=U();N(`file`,e.file),E(2),K(t.dir(e.file)),E(),K(t.base(e.file))}}function Rie(e,t){if(e&1){let e=z();P(0,`tr`)(1,`td`,7),G(2),F(),P(3,`td`)(4,`div`,8)(5,`span`,6),G(6),F(),P(7,`span`,9),G(8),F()()(),P(9,`td`),k(10,Aie,6,5,`div`,8)(11,jie,2,0,`span`,9),F(),P(12,`td`),k(13,Iie,3,1),P(14,`button`,10),V(`click`,function(){let t=x(e).$implicit;return S(U().checkRender(t.path))}),G(15,` Check `),F()(),P(16,`td`),k(17,Lie,4,3,`app-source-link`,11),F()()}if(e&2){let e,n,r=t.$implicit,i=U();E(2),K(r.path),E(3),O(`data-mode`,r.mode),E(),K(i.modeLabel(r.mode)),E(2),K(r.reason),E(2),A((e=r.last)?10:11,e),E(3),A((n=i.checks()[r.path])?13:-1,n),E(),N(`disabled`,i.checks()[r.path]===`running`),O(`aria-label`,`Request `+r.path+` and check its render mode`),E(3),A(r.file?17:-1)}}function zie(e,t){e&1&&(P(0,`tr`)(1,`td`,18),G(2,` No page routes to render yet. Add a .page.ts file under src/app/pages. `),F()())}function Bie(e,t){e&1&&(P(0,`p`,19),G(1,`prerender.routes is a function, so the list is known only at build time.`),F())}function Vie(e,t){if(e&1&&(P(0,`span`,21),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function Hie(e,t){e&1&&(P(0,`span`,9),G(1,`default, nothing configured`),F())}function Uie(e,t){if(e&1&&(P(0,`span`,21),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function Wie(e,t){if(e&1&&(P(0,`dt`),G(1,`From routeRules`),F(),P(2,`dd`),j(3,Uie,2,1,`span`,21,dg),F()),e&2){let e=U(2);E(3),M(e.fromRules)}}function Gie(e,t){if(e&1&&(P(0,`span`,23),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function Kie(e,t){if(e&1&&(P(0,`dt`),G(1,`Static, not listed`),F(),P(2,`dd`),j(3,Gie,2,1,`span`,23,dg),F()),e&2){let e=U(2);E(3),M(e.staticMissing)}}function qie(e,t){if(e&1&&(P(0,`span`,21),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function Jie(e,t){if(e&1&&(P(0,`dt`),G(1,`Need explicit entries`),F(),P(2,`dd`),j(3,qie,2,1,`span`,21,dg),F()),e&2){let e=U(2);E(3),M(e.dynamic)}}function Yie(e,t){if(e&1&&(P(0,`span`,24),G(1),F()),e&2){let e=t.$implicit;E(),K(e)}}function Xie(e,t){if(e&1&&(G(0,` · missing `),j(1,Yie,2,1,`span`,24,dg)),e&2){let e=U(3);E(),M(e.notBuilt)}}function Zie(e,t){if(e&1&&(G(0),k(1,Xie,3,0)),e&2){let e=U(2);q(` `,U().plural(e.built.length,`page`),` in dist/analog/public `),E(),A(e.notBuilt.length?1:-1)}}function Qie(e,t){e&1&&(P(0,`span`,9),G(1,`no build yet`),F())}function $ie(e,t){if(e&1&&(P(0,`dl`,20)(1,`dt`),G(2,`Listed`),F(),P(3,`dd`),j(4,Vie,2,1,`span`,21,dg),k(6,Hie,2,0,`span`,9),F(),k(7,Wie,5,0),k(8,Kie,5,0),k(9,Jie,5,0),P(10,`dt`),G(11,`Build output`),F(),P(12,`dd`,22),k(13,Zie,2,2)(14,Qie,2,0,`span`,9),F()()),e&2){let e=U();E(4),M(e.listed??iv(5,Sie)),E(2),A(e.listed?-1:6),E(),A(e.fromRules?.length?7:-1),E(),A(e.staticMissing.length?8:-1),E(),A(e.dynamic.length?9:-1),E(4),A(e.built.length?13:14)}}function eae(e,t){e&1&&(P(0,`div`,4)(1,`h2`),G(2,`Prerender plan`),F(),k(3,Bie,2,0,`p`,19)(4,$ie,15,6,`dl`,20),F()),e&2&&(E(3),A(t.dynamicConfig?3:4))}var tae=class e{page=b(N6);plural=cD;rpc=this.page.rpc;plan=this.page.plan;renderRows=this.page.renderRows;checks=this.page.checks;dir=k6;base=A6;modeLabel=M6;statusClass=j6;modeCounts=X(()=>[`ssr`,`ssg`,`cached`,`client`,`redirect`].map(e=>({mode:e,label:C6[e],count:this.renderRows().filter(t=>t.mode===e).length})).filter(e=>e.count));mismatch(e){return!e.last?.render||e.mode===`redirect`?!1:e.mode===`client`?e.last.render!==`client`:e.last.render===`client`}async checkRender(e){this.checks.update(t=>({...t,[e]:`running`}));let t=await sT(this.rpc(),`analog-render-check`,e);this.checks.update(n=>({...n,[e]:t??{path:e,error:`No answer from the devtools server.`}}))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appAnalogRender`,``]],decls:22,vars:5,consts:[[`role`,`status`,1,`note`],[1,`chips`],[`role`,`region`,`aria-label`,`Render modes`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[1,`card`],[3,`rpc`],[1,`pill`],[1,`mono`,`path`],[1,`meta`],[1,`muted`,`small`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[1,`file`,3,`file`],[1,`status`],[1,`muted`,`small`,`tnum`],[`data-tone`,`warn`,1,`pill`],[`role`,`status`,1,`muted`,`small`],[`data-tone`,`bad`,1,`pill`],[1,`dir`],[`colspan`,`5`,1,`empty-row`],[1,`muted`],[1,`facts`],[1,`chip`,`mono`],[1,`tnum`],[`data-tone`,`warn`,1,`chip`,`mono`],[`data-tone`,`bad`,1,`chip`,`mono`]],template:function(e,t){if(e&1&&(k(0,Eie,4,0,`p`,0),k(1,Oie,3,0,`div`,1),P(2,`div`,2)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,3),G(7,`Route`),F(),P(8,`th`,3),G(9,`Configured`),F(),P(10,`th`,3),G(11,`Last request`),F(),P(12,`th`,3),G(13,`Dev server check`),F(),P(14,`th`,3),G(15,`File`),F()()(),P(16,`tbody`),j(17,Rie,18,9,`tr`,null,Cie,!1,zie,3,0,`tr`),F()()(),k(20,eae,5,1,`div`,4),I(21,`app-analog-build`,5)),e&2){let e;A(t.plan()?.configPartial?.length?0:-1),E(),A(t.modeCounts().length?1:-1),E(16),M(t.renderRows()),E(3),A((e=t.plan())?20:-1,e),E(),N(`rpc`,t.rpc())}},dependencies:[aM,t3],styles:[`[_nghost-%COMP%] {
+  display: contents;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.empty-row[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td.empty-row[_ngcontent-%COMP%] {
+  background: transparent;
+}
+
+.empty-box[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  text-align: center;
+}
+
+.empty-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.empty-lead[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.nowrap[_ngcontent-%COMP%] {
+  white-space: nowrap;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.explain[_ngcontent-%COMP%] {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+
+.filter[_ngcontent-%COMP%] {
+  flex: 0 1 240px;
+  min-width: 0;
+}
+
+@media (max-width: 560px) {
+  .filter[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+}
+.inline[_ngcontent-%COMP%], 
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.inline[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%], 
+.playground[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:not(.check) {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 13px;
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+  outline: none;
+}
+
+.method-select[_ngcontent-%COMP%] {
+  width: 112px;
+  font-family: var(--%NS%mono);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%control-border);
+}
+
+.btn[_ngcontent-%COMP%]:active {
+  transform: translateY(1px);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.ghost[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+td.actions[_ngcontent-%COMP%] {
+  width: 1%;
+  text-align: right;
+  vertical-align: middle;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[role=tab][_ngcontent-%COMP%]:focus-visible, 
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible, 
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:focus-within {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+td.nowrap[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  transition: background-color 160ms var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+tr.open[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+tr.dim[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.route[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.guide[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%mono);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.dir[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%], 
+.method[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.pill[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  padding: 3px 10px;
+  border: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chips[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
+  padding: 3px 10px;
+  font-size: 12px;
+}
+
+.pill.live[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, var(--%NS%surface));
+  color: var(--%NS%accent-text);
+}
+
+.pill[data-kind=layout][_ngcontent-%COMP%], 
+.pill[data-mode=redirect][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-slate);
+  color: var(--%NS%hue-slate-text);
+}
+
+.pill[data-kind=markdown][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-sky);
+  color: var(--%NS%hue-sky-text);
+}
+
+.pill[data-kind=load][_ngcontent-%COMP%], 
+.pill[data-call=load][_ngcontent-%COMP%], 
+.pill[data-call=fn][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-teal);
+  color: var(--%NS%hue-teal-text);
+}
+
+.pill[data-mode=ssr][_ngcontent-%COMP%], 
+.pill[data-call=page][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-blue);
+  color: var(--%NS%hue-blue-text);
+}
+
+.pill[data-mode=ssg][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-green);
+  color: var(--%NS%hue-green-text);
+}
+
+.pill[data-mode=client][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-yellow);
+  color: var(--%NS%hue-yellow-text);
+}
+
+.pill[data-mode=cached][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-purple);
+  color: var(--%NS%hue-purple-text);
+}
+
+.pill[data-call=api][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-orange);
+  color: var(--%NS%hue-orange-text);
+}
+
+.pill[data-call=action][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-pink);
+  color: var(--%NS%hue-pink-text);
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+[data-tone=info].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
+  color: var(--%NS%hue-info-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.status[data-status=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.status[data-status=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.status[data-status=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.method[_ngcontent-%COMP%] {
+  min-width: 52px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  text-align: center;
+}
+
+.method[data-method=GET][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-sky) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-sky) 12%, transparent);
+  color: var(--%NS%hue-sky-text);
+}
+
+.method[data-method=POST][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.method[data-method=PUT][_ngcontent-%COMP%], 
+.method[data-method=PATCH][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.method[data-method=DELETE][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.request[_ngcontent-%COMP%] {
+  min-width: 260px;
+}
+
+.request[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+details[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  border-radius: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 160ms var(--%NS%ease);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.calls-bar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.calls-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.calls-message[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+}
+
+.call-filters[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search[_ngcontent-%COMP%]   .field[_ngcontent-%COMP%] {
+  width: 100%;
+  padding-left: 34px;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+.call-filters[_ngcontent-%COMP%]   .check[_ngcontent-%COMP%] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.total[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+.segmented[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  justify-self: start;
+  margin: 0;
+  padding: 3px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 10px;
+  background: var(--%NS%bg);
+}
+
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 5px 12px;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--%NS%text-2);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.segmented[_ngcontent-%COMP%]   label.on[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
+}
+
+.segmented[_ngcontent-%COMP%]   label.on[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+h2[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 0 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.card[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.response[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.response[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 10px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 3px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+}`]})},nae=(e,t)=>t.id;function rae(e,t){if(e&1&&(L(0,`p`,9),G(1),R()),e&2){let e=U();E(),q(`Transforming `,e.file(),`…`)}}function iae(e,t){if(e&1&&(L(0,`p`,10),G(1),R()),e&2){let e=U();E(),K(e.error)}}function aae(e,t){if(e&1&&(L(0,`p`,11)(1,`a`,13),G(2,`Open in vite-plugin-inspect`),R()()),e&2){let e=U();E(),B(`href`,e.inspectUrl,Fu)}}function oae(e,t){e&1&&(L(0,`p`,8),G(1,`Clipped to the first 20,000 characters.`),R())}function sae(e,t){if(e&1&&(L(0,`li`)(1,`details`)(2,`summary`)(3,`span`,15),G(4),R(),L(5,`span`,16),G(6),R()(),L(7,`pre`,17),G(8),R(),k(9,oae,2,0,`p`,8),R()()),e&2){let e=t.$implicit;E(4),K(e.plugin),E(2),J(``,e.ms,` ms · `,e.size,` chars`),E(2),K(e.code),E(),A(e.truncated?9:-1)}}function cae(e,t){if(e&1&&(L(0,`p`,8),G(1),R()),e&2){let e=U(3);E(),q(``,e.unchanged(),` more plugins ran without changing it.`)}}function lae(e,t){if(e&1&&(L(0,`ol`,14),j(1,sae,10,5,`li`,null,ug),R(),k(3,cae,2,1,`p`,8)),e&2){let e=U(2);E(),M(e.changed()),E(2),A(e.unchanged()?3:-1)}}function uae(e,t){e&1&&(L(0,`p`,12),G(1,`No plugin changed this file.`),R())}function dae(e,t){if(e&1&&(L(0,`li`)(1,`span`,15),G(2),R(),L(3,`span`,19),G(4),R(),L(5,`span`,20),G(6),R()()),e&2){let e=t.$implicit;E(2),K(e.name),E(2),K(e.id),E(),O(`data-tone`,e.found?`good`:`warn`),E(),K(e.found?`in the output`:`not in the output`)}}function fae(e,t){if(e&1&&(L(0,`div`)(1,`h3`),G(2,`Server function ids`),R(),L(3,`ul`,18),j(4,dae,7,4,`li`,null,nae),R()()),e&2){let e=U(2);E(4),M(e.ids())}}function pae(e,t){if(e&1&&(L(0,`details`)(1,`summary`),G(2,`Code Vite serves`),R(),L(3,`pre`,17),G(4),R()()),e&2){let e=U();E(4),K(e.code)}}function mae(e,t){if(e&1&&(k(0,iae,2,1,`p`,10),k(1,aae,3,1,`p`,11),k(2,lae,4,1)(3,uae,2,0,`p`,12),k(4,fae,6,0,`div`),k(5,pae,5,1,`details`)),e&2){let e=t,n=U();A(e.error?0:-1),E(),A(e.inspectUrl?1:-1),E(),A(n.changed().length?2:e.error?-1:3),E(2),A(n.ids().length?4:-1),E(),A(e.code?5:-1)}}var hae=class e{rpc=$(null);file=$.required();serverFns=$([]);closed=xv();ssr=w(!1);trace=w(null);loading=w(!0);changed=X(()=>(this.trace()?.steps??[]).filter(e=>e.changed));unchanged=X(()=>(this.trace()?.steps.length??0)-this.changed().length);ids=X(()=>{let e=this.trace();return e?this.serverFns().filter(t=>t.file===e.file).map(t=>({...t,found:e.code.includes(t.id)})):[]});run=0;constructor(){T(()=>{let e=this.file(),t=this.ssr();Z(()=>void this.fetch(e,t))})}reload(){this.fetch(this.file(),this.ssr())}async fetch(e,t){let n=++this.run;this.loading.set(!0);let r=await sT(this.rpc(),`analog-transform`,{file:e,ssr:t});n===this.run&&(this.trace.set(r??{file:e,ssr:t,steps:[],code:``,error:`No answer from the devtools server.`}),this.loading.set(!1))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-transform`]],inputs:{rpc:[1,`rpc`],file:[1,`file`],serverFns:[1,`serverFns`]},outputs:{closed:`closed`},decls:17,vars:4,consts:[[`aria-labelledby`,`transform-heading`,1,`card`],[1,`row`,`head`],[`id`,`transform-heading`],[1,`file`,`grow`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[1,`muted`,`small`],[`role`,`status`,1,`muted`],[`data-tone`,`bad`,`role`,`alert`,1,`note`],[1,`small`],[1,`muted`],[`target`,`_blank`,`rel`,`noopener`,3,`href`],[1,`steps`],[1,`mono`],[1,`muted`,`small`,`tnum`],[1,`code`],[1,`plain`],[1,`mono`,`muted`],[1,`pill`]],template:function(e,t){if(e&1&&(L(0,`section`,0)(1,`div`,1)(2,`h2`,2),G(3,`Vite transform stack`),R(),L(4,`span`,3),G(5),R(),L(6,`label`,4)(7,`input`,5),H(`change`,function(){return t.ssr.set(!t.ssr())}),R(),G(8,` Server build (SSR)`),R(),L(9,`button`,6),H(`click`,function(){return t.reload()}),G(10,` Run again `),R(),L(11,`button`,7),H(`click`,function(){return t.closed.emit()}),G(12,`Close`),R()(),L(13,`p`,8),G(14,` Transforms the file again on the dev server and lists each plugin that changed it, in order. `),R(),k(15,rae,2,1,`p`,9)(16,mae,6,5),R()),e&2){let e;E(5),K(t.file()),E(2),B(`checked`,t.ssr()),E(2),B(`disabled`,t.loading()),E(6),A(t.loading()?15:(e=t.trace())?16:-1,e)}},styles:[`h2[_ngcontent-%COMP%], 
+h3[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.danger[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 480px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.path[_ngcontent-%COMP%], 
+.file[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%], 
+[data-status=good].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%], 
+[data-status=warn].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%], 
+[data-status=bad].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.note[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.note[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 2px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+summary[_ngcontent-%COMP%] {
+  cursor: pointer;
+  color: var(--%NS%text-2);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+@media (max-width: 560px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+[_nghost-%COMP%] {
+  display: block;
+}
+
+.steps[_ngcontent-%COMP%], 
+.plain[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding-left: 22px;
+}
+
+.plain[_ngcontent-%COMP%] {
+  padding: 0;
+  list-style: none;
+}
+
+.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+summary[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+details[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {
+  margin-top: 6px;
+}
+
+a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent-text, var(--%NS%accent));
+}
+
+a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},gae=()=>[],_ae=(e,t)=>t.route.id,vae=(e,t)=>t.id,yae=(e,t)=>t[0];function bae(e,t){e&1&&(P(0,`div`,7),G(1),F()),e&2&&(E(),K(t))}function xae(e,t){if(e&1&&(P(0,`app-source-link`,17),G(1),F()),e&2){let e=U().$implicit,t=U(3);N(`file`,e.file),E(),K(t.short(e.file))}}function Sae(e,t){if(e&1&&(P(0,`span`,14),G(1),F()),e&2){let e=U().$implicit;E(),K(e.fullPath)}}function Cae(e,t){if(e&1&&(P(0,`li`),k(1,xae,2,2,`app-source-link`,17)(2,Sae,2,1,`span`,14),P(3,`span`,18),G(4),F()()),e&2){let e=t.$implicit;E(),A(e.file?1:2),E(2),O(`data-kind`,e.kind),E(),K(e.kind)}}function wae(e,t){if(e&1&&(P(0,`span`,19),G(1),F()),e&2){let e=t.$implicit;E(),J(``,e[0],` = `,e[1])}}function Tae(e,t){if(e&1&&(P(0,`div`,16),j(1,wae,2,2,`span`,19,yae),F()),e&2){let e=U(2),t=U();E(),M(t.paramList(e.match.params))}}function Eae(e,t){if(e&1&&(P(0,`strong`,14),G(1),F(),G(2,` renders `),P(3,`ol`,15),j(4,Cae,5,3,`li`,null,vae),F(),k(6,Tae,3,0,`div`,16)),e&2){let e=U(),t=U();E(),K(e.url),E(3),M(e.match.chain),E(2),A(t.paramList(e.match.params).length?6:-1)}}function Dae(e,t){if(e&1&&(P(0,`app-source-link`,17),G(1),F()),e&2){let e=U().$implicit,t=U(4);N(`file`,e.file),E(),K(t.short(e.file))}}function Oae(e,t){if(e&1&&(P(0,`span`,14),G(1),F()),e&2){let e=U().$implicit;E(),K(e.path)}}function kae(e,t){if(e&1&&(P(0,`li`),k(1,Dae,2,2,`app-source-link`,17)(2,Oae,2,1,`span`,14),P(3,`span`,21),G(4),F()()),e&2){let e=t.$implicit;E(),A(e.file?1:2),E(3),K(e.reason)}}function Aae(e,t){if(e&1&&(P(0,`ul`,20),j(1,kae,5,2,`li`,null,ug),F()),e&2){let e=U(2);E(),M(e.match.rejected.slice(0,5))}}function jae(e,t){if(e&1&&(P(0,`strong`,14),G(1),F(),G(2,` matches no file route. Angular throws NG04002 "Cannot match any routes". `),k(3,Aae,3,0,`ul`,20)),e&2){let e=U();E(),K(e.url),E(2),A(e.match.rejected.length?3:-1)}}function Mae(e,t){if(e&1&&(P(0,`div`,8),k(1,Eae,7,2)(2,jae,4,2),F()),e&2){let e=t;O(`data-tone`,e.match.matched?`good`:`bad`),E(),A(e.match.matched?1:2)}}function Nae(e,t){e&1&&(P(0,`span`,23),G(1,`└`),F())}function Pae(e,t){if(e&1&&(P(0,`span`,25),G(1),F()),e&2){let e=U().$implicit,t=U();E(),K(t.openText(e.route))}}function Fae(e,t){if(e&1&&(P(0,`app-source-link`,26)(1,`span`,32),G(2),F(),G(3),F()),e&2){let e=U().$implicit,t=U();N(`file`,e.route.file),E(2),K(t.dir(e.route.file)),E(),K(t.base(e.route.file))}}function Iae(e,t){e&1&&(P(0,`span`,21),G(1,`folder only`),F())}function Lae(e,t){if(e&1&&(P(0,`span`,28),G(1),F()),e&2){let e=t.$implicit;E(),q(``,e,`()`)}}function Rae(e,t){if(e&1&&(P(0,`span`,29),G(1),F()),e&2){let e=U().$implicit;E(),q(`"`,e.route.title,`"`)}}function zae(e,t){if(e&1&&(P(0,`span`,19),G(1),F()),e&2){let e=U().$implicit;E(),K(e)}}function Bae(e,t){if(e&1&&k(0,zae,2,1,`span`,19),e&2){let e=t.$implicit;A(e===`title`?-1:0)}}function Vae(e,t){if(e&1){let e=z();P(0,`button`,33),V(`click`,function(){x(e);let t=U().$implicit;return S(U().showTransform(t.route.file))}),G(1,` Transform `),F()}if(e&2){let e=U().$implicit,t=U();O(`aria-label`,`Show the Vite transform stack of `+e.route.file)(`aria-pressed`,t.transformFile()===e.route.file)}}function Hae(e,t){if(e&1&&(P(0,`tr`)(1,`td`)(2,`div`,22),k(3,Nae,2,0,`span`,23),P(4,`span`,24),G(5),F(),P(6,`span`,18),G(7),F(),k(8,Pae,2,1,`span`,25),F()(),P(9,`td`),k(10,Fae,4,3,`app-source-link`,26)(11,Iae,2,0,`span`,21),F(),P(12,`td`)(13,`div`,27),j(14,Lae,2,1,`span`,28,dg),F()(),P(16,`td`),k(17,Rae,2,1,`span`,29),j(18,Bae,1,1,null,null,dg),F(),P(20,`td`,30),k(21,Vae,2,2,`button`,31),F()()),e&2){let e=t.$implicit,n=U();W(`open`,n.isOpen(e.route))(`dim`,e.route.kind===`group`||e.route.kind===`implicit`),E(2),f_(`padding-left`,e.depth*16,`px`),E(),A(e.depth?3:-1),E(2),K(e.route.fullPath),E(),O(`data-kind`,e.route.kind),E(),K(n.kindText(e.route)),E(),A(n.isOpen(e.route)?8:-1),E(2),A(e.route.file?10:11),E(4),M(n.serverExports(e.route)),E(3),A(e.route.title?17:-1),E(),M(e.route.routeMeta??iv(14,gae)),E(3),A(e.route.file&&e.route.kind!==`markdown`?21:-1)}}function Uae(e,t){e&1&&G(0,` No route matches the filter. Try part of a path or a file name. `)}function Wae(e,t){e&1&&G(0,` No file routes yet. Add a .page.ts file under src/app/pages. `)}function Gae(e,t){if(e&1&&(P(0,`tr`)(1,`td`,34),k(2,Uae,1,0)(3,Wae,1,0),F()()),e&2){let e=U();E(2),A(e.filter().trim()?2:3)}}function Kae(e,t){if(e&1){let e=z();P(0,`app-analog-transform`,35),V(`closed`,function(){let t=x(e);return S(U().closeTransform(t))}),F()}if(e&2){let e=U();N(`rpc`,e.rpc())(`file`,t)(`serverFns`,e.serverFns())}}var qae=class e{page=b(N6);host=b(Rl);rpc=this.page.rpc;serverFns=this.page.serverFns;filter=this.page.filter;testUrl=this.page.testUrl;explained=this.page.explained;explainError=this.page.explainError;explaining=this.page.explaining;transformFile=this.page.transformFile;short=O6;dir=k6;base=A6;routeRows=X(()=>{let e=this.filter().trim().toLowerCase();return e?this.page.allRoutes().filter(t=>t.route.fullPath.toLowerCase().includes(e)||!!t.route.file?.toLowerCase().includes(e)):this.page.allRoutes()});isOpen(e){return this.page.isOpen(e)}openText(e){return this.page.openText(e)}kindText(e){return e.catchAll?e.catchAll===`optional`?`optional catch-all`:`catch-all`:e.kind===`implicit`?`folder`:e.kind}serverExports(e){return(e.serverExports??[]).filter(e=>e===`load`||e===`action`)}paramList(e){return Object.entries(e)}showTransform(e){this.transformFile.set(this.transformFile()===e?null:e)}closeTransform(e){this.transformFile.set(null),this.refocus(`Show the Vite transform stack of ${e}`)}refocus(e){queueMicrotask(()=>this.host.nativeElement.querySelector(`button[aria-label="${CSS.escape(e)}"]`)?.focus())}async explain(){let e=this.testUrl().trim();if(!e){this.explained.set(null),this.explainError.set(`Type a URL to explain, for example /products/42.`);return}this.explaining.set(!0),this.explainError.set(``);try{let t=await oT(this.rpc(),`analog-explain-url`,e);if(!t)throw Error(`The devtools server did not answer`);this.explained.set({url:e,match:t})}catch(t){let n=String(t?.message||`The devtools server did not answer`);this.explained.set(null),this.explainError.set(`Could not explain ${e}. ${n.replace(/\.?$/,`.`)}`)}finally{this.explaining.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appAnalogRoutes`,``]],decls:31,vars:7,consts:[[1,`toolbar`],[1,`inline`,`explain`,3,`submit`],[`for`,`analog-url`],[`id`,`analog-url`,`type`,`text`,`placeholder`,`/products/42`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`inputId`,`route-filter`,`placeholder`,`Filter by path or file`,`saveKey`,`analog-routes`,1,`filter`,3,`valueChange`,`value`],[`role`,`status`,1,`explain-result`],[`data-tone`,`bad`,1,`callout`],[1,`callout`],[`role`,`region`,`aria-label`,`File routes`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[1,`sr-only`],[3,`open`,`dim`],[3,`rpc`,`file`,`serverFns`],[1,`mono`],[1,`chain`],[1,`chips`],[1,`mono`,3,`file`],[1,`pill`],[1,`chip`,`mono`],[1,`plain`],[1,`muted`],[1,`route`],[`aria-hidden`,`true`,1,`guide`],[1,`mono`,`path`],[1,`pill`,`live`],[1,`file`,3,`file`],[1,`meta`],[`data-kind`,`load`,1,`pill`],[1,`chip`],[1,`actions`],[`type`,`button`,1,`btn`,`ghost`],[1,`dir`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`colspan`,`5`,1,`empty-row`],[3,`closed`,`rpc`,`file`,`serverFns`]],template:function(e,t){if(e&1&&(P(0,`div`,0)(1,`form`,1),V(`submit`,function(e){return e.preventDefault(),t.explain()}),P(2,`label`,2),G(3,`Test a URL`),F(),P(4,`input`,3),V(`input`,function(e){return t.testUrl.set(e.target.value)}),F(),P(5,`button`,4),G(6),F()(),P(7,`app-search-field`,5),U_(`valueChange`,function(e){return H_(t.filter,e)||(t.filter=e),e}),F()(),P(8,`div`,6),k(9,bae,2,1,`div`,7)(10,Mae,3,2,`div`,8),F(),P(11,`div`,9)(12,`table`)(13,`thead`)(14,`tr`)(15,`th`,10),G(16,`Route`),F(),P(17,`th`,10),G(18,`File`),F(),P(19,`th`,10),G(20,`Data`),F(),P(21,`th`,10),G(22,`Route meta`),F(),P(23,`th`,10)(24,`span`,11),G(25,`Actions`),F()()()(),P(26,`tbody`),j(27,Hae,22,15,`tr`,12,_ae,!1,Gae,4,1,`tr`),F()()(),k(30,Kae,1,3,`app-analog-transform`,13)),e&2){let e,n;E(4),N(`value`,t.testUrl()),E(),N(`disabled`,t.explaining()),E(),q(` `,t.explaining()?`Explaining…`:`Explain`,` `),E(),V_(`value`,t.filter),E(2),A((e=t.explainError())?9:(e=t.explained())?10:-1,e),E(18),M(t.routeRows()),E(3),A((n=t.transformFile())?30:-1,n)}},dependencies:[iD,aM,hae],styles:[`@charset "UTF-8";
+[_nghost-%COMP%] {
+  display: contents;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.empty-row[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td.empty-row[_ngcontent-%COMP%] {
+  background: transparent;
+}
+
+.empty-box[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  text-align: center;
+}
+
+.empty-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.empty-lead[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.nowrap[_ngcontent-%COMP%] {
+  white-space: nowrap;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.explain[_ngcontent-%COMP%] {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+
+.filter[_ngcontent-%COMP%] {
+  flex: 0 1 240px;
+  min-width: 0;
+}
+
+@media (max-width: 560px) {
+  .filter[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+}
+.inline[_ngcontent-%COMP%], 
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.inline[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%], 
+.playground[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:not(.check) {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 13px;
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+  outline: none;
+}
+
+.method-select[_ngcontent-%COMP%] {
+  width: 112px;
+  font-family: var(--%NS%mono);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%control-border);
+}
+
+.btn[_ngcontent-%COMP%]:active {
+  transform: translateY(1px);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.ghost[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+td.actions[_ngcontent-%COMP%] {
+  width: 1%;
+  text-align: right;
+  vertical-align: middle;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[role=tab][_ngcontent-%COMP%]:focus-visible, 
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible, 
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:focus-within {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.callout[_ngcontent-%COMP%] {
+  padding: 12px 16px;
+  border: 1px solid color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%hue-info) 8%, var(--%NS%surface));
+  line-height: 1.6;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.callout[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+}
+
+.callout[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+}
+
+.callout[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+}
+
+.callout[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.callout[_ngcontent-%COMP%]   strong.mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.chain[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(:last-child)::after {
+  content: "›";
+  margin-left: 2px;
+  color: var(--%NS%text-3);
+}
+
+.callout[_ngcontent-%COMP%]   .chips[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.plain[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding-left: 18px;
+}
+
+.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+td.nowrap[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  transition: background-color 160ms var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+tr.open[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+tr.dim[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.route[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.guide[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%mono);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.dir[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%], 
+.method[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.pill[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  padding: 3px 10px;
+  border: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chips[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
+  padding: 3px 10px;
+  font-size: 12px;
+}
+
+.pill.live[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, var(--%NS%surface));
+  color: var(--%NS%accent-text);
+}
+
+.pill[data-kind=layout][_ngcontent-%COMP%], 
+.pill[data-mode=redirect][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-slate);
+  color: var(--%NS%hue-slate-text);
+}
+
+.pill[data-kind=markdown][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-sky);
+  color: var(--%NS%hue-sky-text);
+}
+
+.pill[data-kind=load][_ngcontent-%COMP%], 
+.pill[data-call=load][_ngcontent-%COMP%], 
+.pill[data-call=fn][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-teal);
+  color: var(--%NS%hue-teal-text);
+}
+
+.pill[data-mode=ssr][_ngcontent-%COMP%], 
+.pill[data-call=page][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-blue);
+  color: var(--%NS%hue-blue-text);
+}
+
+.pill[data-mode=ssg][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-green);
+  color: var(--%NS%hue-green-text);
+}
+
+.pill[data-mode=client][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-yellow);
+  color: var(--%NS%hue-yellow-text);
+}
+
+.pill[data-mode=cached][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-purple);
+  color: var(--%NS%hue-purple-text);
+}
+
+.pill[data-call=api][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-orange);
+  color: var(--%NS%hue-orange-text);
+}
+
+.pill[data-call=action][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-pink);
+  color: var(--%NS%hue-pink-text);
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+[data-tone=info].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
+  color: var(--%NS%hue-info-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.status[data-status=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.status[data-status=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.status[data-status=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.method[_ngcontent-%COMP%] {
+  min-width: 52px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  text-align: center;
+}
+
+.method[data-method=GET][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-sky) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-sky) 12%, transparent);
+  color: var(--%NS%hue-sky-text);
+}
+
+.method[data-method=POST][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.method[data-method=PUT][_ngcontent-%COMP%], 
+.method[data-method=PATCH][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.method[data-method=DELETE][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.request[_ngcontent-%COMP%] {
+  min-width: 260px;
+}
+
+.request[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+details[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  border-radius: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 160ms var(--%NS%ease);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}`]})},Jae=(e,t)=>t.id,Yae=(e,t)=>t[0];function Xae(e,t){if(e&1){let e=z();P(0,`div`,2)(1,`span`,17),G(2,`Route`),F(),P(3,`app-select`,18),V(`valueChange`,function(t){return x(e),S(U().pick(t))}),F()()}if(e&2){let e=U();E(3),N(`options`,e.routeOptions())(`value`,e.routeKey())}}function Zae(e,t){if(e&1&&(G(0,` Sends `),P(1,`span`,19),G(2),F()),e&2){let e=U();E(2),K(e.url())}}function Qae(e,t){if(e&1&&(P(0,`p`,8),G(1),F()),e&2){let e=U();E(),K(e.callsOff)}}function $ae(e,t){if(e&1&&(P(0,`p`,9),G(1),F()),e&2){let e=U();E(),q(` Tick "This request can change data on the dev server" below to send a `,e.method(),` request. `)}}function eoe(e,t){if(e&1){let e=z();P(0,`div`,2)(1,`label`,21),G(2),F(),P(3,`input`,22),V(`input`,function(t){let n=x(e).$implicit;return S(U(2).setParam(n,t.target.value))}),F()()}if(e&2){let e=t.$implicit,n=t.$index,r=U(2);E(),N(`for`,`param-`+n),E(),K(e===`**`?`rest of the path`:e),E(),N(`id`,`param-`+n)(`value`,r.paramValues()[e]??``)}}function toe(e,t){if(e&1&&(P(0,`fieldset`,10)(1,`legend`,20),G(2,`Path params`),F(),j(3,eoe,4,4,`div`,2,dg),F()),e&2){let e=U();E(3),M(e.params())}}function noe(e,t){if(e&1&&(P(0,`span`,23),G(1),F()),e&2){let e=U().$implicit,t=U();E(),K(t.pairs(e).length)}}function roe(e,t){if(e&1){let e=z();P(0,`div`,24)(1,`label`,25),G(2),F(),P(3,`input`,26),V(`input`,function(t){let n=x(e).$implicit,r=U().$implicit;return S(U().editPair(r,n.id,`key`,t.target.value))}),F(),P(4,`label`,25),G(5),F(),P(6,`input`,27),V(`input`,function(t){let n=x(e).$implicit,r=U().$implicit;return S(U().editPair(r,n.id,`value`,t.target.value))}),F(),P(7,`button`,12),V(`click`,function(){let t=x(e).$implicit,n=U().$implicit;return S(U().removePair(n,t.id))}),G(8,` Remove `),F()()}if(e&2){let e=t.$implicit,n=t.$index,r=U().$implicit,i=U();E(),N(`for`,r+`-key-`+e.id),E(),J(``,i.labels[r].key,` `,n+1,` name`),E(),N(`id`,r+`-key-`+e.id)(`placeholder`,i.labels[r].key)(`value`,e.key),E(),N(`for`,r+`-value-`+e.id),E(),J(``,i.labels[r].key,` `,n+1,` value`),E(),N(`id`,r+`-value-`+e.id)(`value`,e.value),E(),O(`aria-label`,`Remove `+i.labels[r].key.toLowerCase()+` `+(n+1))}}function ioe(e,t){if(e&1){let e=z();P(0,`details`,11)(1,`summary`),G(2),k(3,noe,2,1,`span`,23),F(),j(4,roe,9,12,`div`,24,Jae),P(6,`button`,12),V(`click`,function(){let t=x(e).$implicit;return S(U().addPair(t))}),G(7),F()()}if(e&2){let e=t.$implicit,n=U();N(`open`,n.pairs(e).length>0),E(2),q(` `,n.labels[e].title,` `),E(),A(n.pairs(e).length?3:-1),E(),M(n.pairs(e)),E(3),q(` `,n.labels[e].add,` `)}}function aoe(e,t){if(e&1){let e=z();P(0,`label`,28),G(1,`JSON body`),F(),P(2,`textarea`,29),V(`input`,function(t){return x(e),S(U().body.set(t.target.value))}),F(),P(3,`label`,30)(4,`input`,31),V(`change`,function(){x(e);let t=U();return S(t.confirmSend.set(!t.confirmSend()))}),F(),G(5,` This request can change data on the dev server`),F()}if(e&2){let e=U();E(2),N(`value`,e.body()),E(2),N(`checked`,e.confirmSend())}}function ooe(e,t){if(e&1&&(P(0,`p`,14),G(1),F()),e&2){let e=U();E(),J(`Sending `,e.method(),` `,e.url(),`…`)}}function soe(e,t){if(e&1&&(P(0,`div`,2)(1,`span`,32),G(2,`Refused`),F(),P(3,`span`),G(4),F()()),e&2){let e=U();E(4),K(e.error)}}function coe(e,t){e&1&&G(0),e&2&&q(` · headers after `,U(2).headersMs,` ms `)}function loe(e,t){if(e&1&&(P(0,`dt`,19),G(1),F(),P(2,`dd`,19),G(3),F()),e&2){let e=t.$implicit;E(),K(e[0]),E(2),K(e[1])}}function uoe(e,t){if(e&1&&(P(0,`details`)(1,`summary`),G(2),F(),P(3,`dl`,36),j(4,loe,4,2,null,null,Yae),F()()),e&2){let e=U(2),t=U();E(2),q(`Response headers (`,t.headerList(e).length,`)`),E(2),M(t.headerList(e))}}function doe(e,t){if(e&1&&(P(0,`div`,2)(1,`span`,33),G(2),F(),P(3,`span`,34),G(4),k(5,coe,1,1),G(6),F()(),k(7,uoe,6,1,`details`),P(8,`pre`,35),G(9),F()),e&2){let e=U(),t=U();E(),O(`data-status`,t.statusClass(e.status??0)),E(),K(e.status),E(2),q(``,e.ms,` ms total `),E(),A(e.headersMs===void 0?-1:5),E(),J(` · `,t.sizeText(e.size),` · `,e.type||`no content type`),E(),A(t.headerList(e).length?7:-1),E(2),K(t.pretty(e.body??``))}}function foe(e,t){e&1&&(P(0,`div`,15),k(1,soe,5,1,`div`,2)(2,doe,10,8),F()),e&2&&(E(),A(t.error?1:2))}function poe(e,t){if(e&1&&(P(0,`span`,39),G(1),F()),e&2){let e=U().$implicit;E(),q(``,e.ms,` ms`)}}function moe(e,t){if(e&1){let e=z();P(0,`li`,2)(1,`span`,33),G(2),F(),P(3,`span`,38),G(4),F(),k(5,poe,2,1,`span`,39),P(6,`button`,12),V(`click`,function(){let t=x(e).$implicit;return S(U(2).restore(t))}),G(7,` Load `),F()()}if(e&2){let e=t.$implicit,n=U(2);E(),O(`data-status`,e.error?`bad`:n.statusClass(e.status??0)),E(),K(e.error?`Refused`:e.status),E(2),J(``,e.method,` `,e.url),E(),A(e.ms===void 0?-1:5),E(),O(`aria-label`,`Load `+e.method+` `+e.url+` again`)}}function hoe(e,t){if(e&1&&(P(0,`div`,16)(1,`h3`),G(2),F(),P(3,`ul`,37),j(4,moe,8,6,`li`,2,ug),F()()),e&2){let e=U();E(2),q(`History for `,e.template().trim()||`/`),E(2),M(e.history())}}var goe=10,_oe={query:{title:`Query`,key:`Name`,add:`Add query parameter`},headers:{title:`Headers`,key:`Header`,add:`Add header`},cookies:{title:`Cookies`,key:`Cookie`,add:`Add cookie`}},voe=0;function yoe(e){let t=Array.from(e.matchAll(/:(\w+)/g),e=>e[1]);return/(^|\/)\*\*(\/|$)/.test(e)&&t.push(`**`),[...new Set(t)]}function boe(e,t){return e.replace(/:(\w+)/g,(e,n)=>t[n]?encodeURIComponent(t[n]):e).replace(/(^|\/)\*\*(?=\/|$)/,(e,n)=>t[`**`]?`${n}${t[`**`].split(`/`).map(encodeURIComponent).join(`/`)}`:e)}function f8(e){return`'${e.replace(/'/g,`'\\''`)}'`}var xoe=class e{rpc=$(null);routes=$([]);target=$(null);origin=$(``);canCall=X(()=>OT(this.rpc(),`analog`));callsOff=Mw(`analog`);labels=_oe;pairLists=[`query`,`headers`,`cookies`];methodOptions=[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`].map(e=>({value:e,label:e}));method=w(`GET`);template=w(``);paramValues=w({});query=w([]);headers=w([]);cookies=w([]);body=w(``);response=w(null);sending=w(!1);copied=w(``);historyByRoute=w({});params=X(()=>yoe(this.template()));url=X(()=>{let e=boe(this.template().trim(),this.paramValues()),t=new URLSearchParams;for(let e of this.query())e.key.trim()&&t.append(e.key.trim(),e.value);let n=t.toString();return n?`${e}${e.includes(`?`)?`&`:`?`}${n}`:e});confirmSend=Q({source:()=>`${this.method()} ${this.url()}`,computation:()=>!1});needsConfirm=X(()=>this.method()!==`GET`&&!this.confirmSend());canSend=X(()=>this.canCall()&&!this.sending()&&!this.needsConfirm()&&!!this.template().trim());sendHintId=X(()=>this.canCall()?this.needsConfirm()?`analog-confirm-hint`:null:`analog-calls-off`);history=X(()=>this.historyByRoute()[this.template().trim()]??[]);routeOptions=X(()=>this.routes().map(e=>({value:`${e.method} ${e.path}`,label:`${e.method} ${e.path}`})));routeKey=X(()=>{let e=`${this.method()} ${this.template().trim()}`;return this.routeOptions().some(t=>t.value===e)?e:null});lastNonce=-1;constructor(){T(()=>{let e=this.target();e&&e.nonce!==this.lastNonce&&(this.lastNonce=e.nonce,Z(()=>this.load(e.route)))})}load(e){this.method.set(e.method===`ANY`?`GET`:e.method),this.template.set(e.path),this.paramValues.set({}),this.confirmSend.set(!1),this.response.set(null),queueMicrotask(()=>{let e=this.params().length?`param-0`:`api-path`;document.getElementById(e)?.focus()})}pick(e){let t=this.routes().find(t=>`${t.method} ${t.path}`===e);t&&this.load(t)}setParam(e,t){this.paramValues.update(n=>({...n,[e]:t}))}pairs(e){return this[e]()}addPair(e){let t=voe++;this[e].update(e=>[...e,{id:t,key:``,value:``}]),queueMicrotask(()=>document.getElementById(`${e}-key-${t}`)?.focus())}editPair(e,t,n,r){this[e].update(e=>e.map(e=>e.id===t?{...e,[n]:r}:e))}removePair(e,t){this[e].update(e=>e.filter(e=>e.id!==t))}record(e){let t={};for(let n of this[e]())n.key.trim()&&(t[n.key.trim()]=n.value);return Object.keys(t).length?t:void 0}parsedBody(){if(this.method()===`GET`||!this.body().trim())return{};try{return{body:JSON.parse(this.body())}}catch{return{error:`The body is not valid JSON.`}}}snapshot(){return{method:this.method(),template:this.template().trim(),params:{...this.paramValues()},query:this.query(),headers:this.headers(),cookies:this.cookies(),body:this.body()}}restore(e){let t=e.snapshot;this.method.set(t.method),this.template.set(t.template),this.paramValues.set({...t.params}),this.query.set(t.query),this.headers.set(t.headers),this.cookies.set(t.cookies),this.body.set(t.body),this.response.set(null)}async send(){let e=this.url();if(!this.template().trim()||this.sending()||this.needsConfirm())return;let t=this.parsedBody();if(t.error){this.response.set({error:t.error});return}let n=this.snapshot();this.response.set(null),this.sending.set(!0);try{let r=await sT(this.rpc(),`analog-call-api`,{method:this.method(),path:e,body:t.body,headers:this.record(`headers`),cookies:this.record(`cookies`),confirm:this.confirmSend()})??{error:`No answer from the devtools server.`};this.response.set(r);let i={at:Date.now(),url:e,method:n.method,snapshot:n,...r.error?{error:r.error}:{status:r.status,ms:r.ms}};this.historyByRoute.update(e=>({...e,[n.template]:[i,...e[n.template]??[]].slice(0,goe)}))}finally{this.sending.set(!1),this.confirmSend.set(!1)}}command(e){let t=`${this.origin()||`http://localhost:5173`}${this.url()}`,n={...this.record(`headers`)},r=this.record(`cookies`);r&&(n.cookie=Object.entries(r).map(([e,t])=>`${e}=${t}`).join(`; `));let i=this.method()!==`GET`&&this.body().trim()?this.body().trim():void 0;if(i&&(n[`content-type`]??=`application/json`),e===`curl`)return[`curl -X ${this.method()} ${f8(t)}`,...Object.entries(n).map(([e,t])=>`-H ${f8(`${e}: ${t}`)}`),...i?[`--data ${f8(i)}`]:[]].join(` \\
+  `);let a={method:this.method()};return Object.keys(n).length&&(a.headers=n),i&&(a.body=i),`await fetch(${JSON.stringify(t)}, ${JSON.stringify(a,null,2)});`}async copy(e){try{await navigator.clipboard.writeText(this.command(e)),this.copied.set(e===`curl`?`Copied as curl.`:`Copied as fetch.`)}catch{this.copied.set(`Could not copy. The browser blocked the clipboard.`)}}headerList(e){return Object.entries(e.headers??{})}sizeText(e){return e===void 0?`size unknown`:e<1024?`${e} B`:`${(e/1024).toFixed(1)} kB`}statusClass(e){return e>=500||e===0?`bad`:e>=400?`warn`:`good`}pretty(e){try{return JSON.stringify(JSON.parse(e),null,2)}catch{return e}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-playground`]],inputs:{rpc:[1,`rpc`],routes:[1,`routes`],target:[1,`target`],origin:[1,`origin`]},decls:36,vars:14,consts:[[1,`card`,`playground`,3,`submit`],[`id`,`playground-heading`],[1,`row`],[`ariaLabel`,`Method`,1,`method-select`,3,`valueChange`,`options`,`value`],[`for`,`api-path`,1,`sr-only`],[`id`,`api-path`,`type`,`text`,`placeholder`,`/api/v1/products/:id`,`aria-describedby`,`api-path-hint`,1,`field`,`grow`,`mono`,3,`input`,`value`],[`type`,`submit`,1,`btn`,`primary`,3,`disabled`],[`id`,`api-path-hint`,1,`muted`,`small`],[`id`,`analog-calls-off`,1,`muted`],[`id`,`analog-confirm-hint`,1,`muted`],[1,`group`],[1,`group`,3,`open`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[`role`,`status`,1,`muted`,`small`],[`role`,`status`,1,`muted`],[`role`,`status`,1,`response`],[1,`history`],[`id`,`playground-route-label`,1,`label`],[`labelledBy`,`playground-route-label`,`placeholder`,`Pick an API route`,1,`grow`,3,`valueChange`,`options`,`value`],[1,`mono`],[1,`label`],[1,`pair-key`,`mono`,3,`for`],[`type`,`text`,1,`field`,`grow`,`mono`,3,`input`,`id`,`value`],[1,`pill`],[1,`row`,`pair`],[1,`sr-only`,3,`for`],[`type`,`text`,1,`field`,`mono`,`pair-input`,3,`input`,`id`,`placeholder`,`value`],[`type`,`text`,`placeholder`,`Value`,1,`field`,`grow`,`mono`,3,`input`,`id`,`value`],[`for`,`api-body`,1,`label`],[`id`,`api-body`,`rows`,`3`,`placeholder`,`{"name": "Ada"}`,1,`field`,`mono`,3,`input`,`value`],[1,`check`,`confirm-send`],[`type`,`checkbox`,3,`change`,`checked`],[`data-status`,`bad`,1,`status`],[1,`status`],[1,`muted`,`tnum`],[1,`code`],[1,`facts`,`headers`],[1,`plain`],[1,`mono`,`path`],[1,`muted`,`small`,`tnum`]],template:function(e,t){if(e&1&&(P(0,`form`,0),V(`submit`,function(e){return e.preventDefault(),t.send()}),P(1,`h2`,1),G(2,`Request playground`),F(),k(3,Xae,4,2,`div`,2),P(4,`div`,2)(5,`app-select`,3),V(`valueChange`,function(e){return t.method.set(e??`GET`)}),F(),P(6,`label`,4),G(7,`Path`),F(),P(8,`input`,5),V(`input`,function(e){return t.template.set(e.target.value)}),F(),P(9,`button`,6),G(10),F()(),P(11,`p`,7),G(12,` Write `),P(13,`code`),G(14,`:name`),F(),G(15,` or `),P(16,`code`),G(17,`**`),F(),G(18,` in the path to fill it in below. `),k(19,Zae,3,1),F(),k(20,Qae,2,1,`p`,8)(21,$ae,2,1,`p`,9),k(22,toe,5,0,`fieldset`,10),j(23,ioe,8,4,`details`,11,dg),k(25,aoe,6,2),P(26,`div`,2)(27,`button`,12),V(`click`,function(){return t.copy(`curl`)}),G(28,`Copy as curl`),F(),P(29,`button`,12),V(`click`,function(){return t.copy(`fetch`)}),G(30,`Copy as fetch`),F(),P(31,`span`,13),G(32),F()(),k(33,ooe,2,2,`p`,14)(34,foe,3,1,`div`,15),k(35,hoe,6,1,`div`,16),F()),e&2){let e;E(3),A(t.routeOptions().length?3:-1),E(2),N(`options`,t.methodOptions)(`value`,t.method()),E(3),N(`value`,t.template()),E(),N(`disabled`,!t.canSend()),O(`aria-describedby`,t.sendHintId()),E(),q(` `,t.sending()?`Sending…`:`Send`,` `),E(9),A(t.template().trim()?19:-1),E(),A(t.canCall()?t.needsConfirm()?21:-1:20),E(2),A(t.params().length?22:-1),E(),M(t.pairLists),E(2),A(t.method()===`GET`?-1:25),E(7),K(t.copied()),E(),A(t.sending()?33:(e=t.response())?34:-1,e),E(2),A(t.history().length?35:-1)}},dependencies:[JE],styles:[`h2[_ngcontent-%COMP%], 
+h3[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-transform: none;
+  letter-spacing: 0;
+  font-size: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--%NS%control-h, 34px);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.danger[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 480px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.path[_ngcontent-%COMP%], 
+.file[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  color: var(--%NS%text);
+  font-size: 12px;
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%], 
+[data-status=good].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%], 
+[data-status=warn].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%], 
+[data-status=bad].status[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 260px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.note[_ngcontent-%COMP%] {
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.note[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 8px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 2px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+summary[_ngcontent-%COMP%] {
+  cursor: pointer;
+  color: var(--%NS%text-2);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+@media (max-width: 560px) {
+  .facts[_ngcontent-%COMP%] {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .card[_ngcontent-%COMP%] {
+    animation: none;
+  }
+}
+[_nghost-%COMP%] {
+  display: block;
+}
+
+.method-select[_ngcontent-%COMP%] {
+  width: 112px;
+  font-family: var(--%NS%mono);
+}
+
+.group[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+details.group[_ngcontent-%COMP%]    > summary[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+details.group[open][_ngcontent-%COMP%]    > summary[_ngcontent-%COMP%] {
+  margin-bottom: 4px;
+}
+
+.group[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%] {
+  padding: 0 4px;
+}
+
+.pair-key[_ngcontent-%COMP%] {
+  min-width: 120px;
+  color: var(--%NS%text-2);
+}
+
+.pair-input[_ngcontent-%COMP%] {
+  flex: 0 1 180px;
+  min-width: 0;
+}
+
+.response[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.headers[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 4px;
+  font-family: var(--%NS%mono);
+  font-size: 12px;
+}
+
+.history[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+}
+
+.plain[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@media (max-width: 560px) {
+  .pair-input[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+}`]})},Soe=(e,t)=>t.file+t.method,p8=(e,t)=>t.id;function Coe(e,t){if(e&1&&(P(0,`span`,21),G(1),F(),G(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;E(),K(e),E(),q(``,n===r-1?``:`, `,` `)}}function woe(e,t){if(e&1&&(P(0,`div`,0)(1,`strong`),G(2,`load() ran twice`),F(),G(3,` for `),j(4,Coe,3,2,null,null,dg),G(6,` : once while server rendering, again in the browser. TransferState did not serve the server result. `),F()),e&2){let e=U();E(4),M(e.duplicates())}}function Toe(e,t){if(e&1&&(P(0,`span`,21),G(1),F(),G(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;E(),K(e),E(),q(``,n===r-1?``:`, `,` `)}}function Eoe(e,t){if(e&1&&(P(0,`div`,0)(1,`strong`),G(2,`Server function read ran twice`),F(),G(3,`: `),j(4,Toe,3,2,null,null,dg),G(6,` ran while server rendering, then again in the browser. The browser did not use the TransferState seed. `),F()),e&2){let e=U();E(4),M(e.refetchedFns())}}function Doe(e,t){if(e&1){let e=z();P(0,`label`)(1,`input`,22),V(`change`,function(){let t=x(e).$implicit;return S(U().kind.set(t))}),F(),G(2),P(3,`span`,23),G(4),F()()}if(e&2){let e=t.$implicit,n=U();W(`on`,n.kind()===e),E(),N(`checked`,n.kind()===e),O(`data-kind`,e),E(),q(` `,n.kindLabel(e),` `),E(2),K(n.kindCount(e))}}function Ooe(e,t){if(e&1){let e=z();P(0,`label`,11)(1,`input`,24),V(`change`,function(t){return x(e),S(U().allTabs.set(t.target.checked))}),F(),G(2,` All tabs (including untagged) `),F()}if(e&2){let e=U();E(),N(`checked`,e.allTabs())}}function koe(e,t){if(e&1&&G(0),e&2){let e=U(2);J(` Showing the newest `,e.shownCount(),` of `,e.matchingCalls().length,`. `)}}function Aoe(e,t){e&1&&G(0),e&2&&q(` The dev server keeps only the newest `,U(2).maxServerCalls,` calls and drops older ones. `)}function joe(e,t){if(e&1&&(P(0,`p`,14),k(1,koe,1,2),k(2,Aoe,1,1),F()),e&2){let e=U();E(),A(e.shownCount()<e.matchingCalls().length?1:-1),E(),A(e.serverFull()?2:-1)}}function Moe(e,t){if(e&1&&(P(0,`app-source-link`,34),G(1),F()),e&2){let e=U(),t=U(3);N(`file`,e.file),E(),K(t.short(e.file))}}function Noe(e,t){if(e&1&&(P(0,`strong`,31),G(1),F(),k(2,Moe,2,2,`app-source-link`,34)),e&2){let e=t;E(),K(e.name),E(),A(e.file?2:-1)}}function Poe(e,t){if(e&1&&(P(0,`span`,31),G(1),F()),e&2){let e=U().$implicit;E(),K(e.url)}}function Foe(e,t){e&1&&(P(0,`span`,27),G(1,`ran during server rendering`),F())}function Ioe(e,t){if(e&1&&G(0),e&2){let e=U(2).$implicit;q(` to `,e.location,` `)}}function Loe(e,t){if(e&1&&(P(0,`span`,27),G(1),k(2,Ioe,1,1),F()),e&2){let e=U().$implicit,t=U(2);O(`data-tone`,t.outcomeTone(e.outcome)),E(),q(``,t.outcomeLabel(e.outcome),` `),E(),A(e.location?2:-1)}}function Roe(e,t){if(e&1&&(P(0,`span`,27),G(1),F()),e&2){let e=U().$implicit;O(`data-mode`,e.render===`ssr`?`ssr`:`client`),E(),K(e.render===`ssr`?`server rendered`:`client only`)}}function zoe(e,t){if(e&1&&(P(0,`details`)(1,`summary`),G(2,`Response`),F(),P(3,`pre`,35),G(4),F()()),e&2){let e=U().$implicit,t=U(2);E(4),K(t.pretty(e.preview))}}function Boe(e,t){e&1&&(P(0,`span`,23),G(1,`in process`),F())}function Voe(e,t){if(e&1&&G(0),e&2){let e=U().$implicit;q(` `,e.ms,` ms `)}}function Hoe(e,t){if(e&1&&(P(0,`tr`)(1,`td`,26),G(2),F(),P(3,`td`)(4,`span`,27),G(5),F()(),P(6,`td`,28)(7,`div`,29)(8,`span`,30),G(9),F(),k(10,Noe,3,2)(11,Poe,2,1,`span`,31),k(12,Foe,2,0,`span`,27),k(13,Loe,3,3,`span`,27),k(14,Roe,2,2,`span`,27),F(),k(15,zoe,5,1,`details`),F(),P(16,`td`)(17,`span`,32),G(18),F()(),P(19,`td`,33),k(20,Boe,2,0,`span`,23)(21,Voe,1,1),F(),P(22,`td`,23),G(23),F()()),e&2){let e,n=t.$implicit,r=U(2);E(2),K(r.time(n.at)),E(2),O(`data-call`,n.kind),E(),K(r.kindLabel(n.kind)),E(3),O(`data-method`,n.method),E(),K(n.method),E(),A((e=r.fnOf(n))?10:11,e),E(2),A(n.seeded?12:-1),E(),A(n.outcome?13:-1),E(),A(n.render?14:-1),E(),A(n.preview?15:-1),E(2),O(`data-status`,r.statusClass(n.status)),E(),K(n.status),E(2),A(n.seeded?20:21),E(3),K(n.from)}}function Uoe(e,t){if(e&1&&(P(0,`div`,15)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,19),G(5,`At`),F(),P(6,`th`,19),G(7,`Kind`),F(),P(8,`th`,19),G(9,`Request`),F(),P(10,`th`,19),G(11,`Status`),F(),P(12,`th`,25),G(13,`Duration`),F(),P(14,`th`,19),G(15,`From`),F()()(),P(16,`tbody`),j(17,Hoe,24,14,`tr`,null,p8),F()()()),e&2){let e=U();E(17),M(e.calls())}}function Woe(e,t){e&1&&G(0),e&2&&q(` Nothing matches “`,U(2).callQuery().trim(),`” with these filters. `)}function Goe(e,t){e&1&&G(0),e&2&&q(` None of the `,U(2).tabCalls().length,` calls fit these filters. `)}function Koe(e,t){if(e&1){let e=z();P(0,`div`,16)(1,`p`,36),G(2,`No calls match.`),F(),P(3,`p`,23),k(4,Woe,1,1)(5,Goe,1,1),F(),P(6,`div`,37)(7,`button`,38),V(`click`,function(){return x(e),S(U().clearCallFilters())}),G(8,`Clear filters`),F()()()}if(e&2){let e=U();E(4),A(e.callQuery().trim()?4:5)}}function qoe(e,t){e&1&&G(0,` No calls of this kind yet. `)}function Joe(e,t){e&1&&G(0,` No calls from this tab yet. `)}function Yoe(e,t){e&1&&G(0,` No calls yet. `)}function Xoe(e,t){e&1&&G(0),e&2&&q(` Tick “All tabs (including untagged)” to see the `,U(2).allCalls().length,` calls from other tabs or tied to no tab. `)}function Zoe(e,t){if(e&1&&(P(0,`div`,17)(1,`p`,36),k(2,qoe,1,0)(3,Joe,1,0)(4,Yoe,1,0),F(),P(5,`p`,23),G(6,` Navigate in the app to see page renders, load() fetches, form actions, server functions and API calls. `),k(7,Xoe,1,1),F()()),e&2){let e=U();E(2),A(e.tabCalls().length?2:e.allCalls().length?3:4),E(5),A(!e.tabCalls().length&&e.allCalls().length?7:-1)}}function Qoe(e,t){if(e&1){let e=z();P(0,`tr`)(1,`td`)(2,`span`,30),G(3),F()(),P(4,`td`,21),G(5),F(),P(6,`td`)(7,`app-source-link`,39)(8,`span`,40),G(9),F(),G(10),F()(),P(11,`td`,41)(12,`button`,38),V(`click`,function(){let t=x(e).$implicit;return S(U().tryApi(t))}),G(13,` Try `),F()()()}if(e&2){let e=t.$implicit,n=U();E(2),O(`data-method`,e.method),E(),K(e.method),E(2),K(e.path),E(2),N(`file`,e.file),E(2),K(n.dir(e.file)),E(),K(n.base(e.file)),E(2),O(`aria-label`,`Try `+e.method+` `+e.path)}}function $oe(e,t){e&1&&(P(0,`tr`)(1,`td`,42),G(2,` No API routes. Add a handler under src/server/routes to test it here. `),F()())}function ese(e,t){if(e&1&&(P(0,`tr`)(1,`td`)(2,`span`,30),G(3),F()(),P(4,`td`,21),G(5),F(),P(6,`td`)(7,`app-source-link`,39)(8,`span`,40),G(9),F(),G(10),F()(),P(11,`td`,44),G(12),F()()),e&2){let e=t.$implicit,n=U(2);E(2),O(`data-method`,e.method),E(),K(e.method),E(2),K(e.name),E(2),N(`file`,e.file),E(2),K(n.dir(e.file)),E(),K(n.base(e.file)),E(2),K(n.fnCalls(e.id))}}function tse(e,t){if(e&1&&(P(0,`h2`),G(1,`Server functions`),F(),P(2,`div`,43)(3,`table`)(4,`thead`)(5,`tr`)(6,`th`,19),G(7,`Method`),F(),P(8,`th`,19),G(9,`Name`),F(),P(10,`th`,19),G(11,`File`),F(),P(12,`th`,25),G(13,`Calls`),F()()(),P(14,`tbody`),j(15,ese,13,7,`tr`,null,p8),F()()()),e&2){let e=U();E(15),M(e.serverFns())}}var nse=class e{page=b(N6);callsState=b(P6);host=b(Rl);rpc=this.page.rpc;project=this.page.project;serverFns=this.page.serverFns;devOrigin=this.page.devOrigin;allCalls=this.page.allCalls;tabCalls=this.page.tabCalls;scopePageId=this.page.scopePageId;allTabs=this.page.allTabs;kinds=this.callsState.kinds;kind=this.callsState.kind;tryTarget=this.callsState.tryTarget;maxServerCalls=this.callsState.maxServerCalls;callQuery=this.callsState.callQuery;failedOnly=this.callsState.failedOnly;callsMessage=this.callsState.callsMessage;callFiltered=this.callsState.callFiltered;matchingCalls=this.callsState.matchingCalls;calls=this.callsState.calls;shownCount=this.callsState.shownCount;serverFull=this.callsState.serverFull;refetchedFns=this.callsState.refetchedFns;duplicates=this.callsState.duplicates;time=aD;short=O6;dir=k6;base=A6;statusClass=j6;kindLabel(e){return this.callsState.kindLabel(e)}kindCount(e){return this.callsState.kindCount(e)}fnOf(e){return this.callsState.fnOf(e)}fnCalls(e){return this.callsState.fnCalls(e)}outcomeLabel(e){return this.callsState.outcomeLabel(e)}outcomeTone(e){return this.callsState.outcomeTone(e)}tryApi(e){this.callsState.tryApi(e)}pretty(e){try{return JSON.stringify(JSON.parse(e),null,2)}catch{return e}}clearCallFilters(){this.callsState.resetFilters(),queueMicrotask(()=>this.host.nativeElement.querySelector(`#analog-call-search`)?.focus())}async clearCalls(){await this.callsState.clearCalls()&&queueMicrotask(()=>this.host.nativeElement.querySelector(`input[name="analog-kind"]:checked`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appAnalogServer`,``]],decls:48,vars:17,consts:[[`data-tone`,`warn`,`role`,`note`,1,`callout`],[`id`,`analog-calls-heading`],[1,`calls-bar`],[1,`segmented`],[1,`sr-only`],[3,`on`],[1,`calls-actions`],[`type`,`button`,1,`btn`,`ghost`,3,`click`,`disabled`],[`role`,`status`,1,`calls-message`],[`role`,`group`,`aria-label`,`Filter the server calls`,1,`call-filters`],[`inputId`,`analog-call-search`,`placeholder`,`Filter by URL, path or function`,`saveKey`,`analog-calls`,1,`search`,3,`valueChange`,`value`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[`aria-live`,`polite`,1,`total`],[1,`note`],[`role`,`region`,`aria-label`,`Server calls`,`tabindex`,`0`,1,`table-wrap`],[`role`,`status`,1,`empty-box`,`no-match`],[1,`empty-box`],[`role`,`region`,`aria-label`,`API routes`,`tabindex`,`0`,1,`table-wrap`],[`scope`,`col`],[3,`rpc`,`routes`,`target`,`origin`],[1,`mono`],[`type`,`radio`,`name`,`analog-kind`,1,`sr-only`,3,`change`,`checked`],[1,`muted`],[`type`,`checkbox`,`data-testid`,`analog-all-tabs`,3,`change`,`checked`],[`scope`,`col`,1,`num`],[1,`muted`,`nowrap`],[1,`pill`],[1,`request`],[1,`meta`],[1,`method`],[1,`mono`,`url`],[1,`status`],[1,`num`,`nowrap`],[1,`mono`,`muted`,3,`file`],[1,`code`],[1,`empty-lead`],[1,`empty-actions`],[`type`,`button`,1,`btn`,`ghost`,3,`click`],[1,`file`,3,`file`],[1,`dir`],[1,`actions`],[`colspan`,`4`,1,`empty-row`],[`role`,`region`,`aria-label`,`Server functions`,`tabindex`,`0`,1,`table-wrap`],[1,`num`,`tnum`]],template:function(e,t){e&1&&(k(0,woe,7,0,`div`,0),k(1,Eoe,7,0,`div`,0),P(2,`h2`,1),G(3,`Server calls`),F(),P(4,`div`,2)(5,`fieldset`,3)(6,`legend`,4),G(7,`Show calls of kind`),F(),j(8,Doe,5,6,`label`,5,dg),F(),P(10,`div`,6)(11,`button`,7),V(`click`,function(){return t.clearCalls()}),G(12,` Clear calls `),F(),P(13,`span`,8),G(14),F()()(),P(15,`div`,9)(16,`app-search-field`,10),U_(`valueChange`,function(e){return H_(t.callQuery,e)||(t.callQuery=e),e}),F(),P(17,`label`,11)(18,`input`,12),V(`change`,function(e){return t.failedOnly.set(e.target.checked)}),F(),G(19,` Failed only `),F(),k(20,Ooe,3,1,`label`,11),P(21,`span`,13),G(22),F()(),k(23,joe,3,2,`p`,14),k(24,Uoe,19,0,`div`,15)(25,Koe,9,1,`div`,16)(26,Zoe,8,2,`div`,17),P(27,`h2`),G(28,`API routes`),F(),P(29,`div`,18)(30,`table`)(31,`thead`)(32,`tr`)(33,`th`,19),G(34,`Method`),F(),P(35,`th`,19),G(36,`Path`),F(),P(37,`th`,19),G(38,`File`),F(),P(39,`th`,19)(40,`span`,4),G(41,`Actions`),F()()()(),P(42,`tbody`),j(43,Qoe,14,7,`tr`,null,Soe,!1,$oe,3,0,`tr`),F()()(),k(46,tse,17,0),I(47,`app-analog-playground`,20)),e&2&&(A(t.duplicates().length?0:-1),E(),A(t.refetchedFns().length?1:-1),E(7),M(t.kinds),E(3),N(`disabled`,!t.allCalls().length),E(3),K(t.callsMessage()),E(2),V_(`value`,t.callQuery),E(2),N(`checked`,t.failedOnly()),E(2),A(t.scopePageId()?20:-1),E(2),J(``,t.matchingCalls().length,` of `,t.tabCalls().length),E(),A(t.shownCount()<t.matchingCalls().length||t.serverFull()?23:-1),E(),A(t.calls().length?24:t.tabCalls().length&&t.callFiltered()?25:26),E(19),M(t.project().api),E(3),A(t.serverFns().length?46:-1),E(),N(`rpc`,t.rpc())(`routes`,t.project().api)(`target`,t.tryTarget())(`origin`,t.devOrigin()))},dependencies:[iD,aM,xoe],styles:[`@charset "UTF-8";
+[_nghost-%COMP%] {
+  display: contents;
+}
+
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.empty-row[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td.empty-row[_ngcontent-%COMP%] {
+  background: transparent;
+}
+
+.empty-box[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  text-align: center;
+}
+
+.empty-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.empty-lead[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.nowrap[_ngcontent-%COMP%] {
+  white-space: nowrap;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.explain[_ngcontent-%COMP%] {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+
+.filter[_ngcontent-%COMP%] {
+  flex: 0 1 240px;
+  min-width: 0;
+}
+
+@media (max-width: 560px) {
+  .filter[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+}
+.inline[_ngcontent-%COMP%], 
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.inline[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%], 
+.playground[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:not(.check) {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 13px;
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+  outline: none;
+}
+
+.method-select[_ngcontent-%COMP%] {
+  width: 112px;
+  font-family: var(--%NS%mono);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%control-border);
+}
+
+.btn[_ngcontent-%COMP%]:active {
+  transform: translateY(1px);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.ghost[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+td.actions[_ngcontent-%COMP%] {
+  width: 1%;
+  text-align: right;
+  vertical-align: middle;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[role=tab][_ngcontent-%COMP%]:focus-visible, 
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible, 
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:focus-within {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.callout[_ngcontent-%COMP%] {
+  padding: 12px 16px;
+  border: 1px solid color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%hue-info) 8%, var(--%NS%surface));
+  line-height: 1.6;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.callout[data-tone=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+}
+
+.callout[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+}
+
+.callout[data-tone=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+}
+
+.callout[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.callout[_ngcontent-%COMP%]   strong.mono[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.chain[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.chain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(:last-child)::after {
+  content: "›";
+  margin-left: 2px;
+  color: var(--%NS%text-3);
+}
+
+.callout[_ngcontent-%COMP%]   .chips[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.plain[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding-left: 18px;
+}
+
+.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {
+  border-bottom: none;
+}
+
+th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+td.nowrap[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  transition: background-color 160ms var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+tr.open[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%accent) 16%, transparent);
+}
+
+tr.open[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+tr.dim[_ngcontent-%COMP%]   .path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.route[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.guide[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-family: var(--%NS%mono);
+}
+
+.path[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.file[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.dir[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.pill[_ngcontent-%COMP%], 
+.chip[_ngcontent-%COMP%], 
+.status[_ngcontent-%COMP%], 
+.method[_ngcontent-%COMP%] {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.pill[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin: 0 4px 4px 0;
+  padding: 3px 10px;
+  border: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chip.mono[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.chips[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chips[_ngcontent-%COMP%]   .pill[_ngcontent-%COMP%] {
+  padding: 3px 10px;
+  font-size: 12px;
+}
+
+.pill.live[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, var(--%NS%surface));
+  color: var(--%NS%accent-text);
+}
+
+.pill[data-kind=layout][_ngcontent-%COMP%], 
+.pill[data-mode=redirect][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-slate);
+  color: var(--%NS%hue-slate-text);
+}
+
+.pill[data-kind=markdown][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-sky);
+  color: var(--%NS%hue-sky-text);
+}
+
+.pill[data-kind=load][_ngcontent-%COMP%], 
+.pill[data-call=load][_ngcontent-%COMP%], 
+.pill[data-call=fn][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-teal);
+  color: var(--%NS%hue-teal-text);
+}
+
+.pill[data-mode=ssr][_ngcontent-%COMP%], 
+.pill[data-call=page][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-blue);
+  color: var(--%NS%hue-blue-text);
+}
+
+.pill[data-mode=ssg][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-green);
+  color: var(--%NS%hue-green-text);
+}
+
+.pill[data-mode=client][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-yellow);
+  color: var(--%NS%hue-yellow-text);
+}
+
+.pill[data-mode=cached][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-purple);
+  color: var(--%NS%hue-purple-text);
+}
+
+.pill[data-call=api][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-orange);
+  color: var(--%NS%hue-orange-text);
+}
+
+.pill[data-call=action][_ngcontent-%COMP%] {
+  border-color: var(--%NS%hue-pink);
+  color: var(--%NS%hue-pink-text);
+}
+
+[data-tone=good].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+[data-tone=warn].pill[_ngcontent-%COMP%], 
+[data-tone=warn].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+[data-tone=bad].pill[_ngcontent-%COMP%], 
+[data-tone=bad].chip[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+[data-tone=info].pill[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-info) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-info) 12%, transparent);
+  color: var(--%NS%hue-info-text);
+}
+
+.status[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border-strong);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.status[data-status=good][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.status[data-status=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.status[data-status=bad][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.method[_ngcontent-%COMP%] {
+  min-width: 52px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-weight: 600;
+  text-align: center;
+}
+
+.method[data-method=GET][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%hue-sky) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%hue-sky) 12%, transparent);
+  color: var(--%NS%hue-sky-text);
+}
+
+.method[data-method=POST][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.method[data-method=PUT][_ngcontent-%COMP%], 
+.method[data-method=PATCH][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.method[data-method=DELETE][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.request[_ngcontent-%COMP%] {
+  min-width: 260px;
+}
+
+.request[_ngcontent-%COMP%]   .url[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+details[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  border-radius: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 160ms var(--%NS%ease);
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.code[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  padding: 10px 12px;
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.calls-bar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.calls-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.calls-message[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12.5px;
+}
+
+.call-filters[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search[_ngcontent-%COMP%]   .field[_ngcontent-%COMP%] {
+  width: 100%;
+  padding-left: 34px;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+.call-filters[_ngcontent-%COMP%]   .check[_ngcontent-%COMP%] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.total[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+.segmented[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  justify-self: start;
+  margin: 0;
+  padding: 3px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 10px;
+  background: var(--%NS%bg);
+}
+
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  padding: 5px 12px;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--%NS%text-2);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.segmented[_ngcontent-%COMP%]   label.on[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
+}
+
+.segmented[_ngcontent-%COMP%]   label.on[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+h2[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 0 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.card[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.response[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.response[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 10px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 3px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+}`]})},m8=()=>[],rse=(e,t)=>t.id;function ise(e,t){if(e&1){let e=z();P(0,`div`,0)(1,`h2`,3),G(2,`Could not read the project.`),F(),P(3,`p`,4),G(4,` Check that the dev server with Pangular Inspector is still running, then retry. `),F(),P(5,`button`,5),V(`click`,function(){return x(e),S(U().retry())}),G(6,`Retry`),F()()}}function ase(e,t){e&1&&(P(0,`div`,1),I(1,`span`,6),P(2,`span`),G(3,`Reading the project…`),F()())}function ose(e,t){e&1&&(P(0,`div`,2)(1,`h2`,3),G(2,`This app is not an Analog app.`),F(),P(3,`p`,4),G(4,` Add `),P(5,`code`),G(6,`pangular()`),F(),G(7,` from `),P(8,`code`),G(9,`@pangular-inspector/devtools/vite`),F(),G(10,` next to `),P(11,`code`),G(12,`analog()`),F(),G(13,` in vite.config.ts and run the Analog dev server. `),F()())}function sse(e,t){if(e&1&&(P(0,`div`,11)(1,`span`,9),G(2,`Open in the browser`),F(),P(3,`span`,22),G(4),F()()),e&2){let e=t;E(3),N(`title`,e.url),E(),K(e.url)}}function cse(e,t){if(e&1&&(P(0,`span`,24),G(1),F()),e&2){let e=U().$implicit;O(`data-tone`,e.tone),E(),K(e.count)}}function lse(e,t){if(e&1){let e=z();P(0,`button`,23),V(`click`,function(){let t=x(e).$implicit;return S(U(2).view.set(t.id))}),G(1),k(2,cse,2,2,`span`,24),F()}if(e&2){let e=t.$implicit,n=U(2);N(`id`,`analog-tab-`+e.id),O(`aria-selected`,e.id===n.view())(`aria-controls`,`analog-panel-`+e.id)(`tabindex`,e.id===n.view()?0:-1),E(),q(` `,e.label,` `),E(),A(e.count===null?-1:2)}}function use(e,t){e&1&&I(0,`div`,15)}function dse(e,t){e&1&&I(0,`div`,16)}function fse(e,t){e&1&&I(0,`div`,17)}function pse(e,t){e&1&&I(0,`div`,18)}function mse(e,t){if(e&1&&I(0,`app-analog-data`,19),e&2){let e=U(2);N(`rpc`,e.rpc())(`page`,e.page())(`serverFns`,e.serverFns())(`duplicates`,e.state().duplicates??iv(5,m8))(`refetches`,e.state().refetches??iv(6,m8))}}function hse(e,t){e&1&&I(0,`app-analog-runtime`,20),e&2&&N(`rpc`,U(2).rpc())}function gse(e,t){e&1&&I(0,`div`,21)}function _se(e,t){if(e&1){let e=z();P(0,`section`,7)(1,`div`,8)(2,`span`,9),G(3,`Analog`),F(),P(4,`span`,10),G(5),F()(),P(6,`div`,8)(7,`span`,9),G(8,`Pages`),F(),P(9,`span`,10),G(10),F()(),P(11,`div`,8)(12,`span`,9),G(13,`API routes`),F(),P(14,`span`,10),G(15),F()(),P(16,`div`,8)(17,`span`,9),G(18,`Server calls`),F(),P(19,`span`,10),G(20),F()(),P(21,`div`,8)(22,`span`,9),G(23,`Issues`),F(),P(24,`span`,10),G(25),F()(),k(26,sse,5,2,`div`,11),F(),P(27,`div`,12),V(`keydown`,function(t){return x(e),S(U().onKey(t))}),j(28,lse,3,6,`button`,13,rse),F(),P(30,`div`,14),k(31,use,1,0,`div`,15)(32,dse,1,0,`div`,16)(33,fse,1,0,`div`,17)(34,pse,1,0,`div`,18)(35,mse,1,7,`app-analog-data`,19)(36,hse,1,1,`app-analog-runtime`,20)(37,gse,1,0,`div`,21),F()}if(e&2){let e,t,n=U();E(5),K(n.project().version||`unknown`),E(5),K(n.pageCount()),E(5),K(n.project().api.length),E(5),K(n.tabCalls().length),E(),O(`data-tone`,n.lintTone()||`good`),E(4),K(n.lintCount().errors+n.lintCount().warnings),E(),A((e=n.page())?26:-1,e),E(2),M(n.views()),E(2),N(`id`,`analog-panel-`+n.view()),O(`aria-labelledby`,`analog-tab-`+n.view()),E(),A((t=n.view())===`routes`?31:t===`server`?32:t===`render`?33:t===`content`?34:t===`data`?35:t===`runtime`?36:t===`lint`?37:-1)}}var vse=class e{rpc=$(null);pageState=b(N6);callsState=b(P6);view=this.pageState.view;project=this.pageState.project;loadFailed=this.pageState.loadFailed;state=this.pageState.state;findings=this.pageState.findings;filter=this.pageState.filter;page=this.pageState.page;serverFns=this.pageState.serverFns;tabCalls=this.pageState.tabCalls;pageCount=this.pageState.pageCount;lintCount=this.pageState.lintCount;lintTone=this.pageState.lintTone;views=this.pageState.views;kind=this.callsState.kind;callQuery=this.callsState.callQuery;failedOnly=this.callsState.failedOnly;tryTarget=this.callsState.tryTarget;duplicates=this.callsState.duplicates;constructor(){this.pageState.connect(this.rpc),T(()=>{let e=this.rpc();e&&Z(()=>void this.pageState.load(e))}),T(()=>{let e=this.view();this.state(),Z(()=>this.pageState.scheduleRefresh(e))})}retry(){this.pageState.retry()}isOpen(e){return this.pageState.isOpen(e)}openText(e){return this.pageState.openText(e)}tryApi(e){this.callsState.tryApi(e)}onKey(e){let t=this.views().map(e=>e.id),n=t.indexOf(this.view()),r=n;if(e.key===`ArrowRight`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),this.view.set(t[r]);let i=e.currentTarget;queueMicrotask(()=>i.querySelector(`#analog-tab-${t[r]}`)?.focus())}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-analog-inspector`]],inputs:{rpc:[1,`rpc`]},features:[rv([N6,P6])],decls:4,vars:1,consts:[[`role`,`alert`,1,`empty`],[`role`,`status`,1,`loading`],[1,`empty`],[1,`empty-title`],[1,`muted`],[`type`,`button`,1,`btn`,3,`click`],[`aria-hidden`,`true`,1,`spinner`],[`aria-label`,`Analog summary`,1,`summary`],[1,`stat`],[1,`label`],[1,`value`],[1,`stat`,`wide`],[`role`,`tablist`,`aria-label`,`Analog views`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[`appAnalogRoutes`,``],[`appAnalogServer`,``],[`appAnalogRender`,``],[`appAnalogContent`,``],[3,`rpc`,`page`,`serverFns`,`duplicates`,`refetches`],[3,`rpc`],[`appAnalogLint`,``],[1,`value`,`mono`,3,`title`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`count`]],template:function(e,t){e&1&&k(0,ise,7,0,`div`,0)(1,ase,4,0,`div`,1)(2,ose,14,0,`div`,2)(3,_se,38,10),e&2&&A(t.project()===null&&t.loadFailed()?0:t.project()===null?1:t.project().analog?3:2)},dependencies:[die,N3,xie,tae,qae,b6,nse],styles:[`[_nghost-%COMP%] {
+  --%NS%good: var(--%NS%ok);
+  --%NS%bad: var(--%NS%danger);
+}
+
+[_nghost-%COMP%] {
+  --%NS%mono: var(--%NS%font-mono);
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.loading[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner[_ngcontent-%COMP%] {
+    animation: none;
+    border-color: var(--%NS%accent-line);
+  }
+}
+.tnum[_ngcontent-%COMP%] {
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.empty-row[_ngcontent-%COMP%] {
+  padding: 24px 16px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td.empty-row[_ngcontent-%COMP%] {
+  background: transparent;
+}
+
+.empty-box[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius);
+  text-align: center;
+}
+
+.empty-box[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.empty-lead[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.nowrap[_ngcontent-%COMP%] {
+  white-space: nowrap;
+}
+
+code[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 6px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%mono);
+  font-size: 12.5px;
+}
+
+.summary[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 12px;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.stat[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  align-content: start;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  transition: border-color 180ms var(--%NS%ease), background-color 180ms var(--%NS%ease);
+}
+
+.stat[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.stat.wide[_ngcontent-%COMP%] {
+  grid-column: span 2;
+  min-width: 0;
+}
+
+@media (max-width: 340px) {
+  .stat.wide[_ngcontent-%COMP%] {
+    grid-column: 1/-1;
+  }
+}
+.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.stat[_ngcontent-%COMP%]   .value.mono[_ngcontent-%COMP%] {
+  overflow: hidden;
+  color: var(--%NS%text);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stat[data-tone=warn][_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
+  color: var(--%NS%warn);
+}
+
+.stat[data-tone=good][_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.stat[data-tone=bad][_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}
+
+.tabs[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  justify-self: start;
+  max-width: 100%;
+  padding: 3px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 10px;
+  background: var(--%NS%bg);
+}
+
+[role=tab][_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 28px;
+  padding: 4px 12px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 180ms var(--%NS%ease), color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+[role=tab][_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+}
+
+[role=tab][aria-selected=true][_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
+}
+
+.count[_ngcontent-%COMP%] {
+  min-width: 20px;
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {
+  background: var(--%NS%border-strong);
+  color: var(--%NS%text);
+}
+
+.count[data-tone=warn][_ngcontent-%COMP%], 
+[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[data-tone=warn][_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.count[data-tone=bad][_ngcontent-%COMP%], 
+[role=tab][aria-selected=true][_ngcontent-%COMP%]   .count[data-tone=bad][_ngcontent-%COMP%] {
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.panel[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.explain[_ngcontent-%COMP%] {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+
+.filter[_ngcontent-%COMP%] {
+  flex: 0 1 240px;
+  min-width: 0;
+}
+
+@media (max-width: 560px) {
+  .filter[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+}
+.inline[_ngcontent-%COMP%], 
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.inline[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%], 
+.playground[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:not(.check) {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.field[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  transition: border-color 180ms var(--%NS%ease), box-shadow 180ms var(--%NS%ease);
+}
+
+.field.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%mono);
+  font-size: 13px;
+}
+
+.field[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+.field[_ngcontent-%COMP%]:focus, 
+.field[_ngcontent-%COMP%]:focus-visible {
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+  outline: none;
+}
+
+.method-select[_ngcontent-%COMP%] {
+  width: 112px;
+  font-family: var(--%NS%mono);
+}
+
+textarea.field[_ngcontent-%COMP%] {
+  height: auto;
+  padding: 8px 12px;
+}
+
+.grow[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.btn[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 160ms var(--%NS%ease), border-color 160ms var(--%NS%ease), color 160ms var(--%NS%ease);
+}
+
+.btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%control-border);
+}
+
+.btn[_ngcontent-%COMP%]:active {
+  transform: translateY(1px);
+}
+
+.btn.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.btn.primary[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+.btn.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.btn.ghost[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%accent-line);
+  color: var(--%NS%text-strong);
+}
+
+td.actions[_ngcontent-%COMP%] {
+  width: 1%;
+  text-align: right;
+  vertical-align: middle;
+}
+
+.btn[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[role=tab][_ngcontent-%COMP%]:focus-visible, 
+.btn[_ngcontent-%COMP%]:focus-visible, 
+.table-wrap[_ngcontent-%COMP%]:focus-visible, 
+summary[_ngcontent-%COMP%]:focus-visible, 
+.segmented[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:focus-within {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+h2[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 0 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.card[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: var(--%NS%shadow);
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.card[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--%NS%text-2);
+  cursor: pointer;
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.response[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.response[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 10px 16px;
+  margin: 0;
+}
+
+.facts[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  padding-top: 3px;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.facts[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  justify-items: center;
+  padding: 40px 24px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  text-align: center;
+  animation: enter 0.35s var(--%NS%ease) both;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+  max-width: 520px;
+  line-height: 1.6;
+}
+
+.empty-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+}`]})},yse=(e,t)=>t.key,bse=(e,t)=>t.call.id;function xse(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,14),V(`click`,function(){let t=x(e).$implicit;return S(U(3).open.emit(t.call.id))}),P(2,`span`,15)(3,`span`,16),G(4),F(),P(5,`span`,17),G(6),F()(),P(7,`span`,18),I(8,`span`),F(),P(9,`span`,19)(10,`span`),G(11),F(),G(12),F()()()}if(e&2){let e=t.$implicit,n=U(3);E(),W(`selected`,n.selectedId()===e.call.id),O(`data-call-id`,e.call.id)(`aria-pressed`,n.selectedId()===e.call.id)(`aria-label`,e.label)(`aria-controls`,n.selectedId()?`call-preview`:null),E(3),K(e.call.method),E(),N(`title`,e.call.url),E(),K(n.pathOf(e.call.url)),E(2),p_(`bar `+e.tone),f_(`left`,e.left,`%`)(`width`,e.width,`%`),E(2),p_(`status status-`+e.tone),E(),K(e.status),E(),J(` · +`,e.offsetMs,` ms · `,e.call.durationMs,` ms`)}}function Sse(e,t){if(e&1&&(P(0,`section`,7)(1,`h3`,8)(2,`span`,9),G(3),F(),P(4,`span`,10),G(5,`, `),F(),P(6,`span`,11),G(7),F(),P(8,`span`,10),G(9,`, `),F(),P(10,`span`,12),G(11),F()(),P(12,`ul`,13),j(13,xse,13,20,`li`,null,bse),F()()),e&2){let e=t.$implicit;O(`aria-labelledby`,`wf-`+e.key),E(),N(`id`,`wf-`+e.key),E(2),q(`Navigation `,e.index),E(3),N(`title`,e.url),E(),K(e.url||`Unknown page`),E(4),R_(``,e.rows.length,` `,e.rows.length===1?`call`:`calls`,`, `,e.spanMs,` ms`),E(2),M(e.rows)}}function Cse(e,t){if(e&1&&(P(0,`div`,1)(1,`span`),I(2,`i`,2),G(3,`Network`),F(),P(4,`span`),I(5,`i`,3),G(6,`Transfer cache`),F(),P(7,`span`),I(8,`i`,4),G(9,`Failed`),F(),P(10,`span`),I(11,`i`,5),G(12,`Cancelled`),F()(),P(13,`div`,6),j(14,Sse,15,8,`section`,7,yse),F()),e&2){let e=U();E(14),M(e.groups())}}function wse(e,t){e&1&&(P(0,`div`,0)(1,`p`),G(2,`No client calls to show.`),F(),P(3,`p`,20),G(4,` The waterfall shows calls made in the browser. Clear the filters or pick All sides, then use the page. `),F()())}function h8(e){try{let t=new URL(e,`http://x`);return t.pathname+t.search}catch{return e}}function g8(e){return e.cancelled?`cancelled`:e.status?String(e.status):`ERR`}function Tse(e){return e.cancelled?`neutral`:!e.status||e.status>=400||e.error?`bad`:e.cacheHit?`cache`:`ok`}function Ese(e){let t=[],n=e.filter(e=>e.side===`client`).sort((e,t)=>e.at-t.at),r;for(let e of n){let n=e.pageUrl??``;(!r||r.url!==n)&&(r={key:`${e.at}:${e.id}`,index:t.length+1,url:n,startedAt:e.at,spanMs:0,rows:[]},t.push(r));let i=e.at-r.startedAt;r.spanMs=Math.max(r.spanMs,i+Math.max(e.durationMs,0)),r.rows.push({call:e,offsetMs:i,left:0,width:0,tone:Tse(e),status:g8(e)+(e.cacheHit&&!e.cancelled?` cache`:``),label:``})}for(let e of t){let t=Math.max(e.spanMs,1);for(let n of e.rows)n.left=n.offsetMs/t*100,n.width=Math.max(Math.max(n.call.durationMs,0)/t*100,.8),n.label=`${n.call.method} ${h8(n.call.url)}, starts at +${n.offsetMs} ms, takes ${n.call.durationMs} ms, status ${g8(n.call)}`+(n.call.cacheHit?`, transfer cache`:``)}return t.reverse()}var Dse=class e{calls=$([]);selectedId=$(null);open=xv();groups=X(()=>Ese(this.calls()));pathOf=h8;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-network-waterfall`]],inputs:{calls:[1,`calls`],selectedId:[1,`selectedId`]},outputs:{open:`open`},decls:2,vars:1,consts:[[`role`,`status`,1,`empty`],[`aria-hidden`,`true`,1,`legend`],[1,`swatch`,`ok`],[1,`swatch`,`cache`],[1,`swatch`,`bad`],[1,`swatch`,`neutral`],[`appRovingList`,`button.wf-row`,1,`groups`],[1,`group`],[1,`group-head`,3,`id`],[1,`group-title`],[1,`sr-only`],[1,`group-url`,3,`title`],[1,`group-meta`],[1,`rows`],[`type`,`button`,1,`wf-row`,3,`click`],[1,`name`],[1,`method`],[1,`path`,3,`title`],[`aria-hidden`,`true`,1,`track`],[`aria-hidden`,`true`,1,`time`],[1,`muted`,`small`]],template:function(e,t){e&1&&k(0,Cse,16,0)(1,wse,5,0,`div`,0),e&2&&A(+!t.groups().length)},dependencies:[XV],styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.legend[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0 0 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.legend[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.swatch[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 12px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+.groups[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  max-height: 480px;
+  overflow: auto;
+}
+
+.group-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 2px 8px;
+  margin: 0 0 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.group-url[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1 1 120px;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-weight: 400;
+}
+
+.group-meta[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 400;
+}
+
+.rows[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wf-row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(80px, 3fr) auto;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: auto;
+  min-height: 28px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--%NS%radius-sm);
+  background: transparent;
+  color: var(--%NS%text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background 150ms var(--%NS%ease);
+}
+
+.wf-row[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.wf-row.selected[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+}
+
+.wf-row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.name[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+
+.method[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.path[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.track[_ngcontent-%COMP%] {
+  position: relative;
+  height: 10px;
+  border-radius: 2px;
+  background: var(--%NS%surface-3);
+}
+
+.bar[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: 2px;
+}
+
+.ok[_ngcontent-%COMP%] {
+  background: var(--%NS%accent);
+}
+
+.cache[_ngcontent-%COMP%] {
+  background: var(--%NS%ok);
+}
+
+.bad[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+}
+
+.neutral[_ngcontent-%COMP%] {
+  background: var(--%NS%text-3);
+}
+
+.status[_ngcontent-%COMP%] {
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-radius: var(--%NS%radius-sm);
+  background: none;
+  color: var(--%NS%text-2);
+}
+
+.status-bad[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.status-cache[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.time[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 4px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+@media (max-width: 480px) {
+  .wf-row[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .track[_ngcontent-%COMP%] {
+    grid-column: 1/-1;
+    grid-row: 2;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wf-row[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})};function Ose(e,t){if(e&1&&(L(0,`span`,0),G(1),R()),e&2){let e=U();B(`title`,e.title()),E(),q(`likely `,e.label())}}var kse={httpResource:`httpResource()`,resource:`resource()`,defer:`@defer`},Ase=class e{origin=$(void 0);label=X(()=>{let e=this.origin();return e?kse[e]:``});title=X(()=>`Started by ${this.label()}, guessed from the call stack. Development builds only; it can miss.`);static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-call-origin`]],inputs:{origin:[1,`origin`]},decls:1,vars:1,consts:[[1,`tag`,3,`title`]],template:function(e,t){e&1&&k(0,Ose,2,2,`span`,0),e&2&&A(t.origin()?0:-1)},styles:[`[_nghost-%COMP%] {
+  display: contents;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}`]})},_8={kind:`render-error`,pattern:``,message:``,key:``,value:``},jse={"render-error":`Render error`,"client-render":`Client render`,"state-edit":`TransferState edit`},Mse={server:`Server`,prerender:`Prerender`,client:`Client`,redirect:`Redirect`,"not-rendered":`Not rendered`,unknown:`Unknown`},v8={pattern:``,method:``,target:`both`,status:``,delayMs:``,body:``,chance:``};function y8(){return`r${Date.now().toString(36)}${Math.random().toString(36).slice(2,6)}`}function b8(e){if(!e.trim())return;let t=Number(e);return Number.isInteger(t)&&t>=1&&t<=99?t:null}function x8(e){try{let t=new URL(e,`http://x`);return t.pathname+t.search}catch{return e}}var Nse=/\[redacted\]|%5Bredacted%5D/gi;function Pse(e){return(/^([a-z][a-z\d+.-]*:|\/\/)/i.test(e)?x8(e):e).replace(Nse,`*`)}function Fse(e){let t=sD(e);if(t!==null)return t;try{return JSON.parse(e),e.trim()}catch{return null}}var S8=[`GET`,`POST`,`PUT`,`PATCH`,`DELETE`];function Ise(e){try{return new URL(e,`http://x`).pathname}catch{return``}}function Lse(e){let t=Ise(e);return t===`/`?``:t}var Rse=/\[redacted\]|%5Bredacted%5D/i,zse=1e5,Bse=[{value:``,label:`None`},...WC.map(([e,t])=>({value:String(e),label:`${e} ${t}`}))];function C8(e){return e===void 0?`neutral`:e===0||e>=400?`bad`:e>=300?`redirect`:e>=200?`ok`:`neutral`}function w8(e){return e.cancelled?`cancelled`:e.status?String(e.status):`ERR`}function T8(e){return e.cancelled?`neutral`:C8(e.status)}function Vse(e){return!!e.cancelled||!e.status||e.status>=400}function E8(e){if(e.preview!==void 0)return sD(e.preview)??e.preview}function D8(e){return e.target!==`client`&&e.status!==void 0&&e.status>0&&e.status<400}function Hse(e){return e===`both`?`SSR + client`:e===`server`?`SSR only`:`Client only`}function O8(e){return jse[e]??e}function Use(e){return Mse[e]??`Unknown`}function k8(e){return UC[e]??``}function Wse(e){return e===void 0?`n/a`:`${e} ms`}function Gse(e){return e.guards?.passed===!1?e.outcome===`redirected`?`redirected`:`rejected`:``}function Kse(e){if(e.compressedBeforeTrace)return e.headers[`content-encoding`]??`unknown encoding`}function qse(e){return e.source===`hydration`?`hydration annotations`:e.fn?`Analog server function ${e.fn.name??e.fn.id}`:e.source===`analog`?`Analog`:null}var A8=class e{rpcSource=w(null);rpc=X(()=>this.rpcSource());canWrite=X(()=>OT(this.rpc(),`http`));writesOff=Mw(`http`);loading=w(!1);failed=w(!1);serverCalls=w([]);pages=w([]);payloads=w({});serverDropped=w(0);requests=w([]);rules=w([]);overrides=w([]);message=w(``);refetching=w(!1);hostPageId=tT();selectedPageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId)?.pageId??e[0]?.pageId??null});selectedCallId=w(null);unsubscribe=[];destroyed=!1;injector=b(Es);host=b(Rl);selected=X(()=>this.pages().find(e=>e.pageId===this.selectedPageId())??null);pageRequestId=X(()=>this.selected()?.ssrRequestId??null);selectedRequestId=Q(()=>this.pageRequestId());selectedPayload=X(()=>{let e=this.selectedPageId();return e?this.payloads()[e]??null:null});maxCalls=X(()=>TT(this.rpc()).limits.httpCalls);droppedCalls=X(()=>(this.selected()?.dropped??0)+this.serverDropped());pageServerCalls=X(()=>{let e=this.selected()?.initialUrl;return e?this.serverCalls().filter(t=>!t.pageUrl||t.pageUrl===e):this.serverCalls()});renderServerCalls=X(()=>{let e=this.pageRequestId();return e?this.serverCalls().filter(t=>t.requestId===e):[]});liveTimeline=X(()=>[...this.pageServerCalls(),...this.selected()?.calls??[]].sort((e,t)=>t.at-e.at));callFeed=new RR({name:`network`,source:this.liveTimeline,key:e=>`${e.side}:${e.id}`,scope:this.selectedPageId});timeline=X(()=>[...this.callFeed.items()]);callSort=w(null);callQuery=w(``);timelineView=w(`table`);waterfallCalls=X(()=>this.visibleCalls().filter(e=>e.side===`client`));sideFilter=w(`all`);failedOnly=w(!1);sideOptions=[{value:`all`,label:`All sides`},{value:`server`,label:`SSR`},{value:`client`,label:`Client`}];visibleCalls=X(()=>{let e=this.callQuery().trim().toLowerCase(),t=this.sideFilter()??`all`,n=this.failedOnly();return EV(this.timeline().filter(r=>(t===`all`||r.side===t)&&(!n||Vse(r))&&(!e||`${r.method} ${r.url}`.toLowerCase().includes(e)||`${r.method} ${x8(r.url)}`.toLowerCase().includes(e))),this.callSort(),{method:e=>e.method,url:e=>e.url,status:e=>e.cancelled||!e.status?void 0:e.status,time:e=>e.durationMs})});countText=X(()=>{let e=this.timeline().length;if(this.timelineView()!==`waterfall`)return`${this.visibleCalls().length} of ${e}`;let t=this.waterfallCalls().length;return`${t} client ${t===1?`call`:`calls`} of ${e}`});filterStatus=X(()=>{this.callQuery(),this.sideFilter(),this.failedOnly(),this.timelineView(),this.filterFlip=!this.filterFlip;let e=Z(()=>this.countText());return this.filterFlip?`${e} `:e});filterFlip=!0;selectedCall=X(()=>this.visibleCalls().find(e=>e.id===this.selectedCallId())??null);pageSsrRequest=X(()=>this.requests().find(e=>e.id===this.pageRequestId())??null);selectedRequest=X(()=>this.requests().find(e=>e.id===this.selectedRequestId())??null);requestCalls=X(()=>{let e=this.selectedRequest()?.id;return e?this.serverCalls().filter(t=>t.requestId===e):[]});requestPage=X(()=>{let e=this.selectedRequest()?.id;return e?this.pages().find(t=>t.ssrRequestId===e)??null:null});refetched=X(()=>{let e=this.selectedRequest(),t=this.requestPage();if(!e||!t)return[];let n=new Set(this.requestCalls().filter(e=>e.status).map(e=>`${e.method} ${x8(e.url)}`));return t.calls.filter(t=>t.side===`client`&&!t.nativeFetch&&!t.cacheHit&&!t.mocked&&t.at>=e.at&&n.has(`${t.method} ${x8(t.url)}`))});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url})));connect(e){this.rpcSource=e}async load(e){this.loading.set(!0),this.failed.set(!1);try{let t=e.scope(`pangular`).rpc,[n,r]=await Promise.all([t.sharedState(`http`),t.sharedState(`http-payloads`)]);if(this.destroyed)return;let i=e=>{let t=e;this.serverCalls.set(t?.serverCalls??[]),this.serverDropped.set(t?.serverDropped??0),this.requests.set([...t?.requests??[]].reverse()),this.pages.set(t?.pages??[]),this.rules.set(t?.rules??[]),this.overrides.set(t?.ssrOverrides??[])},a=e=>this.payloads.set(e?.pages??{});i(n.value()),a(r.value()),this.stopListening(),this.unsubscribe=[n.on(`updated`,i),r.on(`updated`,a)]}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}retry(){let e=this.rpc();e&&this.load(e)}ngOnDestroy(){this.destroyed=!0,this.stopListening()}stopListening(){for(let e of this.unsubscribe.splice(0))e()}refetchReason(e){let t=`${e.method} ${x8(e.url)}`,n=this.requestCalls().filter(e=>`${e.method} ${x8(e.url)}`===t),r=n[0];return r?.cacheSkip&&n.every(e=>e.cacheSkip===r.cacheSkip)?k8(r.cacheSkip):``}rulePatternOf(e){return e.rulePattern?e.rulePattern:e.ruleId?this.rules().find(t=>t.id===e.ruleId)?.pattern??null:null}clearCallFilters(){this.callQuery.set(``),this.sideFilter.set(`all`),this.failedOnly.set(!1),this.query(`#timeline-search`)?.focus()}openCall(e){this.selectedCallId.set(e),this.afterRender(()=>this.query(`#preview-heading`)?.focus())}closePreview(){let e=this.selectedCallId();this.selectedCallId.set(null),e&&[...this.host.nativeElement.querySelectorAll(`button[data-call-id]`)].find(t=>t.dataset.callId===e)?.focus()}async copyPreview(e){let t=E8(e);t&&await this.copy(t)}async copyKey(e){await this.copy(e)}async copy(e){try{await navigator.clipboard.writeText(e),this.message.set(`Copied.`)}catch{this.message.set(`The clipboard is not available here.`)}}async clearCalls(){try{await oT(this.rpc(),`clear-http-calls`),this.callFeed.resume(),this.selectedCallId.set(null),this.message.set(`Timeline cleared.`)}catch{this.message.set(`Could not clear the timeline.`)}}async refetchPayload(e){if(!this.refetching()){this.refetching.set(!0);try{let t=await oT(this.rpc(),`request-http-payload-refetch`,{pageId:e});if(!t)this.announce(`Could not reach the devtools server.`);else if(t.error)this.announce(t.error);else if(!t.found)this.announce(`The server answered ${t.status} without a TransferState payload.`);else{let e=t.entries??0;this.announce(`Refetched: ${e} entr${e===1?`y`:`ies`}.`)}}catch{this.announce(`Could not refetch the payload.`)}finally{this.refetching.set(!1)}}}announce(e){if(this.message()!==e){this.message.set(e);return}this.message.set(``),this.afterRender(()=>{this.message()===``&&this.message.set(e)})}query(e){return this.host.nativeElement.querySelector(e)}focusAfterRemove(e,t,n){this.afterRender(()=>{let r=this.host.nativeElement,i=r.querySelectorAll(e);(i[Math.min(t,i.length-1)]??r.querySelector(n))?.focus()})}afterRender(e){Sd(e,{injector:this.injector})}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},Jse=(e,t)=>t.id,Yse=(e,t)=>t.name;function Xse(e,t){if(e&1&&(L(0,`div`,5)(1,`dt`),G(2),R(),L(3,`dd`),G(4),R()()),e&2){let e=t.$implicit;E(2),K(e.name),E(),W(`masked`,e.masked),E(),K(e.value)}}function Zse(e,t){if(e&1&&(L(0,`dl`),j(1,Xse,5,4,`div`,5,Yse),R()),e&2){let e=U().$implicit;E(),M(e.rows)}}function Qse(e,t){if(e&1&&(L(0,`p`,4),G(1),R()),e&2){let e=U().$implicit;E(),K(e.none)}}function $se(e,t){if(e&1&&(L(0,`section`,1)(1,`h4`,3),G(2),R(),k(3,Zse,3,0,`dl`)(4,Qse,2,1,`p`,4),R()),e&2){let e=t.$implicit;O(`aria-labelledby`,e.id),E(),B(`id`,e.id),E(),J(``,e.title,` (`,e.rows.length,`)`),E(),A(e.rows.length?3:4)}}var ece=class e{callId=$(``);request=$(void 0);response=$(void 0);sides=X(()=>[{id:`req-headers-${this.callId()}`,title:`Request headers`,rows:j8(this.request()),none:`None recorded.`},{id:`res-headers-${this.callId()}`,title:`Response headers`,rows:j8(this.response()),none:`None recorded. A cross-origin response shows only the headers CORS exposes.`}]);static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-http-headers`]],inputs:{callId:[1,`callId`],request:[1,`request`],response:[1,`response`]},decls:8,vars:0,consts:[[1,`headers`],[1,`side`],[1,`note`],[3,`id`],[1,`none`],[1,`row`]],template:function(e,t){e&1&&(L(0,`div`,0),j(1,$se,5,5,`section`,1,Jse),R(),L(3,`p`,2),G(4,` Request headers are the ones the call had when it reached `),L(5,`code`),G(6,`withPangular()`),R(),G(7,`, before later interceptors added theirs. Credentials, cookies and secret values are masked. `),R()),e&2&&(E(),M(t.sides()))},styles:[`[_nghost-%COMP%] {
+  display: block;
+  margin-top: 12px;
+}
+
+.headers[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (max-width: 640px) {
+  .headers[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+h4[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 6px;
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  font: 12px/1.5 var(--%NS%font-mono);
+}
+
+.row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  gap: 8px;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  overflow-wrap: anywhere;
+}
+
+dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+dd.masked[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-style: italic;
+}
+
+.none[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}`]})};function j8(e){return Object.entries(e??{}).sort(([e],[t])=>e.localeCompare(t)).map(([e,t])=>({name:e,value:t,masked:t.includes(`[redacted]`)}))}function tce(e){let t=/^[a-z][a-z\d+.-]*:\/\/[^/?#]*/i.exec(e);if(t)return t[0].length;let n=/^\/\/[^/?#]*/.exec(e);return n?n[0].length:0}function nce(e,t){let n=t.startsWith(`^`),r=(n?t.slice(1):t).split(`*`),i=n?tce(e):0;for(let[t,a]of r.entries()){if(!a)continue;let r=e.indexOf(a,i);if(r<0||n&&t===0&&r!==i)return!1;i=r+a.length}return!0}function rce(e,t){let n=e.pattern.trim();return!!n&&(e.target===`both`||e.target===t.side)&&(!e.method||e.method.toUpperCase()===t.method.toUpperCase())&&nce(t.url,n)}function ice(e,t){return t.pattern.trim()?e.filter(e=>rce(t,e)):[]}var M8=[{id:`offline`,label:`Offline`,description:`Fails every browser request with a network error (status 0).`,rules:[{pattern:`*`,target:`client`,status:0}]},{id:`slow-3g`,label:`Slow 3G`,description:`Holds every browser request back 2000 ms before it is sent.`,rules:[{pattern:`*`,target:`client`,delayMs:2e3}]},{id:`flaky`,label:`Flaky`,description:`Fails 30% of browser requests with 503 Service Unavailable.`,rules:[{pattern:`*`,target:`client`,status:503,chance:30}]}];function ace(e,t){let n=M8.find(t=>t.id===e);return n?n.rules.map(e=>({...e,id:t(),enabled:!0})):[]}var N8=`page_1`,P8=2e3;function F8(e){return Object.entries(e??{}).map(([e,t])=>({name:e,value:t}))}function I8(e,t){if(!t||/^[a-z][a-z\d+.-]*:/i.test(e))return e;try{return new URL(e,t).href}catch{return e}}function L8(e){try{return[...new URL(e,`http://x`).searchParams].map(([e,t])=>({name:e,value:t}))}catch{return[]}}function R8(e){let t=new Date(Number.isFinite(e)?e:0);return Number.isNaN(t.getTime())?new Date(0).toISOString():t.toISOString()}function oce(e){let t=[];return e.cacheHit&&t.push(`transfer cache`),e.mocked&&t.push(`mocked by a fault rule`),e.faulted&&t.push(`failed by a fault rule`),e.delayMs&&t.push(`delayed ${e.delayMs} ms by a fault rule`),e.cancelled&&t.push(`cancelled`),e.requestId&&t.push(`SSR request ${e.requestId}`),e.origin&&t.push(`likely started by ${e.origin===`defer`?`@defer`:`${e.origin}()`}`),t}function sce(e,t){let n=I8(e.url,e.side===`client`?t:void 0),r=e.responseHeaders?.[`content-type`]??`x-unknown`,i=oce(e),a=e.error&&!e.preview?void 0:e.preview,o=Math.max(0,e.durationMs);return{pageref:N8,startedDateTime:R8(e.at),time:o,request:{method:e.method,url:n,httpVersion:`HTTP/1.1`,cookies:[],headers:F8(e.requestHeaders),queryString:L8(n),headersSize:-1,bodySize:-1},response:{status:e.status,statusText:e.cancelled?`cancelled`:e.error??``,httpVersion:`HTTP/1.1`,cookies:[],headers:F8(e.responseHeaders),content:{size:a?.length??0,mimeType:r,...a===void 0?{}:{text:a},...a!==void 0&&a.length>=P8?{comment:`Clipped at ${P8} characters.`}:{}},redirectURL:e.redirectedTo??``,headersSize:-1,bodySize:-1},cache:{},timings:{send:0,wait:o,receive:0},...i.length?{comment:i.join(`, `)}:{},_side:e.side,...i.length?{_notes:i}:{}}}function cce(e,t){let n=I8(e.url,t),r=Math.max(0,e.renderMs);return{pageref:N8,startedDateTime:R8(e.at),time:Math.max(0,e.durationMs),request:{method:e.method,url:n,httpVersion:`HTTP/1.1`,cookies:[],headers:[],queryString:L8(n),headersSize:-1,bodySize:-1},response:{status:e.status,statusText:``,httpVersion:`HTTP/1.1`,cookies:[],headers:F8(e.headers),content:{size:0,mimeType:e.headers[`content-type`]??`text/html`},redirectURL:e.headers.location??``,headersSize:-1,bodySize:-1},cache:{},timings:{send:0,wait:r,receive:Math.max(0,e.durationMs-r)},comment:`SSR request ${e.id}: the server render that served the page`,_side:`document`}}function lce(e){let t=[...e.ssrRequest?[cce(e.ssrRequest,e.origin)]:[],...e.calls.map(t=>sce(t,e.origin))].sort((e,t)=>e.startedDateTime.localeCompare(t.startedDateTime)),n=t[0]?.startedDateTime??R8(Date.now());return{log:{version:`1.2`,creator:e.creator??{name:`Pangular Inspector`,version:`unknown`},pages:[{startedDateTime:n,id:N8,title:e.title??``,pageTimings:{}}],entries:t,comment:`Exported by Pangular Inspector. Secrets are masked as [redacted]. Request bodies are not recorded and response bodies are clipped previews.`}}}var uce=new Set([`POST`,`PUT`,`PATCH`,`DELETE`]);function z8(e,t,n){let r=[],i=/\[redacted\]|%5Bredacted%5D/i;return(i.test(t)||Object.values(e.requestHeaders??{}).some(e=>i.test(e)))&&r.push(`${n} Masked values ([redacted]) must be filled in before it runs.`),uce.has(e.method.toUpperCase())&&r.push(`${n} The request body was not recorded.`),r}function dce(e,t){let n=I8(e.url,e.side===`client`?t:void 0),r=e.method.toUpperCase(),i=e.requestHeaders??{},a={...r===`GET`?{}:{method:r},...Object.keys(i).length?{headers:i}:{}},o=Object.keys(a).length?`${JSON.stringify(n)}, ${JSON.stringify(a,null,2)}`:JSON.stringify(n);return[...z8(e,n,`//`),`await fetch(${o});`].join(`
+`)}function B8(e){return`'${e.replace(/'/g,`'\\''`)}'`}function fce(e,t){let n=I8(e.url,e.side===`client`?t:void 0),r=e.method.toUpperCase(),i=[`curl ${B8(n)}`];r===`HEAD`?i.push(`--head`):r!==`GET`&&i.push(`-X ${B8(r)}`);for(let[t,n]of Object.entries(e.requestHeaders??{}))i.push(`-H ${B8(`${t}: ${n}`)}`);return[...z8(e,n,`#`),i.join(` \\
+  `)].join(`
+`)}function pce(e,t={}){let n=t.budget??102400,r=e.entries.reduce((e,t)=>e+Math.max(t.size,0),0),i=[...e.entries].filter(e=>e.size>0).sort((e,t)=>t.size-e.size).slice(0,t.top??5).map(e=>({key:e.key,label:e.http?.url??e.key,size:e.size,share:r?Math.round(e.size/r*1e3)/10:0})),a=new Map;for(let t of e.entries){let e=t.http?.url;e&&a.set(e,[...a.get(e)??[],t])}let o=[...a].filter(([,e])=>e.length>1).map(([e,t])=>({url:e,keys:t.map(e=>e.key),size:t.reduce((e,t)=>e+t.size,0)})).sort((e,t)=>t.size-e.size);return{size:e.size,budget:n,overBudget:e.size>n,largest:i,sameUrl:o}}function mce(e){return e<1024?`${e} B`:e<1048576?`${Number((e/1024).toFixed(1))} KB`:`${Number((e/1024/1024).toFixed(1))} MB`}var V8={duplicateWindowMs:2e3,chainGapMs:50,minChain:3};function H8(e){try{let t=new URL(e,`http://x`);return t.pathname+t.search}catch{return e}}function hce(e){return e.filter(e=>e.side===`client`&&!e.cacheHit&&!e.mocked&&!e.cancelled).sort((e,t)=>e.at-t.at)}function U8(e){return`${e.method} ${H8(e.url)}`}function gce(e,t){let n=new Map;for(let t of e){if(t.method.toUpperCase()!==`GET`)continue;let e=`${t.pageUrl??``} ${t.method.toUpperCase()} ${t.url}`;n.set(e,[...n.get(e)??[],t])}let r=[];for(let e of n.values()){let n=[],i=()=>{if(n.length>1){let e=n[n.length-1].at-n[0].at;r.push({kind:`duplicate`,message:`${U8(n[0])} ran ${n.length} times within ${e} ms.`,hint:`Share one request (a service with shareReplay, one resource, or a signal store) instead of fetching it from each place that needs it.`,callIds:n.map(e=>e.id),wastedMs:n.slice(1).reduce((e,t)=>e+Math.max(t.durationMs,0),0)})}};for(let r of e)n.length&&r.at-n[n.length-1].at>t&&(i(),n=[]),n.push(r);i()}return r}function _ce(e,t,n){let r=[];for(let n of e){let e=r.find(e=>{let r=e[e.length-1],i=r.at+Math.max(r.durationMs,0);return(r.pageUrl??``)===(n.pageUrl??``)&&n.at>=i&&n.at-i<=t});e?e.push(n):r.push([n])}return r.filter(e=>e.length>=n).map(e=>{let t=e[0],n=e[e.length-1],r=n.at+Math.max(n.durationMs,0)-t.at,i=Math.max(...e.map(e=>Math.max(e.durationMs,0)));return{kind:`waterfall`,message:`${e.length} calls ran one after another, ${r} ms in all: ${e.map(U8).join(` → `)}.`,hint:`If a call does not need the response before it, start them together (forkJoin, Promise.all, or separate resources). Run in parallel they would take about as long as the slowest one.`,callIds:e.map(e=>e.id),wastedMs:Math.max(0,r-i)}})}function vce(e,t){let n=new Map;for(let e of t)e.side!==`server`||e.status===0||e.status>=400||n.set(`${e.method.toUpperCase()} ${H8(e.url)}`,e);let r=new Set,i=[];for(let t of e){let e=`${t.method.toUpperCase()} ${H8(t.url)}`,a=n.get(e);a&&!r.has(e)&&(r.add(e),i.push({kind:`refetch`,message:`${U8(t)} ran on the server and again in the browser.`,hint:`The transfer cache did not answer it. Check that the browser request matches the server one (URL, params, headers) and that Angular may cache it; explain-ssr-request says why it was not stored.`,callIds:[a.id,t.id],wastedMs:Math.max(t.durationMs,0)}))}return i}function yce(e,t={}){let n=hce(e);return[...gce(n,t.duplicateWindowMs??V8.duplicateWindowMs),..._ce(n,t.chainGapMs??V8.chainGapMs,t.minChain??V8.minChain),...t.serverCalls?vce(n,t.serverCalls):[]]}function bce(e,t){if(e&1){let e=z();L(0,`button`,0),H(`click`,function(){return x(e),S(U().copy(`fetch`))}),G(1,` Copy as fetch `),R(),L(2,`button`,0),H(`click`,function(){return x(e),S(U().copy(`curl`))}),G(3,` Copy as cURL `),R()}if(e&2){let e=t;O(`aria-label`,`Copy `+e.method+` `+e.url+` as fetch`),E(2),O(`aria-label`,`Copy `+e.method+` `+e.url+` as cURL`)}}var xce=class e{call=$(null);done=xv();document=b(Ds);async copy(e){let t=this.call();if(!t)return;let n=this.document.defaultView?.location,r=/^https?:$/.test(n?.protocol??``)?n.origin:void 0,i=e===`fetch`?dce(t,r):fce(t,r);try{await this.document.defaultView.navigator.clipboard.writeText(i);let t=i.includes(`[redacted]`)?` Fill in the masked values first.`:``;this.done.emit(`Copied as ${e===`fetch`?`fetch`:`cURL`}.${t}`)}catch{this.done.emit(`The clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-call-copy`]],inputs:{call:[1,`call`]},outputs:{done:`done`},decls:1,vars:1,consts:[[`type`,`button`,3,`click`]],template:function(e,t){if(e&1&&k(0,bce,4,2),e&2){let e;A((e=t.call())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
+  display: contents;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--%NS%radius-sm);
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease);
+}
+button[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},W8=class e{state=b(A8);draft=w({...v8});addingRule=w(!1);ruleSaves=Promise.resolve(!0);draftMocksOnServer=X(()=>{let e=this.draftRule();return!!e&&D8(e)});draftRule=X(()=>{let e=this.draft(),t=e.pattern.trim();if(!t||t.length>500||this.bodyError()||this.state.rules().length>=50)return null;let n=e.body.trim(),r=Math.min(Math.max(Math.round(Number(e.delayMs))||0,0),1e4),i=e.status.trim()?Number(e.status):n?200:void 0;if(i!==void 0&&!GC(i)||i===void 0&&!r)return null;let a=b8(e.chance);return a===null?null:{pattern:t,enabled:!0,target:e.target,...e.method?{method:e.method}:{},...i===void 0?{}:{status:i},...r?{delayMs:r}:{},...n?{body:n}:{},...a===void 0?{}:{chance:a}}});draftHint=X(()=>{let e=this.draft();return this.state.rules().length>=50?`You can add up to 50 rules. Remove one to add another.`:e.pattern.trim()?e.pattern.trim().length>500?`The URL pattern is limited to 500 characters.`:this.bodyError()?``:e.status.trim()&&!GC(Number(e.status))?`Pick a status from the list.`:b8(e.chance)===null?`Chance is a whole percent from 1 to 99.`:this.draftRule()?!e.status.trim()&&e.body.trim()?`With no status, the mock body returns 200.`:``:`Set a status, a delay or a mock body.`:`Enter a URL pattern to add a rule.`});bodyError=X(()=>{let e=this.draft().body.trim();if(!e)return``;if(e.length>1e5)return`The mock body is limited to ${zse} characters.`;try{return JSON.parse(e),``}catch{return`The mock body must be valid JSON.`}});methodOptions=X(()=>{let e=this.draft().method;return[{value:``,label:`Any`},...(e&&!S8.includes(e)?[...S8,e]:S8).map(e=>({value:e,label:e}))]});setDraft(e,t){this.draft.update(n=>({...n,[e]:t}))}patch(e,t){let n=t.target.value;this.draft.update(t=>({...t,[e]:n}))}mockCall(e){let t=e.method.toUpperCase(),n=Pse(e.url),r=e.error||!e.preview?null:Fse(e.preview);this.draft.set({...v8,pattern:n,method:t,body:r??``});let i=`${t} ${n}`;this.state.message.set(r?`Filled in a rule for ${i} with the preview as its body. Check it, then add the rule.`:e.preview&&!e.error?`Filled in a rule for ${i}. The preview is not complete JSON, so it is not used as the body.`:`Filled in a rule for ${i}. Set a status, a delay or a body, then add the rule.`),this.state.afterRender(()=>this.state.query(`#rule-pattern`)?.focus())}async addRule(e){e.preventDefault();let t=this.draftRule();if(!t||this.addingRule())return;let n={id:y8(),...t};this.addingRule.set(!0);let r=await this.saveRules(e=>[[...e,n],n],`Rule added.`);this.addingRule.set(!1),r&&(this.draft.set({...v8}),this.state.query(`#rule-pattern`)?.focus())}async addPreset(e){let t=ace(e,y8);if(t.length){if(this.state.rules().length+t.length>50){this.state.message.set(`You can add up to 50 rules. Remove one to add the preset.`);return}await this.saveRules(e=>[[...e,...t],t[0]],`Added ${t.length===1?`a rule`:`${t.length} rules`} for every browser request.`)}}toggleRule(e){this.saveRules(t=>{let n=t.find(t=>t.id===e);return n?[t.map(t=>t.id===e?{...t,enabled:!t.enabled}:t),n]:null},`Rule updated.`)}async removeRule(e){let t=-1;await this.saveRules(n=>(t=n.findIndex(t=>t.id===e),t<0?null:[n.filter(t=>t.id!==e),n[t]]),`Rule removed.`)&&this.state.focusAfterRemove(`[data-remove-rule]`,t,`#rule-list-heading`)}saveRules(e,t){let n=this.ruleSaves.then(async()=>{let n=e(this.state.rules());if(!n)return!1;let[r,i]=n;try{let e=await oT(this.state.rpc(),`set-http-rules`,r);return this.state.rules.set(Array.isArray(e)?e:r),this.state.announce(i.target===`client`?t:`${t} Reload the page to apply it to SSR.`),!0}catch{return this.state.message.set(`Could not save the rules.`),!1}});return this.ruleSaves=n,n}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})};function Sce(e,t){if(e&1){let e=z();P(0,`button`,6),V(`click`,function(){x(e);let t=U(),n=Y(0);return S(t.copyPreview(n))}),G(1,` Copy `),F()}if(e&2){U();let e=Y(0);O(`aria-label`,`Copy the response of `+e.method+` `+e.url)}}function Cce(e,t){if(e&1){let e=z();P(0,`button`,16),V(`click`,function(){x(e);let t=U(),n=Y(0);return S(t.mockCall(n))}),G(1,` Mock this request `),F()}if(e&2){let e=U();N(`disabled`,!e.canWrite()),O(`aria-describedby`,e.canWrite()?null:`http-writes-off`)}}function wce(e,t){e&1&&(P(0,`p`,11),G(1,` Made with `),P(2,`code`),G(3,`fetch()`),F(),G(4,` directly, which skips the HttpClient interceptor, so a fault rule cannot mock it. `),F())}function Tce(e,t){e&1&&(P(0,`p`,12),G(1,` Matched rule `),P(2,`code`),G(3),F()()),e&2&&(E(3),K(t))}var Ece=class e{call=$.required();state=b(A8);ruleState=b(W8);canWrite=this.state.canWrite;message=this.state.message;callTone=T8;previewText=E8;statusLabel=w8;rulePatternOf(e){return this.state.rulePatternOf(e)}copyPreview(e){this.state.copyPreview(e)}mockCall(e){this.ruleState.mockCall(e)}closePreview(){this.state.closePreview()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`div`,`appResponsePreview`,``]],inputs:{call:[1,`call`]},decls:23,vars:24,consts:[[1,`preview-head`],[`id`,`preview-heading`,`tabindex`,`-1`],[1,`preview-actions`],[`type`,`button`,1,`ghost`],[3,`done`,`call`],[`type`,`button`,`aria-controls`,`rule-form`,1,`ghost`,3,`disabled`],[`type`,`button`,1,`ghost`,3,`click`],[1,`preview-meta`],[1,`method`],[1,`status`],[1,`preview-url`,3,`title`],[1,`muted`,`small`],[1,`preview-rule`],[3,`value`],[`tabindex`,`0`,`role`,`region`,1,`preview-body`],[3,`callId`,`request`,`response`],[`type`,`button`,`aria-controls`,`rule-form`,1,`ghost`,3,`click`,`disabled`]],template:function(e,t){if(e&1&&(G_(0),P(1,`div`,0)(2,`h3`,1),G(3,`Response preview`),F(),P(4,`div`,2),k(5,Sce,2,1,`button`,3),P(6,`app-call-copy`,4),V(`done`,function(e){return t.message.set(e)}),F(),k(7,Cce,2,2,`button`,5),P(8,`button`,6),V(`click`,function(){return t.closePreview()}),G(9,`Close`),F()()(),P(10,`p`,7)(11,`span`,8),G(12),F(),P(13,`span`,9),G(14),F(),P(15,`span`,10),G(16),F()(),k(17,wce,5,0,`p`,11),k(18,Tce,4,1,`p`,12),I(19,`app-redaction-count`,13),P(20,`pre`,14),G(21),F(),I(22,`app-http-headers`,15)),e&2){let e,n=K_(t.call());E(5),A(!n.error&&n.preview?5:-1),E(),N(`call`,n),E(),A(n.nativeFetch?-1:7),E(5),K(n.method),E(),W(`ok`,t.callTone(n)===`ok`)(`redirect`,t.callTone(n)===`redirect`)(`bad`,t.callTone(n)===`bad`),E(),K(t.statusLabel(n)),E(),N(`title`,n.url),E(),K(n.url),E(),A(n.nativeFetch?17:-1),E(),A((e=t.rulePatternOf(n))?18:-1,e),E(),N(`value`,n),E(),W(`error`,!!n.error&&!n.cancelled),O(`aria-label`,n.error?`Response error`:`Response body`),E(),K(n.error??t.previewText(n)??`(no body)`),E(),N(`callId`,n.id)(`request`,n.requestHeaders)(`response`,n.responseHeaders)}},dependencies:[xce,ece,Xj],styles:[`h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.method[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-2);
+}
+
+.status.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.status.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.dot[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: middle;
+}
+
+.notes[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 4px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.tag.server[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.fault[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tag.mock[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.rule-ref[_ngcontent-%COMP%] {
+  gap: 4px;
+  max-width: 220px;
+}
+
+.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+}
+
+.tag.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.tag.off-tag[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+pre[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text-2);
+  font: 12px/1.5 var(--%NS%font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+pre[_ngcontent-%COMP%]    + pre[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+pre.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  color: var(--%NS%warn);
+}
+
+pre.error[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  color: var(--%NS%danger);
+}
+
+.preview[_ngcontent-%COMP%] {
+  animation: enter 0.2s var(--%NS%ease) both;
+  margin-top: 16px;
+}
+
+.preview-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px 8px;
+  margin-bottom: 4px;
+}
+
+.preview-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+pre.preview-body[_ngcontent-%COMP%] {
+  max-height: 320px;
+}
+
+.preview-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.preview-meta[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin-bottom: 8px;
+}
+
+.request-call[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin: 0 0 4px;
+}
+
+.request-call[_ngcontent-%COMP%]   .preview-url[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+}
+
+.skip-reason[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.nav-stats[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+}
+
+.preview-rule[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.preview-url[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}`]})},Dce=[`callsBody`],Oce=(e,t)=>t.entry.side+t.entry.id;function kce(e,t){if(e&1){let e=z();P(0,`app-network-waterfall`,18),V(`open`,function(t){return x(e),S(U().openCall(t))}),F()}if(e&2){let e=U();N(`calls`,e.waterfallCalls())(`selectedId`,e.selectedCall()?.id??null)}}function Ace(e,t){e&1&&(P(0,`p`,19),G(1,` Rows render as you scroll, so the browser's find only sees the ones near view; the search field searches them all. `),F())}function jce(e,t){if(e&1&&(P(0,`tr`,28),I(1,`td`,30),F()),e&2){let e=U(2);E(),f_(`height`,e.callWindow.padTop(),`px`)}}function Mce(e,t){e&1&&(P(0,`span`,41),G(1,`fetch()`),F())}function Nce(e,t){e&1&&I(0,`app-call-origin`,42),e&2&&(U(),N(`origin`,Y(0).origin))}function Pce(e,t){e&1&&(P(0,`span`,32),G(1,`transfer cache`),F())}function Fce(e,t){if(e&1&&(P(0,`span`,32),G(1),F()),e&2){U();let e=Y(0);E(),q(`delayed `,e.delayMs,` ms`)}}function Ice(e,t){e&1&&(P(0,`span`,43),G(1,`mocked`),F())}function Lce(e,t){e&1&&(P(0,`span`,44),G(1,`faulted`),F())}function Rce(e,t){if(e&1&&(P(0,`span`,45),G(1,`rule `),P(2,`code`),G(3),F()()),e&2){let e=t;N(`title`,`Matched rule: `+e),E(3),K(e)}}function zce(e,t){if(e&1){let e=z();G_(0),P(1,`tr`,31),V(`click`,function(){x(e);let t=Y(0);return S(U(2).openCall(t.id))}),P(2,`td`)(3,`span`,32),G(4),F()(),P(5,`td`,33),G(6),F(),P(7,`td`,34)(8,`button`,35),G(9),F()(),P(10,`td`,36),G(11),F(),P(12,`td`,37),I(13,`span`,38),G(14),F(),P(15,`td`,39),G(16),F(),P(17,`td`)(18,`div`,40),k(19,Mce,2,0,`span`,41),k(20,Nce,1,1,`app-call-origin`,42),k(21,Pce,2,0,`span`,32),k(22,Fce,2,1,`span`,32),k(23,Ice,2,0,`span`,43),k(24,Lce,2,0,`span`,44),k(25,Rce,4,2,`span`,45),F()()()}if(e&2){let e,n=t.$implicit,r=U(2),i=K_(n.entry);E(),W(`selected`,r.selectedCall()?.id===i.id),O(`aria-rowindex`,n.index+2)(`data-vindex`,n.index),E(2),W(`server`,i.side===`server`),E(),K(i.side===`server`?`SSR`:`Client`),E(2),K(i.method),E(2),N(`title`,i.url),O(`data-call-id`,i.id)(`aria-pressed`,r.selectedCall()?.id===i.id)(`aria-controls`,r.selectedCall()?`call-preview`:null),E(),q(` `,i.url,` `),E(),N(`title`,i.pageUrl??``),E(),q(` `,i.pageUrl??``,` `),E(),W(`ok`,r.callTone(i)===`ok`)(`redirect`,r.callTone(i)===`redirect`)(`bad`,r.callTone(i)===`bad`),E(2),q(``,r.statusLabel(i),` `),E(2),q(``,i.durationMs,` ms`),E(3),A(i.nativeFetch?19:-1),E(),A(i.origin?20:-1),E(),A(i.cacheHit?21:-1),E(),A(i.delayMs?22:-1),E(),A(i.mocked?23:-1),E(),A(i.faulted?24:-1),E(),A((e=r.rulePatternOf(i))?25:-1,e)}}function Bce(e,t){if(e&1&&(P(0,`tr`,28),I(1,`td`,30),F()),e&2){let e=U(2);E(),f_(`height`,e.callWindow.padBottom(),`px`)}}function Vce(e,t){if(e&1){let e=z();k(0,Ace,2,0,`p`,19),P(1,`div`,20)(2,`table`)(3,`thead`)(4,`tr`,21)(5,`th`,22),G(6,`Side`),F(),P(7,`th`,23),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.callSort,t)||(n.callSort=t),S(t)}),G(8,`Method`),F(),P(9,`th`,24),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.callSort,t)||(n.callSort=t),S(t)}),G(10,`URL`),F(),P(11,`th`,22),G(12,`Page`),F(),P(13,`th`,25),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.callSort,t)||(n.callSort=t),S(t)}),G(14,`Status`),F(),P(15,`th`,26),U_(`sortChange`,function(t){x(e);let n=U();return H_(n.callSort,t)||(n.callSort=t),S(t)}),G(16,`Time`),F(),P(17,`th`,22),G(18,`Notes`),F()()(),P(19,`tbody`,27,0),k(21,jce,2,2,`tr`,28),j(22,zce,26,31,`tr`,29,Oce),k(24,Bce,2,2,`tr`,28),F()()()}if(e&2){let e=U();A(e.callWindow.enabled()?0:-1),E(2),O(`aria-rowcount`,e.visibleCalls().length+1),E(5),V_(`sort`,e.callSort),E(2),V_(`sort`,e.callSort),E(4),V_(`sort`,e.callSort),E(2),V_(`sort`,e.callSort),E(4),N(`rovingWindow`,e.callWindow),E(2),A(e.callWindow.padTop()?21:-1),E(),M(e.shownCalls()),E(2),A(e.callWindow.padBottom()?24:-1)}}function Hce(e,t){e&1&&G(0),e&2&&q(` Nothing matches “`,U(2).callQuery().trim(),`” with these filters. `)}function Uce(e,t){e&1&&G(0),e&2&&q(` None of the `,U(2).timeline().length,` requests fit these filters. `)}function Wce(e,t){if(e&1){let e=z();P(0,`div`,15)(1,`p`),G(2,`No requests match.`),F(),P(3,`p`,46),k(4,Hce,1,1)(5,Uce,1,1),F(),P(6,`div`,47)(7,`button`,9),V(`click`,function(){return x(e),S(U().clearCallFilters())}),G(8,`Clear filters`),F()()()}if(e&2){let e=U();E(4),A(e.callQuery().trim()?4:5)}}function Gce(e,t){e&1&&(P(0,`div`,16)(1,`p`),G(2,`No requests yet.`),F(),P(3,`p`,46),G(4,` Add `),P(5,`code`),G(6,`withPangular()`),F(),G(7,` to `),P(8,`code`),G(9,`provideHttpClient`),F(),G(10,`, then load a page of the app. `),F()())}function Kce(e,t){if(e&1){let e=z();P(0,`div`,48),V(`keydown.escape`,function(){return x(e),S(U().closePreview())}),F()}e&2&&N(`call`,t)}var qce=class e{state=b(A8);timeline=this.state.timeline;droppedCalls=this.state.droppedCalls;maxCalls=this.state.maxCalls;callFeed=this.state.callFeed;callQuery=this.state.callQuery;callSort=this.state.callSort;sideFilter=this.state.sideFilter;sideOptions=this.state.sideOptions;failedOnly=this.state.failedOnly;timelineView=this.state.timelineView;countText=this.state.countText;filterStatus=this.state.filterStatus;visibleCalls=this.state.visibleCalls;waterfallCalls=this.state.waterfallCalls;selectedCall=this.state.selectedCall;callTone=T8;statusLabel=w8;callWindow=new XN({count:X(()=>this.visibleCalls().length),estimate:37});shownCalls=X(()=>{let{start:e,end:t}=this.callWindow.range();return this.visibleCalls().slice(e,t).map((t,n)=>({entry:t,index:e+n}))});callsBody=Ov(`callsBody`);constructor(){zR(this.callFeed,()=>{if(this.callSort())return;let e=this.callsBody()?.nativeElement.closest(`.table-wrap`);e&&(e.scrollTop=0)}),T(()=>{let e=this.callsBody()?.nativeElement;e&&this.callWindow.attach(e)})}rulePatternOf(e){return this.state.rulePatternOf(e)}openCall(e){this.state.openCall(e)}closePreview(){this.state.closePreview()}clearCallFilters(){this.state.clearCallFilters()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appCallTimeline`,``]],viewQuery:function(e,t){e&1&&Ug(t.callsBody,Dce,5),e&2&&Wg()},decls:25,vars:16,consts:[[`callsBody`,``],[`id`,`timeline-heading`],[`what`,`HTTP calls`,`limit`,`httpCalls`,3,`dropped`,`max`],[`role`,`group`,`aria-label`,`Filter the HTTP timeline`,1,`filters`],[`inputId`,`timeline-search`,`placeholder`,`Filter by URL or method`,`saveKey`,`network`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Side`,1,`side-filter`,3,`valueChange`,`options`,`value`],[1,`inline`,`failed-toggle`],[`type`,`checkbox`,3,`change`,`checked`],[`role`,`group`,`aria-label`,`Timeline view`,1,`view-toggle`],[`type`,`button`,3,`click`],[1,`total`],[`role`,`status`,1,`sr-only`],[1,`live-row`],[`what`,`calls`,3,`feed`],[3,`calls`,`selectedId`],[`role`,`status`,1,`empty`,`no-match`],[1,`empty`],[`appResponsePreview`,``,`id`,`call-preview`,`role`,`region`,`aria-labelledby`,`preview-heading`,1,`preview`,3,`call`],[3,`open`,`calls`,`selectedId`],[1,`muted`,`small`,`window-note`],[1,`table-wrap`],[`aria-rowindex`,`1`],[`scope`,`col`],[`scope`,`col`,`appSortHeader`,`method`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`url`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`status`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`time`,1,`num`,3,`sortChange`,`sort`],[`appRovingList`,`button[data-call-id]`,3,`rovingWindow`],[`aria-hidden`,`true`,1,`spacer`],[3,`selected`],[`colspan`,`7`],[3,`click`],[1,`tag`],[1,`method`],[1,`url`],[`type`,`button`,1,`link`,3,`title`],[1,`page-url`,3,`title`],[1,`status`],[`aria-hidden`,`true`,1,`dot`],[1,`num`],[1,`notes`],[`title`,`Made with fetch() directly, not through HttpClient`,1,`tag`],[3,`origin`],[1,`tag`,`mock`],[1,`tag`,`fault`],[1,`tag`,`rule-ref`,3,`title`],[1,`muted`,`small`],[1,`empty-actions`],[`appResponsePreview`,``,`id`,`call-preview`,`role`,`region`,`aria-labelledby`,`preview-heading`,1,`preview`,3,`keydown.escape`,`call`]],template:function(e,t){if(e&1&&(P(0,`h2`,1),G(1),F(),I(2,`app-limit-note`,2),P(3,`div`,3)(4,`app-search-field`,4),U_(`valueChange`,function(e){return H_(t.callQuery,e)||(t.callQuery=e),e}),F(),P(5,`app-select`,5),U_(`valueChange`,function(e){return H_(t.sideFilter,e)||(t.sideFilter=e),e}),F(),P(6,`label`,6)(7,`input`,7),V(`change`,function(e){return t.failedOnly.set(e.target.checked)}),F(),G(8,` Failed only `),F(),P(9,`div`,8)(10,`button`,9),V(`click`,function(){return t.timelineView.set(`table`)}),G(11,` Table `),F(),P(12,`button`,9),V(`click`,function(){return t.timelineView.set(`waterfall`)}),G(13,` Waterfall `),F()(),P(14,`span`,10),G(15),F(),P(16,`span`,11),G(17),F()(),P(18,`div`,12),I(19,`app-live-controls`,13),F(),k(20,kce,1,2,`app-network-waterfall`,14)(21,Vce,25,9)(22,Wce,9,1,`div`,15)(23,Gce,11,0,`div`,16),k(24,Kce,1,1,`div`,17)),e&2){let e;E(),q(`HTTP timeline (`,t.timeline().length,`)`),E(),N(`dropped`,t.droppedCalls())(`max`,t.maxCalls()),E(),W(`no-calls`,!t.timeline().length),E(),V_(`value`,t.callQuery),E(),N(`options`,t.sideOptions),V_(`value`,t.sideFilter),E(2),N(`checked`,t.failedOnly()),E(3),O(`aria-pressed`,t.timelineView()===`table`),E(2),O(`aria-pressed`,t.timelineView()===`waterfall`),E(3),K(t.countText()),E(2),K(t.filterStatus()),E(2),N(`feed`,t.callFeed),E(),A(t.visibleCalls().length&&t.timelineView()===`waterfall`?20:t.visibleCalls().length?21:t.timeline().length?22:23),E(4),A((e=t.selectedCall())?24:-1,e)}},dependencies:[Ase,dD,BR,Dse,Ece,XV,iD,JE,DV],styles:[`h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.filters[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 12px;
+}
+
+.live-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: -4px 0 12px;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+.search[_ngcontent-%COMP%]:focus-within   .search-icon[_ngcontent-%COMP%] {
+  stroke: var(--%NS%accent);
+}
+
+.filters[_ngcontent-%COMP%]   input[type=search][_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding-left: 34px;
+}
+
+.filters[_ngcontent-%COMP%]   .side-filter[_ngcontent-%COMP%] {
+  flex: 0 0 140px;
+}
+
+.failed-toggle[_ngcontent-%COMP%] {
+  flex: none;
+  height: var(--%NS%control-h);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.total[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+
+.filters.no-calls[_ngcontent-%COMP%]   .total[_ngcontent-%COMP%] {
+  display: none;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: min(420px, 60vh);
+  overflow: auto;
+  margin: 0 -16px;
+  padding: 0 16px;
+}
+
+.table-wrap[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  height: 36px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+th[_ngcontent-%COMP%]:first-child, 
+td[_ngcontent-%COMP%]:first-child {
+  padding-left: 8px;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  height: 32px;
+  border-bottom-color: var(--%NS%border-strong);
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+}
+
+td.num[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {
+  cursor: pointer;
+}
+
+tbody[_ngcontent-%COMP%]   tr.spacer[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+}
+
+.window-note[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+}
+
+tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], 
+tr.selected[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+}
+
+tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+td.url[_ngcontent-%COMP%] {
+  width: 100%;
+  max-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+tr.selected[_ngcontent-%COMP%]   td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+td.page-url[_ngcontent-%COMP%] {
+  max-width: 160px;
+  overflow: hidden;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.method[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-2);
+}
+
+.status.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.status.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.dot[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: middle;
+}
+
+.notes[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 4px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.tag.server[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.fault[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tag.mock[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.rule-ref[_ngcontent-%COMP%] {
+  gap: 4px;
+  max-width: 220px;
+}
+
+.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+}
+
+.tag.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.tag.off-tag[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.view-toggle[_ngcontent-%COMP%] {
+  display: inline-flex;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  overflow: hidden;
+}
+
+.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  height: calc(var(--%NS%control-h) - 2px);
+  padding: 0 10px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--%NS%text-2);
+}
+
+.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]    + button[_ngcontent-%COMP%] {
+  border-left: 1px solid var(--%NS%border-strong);
+}
+
+.view-toggle[_ngcontent-%COMP%]   button[aria-pressed=true][_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.view-toggle[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.preview[_ngcontent-%COMP%] {
+  animation: enter 0.2s var(--%NS%ease) both;
+  margin-top: 16px;
+}
+
+.preview-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px 8px;
+  margin-bottom: 4px;
+}
+
+.preview-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+pre.preview-body[_ngcontent-%COMP%] {
+  max-height: 320px;
+}
+
+.preview-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.preview-meta[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin-bottom: 8px;
+}
+
+.request-call[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin: 0 0 4px;
+}
+
+.request-call[_ngcontent-%COMP%]   .preview-url[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+}
+
+.skip-reason[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.nav-stats[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+}
+
+.preview-rule[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.preview-url[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}`]})},Jce=class e{calls=$([]);pattern=$(``);method=$(``);target=$(`both`);matched=X(()=>{let e=this.pattern().trim();return e?ice(this.calls(),{pattern:e,method:this.method()||void 0,target:this.target()}).length:null});text=X(()=>{let e=this.matched();if(e===null)return``;let t=this.calls().length;if(!t)return`No calls recorded yet to check the pattern against.`;if(t===1)return e?`Matches the only recorded call.`:`Does not match the only recorded call. It can still match later requests.`;let n=`${t} recorded calls`;return e===0?`Matches none of the ${n}. It can still match later requests.`:e===t?`Matches all ${n}.`:`Matches ${e} of the ${n}.`});static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-rule-match-count`]],inputs:{calls:[1,`calls`],pattern:[1,`pattern`],method:[1,`method`],target:[1,`target`]},decls:2,vars:1,consts:[[`role`,`status`,1,`match`]],template:function(e,t){e&1&&(L(0,`p`,0),G(1),R()),e&2&&(E(),K(t.text()))},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.match[_ngcontent-%COMP%] {
+  margin: 0;
+  min-height: 1.5em;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}`]})},Yce=(e,t)=>t.id;function Xce(e,t){if(e&1){let e=z();L(0,`li`)(1,`button`,3),H(`click`,function(){let t=x(e).$implicit;return S(U().add.emit(t.id))}),G(2),R(),L(3,`span`,4),G(4),R()()}if(e&2){let e=t.$implicit,n=U();E(),B(`disabled`,n.disabled()),O(`data-preset`,e.id)(`aria-describedby`,`preset-`+e.id+` `+n.describedBy()),E(),q(` `,e.label,` `),E(),B(`id`,`preset-`+e.id),E(),K(e.description)}}var Zce=class e{disabled=$(!1);describedBy=$(``);add=xv();presets=M8;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-rule-presets`]],inputs:{disabled:[1,`disabled`],describedBy:[1,`describedBy`]},outputs:{add:`add`},decls:8,vars:0,consts:[[`role`,`group`,`aria-labelledby`,`rule-presets-label`,1,`presets`],[`id`,`rule-presets-label`,1,`label`],[1,`note`],[`type`,`button`,1,`ghost`,3,`click`,`disabled`],[1,`what`,3,`id`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`span`,1),G(2,`Presets`),R(),L(3,`ul`),j(4,Xce,5,6,`li`,null,Yce),R(),L(6,`p`,2),G(7,` A preset adds plain rules for every browser request. Rules above it match first. Remove the rules to stop it. `),R()()),e&2&&(E(4),M(t.presets))},styles:[`[_nghost-%COMP%] {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: 6px;
+}
+
+ul[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: 7.5em minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+button[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-2);
+}
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+button[_ngcontent-%COMP%]:disabled {
+  cursor: not-allowed;
+  color: var(--%NS%text-2);
+}
+
+.what[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},Qce=(e,t)=>t.id;function $ce(e,t){if(e&1&&(P(0,`p`,1),G(1),F()),e&2){let e=U();E(),K(e.writesOff)}}function ele(e,t){e&1&&(P(0,`p`,19),G(1,` SSR mocks are not transferred to the client: the browser requests the URL again and gets the real response unless the rule also applies on the client. `),F())}function tle(e,t){e&1&&(P(0,`span`),G(1,`passthrough`),F())}function nle(e,t){e&1&&(P(0,`span`,33),G(1,`network error`),F())}function rle(e,t){if(e&1&&(P(0,`span`,36),G(1),F()),e&2){let e=U().$implicit,t=U();W(`ok`,t.statusTone(e.status)===`ok`)(`redirect`,t.statusTone(e.status)===`redirect`)(`bad`,t.statusTone(e.status)===`bad`),E(),K(e.status)}}function ile(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),q(``,e.delayMs,` ms`)}}function ale(e,t){e&1&&(P(0,`span`),G(1,`mock body`),F())}function ole(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),q(``,e.chance,`% of requests`)}}function sle(e,t){e&1&&(P(0,`p`,35),G(1,` The SSR mock is not written to TransferState, so the browser requests this URL again. `),F())}function cle(e,t){if(e&1){let e=z();P(0,`li`)(1,`label`,27)(2,`input`,28),V(`change`,function(){let t=x(e).$implicit;return S(U().toggleRule(t.id))}),F(),P(3,`code`,29)(4,`span`,30),G(5),F(),G(6),F()(),P(7,`button`,31),V(`click`,function(){let t=x(e).$implicit;return S(U().removeRule(t.id))}),G(8,` Remove `),F(),P(9,`span`,32)(10,`span`),G(11),F(),k(12,tle,2,0,`span`)(13,nle,2,0,`span`,33)(14,rle,2,7,`span`,34),k(15,ile,2,1,`span`),k(16,ale,2,0,`span`),k(17,ole,2,1,`span`),F(),k(18,sle,2,0,`p`,35),F()}if(e&2){let e=t.$implicit,n=U();W(`off`,!e.enabled),E(2),N(`checked`,e.enabled)(`disabled`,!n.canWrite()),O(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Enable rule for `+e.pattern),E(),N(`title`,e.pattern),E(2),K(e.method||`ANY`),E(),q(` `,e.pattern),E(),N(`disabled`,!n.canWrite()),O(`aria-describedby`,n.canWrite()?null:`http-writes-off`)(`aria-label`,`Remove rule for `+e.pattern),E(4),K(n.targetLabel(e.target)),E(),A(e.status===void 0?12:e.status===0?13:14),E(3),A(e.delayMs?15:-1),E(),A(e.body?16:-1),E(),A(e.chance?17:-1),E(),A(n.mocksOnServer(e)?18:-1)}}function lle(e,t){e&1&&(P(0,`li`,26),G(1,`No rules. SSR rules apply on the next page load.`),F())}var ule=class e{state=b(A8);ruleState=b(W8);canWrite=this.state.canWrite;writesOff=this.state.writesOff;timeline=this.state.timeline;rules=this.state.rules;draft=this.ruleState.draft;draftRule=this.ruleState.draftRule;draftHint=this.ruleState.draftHint;draftMocksOnServer=this.ruleState.draftMocksOnServer;bodyError=this.ruleState.bodyError;addingRule=this.ruleState.addingRule;methodOptions=this.ruleState.methodOptions;bodyPlaceholder=`{ "error": "Service unavailable" }`;statusOptions=Bse;targetOptions=[{value:`both`,label:`SSR + client`},{value:`server`,label:`SSR only`},{value:`client`,label:`Client only`}];mocksOnServer=D8;statusTone=C8;targetLabel=Hse;setDraft(e,t){this.ruleState.setDraft(e,t)}patch(e,t){this.ruleState.patch(e,t)}addRule(e){this.ruleState.addRule(e)}addPreset(e){this.ruleState.addPreset(e)}toggleRule(e){this.ruleState.toggleRule(e)}removeRule(e){this.ruleState.removeRule(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appFaultRules`,``]],decls:55,vars:29,consts:[[`id`,`rules-heading`],[`id`,`http-writes-off`,1,`muted`,`small`],[3,`add`,`disabled`,`describedBy`],[`id`,`rule-form`,1,`rule-form`,3,`submit`],[1,`hint`],[`id`,`rule-pattern`,`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`placeholder`,`e.g. /api/products`,3,`input`,`value`],[3,`calls`,`pattern`,`method`,`target`],[1,`row`],[1,`field-group`],[`id`,`rule-method-label`],[`labelledBy`,`rule-method-label`,3,`valueChange`,`options`,`value`],[`id`,`rule-target-label`],[`labelledBy`,`rule-target-label`,3,`valueChange`,`describedBy`,`options`,`value`],[`id`,`rule-status-label`],[`labelledBy`,`rule-status-label`,3,`valueChange`,`describedBy`,`options`,`value`],[`type`,`number`,`inputmode`,`numeric`,`min`,`0`,`max`,`10000`,`placeholder`,`0`,3,`input`,`value`],[`id`,`rule-chance`,`type`,`number`,`inputmode`,`numeric`,`min`,`1`,`max`,`99`,`step`,`1`,`placeholder`,`100`,3,`input`,`value`],[`rows`,`3`,`spellcheck`,`false`,`aria-describedby`,`body-error`,3,`input`,`placeholder`,`value`],[`id`,`body-error`,1,`field-error`],[`id`,`rule-ssr-note`,1,`muted`,`small`],[`id`,`rule-hint`,1,`muted`,`small`],[1,`form-actions`],[`type`,`submit`,3,`disabled`],[`id`,`rule-list-heading`,`tabindex`,`-1`,1,`rules-heading`],[1,`rules`],[3,`off`],[1,`empty-rule`],[1,`inline`],[`type`,`checkbox`,3,`change`,`checked`,`disabled`],[1,`rule-pattern`,3,`title`],[1,`rule-method`],[`type`,`button`,`data-remove-rule`,``,1,`link`,`remove`,3,`click`,`disabled`],[1,`rule-meta`],[1,`status`,`bad`],[1,`status`,3,`ok`,`redirect`,`bad`],[1,`rule-note`],[1,`status`]],template:function(e,t){e&1&&(P(0,`h2`,0),G(1,`Fault injection`),F(),k(2,$ce,2,1,`p`,1),P(3,`app-rule-presets`,2),V(`add`,function(e){return t.addPreset(e)}),F(),P(4,`form`,3),V(`submit`,function(e){return t.addRule(e)}),P(5,`label`)(6,`span`),G(7,`URL pattern `),P(8,`span`,4),G(9,`(substring or * glob, ^ anchors the path)`),F()(),P(10,`input`,5),V(`input`,function(e){return t.patch(`pattern`,e)}),F()(),I(11,`app-rule-match-count`,6),P(12,`div`,7)(13,`div`,8)(14,`span`,9),G(15,`Method`),F(),P(16,`app-select`,10),V(`valueChange`,function(e){return t.setDraft(`method`,e??``)}),F()(),P(17,`div`,8)(18,`span`,11),G(19,`Apply on`),F(),P(20,`app-select`,12),V(`valueChange`,function(e){return t.setDraft(`target`,e??`both`)}),F()()(),P(21,`div`,7)(22,`div`,8)(23,`span`,13),G(24,`Status`),F(),P(25,`app-select`,14),V(`valueChange`,function(e){return t.setDraft(`status`,e??``)}),F()(),P(26,`label`),G(27,` Delay (ms) `),P(28,`input`,15),V(`input`,function(e){return t.patch(`delayMs`,e)}),F()()(),P(29,`label`)(30,`span`),G(31,`Chance (%) `),P(32,`span`,4),G(33,`(optional, share of matching requests)`),F()(),P(34,`input`,16),V(`input`,function(e){return t.patch(`chance`,e)}),F()(),P(35,`label`)(36,`span`),G(37,`Mock JSON body `),P(38,`span`,4),G(39,`(optional)`),F()(),P(40,`textarea`,17),V(`input`,function(e){return t.patch(`body`,e)}),F()(),P(41,`p`,18),G(42),F(),k(43,ele,2,0,`p`,19),P(44,`p`,20),G(45),F(),P(46,`div`,21)(47,`button`,22),G(48,` Add rule `),F()()(),P(49,`h3`,23),G(50),F(),P(51,`ul`,24),j(52,cle,19,18,`li`,25,Qce,!1,lle,2,0,`li`,26),F()),e&2&&(E(2),A(t.canWrite()?-1:2),E(),N(`disabled`,!t.canWrite())(`describedBy`,t.canWrite()?``:`http-writes-off`),E(7),N(`value`,t.draft().pattern),E(),N(`calls`,t.timeline())(`pattern`,t.draft().pattern)(`method`,t.draft().method)(`target`,t.draft().target),E(5),N(`options`,t.methodOptions())(`value`,t.draft().method),E(4),N(`describedBy`,t.draftMocksOnServer()?`rule-ssr-note`:``)(`options`,t.targetOptions)(`value`,t.draft().target),E(5),N(`describedBy`,t.draftMocksOnServer()?`rule-ssr-note`:``)(`options`,t.statusOptions)(`value`,t.draft().status),E(3),N(`value`,t.draft().delayMs),E(6),N(`value`,t.draft().chance),E(6),N(`placeholder`,t.bodyPlaceholder)(`value`,t.draft().body),O(`aria-invalid`,t.bodyError()?`true`:null),E(2),K(t.bodyError()),E(),A(t.draftMocksOnServer()?43:-1),E(2),K(t.draftHint()),E(2),N(`disabled`,!t.canWrite()||!t.draftRule()),O(`aria-disabled`,t.addingRule()||null)(`aria-describedby`,t.canWrite()?`rule-hint`:`http-writes-off`),E(3),q(`Rules (`,t.rules().length,`)`),E(2),M(t.rules()))},dependencies:[Jce,Zce,JE],styles:[`@charset "UTF-8";
+h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.method[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-2);
+}
+
+.status.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.status.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.dot[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: middle;
+}
+
+.notes[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 4px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.tag.server[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.fault[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tag.mock[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.rule-ref[_ngcontent-%COMP%] {
+  gap: 4px;
+  max-width: 220px;
+}
+
+.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+}
+
+.tag.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.tag.off-tag[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.field-group[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.field-group[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  width: 100%;
+}
+
+.rule-note[_ngcontent-%COMP%] {
+  grid-column: 1/-1;
+  margin: 0;
+  padding-left: 24px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.rule-form[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 420px) {
+  .row[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.field-error[_ngcontent-%COMP%] {
+  margin-top: -4px;
+  color: var(--%NS%danger);
+  font-size: 12px;
+}
+
+.field-error[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.form-actions[_ngcontent-%COMP%] {
+  display: flex;
+}
+
+.rules-heading[_ngcontent-%COMP%] {
+  margin-top: 24px;
+}
+
+.rules[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 4px 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  transition: border-color 0.2s var(--%NS%ease), opacity 0.2s var(--%NS%ease);
+}
+
+.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-pattern[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-decoration: line-through;
+}
+
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-method[_ngcontent-%COMP%], 
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%], 
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.rules[_ngcontent-%COMP%]   li.empty-rule[_ngcontent-%COMP%] {
+  display: block;
+  padding: 16px 12px;
+  border-style: dashed;
+  border-color: var(--%NS%border-strong);
+  background: none;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+.rule-pattern[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--%NS%text-strong);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rule-method[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-weight: 600;
+}
+
+.rule-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  grid-column: 1/-1;
+  gap: 4px 8px;
+  padding-left: 24px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.rule-meta[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]    + span[_ngcontent-%COMP%]::before {
+  content: "·";
+  margin-right: 8px;
+  color: var(--%NS%text-3);
+}
+
+.rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
+  font-size: 11px;
+}
+
+.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%] {
+  padding: 2px 4px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%]:hover:not(:disabled) {
+  color: var(--%NS%danger);
+}`]})};function dle(e){return`pangular-${(e??``).replace(/[?#].*$/,``).replace(/[^a-z0-9]+/gi,`-`).replace(/^-+|-+$/g,``).toLowerCase().slice(0,60)||`home`}.har`}var fle=class e{calls=$([]);ssrRequest=$(null);title=$(``);pageUrl=$(void 0);done=xv();document=b(Ds);save(){let e=this.calls();if(!e.length)return;let t=this.document.defaultView?.location,n=/^https?:$/.test(t?.protocol??``)?t.origin:void 0,r=lce({calls:e,ssrRequest:this.ssrRequest(),title:this.title(),origin:n}),i=this.document.defaultView?.URL?.createObjectURL?.(new Blob([JSON.stringify(r,null,2)],{type:`application/json`}));if(!i){this.done.emit(`Saving files is not available here.`);return}let a=this.document.createElement(`a`);a.href=i,a.download=dle(this.pageUrl()),a.click(),setTimeout(()=>this.document.defaultView?.URL?.revokeObjectURL?.(i));let o=r.log.entries.length;this.done.emit(`Saved ${o} request${o===1?``:`s`} as ${a.download}.`)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-har-export`]],inputs:{calls:[1,`calls`],ssrRequest:[1,`ssrRequest`],title:[1,`title`],pageUrl:[1,`pageUrl`]},outputs:{done:`done`},decls:4,vars:1,consts:[[`type`,`button`,`aria-describedby`,`har-export-note`,3,`click`,`disabled`],[`id`,`har-export-note`,1,`sr-only`]],template:function(e,t){e&1&&(L(0,`button`,0),H(`click`,function(){return t.save()}),G(1,` Export HAR
+`),R(),L(2,`span`,1),G(3,`Saves the timeline as a HAR file with secrets masked.`),R()),e&2&&B(`disabled`,!t.calls().length)},styles:[`[_nghost-%COMP%] {
+  display: contents;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease);
+}
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},ple=(e,t)=>t.kind+`:`+t.callIds.join(`,`);function mle(e,t){e&1&&(L(0,`p`,1),G(1,`No client calls to check yet.`),R())}function hle(e,t){e&1&&(L(0,`p`,2),G(1,`No duplicate requests, waterfalls or repeated server calls.`),R())}function gle(e,t){if(e&1&&(L(0,`span`,6),G(1),R()),e&2){let e=U().$implicit;E(),q(`About `,e.wastedMs,` ms to win.`)}}function _le(e,t){if(e&1){let e=z();L(0,`li`)(1,`span`,4),G(2),R(),L(3,`p`,5),G(4),k(5,gle,2,1,`span`,6),R(),L(6,`p`,7),G(7),R(),L(8,`button`,8),H(`click`,function(){let t=x(e).$implicit;return S(U(2).open.emit(t.callIds[0]))}),G(9,` Show first call `),R()()}if(e&2){let e=t.$implicit,n=U(2);E(),O(`data-kind`,e.kind),E(),K(n.kindLabel(e.kind)),E(2),q(` `,e.message,` `),E(),A(e.wastedMs?5:-1),E(2),K(e.hint),E(),O(`aria-label`,`Show the first call of: `+e.message)}}function vle(e,t){if(e&1&&(L(0,`ul`,3),j(1,_le,10,6,`li`,null,ple),R()),e&2){let e=U();E(),M(e.findings())}}var yle={duplicate:`Duplicate`,waterfall:`Waterfall`,refetch:`Repeated server call`},ble=class e{calls=$([]);serverCalls=$([]);open=xv();defaults=V8;findings=X(()=>yce(this.calls(),{serverCalls:this.serverCalls()}));kindLabel(e){return yle[e]}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-http-lint`]],inputs:{calls:[1,`calls`],serverCalls:[1,`serverCalls`]},outputs:{open:`open`},decls:5,vars:3,consts:[[1,`intro`],[1,`none`],[1,`none`,`ok`],[1,`findings`],[1,`kind`],[1,`message`],[1,`cost`],[1,`hint`],[`type`,`button`,3,`click`]],template:function(e,t){e&1&&(L(0,`p`,0),G(1),R(),k(2,mle,2,0,`p`,1)(3,hle,2,0,`p`,2)(4,vle,3,0,`ul`,3)),e&2&&(E(),J(` Same GET again within `,t.defaults.duplicateWindowMs,` ms, `,t.defaults.minChain,` or more calls in a row that could start together, and server calls the browser made again. Transfer cache hits, mocks and cancelled calls are left out.
+`),E(),A(t.calls().length?t.findings().length?4:3:2))},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.intro[_ngcontent-%COMP%], 
+.none[_ngcontent-%COMP%], 
+.hint[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.none[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+.findings[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 10px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+li[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 4px 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.kind[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  grid-column: 1;
+}
+
+.message[_ngcontent-%COMP%] {
+  grid-column: 1;
+  margin: 0;
+  color: var(--%NS%text);
+  font-size: 13px;
+  overflow-wrap: anywhere;
+}
+
+.cost[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.hint[_ngcontent-%COMP%] {
+  grid-column: 1;
+}
+
+button[_ngcontent-%COMP%] {
+  grid-column: 2;
+  grid-row: 1/span 3;
+  align-self: center;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease);
+}
+button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 640px) {
+  li[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  button[_ngcontent-%COMP%] {
+    grid-column: 1;
+    grid-row: auto;
+    justify-self: start;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  button[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})};function xle(e,t){if(e&1&&(L(0,`div`)(1,`dt`),G(2,`DOM nodes hydrated`),R(),L(3,`dd`),G(4),R()(),L(5,`div`)(6,`dt`),G(7,`DOM nodes skipped`),R(),L(8,`dd`),G(9),R()(),L(10,`div`)(11,`dt`),G(12,`Mismatched components`),R(),L(13,`dd`),G(14),R()()),e&2){let e=t;E(4),K(e.hydrated),E(5),K(e.skipped),E(4),W(`bad`,e.mismatched>0),E(),K(e.mismatched)}}function Sle(e,t){if(e&1&&(L(0,`span`,5)(1,`span`,6),G(2,`Expected`),R(),L(3,`code`),G(4),R()()),e&2){let e=U().$implicit;E(4),K(e.expected)}}function Cle(e,t){if(e&1&&(L(0,`span`,5)(1,`span`,6),G(2,`Actual`),R(),L(3,`code`),G(4),R()()),e&2){let e=U().$implicit;E(4),K(e.actual)}}function wle(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R(),k(3,Sle,5,1,`span`,5),k(4,Cle,5,1,`span`,5),R()),e&2){let e=t.$implicit;E(2),K(e.isClass?e.component:`<`+e.component+`>`),E(),A(e.expected?3:-1),E(),A(e.actual?4:-1)}}function Tle(e,t){if(e&1&&(L(0,`h3`),G(1),R(),L(2,`ul`,4),j(3,wle,5,3,`li`,null,ug),R()),e&2){let e=U();E(),q(`Mismatches (`,e.mismatches.length,`)`),E(2),M(e.mismatches)}}function Ele(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R()()),e&2){let e=t.$implicit;E(2),K(e)}}function Dle(e,t){if(e&1&&(L(0,`h3`),G(1,`ngSkipHydration hosts`),R(),L(2,`ul`,7),j(3,Ele,3,1,`li`,null,ug),R()),e&2){let e=U();E(3),M(e.skipHydrationHosts)}}function Ole(e,t){e&1&&(L(0,`h3`),G(1,`Warnings`),R(),L(2,`p`,8),G(3,` Not captured: add `),L(4,`code`),G(5,`providePangularHttp()`),R(),G(6,` to the app providers. `),R())}function kle(e,t){if(e&1&&(L(0,`pre`,9),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function Ale(e,t){e&1&&(L(0,`p`,10),G(1,`No hydration warnings.`),R())}function jle(e,t){if(e&1&&(L(0,`h3`),G(1),R(),j(2,kle,2,1,`pre`,9,ug,!1,Ale,2,0,`p`,10)),e&2){let e=U();E(),q(`Warnings (`,e.warnings.length,`)`),E(),M(e.warnings)}}function Mle(e,t){if(e&1&&(L(0,`dl`,2)(1,`div`)(2,`dt`),G(3,`Enabled`),R(),L(4,`dd`)(5,`span`,3),G(6),R()()(),L(7,`div`)(8,`dt`),G(9,`Hydrated components`),R(),L(10,`dd`),G(11),R()(),L(12,`div`)(13,`dt`),G(14,`Hydrated nodes`),R(),L(15,`dd`),G(16),R()(),L(17,`div`)(18,`dt`),G(19,`Skipped components`),R(),L(20,`dd`),G(21),R()(),L(22,`div`)(23,`dt`),G(24,`App stable after`),R(),L(25,`dd`),G(26),R()(),L(27,`div`)(28,`dt`),G(29,`Incremental defer blocks`),R(),L(30,`dd`),G(31),R()(),k(32,xle,15,5),R(),k(33,Tle,5,1),k(34,Dle,5,0),k(35,Ole,7,0)(36,jle,5,2)),e&2){let e,n=t;E(5),W(`on`,n.enabled)(`off-tag`,!n.enabled),E(),K(n.enabled?`yes`:`no (client render only)`),E(5),K(n.hydratedComponents??`n/a`),E(5),K(n.hydratedNodes??`n/a`),E(5),K(n.componentsSkippedHydration??`n/a`),E(5),K(n.stableMs===void 0?`n/a`:n.stableMs+` ms`),E(5),K(n.deferBlocksWithIncrementalHydration??`n/a`),E(),A((e=n.nodes)?32:-1,e),E(),A(n.mismatches?.length?33:-1),E(),A(n.skipHydrationHosts.length?34:-1),E(),A(n.warningsCaptured===!1?35:36)}}function Nle(e,t){e&1&&(L(0,`div`,1)(1,`p`),G(2,`No hydration data for this page.`),R(),L(3,`p`,8),G(4,`Open a server rendered page of the app to see its stats.`),R()())}var Ple=class e{selected=b(A8).selected;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appHydrationStats`,``]],decls:4,vars:1,consts:[[`id`,`hydration-heading`],[1,`empty`],[1,`stats`],[1,`tag`],[1,`plain`,`mismatches`],[1,`mismatch-row`],[1,`mismatch-label`],[1,`plain`],[1,`muted`,`small`],[1,`warn`],[1,`muted`,`small`,`ok-note`]],template:function(e,t){if(e&1&&(L(0,`h2`,0),G(1,`Hydration`),R(),k(2,Mle,37,14)(3,Nle,5,0,`div`,1)),e&2){let e;E(2),A((e=t.selected()?.hydration)?2:3,e)}},styles:[`h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.mismatches[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.mismatch-row[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+  font-size: 12px;
+}
+
+.mismatch-row[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.mismatch-label[_ngcontent-%COMP%] {
+  flex: none;
+  width: 64px;
+  color: var(--%NS%text-2);
+}
+
+.method[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-2);
+}
+
+.status.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.status.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.dot[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: middle;
+}
+
+.notes[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 4px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.tag.server[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.fault[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tag.mock[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.rule-ref[_ngcontent-%COMP%] {
+  gap: 4px;
+  max-width: 220px;
+}
+
+.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+}
+
+.tag.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.tag.off-tag[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+pre[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text-2);
+  font: 12px/1.5 var(--%NS%font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+pre[_ngcontent-%COMP%]    + pre[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+pre.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  color: var(--%NS%warn);
+}
+
+pre.error[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  color: var(--%NS%danger);
+}
+
+.plain[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.plain[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.stats[_ngcontent-%COMP%] {
+  display: grid;
+  margin: 0;
+}
+
+.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 36px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:last-child {
+  border-bottom: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.ok-note[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}`]})},G8=class e{state=b(A8);addingOverride=w(!1);overrideSaves=Promise.resolve(!0);overrideDraft=w({..._8});overrideFromPayload=w(null);overrideKindOptions=[{value:`render-error`,label:`Render error`},{value:`client-render`,label:`Force Client render`},{value:`state-edit`,label:`Edit TransferState entry`}];overrideValueError=X(()=>{let e=this.overrideDraft().value.trim();if(!e)return``;try{return JSON.parse(e),``}catch{return`The value must be valid JSON.`}});overrideReady=X(()=>{let e=this.overrideDraft();return!e.pattern.trim()||this.state.overrides().length>=20?!1:e.kind!==`state-edit`||!!e.key.trim()&&!this.overrideValueError()});setOverrideDraft(e,t){this.overrideDraft.update(n=>({...n,[e]:t})),e===`kind`&&t!==`state-edit`&&this.overrideFromPayload.set(null)}patchOverride(e,t){let n=t.target.value;this.overrideDraft.update(t=>({...t,[e]:n})),e===`key`&&this.overrideFromPayload.set(null)}canEditEntry(e){let{key:t}=e;return this.state.canWrite()&&!!t&&t===t.trim()&&t.length<=200&&!Rse.test(t)}editEntry(e){if(!this.canEditEntry(e))return;let t=this.state.selected();this.overrideDraft.set({..._8,kind:`state-edit`,pattern:t?Lse(t.initialUrl??t.url):``,key:e.key}),this.overrideFromPayload.set(e.http?`http`:`other`),this.state.message.set(`Editing the TransferState entry in SSR overrides.`),this.state.afterRender(()=>{let e=this.state.query(this.overrideDraft().pattern?`#override-value`:`#override-pattern`);e?.scrollIntoView?.({block:`center`}),e?.focus()})}async addOverride(e){if(e.preventDefault(),!this.overrideReady()||this.addingOverride())return;let t=this.overrideDraft(),n={id:`o${Date.now().toString(36)}${Math.random().toString(36).slice(2,6)}`,kind:t.kind,pattern:t.pattern.trim(),enabled:!0,...t.kind===`render-error`&&t.message.trim()?{message:t.message.trim()}:{},...t.kind===`state-edit`?{key:t.key.trim()}:{},...t.kind===`state-edit`&&t.value.trim()?{value:t.value.trim()}:{}};this.addingOverride.set(!0);let r=await this.saveOverrides(e=>[...e,n],`Override added. Reload the page.`);this.addingOverride.set(!1),r&&(this.overrideDraft.set({..._8,kind:t.kind}),this.overrideFromPayload.set(null),this.state.query(`#override-pattern`)?.focus())}toggleOverride(e){this.saveOverrides(t=>t.some(t=>t.id===e)?t.map(t=>t.id===e?{...t,enabled:!t.enabled}:t):null,`Override updated. Reload the page.`)}async removeOverride(e){let t=-1;await this.saveOverrides(n=>(t=n.findIndex(t=>t.id===e),t<0?null:n.filter(t=>t.id!==e)),`Override removed.`)&&this.state.focusAfterRemove(`[data-remove-override]`,t,`#override-list-heading`)}saveOverrides(e,t){let n=this.overrideSaves.then(async()=>{let n=e(this.state.overrides());if(!n)return!1;try{let e=await oT(this.state.rpc(),`set-ssr-overrides`,n);return this.state.overrides.set(Array.isArray(e)?e:n),this.state.announce(t),!0}catch{return this.state.message.set(`Could not save the overrides.`),!1}});return this.overrideSaves=n,n}static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e.ɵfac})},Fle=(e,t)=>t.id;function Ile(e,t){if(e&1){let e=z();P(0,`p`,8),G(1,` Throws while the server renders, so it needs `),P(2,`code`),G(3,`providePangularHttp()`),F(),G(4,` and a page the engine renders. Prerendered files served as static files skip it. `),F(),P(5,`label`),G(6,` Error message `),P(7,`input`,15),V(`input`,function(t){return x(e),S(U().patchOverride(`message`,t))}),F()()}if(e&2){let e=U();E(7),N(`value`,e.overrideDraft().message)}}function Lle(e,t){e&1&&G(0,` For a cached HTTP response this is the whole cache record, not only the response body. `)}function Rle(e,t){e&1&&(P(0,`p`,19),G(1,` Filled in from the TransferState payload. The value starts empty because the panel only shows a redacted copy, so type the JSON the server should send. `),k(2,Lle,1,0),F()),e&2&&(E(2),A(t===`http`?2:-1))}function zle(e,t){if(e&1){let e=z();P(0,`label`),G(1,` TransferState key `),P(2,`input`,16),V(`input`,function(t){return x(e),S(U().patchOverride(`key`,t))}),F()(),P(3,`label`)(4,`span`),G(5,`New JSON value `),P(6,`span`,6),G(7,`(empty removes the entry)`),F()(),P(8,`textarea`,17),V(`input`,function(t){return x(e),S(U().patchOverride(`value`,t))}),F()(),P(9,`p`,18),G(10),F(),k(11,Rle,3,1,`p`,19)}if(e&2){let e,t=U();E(2),N(`value`,t.overrideDraft().key),E(6),N(`value`,t.overrideDraft().value),O(`aria-invalid`,t.overrideValueError()?`true`:null)(`aria-describedby`,t.overrideFromPayload()?`override-value-error override-value-note`:`override-value-error`),E(2),K(t.overrideValueError()),E(),A((e=t.overrideFromPayload())?11:-1,e)}}function Ble(e,t){e&1&&(P(0,`p`,8),G(1,` Serves `),P(2,`code`),G(3,`index.csr.html`),F(),G(4,` instead of rendering. Needs `),P(5,`code`),G(6,`browserDistFolder`),F(),G(7,` in `),P(8,`code`),G(9,`initPangularHub()`),F(),G(10,`. `),F())}function Vle(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),K(e.message)}}function Hle(e,t){if(e&1&&(P(0,`span`),G(1),F()),e&2){let e=U().$implicit;E(),J(``,e.value===void 0?`remove`:`set`,` `,e.key)}}function Ule(e,t){if(e&1){let e=z();P(0,`li`)(1,`label`,20)(2,`input`,21),V(`change`,function(){let t=x(e).$implicit;return S(U().toggleOverride(t.id))}),F(),P(3,`code`,22)(4,`span`,23),G(5),F(),G(6),F()(),P(7,`button`,24),V(`click`,function(){let t=x(e).$implicit;return S(U().removeOverride(t.id))}),G(8,` Remove `),F(),P(9,`span`,25),k(10,Vle,2,1,`span`),k(11,Hle,2,2,`span`),F()()}if(e&2){let e=t.$implicit,n=U();W(`off`,!e.enabled),E(2),N(`checked`,e.enabled)(`disabled`,!n.canWrite()),O(`aria-label`,`Enable `+n.overrideLabel(e.kind)+` for `+e.pattern),E(),N(`title`,e.pattern),E(2),K(n.overrideLabel(e.kind)),E(),q(` `,e.pattern),E(),N(`disabled`,!n.canWrite()),O(`aria-label`,`Remove `+n.overrideLabel(e.kind)+` for `+e.pattern),E(3),A(e.message?10:-1),E(),A(e.key?11:-1)}}function Wle(e,t){e&1&&(P(0,`li`,14),G(1,`No overrides.`),F())}var Gle=class e{state=b(A8);overrideState=b(G8);canWrite=this.state.canWrite;overrides=this.state.overrides;overrideDraft=this.overrideState.overrideDraft;overrideKindOptions=this.overrideState.overrideKindOptions;overrideValueError=this.overrideState.overrideValueError;overrideFromPayload=this.overrideState.overrideFromPayload;overrideReady=this.overrideState.overrideReady;addingOverride=this.overrideState.addingOverride;overrideLabel=O8;setOverrideDraft(e,t){this.overrideState.setOverrideDraft(e,t)}patchOverride(e,t){this.overrideState.patchOverride(e,t)}addOverride(e){this.overrideState.addOverride(e)}toggleOverride(e){this.overrideState.toggleOverride(e)}removeOverride(e){this.overrideState.removeOverride(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appSsrOverrides`,``]],decls:30,vars:10,consts:[[`id`,`overrides-heading`],[1,`muted`,`small`],[1,`rule-form`,3,`submit`],[1,`field-group`],[`id`,`override-kind-label`],[`labelledBy`,`override-kind-label`,3,`valueChange`,`describedBy`,`options`,`value`],[1,`hint`],[`id`,`override-pattern`,`required`,``,`spellcheck`,`false`,`autocomplete`,`off`,`placeholder`,`e.g. /examples/ssr`,3,`input`,`value`],[`id`,`override-kind-help`,1,`muted`,`small`],[1,`form-actions`],[`type`,`submit`,3,`disabled`],[`id`,`override-list-heading`,`tabindex`,`-1`,1,`rules-heading`],[1,`rules`],[3,`off`],[1,`empty-rule`],[`spellcheck`,`false`,`placeholder`,`Simulated render error`,`aria-describedby`,`override-kind-help`,3,`input`,`value`],[`id`,`override-key`,`spellcheck`,`false`,`autocomplete`,`off`,3,`input`,`value`],[`id`,`override-value`,`rows`,`3`,`spellcheck`,`false`,3,`input`,`value`],[`id`,`override-value-error`,1,`field-error`],[`id`,`override-value-note`,1,`muted`,`small`],[1,`inline`],[`type`,`checkbox`,3,`change`,`checked`,`disabled`],[1,`rule-pattern`,3,`title`],[1,`rule-method`],[`type`,`button`,`data-remove-override`,``,1,`link`,`remove`,3,`click`,`disabled`],[1,`rule-meta`]],template:function(e,t){if(e&1&&(P(0,`h2`,0),G(1,`SSR overrides`),F(),P(2,`p`,1),G(3,` Development only. These change what the server sends for matching pages, from the next full page load, and the request is marked `),P(4,`strong`),G(5,`overridden`),F(),G(6,`.
+`),F(),P(7,`form`,2),V(`submit`,function(e){return t.addOverride(e)}),P(8,`div`,3)(9,`span`,4),G(10,`Override`),F(),P(11,`app-select`,5),V(`valueChange`,function(e){return t.setOverrideDraft(`kind`,e??`render-error`)}),F()(),P(12,`label`)(13,`span`),G(14,`Page pattern `),P(15,`span`,6),G(16,`(substring or * glob, ^ anchors the path)`),F()(),P(17,`input`,7),V(`input`,function(e){return t.patchOverride(`pattern`,e)}),F()(),k(18,Ile,8,1)(19,zle,12,6)(20,Ble,11,0,`p`,8),P(21,`div`,9)(22,`button`,10),G(23,` Add override `),F()()(),P(24,`h3`,11),G(25),F(),P(26,`ul`,12),j(27,Ule,12,12,`li`,13,Fle,!1,Wle,2,0,`li`,14),F()),e&2){let e;E(11),N(`describedBy`,t.overrideDraft().kind===`state-edit`?``:`override-kind-help`)(`options`,t.overrideKindOptions)(`value`,t.overrideDraft().kind),E(6),N(`value`,t.overrideDraft().pattern),E(),A((e=t.overrideDraft().kind)===`render-error`?18:e===`state-edit`?19:e===`client-render`?20:-1),E(4),N(`disabled`,!t.canWrite()||!t.overrideReady()),O(`aria-disabled`,t.addingOverride()||null)(`aria-describedby`,t.canWrite()?null:`http-writes-off`),E(3),q(` Overrides (`,t.overrides().length,`)
+`),E(2),M(t.overrides())}},dependencies:[JE],styles:[`@charset "UTF-8";
+h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.field-group[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.field-group[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  width: 100%;
+}
+
+.rule-note[_ngcontent-%COMP%] {
+  grid-column: 1/-1;
+  margin: 0;
+  padding-left: 24px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.rule-form[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 420px) {
+  .row[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.field-error[_ngcontent-%COMP%] {
+  margin-top: -4px;
+  color: var(--%NS%danger);
+  font-size: 12px;
+}
+
+.field-error[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.form-actions[_ngcontent-%COMP%] {
+  display: flex;
+}
+
+.rules-heading[_ngcontent-%COMP%] {
+  margin-top: 24px;
+}
+
+.rules[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 4px 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  transition: border-color 0.2s var(--%NS%ease), opacity 0.2s var(--%NS%ease);
+}
+
+.rules[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover {
+  border-color: var(--%NS%border-strong);
+}
+
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-pattern[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  text-decoration: line-through;
+}
+
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-method[_ngcontent-%COMP%], 
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%], 
+.rules[_ngcontent-%COMP%]   li.off[_ngcontent-%COMP%]   .rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.rules[_ngcontent-%COMP%]   li.empty-rule[_ngcontent-%COMP%] {
+  display: block;
+  padding: 16px 12px;
+  border-style: dashed;
+  border-color: var(--%NS%border-strong);
+  background: none;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+.rule-pattern[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--%NS%text-strong);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rule-method[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  font-weight: 600;
+}
+
+.rule-meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  grid-column: 1/-1;
+  gap: 4px 8px;
+  padding-left: 24px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.rule-meta[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%]    + span[_ngcontent-%COMP%]::before {
+  content: "·";
+  margin-right: 8px;
+  color: var(--%NS%text-3);
+}
+
+.rule-meta[_ngcontent-%COMP%]   .status[_ngcontent-%COMP%] {
+  font-size: 11px;
+}
+
+.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%] {
+  padding: 2px 4px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.rules[_ngcontent-%COMP%]   button.remove[_ngcontent-%COMP%]:hover:not(:disabled) {
+  color: var(--%NS%danger);
+}`]})},K8=(e,t)=>t.id,Kle=(e,t)=>t.id+t.kind;function qle(e,t){e&1&&(P(0,`span`,17),G(1,`this page`),F())}function Jle(e,t){e&1&&(P(0,`span`,18),G(1,`overridden`),F())}function Yle(e,t){e&1&&(P(0,`span`,19),G(1,`aborted`),F())}function Xle(e,t){if(e&1){let e=z();P(0,`tr`,8),V(`click`,function(){let t=x(e).$implicit;return S(U(2).selectedRequestId.set(t.id))}),P(1,`td`,9)(2,`button`,10)(3,`span`,11),G(4),F(),G(5),P(6,`span`,12),G(7),F()()(),P(8,`td`,13),I(9,`span`,14),G(10),F(),P(11,`td`),G(12),F(),P(13,`td`,15),G(14),F(),P(15,`td`,15),G(16),F(),P(17,`td`)(18,`div`,16),k(19,qle,2,0,`span`,17),k(20,Jle,2,0,`span`,18),k(21,Yle,2,0,`span`,19),F()()()}if(e&2){let e=t.$implicit,n=U(2);W(`selected`,n.selectedRequest()?.id===e.id),E(2),N(`title`,e.url),O(`aria-pressed`,n.selectedRequest()?.id===e.id),E(2),K(e.method),E(),q(` `,e.url,` `),E(2),J(`, `,e.status,`, `,n.renderModeLabel(e.renderMode)),E(),W(`ok`,n.statusTone(e.status)===`ok`)(`redirect`,n.statusTone(e.status)===`redirect`)(`bad`,n.statusTone(e.status)===`bad`),E(2),q(``,e.status,` `),E(2),K(n.renderModeLabel(e.renderMode)),E(2),q(``,e.renderMs,` ms`),E(2),J(``,e.fetches,` (`,e.fetchMs,` ms)`),E(3),A(e.id===n.selected()?.ssrRequestId?19:-1),E(),A(e.overrides?.length?20:-1),E(),A(e.aborted?21:-1)}}function Zle(e,t){e&1&&(P(0,`p`,22),G(1),P(2,`code`),G(3,`ssrMiddleware`),F(),G(4,` saw it, so the render mode can't be read and TransferState edits can't apply. Mount `),P(5,`code`),G(6,`ssrMiddleware`),F(),G(7,` after `),P(8,`code`),G(9,`compression()`),F(),G(10,`. `),F()),e&2&&(E(),q(` The body was already compressed (`,t,`) when `))}function Qle(e,t){if(e&1&&(P(0,`span`,25),G(1),F()),e&2){let e=U().$implicit;E(),K(e.note)}}function $le(e,t){if(e&1&&(P(0,`p`,24)(1,`span`,18),G(2),F(),P(3,`span`),G(4),F(),k(5,Qle,2,1,`span`,25),F()),e&2){let e=t.$implicit,n=U(4);E(2),K(n.overrideLabel(e.kind)),E(2),K(e.applied?`applied`:`not applied`),E(),A(e.note?5:-1)}}function eue(e,t){if(e&1&&(P(0,`h3`),G(1,`Overrides from the panel`),F(),P(2,`p`,22),G(3,` This response was changed on purpose, so it is not what the app sends on its own. `),F(),j(4,$le,6,3,`p`,24,Kle)),e&2){let e=U();E(4),M(e.overrides)}}function tue(e,t){if(e&1&&(G(0,` to `),P(1,`code`),G(2),F()),e&2){let e=U().$implicit;E(2),K(e.finalUrl)}}function nue(e,t){if(e&1&&(P(0,`div`)(1,`dt`),G(2,`Guards`),F(),P(3,`dd`),G(4),F()()),e&2){let e=U().$implicit,t=U(4);E(3),W(`bad`,t.guardVerdict(e)===`rejected`),E(),J(` `,t.msLabel(e.guards.ms),``,t.guardVerdict(e)?`, `+t.guardVerdict(e):``,` `)}}function rue(e,t){if(e&1&&(P(0,`div`)(1,`dt`),G(2,`Resolvers`),F(),P(3,`dd`),G(4),F()()),e&2){let e=U().$implicit,t=U(4);E(4),K(t.msLabel(e.resolvers.ms))}}function iue(e,t){if(e&1&&(P(0,`div`)(1,`dt`),G(2,`Navigation total`),F(),P(3,`dd`),G(4),F()()),e&2){let e=U().$implicit;E(4),q(``,e.durationMs,` ms`)}}function aue(e,t){if(e&1&&(P(0,`p`,22),G(1),F()),e&2){let e=U().$implicit;E(),K(e.reason)}}function oue(e,t){if(e&1&&(P(0,`dl`,26)(1,`div`)(2,`dt`),G(3,`Navigation`),F(),P(4,`dd`)(5,`code`),G(6),F(),k(7,tue,3,1),G(8),F()(),k(9,nue,5,4,`div`),k(10,rue,5,1,`div`),k(11,iue,5,1,`div`),F(),k(12,aue,2,1,`p`,22)),e&2){let e=t.$implicit;E(6),K(e.url),E(),A(e.finalUrl?7:-1),E(),q(` (`,e.outcome,`) `),E(),A(e.guards?9:-1),E(),A(e.resolvers?10:-1),E(),A(e.durationMs===void 0?-1:11),E(),A(e.reason?12:-1)}}function sue(e,t){if(e&1&&(P(0,`h3`),G(1,`Router during the render`),F(),j(2,oue,13,7,null,null,ug)),e&2){let e=U();E(2),M(e.navigations)}}function cue(e,t){e&1&&(P(0,`span`,17),G(1,`cached`),F())}function lue(e,t){if(e&1&&(P(0,`span`,28),G(1,`not cached`),F()),e&2){let e=U().$implicit;N(`title`,U(3).skipText(e.cacheSkip))}}function uue(e,t){if(e&1&&(P(0,`p`,29),G(1),F()),e&2){let e=U().$implicit,t=U(3);E(),q(`Not cached: `,t.skipText(e.cacheSkip),`.`)}}function due(e,t){if(e&1&&(P(0,`p`,24)(1,`span`,11),G(2),F(),P(3,`span`,27),G(4),F(),P(5,`span`,13),G(6),F(),P(7,`span`,25),G(8),F(),k(9,cue,2,0,`span`,17)(10,lue,2,1,`span`,28),F(),k(11,uue,2,1,`p`,29)),e&2){let e=t.$implicit,n=U(3);E(2),K(e.method),E(),N(`title`,e.url),E(),K(e.url),E(),W(`ok`,n.callTone(e)===`ok`)(`bad`,n.callTone(e)===`bad`),E(),K(n.statusLabel(e)),E(2),q(``,e.durationMs,` ms`),E(),A(e.cacheStored?9:e.cacheSkip?10:-1),E(2),A(!e.cacheStored&&e.cacheSkip?11:-1)}}function fue(e,t){e&1&&(P(0,`p`,22),G(1,`The render made no HttpClient calls.`),F())}function pue(e,t){e&1&&(P(0,`p`,29),G(1),F()),e&2&&(E(),q(`Why: `,t,`.`))}function mue(e,t){if(e&1&&(P(0,`p`,24)(1,`span`,11),G(2),F(),P(3,`span`,27),G(4),F(),P(5,`span`,19),G(6,`cache miss`),F()(),k(7,pue,2,1,`p`,29)),e&2){let e,n=t.$implicit,r=U(4);E(2),K(n.method),E(),N(`title`,n.url),E(),K(n.url),E(3),A((e=r.refetchReason(n))?7:-1,e)}}function hue(e,t){if(e&1&&(P(0,`h3`),G(1),F(),P(2,`p`,22),G(3,` These calls ran on the server and again after hydration instead of reading the transfer cache. `),F(),j(4,mue,8,4,null,null,K8)),e&2){let e=U(3);E(),q(`Fetched again in the browser (`,e.refetched().length,`)`),E(3),M(e.refetched())}}function gue(e,t){e&1&&(P(0,`p`,23),G(1,`No server call ran again in the browser.`),F())}function _ue(e,t){if(e&1&&(P(0,`div`,7)(1,`h3`,20),G(2),P(3,`code`),G(4),F()(),P(5,`dl`,21)(6,`div`)(7,`dt`),G(8,`Request id`),F(),P(9,`dd`)(10,`code`),G(11),F()()(),P(12,`div`)(13,`dt`),G(14,`Render`),F(),P(15,`dd`),G(16),F()(),P(17,`div`)(18,`dt`),G(19,`Total`),F(),P(20,`dd`),G(21),F()(),P(22,`div`)(23,`dt`),G(24,`Sent`),F(),P(25,`dd`),G(26),F()(),P(27,`div`)(28,`dt`),G(29,`Browser page`),F(),P(30,`dd`),G(31),F()()(),k(32,Zle,11,1,`p`,22),k(33,eue,6,0),k(34,sue,4,0),P(35,`h3`),G(36),F(),j(37,due,12,11,null,null,K8,!1,fue,2,0,`p`,22),k(40,hue,6,1)(41,gue,2,0,`p`,23),F()),e&2){let e,n=t,r=U(2);E(2),q(` `,n.method,` `),E(2),K(n.url),E(7),K(n.id),E(5),q(``,n.renderMs,` ms`),E(5),q(``,n.durationMs,` ms`),E(5),q(``,n.bytes,` B`),E(5),K(r.requestPage()?.title||r.requestPage()?.url||`not connected`),E(),A((e=r.compressedWith(n))?32:-1,e),E(),A(n.overrides?.length?33:-1),E(),A(n.navigations?.length?34:-1),E(2),q(`Server calls (`,r.requestCalls().length,`)`),E(),M(r.requestCalls()),E(3),A(r.refetched().length?40:r.requestPage()&&r.requestCalls().length?41:-1)}}function vue(e,t){if(e&1&&(P(0,`div`,2)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,3),G(5,`Request`),F(),P(6,`th`,3),G(7,`Status`),F(),P(8,`th`,3),G(9,`Render mode`),F(),P(10,`th`,4),G(11,`Render`),F(),P(12,`th`,4),G(13,`Server calls`),F(),P(14,`th`,3),G(15,`Notes`),F()()(),P(16,`tbody`,5),j(17,Xle,22,22,`tr`,6,K8),F()()(),k(19,_ue,42,13,`div`,7)),e&2){let e,t=U();E(17),M(t.requests()),E(2),A((e=t.selectedRequest())?19:-1,e)}}function yue(e,t){e&1&&(P(0,`div`,1)(1,`p`),G(2,`No SSR requests traced.`),F(),P(3,`p`,22),G(4,` Add `),P(5,`code`),G(6,`app.use(devtools.ssrMiddleware)`),F(),G(7,` before the Angular handler in `),P(8,`code`),G(9,`server.ts`),F(),G(10,`, or wrap a web-standard handler with `),P(11,`code`),G(12,`withPangularSsr()`),F(),G(13,`, then load a server rendered page. `),F()())}var bue=class e{state=b(A8);requests=this.state.requests;selected=this.state.selected;selectedRequest=this.state.selectedRequest;selectedRequestId=this.state.selectedRequestId;requestCalls=this.state.requestCalls;requestPage=this.state.requestPage;refetched=this.state.refetched;callTone=T8;compressedWith=Kse;guardVerdict=Gse;msLabel=Wse;overrideLabel=O8;renderModeLabel=Use;skipText=k8;statusLabel=w8;statusTone=C8;refetchReason(e){return this.state.refetchReason(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appSsrRequests`,``]],decls:4,vars:2,consts:[[`id`,`ssr-heading`],[1,`empty`],[1,`table-wrap`],[`scope`,`col`],[`scope`,`col`,1,`num`],[`appRovingList`,`button.ssr-row`],[3,`selected`],[`id`,`ssr-detail`,`role`,`region`,`aria-labelledby`,`ssr-detail-heading`,1,`preview`],[3,`click`],[1,`url`],[`type`,`button`,`aria-controls`,`ssr-detail`,1,`link`,`ssr-row`,3,`title`],[1,`method`],[1,`sr-only`],[1,`status`],[`aria-hidden`,`true`,1,`dot`],[1,`num`],[1,`notes`],[1,`tag`,`server`],[1,`tag`,`mock`],[1,`tag`,`fault`],[`id`,`ssr-detail-heading`],[1,`stats`],[1,`muted`,`small`],[1,`muted`,`small`,`ok-note`],[1,`request-call`],[1,`muted`],[1,`stats`,`nav-stats`],[1,`preview-url`,3,`title`],[1,`tag`,3,`title`],[1,`muted`,`small`,`skip-reason`]],template:function(e,t){e&1&&(P(0,`h2`,0),G(1),F(),k(2,vue,20,1)(3,yue,14,0,`div`,1)),e&2&&(E(),q(`SSR requests (`,t.requests().length,`)`),E(),A(t.requests().length?2:3))},dependencies:[XV],styles:[`h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-height: min(420px, 60vh);
+  overflow: auto;
+  margin: 0 -16px;
+  padding: 0 16px;
+}
+
+.table-wrap[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--%NS%surface);
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 560px;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  height: 36px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+th[_ngcontent-%COMP%]:first-child, 
+td[_ngcontent-%COMP%]:first-child {
+  padding-left: 8px;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  height: 32px;
+  border-bottom-color: var(--%NS%border-strong);
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+}
+
+td.num[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {
+  cursor: pointer;
+}
+
+tbody[_ngcontent-%COMP%]   tr.spacer[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+}
+
+.window-note[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+}
+
+tbody[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-2);
+}
+
+tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], 
+tr.selected[_ngcontent-%COMP%]:hover   td[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+}
+
+tr.selected[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]:first-child {
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+td.url[_ngcontent-%COMP%] {
+  width: 100%;
+  max-width: 0;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+tr.selected[_ngcontent-%COMP%]   td.url[_ngcontent-%COMP%]   button.link[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+td.page-url[_ngcontent-%COMP%] {
+  max-width: 160px;
+  overflow: hidden;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.method[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-2);
+}
+
+.status.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.status.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.dot[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: middle;
+}
+
+.notes[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 4px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.tag.server[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.fault[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tag.mock[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.rule-ref[_ngcontent-%COMP%] {
+  gap: 4px;
+  max-width: 220px;
+}
+
+.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+}
+
+.tag.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.tag.off-tag[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.preview[_ngcontent-%COMP%] {
+  animation: enter 0.2s var(--%NS%ease) both;
+  margin-top: 16px;
+}
+
+.preview-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px 8px;
+  margin-bottom: 4px;
+}
+
+.preview-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+pre.preview-body[_ngcontent-%COMP%] {
+  max-height: 320px;
+}
+
+.preview-head[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.preview-meta[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin-bottom: 8px;
+}
+
+.request-call[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+  margin: 0 0 4px;
+}
+
+.request-call[_ngcontent-%COMP%]   .preview-url[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+}
+
+.skip-reason[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.nav-stats[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+}
+
+.preview-rule[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.preview-url[_ngcontent-%COMP%] {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--%NS%text-2);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats[_ngcontent-%COMP%] {
+  display: grid;
+  margin: 0;
+}
+
+.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 36px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.stats[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:last-child {
+  border-bottom: none;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.ok-note[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}`]})},xue=(e,t)=>t.key,Sue=(e,t)=>t.url;function Cue(e,t){if(e&1&&(L(0,`p`,0)(1,`strong`),G(2),R(),G(3,` The payload is inlined in the HTML, so it delays the first render. Look at the largest entries below. `),R()),e&2){let e=U(),t=Y(0);E(2),J(``,e.bytes(t.size),`, over the `,e.bytes(t.budget),` budget.`)}}function wue(e,t){if(e&1&&(L(0,`p`,1),G(1),R()),e&2){let e=U(),t=Y(0);E(),J(``,e.bytes(t.size),`, within the `,e.bytes(t.budget),` budget.`)}}function Tue(e,t){if(e&1&&(L(0,`li`)(1,`span`,4),G(2),R(),L(3,`span`,5),G(4),R(),L(5,`span`,6),Sg(6,`span`),R()()),e&2){let e=t.$implicit,n=U(2);E(),B(`title`,e.key),E(),K(e.label),E(2),J(``,n.bytes(e.size),`, `,e.share,`%`),E(2),f_(`width`,e.share,`%`)}}function Eue(e,t){if(e&1&&(L(0,`h3`,2),G(1,`Largest entries`),R(),L(2,`ol`,3),j(3,Tue,7,6,`li`,null,xue),R()),e&2){U();let e=Y(0);E(3),M(e.largest)}}function Due(e,t){if(e&1&&(L(0,`li`)(1,`code`,10),G(2),R(),L(3,`span`,5),G(4),R()()),e&2){let e=t.$implicit,n=U(2);E(2),K(e.url),E(2),J(``,e.keys.length,` keys, `,n.bytes(e.size))}}function Oue(e,t){if(e&1&&(L(0,`h3`,7),G(1),R(),L(2,`p`,8),G(3,` Each key holds its own response, because the headers, params or body differ. Check whether one request could serve them all. `),R(),L(4,`ul`,9),j(5,Due,5,3,`li`,null,Sue),R()),e&2){U();let e=Y(0);E(),q(`Same URL stored more than once (`,e.sameUrl.length,`)`),E(4),M(e.sameUrl)}}var kue=class e{size=$(0);entries=$([]);insights=X(()=>pce({size:this.size(),entries:this.entries()}));bytes(e){return mce(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-payload-insights`]],inputs:{size:[1,`size`],entries:[1,`entries`]},decls:5,vars:4,consts:[[1,`budget`,`over`],[1,`budget`],[`id`,`payload-largest-heading`],[`aria-labelledby`,`payload-largest-heading`,1,`largest`],[1,`name`,3,`title`],[1,`size`],[`aria-hidden`,`true`,1,`bar`],[`id`,`payload-same-url-heading`],[1,`hint`],[`aria-labelledby`,`payload-same-url-heading`,1,`same-url`],[1,`name`]],template:function(e,t){if(e&1&&(G_(0),k(1,Cue,4,2,`p`,0)(2,wue,2,2,`p`,1),k(3,Eue,5,0),k(4,Oue,7,1)),e&2){let e=K_(t.insights());E(),A(e.overBudget?1:2),E(2),A(e.largest.length?3:-1),E(),A(e.sameUrl.length?4:-1)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+  margin-bottom: 12px;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 12px 0 6px;
+}
+
+.budget[_ngcontent-%COMP%], 
+.hint[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.budget.over[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border-strong);
+  border-left: 3px solid var(--%NS%warn);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+ol[_ngcontent-%COMP%], 
+ul[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2px 8px;
+  font-size: 12px;
+}
+
+.name[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+  color: var(--%NS%text);
+}
+
+.size[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.bar[_ngcontent-%COMP%] {
+  grid-column: 1/-1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--%NS%surface-3);
+  overflow: hidden;
+}
+.bar[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  display: block;
+  height: 100%;
+  background: var(--%NS%accent);
+}
+
+.same-url[_ngcontent-%COMP%] {
+  margin-top: 6px;
+}`]})},Aue=(e,t)=>t.key;function jue(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`button`,3),V(`click`,function(){let t=x(e);return S(U().refetchPayload(t.pageId))}),G(2),F(),P(3,`span`,4),G(4,` Renders this URL again on the server, with this tab's cookies, and shows the payload it sends now. The tab does not reload. `),F()()}if(e&2){let e=U();E(),N(`disabled`,!e.canWrite()||e.refetching()),O(`aria-describedby`,e.canWrite()?`refetch-hint`:`http-writes-off refetch-hint`),E(),q(` `,e.refetching()?`Refetching…`:`Refetch`,` `)}}function Mue(e,t){e&1&&(P(0,`div`,2)(1,`p`),G(2,`No TransferState script: this page was not server rendered.`),F()())}function Nue(e,t){e&1&&(P(0,`span`,6),G(1,`Refetched`),F())}function Pue(e,t){if(e&1&&(P(0,`p`,7),G(1),F()),e&2){let e=U(2);E(),K(e.error)}}function Fue(e,t){e&1&&(P(0,`span`,12),G(1),F()),e&2&&(E(),K(t))}function Iue(e,t){if(e&1&&(P(0,`span`,12),G(1),F(),P(2,`span`,13),G(3),F()),e&2){let e=t,n=U().$implicit,r=U(3);W(`server`,r.statusTone(e.status)===`ok`)(`fault`,r.statusTone(e.status)===`bad`),E(),q(`HTTP `,e.status),E(2),K(e.url??n.key)}}function Lue(e,t){if(e&1&&(P(0,`span`,13),G(1),F()),e&2){let e=U().$implicit;E(),K(e.key)}}function Rue(e,t){if(e&1){let e=z();P(0,`button`,19),V(`click`,function(){x(e);let t=U().$implicit;return S(U(3).editEntry(t))}),G(1,` Edit in SSR overrides `),F()}if(e&2){let e=U().$implicit;O(`aria-label`,`Edit in SSR overrides, key `+e.key)}}function zue(e,t){if(e&1){let e=z();P(0,`details`)(1,`summary`),I(2,`span`,11),k(3,Fue,2,1,`span`,12),k(4,Iue,4,6)(5,Lue,2,1,`span`,13),P(6,`span`,14),G(7),F()(),P(8,`div`,15)(9,`span`,16),G(10,`Key`),F(),P(11,`code`,17),G(12),F(),P(13,`div`,18)(14,`button`,19),V(`click`,function(){let t=x(e).$implicit;return S(U(3).copyKey(t.key))}),G(15,` Copy `),F(),k(16,Rue,2,1,`button`,20),F()(),P(17,`pre`,21),G(18),uv(19,`json`),F()()}if(e&2){let e,n,r=t.$implicit,i=U(3);E(3),A((e=i.payloadLabel(r))?3:-1,e),E(),A((n=r.http)?4:5,n),E(3),q(``,r.size,` B`),E(5),K(r.key),E(2),O(`aria-label`,`Copy key `+r.key),E(2),A(i.canEditEntry(r)?16:-1),E(),O(`aria-label`,`Value of `+r.key),E(),K(dv(19,8,r.value))}}function Bue(e,t){if(e&1&&(P(0,`p`,5),G(1),k(2,Nue,2,0,`span`,6),F(),k(3,Pue,2,1,`p`,7),I(4,`app-redaction-count`,8)(5,`app-payload-insights`,9),P(6,`div`,10),j(7,zue,20,10,`details`,null,Aue),F()),e&2){let e=U();E(),R_(` `,e.entries.length,` entr`,e.entries.length===1?`y`:`ies`,`, `,e.size,` bytes `),E(),A(e.refetchedAt?2:-1),E(),A(e.error?3:-1),E(),N(`value`,e.entries),E(),N(`size`,e.size)(`entries`,e.entries),E(2),M(e.entries)}}function Vue(e,t){e&1&&k(0,Mue,3,0,`div`,2)(1,Bue,9,8),e&2&&A(+!!t.found)}function Hue(e,t){e&1&&(P(0,`div`,2)(1,`p`),G(2,`Open a page of the app to see its payload.`),F()())}var Uue=class e{state=b(A8);overrideState=b(G8);canWrite=this.state.canWrite;selected=this.state.selected;selectedPayload=this.state.selectedPayload;refetching=this.state.refetching;payloadLabel=qse;statusTone=C8;refetchPayload(e){this.state.refetchPayload(e)}copyKey(e){this.state.copyKey(e)}canEditEntry(e){return this.overrideState.canEditEntry(e)}editEntry(e){this.overrideState.editEntry(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`section`,`appTransferPayload`,``]],decls:5,vars:2,consts:[[`id`,`payload-heading`],[1,`payload-tools`],[1,`empty`],[`type`,`button`,`data-refetch-payload`,``,3,`click`,`disabled`],[`id`,`refetch-hint`,1,`muted`,`small`],[1,`muted`,`small`,`summary-line`],[`data-refetched`,``,1,`tag`],[`role`,`alert`,1,`bad`],[3,`value`],[3,`size`,`entries`],[1,`entries`],[`aria-hidden`,`true`,1,`chevron`],[1,`tag`],[1,`entry-key`],[1,`entry-size`],[1,`entry-key-row`],[1,`entry-key-label`],[1,`entry-key-text`],[1,`entry-actions`],[`type`,`button`,1,`ghost`,3,`click`],[`type`,`button`,1,`ghost`],[`tabindex`,`0`,`role`,`region`]],template:function(e,t){if(e&1&&(P(0,`h2`,0),G(1,`TransferState payload`),F(),k(2,jue,5,3,`div`,1),k(3,Vue,2,1)(4,Hue,3,0,`div`,2)),e&2){let e,n;E(2),A((e=t.selected())?2:-1,e),E(),A((n=t.selectedPayload())?3:4,n)}},dependencies:[kue,Xj,fy],styles:[`h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.method[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-strong);
+}
+
+.status[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--%NS%text-2);
+}
+
+.status.ok[_ngcontent-%COMP%] {
+  color: var(--%NS%ok);
+}
+
+.status.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.dot[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  vertical-align: middle;
+}
+
+.notes[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 4px;
+}
+
+.tag[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 99px;
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.tag.server[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.fault[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.tag.mock[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.tag.rule-ref[_ngcontent-%COMP%] {
+  gap: 4px;
+  max-width: 220px;
+}
+
+.tag.rule-ref[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--%NS%font-mono);
+}
+
+.tag.on[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.tag.off-tag[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+pre[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text-2);
+  font: 12px/1.5 var(--%NS%font-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+pre[_ngcontent-%COMP%]    + pre[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}
+
+pre.warn[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  color: var(--%NS%warn);
+}
+
+pre.error[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  color: var(--%NS%danger);
+}
+
+.summary-line[_ngcontent-%COMP%] {
+  margin-bottom: 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+.payload-tools[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin-bottom: 12px;
+}
+
+.payload-tools[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {
+  flex: 1 1 240px;
+  min-width: 0;
+}
+
+.entries[_ngcontent-%COMP%] {
+  border-top: 1px solid var(--%NS%border);
+}
+
+details[_ngcontent-%COMP%] {
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+details[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+}
+
+summary[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 6px 4px;
+  border-radius: 4px;
+  list-style: none;
+  cursor: pointer;
+  transition: background-color 0.15s var(--%NS%ease);
+}
+
+summary[_ngcontent-%COMP%]::-webkit-details-marker {
+  display: none;
+}
+
+summary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.chevron[_ngcontent-%COMP%] {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  margin: 0 4px;
+  border-right: 1.5px solid var(--%NS%text-3);
+  border-bottom: 1.5px solid var(--%NS%text-3);
+  transform: rotate(-45deg);
+  transition: transform 0.15s var(--%NS%ease);
+}
+
+details[open][_ngcontent-%COMP%]   .chevron[_ngcontent-%COMP%] {
+  transform: rotate(45deg);
+}
+
+.entry-key[_ngcontent-%COMP%] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+summary[_ngcontent-%COMP%]:hover   .entry-key[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+
+.entry-key-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  min-width: 0;
+  margin: 0 0 8px;
+  padding: 0 4px;
+}
+
+.entry-key-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  flex: none;
+}
+
+.entry-key-text[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+
+.entry-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.entry-size[_ngcontent-%COMP%] {
+  flex: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}`]})},Wue=()=>[];function Gue(e,t){e&1&&(P(0,`app-state`,1),G(1,`Loading HTTP calls…`),F())}function Kue(e,t){if(e&1){let e=z();P(0,`app-state`,20),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Could not reach the devtools server. `),P(2,`p`,21),G(3,`Check that the app's dev server is running with the devtools plugin.`),F()()}}var que=class e{rpc=$(null);state=b(A8);ruleState=b(W8);overrideState=b(G8);canWrite=this.state.canWrite;loading=this.state.loading;failed=this.state.failed;serverCalls=this.state.serverCalls;pages=this.state.pages;payloads=this.state.payloads;requests=this.state.requests;rules=this.state.rules;overrides=this.state.overrides;message=this.state.message;selected=this.state.selected;selectedCallId=this.state.selectedCallId;selectedCall=this.state.selectedCall;selectedRequestId=this.state.selectedRequestId;refetched=this.state.refetched;timeline=this.state.timeline;sideFilter=this.state.sideFilter;failedOnly=this.state.failedOnly;pageOptions=this.state.pageOptions;pageSsrRequest=this.state.pageSsrRequest;renderServerCalls=this.state.renderServerCalls;draft=this.ruleState.draft;draftRule=this.ruleState.draftRule;methodOptions=this.ruleState.methodOptions;overrideDraft=this.overrideState.overrideDraft;overrideFromPayload=this.overrideState.overrideFromPayload;overrideReady=this.overrideState.overrideReady;overrideValueError=this.overrideState.overrideValueError;mocksOnServer=D8;constructor(){this.state.connect(this.rpc),jq(`network`,this.selectedCallId),T(()=>{let e=this.rpc();e&&this.state.load(e)})}retry(){this.state.retry()}selectPage(e){e&&this.state.selectedPageId.set(e),this.selectedCallId.set(null),this.overrideFromPayload.set(null)}openCall(e){this.state.openCall(e)}clearCalls(){return this.state.clearCalls()}copyPreview(e){return this.state.copyPreview(e)}copyKey(e){return this.state.copyKey(e)}setDraft(e,t){this.ruleState.setDraft(e,t)}addRule(e){return this.ruleState.addRule(e)}toggleRule(e){this.ruleState.toggleRule(e)}removeRule(e){return this.ruleState.removeRule(e)}setOverrideDraft(e,t){this.overrideState.setOverrideDraft(e,t)}canEditEntry(e){return this.overrideState.canEditEntry(e)}addOverride(e){return this.overrideState.addOverride(e)}toggleOverride(e){this.overrideState.toggleOverride(e)}removeOverride(e){return this.overrideState.removeOverride(e)}announce(e){this.state.announce(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-network-inspector`]],inputs:{rpc:[1,`rpc`]},features:[rv([A8,W8,G8])],decls:25,vars:15,consts:[[1,`page-intro`],[`kind`,`loading`],[`kind`,`error`],[1,`toolbar`,3,`hidden`],[1,`page-picker`],[`id`,`page-picker-label`],[`labelledBy`,`page-picker-label`,`emptyText`,`No connected page`,`placeholder`,`No connected page`,3,`valueChange`,`options`,`value`],[`type`,`button`,3,`click`,`disabled`],[3,`done`,`calls`,`ssrRequest`,`title`,`pageUrl`],[`role`,`status`,1,`message`],[1,`grid`,3,`hidden`],[`appSsrRequests`,``,`aria-labelledby`,`ssr-heading`,1,`panel`,`wide`],[`appCallTimeline`,``,`aria-labelledby`,`timeline-heading`,1,`panel`,`wide`],[`aria-labelledby`,`lint-heading`,1,`panel`,`wide`],[`id`,`lint-heading`],[3,`open`,`calls`,`serverCalls`],[`appFaultRules`,``,`aria-labelledby`,`rules-heading`,1,`panel`],[`appSsrOverrides`,``,`aria-labelledby`,`overrides-heading`,1,`panel`],[`appHydrationStats`,``,`aria-labelledby`,`hydration-heading`,1,`panel`],[`appTransferPayload`,``,`aria-labelledby`,`payload-heading`,1,`panel`,`wide`],[`kind`,`error`,3,`retry`],[`detail`,``]],template:function(e,t){e&1&&(P(0,`p`,0),G(1,` HttpClient calls made while rendering on the server and in the browser, from the live page and the devtools server, with hydration stats, the TransferState payload and fault injection.
+`),F(),k(2,Gue,2,0,`app-state`,1)(3,Kue,4,0,`app-state`,2),P(4,`div`,3)(5,`div`,4)(6,`span`,5),G(7,`Page`),F(),P(8,`app-select`,6),V(`valueChange`,function(e){return t.selectPage(e)}),F()(),P(9,`button`,7),V(`click`,function(){return t.clearCalls()}),G(10,` Clear timeline `),F(),P(11,`app-har-export`,8),V(`done`,function(e){return t.message.set(e)}),F(),P(12,`p`,9),G(13),F()(),P(14,`div`,10),I(15,`section`,11)(16,`section`,12),P(17,`section`,13)(18,`h2`,14),G(19,`HTTP lint`),F(),P(20,`app-http-lint`,15),V(`open`,function(e){return t.openCall(e)}),F()(),I(21,`section`,16)(22,`section`,17)(23,`section`,18)(24,`section`,19),F()),e&2&&(E(2),A(t.loading()?2:t.failed()?3:-1),E(2),N(`hidden`,t.loading()),E(4),N(`options`,t.pageOptions())(`value`,t.selected()?.pageId??null),E(),N(`disabled`,!t.canWrite()),O(`aria-describedby`,t.canWrite()?null:`http-writes-off`),E(2),N(`calls`,t.timeline())(`ssrRequest`,t.pageSsrRequest())(`title`,t.selected()?.title??``)(`pageUrl`,t.selected()?.url),E(2),K(t.message()),E(),N(`hidden`,t.loading()),E(6),N(`calls`,t.selected()?.calls??iv(14,Wue))(`serverCalls`,t.renderServerCalls()))},dependencies:[aR,qce,ule,fle,ble,Ple,JE,Gle,bue,Uue],styles:[`.page-intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.toolbar[hidden][_ngcontent-%COMP%], 
+.grid[hidden][_ngcontent-%COMP%] {
+  display: none;
+}
+
+[_nghost-%COMP%] {
+  display: block;
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.state[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+}
+
+.state.error[_ngcontent-%COMP%] {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.state.error[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  font-weight: 600;
+}
+
+.state.error[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.state.error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  margin-top: 4px;
+}
+
+.spinner[_ngcontent-%COMP%] {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--%NS%border-strong);
+  border-top-color: var(--%NS%accent);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 0 0 16px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.toolbar[_ngcontent-%COMP%]   .page-picker[_ngcontent-%COMP%] {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.page-picker[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.toolbar[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+  width: 280px;
+  max-width: 420px;
+}
+
+.message[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  text-align: right;
+}
+
+.message[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.grid[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.panel[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  animation: enter 0.35s var(--%NS%ease) both;
+  min-width: 0;
+  padding: 16px;
+}
+
+.wide[_ngcontent-%COMP%] {
+  grid-column: 1/-1;
+}
+
+h2[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 16px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+label[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+label.inline[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.hint[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-weight: 400;
+}
+
+input[_ngcontent-%COMP%], 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%], 
+button[_ngcontent-%COMP%] {
+  font: inherit;
+  color: var(--%NS%text);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%], 
+textarea[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background-color: var(--%NS%bg);
+  transition: border-color 0.2s var(--%NS%ease), box-shadow 0.2s var(--%NS%ease);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]), 
+select[_ngcontent-%COMP%] {
+  height: 34px;
+}
+
+select[_ngcontent-%COMP%] {
+  padding-right: 36px;
+}
+
+textarea[_ngcontent-%COMP%] {
+  padding: 8px 10px;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+input[_ngcontent-%COMP%]::placeholder, 
+textarea[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):hover, 
+select[_ngcontent-%COMP%]:hover, 
+textarea[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%control-border) 60%, var(--%NS%text-3));
+}
+
+input[_ngcontent-%COMP%]:not([type=checkbox]):focus-visible, 
+select[_ngcontent-%COMP%]:focus-visible, 
+textarea[_ngcontent-%COMP%]:focus-visible {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+textarea[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 60%, transparent);
+}
+
+input[type=checkbox][_ngcontent-%COMP%] {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--%NS%accent);
+  cursor: pointer;
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease), transform 0.1s var(--%NS%ease);
+}
+
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%surface-3);
+}
+
+button[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+button[type=submit][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+button[type=submit][_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%accent-hover);
+  background: var(--%NS%accent-hover);
+}
+
+button[_ngcontent-%COMP%]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button.ghost[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  border-color: transparent;
+  background: none;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+button.ghost[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border-color: var(--%NS%border-strong);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+button.link[_ngcontent-%COMP%] {
+  display: inline;
+  height: auto;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--%NS%text);
+  text-align: left;
+}
+
+button.link[_ngcontent-%COMP%]:hover:not(:disabled) {
+  border: none;
+  background: none;
+  color: var(--%NS%accent);
+}
+
+button.link[_ngcontent-%COMP%]:active:not(:disabled) {
+  transform: none;
+}
+
+[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.small[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.bad[_ngcontent-%COMP%] {
+  color: var(--%NS%danger);
+}
+
+.empty[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  padding: 24px 16px;
+  border: 1px dashed var(--%NS%border-strong);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  text-align: center;
+  line-height: 1.5;
+}
+
+.empty-actions[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+@media (max-width: 760px) {
+  .grid[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .toolbar[_ngcontent-%COMP%]   .page-picker[_ngcontent-%COMP%] {
+    flex: 1 1 100%;
+  }
+  .toolbar[_ngcontent-%COMP%]   app-select[_ngcontent-%COMP%] {
+    flex: 1 1 auto;
+    width: auto;
+    max-width: none;
+  }
+  .message[_ngcontent-%COMP%] {
+    text-align: left;
+  }
+}`]})};function Jue(e,t){e&1&&(C(),L(0,`svg`,9),Sg(1,`path`,21),R())}function Yue(e,t){e&1&&(C(),L(0,`svg`,10)(1,`defs`)(2,`linearGradient`,22),Sg(3,`stop`,23)(4,`stop`,24),R()(),Sg(5,`path`,25),L(6,`g`,26),Sg(7,`path`,27)(8,`path`,28)(9,`path`,29)(10,`path`,30),R()())}function Xue(e,t){e&1&&(C(),L(0,`svg`,11),Sg(1,`path`,31)(2,`path`,32)(3,`path`,33)(4,`path`,34),R())}function Zue(e,t){e&1&&(C(),L(0,`svg`,9),Sg(1,`path`,35)(2,`path`,36)(3,`path`,37)(4,`path`,38)(5,`path`,39)(6,`path`,40),R())}function Que(e,t){if(e&1&&(L(0,`a`,16)(1,`span`,41)(2,`strong`),G(3),R()(),L(4,`span`,42),G(5,`→`),R(),L(6,`span`,43),G(7,`(opens in a new tab)`),R()()),e&2){let e=t;B(`href`,e.href,Fu),E(3),K(e.label)}}function $ue(e,t){if(e&1&&(L(0,`li`),G(1),R()),e&2){let e=t.$implicit,n=t.$index;f_(`animation-delay`,200+n*120,`ms`),E(),K(e)}}function ede(e,t){if(e&1&&(L(0,`p`,20)(1,`a`,44),G(2,`Supported and planned platforms`),L(3,`span`,43),G(4,` (opens in a new tab)`),R()()()),e&2){let e=U();E(),B(`href`,e.platformsUrl,Fu)}}var tde=`https://pangular-inspector.dev/getting-started/platforms/`,nde=class e{info=$.required();platformsUrl=tde;plansTitle=X(()=>{let e=this.info();return e.plansTitle??(e.link?`In an ${e.name} app`:`On the roadmap`)});static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-coming-soon`]],hostVars:2,hostBindings:function(e,t){e&2&&f_(`--%NS%brand`,t.info().color)},inputs:{info:[1,`info`]},decls:30,vars:7,consts:[[`aria-labelledby`,`soon-title`,1,`soon`],[`aria-hidden`,`true`,1,`stage`],[1,`ring`,`r1`],[1,`ring`,`r2`],[1,`orbit`,`o1`],[1,`dot`],[1,`orbit`,`o2`],[1,`orbit`,`o3`],[1,`logo`],[`viewBox`,`0 0 256 256`,`width`,`96`,`height`,`96`],[`viewBox`,`0 0 32 32`,`width`,`88`,`height`,`88`],[`viewBox`,`0 0 256 182`,`width`,`104`,`height`,`74`],[1,`badge`],[`aria-hidden`,`true`,1,`spark`],[`id`,`soon-title`],[1,`summary`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`author`,`cta`,3,`href`],[1,`plans-title`],[1,`plans`],[3,`animation-delay`],[1,`platforms`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`id`,`an-hero-grad`,`x1`,`0`,`y1`,`0`,`x2`,`1`,`y2`,`1`],[`offset`,`0`,`stop-color`,`#f0224f`],[`offset`,`1`,`stop-color`,`#c4002d`],[`d`,`M16 0C27.2 0 32 4.8 32 16S27.2 32 16 32 0 27.2 0 16 4.8 0 16 0Z`,`fill`,`url(#an-hero-grad)`],[`transform`,`translate(6.4 6.4) scale(0.8)`,`fill`,`#fff`],[`d`,`M14.8486 0L23.138 16.8551L23.9996 3.99892L14.8486 0Z`],[`d`,`M16.9875 17.7114H7.01272L5.73926 20.627L12.0001 24L18.261 20.627L16.9875 17.7114Z`],[`d`,`M8.72168 13.9298H15.2812L11.9997 6.39575L8.72168 13.9298Z`],[`d`,`M9.15103 0L0 3.99892L0.861556 16.8551L9.15103 0Z`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[1,`who`],[`aria-hidden`,`true`,1,`go`],[1,`sr-only`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`]],template:function(e,t){if(e&1&&(L(0,`section`,0)(1,`div`,1),Sg(2,`span`,2)(3,`span`,3),L(4,`span`,4),Sg(5,`span`,5),R(),L(6,`span`,6),Sg(7,`span`,5),R(),L(8,`span`,7),Sg(9,`span`,5),R(),L(10,`div`,8),k(11,Jue,2,0,`:svg:svg`,9)(12,Yue,11,0,`:svg:svg`,10)(13,Xue,5,0,`:svg:svg`,11)(14,Zue,7,0,`:svg:svg`,9),R()(),L(15,`p`,12)(16,`span`,13),G(17,`✦`),R(),G(18),R(),L(19,`h2`,14),G(20),R(),L(21,`p`,15),G(22),R(),k(23,Que,8,2,`a`,16),L(24,`h3`,17),G(25),R(),L(26,`ul`,18),j(27,$ue,2,3,`li`,19,dg),R(),k(29,ede,5,1,`p`,20),R()),e&2){let e,n;E(11),A((e=t.info().id)===`nativescript`?11:e===`angular-native`?12:e===`analog`?13:e===`capacitor`?14:-1),E(7),q(` `,t.info().badge),E(2),K(t.info().heading),E(2),K(t.info().summary),E(),A((n=t.info().link)?23:-1,n),E(2),q(` `,t.plansTitle(),` `),E(2),M(t.info().plans),E(2),A(t.info().id===`analog`?-1:29)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+  min-height: 100%;
+  background: radial-gradient(60% 50% at 50% 18%, color-mix(in srgb, var(--%NS%brand) 22%, transparent), transparent 70%);
+}
+
+.soon[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 24px 0 40px;
+  color: var(--%NS%text-2);
+  text-align: center;
+}
+
+.stage[_ngcontent-%COMP%] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 180px;
+  height: 180px;
+  margin: 0 auto 16px;
+}
+
+.logo[_ngcontent-%COMP%] {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 116px;
+  height: 116px;
+  border-radius: 32px;
+  background: var(--%NS%surface-2);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--%NS%brand) 45%, transparent), 0 20px 60px -10px color-mix(in srgb, var(--%NS%brand) 70%, transparent);
+  animation: _ngcontent-%COMP%_float 4s ease-in-out infinite;
+}
+
+.ring[_ngcontent-%COMP%] {
+  position: absolute;
+  inset: 30px;
+  border-radius: 50%;
+  border: 1px solid color-mix(in srgb, var(--%NS%brand) 60%, transparent);
+  animation: _ngcontent-%COMP%_pulse 3s ease-out infinite;
+}
+
+.r2[_ngcontent-%COMP%] {
+  animation-delay: 1.5s;
+}
+
+.orbit[_ngcontent-%COMP%] {
+  position: absolute;
+  inset: 0;
+  animation: spin 9s linear infinite;
+}
+
+.o2[_ngcontent-%COMP%] {
+  inset: 18px;
+  animation-duration: 6s;
+  animation-direction: reverse;
+}
+
+.o3[_ngcontent-%COMP%] {
+  inset: 40px;
+  animation-duration: 12s;
+}
+
+.dot[_ngcontent-%COMP%] {
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  margin-left: -4px;
+  border-radius: 50%;
+  background: var(--%NS%brand);
+  box-shadow: 0 0 12px var(--%NS%brand);
+}
+
+.o2[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
+  width: 6px;
+  height: 6px;
+  background: var(--%NS%accent);
+  box-shadow: 0 0 10px var(--%NS%accent);
+}
+
+.o3[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {
+  width: 4px;
+  height: 4px;
+  background: var(--%NS%text-strong);
+}
+
+.badge[_ngcontent-%COMP%] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  margin: 0 0 12px;
+  padding: 0 12px;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--%NS%brand) 55%, transparent);
+  border-radius: 99px;
+  background: color-mix(in srgb, var(--%NS%brand) 14%, var(--%NS%surface));
+  color: var(--%NS%text-strong);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.badge[_ngcontent-%COMP%]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.2) 50%, transparent 80%);
+  transform: translateX(-100%);
+  animation: _ngcontent-%COMP%_shimmer 2.8s ease-in-out infinite;
+}
+
+.spark[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  animation: _ngcontent-%COMP%_twinkle 1.6s ease-in-out infinite;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 28px;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+  overflow-wrap: anywhere;
+}
+
+.summary[_ngcontent-%COMP%] {
+  max-width: 480px;
+  margin: 12px 0 24px;
+  font-size: 14px;
+  line-height: 1.6;
+  text-wrap: pretty;
+}
+
+.author[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 100%;
+  min-height: 44px;
+  padding: 8px 16px 8px 8px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  text-align: left;
+  text-decoration: none;
+  transition: border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease), transform 0.2s var(--%NS%ease);
+}
+
+.author[_ngcontent-%COMP%]:hover {
+  border-color: color-mix(in srgb, var(--%NS%brand) 70%, transparent);
+  background: var(--%NS%surface-2);
+  transform: translateY(-2px);
+}
+
+.author[_ngcontent-%COMP%]:active {
+  transform: none;
+}
+
+.author[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.cta[_ngcontent-%COMP%] {
+  padding: 8px 16px;
+}
+
+.who[_ngcontent-%COMP%] {
+  display: grid;
+  min-width: 0;
+  line-height: 1.35;
+}
+
+.who[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  overflow: hidden;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.go[_ngcontent-%COMP%] {
+  flex: none;
+  margin-left: 4px;
+  color: var(--%NS%brand);
+  font-size: 16px;
+  transition: transform 0.2s var(--%NS%ease), color 0.2s var(--%NS%ease);
+}
+
+.author[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%], 
+.author[_ngcontent-%COMP%]:focus-visible   .go[_ngcontent-%COMP%] {
+  transform: translateX(3px);
+}
+
+.plans-title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  width: 100%;
+  max-width: 440px;
+  margin: 32px 0 12px;
+  text-align: left;
+}
+
+.plans[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 8px;
+  width: 100%;
+  max-width: 440px;
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+}
+
+.plans[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 12px 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 13px;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+  opacity: 0;
+  animation: _ngcontent-%COMP%_rise 0.5s var(--%NS%ease) forwards;
+}
+
+.plans[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]::before {
+  content: "";
+  flex: none;
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  border-radius: 50%;
+  background: var(--%NS%brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--%NS%brand) 20%, transparent);
+}
+
+.platforms[_ngcontent-%COMP%] {
+  width: 100%;
+  max-width: 440px;
+  margin: 16px auto 0;
+  font-size: 13px;
+  text-align: left;
+}
+
+.platforms[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.platforms[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text-strong);
+}
+
+.platforms[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+@media (max-height: 640px) {
+  .soon[_ngcontent-%COMP%] {
+    padding-top: 12px;
+  }
+  .stage[_ngcontent-%COMP%] {
+    width: 120px;
+    height: 120px;
+    margin-bottom: 8px;
+  }
+  .logo[_ngcontent-%COMP%] {
+    width: 80px;
+    height: 80px;
+    border-radius: 22px;
+  }
+  .logo[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+    width: 60px;
+    height: auto;
+  }
+  .o3[_ngcontent-%COMP%] {
+    display: none;
+  }
+  h2[_ngcontent-%COMP%] {
+    font-size: 22px;
+  }
+}
+@media (max-width: 420px) {
+  h2[_ngcontent-%COMP%] {
+    font-size: 22px;
+  }
+  .author[_ngcontent-%COMP%] {
+    align-self: stretch;
+  }
+  .who[_ngcontent-%COMP%] {
+    flex: 1;
+  }
+}
+@keyframes _ngcontent-%COMP%_float {
+  50% {
+    transform: translateY(-10px) rotate(-2deg);
+  }
+}
+@keyframes _ngcontent-%COMP%_pulse {
+  from {
+    transform: scale(0.8);
+    opacity: 0.9;
+  }
+  to {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+@keyframes _ngcontent-%COMP%_shimmer {
+  60%, 100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes _ngcontent-%COMP%_twinkle {
+  50% {
+    opacity: 0.35;
+    transform: scale(0.8);
+  }
+}
+@keyframes _ngcontent-%COMP%_rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .logo[_ngcontent-%COMP%], 
+   .ring[_ngcontent-%COMP%], 
+   .orbit[_ngcontent-%COMP%], 
+   .badge[_ngcontent-%COMP%]::after, 
+   .spark[_ngcontent-%COMP%] {
+    animation: none;
+  }
+  .ring[_ngcontent-%COMP%] {
+    opacity: 0.3;
+  }
+  .plans[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+    opacity: 1;
+    animation: none;
+  }
+  .author[_ngcontent-%COMP%]:hover, 
+   .author[_ngcontent-%COMP%]:hover   .go[_ngcontent-%COMP%] {
+    transform: none;
+  }
+}`]})},rde=new Set([`CapacitorCookies`,`CapacitorHttp`,`SystemBars`,`WebView`]);function ide(e){return e==null?`Unknown`:e?`Yes`:`No`}function ade(e,t){let n=t.size?Math.max(...t.values())+1:0;for(let r of e)t.has(r.pageId)||t.set(r.pageId,n++);let r=new Set(e.map(e=>e.pageId));for(let e of t.keys())r.has(e)||t.delete(e);return[...e].sort((e,n)=>t.get(e.pageId)-t.get(n.pageId))}function ode(e,t){let n=[...e].sort((e,t)=>t.reportedAt-e.reportedAt);return e.find(e=>e.pageId===t)?.pageId??n.find(e=>e.info.bridge)?.pageId??n[0]?.pageId??null}var q8=new WeakMap;function sde(e){let t=e.calls;if(Array.isArray(t))return e;let n=q8.get(e);if(!n){let r=Object.values(t??{}).filter(e=>!!e&&typeof e.id==`number`);n={...e,calls:r.sort((e,t)=>e.id-t.id)},q8.set(e,n)}return n}function J8(e){let t=e?.pages;return!t||typeof t!=`object`?[]:Object.values(t).filter(e=>e&&typeof e.pageId==`string`&&!!e.info).map(sde).sort((e,t)=>t.reportedAt-e.reportedAt)}function Y8(e){let t=e.error;return!!t&&(t.code===`UNIMPLEMENTED`||/not implemented/i.test(t.message))}function X8(e,t){return e.durationMs===void 0?e.status===`pending`?Math.max(0,t-e.startedAt):0:e.durationMs}function Z8(e,t,n){return t===`failed`?e.status===`error`:t===`pending`?e.status===`pending`:t!==`slow`||X8(e,n)>=500}function Q8(e){if(e<1e3)return`${Math.max(0,Math.round(e))} ms`;let t=Math.round(e/1e3);if(t<60)return`${t} s`;let n=Math.round(t/60);return n<60?`${n} min`:`${Math.round(n/60)} h`}function cde(e,t){let n=t-e;return n<1e3?`just now`:`${Q8(n)} ago`}function $8(e,t){return rde.has(e.name)?null:e.registered===!0&&!e.available?t===`android`||t===`ios`?{before:`Not available on ${t}. Run `,command:`npx cap sync ${t}`,after:`, then run the app again.`}:{before:`Not available here. Run `,command:`npx cap sync`,after:` if it should be native.`}:e.native&&e.registered===!1?{before:`Installed, not imported by the app.`}:null}function lde(e,t){let n=e.info,r=n=>e.calls.filter(e=>Z8(e,n,t)).length,i=n.env.capacitorHttp;return{pageId:e.pageId,platform:n.platform,native:n.native,logsCalls:n.bridge||n.webCalls,calls:e.calls.length,failed:r(`failed`),slow:r(`slow`),pending:r(`pending`),capacitorHttp:i===null?`Unknown`:i?`On`:`Off`,hints:n.plugins.filter(e=>$8(e,n.platform)).length}}function ude(e){let t=new Map;for(let n of e){if(n.removed)continue;let e=`${n.plugin} ${n.event}`;t.set(e,(t.get(e)??0)+1)}return t}var e5=/^[A-Za-z_$][\w$]*$/;function t5(e,t=``){if(e===void 0)return`undefined`;if(typeof e!=`object`||!e)return JSON.stringify(e)??String(e);let n=`${t}  `;if(Array.isArray(e))return e.length?`[\n${e.map(e=>n+t5(e,n)).join(`,
+`)},\n${t}]`:`[]`;let r=Object.entries(e);return r.length?`{\n${r.map(([e,t])=>`${n}${e5.test(e)?e:JSON.stringify(e)}: ${t5(t,n)}`).join(`,
+`)},\n${t}}`:`{}`}function dde(e){let t=e5.test(e.plugin)?e.plugin:`Capacitor.Plugins[${JSON.stringify(e.plugin)}]`,n=e5.test(e.method)?`.${e.method}`:`[${JSON.stringify(e.method)}]`,r=e.args===void 0?[]:[t5(e.args)];return e.kind===`callback`&&(r.length||r.push(`{}`),r.push(`(result, error) => {}`)),`await ${t}${n}(${r.join(`, `)});`}function n5(e){if(e===void 0)return`undefined`;try{return JSON.stringify(e,null,2)??`undefined`}catch{return String(e)}}function fde(e,t=120){let n;try{n=JSON.stringify(e)??`undefined`}catch{n=String(e)}return n.length>t?`${n.slice(0,t-1)}…`:n}function pde(e,t){if(e&1){let e=z();L(0,`button`,8),H(`click`,function(){let t=x(e).$implicit;return S(U().tab.set(t))}),G(1),R()}if(e&2){let e=t.$implicit,n=U();B(`id`,`cap-tab-`+e),O(`aria-selected`,n.tab()===e)(`aria-controls`,`cap-panel-`+e)(`tabindex`,n.tab()===e?0:-1),E(),q(` `,n.tabLabel(e),` `)}}function mde(e,t){e&1&&(L(0,`p`,9),G(1,`No arguments.`),R())}function hde(e,t){if(e&1&&(L(0,`pre`,10),G(1),R()),e&2){let e=U(2),t=Y(0);E(),K(e.json(t.args))}}function gde(e,t){e&1&&k(0,mde,2,0,`p`,9)(1,hde,2,1,`pre`,10),e&2&&(U(),A(Y(0).args===void 0?0:1))}function _de(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U();E(),K(e.code)}}function vde(e,t){if(e&1&&(L(0,`p`,11),k(1,_de,2,1,`code`),G(2),R()),e&2){let e=t;E(),A(e.code?1:-1),E(),q(` `,e.message,` `)}}function yde(e,t){e&1&&(L(0,`p`,9),G(1,`No answer yet.`),R())}function bde(e,t){if(e&1&&(L(0,`p`,9),G(1),R()),e&2){U(3);let e=Y(0);E(),q(`The latest of `,e.callbacks,` callbacks.`)}}function xde(e,t){e&1&&(L(0,`p`,9),G(1,`Resolved without a value.`),R())}function Sde(e,t){if(e&1&&(L(0,`pre`,12),G(1),R()),e&2){let e=U(3),t=Y(0);E(),K(e.json(t.result))}}function Cde(e,t){if(e&1&&(k(0,bde,2,1,`p`,9),k(1,xde,2,0,`p`,9)(2,Sde,2,1,`pre`,12)),e&2){U(2);let e=Y(0);A(e.callbacks&&e.callbacks>1?0:-1),E(),A(e.result===void 0?1:2)}}function wde(e,t){if(e&1&&k(0,vde,3,2,`p`,11)(1,yde,2,0,`p`,9)(2,Cde,3,2),e&2){let e;U();let t=Y(0);A((e=t.error)?0:t.status===`pending`?1:2,e)}}function Tde(e,t){if(e&1&&(L(0,`div`)(1,`dt`),G(2,`Callbacks`),R(),L(3,`dd`),G(4),R()()),e&2){U(2);let e=Y(0);E(4),K(e.callbacks??0)}}function Ede(e,t){if(e&1&&(L(0,`dl`)(1,`div`)(2,`dt`),G(3,`Started`),R(),L(4,`dd`),G(5),R()(),L(6,`div`)(7,`dt`),G(8,`Finished`),R(),L(9,`dd`),G(10),R()(),L(11,`div`)(12,`dt`),G(13),R(),L(14,`dd`),G(15),R()(),k(16,Tde,5,1,`div`),R()),e&2){let e=U(),t=Y(0);E(5),K(e.time(t.startedAt)),E(5),q(` `,t.durationMs===void 0?`Not yet`:e.time(t.startedAt+t.durationMs),` `),E(3),K(t.status===`pending`?`Waiting for`:`Duration`),E(2),K(e.span(e.took(t,e.now()))),E(),A(t.kind===`callback`?16:-1)}}var r5=[`args`,`outcome`,`timing`],Dde=class e{call=$.required();now=$.required();announce=xv();host=b(Rl);tab=w(`args`);tabOrder=r5;json=n5;time=aD;span=Q8;took=X8;statusText=X(()=>{let e=this.call();return e.status===`pending`?`Pending`:e.status===`ok`?`OK`:Y8(e)?`Not implemented`:`Error`});panelHasFocusable=X(()=>{let e=this.call();return this.tab()===`args`?e.args!==void 0:this.tab()===`outcome`&&!e.error&&e.status===`ok`&&e.result!==void 0});tabLabel(e){return e===`args`?`Arguments`:e===`timing`?`Timing`:this.call().status===`error`?`Error`:`Result`}onTabKey(e){let t=r5.indexOf(this.tab()),n;if(e.key===`ArrowRight`)n=(t+1)%r5.length;else if(e.key===`ArrowLeft`)n=(t-1+r5.length)%r5.length;else if(e.key===`Home`)n=0;else if(e.key===`End`)n=r5.length-1;else return;e.preventDefault();let r=r5[n];this.tab.set(r),this.host.nativeElement.querySelector(`#cap-tab-${r}`)?.focus()}async copy(e){let t=this.call(),n=`${t.plugin}.${t.method}()`,r=e===`json`?n5(t):dde(t);try{await navigator.clipboard.writeText(r),this.announce.emit(`Copied ${n} as ${e===`json`?`JSON`:`code`}.`)}catch{this.announce.emit(`The clipboard is not available here.`)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-capacitor-call-detail`]],inputs:{call:[1,`call`],now:[1,`now`]},outputs:{announce:`announce`},decls:19,vars:10,consts:[[`id`,`cap-detail`,`aria-labelledby`,`cap-detail-title`,1,`detail`],[`id`,`cap-detail-title`],[1,`meta`],[1,`actions`],[`type`,`button`,1,`small`,3,`click`],[`role`,`tablist`,`aria-label`,`Call details`,1,`tabs`,3,`keydown`],[`type`,`button`,`role`,`tab`,3,`id`],[`role`,`tabpanel`,1,`panel`,3,`id`],[`type`,`button`,`role`,`tab`,3,`click`,`id`],[1,`muted`],[`tabindex`,`0`,`aria-label`,`Arguments`],[1,`error-text`],[`tabindex`,`0`,`aria-label`,`Result`]],template:function(e,t){if(e&1&&(G_(0),L(1,`section`,0)(2,`h3`,1)(3,`code`),G(4),R()(),L(5,`p`,2),G(6),R(),L(7,`div`,3)(8,`button`,4),H(`click`,function(){return t.copy(`json`)}),G(9,`Copy as JSON`),R(),L(10,`button`,4),H(`click`,function(){return t.copy(`code`)}),G(11,`Copy as code`),R()(),L(12,`div`,5),H(`keydown`,function(e){return t.onTabKey(e)}),j(13,pde,2,5,`button`,6,dg),R(),L(15,`div`,7),k(16,gde,2,1)(17,wde,3,1)(18,Ede,17,5,`dl`),R()()),e&2){let e,n=K_(t.call());E(4),J(``,n.plugin,`.`,n.method,`()`),E(2),R_(` `,t.statusText(),`, `,n.via,`, `,n.kind===`callback`?`stream`:`promise`,` `),E(7),M(t.tabOrder),E(2),B(`id`,`cap-panel-`+t.tab()),O(`aria-labelledby`,`cap-tab-`+t.tab())(`tabindex`,t.panelHasFocusable()?null:0),E(),A((e=t.tab())===`args`?16:e===`outcome`?17:e===`timing`?18:-1)}},styles:[`.detail[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  position: sticky;
+  top: 64px;
+  min-width: 0;
+  margin: 0;
+  padding: 12px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 0 0 4px;
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.meta[_ngcontent-%COMP%], 
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 10px 0;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.tabs[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 2px;
+  max-width: 100%;
+  margin: 0 0 8px;
+  padding: 2px;
+  overflow-x: auto;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%] {
+  flex: none;
+  height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:hover {
+  color: var(--%NS%text);
+  background: var(--%NS%surface-2);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][aria-selected=true][_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong);
+}
+
+.tabs[_ngcontent-%COMP%]   [role=tab][_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.panel[_ngcontent-%COMP%] {
+  min-width: 0;
+  border-radius: var(--%NS%radius-sm);
+}
+
+.panel[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+pre[_ngcontent-%COMP%] {
+  max-height: 280px;
+  margin: 0;
+  padding: 8px;
+  overflow: auto;
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+pre[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.error-text[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 2px;
+}
+
+dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  font-variant-numeric: tabular-nums;
+}`]})},Ode=(e,t)=>t.id,kde=(e,t)=>t.elementId;function Ade(e,t){e&1&&(L(0,`p`,3),G(1,`This page has no `),L(2,`code`),G(3,`ion-router-outlet`),R(),G(4,`.`),R())}function jde(e,t){if(e&1&&(L(0,`code`,8),G(1),R()),e&2){let e=U().$implicit;E(),K(e.name)}}function Mde(e,t){if(e&1&&(L(0,`span`,9),G(1,`in tabs `),L(2,`code`),G(3),R()()),e&2){let e=U().$implicit;E(3),K(e.tabs)}}function Nde(e,t){if(e&1&&(L(0,`div`)(1,`dt`),G(2,`Can go back`),R(),L(3,`dd`),G(4),R()()),e&2){let e=U().$implicit;E(4),K(e.canGoBack?`Yes`:`No`)}}function Pde(e,t){if(e&1&&(L(0,`code`,14),G(1),R()),e&2){let e=U().$implicit;E(),K(e.url)}}function Fde(e,t){e&1&&(L(0,`span`,15),G(1,`Active`),R())}function Ide(e,t){if(e&1){let e=z();L(0,`li`)(1,`button`,11),H(`mouseenter`,function(){let t=x(e).$implicit;return S(U(5).highlight(t))})(`mouseleave`,function(){return x(e),S(U(5).highlight(null))})(`focus`,function(){let t=x(e).$implicit;return S(U(5).highlight(t))})(`blur`,function(){return x(e),S(U(5).highlight(null))})(`click`,function(){let t=x(e).$implicit;return S(U(5).highlight(t,!0))}),L(2,`span`,12),G(3),R(),L(4,`code`,13),G(5),R(),k(6,Pde,2,1,`code`,14),k(7,Fde,2,0,`span`,15),R()()}if(e&2){let e=t.$implicit,n=t.$index;E(),W(`active`,e.active),O(`aria-current`,e.active?`page`:null),E(2),K(n+1),E(2),K(e.component),E(),A(e.url?6:-1),E(),A(e.active?7:-1)}}function Lde(e,t){if(e&1&&(L(0,`ol`,10),j(1,Ide,8,7,`li`,null,kde),R()),e&2){let e=U().$implicit;O(`aria-label`,`Page stack of `+U(3).outletLabel(e)),E(),M(e.pages)}}function Rde(e,t){e&1&&(L(0,`p`,3),G(1,`No page in this outlet yet.`),R())}function zde(e,t){if(e&1&&(L(0,`p`,6),G(1),R()),e&2){let e=U().$implicit;E(),q(``,e.truncated,` older pages are not listed.`)}}function Bde(e,t){e&1&&(L(0,`p`,6),G(1,` Read from the outlet's pages in the DOM, without URLs. The Angular directive was not found: the app may not use `),L(2,`code`),G(3,`@ionic/angular`),R(),G(4,`, or it is not a development build. `),R())}function Vde(e,t){if(e&1&&(L(0,`article`,5)(1,`h3`,7)(2,`code`),G(3,`ion-router-outlet`),R(),k(4,jde,2,1,`code`,8),k(5,Mde,4,1,`span`,9),R(),L(6,`dl`)(7,`div`)(8,`dt`),G(9,`Pages`),R(),L(10,`dd`),G(11),R()(),L(12,`div`)(13,`dt`),G(14,`Last navigation`),R(),L(15,`dd`),G(16),R()(),k(17,Nde,5,1,`div`),R(),k(18,Lde,3,1,`ol`,10)(19,Rde,2,0,`p`,3),k(20,zde,2,1,`p`,6),k(21,Bde,5,0,`p`,6),R()),e&2){let e=t.$implicit,n=U(3);O(`aria-labelledby`,`cap-ionic-`+e.id),E(),B(`id`,`cap-ionic-`+e.id),E(3),A(e.name===`primary`?-1:4),E(),A(e.tabs?5:-1),E(6),K(e.pages.length+(e.truncated??0)),E(5),K(n.directionText(e)),E(),A(e.canGoBack===void 0?-1:17),E(),A(e.pages.length?18:19),E(2),A(e.truncated?20:-1),E(),A(e.source===`dom`?21:-1)}}function Hde(e,t){if(e&1&&(L(0,`p`,6),G(1),R()),e&2){let e=U(2);E(),q(``,e.truncatedOutlets,` more outlets are not listed.`)}}function Ude(e,t){if(e&1&&(L(0,`div`,4),j(1,Vde,22,10,`article`,5,Ode),R(),k(3,Hde,2,1,`p`,6)),e&2){let e=U();E(),M(e.outlets),E(2),A(e.truncatedOutlets?3:-1)}}function Wde(e,t){if(e&1&&(L(0,`section`,0)(1,`h2`,1),G(2,`Ionic page stacks`),R(),L(3,`p`,2),G(4,` Each `),L(5,`code`),G(6,`ion-router-outlet`),R(),G(7,` keeps the pages it has shown in a stack, oldest first. Read through `),L(8,`code`),G(9),R(),G(10),R(),k(11,Ade,5,0,`p`,3)(12,Ude,4,1),R()),e&2){let e=t;E(9),K(e.framework),E(),q(``,e.mode?` in `+e.mode+` mode`:``,`. The panel changes nothing in the app. `),E(),A(e.outlets.length?12:11)}}function Gde(e){let t=e?.pages;return t&&typeof t==`object`?Object.values(t):[]}var Kde={forward:`Forward`,back:`Back`,root:`Root`};function qde(e){if(!e.direction)return`Not seen yet`;let t=Kde[e.direction];if(e.directionSource===`inferred`)return`${t} (from the stack)`;let n=[e.tabSwitch?`tab switch`:null,e.animated===!1?`no animation`:null].filter(Boolean);return n.length?`${t} (${n.join(`, `)})`:t}var Jde=class e{rpc=$(null);pageId=$(null);pages=w([]);page=X(()=>{let e=this.pageId();return e?this.pages().find(t=>t.pageId===e)??null:null});directionText=qde;destroyRef=b(Os);unsubscribe=null;constructor(){T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),this.highlight(null)})}async load(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`ionic`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(Gde(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.pages.set([])}}outletLabel(e){return e.name===`primary`?`the primary outlet`:`outlet ${e.name}`}highlight(e,t=!1){let n=this.rpc();if(!n)return;let r=e?{pageId:this.pageId(),id:e.elementId,reveal:t}:null;n.scope(`pangular`).rpc.call(`request-page-highlight`,r).catch(()=>{})}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-capacitor-ionic`]],inputs:{rpc:[1,`rpc`],pageId:[1,`pageId`]},decls:1,vars:1,consts:[[`aria-labelledby`,`cap-ionic-title`],[`id`,`cap-ionic-title`],[1,`lead`],[1,`empty`],[1,`cards`],[1,`card`],[1,`note`],[3,`id`],[1,`outlet-name`],[1,`tabs`],[1,`stack`],[`type`,`button`,1,`stack-page`,3,`mouseenter`,`mouseleave`,`focus`,`blur`,`click`],[`aria-hidden`,`true`,1,`index`],[1,`component`],[1,`url`],[1,`chip`]],template:function(e,t){if(e&1&&k(0,Wde,13,3,`section`,0),e&2){let e;A((e=t.page())?0:-1,e)}},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+section[_ngcontent-%COMP%] {
+  margin: 0 0 24px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+}
+
+.lead[_ngcontent-%COMP%], 
+.note[_ngcontent-%COMP%], 
+.empty[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 8px 0 0;
+  font-size: 12px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.cards[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  padding: 12px;
+  min-width: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: baseline;
+  margin: 0 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+}
+
+.tabs[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 8px 16px;
+  margin: 0 0 10px;
+}
+
+dl[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 2px;
+}
+
+dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.stack[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.stack-page[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  width: 100%;
+  min-height: var(--%NS%control-h);
+  padding: 6px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.stack-page[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.stack-page.active[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+}
+
+.stack-page[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.index[_ngcontent-%COMP%] {
+  min-width: 18px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.component[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+}
+
+.url[_ngcontent-%COMP%] {
+  flex: 1 1 160px;
+  min-width: 0;
+  color: var(--%NS%text-2);
+}
+
+.chip[_ngcontent-%COMP%] {
+  margin-left: auto;
+  padding: 1px 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stack-page[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})},Yde=(e,t)=>t.plugin,Xde=(e,t)=>t.label;function Zde(e,t){if(e&1&&(L(0,`span`,5),G(1),R(),G(2,` `),L(3,`span`,6),G(4,`from `),L(5,`code`),G(6),R(),G(7),R()),e&2){let e=U().$implicit,t=U(2);E(),K(e.value),E(5),K(e.from),E(),q(`, `,t.ago(e.at,t.now()))}}function Qde(e,t){e&1&&(L(0,`span`,4),G(1,`Not reported yet`),R())}function $de(e,t){if(e&1&&(L(0,`div`)(1,`dt`),G(2),R(),L(3,`dd`),k(4,Zde,8,3)(5,Qde,2,0,`span`,4),R()()),e&2){let e=t.$implicit;E(2),K(e.label),E(2),A(e.value===null?5:4)}}function efe(e,t){if(e&1&&(L(0,`article`,2)(1,`h3`,3)(2,`code`),G(3),R()(),L(4,`dl`),j(5,$de,6,2,`div`,null,Xde),R()()),e&2){let e=t.$implicit;O(`aria-labelledby`,`cap-state-`+e.plugin),E(),B(`id`,`cap-state-`+e.plugin),E(2),K(e.plugin),E(2),M(e.fields)}}function tfe(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function i5(e,t=e=>e){return n=>{let r=tfe(n)?n[e]:void 0;return typeof r==`string`||typeof r==`number`||typeof r==`boolean`?t(String(r)):null}}function a5(e,t,n){return[...e.map(e=>({method:e,read:n})),...t.map(e=>({event:e,read:n}))]}var nfe=[{plugin:`Foldable`,fields:[{label:`Fold state`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`state`))},{label:`Posture`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`posture`))},{label:`Hinge orientation`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`hingeOrientation`))},{label:`Hinge angle`,sources:a5([`getHingeAngle`],[`hingeAngleChange`],i5(`angle`,e=>`${e}°`))},{label:`Active display`,sources:a5([`getFoldState`],[`foldStateChange`],i5(`activeDisplay`))},{label:`Size class`,sources:a5([`getSizeClass`],[`sizeClassChange`],e=>{let t=i5(`widthClass`)(e),n=i5(`heightClass`)(e);return!t&&!n?null:[t&&`width ${t}`,n&&`height ${n}`].filter(Boolean).join(`, `)})}]}];function rfe(e,t,n){let r=null,i=(e,t,i)=>{if(r&&r.at>=i)return;let a=n.read(e);a!==null&&(r={value:a,from:t,at:i})};if(`method`in n)for(let r of e.calls)r.plugin===t&&r.method===n.method&&r.status===`ok`&&i(r.result,`${n.method}()`,r.startedAt+(r.durationMs??0));else for(let r of e.listeners)r.plugin===t&&r.event===n.event&&r.lastEventAt!==void 0&&r.last!==void 0&&i(r.last,n.event,r.lastEventAt);return r}function ife(e,t=nfe){let n=new Set(e.info.plugins.map(e=>e.name));return t.filter(e=>n.has(e.plugin)).map(t=>({plugin:t.plugin,fields:t.fields.map(n=>{let r=null;for(let i of n.sources){let n=rfe(e,t.plugin,i);n&&(!r||n.at>r.at)&&(r=n)}let i=r;return{label:n.label,value:i?.value??null,from:i?.from??null,at:i?.at??null}})}))}var afe=class e{cards=$.required();now=$.required();ago=cde;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-capacitor-state`]],inputs:{cards:[1,`cards`],now:[1,`now`]},decls:5,vars:0,consts:[[1,`lead`],[1,`cards`],[1,`card`],[3,`id`],[1,`missing`],[1,`value`],[1,`source`]],template:function(e,t){e&1&&(L(0,`p`,0),G(1,` Read from the results and events the app already received. The panel calls nothing in the app. `),R(),L(2,`div`,1),j(3,efe,7,3,`article`,2,Yde),R()),e&2&&(E(3),M(t.cards()))},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.lead[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.cards[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 12px;
+}
+
+.card[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  padding: 12px;
+  min-width: 0;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 8px 16px;
+  margin: 0;
+}
+
+dl[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
+  min-width: 0;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 2px;
+}
+
+dd[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.value[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.source[_ngcontent-%COMP%], 
+.missing[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.missing[_ngcontent-%COMP%] {
+  font-style: italic;
+}`]})},ofe=(e,t)=>t.filter,o5=(e,t)=>t.id,sfe=(e,t)=>t.name;function cfe(e,t){e&1&&(P(0,`app-state`,1),G(1,`Loading Capacitor data…`),F())}function lfe(e,t){if(e&1){let e=z();P(0,`app-state`,4),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Can't read the Capacitor data from the devtools server. `),F()}}function ufe(e,t){if(e&1){let e=z();P(0,`button`,29),V(`click`,function(){let t=x(e).$implicit;return S(U(4).pickFilter(t.filter))}),P(1,`span`,26),G(2),F(),G(3,` `),P(4,`span`,27),G(5),F()()}if(e&2){let e=t.$implicit,n=U(4);O(`data-filter`,e.filter)(`aria-pressed`,n.callFilter()===e.filter),E(2),K(e.label),E(3),K(e.count)}}function dfe(e,t){if(e&1&&j(0,ufe,6,4,`button`,28,ofe),e&2){let e=U();M(U(2).callStats(e))}}function ffe(e,t){if(e&1&&(P(0,`span`,25)(1,`span`,26),G(2,`Platform`),F(),G(3,` `),P(4,`span`,27)(5,`code`),G(6),F(),G(7),F()(),k(8,dfe,2,0),P(9,`span`,25)(10,`span`,26),G(11,`CapacitorHttp`),F(),G(12,` `),P(13,`span`,27),G(14),F()(),P(15,`span`,25)(16,`span`,26),G(17,`Plugin hints`),F(),G(18,` `),P(19,`span`,27),G(20),F()()),e&2){let e=t;E(6),K(e.platform),E(),q(` `,e.native?`native`:`web`),E(),A(e.logsCalls?8:-1),E(6),K(e.capacitorHttp),E(6),K(e.hints)}}function pfe(e,t){if(e&1){let e=z();P(0,`div`,11)(1,`span`,30),G(2,`Page`),F(),P(3,`app-select`,31),V(`valueChange`,function(t){return x(e),S(U(2).selectedPageId.set(t))}),F()()}if(e&2){let e=U(),t=U();E(3),N(`options`,t.pageOptions())(`value`,e.pageId)}}function mfe(e,t){if(e&1&&(P(0,`section`,13)(1,`h2`,32),G(2,`Plugin state`),F(),I(3,`app-capacitor-state`,33),F()),e&2){let e=U(2);E(3),N(`cards`,e.stateCards())(`now`,e.now())}}function hfe(e,t){if(e&1&&(P(0,`p`,17),G(1,` Plugin calls aren't shown on this page. Native calls are logged on iOS and Android, where plugins go through the native bridge. To log calls a web implementation answers, load `),P(2,`code`),G(3,`@pangular-inspector/devtools/capacitor-hook`),F(),G(4,` before `),P(5,`code`),G(6,`@capacitor/core`),F(),G(7,`. `),P(8,`a`,34),G(9,`How to log web calls`),P(10,`span`,7),G(11,` (opens in a new tab)`),F()()()),e&2){let e=U(2);E(8),N(`href`,e.guideUrl,Fu)}}function gfe(e,t){if(e&1&&(P(0,`p`,17),G(1,` Only native calls are logged. Calls a web implementation answers are left out. `),P(2,`a`,34),G(3,`How to log them too`),P(4,`span`,7),G(5,` (opens in a new tab)`),F()()()),e&2){let e=U(3);E(2),N(`href`,e.guideUrl,Fu)}}function _fe(e,t){e&1&&(P(0,`p`,20),G(1,`No plugin calls yet. Use the app and they show up here.`),F())}function vfe(e,t){if(e&1){let e=z();P(0,`div`,20)(1,`p`),G(2,`No call matches the filters.`),F(),P(3,`p`,41),G(4),F(),P(5,`button`,42),V(`click`,function(){x(e),U();let t=Gg(3);return U(2).clearFilters(),S(t.focus())}),G(6,` Clear filters `),F()()}if(e&2){let e=U(2),t=U();E(4),R_(` `,e.calls.length,` `,e.calls.length===1?`call is`:`calls are`,` hidden by `,t.hiddenBy(),`. `)}}function yfe(e,t){e&1&&(C(),I(0,`path`,49))}function bfe(e,t){e&1&&(C(),I(0,`circle`,54)(1,`path`,55))}function xfe(e,t){e&1&&(C(),I(0,`circle`,54)(1,`path`,56))}function Sfe(e,t){e&1&&(C(),I(0,`circle`,54)(1,`path`,57))}function Cfe(e,t){e&1&&(P(0,`span`,50),G(1,`stream`),F())}function wfe(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,45),V(`click`,function(){let t=x(e).$implicit;return S(U(4).select(t.id))}),P(2,`code`,46),G(3),F(),P(4,`span`,47),C(),P(5,`svg`,48),k(6,yfe,1,0,`:svg:path`,49)(7,bfe,2,0)(8,xfe,2,0)(9,Sfe,2,0),F(),G(10),F(),k(11,Cfe,2,0,`span`,50),ys(),P(12,`span`,51)(13,`span`,52),I(14,`span`),F(),G(15),F(),P(16,`span`,50),G(17),F(),P(18,`time`,53),G(19),F()()()}if(e&2){let e,n=t.$implicit,r=U(4);E(),W(`selected`,r.selected()?.id===n.id),O(`aria-pressed`,r.selected()?.id===n.id),E(2),J(``,n.plugin,`.`,n.method,`()`),E(),O(`data-tone`,r.tone(n)),E(2),A((e=r.tone(n))===`ok`?6:e===`danger`?7:e===`warn`?8:9),E(4),q(` `,r.statusLabel(n),` `),E(),A(n.kind===`callback`?11:-1),E(3),f_(`width`,r.barWidth(n),`%`),E(),q(` `,r.durationText(n),` `),E(2),K(n.via),E(2),K(r.time(n.startedAt))}}function Tfe(e,t){if(e&1){let e=z();P(0,`app-capacitor-call-detail`,58),V(`announce`,function(t){return x(e),S(U(4).announce(t))}),F()}if(e&2){let e=U(4);N(`call`,t)(`now`,e.now())}}function Efe(e,t){if(e&1&&(P(0,`div`,40)(1,`ol`,43),j(2,wfe,20,14,`li`,null,o5),F(),k(4,Tfe,1,2,`app-capacitor-call-detail`,44),F()),e&2){let e,t=U(3);E(2),M(t.shownCalls()),E(2),A((e=t.selected())?4:-1,e)}}function Dfe(e,t){if(e&1){let e=z();k(0,gfe,6,1,`p`,17),P(1,`div`,35)(2,`app-search-field`,36,0),V(`valueChange`,function(t){return x(e),S(U(2).setSearch(t))}),F(),P(4,`app-select`,37),V(`valueChange`,function(t){return x(e),S(U(2).setFilter(t))}),F(),P(5,`span`,38),G(6),F()(),I(7,`app-limit-note`,39),k(8,_fe,2,0,`p`,20)(9,vfe,7,3,`div`,20)(10,Efe,5,1,`div`,40)}if(e&2){let e=U(),t=U();A(e.info.webCalls?-1:0),E(2),N(`value`,t.filter()),E(2),N(`options`,t.filterOptions)(`value`,t.callFilter()),E(2),J(``,t.shownCalls().length,` of `,e.calls.length,` calls`),E(),N(`dropped`,e.dropped)(`max`,t.maxCalls()),E(),A(e.calls.length?t.shownCalls().length?10:9:8)}}function Ofe(e,t){e&1&&(P(0,`p`,20),G(1,`No plugins are registered or installed.`),F())}function kfe(e,t){if(e&1&&(P(0,`code`),G(1),F()),e&2){let e=U();E(),K(e.command)}}function Afe(e,t){if(e&1){let e=z();P(0,`button`,64),V(`click`,function(){x(e);let t=U();return S(U(4).copyCommand(t.command))}),G(1,` Copy `),F()}e&2&&O(`aria-label`,`Copy `+U().command)}function jfe(e,t){if(e&1&&(P(0,`span`,62),G(1),k(2,kfe,2,1,`code`),G(3),F(),k(4,Afe,2,1,`button`,63)),e&2){let e=t;E(),K(e.before),E(),A(e.command?2:-1),E(),K(e.after),E(),A(e.command?4:-1)}}function Mfe(e,t){if(e&1&&(P(0,`tr`)(1,`th`,60)(2,`code`),G(3),F()(),P(4,`td`),G(5),F(),P(6,`td`),G(7),F(),P(8,`td`),G(9),F(),P(10,`td`,61),k(11,jfe,5,4),F()()),e&2){let e,n=t.$implicit,r=U(2),i=U();E(3),K(n.name),E(2),K(n.available?`Yes`:`No`),E(2),K(i.yesNo(n.registered)),E(2),K(n.native?`Yes`:`No`),E(2),A((e=i.pluginHint(n,r.info.platform))?11:-1,e)}}function Nfe(e,t){if(e&1&&(P(0,`div`,21)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,59),G(5,`Plugin`),F(),P(6,`th`,59),G(7,`Available`),F(),P(8,`th`,59),G(9,`Imported`),F(),P(10,`th`,59),G(11,`Native`),F(),P(12,`th`,59),G(13,`Note`),F()()(),P(14,`tbody`),j(15,Mfe,12,5,`tr`,null,sfe),F()()()),e&2){let e=U();E(15),M(e.info.plugins)}}function Pfe(e,t){e&1&&(P(0,`p`,20),G(1,`No plugin listeners. They show up when the app calls addListener.`),F())}function Ffe(e,t){if(e&1&&(P(0,`code`,67),G(1),F()),e&2){let e=U(2).$implicit,t=U(3);E(),K(t.preview(e.last))}}function Ife(e,t){e&1&&(P(0,`span`,67),G(1,`No data`),F())}function Lfe(e,t){if(e&1&&(k(0,Ffe,2,1,`code`,67)(1,Ife,2,0,`span`,67),P(2,`span`,41),G(3),F()),e&2){let e=U().$implicit,t=U(3);A(+(e.last===void 0)),E(3),q(`at `,t.time(e.lastEventAt))}}function Rfe(e,t){e&1&&G(0,` None yet `)}function zfe(e,t){if(e&1&&(P(0,`span`,66),C(),P(1,`svg`,48),I(2,`path`,68)(3,`path`,69),F(),G(4),F()),e&2){let e=U().$implicit,t=U(3);E(4),q(` `,t.leakCount(e),` active listeners: possible leak `)}}function Bfe(e,t){if(e&1&&(P(0,`tr`)(1,`th`,60)(2,`code`),G(3),F()(),P(4,`td`)(5,`code`),G(6),F()(),P(7,`td`),G(8),F(),P(9,`td`,65),k(10,Lfe,4,2)(11,Rfe,1,0),F(),P(12,`td`),G(13),k(14,zfe,5,1,`span`,66),F()()),e&2){let e=t.$implicit,n=U(3);E(3),K(e.plugin),E(3),K(e.event),E(2),K(e.events),E(2),A(e.lastEventAt?10:11),E(3),q(` `,e.removed?`Removed`:`Active`,` `),E(),A(!e.removed&&n.leakCount(e)>1?14:-1)}}function Vfe(e,t){if(e&1&&(P(0,`div`,24)(1,`table`)(2,`thead`)(3,`tr`)(4,`th`,59),G(5,`Plugin`),F(),P(6,`th`,59),G(7,`Event`),F(),P(8,`th`,59),G(9,`Events`),F(),P(10,`th`,59),G(11,`Last event`),F(),P(12,`th`,59),G(13,`State`),F()()(),P(14,`tbody`),j(15,Bfe,15,6,`tr`,null,o5),F()()()),e&2){let e=U();E(15),M(e.listeners)}}function Hfe(e,t){if(e&1&&(P(0,`p`,5),G(1,` Plugin calls, plugins and listeners of a Capacitor app, as its WebView reports them. Values are masked like other live data. `),F(),P(2,`div`,6),k(3,ffe,21,5),P(4,`span`,7),G(5),F()(),P(6,`section`,8)(7,`div`,9)(8,`h2`,10),G(9,`Environment`),F(),k(10,pfe,4,2,`div`,11),F(),P(11,`dl`)(12,`div`)(13,`dt`),G(14,`Platform`),F(),P(15,`dd`)(16,`code`),G(17),F(),G(18),F()(),P(19,`div`)(20,`dt`),G(21,`Server URL`),F(),P(22,`dd`)(23,`code`),G(24),F()()(),P(25,`div`)(26,`dt`),G(27,`CapacitorHttp`),F(),P(28,`dd`),G(29),F()(),P(30,`div`)(31,`dt`),G(32,`Calls logged`),F(),P(33,`dd`),G(34),F()(),P(35,`div`,12)(36,`dt`),G(37,`User agent`),F(),P(38,`dd`)(39,`code`),G(40),F()()()()(),k(41,mfe,4,2,`section`,13),I(42,`app-capacitor-ionic`,14),P(43,`section`,15)(44,`h2`,16),G(45,`Plugin calls`),F(),k(46,hfe,12,1,`p`,17)(47,Dfe,11,9),F(),P(48,`section`,18)(49,`h2`,19),G(50,`Plugins`),F(),k(51,Ofe,2,0,`p`,20)(52,Nfe,17,0,`div`,21),F(),P(53,`section`,22)(54,`h2`,23),G(55,`Listeners`),F(),k(56,Pfe,2,0,`p`,20)(57,Vfe,17,0,`div`,24),F()),e&2){let e,n=t,r=U();E(3),A((e=r.summary())?3:-1,e),E(2),K(r.message()),E(5),A(r.pageOptions().length>1?10:-1),E(7),K(n.info.platform),E(),q(` (`,n.info.native?`native`:`web`,`) `),E(6),K(n.info.env.serverUrl||`none`),E(5),q(` `,n.info.env.capacitorHttp===null?`Unknown`:n.info.env.capacitorHttp?`On`:`Off`,` `),E(5),K(r.loggedLabel()),E(6),K(n.info.env.userAgent||`unknown`),E(),A(r.stateCards().length?41:-1),E(),N(`rpc`,r.rpc())(`pageId`,n.pageId),E(4),A(!n.info.bridge&&!n.info.webCalls?46:47),E(5),A(n.info.plugins.length?52:51),E(5),A(n.listeners.length?57:56)}}function Ufe(e,t){e&1&&(P(0,`app-state`,3),G(1,` No Capacitor app reports to this server. `),P(2,`p`,70),G(3,`Start the overlay in the app, then use it.`),F()())}var Wfe=`https://pangular-inspector.dev/inspectors/capacitor/#web-calls`,Gfe=2e3,s5={all:`All calls`,failed:`Failed`,slow:`Slow (500 ms or more)`,pending:`Pending`},Kfe=class e{rpc=$(null);destroyRef=b(Os);host=b(Rl);injector=b(Es);seen=new Map;hostPageId=tT();unsubscribe;time=aD;preview=fde;pluginHint=$8;guideUrl=Wfe;yesNo=ide;filterOptions=Object.keys(s5).map(e=>({value:e,label:s5[e]}));pages=w([]);loaded=w(!1);failed=w(!1);selectedPageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:ode(e,this.hostPageId)});selectedCallId=w(null);filter=w(``);callFilter=w(`all`);now=w(Date.now());message=w(``);page=X(()=>{let e=this.selectedPageId();return this.pages().find(t=>t.pageId===e)??null});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.info.platform})));maxCalls=X(()=>TT(this.rpc()).limits.capacitorCalls);loggedLabel=X(()=>{let e=this.page()?.info;return e?e.bridge&&e.webCalls?`Native and web`:e.bridge?`Native only`:e.webCalls?`Web only`:`None on this platform`:``});shownCalls=X(()=>{let e=this.page();if(!e)return[];let t=this.filter().trim().toLowerCase(),n=this.callFilter(),r=n===`slow`?this.now():0;return[...e.calls].filter(e=>Z8(e,n,r)).filter(e=>!t||`${e.plugin}.${e.method}`.toLowerCase().includes(t)).sort((e,t)=>t.startedAt-e.startedAt)});selected=X(()=>this.shownCalls().find(e=>e.id===this.selectedCallId())??null);slowest=X(()=>{let e=this.now();return Math.max(1,...this.shownCalls().map(t=>X8(t,e)))});hiddenBy=X(()=>{let e=[],t=this.filter().trim();return t&&e.push(`the search “${t}”`),this.callFilter()!==`all`&&e.push(`the ${s5[this.callFilter()]} filter`),e.join(` and `)});stateCards=X(()=>{let e=this.page();return e?ife(e):[]});leaks=X(()=>ude(this.page()?.listeners??[]));liveSummary=X(()=>{let e=this.page();return e?lde(e,this.now()):null});summary=w(null);summaryShownAt=0;summaryTimer;messageFlip=!1;constructor(){jq(`capacitor`,this.selectedCallId),T(()=>{let e=this.rpc();e&&this.load(e)}),T(()=>{let e=this.liveSummary();Z(()=>this.queueSummary(e))});let e=setInterval(()=>this.now.set(Date.now()),1e3);this.destroyRef.onDestroy(()=>{clearInterval(e),clearTimeout(this.summaryTimer),this.unsubscribe?.()})}retry(){let e=this.rpc();e&&this.load(e)}callStats(e){return[{filter:`all`,label:`Calls`,count:e.calls},{filter:`failed`,label:`Failed`,count:e.failed},{filter:`slow`,label:`Slow, 500 ms+`,count:e.slow},{filter:`pending`,label:`Pending`,count:e.pending}]}select(e){this.selectedCallId.set(e),Sd(()=>{globalThis.matchMedia?.(`(max-width: 880px)`).matches&&this.host.nativeElement.querySelector(`#cap-detail`)?.scrollIntoView?.({block:`nearest`})},{injector:this.injector})}setSearch(e){e!==this.filter()&&(this.filter.set(e),this.announceCount())}setFilter(e){e!==this.callFilter()&&(this.callFilter.set(e),this.announceCount())}pickFilter(e){this.setFilter(this.callFilter()===e?`all`:e)}clearFilters(){this.filter.set(``),this.callFilter.set(`all`),this.announceCount()}announce(e){this.messageFlip=!this.messageFlip,this.message.set(this.messageFlip?`${e} `:e)}async copyCommand(e){try{await navigator.clipboard.writeText(e),this.announce(`Copied ${e}.`)}catch{this.announce(`The clipboard is not available here.`)}}leakCount(e){return this.leaks().get(`${e.plugin} ${e.event}`)??0}tone(e){return e.status===`pending`?`accent`:e.status===`ok`?`ok`:Y8(e)?`warn`:`danger`}statusLabel(e){return e.status===`pending`?`Pending`:e.status===`ok`?`OK`:Y8(e)?`Not implemented`:`Error`}durationText(e){return e.status===`pending`?`waiting ${Q8(X8(e,this.now()))}`:e.durationMs===void 0?``:`${Math.round(e.durationMs)} ms`}barWidth(e){return Math.min(100,X8(e,this.now())/this.slowest()*100)}announceCount(){let e=this.page();e&&this.announce(`${this.shownCalls().length} of ${e.calls.length} calls shown`)}queueSummary(e){let t=this.summary();if(JSON.stringify(e)===JSON.stringify(t))return;clearTimeout(this.summaryTimer),this.summaryTimer=void 0;let n=this.summaryShownAt+Gfe-Date.now();if(!t||!e||e.pageId!==t.pageId||n<=0){this.summary.set(e),this.summaryShownAt=Date.now();return}this.summaryTimer=setTimeout(()=>{this.summaryTimer=void 0,this.summary.set(this.liveSummary()),this.summaryShownAt=Date.now()},n)}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`capacitor`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(ade(J8(e),this.seen));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-capacitor-inspector`]],inputs:{rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`search`,``],[`kind`,`loading`],[`kind`,`error`],[`kind`,`empty`],[`kind`,`error`,3,`retry`],[1,`intro`],[`role`,`status`,`aria-label`,`Capacitor summary`,`aria-atomic`,`false`,1,`strip`],[1,`sr-only`],[`aria-labelledby`,`cap-env-title`,1,`env`],[1,`env-head`],[`id`,`cap-env-title`],[1,`page-picker`],[1,`wide`],[`aria-labelledby`,`cap-state-title`],[3,`rpc`,`pageId`],[`aria-labelledby`,`cap-calls-title`],[`id`,`cap-calls-title`],[1,`notice`],[`aria-labelledby`,`cap-plugins-title`],[`id`,`cap-plugins-title`],[1,`empty`],[`tabindex`,`0`,`role`,`group`,`aria-label`,`Plugins table`,1,`table-wrap`],[`aria-labelledby`,`cap-listeners-title`],[`id`,`cap-listeners-title`],[`tabindex`,`0`,`role`,`group`,`aria-label`,`Listeners table`,1,`table-wrap`],[`aria-atomic`,`true`,1,`stat`],[1,`stat-label`],[1,`stat-value`],[`type`,`button`,`aria-atomic`,`true`,1,`stat`],[`type`,`button`,`aria-atomic`,`true`,1,`stat`,3,`click`],[`id`,`cap-page-label`,1,`label-key`],[`labelledBy`,`cap-page-label`,3,`valueChange`,`options`,`value`],[`id`,`cap-state-title`],[3,`cards`,`now`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`toolbar`],[`placeholder`,`Filter by plugin or method`,`saveKey`,`capacitor`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Show calls`,1,`show`,3,`valueChange`,`options`,`value`],[1,`count`],[`what`,`plugin calls`,`limit`,`capacitorCalls`,3,`dropped`,`max`],[1,`split`],[1,`muted`],[`type`,`button`,1,`small`,3,`click`],[`aria-label`,`Plugin calls, newest first`,`appRovingList`,`[data-cap-call]`,1,`calls`],[3,`call`,`now`],[`type`,`button`,`data-cap-call`,``,1,`call`,3,`click`],[1,`name`],[1,`chip`,`status`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M20 6 9 17l-5-5`],[1,`chip`,`via`],[1,`duration`],[`aria-hidden`,`true`,1,`bar`],[1,`when`],[`cx`,`12`,`cy`,`12`,`r`,`9`],[`d`,`m15 9-6 6M9 9l6 6`],[`d`,`M5.6 5.6l12.8 12.8`],[`d`,`M12 7v5l3 2`],[3,`announce`,`call`,`now`],[`scope`,`col`],[`scope`,`row`],[1,`note`],[1,`hint`],[`type`,`button`,1,`copy`],[`type`,`button`,1,`copy`,3,`click`],[1,`last`],[`data-tone`,`warn`,1,`chip`,`leak`],[1,`payload`],[`d`,`M12 3 2 21h20z`],[`d`,`M12 10v4M12 17.5v.01`],[`detail`,``]],template:function(e,t){if(e&1&&k(0,cfe,2,0,`app-state`,1)(1,lfe,2,0,`app-state`,2)(2,Hfe,58,15)(3,Ufe,4,0,`app-state`,3),e&2){let e;A(t.loaded()?t.failed()?1:(e=t.page())?2:3:0,e)}},dependencies:[aR,iD,dD,JE,Dde,Jde,afe,XV],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-size: 13px;
+}
+
+.intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+section[_ngcontent-%COMP%] {
+  margin: 0 0 24px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.strip[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 20px;
+}
+
+.stat[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 88px;
+  min-height: var(--%NS%control-h);
+  padding: 6px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  text-align: left;
+}
+
+button.stat[_ngcontent-%COMP%] {
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+button.stat[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+button.stat[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 0 -2px 0 var(--%NS%accent);
+}
+
+button.stat[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.stat-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+button.stat[aria-pressed=true][_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.stat-value[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.env-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 12px;
+}
+
+.env-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.page-picker[_ngcontent-%COMP%] {
+  display: flex;
+  flex: 0 1 280px;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.label-key[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+dl[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  padding: 8px 12px;
+  min-width: 0;
+}
+
+dl[_ngcontent-%COMP%]    > .wide[_ngcontent-%COMP%] {
+  grid-column: 1/-1;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 2px;
+}
+
+dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent-text);
+  border-radius: 2px;
+}
+
+a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 220px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.show[_ngcontent-%COMP%] {
+  flex: 0 1 220px;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.split[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 12px;
+  align-items: start;
+}
+
+@media (max-width: 880px) {
+  .split[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.calls[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.call[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  width: 100%;
+  min-height: var(--%NS%control-h);
+  padding: 6px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  text-align: left;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.call[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.call.selected[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+}
+
+.call[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.name[_ngcontent-%COMP%] {
+  flex: 1 1 180px;
+  min-width: 0;
+  color: var(--%NS%text-strong);
+}
+
+.when[_ngcontent-%COMP%], 
+.duration[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.when[_ngcontent-%COMP%] {
+  margin-left: auto;
+}
+
+.duration[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.bar[_ngcontent-%COMP%] {
+  display: inline-block;
+  width: 48px;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: var(--%NS%surface-3);
+}
+
+.bar[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {
+  display: block;
+  height: 100%;
+  min-width: 2px;
+  border-radius: 3px;
+  background: var(--%NS%accent);
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 1px 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.chip[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.chip[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.chip.via[_ngcontent-%COMP%] {
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text);
+}
+
+.chip.leak[_ngcontent-%COMP%] {
+  margin-top: 4px;
+  white-space: normal;
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  min-width: 640px;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+th[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow-wrap: normal;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+  text-align: left;
+  vertical-align: top;
+}
+
+thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--%NS%surface);
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
+  border-bottom: 0;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin-right: 6px;
+}
+
+.copy[_ngcontent-%COMP%] {
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.copy[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.copy[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+td.note[_ngcontent-%COMP%], 
+td.last[_ngcontent-%COMP%] {
+  min-width: 220px;
+}
+
+.payload[_ngcontent-%COMP%] {
+  display: block;
+  margin: 0 0 2px;
+}
+
+.empty[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}`]})};function c5(e,t,n=600){let r=w(``),i=!0,a;return T(()=>{if(e(),i){i=!1;return}clearTimeout(a),a=setTimeout(()=>{let e=Z(t);r.update(t=>t===e?`${e} `:e)},n)}),b(Os).onDestroy(()=>clearTimeout(a)),r.asReadonly()}var qfe=[`log`,`info`,`warn`,`error`,`debug`];function Jfe(e){return e.split("`").map((e,t)=>({code:t%2==1,text:e})).filter(e=>e.text)}var Yfe={handler:`ErrorHandler`,window:`Uncaught`,promise:`Unhandled rejection`};function l5(e){return!!e&&typeof e==`object`}function Xfe(e){let t=l5(e)?e.pages:void 0;return l5(t)?Object.values(t).filter(e=>l5(e)&&typeof e.pageId==`string`).map(e=>({pageId:e.pageId,url:typeof e.url==`string`?e.url:``,title:typeof e.title==`string`?e.title:``,reportedAt:typeof e.reportedAt==`number`?e.reportedAt:0,handler:e.handler===`wrapped`?`wrapped`:`none`,errors:l5(e.errors)?Object.values(e.errors):[],console:l5(e.console)?Object.values(e.console).sort((e,t)=>e.id-t.id):[],dropped:l5(e.dropped)?{errors:Number(e.dropped.errors)||0,console:Number(e.dropped.console)||0}:{errors:0,console:0}})).sort((e,t)=>t.reportedAt-e.reportedAt):[]}function Zfe(e,t){return t&&e.some(e=>e.pageId===t)?t:e.length>1?`all`:e[0]?.pageId??`all`}function Qfe(e,t){return e.filter(e=>t===`all`||e.pageId===t).flatMap(e=>e.errors.map(t=>({...t,pageId:e.pageId}))).sort((e,t)=>t.lastAt-e.lastAt)}function $fe(e,t){return e.filter(e=>t===`all`||e.pageId===t).flatMap(e=>e.console.map(t=>({...t,pageId:e.pageId}))).sort((e,t)=>t.at-e.at||t.id-e.id)}function epe(e,t){return t?.startsWith(`https://angular.dev/errors/`)?{code:e,href:t}:{code:e}}var tpe=(e,t)=>t.signal+t.at,npe=(e,t)=>t.id+e;function rpe(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U();E(),K(e.binding)}}function ipe(e,t){e&1&&(L(0,`span`,2),G(1,`A text interpolation (Angular doesn't name it)`),R())}function ape(e,t){if(e&1&&(L(0,`span`,2),G(1,` in `),R(),L(2,`code`),G(3),R()),e&2){let e=U();E(3),K(e.template)}}function ope(e,t){if(e&1&&(L(0,`code`),G(1),R(),G(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;E(),K(e),E(),q(``,n===r-1?``:`, `,` `)}}function spe(e,t){if(e&1&&(L(0,`dt`),G(1,`Held by`),R(),L(2,`dd`),j(3,ope,3,2,null,null,dg),R()),e&2){let e=U();E(3),M(e.members)}}function cpe(e,t){e&1&&(L(0,`p`,4),G(1,` Values are hidden: the binding or a field that holds them has a secret-looking name. `),R())}function lpe(e,t){e&1&&(L(0,`p`,4),G(1,` Angular says this view was created after its parent was checked, so a change detection hook such as `),L(2,`code`),G(3,`ngAfterViewInit`),R(),G(4,` created it. `),R())}function upe(e,t){if(e&1&&(L(0,`li`)(1,`code`),G(2),R()()),e&2){let e=t.$implicit;E(2),K(e)}}function dpe(e,t){if(e&1&&(L(0,`ol`,6),j(1,upe,3,1,`li`,null,ug),R()),e&2){let e=U().$implicit;E(),M(e.stack)}}function fpe(e,t){e&1&&(L(0,`span`,2),G(1,` (turn on write stacks in the Signals tab and reproduce to see the code)`),R())}function ppe(e,t){if(e&1&&(L(0,`li`),G(1,` Signal `),L(2,`code`),G(3),R(),G(4),k(5,dpe,3,0,`ol`,6)(6,fpe,2,0,`span`,2),R()),e&2){let e=t.$implicit,n=U(4);E(3),K(e.signal),E(),q(` at `,n.time(e.at),` `),E(),A(e.stack?.length?5:6)}}function mpe(e,t){if(e&1&&(L(0,`h4`,0),G(1,`Written by`),R(),L(2,`ul`,5),j(3,ppe,7,3,`li`,null,tpe),R()),e&2){let e=U();E(3),M(e.writes)}}function hpe(e,t){e&1&&(L(0,`p`,4),G(1,` No named signal was written with this value just before the check. Look for code that sets a field the template reads during change detection, such as `),L(2,`code`),G(3,`ngAfterViewInit`),R(),G(4,`, a getter that returns a new value each time, or a child that changes its parent. `),R())}function gpe(e,t){e&1&&(L(0,`p`,4),G(1,` Where it was written is unknown: the page doesn't report signal writes (the Signals inspector is off, or Angular is older than 17). `),R())}function _pe(e,t){if(e&1&&(L(0,`h3`,0),G(1,`What changed`),R(),L(2,`dl`,1)(3,`dt`),G(4,`Binding`),R(),L(5,`dd`),k(6,rpe,2,1,`code`)(7,ipe,2,0,`span`,2),k(8,ape,4,1),R(),L(9,`dt`),G(10,`Previous`),R(),L(11,`dd`)(12,`code`,3),G(13),R()(),L(14,`dt`),G(15,`Current`),R(),L(16,`dd`)(17,`code`,3),G(18),R()(),k(19,spe,5,0),R(),k(20,cpe,2,0,`p`,4),k(21,lpe,5,0,`p`,4),k(22,mpe,5,0)(23,hpe,5,0,`p`,4)(24,gpe,2,0,`p`,4)),e&2){let e=t;E(6),A(e.binding?6:7),E(2),A(e.template?8:-1),E(5),K(e.previous),E(5),K(e.current),E(),A(e.members?.length?19:-1),E(),A(e.masked?20:-1),E(),A(e.creation?21:-1),E(),A(e.writes?.length?22:e.writesKnown?23:24)}}function vpe(e,t){if(e&1&&k(0,_pe,25,8),e&2){let e;A((e=U().changed())?0:-1,e)}}function ype(e,t){if(e&1&&(L(0,`p`,7),G(1),R()),e&2){let e=U();E(),K(e.summary)}}function bpe(e,t){if(e&1&&(L(0,`span`,14),G(1),R()),e&2){let e=U().$implicit;E(),K(e.op===`expected`?`Server only:`:`Client only:`)}}function xpe(e,t){if(e&1&&(L(0,`li`)(1,`span`,13),G(2),R(),k(3,bpe,2,1,`span`,14),L(4,`code`),G(5),R()()),e&2){let e=t.$implicit,n=U(4);O(`data-op`,e.op),E(2),K(n.signOf(e.op)),E(),A(e.op===`same`?-1:3),E(2),K(e.text)}}function Spe(e,t){if(e&1&&(L(0,`p`,8)(1,`span`,9),G(2,`−`),R(),G(3,` server HTML Angular expected `),L(4,`span`,10),G(5,`+`),R(),G(6,` client DOM it found `),R(),L(7,`div`,11)(8,`ol`,12),j(9,xpe,6,4,`li`,null,ug),R()()),e&2){let e=U();E(9),M(e.diff)}}function Cpe(e,t){e&1&&(L(0,`p`,4),G(1,`Angular described neither side of the mismatch.`),R())}function wpe(e,t){e&1&&(L(0,`p`,4),G(1,` Angular thinks a browser extension or third-party script changed the DOM before hydration. Try a clean browser profile, or add `),L(2,`code`),G(3,`ngSkipHydration`),R(),G(4,` to the host. `),R())}function Tpe(e,t){if(e&1&&(L(0,`h3`,0),G(1,`Server vs client DOM`),R(),k(2,ype,2,1,`p`,7),k(3,Spe,11,0)(4,Cpe,2,0,`p`,4),k(5,wpe,5,0,`p`,4)),e&2){let e=t;E(2),A(e.summary?2:-1),E(),A(e.diff?.length?3:4),E(2),A(e.external?5:-1)}}function Epe(e,t){if(e&1&&k(0,Tpe,6,3),e&2){let e;A((e=U().mismatch())?0:-1,e)}}function Dpe(e,t){if(e&1&&(L(0,`code`),G(1),R(),G(2)),e&2){let e=t.$implicit,n=t.$index,r=t.$count;E(),K(e),E(),q(``,n===r-1?``:` → `,` `)}}function Ope(e,t){if(e&1&&(L(0,`dt`),G(1,`Path`),R(),L(2,`dd`),j(3,Dpe,3,2,null,null,ug),R()),e&2){let e=U();E(3),M(e.path)}}function kpe(e,t){if(e&1&&(L(0,`dt`),G(1,`Source`),R(),L(2,`dd`)(3,`code`),G(4),R()()),e&2){let e=U();E(4),K(e.source)}}function Ape(e,t){if(e&1){let e=z();L(0,`button`,18),H(`click`,function(){x(e);let t=U();return S(U(2).explainLookup(t.token))}),G(1),R()}if(e&2){let e=U(3);O(`aria-disabled`,e.loading()||null),E(),q(` `,e.lookup()?`Explain lookup again`:`Explain lookup`,` `)}}function jpe(e,t){e&1&&(L(0,`p`,4),G(1,` The component that asked for it wasn't found on the page, so the lookup can't be walked from here. `),R())}function Mpe(e,t){e&1&&(L(0,`p`,4),G(1,`Walking the lookup…`),R())}function Npe(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function Ppe(e,t){if(e&1&&(L(0,`span`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function Fpe(e,t){if(e&1&&k(0,Npe,2,1,`code`)(1,Ppe,2,1,`span`),e&2){let e=t.$implicit;A(+!e.code)}}function Ipe(e,t){if(e&1&&(L(0,`p`,17),j(1,Fpe,2,1,null,null,ug),R()),e&2){let e=U(3);E(),M(e.segments(t))}}function Lpe(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function Rpe(e,t){if(e&1&&(L(0,`span`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function zpe(e,t){if(e&1&&k(0,Lpe,2,1,`code`)(1,Rpe,2,1,`span`),e&2){let e=t.$implicit;A(+!e.code)}}function Bpe(e,t){if(e&1&&(L(0,`p`,7),j(1,zpe,2,1,null,null,ug),R()),e&2){let e=U(3);E(),M(e.segments(t.summary))}}function Vpe(e,t){if(e&1&&(L(0,`code`,2),G(1),R()),e&2){let e=U().$implicit;E(),K(e.component)}}function Hpe(e,t){if(e&1&&(L(0,`code`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function Upe(e,t){if(e&1&&(L(0,`span`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.text)}}function Wpe(e,t){if(e&1&&k(0,Hpe,2,1,`code`)(1,Upe,2,1,`span`),e&2){let e=t.$implicit;A(+!e.code)}}function Gpe(e,t){if(e&1&&(L(0,`li`)(1,`span`,20)(2,`code`),G(3),R(),k(4,Vpe,2,1,`code`,2),R(),L(5,`span`,21),G(6),R(),L(7,`span`,22),j(8,Wpe,2,1,null,null,ug),R()()),e&2){let e=t.$implicit,n=U(4);E(3),K(e.name),E(),A(e.component?4:-1),E(),O(`data-tone`,n.stepTone[e.status]),E(),K(n.stepLabel[e.status]),E(2),M(n.segments(e.reason))}}function Kpe(e,t){e&1&&G(0,` This Angular version has no resolution path, so the path follows the rendered tree. `)}function qpe(e,t){if(e&1&&(L(0,`ol`,19),j(1,Gpe,10,4,`li`,null,npe),R(),L(3,`p`,4),G(4,` Read from the injector tree the page reported, assuming no `),L(5,`code`),G(6,`self`),R(),G(7,`, `),L(8,`code`),G(9,`skipSelf`),R(),G(10,`, `),L(11,`code`),G(12,`host`),R(),G(13,` or `),L(14,`code`),G(15,`optional`),R(),G(16,`. Agents can pass those to `),L(17,`code`),G(18,`explain-injection`),R(),G(19,`. `),k(20,Kpe,1,0),R()),e&2){let e=t;E(),M(e.steps),E(19),A(e.approximate?20:-1)}}function Jpe(e,t){if(e&1&&(L(0,`h3`,0),G(1,`Missing provider`),R(),L(2,`dl`,1)(3,`dt`),G(4,`Token`),R(),L(5,`dd`)(6,`code`),G(7),R()(),k(8,Ope,5,0),k(9,kpe,5,1),R(),k(10,Ape,2,2,`button`,15)(11,jpe,2,0,`p`,4),L(12,`div`,16),k(13,Mpe,2,0,`p`,4)(14,Ipe,3,0,`p`,17)(15,Bpe,3,0,`p`,7),R(),k(16,qpe,21,1)),e&2){let e,n,r=t,i=U(2);E(7),K(r.token),E(),A(r.path?.length?8:-1),E(),A(r.source?9:-1),E(),A(i.canExplain()&&i.owner()?10:i.owner()?-1:11),E(3),A(i.loading()?13:(e=i.lookupError())?14:(e=i.lookup())?15:-1,e),E(3),A((n=!i.loading()&&!i.lookupError()&&i.lookup())?16:-1,n)}}function Ype(e,t){if(e&1&&k(0,Jpe,17,6),e&2){let e;A((e=U().missing())?0:-1,e)}}var Xpe={provides:`Provides it`,missing:`Not provided`,hidden:`Hidden`,skipped:`Skipped`,"not-asked":`Not asked`,unknown:`Unknown`},Zpe={provides:`ok`,missing:`plain`,hidden:`warn`,skipped:`plain`,"not-asked":`plain`,unknown:`warn`},Qpe=class e{explain=$.required();owner=$(void 0);pageId=$(``);rpc=$(null);canExplain=$(!1);time=aD;segments=Jfe;stepLabel=Xpe;stepTone=Zpe;changed=X(()=>{let e=this.explain();return e.kind===`expression-changed`?e:null});mismatch=X(()=>{let e=this.explain();return e.kind===`hydration-mismatch`?e:null});missing=X(()=>{let e=this.explain();return e.kind===`missing-provider`?e:null});loading=w(!1);lookup=w(null);lookupError=w(null);signOf(e){return e===`expected`?`−`:e===`actual`?`+`:` `}async explainLookup(e){let t=this.rpc(),n=this.owner();if(t&&n&&!this.loading()){this.loading.set(!0),this.lookupError.set(null);try{let r=await t.scope(`pangular`).rpc.call(`explain-injection`,{selector:n.id,token:e,pageId:this.pageId()});!r||`error`in r?(this.lookup.set(null),this.lookupError.set(r?.error??`The server didn't answer.`)):this.lookup.set(r)}catch{this.lookup.set(null),this.lookupError.set(`Can't reach the devtools server. Try again.`)}finally{this.loading.set(!1)}}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-error-explain`]],inputs:{explain:[1,`explain`],owner:[1,`owner`],pageId:[1,`pageId`],rpc:[1,`rpc`],canExplain:[1,`canExplain`]},decls:3,vars:1,consts:[[1,`label`],[1,`facts`],[1,`muted`],[1,`value`],[1,`note`],[1,`writes`],[`aria-label`,`App frames that wrote it`,1,`frames`],[1,`summary`],[1,`legend`],[`aria-hidden`,`true`,1,`sign`,`expected`],[`aria-hidden`,`true`,1,`sign`,`actual`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Server vs client DOM diff`,1,`diff-wrap`],[1,`diff`],[`aria-hidden`,`true`,1,`sign`],[1,`sr-only`],[`type`,`button`,1,`small`],[`aria-live`,`polite`],[`role`,`alert`,1,`note`],[`type`,`button`,1,`small`,3,`click`],[`aria-label`,`Injectors Angular asks, in order`,1,`steps`],[1,`step-name`],[1,`chip`],[1,`reason`]],template:function(e,t){if(e&1&&k(0,vpe,1,1)(1,Epe,1,1)(2,Ype,1,1),e&2){let e;A((e=t.explain().kind)===`expression-changed`?0:e===`hydration-mismatch`?1:e===`missing-provider`?2:-1)}},styles:[`[_nghost-%COMP%] {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  font-size: 12px;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.facts[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 4px 12px;
+  margin: 0;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+dd[_ngcontent-%COMP%] {
+  min-width: 0;
+  margin: 0;
+}
+
+.value[_ngcontent-%COMP%] {
+  white-space: pre-wrap;
+}
+
+.note[_ngcontent-%COMP%], 
+.summary[_ngcontent-%COMP%], 
+.legend[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.summary[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+}
+
+.writes[_ngcontent-%COMP%], 
+.frames[_ngcontent-%COMP%] {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.diff-wrap[_ngcontent-%COMP%] {
+  max-height: 280px;
+  overflow: auto;
+  border-radius: var(--%NS%radius-sm);
+  border: 1px solid var(--%NS%border);
+}
+
+.diff-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.diff[_ngcontent-%COMP%] {
+  min-width: max-content;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+}
+
+.diff[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  padding: 0 8px;
+  white-space: pre;
+}
+
+.diff[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow-wrap: normal;
+}
+
+.diff[_ngcontent-%COMP%]   li[data-op=expected][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.diff[_ngcontent-%COMP%]   li[data-op=actual][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.sign[_ngcontent-%COMP%] {
+  flex-shrink: 0;
+  width: 1ch;
+  font-family: var(--%NS%font-mono);
+  font-weight: 700;
+}
+
+.legend[_ngcontent-%COMP%]   .sign[_ngcontent-%COMP%] {
+  display: inline-block;
+  text-align: center;
+}
+
+.legend[_ngcontent-%COMP%]   .sign.expected[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}
+
+.legend[_ngcontent-%COMP%]   .sign.actual[_ngcontent-%COMP%] {
+  color: var(--%NS%ok-text);
+}
+
+.small[_ngcontent-%COMP%] {
+  justify-self: start;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.small[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+
+.small[aria-disabled=true][_ngcontent-%COMP%] {
+  cursor: progress;
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.steps[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding-left: 22px;
+}
+
+.steps[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  padding: 2px 0;
+}
+
+.step-name[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-right: 6px;
+}
+
+.reason[_ngcontent-%COMP%] {
+  display: block;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.chip[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip[data-tone=plain][_ngcontent-%COMP%] {
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}`]})},$pe=(e,t)=>t.id;function eme(e,t){if(e&1&&(L(0,`span`,11),G(1),R()),e&2){let e=U().$implicit;E(),q(``,e.count,`×`)}}function tme(e,t){e&1&&(L(0,`code`,6),G(1),R()),e&2&&(E(),K(t))}function nme(e,t){if(e&1&&(L(0,`span`,6),G(1),R()),e&2){let e=U().$implicit;E(),K(e.plugin)}}function rme(e,t){if(e&1&&(L(0,`span`,14),G(1),R()),e&2){let e=U().$implicit;E(),K(e.code)}}function ime(e,t){if(e&1&&(L(0,`details`)(1,`summary`),G(2,`Code frame`),R(),L(3,`pre`,15),G(4),R()()),e&2){let e=U().$implicit;E(4),K(e.frame)}}function ame(e,t){if(e&1&&(L(0,`details`)(1,`summary`),G(2,`Stack`),R(),L(3,`pre`,16),G(4),R()()),e&2){let e=U().$implicit;E(4),K(e.stack)}}function ome(e,t){if(e&1&&(L(0,`li`,8)(1,`div`,9)(2,`span`,10),G(3),R(),k(4,eme,2,1,`span`,11),L(5,`code`,12),G(6),R()(),L(7,`div`,13),k(8,tme,2,1,`code`,6),k(9,nme,2,1,`span`,6),k(10,rme,2,1,`span`,14),L(11,`span`,6),G(12),R()(),k(13,ime,5,1,`details`),k(14,ame,5,1,`details`),R()),e&2){let e,n=t.$implicit,r=U(2);E(2),O(`data-tone`,n.kind===`ssr`?`danger`:`warn`),E(),K(n.kind===`ssr`?`SSR`:`Vite`),E(),A(n.count>1?4:-1),E(2),K(n.message),E(2),A((e=r.place(n))?8:-1,e),E(),A(n.plugin&&n.file?9:-1),E(),A(n.code?10:-1),E(2),q(`Last at `,r.time(n.lastAt)),E(),A(n.frame?13:-1),E(),A(n.stack?14:-1)}}function sme(e,t){if(e&1){let e=z();L(0,`section`,0)(1,`div`,2)(2,`h2`,3),G(3,` Server errors `),L(4,`span`,4),G(5),R()(),L(6,`button`,5),H(`click`,function(){return x(e),S(U().clear())}),G(7,`Clear server errors`),R()(),L(8,`p`,6),G(9,` From the dev server: SSR renders that logged an error, and Vite transform and compile errors. Masked; each group expires 30 minutes after its last repeat. `),R(),L(10,`ol`,7),j(11,ome,15,10,`li`,8,$pe),R()()}if(e&2){let e=U();E(5),K(e.errors().length),E(6),M(e.errors())}}function cme(e){let t=e?.errors;return Array.isArray(t)?t.filter(e=>!!e&&typeof e==`object`&&typeof e.id==`string`&&typeof e.message==`string`&&(e.kind===`ssr`||e.kind===`vite`)):[]}function lme(e){if(e.kind===`ssr`)return e.url?`Render of ${e.url}`:`Server render`;if(!e.file)return e.plugin??``;let t=e.line===void 0?``:`:${e.line}`,n=e.line!==void 0&&e.column!==void 0?`:${e.column}`:``;return`${e.file}${t}${n}`}var ume=class e{rpc=$(null);destroyRef=b(Os);unsubscribe;time=aD;place=lme;errors=w([]);status=w(``);constructor(){T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async clear(){let e=this.rpc();if(e)try{await e.scope(`pangular`).rpc.call(`clear-server-errors`),this.status.set(`Server errors cleared.`)}catch{this.status.set(`Couldn't clear the server errors.`)}}async load(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`server-errors`);if(this.destroyRef.destroyed)return;let n=e=>this.errors.set(cme(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-server-errors-section`]],inputs:{rpc:[1,`rpc`]},decls:3,vars:2,consts:[[`aria-labelledby`,`server-errors-title`,1,`server`],[`role`,`status`,1,`sr-only`],[1,`bar`],[`id`,`server-errors-title`],[1,`badge`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[`aria-label`,`Server errors, most recent first`,1,`list`],[1,`item`],[1,`head`],[1,`chip`],[1,`times`],[1,`message`],[1,`meta`],[1,`chip`,`plain`],[`tabindex`,`0`,`aria-label`,`Code frame`],[`tabindex`,`0`,`aria-label`,`Stack trace`]],template:function(e,t){e&1&&(k(0,sme,13,1,`section`,0),L(1,`p`,1),G(2),R()),e&2&&(A(t.errors().length?0:-1),E(2),K(t.status()))},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.server[_ngcontent-%COMP%] {
+  margin: 0 0 16px;
+}
+
+.bar[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+h2[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+}
+
+.badge[_ngcontent-%COMP%] {
+  padding: 0 6px;
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+p.muted[_ngcontent-%COMP%] {
+  margin: 6px 0 8px;
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%], 
+pre[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.list[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.item[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 8px 12px;
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.message[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.times[_ngcontent-%COMP%] {
+  flex-shrink: 0;
+  color: var(--%NS%danger-text);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: center;
+  min-width: 0;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip.plain[_ngcontent-%COMP%] {
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  border-radius: 2px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+pre[_ngcontent-%COMP%] {
+  max-height: 240px;
+  margin: 6px 0 0;
+  padding: 8px;
+  overflow: auto;
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  white-space: pre;
+}
+
+pre[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},u5=(e,t)=>t.pageId+t.id;function dme(e,t){e&1&&(P(0,`app-state`,2),G(1,`Loading errors…`),F())}function fme(e,t){if(e&1){let e=z();P(0,`app-state`,5),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Can't read the errors from the devtools server. `),F()}}function pme(e,t){e&1&&(P(0,`app-state`,4),G(1,` No page reports errors yet. `),P(2,`p`,6),G(3,` Open the app with the overlay loaded. Errors and console calls show up here as they happen. `),F()())}function mme(e,t){if(e&1){let e=z();P(0,`app-select`,19),V(`valueChange`,function(t){return x(e),S(U(2).level.set(t))}),F()}if(e&2){let e=U(2);N(`options`,e.levelOptions)(`value`,e.level())}}function hme(e,t){if(e&1){let e=z();P(0,`app-select`,20),V(`valueChange`,function(t){x(e);let n=U(2);return S(n.pageId.set(t??n.allPages))}),F()}if(e&2){let e=U(2);N(`options`,e.pageOptions())(`value`,e.pageId())}}function gme(e,t){e&1&&(P(0,`p`,22),G(1,` Angular's ErrorHandler isn't wrapped on this page yet, so errors Angular catches show up only when the default handler logs them. `),F())}function _me(e,t){if(e&1&&(P(0,`p`,22),G(1),F()),e&2){let e=U(3);E(),J(` `,e.droppedErrors(),` older error `,e.droppedErrors()===1?`group was`:`groups were`,` dropped. Each page keeps its last 100. `)}}function vme(e,t){e&1&&(P(0,`p`,23),G(1,` No errors since the page loaded. Errors show up here as the app hits them. `),F())}function yme(e,t){if(e&1){let e=z();P(0,`div`,23)(1,`p`),G(2),F(),P(3,`button`,25),V(`click`,function(){x(e),U(2);let t=Gg(13);return U().filter.set(``),S(t.focus())}),G(4,` Clear filters `),F()()}if(e&2){let e=U(3);E(2),q(`No error matches “`,e.filter(),`”.`)}}function bme(e,t){if(e&1&&(P(0,`a`,34),G(1),P(2,`span`,36),G(3,` reference (opens in a new tab)`),F()()),e&2){let e=U();N(`href`,t,Fu),E(),K(e)}}function xme(e,t){if(e&1&&(P(0,`span`,35),G(1),F()),e&2){let e=U();E(),K(e)}}function Sme(e,t){if(e&1&&k(0,bme,4,2,`a`,34)(1,xme,2,1,`span`,35),e&2){let e,n=U().$implicit;A((e=U(4).codeLink(t,n.docUrl).href)?0:1,e)}}function Cme(e,t){if(e&1&&(P(0,`span`,31),G(1),F()),e&2){let e=t.$implicit,n=U(5);E(),K(n.sourceLabels[e])}}function wme(e,t){if(e&1&&(P(0,`span`,32),G(1),F()),e&2){let e=U().$implicit,t=U(4);E(),K(t.pageLabel(e.pageId))}}function Tme(e,t){if(e&1){let e=z();P(0,`button`,38),V(`click`,function(){x(e);let t=U(),n=U().$implicit;return S(U(4).showComponent.emit({id:t.id,pageId:n.pageId}))}),G(1,` Show component `),P(2,`code`),G(3),F()()}if(e&2){let e=U();E(3),K(e.name)}}function Eme(e,t){if(e&1&&(P(0,`span`,32),G(1,`In `),P(2,`code`),G(3),F()()),e&2){let e=U();E(3),K(e.name)}}function Dme(e,t){e&1&&k(0,Tme,4,1,`button`,37)(1,Eme,4,1,`span`,32),e&2&&A(+!U(5).canShowComponent())}function Ome(e,t){if(e&1&&I(0,`app-error-explain`,33),e&2){let e=U().$implicit,n=U(4);N(`explain`,t)(`owner`,e.owner)(`pageId`,e.pageId)(`rpc`,n.rpc())(`canExplain`,n.canExplainInjection())}}function kme(e,t){if(e&1&&(P(0,`details`)(1,`summary`),G(2,`Stack`),F(),P(3,`pre`,39),G(4),F()()),e&2){let e=U().$implicit;E(4),K(e.stack)}}function Ame(e,t){if(e&1&&(P(0,`li`,26)(1,`div`,27)(2,`span`,28),G(3),F(),P(4,`code`,29),G(5),F()(),P(6,`div`,30),k(7,Sme,2,1),j(8,Cme,2,1,`span`,31,dg),P(10,`span`,32),G(11),F(),k(12,wme,2,1,`span`,32),k(13,Dme,2,1),F(),k(14,Ome,1,5,`app-error-explain`,33),k(15,kme,5,1,`details`),F()),e&2){let e,n,r,i=t.$implicit,a=U(4);E(2),O(`aria-label`,a.timesLabel(i.count)),E(),q(` `,i.count,`× `),E(2),K(i.message),E(2),A((e=i.code)?7:-1,e),E(),M(i.sources),E(3),q(`Last at `,a.time(i.lastAt)),E(),A(a.showPage()?12:-1),E(),A((n=i.owner)?13:-1,n),E(),A((r=i.explain)?14:-1,r),E(),A(i.stack?15:-1)}}function jme(e,t){if(e&1&&(P(0,`ol`,24),j(1,Ame,16,9,`li`,26,u5),F()),e&2){let e=U(3);E(),M(e.shownErrors())}}function Mme(e,t){if(e&1&&(P(0,`section`,17)(1,`h2`,21),G(2,`Errors`),F(),k(3,gme,2,0,`p`,22),k(4,_me,2,2,`p`,22),k(5,vme,2,0,`p`,23)(6,yme,5,1,`div`,23)(7,jme,3,0,`ol`,24),F()),e&2){let e=U(2);E(3),A(e.unwrapped()?3:-1),E(),A(e.droppedErrors()?4:-1),E(),A(e.errors().length?e.shownErrors().length?7:6:5)}}function Nme(e,t){if(e&1&&(P(0,`p`,22),G(1),F()),e&2){let e=U(3);E(),J(` `,e.droppedConsole(),` older `,e.droppedConsole()===1?`call was`:`calls were`,` dropped. Each page keeps its last 200. `)}}function Pme(e,t){e&1&&(P(0,`p`,23),G(1,` No console calls since the overlay connected. They show up here as the app logs. `),F())}function Fme(e,t){if(e&1){let e=z();P(0,`div`,23)(1,`p`),G(2,`No console call matches the filters.`),F(),P(3,`button`,25),V(`click`,function(){x(e),U(2);let t=Gg(13);return U().clearFilters(),S(t.focus())}),G(4,` Clear filters `),F()()}}function Ime(e,t){if(e&1&&(P(0,`span`,28),G(1),F()),e&2){let e=U().$implicit;O(`aria-label`,U(4).timesLabel(e.count)),E(),q(``,e.count,`×`)}}function Lme(e,t){if(e&1&&(P(0,`a`,34),G(1),P(2,`span`,36),G(3,` reference (opens in a new tab)`),F()()),e&2){let e=U();N(`href`,t,Fu),E(),K(e)}}function Rme(e,t){if(e&1&&(P(0,`span`,46),G(1),F()),e&2){let e=U();E(),K(e)}}function zme(e,t){if(e&1&&k(0,Lme,4,2,`a`,34)(1,Rme,2,1,`span`,46),e&2){let e,n=U().$implicit;A((e=U(4).codeLink(t,n.docUrl).href)?0:1,e)}}function Bme(e,t){if(e&1&&(P(0,`li`,42)(1,`span`,43),G(2),F(),P(3,`code`,44),G(4),F(),k(5,Ime,2,2,`span`,28),k(6,zme,2,1),P(7,`time`,45),G(8),F()()),e&2){let e,n=t.$implicit,r=U(4);E(),O(`data-tone`,r.levelTone[n.level]),E(),K(n.level),E(2),K(n.text),E(),A(n.count>1?5:-1),E(),A((e=n.code)?6:-1,e),E(2),K(r.time(n.at))}}function Vme(e,t){if(e&1&&(P(0,`ol`,41),j(1,Bme,9,6,`li`,42,u5),F()),e&2){let e=U(3);E(),M(e.shownEntries())}}function Hme(e,t){if(e&1&&(P(0,`section`,18)(1,`h2`,40),G(2,`Console`),F(),k(3,Nme,2,2,`p`,22),k(4,Pme,2,0,`p`,23)(5,Fme,5,0,`div`,23)(6,Vme,3,0,`ol`,41),F()),e&2){let e=U(2);E(3),A(e.droppedConsole()?3:-1),E(),A(e.entries().length?e.shownEntries().length?6:5:4)}}function Ume(e,t){if(e&1){let e=z();P(0,`p`,7),G(1,` Errors from Angular's ErrorHandler, uncaught errors and unhandled promise rejections on the live page, grouped by message, and the page's console calls. Messages and values are masked like other live data. `),F(),P(2,`div`,8)(3,`div`,9)(4,`button`,10),V(`click`,function(){return x(e),S(U().view.set(`errors`))}),G(5,` Errors `),P(6,`span`,11),G(7),F()(),P(8,`button`,10),V(`click`,function(){return x(e),S(U().view.set(`console`))}),G(9,` Console `),P(10,`span`,11),G(11),F()()(),P(12,`app-search-field`,12,0),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.filter,t)||(n.filter=t),S(t)}),F(),k(14,mme,1,2,`app-select`,13),k(15,hme,1,2,`app-select`,14),P(16,`span`,15),G(17),F(),P(18,`p`,16),G(19),F()(),k(20,Mme,8,3,`section`,17)(21,Hme,7,2,`section`,18)}if(e&2){let e=U();E(4),O(`aria-pressed`,e.view()===`errors`),E(3),K(e.errors().length),E(),O(`aria-pressed`,e.view()===`console`),E(3),K(e.entries().length),E(),N(`placeholder`,e.view()===`errors`?`Filter by message or code`:`Filter by text`)(`saveKey`,`errors-`+e.view()),V_(`value`,e.filter),E(2),A(e.view()===`console`?14:-1),E(),A(e.pageOptions().length>2?15:-1),E(2),K(e.countText()),E(2),K(e.countStatus()),E(),A(e.view()===`errors`?20:21)}}var Wme={error:`danger`,warn:`warn`,info:`accent`,log:`plain`,debug:`plain`},Gme=class e{rpc=$(null);canShowComponent=$(!0);canExplainInjection=$(!1);showComponent=xv();destroyRef=b(Os);hostPageId=tT();unsubscribe;time=aD;codeLink=epe;sourceLabels=Yfe;levelTone=Wme;allPages=`all`;levelOptions=[{value:`all`,label:`All levels`},...qfe.map(e=>({value:e,label:e}))];pages=w([]);loaded=w(!1);failed=w(!1);view=w(`errors`);filter=w(``);level=w(`all`);pageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&(t.value===`all`||e.some(e=>e.pageId===t.value))?t.value:Zfe(e,this.hostPageId)});pageOptions=X(()=>[{value:`all`,label:`All pages`},...this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url}))]);showPage=X(()=>this.pageId()===`all`&&this.pages().length>1);picked=X(()=>this.pages().filter(e=>this.pageId()===`all`||e.pageId===this.pageId()));unwrapped=X(()=>this.picked().some(e=>e.handler!==`wrapped`));droppedErrors=X(()=>this.picked().reduce((e,t)=>e+t.dropped.errors,0));droppedConsole=X(()=>this.picked().reduce((e,t)=>e+t.dropped.console,0));errors=X(()=>Qfe(this.pages(),this.pageId()));entries=X(()=>$fe(this.pages(),this.pageId()));shownErrors=X(()=>{let e=this.filter().trim().toLowerCase();return e?this.errors().filter(t=>t.message.toLowerCase().includes(e)||(t.code??``).toLowerCase().includes(e)||(t.owner?.name??``).toLowerCase().includes(e)):this.errors()});shownEntries=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.level();return this.entries().filter(n=>(t===`all`||n.level===t)&&(!e||n.text.toLowerCase().includes(e)))});countText=X(()=>{let[e,t,n]=this.view()===`errors`?[this.shownErrors().length,this.errors().length,`error`]:[this.shownEntries().length,this.entries().length,`call`];return`${e} of ${t} ${t===1?n:`${n}s`}`});countStatus=c5(()=>[this.view(),this.filter(),this.level(),this.pageId()],()=>this.countText());constructor(){T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}retry(){let e=this.rpc();e&&this.load(e)}clearFilters(){this.filter.set(``),this.level.set(`all`)}timesLabel(e){return e===1?`Once`:`${e} times`}pageLabel(e){let t=this.pages().find(t=>t.pageId===e);return t?.title||t?.url||e}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`errors`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(Xfe(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-errors-inspector`]],inputs:{rpc:[1,`rpc`],canShowComponent:[1,`canShowComponent`],canExplainInjection:[1,`canExplainInjection`]},outputs:{showComponent:`showComponent`},decls:5,vars:2,consts:[[`search`,``],[3,`rpc`],[`kind`,`loading`],[`kind`,`error`],[`kind`,`empty`],[`kind`,`error`,3,`retry`],[`detail`,``],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Show`,1,`views`],[`type`,`button`,1,`view`,3,`click`],[1,`badge`],[1,`search`,3,`valueChange`,`placeholder`,`saveKey`,`value`],[`ariaLabel`,`Console level`,1,`level-select`,3,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[1,`count`],[`role`,`status`,1,`sr-only`],[`aria-labelledby`,`errors-title`],[`aria-labelledby`,`console-title`],[`ariaLabel`,`Console level`,1,`level-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[`id`,`errors-title`,1,`sr-only`],[1,`notice`],[1,`empty`],[`aria-label`,`Errors, most recent first`,1,`errors`],[`type`,`button`,1,`small`,3,`click`],[1,`error`],[1,`head`],[1,`times`],[1,`message`],[1,`meta`],[1,`chip`,`source`],[1,`muted`],[3,`explain`,`owner`,`pageId`,`rpc`,`canExplain`],[`target`,`_blank`,`rel`,`noopener noreferrer`,1,`chip`,`code`,3,`href`],[`title`,`No page in Angular's error reference`,1,`chip`,`code`,`plain`],[1,`sr-only`],[`type`,`button`,1,`link`],[`type`,`button`,1,`link`,3,`click`],[`tabindex`,`0`,`aria-label`,`Stack trace`],[`id`,`console-title`,1,`sr-only`],[`aria-label`,`Console calls, newest first`,1,`console`],[1,`entry`],[1,`chip`,`level`],[1,`text`],[1,`when`],[1,`chip`,`code`,`plain`]],template:function(e,t){e&1&&(I(0,`app-server-errors-section`,1),k(1,dme,2,0,`app-state`,2)(2,fme,2,0,`app-state`,3)(3,pme,4,0,`app-state`,4)(4,Ume,22,12)),e&2&&(N(`rpc`,t.rpc()),E(),A(t.loaded()?t.failed()?2:t.pages().length?4:3:1))},dependencies:[aR,iD,JE,Qpe,ume],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-size: 13px;
+}
+
+.intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%], 
+pre[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.views[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.view[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.view[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.view[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.view[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.badge[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.level-select[_ngcontent-%COMP%], 
+.page-select[_ngcontent-%COMP%] {
+  flex: 0 1 180px;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.errors[_ngcontent-%COMP%], 
+.console[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.error[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+  padding: 8px 12px;
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.message[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.times[_ngcontent-%COMP%] {
+  flex-shrink: 0;
+  color: var(--%NS%danger-text);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: center;
+  font-size: 12px;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.chip.source[_ngcontent-%COMP%], 
+.chip.plain[_ngcontent-%COMP%], 
+.chip[data-tone=plain][_ngcontent-%COMP%] {
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+a.chip[_ngcontent-%COMP%] {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+a.chip[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.link[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 4px;
+  align-items: baseline;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: none;
+  color: var(--%NS%accent-text);
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  border-radius: 2px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+details[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+pre[_ngcontent-%COMP%] {
+  max-height: 240px;
+  margin: 6px 0 0;
+  padding: 8px;
+  overflow: auto;
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text);
+  white-space: pre;
+}
+
+pre[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.entry[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: baseline;
+  min-width: 0;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.entry[_ngcontent-%COMP%]   .level[_ngcontent-%COMP%] {
+  min-width: 44px;
+  justify-content: center;
+}
+
+.entry[_ngcontent-%COMP%]   .times[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.text[_ngcontent-%COMP%] {
+  flex: 1 1 240px;
+  min-width: 0;
+  color: var(--%NS%text);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.when[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.empty[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}`]})},Kme=(e,t)=>t.name;function qme(e,t){e&1&&(P(0,`p`,0),G(1,`Loading performance…`),F())}function Jme(e,t){if(e&1){let e=z();P(0,`div`,1)(1,`p`),G(2,`Can't read the performance data from the devtools server.`),F(),P(3,`button`,2),V(`click`,function(){return x(e),S(U().retry())}),G(4,`Retry`),F()()}}function Yme(e,t){e&1&&(P(0,`div`,0)(1,`p`),G(2,`No page reports performance yet.`),F(),P(3,`p`,3),G(4,` Open the app with the overlay loaded. The browser measures web vitals as the page loads and as you use it. `),F()())}function Xme(e,t){if(e&1){let e=z();P(0,`div`,5)(1,`app-select`,6),V(`valueChange`,function(t){return x(e),S(U(2).pageId.set(t??``))}),F()()}if(e&2){let e=U(2);E(),N(`options`,e.pageOptions())(`value`,e.pageId())}}function Zme(e,t){if(e&1&&(P(0,`code`,22),G(1),F()),e&2){let e=U();E(),J(``,e.event?e.event+` on `:``,``,e.target)}}function Qme(e,t){if(e&1){let e=z();P(0,`button`,24),V(`click`,function(){x(e);let t=U(),n=U(3);return S(U(2).showComponent.emit({id:t.id,pageId:n.pageId}))}),G(1,` Show component `),P(2,`code`),G(3),F()()}if(e&2){let e=U();E(3),K(e.name)}}function $me(e,t){if(e&1&&(P(0,`span`,3),G(1,`In `),P(2,`code`),G(3),F()()),e&2){let e=U();E(3),K(e.name)}}function ehe(e,t){e&1&&k(0,Qme,4,1,`button`,23)(1,$me,4,1,`span`,3),e&2&&A(+!U(5).canShowComponent())}function the(e,t){if(e&1&&(P(0,`span`,20),G(1),F(),P(2,`span`,21),G(3),F(),k(4,Zme,2,2,`code`,22),k(5,ehe,2,1)),e&2){let e,n=t,r=U().$implicit,i=U(3);E(),K(i.format(r.name,n.value)),E(2),K(i.ratingLabel[n.rating]),E(),A(n.event||n.target?4:-1),E(),A((e=n.owner)?5:-1,e)}}function nhe(e,t){if(e&1&&(P(0,`span`,25),G(1,`–`),F(),P(2,`span`,26),G(3),F()),e&2){let e=U().$implicit,t=U(),n=U(2);E(3),K(n.missing(t,e.entry))}}function rhe(e,t){if(e&1&&(P(0,`li`,10)(1,`span`,17)(2,`abbr`,18),G(3),F(),P(4,`span`,19),G(5),F()(),k(6,the,6,4)(7,nhe,4,1),F()),e&2){let e,n=t.$implicit,r=U();O(`data-rating`,r.metrics[n.name]?.rating??`none`),E(2),N(`title`,n.label),E(),K(n.name),E(2),K(n.label),E(),A((e=r.metrics[n.name])?6:7,e)}}function ihe(e,t){e&1&&(P(0,`p`,13),G(1,`No interaction of 40 ms or more yet. Click or type in the app.`),F())}function ahe(e,t){if(e&1&&(P(0,`span`,3),G(1),F()),e&2){let e=U().$implicit;E(),q(` in `,e.owner.name)}}function ohe(e,t){if(e&1&&(P(0,`tr`)(1,`td`)(2,`code`),G(3),F()(),P(4,`td`)(5,`code`),G(6),F(),k(7,ahe,2,1,`span`,3),F(),P(8,`td`,29),G(9),F(),P(10,`td`,29),G(11),F()()),e&2){let e=t.$implicit,n=U(4);E(3),K(e.event),E(3),K(e.target??``),E(),A(e.owner?7:-1),E(2),K(n.formatMs(e.durationMs)),E(2),K(n.formatMs(e.at))}}function she(e,t){if(e&1&&(P(0,`table`)(1,`caption`,19),G(2,` Slowest interactions, slowest first `),F(),P(3,`thead`)(4,`tr`)(5,`th`,27),G(6,`Event`),F(),P(7,`th`,27),G(8,`Target`),F(),P(9,`th`,28),G(10,`Duration`),F(),P(11,`th`,28),G(12,`At`),F()()(),P(13,`tbody`),j(14,ohe,12,5,`tr`,null,ug),F()()),e&2){let e=U();E(14),M(e.interactions)}}function che(e,t){if(e&1&&(P(0,`tr`)(1,`td`,29),G(2),F(),P(3,`td`,29),G(4),F(),P(5,`td`)(6,`code`),G(7),F()()()),e&2){let e=t.$implicit,n=U(4);E(2),K(n.formatMs(e.at)),E(2),K(n.formatMs(e.durationMs)),E(3),K(e.source??(e.kind===`long-animation-frame`?`long animation frame`:`task`))}}function lhe(e,t){if(e&1&&(P(0,`table`)(1,`caption`,19),G(2,` Latest long tasks, newest first `),F(),P(3,`thead`)(4,`tr`)(5,`th`,28),G(6,`At`),F(),P(7,`th`,28),G(8,`Duration`),F(),P(9,`th`,27),G(10,`Source`),F()()(),P(11,`tbody`),j(12,che,8,3,`tr`,null,ug),F()()),e&2){let e=U(3);E(12),M(e.latestTasks())}}function uhe(e,t){if(e&1&&(P(0,`section`,7)(1,`h2`,8),G(2,`Web vitals`),F(),P(3,`ul`,9),j(4,rhe,8,5,`li`,10,Kme),F()(),P(6,`section`,11)(7,`h2`,12),G(8,`Slowest interactions`),F(),k(9,ihe,2,0,`p`,13)(10,she,16,0,`table`),F(),P(11,`section`,14)(12,`h2`,15),G(13,`Long tasks`),F(),P(14,`p`,16),G(15),F(),k(16,lhe,14,0,`table`),F()),e&2){let e=t,n=U(2);E(4),M(n.metrics),E(5),A(e.interactions.length?10:9),E(6),R_(` `,e.longTaskCount,` long `,e.longTaskCount===1?`task`:`tasks`,`, total blocking time `,n.formatMs(e.totalBlockingMs),`. `),E(),A(e.longTasks.length?16:-1)}}function dhe(e,t){if(e&1&&(P(0,`p`,4),G(1,` Web vitals the browser measured since the page loaded, rated by the web.dev thresholds, and the tasks that blocked the main thread. `),F(),k(2,Xme,2,2,`div`,5),k(3,uhe,17,5)),e&2){let e,t=U();E(2),A(t.pages().length>1?2:-1),E(),A((e=t.page())?3:-1,e)}}var fhe=[{name:`LCP`,label:`Largest Contentful Paint`,entry:`largest-contentful-paint`},{name:`INP`,label:`Interaction to Next Paint`,entry:`event`},{name:`CLS`,label:`Cumulative Layout Shift`,entry:`layout-shift`},{name:`FCP`,label:`First Contentful Paint`,entry:`paint`},{name:`TTFB`,label:`Time to First Byte`,entry:`navigation`}],phe={good:`Good`,"needs-improvement":`Needs improvement`,poor:`Poor`};function mhe(e){let t=e?.pages;return!t||typeof t!=`object`?[]:Object.values(t).filter(e=>!!e&&typeof e==`object`&&typeof e.pageId==`string`&&!!e.metrics&&Array.isArray(e.longTasks)).sort((e,t)=>t.reportedAt-e.reportedAt)}function hhe(e,t){return e===`CLS`?t.toFixed(3):d5(t)}function d5(e){return e>=1e3?`${(e/1e3).toFixed(2)} s`:`${Math.round(e)} ms`}var ghe=class e{rpc=$(null);canShowComponent=$(!0);showComponent=xv();destroyRef=b(Os);hostPageId=tT();unsubscribe;metrics=fhe;ratingLabel=phe;format=hhe;formatMs=d5;pages=w([]);loaded=w(!1);failed=w(!1);pageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:(e.find(e=>e.pageId===this.hostPageId)??e[0])?.pageId??``});page=X(()=>this.pages().find(e=>e.pageId===this.pageId()));pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url})));latestTasks=X(()=>[...this.page()?.longTasks??[]].reverse());constructor(){T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}retry(){let e=this.rpc();e&&this.load(e)}missing(e,t){return t!==`navigation`&&!e.supported.includes(t)?`Not measured by this browser`:`Not measured yet`}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`performance`);if(this.destroyRef.destroyed)return;let n=e=>this.pages.set(mhe(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-performance-inspector`]],inputs:{rpc:[1,`rpc`],canShowComponent:[1,`canShowComponent`]},outputs:{showComponent:`showComponent`},decls:4,vars:1,consts:[[`role`,`status`,1,`state`],[`role`,`alert`,1,`state`],[`type`,`button`,1,`small`,3,`click`],[1,`muted`],[1,`intro`],[1,`toolbar`],[`ariaLabel`,`Page`,3,`valueChange`,`options`,`value`],[`aria-labelledby`,`vitals-title`],[`id`,`vitals-title`],[1,`metrics`],[1,`metric`],[`aria-labelledby`,`interactions-title`],[`id`,`interactions-title`],[1,`empty`],[`aria-labelledby`,`tasks-title`],[`id`,`tasks-title`],[1,`summary`],[1,`name`],[3,`title`],[1,`sr-only`],[1,`value`],[1,`rating`],[1,`where`],[`type`,`button`,1,`link`],[`type`,`button`,1,`link`,3,`click`],[1,`value`,`muted`],[1,`rating`,`muted`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`num`]],template:function(e,t){e&1&&k(0,qme,2,0,`p`,0)(1,Jme,5,0,`div`,1)(2,Yme,5,0,`div`,0)(3,dhe,4,2),e&2&&A(t.loaded()?t.failed()?1:t.pages().length?3:2:0)},dependencies:[JE],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-size: 13px;
+}
+
+.intro[_ngcontent-%COMP%], 
+.summary[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.metrics[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.metric[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: grid;
+  gap: 4px;
+  align-content: start;
+  min-width: 0;
+  padding: 10px 12px;
+  border-left: 3px solid var(--%NS%border);
+}
+
+.metric[data-rating=good][_ngcontent-%COMP%] {
+  border-left-color: var(--%NS%ok);
+}
+
+.metric[data-rating=needs-improvement][_ngcontent-%COMP%] {
+  border-left-color: var(--%NS%warn);
+}
+
+.metric[data-rating=poor][_ngcontent-%COMP%] {
+  border-left-color: var(--%NS%danger);
+}
+
+.name[_ngcontent-%COMP%]   abbr[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.value[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-size: 20px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.rating[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+[data-rating=good][_ngcontent-%COMP%]   .rating[_ngcontent-%COMP%] {
+  color: var(--%NS%ok-text);
+}
+
+[data-rating=needs-improvement][_ngcontent-%COMP%]   .rating[_ngcontent-%COMP%] {
+  color: var(--%NS%warn-text);
+}
+
+[data-rating=poor][_ngcontent-%COMP%]   .rating[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}
+
+.link[_ngcontent-%COMP%] {
+  justify-self: start;
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: none;
+  color: var(--%NS%accent-text);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.empty[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},f5=(e,t)=>t.url,_he=(e,t)=>t.file;function vhe(e,t){if(e&1){let e=z();P(0,`div`,5)(1,`p`),G(2,`Can't read the build data from the devtools server.`),F(),P(3,`button`,7),V(`click`,function(){return x(e),S(U().refresh())}),G(4,`Retry`),F()()}}function yhe(e,t){e&1&&G(0,` The oldest timings were dropped. `)}function bhe(e,t){if(e&1&&(G(0),k(1,yhe,1,0)),e&2){let e=t;J(` Time is what the dev server spent on `,e.modules,` `,e.modules===1?`module`:`modules`,`, wall clock: resolving imports to it, and its last load and transform through all plugins. `),E(),A(e.capped?1:-1)}}function xhe(e,t){e&1&&(P(0,`p`,10),G(1,` No module is loaded with `),P(2,`code`),G(3,`import()`),F(),G(4,` yet. Visit a lazy route to see it here. `),F())}function She(e,t){if(e&1&&(P(0,`tr`)(1,`td`)(2,`code`),G(3),F()(),P(4,`td`)(5,`code`),G(6),F()(),P(7,`td`,21),G(8),F(),P(9,`td`,21),G(10),F()()),e&2){let e=t.$implicit,n=U(4);E(3),K(e.file??e.url),E(3),K(e.importers.join(`, `)),E(2),K(e.modules),E(2),K(n.bytes(e.size))}}function Che(e,t){if(e&1&&(P(0,`div`,14)(1,`table`)(2,`caption`,18),G(3,` Modules loaded with import(), biggest first `),F(),P(4,`thead`)(5,`tr`)(6,`th`,19),G(7,`Module`),F(),P(8,`th`,19),G(9,`Imported by`),F(),P(10,`th`,20),G(11,`Own modules`),F(),P(12,`th`,20),G(13,`Own size`),F()()(),P(14,`tbody`),j(15,She,11,4,`tr`,null,f5),F()()()),e&2){let e=U();E(15),M(e.lazy)}}function whe(e,t){if(e&1){let e=z();P(0,`div`,10)(1,`p`),G(2),F(),P(3,`button`,7),V(`click`,function(){x(e),U();let t=Gg(14);return U(2).filter.set(``),S(t.focus())}),G(4,` Clear filters `),F()()}if(e&2){let e=U(3);E(2),q(`No module matches “`,e.filter(),`”.`)}}function The(e,t){if(e&1&&(P(0,`td`,28),G(1),F()),e&2){let e=t,n=U(5);N(`title`,n.breakdown(e)),E(),K(n.ms(e.total))}}function Ehe(e,t){e&1&&I(0,`td`,21)}function Dhe(e,t){if(e&1&&(P(0,`tr`)(1,`td`)(2,`code`),G(3),F()(),P(4,`td`,21),G(5),F(),k(6,The,2,2,`td`,28)(7,Ehe,1,0,`td`,21),P(8,`td`,21),G(9),F(),P(10,`td`,21),G(11),F()()),e&2){let e,n=t.$implicit,r=U(4);E(3),K(n.file??n.url),E(2),K(r.bytes(n.size)),E(),A((e=n.time)?6:7,e),E(3),K(n.importers),E(2),K(n.imports)}}function Ohe(e,t){if(e&1){let e=z();P(0,`button`,29),V(`click`,function(){return x(e),S(U(4).allModules.set(!0))}),G(1),F()}if(e&2){let e=U(4);E(),q(` Show all `,e.shownModules().length,` modules `)}}function khe(e,t){if(e&1){let e=z();P(0,`div`,14)(1,`table`)(2,`caption`,18),G(3,` Modules, biggest first unless sorted `),F(),P(4,`thead`)(5,`tr`)(6,`th`,22),U_(`sortChange`,function(t){x(e);let n=U(3);return H_(n.moduleSort,t)||(n.moduleSort=t),S(t)}),G(7,`Module`),F(),P(8,`th`,23),U_(`sortChange`,function(t){x(e);let n=U(3);return H_(n.moduleSort,t)||(n.moduleSort=t),S(t)}),G(9,`Size`),F(),P(10,`th`,24),U_(`sortChange`,function(t){x(e);let n=U(3);return H_(n.moduleSort,t)||(n.moduleSort=t),S(t)}),G(11,`Time`),F(),P(12,`th`,25),U_(`sortChange`,function(t){x(e);let n=U(3);return H_(n.moduleSort,t)||(n.moduleSort=t),S(t)}),G(13,` Importers `),F(),P(14,`th`,26),U_(`sortChange`,function(t){x(e);let n=U(3);return H_(n.moduleSort,t)||(n.moduleSort=t),S(t)}),G(15,` Imports `),F()()(),P(16,`tbody`),j(17,Dhe,12,5,`tr`,null,f5),F()()(),k(19,Ohe,2,1,`button`,27)}if(e&2){let e=U(3);E(6),V_(`sort`,e.moduleSort),E(2),V_(`sort`,e.moduleSort),E(2),V_(`sort`,e.moduleSort),E(2),V_(`sort`,e.moduleSort),E(2),V_(`sort`,e.moduleSort),E(3),M(e.visibleModules()),E(2),A(e.shownModules().length>e.visibleModules().length?19:-1)}}function Ahe(e,t){if(e&1){let e=z();P(0,`p`,13),G(1),P(2,`code`),G(3,`import()`),F(),G(4),k(5,bhe,2,3),F(),P(6,`h3`),G(7,`Lazy boundaries`),F(),k(8,xhe,5,0,`p`,10)(9,Che,17,0,`div`,14),P(10,`h3`),G(11,`Modules`),F(),P(12,`div`,15)(13,`app-search-field`,16,0),U_(`valueChange`,function(t){x(e);let n=U(2);return H_(n.filter,t)||(n.filter=t),S(t)}),F(),P(15,`span`,17),G(16),F()(),k(17,whe,5,1,`div`,10)(18,khe,20,6)}if(e&2){let e,n=t,r=U(2);E(),R_(` `,n.modules.length,` modules, `,r.bytes(n.totalSize),` transformed (unminified, only what the browser requested). `,r.bytes(n.initialSize),` load without `),E(3),J(` from `,n.entries.length,` `,n.entries.length===1?`entry`:`entries`,`. `),E(),A((e=n.timings)?5:-1,e),E(3),A(n.lazy.length?9:8),E(5),V_(`value`,r.filter),E(3),J(``,r.shownModules().length,` of `,n.modules.length),E(),A(r.shownModules().length?18:17)}}function jhe(e,t){if(e&1&&(P(0,`p`,10),G(1),F()),e&2){let e=U();E(),K(e.viteNote)}}function Mhe(e,t){e&1&&(P(0,`p`,30),G(1,` Build with `),P(2,`code`),G(3,`ng build --stats-json`),F(),G(4,` to see the source each chunk starts from. `),F())}function Nhe(e,t){if(e&1&&(P(0,`tr`)(1,`td`)(2,`code`),G(3),F()(),P(4,`td`),G(5),F(),P(6,`td`,21),G(7),F(),P(8,`td`,21),G(9),F(),P(10,`td`)(11,`code`),G(12),F()()()),e&2){let e=t.$implicit,n=U(3);E(3),K(e.file),E(2),K(e.initial?`Initial`:`Lazy`),E(2),K(n.bytes(e.bytes)),E(2),K(n.bytes(e.gzip)),E(3),K(e.entryPoint??``)}}function Phe(e,t){if(e&1&&(P(0,`p`,13)(1,`code`),G(2),F(),G(3),P(4,`code`),G(5,`index.html`),F(),G(6,` loads up front. `),F(),k(7,Mhe,5,0,`p`,30),P(8,`div`,14)(9,`table`)(10,`caption`,18),G(11,` Chunks of the production build, initial first `),F(),P(12,`thead`)(13,`tr`)(14,`th`,19),G(15,`Chunk`),F(),P(16,`th`,19),G(17,`Loads`),F(),P(18,`th`,20),G(19,`Size`),F(),P(20,`th`,20),G(21,`Gzip`),F(),P(22,`th`,19),G(23,`Entry point`),F()()(),P(24,`tbody`),j(25,Nhe,13,5,`tr`,null,_he),F()()()),e&2){let e=t,n=U(2);E(2),K(e.dir),E(),R_(`: initial `,n.bytes(e.initialBytes),` (`,n.bytes(e.initialGzip),` gzip), lazy `,n.bytes(e.lazyBytes),`. Initial chunks are the ones `),E(4),A(e.stats?-1:7),E(18),M(e.chunks)}}function Fhe(e,t){if(e&1&&(P(0,`p`,10),G(1),F()),e&2){let e=U();E(),K(e.outputNote)}}function Ihe(e,t){if(e&1&&(P(0,`section`,8)(1,`h2`,9),G(2,`Module graph`),F(),k(3,Ahe,19,11)(4,jhe,2,1,`p`,10),F(),P(5,`section`,11)(6,`h2`,12),G(7,`Chunks`),F(),k(8,Phe,27,5)(9,Fhe,2,1,`p`,10),F()),e&2){let e,n,r=t;E(3),A((e=r.vite)?3:4,e),E(5),A((n=r.output)?8:9,n)}}function Lhe(e,t){e&1&&(P(0,`p`,6),G(1,`Loading the build…`),F())}function Rhe(e){return e<1e3?`${e} B`:e<1e6?`${(e/1e3).toFixed(1)} kB`:`${(e/1e6).toFixed(2)} MB`}function p5(e){return e<1e3?`${e.toFixed(1)} ms`:`${(e/1e3).toFixed(2)} s`}function zhe(e){return`Resolve ${p5(e.resolve)}, load ${p5(e.load)}, transform ${p5(e.transform)}`}var Bhe=class e{rpc=$(null);bytes=Rhe;ms=p5;breakdown=zhe;graph=w(null);loading=w(!1);failed=w(!1);status=w(``);filter=w(``);allModules=w(!1);moduleSort=w(null);shownModules=X(()=>{let e=this.graph()?.vite?.modules??[],t=this.filter().trim().toLowerCase();return EV(t?e.filter(e=>`${e.url} ${e.file??``}`.toLowerCase().includes(t)):e,this.moduleSort(),{module:e=>e.file??e.url,size:e=>e.size,time:e=>e.time?.total,importers:e=>e.importers,imports:e=>e.imports})});visibleModules=X(()=>this.allModules()?this.shownModules():this.shownModules().slice(0,25));constructor(){T(()=>{let e=this.rpc();e&&this.load(e)})}refresh(){let e=this.rpc();e&&this.load(e,!0)}async load(e,t=!1){this.loading.set(!0),this.failed.set(!1);try{let n=await e.scope(`pangular`).rpc.call(`get-build-graph`);this.graph.set(n&&typeof n==`object`?n:{}),t&&this.status.set(`Build data refreshed.`)}catch{this.failed.set(!0)}finally{this.loading.set(!1)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-build-inspector`]],inputs:{rpc:[1,`rpc`]},decls:10,vars:4,consts:[[`search`,``],[1,`intro`],[1,`toolbar`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`sr-only`],[`role`,`alert`,1,`state`],[`role`,`status`,1,`state`],[`type`,`button`,1,`small`,3,`click`],[`aria-labelledby`,`graph-title`],[`id`,`graph-title`],[1,`empty`],[`aria-labelledby`,`chunks-title`],[`id`,`chunks-title`],[1,`summary`],[1,`scroll`],[1,`filter`],[`placeholder`,`Filter by file or URL`,`saveKey`,`build`,1,`search`,3,`valueChange`,`value`],[1,`count`],[1,`sr-only`],[`scope`,`col`],[`scope`,`col`,1,`num`],[1,`num`],[`scope`,`col`,`appSortHeader`,`module`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`size`,1,`num`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`time`,1,`num`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`importers`,1,`num`,3,`sortChange`,`sort`],[`scope`,`col`,`appSortHeader`,`imports`,1,`num`,3,`sortChange`,`sort`],[`type`,`button`,1,`small`,`more`],[1,`num`,3,`title`],[`type`,`button`,1,`small`,`more`,3,`click`],[1,`notice`]],template:function(e,t){if(e&1&&(P(0,`p`,1),G(1,` What the app loads: the Vite dev server's module graph with its lazy boundaries, and the chunks of the last production build on disk. `),F(),P(2,`div`,2)(3,`button`,3),V(`click`,function(){return t.refresh()}),G(4),F(),P(5,`p`,4),G(6),F()(),k(7,vhe,5,0,`div`,5)(8,Ihe,10,2)(9,Lhe,2,0,`p`,6)),e&2){let e;E(3),N(`disabled`,t.loading()),E(),q(` `,t.loading()?`Loading…`:`Refresh`,` `),E(2),K(t.status()),E(),A(t.failed()?7:(e=t.graph())?8:9,e)}},dependencies:[iD,DV],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-size: 13px;
+}
+
+.intro[_ngcontent-%COMP%], 
+.summary[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 0 0 12px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 16px 0 8px;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+}
+
+h3[_ngcontent-%COMP%] {
+  margin: 12px 0 6px;
+  color: var(--%NS%text-strong);
+  font-size: 13px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.filter[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  margin: 0 0 8px;
+}
+
+.filter[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.scroll[_ngcontent-%COMP%] {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.num[_ngcontent-%COMP%] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+}
+
+.empty[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.more[_ngcontent-%COMP%] {
+  margin-top: 8px;
+}`]})},Vhe=e=>({$implicit:e,depth:0}),Hhe=(e,t)=>({$implicit:e,depth:t}),m5=(e,t)=>t.key;function Uhe(e,t){if(e&1&&(P(0,`div`,6)(1,`dt`),G(2),F(),P(3,`dd`),G(4),F()()),e&2){let e=t.$implicit;O(`data-tone`,e.tone??null),E(2),K(e.label),E(2),K(e.value)}}function Whe(e,t){if(e&1&&(P(0,`dl`,3),j(1,Uhe,5,3,`div`,6,ug),F()),e&2){U();let e=Y(0);E(),M(e.items)}}function Ghe(e,t){if(e&1&&(P(0,`p`,4),G(1),F()),e&2){U();let e=Y(0);E(),K(e.text)}}function Khe(e,t){if(e&1&&(P(0,`p`,7),G(1),F()),e&2){U(2);let e=Y(0);E(),K(e.empty??`No rows.`)}}function qhe(e,t){e&1&&(P(0,`p`,7),G(1,`No row matches the filter.`),F())}function Jhe(e,t){if(e&1&&(P(0,`th`,9),G(1),F()),e&2){let e=t.$implicit;E(),K(e.label)}}function Yhe(e,t){if(e&1&&(P(0,`span`,10),G(1),F()),e&2){U();let e=Y(0),n=U(4);O(`data-tone`,t),E(),K(n.cellText(e))}}function Xhe(e,t){if(e&1&&G(0),e&2){U();let e=Y(0);q(` `,U(4).cellText(e),` `)}}function Zhe(e,t){if(e&1&&(G_(0),P(1,`td`),k(2,Yhe,2,2,`span`,10)(3,Xhe,1,1),F()),e&2){let e,n=t.$implicit,r=U().$implicit,i=U(3),a=K_(r[n.key]);E(2),A((e=i.toneOf(a))?2:3,e)}}function Qhe(e,t){if(e&1&&(P(0,`tr`),j(1,Zhe,4,2,`td`,null,m5),F()),e&2){U(3);let e=Y(0);E(),M(e.columns)}}function $he(e,t){if(e&1&&(P(0,`div`,8)(1,`table`)(2,`thead`)(3,`tr`),j(4,Jhe,2,1,`th`,9,m5),F()(),P(6,`tbody`),j(7,Qhe,3,0,`tr`,null,ug),F()()()),e&2){let e=U(2),t=Y(0);O(`aria-labelledby`,e.headingId()),E(4),M(t.columns),E(3),M(e.rows())}}function ege(e,t){if(e&1&&k(0,Khe,2,1,`p`,7)(1,qhe,2,0,`p`,7)(2,$he,9,1,`div`,8),e&2){let e=U();A(Y(0).rows.length?e.rows().length?2:1:0)}}function tge(e,t){if(e&1&&(P(0,`p`,7),G(1),F()),e&2){U(2);let e=Y(0);E(),K(e.empty??`Nothing listed.`)}}function nge(e,t){e&1&&(P(0,`p`,7),G(1,`No item matches the filter.`),F())}function rge(e,t){if(e&1&&(P(0,`span`,10),G(1),F()),e&2){let e=t;O(`data-tone`,e.tone??`neutral`),E(),K(e.label)}}function ige(e,t){if(e&1&&(P(0,`span`,13),G(1),F()),e&2){let e=U().$implicit;E(),K(e.detail)}}function age(e,t){if(e&1&&(P(0,`li`)(1,`span`,12),G(2),F(),k(3,rge,2,2,`span`,10),k(4,ige,2,1,`span`,13),F()),e&2){let e,n=t.$implicit;E(2),K(n.label),E(),A((e=n.badge)?3:-1,e),E(),A(n.detail?4:-1)}}function oge(e,t){if(e&1&&(P(0,`ul`,11),j(1,age,5,3,`li`,null,ug),F()),e&2){let e=U(2);E(),M(e.items())}}function sge(e,t){if(e&1&&k(0,tge,2,1,`p`,7)(1,nge,2,0,`p`,7)(2,oge,3,0,`ul`,11),e&2){let e=U();A(Y(0).items.length?e.items().length?2:1:0)}}function cge(e,t){if(e&1&&Eg(0,5),e&2){U();let e=Gg(10),t=Y(0);N(`ngTemplateOutlet`,e)(`ngTemplateOutletContext`,av(2,Vhe,t.value))}}function lge(e,t){if(e&1&&(P(0,`code`,14),G(1),F()),e&2){let e=U().$implicit,t=U();E(),K(t.leafText(e))}}function uge(e,t){if(e&1&&(P(0,`details`,17)(1,`summary`)(2,`span`,18),G(3),F(),P(4,`span`,19),G(5),F()(),Eg(6,5),F()),e&2){let e=U().$implicit,t=U(2).depth,n=Y(0);U();let r=Gg(10);N(`open`,t===0&&n.length<=8),E(3),K(e.key),E(2),K(e.summary),E(),N(`ngTemplateOutlet`,r)(`ngTemplateOutletContext`,ov(5,Hhe,e.value,t+1))}}function dge(e,t){if(e&1&&(P(0,`span`,18),G(1),F(),P(2,`code`,14),G(3),F()),e&2){let e=U().$implicit;E(),K(e.key),E(2),K(e.summary)}}function fge(e,t){if(e&1&&(P(0,`li`),k(1,uge,7,8,`details`,17)(2,dge,4,2),F()),e&2){let e=t.$implicit,n=U(2).depth,r=U();E(),A(e.nested&&n<r.maxDepth?1:2)}}function pge(e,t){if(e&1&&(P(0,`ul`,16),j(1,fge,3,1,`li`,null,m5),F()),e&2){let e=U().depth,t=Y(0);W(`root`,e===0),E(),M(t)}}function mge(e,t){if(e&1&&(G_(0),k(1,lge,2,1,`code`,14)(2,pge,3,2,`ul`,15)),e&2){let e=t.$implicit,n=K_(U().entriesOf(e));E(),A(n.length?2:1)}}function h5(e){return e==null?``:typeof e==`object`?e.text:String(e)}function g5(e,t){return!t||e.toLowerCase().includes(t)}function hge(e,t){let n=t.trim().toLowerCase();return e.kind===`table`?{shown:e.rows.filter(t=>e.columns.some(e=>g5(h5(t[e.key]),n))).length,total:e.rows.length}:e.kind===`list`?{shown:e.items.filter(e=>g5(`${e.label} ${e.detail??``} ${e.badge?.label??``}`,n)).length,total:e.items.length}:{shown:0,total:0}}var gge=8,_ge=200;function vge(e){return!e||typeof e!=`object`?[]:(Array.isArray(e)?e.map((e,t)=>[String(t),e]):Object.entries(e)).slice(0,_ge).map(([e,t])=>{let n=!!t&&typeof t==`object`;return{key:e,value:t,nested:n,summary:Array.isArray(t)?`Array(${t.length})`:n?`{${Object.keys(t).length}}`:t===null?`null`:typeof t==`string`?JSON.stringify(t):String(t)}})}var yge=class e{section=$.required();filter=$(``);index=$(0);maxDepth=gge;cellText=h5;entriesOf=vge;headingId=X(()=>`plugin-section-${this.index()}`);text=X(()=>this.filter().trim().toLowerCase());rows=X(()=>{let e=this.section();if(e.kind!==`table`)return[];let t=this.text();return e.rows.filter(n=>e.columns.some(e=>g5(h5(n[e.key]),t)))});items=X(()=>{let e=this.section();if(e.kind!==`list`)return[];let t=this.text();return e.items.filter(e=>g5(`${e.label} ${e.detail??``} ${e.badge?.label??``}`,t))});toneOf(e){return e&&typeof e==`object`&&e.tone?e.tone:null}leafText(e){return e==null?String(e):Array.isArray(e)?`[]`:typeof e==`object`?`{}`:typeof e==`string`?JSON.stringify(e):String(e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-plugin-section`]],inputs:{section:[1,`section`],filter:[1,`filter`],index:[1,`index`]},decls:11,vars:5,consts:[[`tree`,``],[1,`section`],[1,`title`,3,`id`],[1,`stats`],[1,`text`],[3,`ngTemplateOutlet`,`ngTemplateOutletContext`],[1,`stat`],[1,`empty`],[`tabindex`,`0`,`role`,`region`,1,`table-wrap`],[`scope`,`col`],[1,`chip`],[1,`list`],[1,`label`],[1,`detail`],[1,`leaf`],[1,`tree`,3,`root`],[1,`tree`],[3,`open`],[1,`key`],[1,`summary`]],template:function(e,t){if(e&1&&(G_(0),P(1,`section`,1)(2,`h3`,2),G(3),F(),k(4,Whe,3,0,`dl`,3)(5,Ghe,2,1,`p`,4)(6,ege,3,1)(7,sge,3,1)(8,cge,1,4,`ng-container`,5),F(),Hh(9,mge,3,2,`ng-template`,null,0,mv)),e&2){let e,n=K_(t.section());E(),O(`aria-labelledby`,t.headingId()),E(),N(`id`,t.headingId()),E(),K(n.title),E(),A((e=n.kind)===`stats`?4:e===`text`?5:e===`table`?6:e===`list`?7:e===`tree`?8:-1)}},dependencies:[uy],styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.section[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 10px 12px;
+}
+
+.title[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.stats[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.stat[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 2px;
+  padding: 8px 10px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+}
+
+.stat[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.stat[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 18px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.stat[data-tone=ok][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  color: var(--%NS%ok-text);
+}
+
+.stat[data-tone=warn][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  color: var(--%NS%warn-text);
+}
+
+.stat[data-tone=danger][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+}
+
+.stat[data-tone=accent][_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  color: var(--%NS%accent-text);
+}
+
+.text[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.empty[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  max-width: 100%;
+  overflow-x: auto;
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  vertical-align: top;
+}
+
+th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+td[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 99px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.chip[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.chip[data-tone=accent][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.list[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: baseline;
+  min-width: 0;
+  padding: 4px 0;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.detail[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+  color: var(--%NS%text-2);
+  overflow-wrap: anywhere;
+}
+
+.tree[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 0 0 0 14px;
+  list-style: none;
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.tree.root[_ngcontent-%COMP%] {
+  padding-left: 0;
+}
+
+.tree[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  padding: 2px 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+summary[_ngcontent-%COMP%] {
+  width: fit-content;
+  max-width: 100%;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+summary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.key[_ngcontent-%COMP%] {
+  margin-right: 6px;
+  color: var(--%NS%accent-text);
+}
+
+.summary[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.leaf[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}`]})},bge=()=>[],xge=(e,t)=>t.name,Sge=(e,t)=>t.id;function Cge(e,t){e&1&&(P(0,`app-state`,1),G(1,`Loading plugins…`),F())}function wge(e,t){if(e&1){let e=z();P(0,`app-state`,4),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Can't read the plugins from the devtools server. `),F()}}function Tge(e,t){e&1&&(P(0,`app-state`,3),G(1,` No plugin reports yet. `),P(2,`p`,5),G(3,` A library adds a tab here with `),P(4,`code`),G(5,`registerPangularPlugin()`),F(),G(6,` from `),P(7,`code`),G(8,`@pangular-inspector/devtools/plugin`),F(),G(9,`. Its view shows up once the app runs with the overlay loaded. `),F()())}function Ege(e,t){if(e&1){let e=z();P(0,`button`,16),V(`click`,function(){let t=x(e).$implicit;return S(U(2).pluginId.set(t))}),G(1),F()}if(e&2){let e=t.$implicit,n=U(2);O(`aria-pressed`,n.pluginId()===e),E(),q(` `,n.titleOf(e),` `)}}function Dge(e,t){if(e&1){let e=z();P(0,`app-select`,17),V(`valueChange`,function(t){return x(e),S(U(2).pageId.set(t||null))}),F()}if(e&2){let e=U(2);N(`options`,e.pageOptions())(`value`,e.pageId()??``)}}function Oge(e,t){if(e&1&&(P(0,`span`,20),G(1),F()),e&2){let e=U();E(),K(e.version)}}function kge(e,t){if(e&1&&(P(0,`span`,21),G(1),F()),e&2){let e=t.$implicit;O(`data-tone`,e.tone??`plain`),E(),K(e.label)}}function Age(e,t){e&1&&(P(0,`p`,22),G(1),F()),e&2&&(E(),K(t))}function jge(e,t){if(e&1&&(P(0,`p`,23),G(1),F()),e&2){let e=U();E(),K(e.description)}}function Mge(e,t){if(e&1&&(P(0,`p`,24),G(1),F()),e&2){let e=U();E(),K(e.error)}}function Nge(e,t){if(e&1&&(P(0,`p`,23),G(1,` Actions of this plugin are turned off in the devtools config (`),P(2,`code`),G(3,`actions.plugins`),F(),G(4,` or `),P(5,`code`),G(6),F(),G(7,`). `),F()),e&2){let e=U(2);E(6),q(`plugins.`,e.id,`.actions`)}}function Pge(e,t){if(e&1){let e=z();P(0,`p`,29),G(1),F(),P(2,`button`,30),V(`click`,function(){let t=x(e);return S(U(4).run(t.name))}),G(3),F(),P(4,`button`,31),V(`click`,function(){return x(e),S(U(4).confirming.set(null))}),G(5,`Cancel`),F()}if(e&2){let e=t;E(),K(e.confirm),E(2),q(` `,e.label,` `)}}function Fge(e,t){if(e&1){let e=z();P(0,`button`,31),V(`click`,function(){let t=x(e).$implicit;return S(U(5).ask(t))}),G(1),F()}if(e&2){let e=t.$implicit;O(`aria-disabled`,U(5).running()||null),E(),q(` `,e.label,` `)}}function Ige(e,t){e&1&&j(0,Fge,2,2,`button`,32,xge),e&2&&M(U(4).actions())}function Lge(e,t){if(e&1&&(P(0,`div`,25),k(1,Nge,8,1,`p`,23)(2,Pge,6,2)(3,Ige,2,0),F()),e&2){let e,t=U(3);E(),A(t.actionsAllowed()?(e=t.confirming())?2:3:1,e)}}function Rge(e,t){e&1&&(P(0,`p`,27),G(1,` The plugin has not reported a view yet. It reports while this panel is open. `),F())}function zge(e,t){e&1&&(P(0,`p`,27),G(1,`The plugin reported no sections.`),F())}function Bge(e,t){if(e&1){let e=z();P(0,`div`,27)(1,`p`),G(2),F(),P(3,`button`,31),V(`click`,function(){x(e),U(2);let t=Gg(7);return U().filter.set(``),S(t.focus())}),G(4,` Clear filters `),F()()}if(e&2){let e=U(3);E(2),q(`No row or item matches “`,e.filter().trim(),`”.`)}}function Vge(e,t){if(e&1&&I(0,`app-plugin-section`,33),e&2){let e=t.$implicit,n=t.$index,r=U(4);N(`section`,e)(`filter`,r.filter())(`index`,n)}}function Hge(e,t){if(e&1&&(P(0,`div`,28),j(1,Vge,1,3,`app-plugin-section`,33,ug),F()),e&2){let e=U();E(),M(e.view.sections)}}function Uge(e,t){if(e&1&&(P(0,`section`,13)(1,`div`,18)(2,`h2`,19),G(3),F(),k(4,Oge,2,1,`span`,20),P(5,`span`,21),G(6),F(),j(7,kge,2,2,`span`,21,ug),F(),k(9,Age,2,1,`p`,22),k(10,jge,2,1,`p`,23),k(11,Mge,2,1,`p`,24),k(12,Lge,4,1,`div`,25),P(13,`p`,26),G(14),F(),k(15,Rge,2,0,`p`,27)(16,zge,2,0,`p`,27)(17,Bge,5,1,`div`,27)(18,Hge,3,0,`div`,28),F()),e&2){let e,n=t,r=U(2);E(3),K(n.title),E(),A(n.version?4:-1),E(),O(`data-tone`,r.statusTone[n.status]),E(),K(r.statusLabel[n.status]),E(),M(n.view?.badges??iv(10,bge)),E(2),A((e=n.view?.summary)?9:-1,e),E(),A(n.description?10:-1),E(),A(n.error?11:-1),E(),A(r.actions().length?12:-1),E(2),K(r.result()),E(),A(n.view?n.view.sections.length?r.filter().trim()&&!r.filterMatches()?17:18:16:15)}}function Wge(e,t){if(e&1&&(P(0,`p`,14),G(1),F()),e&2){let e=U(2);E(),q(` No page reports the `,e.titleOf(e.pluginId()??``),` plugin. Open the app with the plugin registered and the overlay loaded. `)}}function Gge(e,t){e&1&&(P(0,`span`,23),G(1,`Hidden from agents by the config`),F())}function Kge(e,t){if(e&1&&(P(0,`li`)(1,`code`),G(2),F(),P(3,`span`,21),G(4),F(),k(5,Gge,2,0,`span`,23),P(6,`p`,23),G(7),F()()),e&2){let e=t.$implicit;E(2),K(e.id),E(),O(`data-tone`,e.safety===`read`?`plain`:`warn`),E(),K(e.safety),E(),A(e.registered?-1:5),E(2),K(e.description)}}function qge(e,t){e&1&&(P(0,`li`,23),G(1,`This plugin has no agent tools.`),F())}function Jge(e,t){e&1&&(P(0,`section`,15)(1,`h2`,34),G(2,`Agent tools`),F(),P(3,`ul`),j(4,Kge,8,5,`li`,null,Sge,!1,qge,2,0,`li`,23),F()()),e&2&&(E(4),M(t.tools))}function Yge(e,t){if(e&1){let e=z();P(0,`p`,6),G(1,` Views that libraries report from the live page through the plugin API. The values come from each plugin's code on the page and are masked like other live data. `),F(),P(2,`div`,7)(3,`div`,8),j(4,Ege,2,2,`button`,9,dg),F(),P(6,`app-search-field`,10,0),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.filter,t)||(n.filter=t),S(t)}),F(),k(8,Dge,1,2,`app-select`,11),P(9,`span`,12),G(10),F()(),k(11,Uge,19,11,`section`,13)(12,Wge,2,1,`p`,14),k(13,Jge,7,1,`section`,15)}if(e&2){let e,t,n=U();E(4),M(n.pluginIds()),E(2),V_(`value`,n.filter),E(2),A(n.pageOptions().length>1?8:-1),E(2),K(n.countText()),E(),A((e=n.entry())?11:12,e),E(2),A((t=n.server())?13:-1,t)}}function _5(e){let t=e??{};return{pages:(t.pages&&typeof t.pages==`object`?Object.values(t.pages).filter(e=>e&&typeof e.pageId==`string`&&Array.isArray(e.plugins)):[]).sort((e,t)=>t.reportedAt-e.reportedAt),server:Array.isArray(t.server)?t.server:[]}}function Xge(e){let t=_5(e);return t.server.length>0||t.pages.some(e=>e.plugins.length>0)}var Zge={running:`Running`,error:`Failed`,unsupported:`Needs a newer Pangular`},Qge={running:`ok`,error:`danger`,unsupported:`warn`},$ge=class e{rpc=$(null);destroyRef=b(Os);hostPageId=tT();unsubscribe;statusLabel=Zge;statusTone=Qge;state=w({pages:[],server:[]});loaded=w(!1);failed=w(!1);filter=w(``);running=w(!1);pluginIds=X(()=>{let e=new Set;for(let t of this.state().pages)for(let n of t.plugins)e.add(n.id);for(let t of this.state().server)e.add(t.id);return[...e].sort((e,t)=>this.titleOf(e).localeCompare(this.titleOf(t)))});pluginId=Q({source:()=>this.pluginIds(),computation:(e,t)=>t?.value&&e.includes(t.value)?t.value:e[0]??null});pages=X(()=>this.state().pages.filter(e=>e.plugins.some(e=>e.id===this.pluginId())));pageId=Q({source:()=>this.pages(),computation:(e,t)=>t?.value&&e.some(e=>e.pageId===t.value)?t.value:e.find(e=>e.pageId===this.hostPageId)?.pageId??e[0]?.pageId??null});target=X(()=>`${this.pluginId()}\n${this.pageId()}`);result=Q({source:this.target,computation:()=>``});confirming=Q({source:this.target,computation:()=>null});pageOptions=X(()=>this.pages().map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,hint:e.url})));entry=X(()=>this.pages().find(e=>e.pageId===this.pageId())?.plugins.find(e=>e.id===this.pluginId())??null);server=X(()=>this.state().server.find(e=>e.id===this.pluginId())??null);actions=X(()=>{let e=this.entry();return(e?.view?.actions??[]).filter(t=>e.actions.includes(t.name))});actionsAllowed=X(()=>{let e=this.pluginId();return!!e&&qC(e,TT(this.rpc())).actions});counts=X(()=>(this.entry()?.view?.sections??[]).reduce((e,t)=>{let{shown:n,total:r}=hge(t,this.filter());return{shown:e.shown+n,total:e.total+r}},{shown:0,total:0}));filterMatches=X(()=>this.counts().shown>0);countText=X(()=>{let{shown:e,total:t}=this.counts();return t?`${e} of ${t} rows and items`:``});constructor(){T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}titleOf(e){for(let t of this.state().pages){let n=t.plugins.find(t=>t.id===e);if(n)return n.title||e}return this.state().server.find(t=>t.id===e)?.title||e}retry(){let e=this.rpc();e&&this.load(e)}ask(e){if(!this.running()){if(e.confirm){this.confirming.set({name:e.name,label:e.label,confirm:e.confirm});return}this.run(e.name)}}async run(e){let t=this.rpc(),n=this.pluginId(),r=this.pageId();if(this.confirming.set(null),t&&n&&r&&!this.running()&&this.actions().some(t=>t.name===e)){this.running.set(!0),this.result.set(``);try{let i=await t.scope(`pangular`).rpc.call(`request-plugin-action`,{pageId:r,pluginId:n,action:e});this.result.set(i?.ok?`Done.`:i?.error??`The action failed.`)}catch{this.result.set(`The devtools server did not answer. Check that it's still running.`)}finally{this.running.set(!1)}}}async load(e){this.failed.set(!1);try{let t=await e.scope(`pangular`).rpc.sharedState(`plugins`);if(this.destroyRef.destroyed)return;let n=e=>this.state.set(_5(e));n(t.value()),this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,n)}catch{this.failed.set(!0)}finally{this.loaded.set(!0)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-plugins-inspector`]],inputs:{rpc:[1,`rpc`]},decls:4,vars:1,consts:[[`search`,``],[`kind`,`loading`],[`kind`,`error`],[`kind`,`empty`],[`kind`,`error`,3,`retry`],[`detail`,``],[1,`intro`],[1,`toolbar`],[`role`,`group`,`aria-label`,`Plugin`,1,`plugins`],[`type`,`button`,1,`view`],[`placeholder`,`Filter rows and items`,`saveKey`,`plugins`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[`role`,`status`,1,`count`],[`aria-labelledby`,`plugin-title`,1,`plugin`],[1,`notice`],[`aria-labelledby`,`plugin-tools-title`,1,`tools`],[`type`,`button`,1,`view`,3,`click`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[1,`head`],[`id`,`plugin-title`],[1,`chip`,`plain`],[1,`chip`],[1,`summary`],[1,`muted`],[`role`,`alert`,1,`notice`],[`role`,`group`,`aria-label`,`Plugin actions`,1,`actions`],[`role`,`status`,1,`result`],[1,`empty`],[1,`sections`],[1,`confirm`],[`type`,`button`,1,`small`,`primary`,3,`click`],[`type`,`button`,1,`small`,3,`click`],[`type`,`button`,1,`small`],[3,`section`,`filter`,`index`],[`id`,`plugin-tools-title`,1,`label`]],template:function(e,t){e&1&&k(0,Cge,2,0,`app-state`,1)(1,wge,2,0,`app-state`,2)(2,Tge,10,0,`app-state`,3)(3,Yge,14,5),e&2&&A(t.loaded()?t.failed()?1:t.pluginIds().length?3:2:0)},dependencies:[aR,iD,JE,yge],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-size: 13px;
+}
+
+.intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 12px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.plugins[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-width: 0;
+}
+
+.view[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  max-width: 100%;
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.view[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.view[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.view[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 180px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.page-select[_ngcontent-%COMP%] {
+  flex: 0 1 200px;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.plugin[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  align-items: center;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 16px;
+  overflow-wrap: anywhere;
+}
+
+.summary[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.chip.plain[_ngcontent-%COMP%], 
+.chip[data-tone=plain][_ngcontent-%COMP%], 
+.chip[data-tone=neutral][_ngcontent-%COMP%] {
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.confirm[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+}
+
+.result[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+.result[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.small.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+}
+
+.small[aria-disabled=true][_ngcontent-%COMP%] {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.sections[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.empty[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.tools[_ngcontent-%COMP%] {
+  margin-top: 16px;
+}
+
+.label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 8px;
+}
+
+.tools[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tools[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+  min-width: 0;
+  padding: 8px 12px;
+}
+
+.tools[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.tools[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  flex-basis: 100%;
+}`]})},e_e=[`accessibility`,`errors`,`hydration`,`change-detection`,`leaks`,`router`,`forms`,`http`,`pipes`],v5={accessibility:`Accessibility`,"change-detection":`Change detection`,leaks:`Leaks`,errors:`Errors`,router:`Router`,forms:`Forms`,hydration:`Hydration`,http:`HTTP`,pipes:`Pipes`},y5=[{key:`cdCycles`,label:`Change detection cycles`},{key:`cdMeanMs`,label:`Mean cycle time`,unit:`ms`},{key:`cdMaxMs`,label:`Slowest cycle`,unit:`ms`},{key:`wastedChecks`,label:`Wasted checks`},{key:`wastedPercent`,label:`Wasted checks`,unit:`%`},{key:`retained`,label:`Retained components`},{key:`openSubscriptions`,label:`Open subscriptions after destroy`},{key:`errorGroups`,label:`Error groups`},{key:`errors`,label:`Error occurrences`},{key:`axeViolations`,label:`axe rules broken`},{key:`axeNodes`,label:`axe elements`},{key:`httpFailures`,label:`Failed HTTP calls`},{key:`findingsError`,label:`Errors found`},{key:`findingsWarning`,label:`Warnings found`},{key:`findingsInfo`,label:`Info found`}];function t_e(e){let t=Object.entries(e.args??{}).filter(([e])=>e!==`page`).map(([e,t])=>`${e}: ${JSON.stringify(t)}`).join(`, `);return`${e.tool.replace(/^pangular:/,``)}${t?` { ${t} }`:``}`}function n_e(e){let t=e??{};return{pages:Array.isArray(t.pages)?t.pages.filter(e=>typeof e?.pageId==`string`):[],report:t.report&&Array.isArray(t.report.findings)&&Array.isArray(t.report.sources)?t.report:null,session:t.session??{before:null,after:null,diff:null},axe:t.axe??null}}var r_e=(e,t)=>t.label,b5=(e,t)=>t.key;function i_e(e,t){if(e&1&&(L(0,`p`,0),G(1),R()),e&2){let e=t.$implicit;E(),K(e)}}function a_e(e,t){if(e&1&&(L(0,`tr`)(1,`th`,12),G(2),R(),L(3,`td`),G(4),R(),L(5,`td`),G(6),R(),L(7,`td`)(8,`span`,13),G(9),R()()()),e&2){let e=t.$implicit;E(2),K(e.label),E(2),K(e.before),E(2),K(e.after),E(2),O(`data-tone`,e.tone),E(),K(e.change)}}function o_e(e,t){if(e&1&&(L(0,`li`)(1,`span`,14),G(2),R(),G(3),R()),e&2){let e=t.$implicit,n=U(2);E(2),K(n.areaLabel[e.area]),E(),q(` `,n.label(e),` `)}}function s_e(e,t){if(e&1&&(L(0,`ul`),j(1,o_e,4,2,`li`,null,b5),R()),e&2){let e=U();E(),M(e.diff().resolved)}}function c_e(e,t){e&1&&(L(0,`p`,7),G(1,`None.`),R())}function l_e(e,t){if(e&1&&(L(0,`li`)(1,`span`,14),G(2),R(),G(3),R()),e&2){let e=t.$implicit,n=U(2);E(2),K(n.areaLabel[e.area]),E(),q(` `,n.label(e),` `)}}function u_e(e,t){if(e&1&&(L(0,`ul`),j(1,l_e,4,2,`li`,null,b5),R()),e&2){let e=U();E(),M(e.diff().added)}}function d_e(e,t){e&1&&(L(0,`p`,7),G(1,`None.`),R())}function f_e(e,t){if(e&1&&(L(0,`li`)(1,`span`,14),G(2),R(),G(3),R()),e&2){let e=t.$implicit,n=U(2);E(2),K(n.areaLabel[e.area]),E(),R_(` `,n.label(e),`: `,e.countBefore,`× → `,e.count??1,`× `)}}function p_e(e,t){if(e&1&&(L(0,`ul`),j(1,f_e,4,4,`li`,null,b5),R()),e&2){let e=U();E(),M(e.changed())}}function m_e(e,t){if(e&1&&(L(0,`p`,7),G(1),R()),e&2){let e=U();E(),q(``,e.diff().remaining.length,` still there with the same count.`)}}var h_e=class e{diff=$.required();areaLabel=v5;changed=X(()=>this.diff().remaining.filter(e=>e.countBefore!==void 0&&e.countBefore!==e.count));rows=X(()=>{let e=new Map(this.diff().metrics.map(e=>[e.metric,e]));return y5.filter(t=>e.has(t.key)).map(t=>{let n=e.get(t.key),r=t.unit?` ${t.unit}`:``,i=e=>e===void 0?`Not measured`:`${e}${r}`,a=n.delta;return{label:t.unit===`%`?`${t.label} (%)`:t.label,before:i(n.before),after:i(n.after),change:a===void 0?`Not compared`:a===0?`Same`:`${a>0?`+`:`−`}${Math.abs(a)}${r}, ${a<0?`better`:`worse`}`,tone:a===void 0||a===0?`plain`:a<0?`ok`:`danger`}})});label(e){return`${e.rule}${e.subject?` in ${e.subject}`:``}`}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-audit-diff`]],inputs:{diff:[1,`diff`]},decls:35,vars:6,consts:[[1,`notice`],[`tabindex`,`0`,`role`,`region`,`aria-label`,`Numbers before and after`,1,`table-wrap`],[1,`sr-only`],[`scope`,`col`],[1,`lists`],[`aria-labelledby`,`audit-resolved`],[`id`,`audit-resolved`],[1,`muted`],[`aria-labelledby`,`audit-added`],[`id`,`audit-added`],[`aria-labelledby`,`audit-changed`],[`id`,`audit-changed`],[`scope`,`row`],[1,`chip`],[1,`area`]],template:function(e,t){e&1&&(j(0,i_e,2,1,`p`,0,dg),L(2,`div`,1)(3,`table`)(4,`caption`,2),G(5,` Numbers before and after. Lower is better for each. `),R(),L(6,`thead`)(7,`tr`)(8,`th`,3),G(9,`Number`),R(),L(10,`th`,3),G(11,`Before`),R(),L(12,`th`,3),G(13,`After`),R(),L(14,`th`,3),G(15,`Change`),R()()(),L(16,`tbody`),j(17,a_e,10,5,`tr`,null,r_e),R()()(),L(19,`div`,4)(20,`section`,5)(21,`h3`,6),G(22),R(),k(23,s_e,3,0,`ul`)(24,c_e,2,0,`p`,7),R(),L(25,`section`,8)(26,`h3`,9),G(27),R(),k(28,u_e,3,0,`ul`)(29,d_e,2,0,`p`,7),R(),L(30,`section`,10)(31,`h3`,11),G(32),R(),k(33,p_e,3,0,`ul`)(34,m_e,2,1,`p`,7),R()()),e&2&&(M(t.diff().notes),E(17),M(t.rows()),E(5),q(`Resolved (`,t.diff().resolved.length,`)`),E(),A(t.diff().resolved.length?23:24),E(4),q(`New (`,t.diff().added.length,`)`),E(),A(t.diff().added.length?28:29),E(4),q(`Changed count (`,t.changed().length,`)`),E(),A(t.changed().length?33:34))},styles:[`[_nghost-%COMP%] {
+  display: grid;
+  gap: 12px;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+}
+
+.table-wrap[_ngcontent-%COMP%] {
+  overflow-x: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.table-wrap[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+table[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+th[_ngcontent-%COMP%], 
+td[_ngcontent-%COMP%] {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--%NS%border);
+  text-align: left;
+  white-space: nowrap;
+}
+
+thead[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--%NS%surface);
+}
+
+tbody[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  font-weight: 500;
+  color: var(--%NS%text);
+}
+
+td[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child    > *[_ngcontent-%COMP%] {
+  border-bottom: 0;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  padding: 1px 8px;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[data-tone=ok][_ngcontent-%COMP%] {
+  border-color: transparent;
+  border-color: color-mix(in srgb, var(--%NS%ok) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 12%, transparent);
+  color: var(--%NS%ok-text);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: transparent;
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.lists[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+h3[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin: 0 0 6px;
+}
+
+ul[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.area[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+}
+
+.muted[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}`]})},g_e=(e,t)=>t.label,__e=(e,t)=>t.key,v_e=(e,t)=>t.area;function y_e(e,t){e&1&&(P(0,`app-state`,1),G(1,` The audit reads a live page, and a static report has none. `),P(2,`p`,4),G(3,`Open the panel from the server that runs the app to audit it.`),F()())}function b_e(e,t){e&1&&(P(0,`app-state`,2),G(1,`Loading the audit…`),F())}function x_e(e,t){if(e&1){let e=z();P(0,`app-state`,5),V(`retry`,function(){return x(e),S(U().refresh())}),G(1,` Can't read the audit from the devtools server. `),F()}}function S_e(e,t){e&1&&(P(0,`app-state`,1),G(1,` No page reports live data yet. `),P(2,`p`,4),G(3,` Open the app with the overlay loaded. The audit reads what the other inspectors collect from it. `),F()())}function C_e(e,t){if(e&1){let e=z();P(0,`app-select`,32),V(`valueChange`,function(t){return x(e),S(U(2).pickPage(t))}),F()}if(e&2){let e=U(2);N(`options`,e.pageOptions())(`value`,e.pageId())}}function w_e(e,t){e&1&&(P(0,`p`,16),G(1),F()),e&2&&(E(),K(t))}function T_e(e,t){if(e&1){let e=z();P(0,`button`,14),V(`click`,function(){return x(e),S(U(2).mark(`clear`))}),G(1,` Clear `),F()}e&2&&N(`disabled`,U(2).busy())}function E_e(e,t){e&1&&(P(0,`p`,16),G(1),F()),e&2&&(E(),K(t))}function D_e(e,t){e&1&&I(0,`app-audit-diff`,23),e&2&&N(`diff`,t)}function O_e(e,t){e&1&&(P(0,`p`,26),G(1,` No finding on this page. Run axe, or record change detection, to check more. `),F())}function k_e(e,t){if(e&1){let e=z();P(0,`div`,26)(1,`p`),G(2,`No finding matches the filters.`),F(),P(3,`button`,33),V(`click`,function(){x(e),U();let t=Gg(7);return U().clearFilters(),S(t.focus())}),G(4,` Clear filters `),F()()}}function A_e(e,t){if(e&1&&(P(0,`code`,39),G(1),F()),e&2){let e=U().$implicit;E(),K(e.subject)}}function j_e(e,t){if(e&1&&(P(0,`span`,40),G(1),F()),e&2){let e=U().$implicit;O(`aria-label`,e.count+` times`),E(),q(``,e.count,`×`)}}function M_e(e,t){if(e&1){let e=z();P(0,`button`,44),V(`focus`,function(){x(e);let t=U(2).$implicit;return S(U(3).highlight(t))})(`blur`,function(){return x(e),S(U(5).highlight(null))})(`click`,function(){x(e);let t=U(2).$implicit,n=U(3);return S(n.showComponent.emit({id:t.elementId,pageId:n.pageId()}))}),G(1,` Show component `),F()}}function N_e(e,t){if(e&1){let e=z();P(0,`button`,44),V(`focus`,function(){x(e);let t=U(2).$implicit;return S(U(3).highlight(t))})(`blur`,function(){return x(e),S(U(5).highlight(null))})(`click`,function(){x(e);let t=U(2).$implicit;return S(U(3).highlight(t,!0))}),G(1,` Show in page `),F()}}function P_e(e,t){if(e&1&&k(0,M_e,2,0,`button`,43)(1,N_e,2,0,`button`,43),e&2){let e=U().$implicit;A(+!U(3).isComponentArea(e.area))}}function F_e(e,t){if(e&1){let e=z();P(0,`li`,35),V(`mouseenter`,function(){let t=x(e).$implicit;return S(U(3).highlight(t))})(`mouseleave`,function(){return x(e),S(U(3).highlight(null))}),P(1,`div`,36)(2,`span`,37),G(3),F(),P(4,`span`,38),G(5),F(),k(6,A_e,2,1,`code`,39),k(7,j_e,2,2,`span`,40),F(),P(8,`p`,41),G(9),F(),P(10,`div`,42)(11,`span`,22),G(12,`Rule `),P(13,`code`),G(14),F()(),P(15,`span`,22),G(16,`Agent tool `),P(17,`code`),G(18),F()(),k(19,P_e,2,1),F()()}if(e&2){let e=t.$implicit,n=U(3);E(2),O(`data-tone`,n.tone[e.severity]),E(),K(e.severity),E(2),K(n.areaLabel[e.area]),E(),A(e.subject?6:-1),E(),A((e.count??1)>1?7:-1),E(2),K(e.why),E(5),K(e.rule),E(4),K(n.toolCall(e)),E(),A(e.elementId&&n.canShowComponent()?19:-1)}}function I_e(e,t){if(e&1&&(P(0,`ol`,27),j(1,F_e,20,9,`li`,34,__e),F()),e&2){let e=U(2);E(),M(e.shown())}}function L_e(e,t){if(e&1&&(P(0,`div`)(1,`dt`),G(2),F(),P(3,`dd`),G(4),F()()),e&2){let e=t.$implicit;E(2),K(e.label),E(2),K(e.value)}}function R_e(e,t){if(e&1&&(P(0,`li`)(1,`strong`),G(2),F(),G(3),F()),e&2){let e=t.$implicit,n=U(3);E(2),K(n.areaLabel[e.area]),E(),q(` `,e.state===`off`?`Its inspector is turned off.`:e.note??`Nothing to read yet.`,` `)}}function z_e(e,t){if(e&1&&(P(0,`section`,31)(1,`h2`,45),G(2,`Not checked`),F(),P(3,`ul`,46),j(4,R_e,4,2,`li`,null,v_e),F()()),e&2){let e=U(2);E(4),M(e.coverage())}}function B_e(e,t){if(e&1){let e=z();P(0,`p`,6),G(1,` One ranked list of what the inspectors found on the live page, with an axe pass over the app when you run one. Take a baseline before a change and an after audit to compare them. Agents get the same list from the `),P(2,`code`),G(3,`audit`),F(),G(4,` tool. `),F(),P(5,`div`,7)(6,`app-search-field`,8,0),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.filter,t)||(n.filter=t),S(t)}),F(),P(8,`app-select`,9),V(`valueChange`,function(t){return x(e),S(U().area.set(t??`all`))}),F(),P(9,`app-select`,10),V(`valueChange`,function(t){return x(e),S(U().severity.set(t??`all`))}),F(),k(10,C_e,1,2,`app-select`,11),P(11,`span`,12),G(12),F(),P(13,`p`,13),G(14),F(),P(15,`button`,14),V(`click`,function(){return x(e),S(U().runAxe())}),G(16),F(),P(17,`button`,14),V(`click`,function(){return x(e),S(U().refresh())}),G(18,`Refresh`),F()(),P(19,`p`,15),G(20),F(),k(21,w_e,2,1,`p`,16),P(22,`section`,17)(23,`div`,18)(24,`h2`,19),G(25,`Before and after`),F(),P(26,`div`,20)(27,`button`,14),V(`click`,function(){return x(e),S(U().mark(`before`))}),G(28,` Take baseline `),F(),P(29,`button`,14),V(`click`,function(){return x(e),S(U().mark(`after`))}),G(30,` Take after audit `),F(),k(31,T_e,2,1,`button`,21),F()(),P(32,`p`,22),G(33),F(),k(34,E_e,2,1,`p`,16),k(35,D_e,1,1,`app-audit-diff`,23),F(),P(36,`section`,24)(37,`h2`,25),G(38,`Findings`),F(),k(39,O_e,2,0,`p`,26)(40,k_e,5,0,`div`,26)(41,I_e,3,0,`ol`,27),F(),P(42,`section`,28)(43,`h2`,29),G(44,`Key numbers`),F(),P(45,`dl`,30),j(46,L_e,5,2,`div`,null,g_e),F()(),k(48,z_e,6,0,`section`,31)}if(e&2){let e,t,n,r=U();E(6),V_(`value`,r.filter),E(2),N(`options`,r.areaOptions())(`value`,r.area()),E(),N(`options`,r.severityOptions)(`value`,r.severity()),E(),A(r.pageOptions().length>1?10:-1),E(2),K(r.countText()),E(2),K(r.countStatus()),E(),N(`disabled`,r.axeRunning()),E(),q(` `,r.axeRunning()?`Running axe…`:`Run axe`,` `),E(),N(`disabled`,r.busy()),E(3),K(r.axeStatus()),E(),A((e=r.axeError())?21:-1,e),E(6),N(`disabled`,r.busy()),E(2),N(`disabled`,r.busy()||!r.before()),E(2),A(r.before()?31:-1),E(2),K(r.sessionText()),E(),A((t=r.sessionError())?34:-1,t),E(),A((n=r.diff())?35:-1,n),E(4),A(r.findings().length?r.shown().length?41:40:39),E(7),M(r.numbers()),E(2),A(r.coverage().length?48:-1)}}var V_e={error:`danger`,warning:`warn`,info:`accent`},x5={error:0,warning:1,info:2},H_e=[`errors`,`hydration`],U_e=class e{rpc=$(null);canShowComponent=$(!0);showComponent=xv();destroyRef=b(Os);hostPageId=tT();unsubscribe;seq=0;highlighted=!1;queued;time=aD;toolCall=t_e;areaLabel=v5;tone=V_e;severityOptions=[{value:`all`,label:`All severities`},{value:`error`,label:`Errors`},{value:`warning`,label:`Warnings and errors`}];data=w(null);loaded=w(!1);failed=w(!1);busy=w(!1);axeRunning=w(!1);axeError=w(null);sessionError=w(null);filter=w(``);area=w(`all`);severity=w(`all`);pageId=Q({source:()=>this.data(),computation:(e,t)=>t?.value&&e?.pages.some(e=>e.pageId===t.value)?t.value:e?.report?.pageId??this.hostPageId??``});staticReport=X(()=>cT(this.rpc()));report=X(()=>this.data()?.report??null);findings=X(()=>this.report()?.findings??[]);before=X(()=>this.data()?.session?.before??null);after=X(()=>this.data()?.session?.after??null);diff=X(()=>this.data()?.session?.diff??null);pageOptions=X(()=>(this.data()?.pages??[]).map(e=>({value:e.pageId,label:e.title||e.url||e.pageId,...e.url&&e.url!==(e.title||e.url)?{hint:e.url}:{}})));areaOptions=X(()=>[{value:`all`,label:`All areas`},...e_e.map(e=>({value:e,label:v5[e],hint:String(this.findings().filter(t=>t.area===e).length)}))]);shown=X(()=>{let e=this.filter().trim().toLowerCase(),t=this.area(),n=this.severity()===`all`?2:x5[this.severity()];return this.findings().filter(r=>(t===`all`||r.area===t)&&x5[r.severity]<=n&&(!e||`${r.subject??``} ${r.rule} ${r.why}`.toLowerCase().includes(e)))});countText=X(()=>{let e=this.findings().length;return`${this.shown().length} of ${e} ${e===1?`finding`:`findings`}`});countStatus=c5(()=>[this.filter(),this.area(),this.severity(),this.pageId()],()=>this.countText());numbers=X(()=>{let e=this.report()?.metrics??{};return y5.filter(t=>e[t.key]!==void 0).map(t=>({label:t.unit===`%`?`${t.label} (%)`:t.label,value:`${e[t.key]}${t.unit===`ms`?` ms`:``}`}))});coverage=X(()=>(this.report()?.sources??[]).filter(e=>e.state!==`ok`));axeStatus=X(()=>{if(this.axeRunning())return`Running axe on the page…`;let e=this.data()?.axe;return e?`Last axe pass at ${aD(e.at)}: ${e.violations.length} ${e.violations.length===1?`rule`:`rules`} broken.`:`No axe pass on this page yet. Run axe to check accessibility.`});sessionText=X(()=>{let e=this.before(),t=this.after();if(!e)return`Take a baseline, make your change, then take an after audit. Run axe and record change detection the same way both times, so the numbers compare.`;let n=`Baseline at ${aD(e.at)} with ${e.findings.length} findings.`;return t?`${n} After audit at ${aD(t.at)} with ${t.findings.length} findings.`:`${n} Make your change, then take an after audit.`});constructor(){T(()=>{let e=this.rpc();e&&!cT(e)&&Z(()=>void this.subscribe(e))}),this.destroyRef.onDestroy(()=>{this.unsubscribe?.(),clearTimeout(this.queued),this.highlight(null)})}isComponentArea(e){return H_e.includes(e)}clearFilters(){this.filter.set(``),this.area.set(`all`),this.severity.set(`all`)}pickPage(e){e&&(this.pageId.set(e),this.refresh())}async refresh(){let e=this.rpc();if(!e)return;let t=++this.seq;this.failed.set(!1);try{let n=await oT(e,`get-audit`,{pageId:this.pageId()||void 0});if(t!==this.seq||this.destroyRef.destroyed)return;let r=n_e(n);if(!r.report&&r.pages.length&&this.pageId())return this.pageId.set(``),this.refresh();this.data.set(r)}catch{t===this.seq&&this.failed.set(!0)}finally{t===this.seq&&this.loaded.set(!0)}}async runAxe(){let e=this.rpc();if(e&&!this.axeRunning()){this.axeRunning.set(!0),this.axeError.set(null);try{let t=await oT(e,`request-axe-run`,{pageId:this.pageId()||void 0});t?.ok||this.axeError.set(t?.error??`The axe pass did not run.`)}catch{this.axeError.set(`Can't reach the devtools server to run axe.`)}finally{this.axeRunning.set(!1)}await this.refresh()}}async mark(e){let t=this.rpc();if(t){this.busy.set(!0),this.sessionError.set(null);try{let n=await oT(t,`audit-session`,{pageId:this.pageId()||void 0,action:e});n?.ok||this.sessionError.set(n?.error??`The session did not change.`)}catch{this.sessionError.set(`Can't reach the devtools server.`)}finally{this.busy.set(!1)}await this.refresh()}}highlight(e,t=!1){let n=this.rpc();if(!n||!this.canShowComponent())return;let r=this.pageId(),i=e?.elementId&&r?{pageId:r,id:e.elementId,...t?{reveal:!0}:{}}:null;(i||this.highlighted)&&(this.highlighted=!!i,oT(n,`request-page-highlight`,i).catch(()=>{}))}refreshSoon(){this.queued===void 0&&(this.queued=setTimeout(()=>{this.queued=void 0,!(this.destroyRef.destroyed||this.axeRunning()||this.busy())&&this.refresh()},150))}async subscribe(e){await this.refresh();try{let t=await e.scope(`pangular`).rpc.sharedState(`audit`);if(this.destroyRef.destroyed)return;this.unsubscribe?.(),this.unsubscribe=t.on(`updated`,()=>this.refreshSoon())}catch{}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-audit-inspector`]],inputs:{rpc:[1,`rpc`],canShowComponent:[1,`canShowComponent`]},outputs:{showComponent:`showComponent`},decls:5,vars:1,consts:[[`search`,``],[`kind`,`empty`],[`kind`,`loading`],[`kind`,`error`],[`detail`,``],[`kind`,`error`,3,`retry`],[1,`intro`],[1,`toolbar`],[`placeholder`,`Filter by component, rule or text`,`saveKey`,`audit`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Area`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Severity`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`ariaLabel`,`Page`,1,`filter-select`,3,`options`,`value`],[1,`count`],[`role`,`status`,1,`sr-only`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`role`,`status`,1,`axe-status`],[`role`,`alert`,1,`notice`,`error`],[`aria-labelledby`,`audit-session-title`,1,`session`],[1,`session-head`],[`id`,`audit-session-title`],[1,`actions`],[`type`,`button`,1,`small`,3,`disabled`],[1,`muted`],[3,`diff`],[`aria-labelledby`,`audit-findings-title`],[`id`,`audit-findings-title`,1,`section-title`],[1,`empty`],[`aria-label`,`Findings, most severe first`,1,`findings`],[`aria-labelledby`,`audit-numbers-title`],[`id`,`audit-numbers-title`,1,`section-title`],[1,`numbers`],[`aria-labelledby`,`audit-coverage-title`],[`ariaLabel`,`Page`,1,`filter-select`,3,`valueChange`,`options`,`value`],[`type`,`button`,1,`small`,3,`click`],[1,`finding`],[1,`finding`,3,`mouseenter`,`mouseleave`],[1,`head`],[1,`chip`],[1,`chip`,`plain`],[1,`subject`],[1,`times`],[1,`why`],[1,`meta`],[`type`,`button`,1,`link`],[`type`,`button`,1,`link`,3,`focus`,`blur`,`click`],[`id`,`audit-coverage-title`,1,`section-title`],[1,`coverage`]],template:function(e,t){e&1&&k(0,y_e,4,0,`app-state`,1)(1,b_e,2,0,`app-state`,2)(2,x_e,2,0,`app-state`,3)(3,S_e,4,0,`app-state`,1)(4,B_e,49,21),e&2&&A(t.staticReport()?0:t.loaded()?t.failed()?2:t.report()?4:3:1)},dependencies:[aR,iD,JE,h_e],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-size: 13px;
+}
+
+.intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 8px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.filter-select[_ngcontent-%COMP%] {
+  flex: 0 1 170px;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.small[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.small[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  color: var(--%NS%text-2);
+  cursor: default;
+}
+
+.small[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.axe-status[_ngcontent-%COMP%] {
+  min-height: 1.5em;
+  margin: 0 0 8px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.notice.error[_ngcontent-%COMP%] {
+  color: var(--%NS%danger-text);
+  border-color: color-mix(in srgb, var(--%NS%danger) 40%, transparent);
+}
+
+section[_ngcontent-%COMP%] {
+  margin: 0 0 16px;
+}
+
+.session[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px;
+}
+
+.session[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.session-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.section-title[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.findings[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.finding[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 8px 12px;
+}
+
+.head[_ngcontent-%COMP%], 
+.meta[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.meta[_ngcontent-%COMP%] {
+  font-size: 12px;
+}
+
+.meta[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  overflow-wrap: anywhere;
+}
+
+.subject[_ngcontent-%COMP%] {
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  overflow-wrap: anywhere;
+}
+
+.times[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.why[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.chip.plain[_ngcontent-%COMP%] {
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.link[_ngcontent-%COMP%] {
+  padding: 0;
+  border: 0;
+  border-radius: 2px;
+  background: none;
+  color: var(--%NS%accent-text);
+  font: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+
+.link[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.numbers[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 6px;
+  margin: 0;
+}
+
+.numbers[_ngcontent-%COMP%]   div[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  padding: 6px 10px;
+}
+
+.numbers[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.numbers[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.coverage[_ngcontent-%COMP%] {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0 0 0 18px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.coverage[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-weight: 600;
+}
+
+.empty[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], 
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}`]})},S5=[{id:`router`,label:`Router`,tab:`routes`,tabLabel:`Routes`,inspector:`router`,state:`router`},{id:`http`,label:`HTTP`,tab:`network`,tabLabel:`SSR & HTTP`,inspector:`http`,state:`http`},{id:`ngrx`,label:`NgRx`,tab:`store`,tabLabel:`Store`,inspector:`ngrx`,state:`ngrx-store`},{id:`cd`,label:`Change detection`,tab:`components`,tabLabel:`Components`,inspector:`components`,state:`change-detection`},{id:`forms`,label:`Forms`,tab:`forms`,tabLabel:`Forms`,inspector:`forms`,state:`forms`},{id:`signals`,label:`Signals`,tab:`signals`,tabLabel:`Signals`,inspector:`signals`,state:`signal-graph`}],C5=Object.fromEntries(S5.map(e=>[e.id,e]));function W_e(e){return S5.filter(t=>e.inspectors[t.inspector])}function w5(e){return Array.isArray(e)?e:[]}function T5(e){return e&&typeof e==`object`&&!Array.isArray(e)?e:{}}function E5(e){let t=T5(e).pages;return Array.isArray(t)?t:Object.values(T5(t))}function D5(e){return typeof e==`number`&&Number.isFinite(e)}function G_e(e){try{let t=new URL(e,`http://x`);return e.startsWith(`/`)||t.host===`x`?`${t.pathname}${t.search}`:e.replace(/^[a-z]+:\/\/[^/]+/i,``)||e}catch{return e}}function O5(e){return e<10?`${Math.round(e*10)/10} ms`:`${Math.round(e)} ms`}function K_e(e){let t;try{t=typeof e==`string`?JSON.stringify(e):JSON.stringify(e)??``}catch{t=String(e)}return t.length>80?`${t.slice(0,79)}…`:t}function q_e(e){let t=[];for(let n of E5(e)){let e=typeof n?.pageId==`string`?n.pageId:``;for(let r of w5(n?.navigations)){if(!D5(r?.startedAt)||r.probe||r.beforeConnect)continue;let n=D5(r.endedAt)?Math.max(0,r.endedAt-r.startedAt):void 0,i=r.finalUrl&&r.finalUrl!==r.url?` to ${r.finalUrl}`:``;t.push({key:`router:${e}:${r.id}`,layer:`router`,pageId:e,at:r.startedAt,...n===void 0?{}:{ms:n},title:`Navigation to ${r.url}`,detail:[`${r.outcome}${i}`,r.trigger,n===void 0?``:O5(n)].filter(Boolean).join(` · `),...r.outcome===`failed`?{tone:`danger`}:r.outcome===`cancelled`||r.outcome===`redirected`?{tone:`warn`}:{},link:{tab:`routes`,...e?{page:e}:{}}})}}return t}function J_e(e){let t=e.status??0;if(e.error||t>=500||t===0&&!e.cancelled)return`danger`;if(t>=400||e.faulted||e.cancelled)return`warn`}function k5(e,t){if(!D5(e?.at))return null;let n=e.side===`server`?`SSR`:`client`,r=e.status?String(e.status):e.cancelled?`cancelled`:`no response`,i=D5(e.durationMs)?e.durationMs:void 0,a=J_e(e);return{key:`http:${e.side===`server`?`server`:t}:${e.id??e.at}`,layer:`http`,pageId:t,at:e.at,...i===void 0?{}:{ms:i},title:`${e.method??`GET`} ${G_e(e.url??``)}`,detail:[r,n,i===void 0?``:O5(i),e.cacheHit?`from cache`:``,e.mocked?`mocked`:e.faulted?`fault rule`:``].filter(Boolean).join(` · `),...a?{tone:a}:{},link:{tab:`network`,...t?{page:t}:{}}}}function Y_e(e){let t=[],n=E5(e);for(let e of n){let n=typeof e?.pageId==`string`?e.pageId:``;for(let r of w5(e?.calls)){let e=k5(r,n);e&&t.push(e)}}for(let r of w5(T5(e).serverCalls)){let e=r?.pageUrl?n.find(e=>e?.initialUrl&&e.initialUrl===r.pageUrl):void 0,i=k5({...r,side:`server`},e?.pageId??``);i&&t.push(i)}return t}function X_e(e){let t=[];for(let n of E5(e)){let e=typeof n?.pageId==`string`?n.pageId:``;for(let r of w5(n?.log)){if(!D5(r?.timestamp))continue;let n=w5(r.diff).length+(r.diffTruncated??0),i=D5(r.durationMs)?r.durationMs:void 0;t.push({key:`ngrx:${e}:${r.seq}`,layer:`ngrx`,pageId:e,at:r.timestamp,...i===void 0?{}:{ms:i},title:r.source===`event`?r.eventType??r.type:r.type,detail:[r.storeId,r.source===`event`?`event`:n?`${n} ${n===1?`change`:`changes`}`:`no change`,i===void 0?``:O5(i)].filter(Boolean).join(` · `),link:{tab:`store`,...e?{page:e}:{}}})}}return t}var Z_e=16;function Q_e(e){let t=[];for(let n of E5(e)){let e=typeof n?.pageId==`string`?n.pageId:``;for(let r of w5(n?.cycles)){if(!D5(r?.at))continue;let n=D5(r.ms)?r.ms:0;t.push({key:`cd:${e}:${r.id}`,layer:`cd`,pageId:e,at:r.at,ms:n,title:`Change detection cycle ${r.id}`,detail:[O5(n),`${r.checks} ${r.checks===1?`check`:`checks`}`,r.trigger?`after ${r.trigger}`:``].filter(Boolean).join(` · `),...n>Z_e?{tone:`warn`}:{},link:{tab:`components`,...e?{page:e}:{}}})}}return t}function $_e(e){return w5(T5(e).events).flatMap((e,t)=>{if(!D5(e?.timestamp)||typeof e.formId!=`string`)return[];let n=dT(e.formId),r=[e.detail,e.origin,e.outcome].filter(Boolean).join(` · `);return[{key:`forms:${e.formId}:${e.seq??`i${t}`}`,layer:`forms`,pageId:n,at:e.timestamp,...D5(e.ms)?{ms:e.ms}:{},title:`${e.type} ${e.path||`form`}`,detail:r,...e.type===`submit`&&e.outcome===`invalid`?{tone:`warn`}:{},link:{tab:`forms`,id:e.formId,...n?{page:n}:{}}}]})}var eve={write:`set`,sample:`sampled`};function tve(e){let t=[],n=T5(T5(e).pages),r=Object.keys(n).length?Object.entries(n):[[``,T5(e).graph]];for(let[e,n]of r){let r=T5(n),i=typeof r.pageId==`string`?r.pageId:String(e),a=new Map(w5(r.nodes).map(e=>[e?.id,e?.label||e?.kind||`signal`]));for(let[e,n]of Object.entries(T5(r.history)))for(let r of w5(n)){if(!D5(r?.at)||r.source===`initial`)continue;let n=a.get(e)??e;t.push({key:`signals:${i}:${e}:${r.epoch??r.at}`,layer:`signals`,pageId:i,at:r.at,title:`${n} ${eve[r.source??``]??`changed`}`,detail:K_e(r.value),link:{tab:`signals`,...i?{page:i}:{}}})}}return t}var nve={router:q_e,http:Y_e,ngrx:X_e,cd:Q_e,forms:$_e,signals:tve};function rve(e){let t=[];for(let n of S5){let r=e[n.id];r!=null&&t.push(...nve[n.id](r))}let n=new Map(S5.map((e,t)=>[e.id,t]));t.sort((e,t)=>e.at-t.at||n.get(e.layer)-n.get(t.layer)||(e.key<t.key?-1:+(e.key>t.key)));let r=new Set;for(let e of t){let t=e.key;for(let n=2;r.has(t);n++)t=`${e.key}#${n}`;e.key=t,r.add(t)}return t}function ive(e,t){let n=new Map,r=(e,t)=>{typeof e==`string`&&e&&(typeof t==`string`&&t&&!n.get(e)?n.set(e,t):n.has(e)||n.set(e,``))};for(let t of E5(e.http))r(t?.pageId,t?.title||t?.url);for(let t of E5(e.router))r(t?.pageId,t?.snapshot?.url);for(let t of E5(e.ngrx))r(t?.pageId,t?.title||t?.url);for(let e of t)r(e.pageId,``);return[...n].map(([e,t])=>({pageId:e,label:t||e}))}function ave(e,t){let n=t.query.trim().toLowerCase();return e.filter(e=>t.layers.has(e.layer)&&(t.pageId===`all`||e.pageId===t.pageId)&&(!n||e.title.toLowerCase().includes(n)||e.detail.toLowerCase().includes(n)))}function A5(e,t){return t?e.filter(e=>e.at>=t.start&&e.at<=t.end):e}function ove(e){if(!e.length)return null;let t=1/0,n=-1/0;for(let r of e)t=Math.min(t,r.at),n=Math.max(n,r.at+(r.ms??0));return n-t<20?{start:t-10,end:t+10}:{start:t,end:n}}function sve(e,t,n){let r=Math.max(20,(e.end-e.start)*t);if(r>=n.end-n.start)return null;let i=(e.start+e.end)/2;return j5({start:i-r/2,end:i+r/2},n)}function cve(e,t,n){let r=(e.end-e.start)*t;return j5({start:e.start+r,end:e.end+r},n)}function j5(e,t){let n=e.end-e.start;return e.start<t.start?{start:t.start,end:t.start+n}:e.end>t.end?{start:t.end-n,end:t.end}:e}function lve(e,t,n){let[r,i]=t<n?[t,n]:[n,t],a=e=>Math.min(1,Math.max(0,e)),o=e.end-e.start,s=e.start+a(r)*o,c=e.start+a(i)*o;return c-s<20?null:{start:s,end:c}}function uve(e,t,n){let r=Math.max(1,t.end-t.start),i=new Map;for(let a of e){if(a.at<t.start||a.at>t.end)continue;let e=Math.min(n-1,Math.floor((a.at-t.start)/r*n)),o=`${a.layer}:${e}`,s=i.get(o);s||(s={layer:a.layer,slot:e,count:0},i.set(o,s)),s.count++,(a.tone===`danger`||a.tone===`warn`&&s.tone!==`danger`)&&(s.tone=a.tone)}return[...i.values()]}function dve(e,t,n){let r=null;for(let i of e)i.layer===t&&(!r||Math.abs(i.at-n)<Math.abs(r.at-n))&&(r=i);return r}var M5=`pangular-timeline-hidden-layers`;function fve(){try{let e=JSON.parse(localStorage.getItem(M5)??`[]`);return Array.isArray(e)?e.filter(e=>S5.some(t=>t.id===e)):[]}catch{return[]}}function N5(e){try{localStorage.setItem(M5,JSON.stringify(e))}catch{}}function P5(e){let t=new Date(e),n=(e,t=2)=>String(e).padStart(t,`0`);return`${n(t.getHours())}:${n(t.getMinutes())}:${n(t.getSeconds())}.${n(t.getMilliseconds(),3)}`}function F5(e){if(e<1e3)return`${Math.round(e)} ms`;if(e<6e4)return`${Math.round(e/100)/10} s`;let t=Math.floor(e/6e4),n=Math.round(e%6e4/1e3);return n?`${t} min ${n} s`:`${t} min`}var pve=[`tracks`],I5=(e,t)=>t.id,mve=(e,t)=>t.layer+t.slot,hve=(e,t)=>t.key;function gve(e,t){e&1&&(P(0,`app-state`,3),G(1,`Loading the timeline…`),F())}function _ve(e,t){if(e&1){let e=z();P(0,`app-state`,5),V(`retry`,function(){return x(e),S(U().retry())}),G(1,` Can't read the timeline from the devtools server. `),F()}}function vve(e,t){if(e&1){let e=z();P(0,`app-select`,18),V(`valueChange`,function(t){x(e);let n=U(2);return S(n.pageId.set(t??n.allPages))}),F()}if(e&2){let e=U(2);N(`options`,e.pageOptions())(`value`,e.pageId())}}function yve(e,t){if(e&1){let e=z();P(0,`button`,19),V(`click`,function(){let t=x(e).$implicit;return S(U(2).toggleLayer(t.id))}),I(1,`span`,20),G(2),P(3,`span`,21),G(4),F()()}if(e&2){let e=t.$implicit,n=U(2);O(`aria-pressed`,!n.hidden().includes(e.id)),E(2),q(` `,e.label,` `),E(2),K(n.layerCounts()[e.id])}}function bve(e,t){e&1&&(P(0,`app-state`,16),G(1,` Nothing on the timeline yet. `),P(2,`p`,22),G(3,` Use the app with the overlay loaded. Navigations, HTTP calls, NgRx actions and form events show up as they happen. Record change detection on the Components tab, and pick a component on the Signals tab to follow its signals. `),F()())}function xve(e,t){if(e&1){let e=z();P(0,`app-state`,23),V(`clear`,function(){x(e),U();let t=Gg(2);return U().clearFilters(),S(t.focus())}),G(1),F()}if(e&2){let e=U(2);E(),q(` No event matches the filters`,e.range()?` in this range`:``,`. `)}}function Sve(e,t){if(e&1&&(P(0,`li`),G(1),F()),e&2){let e=t.$implicit;E(),K(e.label)}}function Cve(e,t){if(e&1&&(C(),I(0,`line`,32)),e&2){let e=t.$index,n=U(3);O(`x2`,n.chartWidth)(`y1`,e*n.laneHeight+n.laneHeight/2)(`y2`,e*n.laneHeight+n.laneHeight/2)}}function wve(e,t){if(e&1&&(C(),I(0,`rect`,33)),e&2){let e=t.$implicit,n=U(3);O(`data-tone`,e.tone??null)(`x`,e.slot*n.slotWidth)(`y`,n.laneIndex()[e.layer]*n.laneHeight+4)(`width`,n.slotWidth-1)(`height`,n.laneHeight-8)(`opacity`,n.binOpacity(e.count))}}function Tve(e,t){if(e&1&&(C(),I(0,`rect`,34)),e&2){let e=t,n=U(3);O(`x`,e.x-2)(`y`,e.y+1)(`width`,n.slotWidth+3)(`height`,n.laneHeight-2)}}function Eve(e,t){if(e&1&&I(0,`div`,45),e&2){let e=t;f_(`left`,e.left,`%`)(`width`,e.width,`%`)}}function Dve(e,t){if(e&1&&(P(0,`p`,41),G(1),F()),e&2){let e=U(3);E(),J(` Showing the newest `,e.listed().length,` of `,e.shown().length,` events. Zoom in or filter to see older ones. `)}}function Ove(e,t){if(e&1&&(P(0,`span`,50),G(1),F()),e&2){let e=U().$implicit;E(),K(e.detail)}}function kve(e,t){if(e&1&&(P(0,`span`,51),G(1),F()),e&2){let e=U().$implicit,t=U(3);E(),K(t.pageLabel(e.pageId))}}function Ave(e,t){if(e&1){let e=z();P(0,`li`)(1,`button`,46),V(`click`,function(){let t=x(e).$implicit;return S(U(3).select(t))})(`dblclick`,function(){let t=x(e).$implicit;return S(U(3).openEvent(t))}),P(2,`time`,47),G(3),F(),P(4,`span`,48),G(5),F(),P(6,`span`,49),G(7),F(),k(8,Ove,2,1,`span`,50),k(9,kve,2,1,`span`,51),F()()}if(e&2){let e=t.$implicit,n=U(3);E(),W(`selected`,e.key===n.selectedKey()),O(`aria-current`,e.key===n.selectedKey()?`true`:null)(`data-key`,e.key),E(2),K(n.clock(e.at)),E(),O(`data-tone`,e.tone??null),E(),K(n.layerLabel(e.layer)),E(2),K(e.title),E(),A(e.detail?8:-1),E(),A(n.showPage()?9:-1)}}function jve(e,t){if(e&1&&(P(0,`dt`),G(1,`Took`),F(),P(2,`dd`),G(3),F()),e&2){let e=U(),t=U(3);E(3),K(t.span(e.ms))}}function Mve(e,t){if(e&1&&(P(0,`dt`),G(1,`Detail`),F(),P(2,`dd`,54),G(3),F()),e&2){let e=U();E(3),K(e.detail)}}function Nve(e,t){if(e&1){let e=z();P(0,`p`,52),G(1),F(),P(2,`dl`)(3,`dt`),G(4,`Layer`),F(),P(5,`dd`),G(6),F(),P(7,`dt`),G(8,`Time`),F(),P(9,`dd`),G(10),F(),k(11,jve,4,1),k(12,Mve,4,1),P(13,`dt`),G(14,`Page`),F(),P(15,`dd`),G(16),F()(),P(17,`button`,53),V(`click`,function(){let t=x(e);return S(U(3).openEvent(t))}),G(18),F()}if(e&2){let e=t,n=U(3);E(),K(e.title),E(5),K(n.layerLabel(e.layer)),E(4),K(n.clock(e.at)),E(),A(e.ms===void 0?-1:11),E(),A(e.detail?12:-1),E(4),K(e.pageId?n.pageLabel(e.pageId):`Server, no page`),E(2),q(` Open in `,n.tabLabel(e.layer),` `)}}function Pve(e,t){e&1&&(P(0,`p`,27),G(1,` Select an event in the list or on the chart to see it here. Double click a row to open it in its own tab. `),F())}function Fve(e,t){if(e&1){let e=z();P(0,`section`,24)(1,`div`,25)(2,`h2`,26),G(3,`Time axis`),F(),P(4,`span`,27),G(5),F()(),P(6,`div`,28)(7,`ul`,29),j(8,Sve,2,1,`li`,null,I5),F(),P(10,`div`,30,1),V(`pointerdown`,function(t){return x(e),S(U(2).onPointerDown(t))})(`pointermove`,function(t){return x(e),S(U(2).onPointerMove(t))})(`pointerup`,function(t){return x(e),S(U(2).onPointerUp(t))})(`pointercancel`,function(){return x(e),S(U(2).brush.set(null))}),C(),P(12,`svg`,31),j(13,Cve,1,3,`:svg:line`,32,I5),j(15,wve,1,6,`:svg:rect`,33,mve),k(17,Tve,1,4,`:svg:rect`,34),F(),k(18,Eve,1,4,`div`,35),F()(),ys(),P(19,`div`,36)(20,`span`),G(21),F(),P(22,`span`),G(23),F()(),P(24,`p`,37),G(25,` Drag across the chart to look at a range, and click a mark to select the nearest event. The list below holds the same events. `),F()(),P(26,`div`,38)(27,`section`,39)(28,`h2`,40),G(29,`Events`),F(),k(30,Dve,2,2,`p`,41),P(31,`ol`,42),j(32,Ave,10,10,`li`,null,hve),F()(),P(34,`aside`,43)(35,`h2`,44),G(36,`Selected event`),F(),k(37,Nve,19,7)(38,Pve,2,0,`p`,27),F()()}if(e&2){let e,t,n,r=U(2);E(5),K(r.viewText()),E(3),M(r.lanes()),E(2),f_(`height`,r.lanes().length*r.laneHeight,`px`),O(`aria-label`,r.chartLabel()),E(2),O(`viewBox`,`0 0 `+r.chartWidth+` `+r.lanes().length*r.laneHeight),E(),M(r.lanes()),E(2),M(r.bins()),E(2),A((e=r.selectedMark())?17:-1,e),E(),A((t=r.brushBox())?18:-1,t),E(3),K(r.clock(r.view().start)),E(2),K(r.clock(r.view().end)),E(7),A(r.shown().length>r.listed().length?30:-1),E(2),M(r.listed()),E(5),A((n=r.selected())?37:38,n)}}function Ive(e,t){if(e&1){let e=z();P(0,`div`,6)(1,`app-search-field`,7,0),U_(`valueChange`,function(t){x(e);let n=U();return H_(n.query,t)||(n.query=t),S(t)}),F(),k(3,vve,1,2,`app-select`,8),P(4,`span`,9),G(5),F(),P(6,`p`,10),G(7),F()(),P(8,`div`,11)(9,`div`,12),j(10,yve,5,3,`button`,13,I5),F(),P(12,`div`,14)(13,`button`,15),V(`click`,function(){return x(e),S(U().zoom(.5))}),G(14,` Zoom in `),F(),P(15,`button`,15),V(`click`,function(){return x(e),S(U().zoom(2))}),G(16,` Zoom out `),F(),P(17,`button`,15),V(`click`,function(){return x(e),S(U().pan(-1))}),G(18,` Earlier `),F(),P(19,`button`,15),V(`click`,function(){return x(e),S(U().pan(1))}),G(20,` Later `),F(),P(21,`button`,15),V(`click`,function(){return x(e),S(U().range.set(null))}),G(22,` Show all `),F()()(),k(23,bve,4,0,`app-state`,16)(24,xve,2,1,`app-state`,17)(25,Fve,39,11)}if(e&2){let e=U();E(),V_(`value`,e.query),E(2),A(e.pageOptions().length>2?3:-1),E(2),K(e.countText()),E(2),K(e.countStatus()),E(3),M(e.layers()),E(3),N(`disabled`,!e.canZoomIn()),E(2),N(`disabled`,!e.range()),E(2),N(`disabled`,!e.canPan(-1)),E(2),N(`disabled`,!e.canPan(1)),E(2),N(`disabled`,!e.range()),E(2),A(e.events().length?e.shown().length?25:24:23)}}var L5=240,R5=1e3,Lve=4,Rve=class e{rpc=$(null);open=xv();destroyRef=b(Os);tracks=Ov(`tracks`);host=b(Rl);hostPageId=tT();cleanups=[];loads=0;allPages=`all`;clock=P5;span=F5;laneHeight=24;chartWidth=R5;slotWidth=R5/L5;loading=w(!0);failed=w(!1);sources=w({});query=w(``);hidden=w(fve());range=w(null);selectedKey=w(null);brush=w(null);layers=X(()=>W_e(TT(this.rpc())));events=X(()=>{let e=new Set(this.layers().map(e=>e.id));return rve(this.sources()).filter(t=>e.has(t.layer))});pages=X(()=>ive(this.sources(),this.events()));pageId=Q({source:()=>this.pages().map(e=>e.pageId),computation:(e,t)=>t&&(t.value===`all`||e.includes(t.value))?t.value:this.hostPageId&&e.includes(this.hostPageId)?this.hostPageId:`all`});pageOptions=X(()=>[{value:`all`,label:`All pages`},...this.pages().map(e=>({value:e.pageId,label:e.label,...e.label===e.pageId?{}:{hint:e.pageId}}))]);showPage=X(()=>this.pageId()===`all`&&this.pages().length>1);matching=X(()=>ave(this.events(),{layers:new Set(S5.map(e=>e.id)),pageId:this.pageId(),query:this.query()}));layerCounts=X(()=>{let e=Object.fromEntries(S5.map(e=>[e.id,0]));for(let t of A5(this.matching(),this.range()))e[t.layer]++;return e});visible=X(()=>{let e=new Set(this.hidden());return this.matching().filter(t=>!e.has(t.layer))});lanes=X(()=>{let e=new Set(this.hidden());return this.layers().filter(t=>!e.has(t.id))});laneIndex=X(()=>Object.fromEntries(this.lanes().map((e,t)=>[e.id,t])));bounds=X(()=>ove(this.visible()));view=X(()=>this.range()??this.bounds());shown=X(()=>A5(this.visible(),this.range()));listed=X(()=>this.shown().slice(-200).reverse());bins=X(()=>{let e=this.view();return e?uve(this.shown(),e,L5):[]});maxBin=X(()=>this.bins().reduce((e,t)=>Math.max(e,t.count),1));selected=X(()=>this.events().find(e=>e.key===this.selectedKey())??null);selectedMark=X(()=>{let e=this.selected(),t=this.view(),n=e?this.laneIndex()[e.layer]:void 0;if(!e||!t||n===void 0||e.at<t.start||e.at>t.end)return null;let r=Math.max(1,t.end-t.start);return{x:Math.min(239,Math.floor((e.at-t.start)/r*L5))*this.slotWidth,y:n*this.laneHeight}});brushBox=X(()=>{let e=this.brush();if(!e)return null;let t=Math.min(e.from,e.to),n=Math.max(e.from,e.to);return{left:t*100,width:(n-t)*100}});countText=X(()=>{let e=this.events().length;return`${this.shown().length} of ${e} ${e===1?`event`:`events`}`});countStatus=c5(()=>[this.query(),this.hidden(),this.pageId(),this.range()],()=>this.countText());viewText=X(()=>{let e=this.view();if(!e)return``;let t=F5(e.end-e.start);return this.range()?`Range of ${t}`:`All ${t}`});chartLabel=X(()=>{let e=this.view();if(!e)return`Timeline`;let t=this.layerCounts(),n=this.lanes().map(e=>`${e.label} ${t[e.id]}`);return`Timeline from ${P5(e.start)} to ${P5(e.end)}: ${n.join(`, `)}. The Events list holds the same events.`});canZoomIn=X(()=>{let e=this.view();return!!e&&e.end-e.start>40});constructor(){jq(`timeline`,this.selectedKey),T(()=>{let e=this.rpc();e&&this.load(e)}),this.destroyRef.onDestroy(()=>this.stop())}layerLabel(e){return C5[e].label}tabLabel(e){return C5[e].tabLabel}pageLabel(e){return e?this.pages().find(t=>t.pageId===e)?.label??e:`Server`}binOpacity(e){return Math.round((.55+.45*Math.min(1,Math.log2(e+1)/Math.log2(this.maxBin()+1)))*100)/100}toggleLayer(e){let t=this.hidden().includes(e)?this.hidden().filter(t=>t!==e):[...this.hidden(),e];this.hidden.set(t),N5(t)}clearFilters(){this.query.set(``),this.range.set(null),this.hidden.set([]),N5([]),this.pageId.set(`all`)}zoom(e){let t=this.view(),n=this.bounds();t&&n&&this.range.set(sve(t,e,n))}canPan(e){let t=this.range(),n=this.bounds();return!t||!n?!1:e<0?t.start>n.start:t.end<n.end}pan(e){let t=this.range(),n=this.bounds();t&&n&&this.range.set(cve(t,e*.5,n))}select(e){this.selectedKey.set(e.key)}openEvent(e){this.open.emit(e.link)}share(e){let t=this.tracks()?.nativeElement.getBoundingClientRect();return!t||t.width<=0?0:Math.min(1,Math.max(0,(e.clientX-t.left)/t.width))}onPointerDown(e){if(e.pointerType===`mouse`&&e.button!==0)return;let t=this.share(e);this.brush.set({from:t,to:t,id:e.pointerId}),this.downX=e.clientX;try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}e.preventDefault()}onPointerMove(e){let t=this.brush();t&&t.id===e.pointerId&&this.brush.set({...t,to:this.share(e)})}onPointerUp(e){let t=this.brush(),n=this.view();if(this.brush.set(null),!t||t.id!==e.pointerId||!n)return;if(Math.abs(e.clientX-this.downX)<Lve){this.pick(e,n);return}let r=lve(n,t.from,this.share(e));r&&this.range.set(r)}downX=0;pick(e,t){let n=this.tracks()?.nativeElement.getBoundingClientRect(),r=this.lanes();if(!n||!r.length)return;let i=r[Math.min(r.length-1,Math.max(0,Math.floor((e.clientY-n.top)/this.laneHeight)))],a=t.start+this.share(e)*(t.end-t.start),o=dve(this.shown(),i.id,a);o&&(this.selectedKey.set(o.key),queueMicrotask(()=>{this.host.nativeElement.querySelector(`button.row[data-key="${CSS.escape(o.key)}"]`)?.scrollIntoView?.({block:`nearest`})}))}retry(){let e=this.rpc();e&&this.load(e)}stop(){for(let e of this.cleanups.splice(0))e()}async load(e){this.stop();let t=++this.loads;this.loading.set(!0),this.failed.set(!1);let n=e.scope(`pangular`).rpc,r=await Promise.allSettled(S5.map(async e=>{let r=await n.sharedState(e.state);if(this.destroyRef.destroyed||t!==this.loads)return;let i=t=>this.sources.update(n=>({...n,[e.id]:t}));i(r.value()),this.cleanups.push(r.on(`updated`,i))}));this.destroyRef.destroyed||t!==this.loads||(this.failed.set(r.every(e=>e.status===`rejected`)),this.loading.set(!1))}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-timeline`]],viewQuery:function(e,t){e&1&&Ug(t.tracks,pve,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`]},outputs:{open:`open`},decls:5,vars:1,consts:[[`search`,``],[`tracks`,``],[1,`intro`],[`kind`,`loading`],[`kind`,`error`],[`kind`,`error`,3,`retry`],[1,`toolbar`],[`placeholder`,`Filter by name, URL or detail`,`saveKey`,`timeline`,1,`search`,3,`valueChange`,`value`],[`ariaLabel`,`Page`,1,`page-select`,3,`options`,`value`],[1,`count`],[`role`,`status`,1,`sr-only`],[1,`controls`],[`role`,`group`,`aria-label`,`Layers`,1,`layers`],[`type`,`button`,1,`layer`],[`role`,`group`,`aria-label`,`Time range`,1,`zoom`],[`type`,`button`,1,`small`,3,`click`,`disabled`],[`kind`,`empty`],[`kind`,`no-match`],[`ariaLabel`,`Page`,1,`page-select`,3,`valueChange`,`options`,`value`],[`type`,`button`,1,`layer`,3,`click`],[`aria-hidden`,`true`,1,`check`],[1,`badge`],[`detail`,``],[`kind`,`no-match`,3,`clear`],[`aria-labelledby`,`timeline-chart-heading`,1,`chart-card`],[1,`chart-head`],[`id`,`timeline-chart-heading`],[1,`muted`],[1,`chart`],[`aria-hidden`,`true`,1,`lane-labels`],[`role`,`img`,1,`tracks`,3,`pointerdown`,`pointermove`,`pointerup`,`pointercancel`],[`preserveAspectRatio`,`none`,`aria-hidden`,`true`],[`x1`,`0`,1,`lane-line`],[1,`mark`],[1,`selected-mark`],[1,`brush`,3,`left`,`width`],[`aria-hidden`,`true`,1,`axis`],[1,`hint`],[1,`split`],[`aria-labelledby`,`timeline-events-heading`,1,`events`],[`id`,`timeline-events-heading`],[1,`note`],[`appRovingList`,`button.row`,`aria-label`,`Events, newest first`,1,`rows`],[`aria-labelledby`,`timeline-detail-heading`,1,`detail-panel`],[`id`,`timeline-detail-heading`],[1,`brush`],[`type`,`button`,1,`row`,3,`click`,`dblclick`],[1,`when`],[1,`chip`],[1,`title`],[1,`detail`],[1,`page`],[1,`detail-title`],[`type`,`button`,1,`primary`,3,`click`],[1,`mono`]],template:function(e,t){e&1&&(P(0,`p`,2),G(1,` Navigations, HTTP calls, NgRx actions, change detection cycles, form events and signal changes from the live page on one time axis. Turn layers on and off, drag across the chart to look at a range, and open an event in its own tab. `),F(),k(2,gve,2,0,`app-state`,3)(3,_ve,2,0,`app-state`,4)(4,Ive,26,10)),e&2&&(E(2),A(t.loading()?2:t.failed()?3:4))},dependencies:[aR,JE,XV,iD],styles:[`[_nghost-%COMP%] {
+  display: block;
+  font-size: 13px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.intro[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.muted[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.toolbar[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: center;
+  margin: 0 0 8px;
+  padding: 8px;
+  background: color-mix(in srgb, var(--%NS%surface) 85%, transparent);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+}
+
+.search[_ngcontent-%COMP%] {
+  position: relative;
+  flex: 1 1 200px;
+  min-width: 0;
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  pointer-events: none;
+}
+
+input[type=search][_ngcontent-%COMP%] {
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 34px;
+  background: var(--%NS%bg);
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+input[type=search][_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.page-select[_ngcontent-%COMP%] {
+  flex: 0 1 200px;
+  min-width: 0;
+}
+
+.count[_ngcontent-%COMP%] {
+  margin-left: auto;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.controls[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 12px;
+}
+
+.layers[_ngcontent-%COMP%], 
+.zoom[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.layer[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 99px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 150ms var(--%NS%ease);
+}
+
+.layer[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.layer[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+
+.layer[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid var(--%NS%control-border);
+  border-radius: 3px;
+}
+
+.layer[aria-pressed=true][_ngcontent-%COMP%]   .check[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  box-shadow: inset 0 0 0 2px var(--%NS%surface);
+}
+
+.badge[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.small[_ngcontent-%COMP%], 
+.primary[_ngcontent-%COMP%] {
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.small[_ngcontent-%COMP%]:disabled {
+  color: var(--%NS%text-3);
+  cursor: default;
+}
+
+.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+  font-weight: 600;
+}
+
+.primary[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%accent-hover);
+}
+
+.small[_ngcontent-%COMP%]:focus-visible, 
+.primary[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.state[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+}
+
+.state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.chart-card[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  margin: 0 0 12px;
+  padding: 10px 12px;
+}
+
+.chart-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  align-items: baseline;
+  justify-content: space-between;
+  margin: 0 0 8px;
+  font-size: 12px;
+}
+
+.chart[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+}
+
+.lane-labels[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.lane-labels[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {
+  height: 24px;
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  line-height: 24px;
+  white-space: nowrap;
+}
+
+.tracks[_ngcontent-%COMP%] {
+  position: relative;
+  min-width: 0;
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+}
+
+.tracks[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.lane-line[_ngcontent-%COMP%] {
+  stroke: var(--%NS%border);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+
+.mark[_ngcontent-%COMP%] {
+  fill: var(--%NS%text-2);
+}
+
+.mark[data-tone=warn][_ngcontent-%COMP%] {
+  fill: var(--%NS%warn);
+}
+
+.mark[data-tone=danger][_ngcontent-%COMP%] {
+  fill: var(--%NS%danger);
+}
+
+.selected-mark[_ngcontent-%COMP%] {
+  fill: none;
+  stroke: var(--%NS%text-strong);
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.brush[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border: 1px solid var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  pointer-events: none;
+}
+
+.axis[_ngcontent-%COMP%] {
+  display: flex;
+  justify-content: space-between;
+  margin: 4px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 6px 0 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.split[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
+  gap: 12px;
+  align-items: start;
+}
+
+@media (max-width: 880px) {
+  .split[_ngcontent-%COMP%] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.events[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], 
+.detail-panel[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+}
+
+.note[_ngcontent-%COMP%] {
+  margin: 0 0 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.rows[_ngcontent-%COMP%] {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  overflow: hidden;
+}
+
+.rows[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]    + li[_ngcontent-%COMP%] {
+  border-top: 1px solid var(--%NS%border);
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 10px;
+  align-items: baseline;
+  width: 100%;
+  min-width: 0;
+  padding: 6px 10px;
+  border: 0;
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.row[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+}
+
+.row.selected[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  box-shadow: inset 3px 0 0 var(--%NS%accent);
+}
+
+.row[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.when[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.chip[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: var(--%NS%border);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-2);
+}
+
+.chip[data-tone=warn][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%warn) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%warn) 12%, transparent);
+  color: var(--%NS%warn-text);
+}
+
+.chip[data-tone=danger][_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+}
+
+.title[_ngcontent-%COMP%] {
+  flex: 1 1 200px;
+  min-width: 0;
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.detail[_ngcontent-%COMP%], 
+.page[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.detail-panel[_ngcontent-%COMP%] {
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  position: sticky;
+  top: 64px;
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+  padding: 12px;
+}
+
+.detail-title[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-strong);
+  font-family: var(--%NS%font-mono);
+  font-size: 12.5px;
+  overflow-wrap: anywhere;
+}
+
+dl[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 4px 12px;
+  margin: 0;
+}
+
+dt[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+dd[_ngcontent-%COMP%] {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.mono[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+  font-size: 12px;
+}
+
+.detail-panel[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .layer[_ngcontent-%COMP%] {
+    transition: none;
+  }
+}`]})};function zve(e){let t=e===`light`?`#ffffff`:`#0b0b0e`,n=e===`light`?`#92400e`:`#f5a524`;return`
+  .devframes-dock-entry button {
+    transition: background-color 0.2s, transform 0.3s;
+  }
+  /* Dim the icon of an inactive dock, never its badge, so the count keeps
+     its contrast. hub-ui's own dim classes would fade the whole button. */
+  .devframes-dock-entry button.op50,
+  .devframes-dock-entry button.saturate-0 {
+    opacity: 1;
+    filter: none;
+  }
+  .devframes-dock-entry button > * {
+    transition: opacity 0.2s, filter 0.2s;
+  }
+  .devframes-dock-entry button:not(.scale-120) > :not(.absolute) {
+    opacity: 0.45;
+    filter: saturate(0);
+  }
+  .devframes-dock-entry button:not(.scale-120):hover > :not(.absolute),
+  .devframes-dock-entry button:not(.scale-120):focus-visible > :not(.absolute) {
+    opacity: 1;
+    filter: none;
+  }
+  /* hub-ui's badge palette (blue-500 and red-500 on a pale tint) is below
+     4.5:1, and it sets the colors inline, hence the attribute selectors and
+     !important. blue-600 and red-600 with white text pass. */
+  .devframes-dock-entry .absolute[style*="59, 130, 246"] {
+    background-color: #2563eb !important;
+    color: #ffffff !important;
+  }
+  .devframes-dock-entry .absolute[style*="239, 68, 68"] {
+    background-color: #dc2626 !important;
+    color: #ffffff !important;
+  }
+  /* The group sidebar (the tools of the open group) fades a whole inactive
+     button with op60, badge included, and draws every badge bg-gray-6
+     whatever its variant. Fade the icon only: white on bg-gray-6 (#4b5563)
+     is 7.6:1. The sidebar drops the variant, so the colour comes from the
+     title Pangular gives a dock with a badge, "Angular (2 new, with errors)",
+     which hub-ui puts in aria-label: blue-600 for new items, red-600 with
+     errors or warnings, as on the rail. Other badges stay grey. */
+  .devframes-group-sidebar button.op60 {
+    opacity: 1;
+  }
+  .devframes-group-sidebar button > * {
+    transition: opacity 0.2s, filter 0.2s;
+  }
+  .devframes-group-sidebar button.op60 > :not(.absolute) {
+    opacity: 0.6;
+  }
+  .devframes-group-sidebar button.op60:hover > :not(.absolute),
+  .devframes-group-sidebar button.op60:focus-visible > :not(.absolute) {
+    opacity: 1;
+  }
+  .devframes-group-sidebar .absolute.bg-gray-6 {
+    background-color: #4b5563;
+    color: #ffffff;
+  }
+  .devframes-group-sidebar button[aria-label$=" new)"] > .absolute {
+    background-color: #2563eb;
+  }
+  .devframes-group-sidebar button[aria-label$=" new, with errors)"] > .absolute {
+    background-color: #dc2626;
+  }
+  .devframes-group-sidebar button[aria-label$=" new, with warnings)"] > .absolute {
+    background-color: #dc2626;
+  }
+  .devframes-group-sidebar button:focus-visible {
+    outline: 2px solid ${n};
+    outline-offset: 2px;
+  }
+  .devframes-dock-entry button:focus-visible {
+    outline: 2px solid ${n};
+    outline-offset: 2px;
+  }
+  .devframes-dock-entry button.scale-120 {
+    transform: none;
+    background: ${e===`light`?`rgba(146, 64, 14, 0.12)`:`rgba(245, 165, 36, 0.16)`};
+    box-shadow: inset 0 0 0 1px ${e===`light`?`rgba(146, 64, 14, 0.50)`:`rgba(245, 165, 36, 0.60)`};
+  }
+  iframe {
+    background: ${t};
+    color-scheme: ${e};
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .devframes-dock-entry button,
+    .devframes-dock-entry button > *,
+    .devframes-group-sidebar button > * {
+      transition: none;
+    }
+  }
+`}var z5=new Map;function B5(e,t=`dark`,n=50){let r=e?.querySelector(`devframes-dock-standalone`)?.shadowRoot;if(r){if(e){let t=z5.get(e);t!==void 0&&(clearTimeout(t),z5.delete(e))}let n=r.querySelector(`style[data-pangular]`);n||(n=e.createElement(`style`),n.dataset.pangular=``,r.append(n)),n.textContent=zve(t);return}if(n>0&&e){let r=z5.get(e);r!==void 0&&clearTimeout(r);let i=setTimeout(()=>{z5.delete(e),B5(e,t,n-1)},100);z5.set(e,i)}}var V5=`pangular-pref`,H5={order:[],hidden:[],pinned:[]};function U5(e){try{return localStorage.getItem(`${V5}:${e}`)}catch{return null}}function W5(e,t){try{t===null?localStorage.removeItem(`${V5}:${e}`):localStorage.setItem(`${V5}:${e}`,t)}catch{}}function Bve(){let e=U5(`theme`);return e===`light`||e===`dark`?e:`system`}function Vve(e){W5(`theme`,e===`system`?null:e)}function G5(e){if(!Array.isArray(e))return[];let t=e.filter(e=>typeof e==`string`&&e.length>0&&e.length<=40);return[...new Set(t)].slice(0,50)}function Hve(){let e=U5(`tabs`);if(!e)return H5;try{let t=JSON.parse(e);if(!t||typeof t!=`object`||Array.isArray(t))return H5;let n=t;return{order:G5(n.order),hidden:G5(n.hidden),pinned:G5(n.pinned)}}catch{return H5}}function Uve(e){W5(`tabs`,!e.order.length&&!e.hidden.length&&!e.pinned.length?null:JSON.stringify(e))}function Wve(){return U5(`passive`)===`true`}function Gve(e){W5(`passive`,e?`true`:null)}function Kve(){return U5(`pill`)===`true`}function qve(e){W5(`pill`,e?`true`:null)}function K5(e,t){let n=n=>{let r=t.order.indexOf(n);return r<0?t.order.length+e.indexOf(n):r},r=[...e].sort((e,t)=>n(e)-n(t));return[...r.filter(e=>t.pinned.includes(e)),...r.filter(e=>!t.pinned.includes(e))]}function Jve(e,t,n){let r=new Map(e.map(e=>[e.id,e]));return K5(e.map(e=>e.id),t).filter(e=>e===n||t.pinned.includes(e)||!t.hidden.includes(e)).map(e=>r.get(e))}function q5(e,t,n,r){let i=K5(e,t),a=i.indexOf(n),o=a+r;if(a<0||o<0||o>=i.length)return t;let s=t.pinned.includes(n);if(t.pinned.includes(i[o])!==s)return t;let c=[...i];return[c[a],c[o]]=[c[o],c[a]],{...t,order:c}}function Yve(e,t,n){let r=e.hidden.filter(e=>e!==t);return{...e,hidden:n?[...r,t]:r,pinned:n?e.pinned.filter(e=>e!==t):e.pinned}}function Xve(e,t,n,r){let i=t.pinned.filter(e=>e!==n);return{order:K5(e,t),pinned:r?[...i,n]:i,hidden:r?t.hidden.filter(e=>e!==n):t.hidden}}function J5(){try{let e=navigator;return/mac|iphone|ipad|ipod/i.test(e.userAgentData?.platform??e.platform??``)}catch{return!1}}function Zve(e=window){try{for(let t=e;t!==t.parent;t=t.parent){let e=t.frameElement?.getRootNode();if(e&&`host`in e&&e.host?.id===`pangular-popup-root`)return!0}}catch{}return!1}var Qve=`pangular-inspector-`;function Y5(e=window){try{let t=e.top??e;return t.name.startsWith(Qve)&&t.opener&&t.opener!==t?t.opener:null}catch{return null}}function $ve(e=window){return X5({type:`pangular:popup-return`},e)}function X5(e,t=window){let n=Y5(t);if(!n)return!1;let r;try{r=n.location.origin}catch{try{r=new URL(t.document.referrer).origin}catch{r=void 0}}if(!r||r===`null`)return!1;try{return n.postMessage(e,r),!0}catch{return!1}}var eye=class e{current=w(`dark`);preference=w(Bve());source=`dark`;sourceAttr=!1;constructor(){let e=b(Os),t=nye(),n=document.documentElement.dataset.theme,r=n===`light`||n===`dark`;if(n===`light`||n===`dark`)this.fromSource(n,!0);else if(t)r=!0,this.fromSource(Z5(t),!0);else{let t=tye();if(t){this.fromSource(t.matches?`light`:`dark`,!1);let n=e=>{r||this.fromSource(e.matches?`light`:`dark`,!1)};t.addEventListener(`change`,n),e.onDestroy(()=>t.removeEventListener(`change`,n))}else this.resolve()}let i;try{i=new BroadcastChannel(`pangular:theme`)}catch{}T(()=>{let e=this.current();try{i?.postMessage(e)}catch{}for(let{win:t,origin:n}of Q5())try{t.postMessage({type:`pangular:theme-change`,theme:e},n)}catch{}});let a=e=>{if(e.source!==window.parent)return;let t=e.data;t?.type===`pangular:theme-change`&&(r=!0,this.fromSource(t.theme===`dark`?`dark`:`light`,!0))};window.addEventListener(`message`,a);let o;t&&(o=new MutationObserver(()=>this.fromSource(Z5(t),!0)),o.observe(t,{attributes:!0,attributeFilter:[`class`]})),e.onDestroy(()=>{window.removeEventListener(`message`,a),o?.disconnect(),i?.close()})}setPreference(e){this.preference.set(e),Vve(e),this.resolve()}fromSource(e,t){this.source=e,this.sourceAttr=t,this.resolve()}resolve(){let e=this.preference(),t=e===`system`?this.source:e;this.current.set(t);let n=document.documentElement;e!==`system`||this.sourceAttr?n.dataset.theme=t:delete n.dataset.theme}static ɵfac=function(t){return new(t||e)};static ɵprov=Fl({token:e,factory:e.ɵfac})};function tye(){try{return window.matchMedia?.(`(prefers-color-scheme: light)`)??null}catch{return null}}function Z5(e){return e.classList.contains(`dark`)?`dark`:`light`}function nye(){try{return window.frameElement?.closest(`.devframes-color-root`)??null}catch{return null}}function Q5(e=window){let t=[],n;try{n=e.location.ancestorOrigins}catch{}let r=e;try{for(let i=0;r!==r.parent;i++){r=r.parent;let a=rye(e,r,i,n);a&&t.push({win:r,origin:a})}}catch{}return t}function rye(e,t,n,r){let i=e=>e&&e!==`null`?e:void 0,a=i(r?.item(n));if(a)return a;try{let e=i(t.location.origin);if(e)return e}catch{}if(!(n>0))try{return i(new URL(e.document.referrer).origin)}catch{return}}var iye=`__DEVFRAME_HUB_CLIENT_CONTEXT__`;function $5(){try{return window.parent===window?void 0:window.parent[iye]}catch{return}}function e7(e,t,n=50){let r=$5();if(!r){if(n<=0||window.parent===window)return()=>{};let r=()=>{},i=setTimeout(()=>r=e7(e,t,n-1),100);return()=>{clearTimeout(i),r()}}let i=e.map(e=>r.docks.getStateById(BC(e))?.events.on(`entry:activated`,()=>t(e))??(()=>{})),a=r.docks.selectedId,o=e.find(e=>BC(e)===a);return o&&t(o),()=>i.forEach(e=>e())}function t7(){return!!$5()}async function n7(e){let t=$5();if(!t)return!1;try{return await t.docks.switchEntry(BC(e))}catch{return!1}}function aye(){let e=$5()?.commands?.openPalette;if(typeof e!=`function`)return!1;try{return e(),!0}catch{return!1}}function oye(e,t){let n=new URL(e);return n.searchParams.delete(`view`),n.hash=t?`tab=${t}`:``,n.pathname+n.search+n.hash}function sye(e){return e.button===0&&!e.metaKey&&!e.ctrlKey&&!e.shiftKey&&!e.altKey}var r7=`pangular-tab`;function i7(e,t,n){let r=new URLSearchParams(e.replace(/^#/,``)).get(`tab`)||t;return n.find(e=>e===r)}function a7(e){try{return sessionStorage.getItem(`${r7}:${e}`)}catch{return null}}function cye(e,t){try{sessionStorage.setItem(`${r7}:${e}`,t)}catch{}}function lye(e,t){try{return new URL(e,t.href).origin===t.origin}catch{return!1}}function uye(e,t){if(t.protocol!==`chrome-extension:`)return!1;try{let{protocol:t}=new URL(e);return t===`http:`||t===`https:`}catch{return!1}}function dye(e=location){let t=new URLSearchParams(e.search).get(`baseURL`);if(t&&(lye(t,e)||uye(t,e)))return t;if(!(e.pathname.includes(`__pangular`)||e.pathname.includes(`__devframes/`)))return[`/__pangular/`,`./`]}var o7=`__DEVFRAME_CONNECTION_AUTH_TOKEN__`,fye=`pangular-auth-token:`,pye=`devframe-auth`,mye={token:void 0,remember:()=>{}};function hye(e,t=location){if(typeof e!=`string`)return null;try{let n=new URL(e,t.href).origin;return n===t.origin||n===`null`?null:n}catch{return null}}function gye(e,t=location,n=vye(),r=globalThis){let i=hye(e,t);if(!i||(_ye(r),!n))return mye;let a=fye+i;try{n.removeItem(o7)}catch{}delete globalThis[o7];let o;try{o=n.getItem(a)||void 0}catch{o=void 0}return{get token(){return o},remember(e){try{if(n.removeItem(o7),!e||e===o)return;o=e,n.setItem(a,e)}catch{}}}}var s7=new WeakSet;function _ye(e=globalThis){let t=e.BroadcastChannel;if(typeof t==`function`&&!s7.has(t)){let n=class extends t{constructor(e){if(String(e)===pye)throw Error(`The devframe-auth channel is off in a panel on another origin.`);super(e)}};s7.add(n),e.BroadcastChannel=n}let n=e.Storage?.prototype;if(n&&!s7.has(n)){s7.add(n);let{getItem:e,setItem:t}=n;n.getItem=function(t){return String(t)===o7?null:e.call(this,t)},n.setItem=function(e,n){String(e)!==o7&&t.call(this,e,n)}}}function vye(){try{return typeof localStorage>`u`?null:localStorage}catch{return null}}var c7=(()=>{class e{_renderer;_elementRef;onChange=e=>{};onTouched=()=>{};constructor(e,t){this._renderer=e,this._elementRef=t}setProperty(e,t){this._renderer.setProperty(this._elementRef.nativeElement,e,t)}registerOnTouched(e){this.onTouched=e}registerOnChange(e){this.onChange=e}setDisabledState(e){this.setProperty(`disabled`,e)}static ɵfac=function(t){return new(t||e)($p(vp),$p(Rl))};static ɵdir=Sh({type:e})}return e})(),yye=(()=>{class e extends c7{static ɵfac=(()=>{let t;return function(n){return(t||=jl(e))(n||e)}})();static ɵdir=Sh({type:e,features:[Mh]})}return e})(),l7=new Ni(``),bye={provide:l7,useExisting:wi(()=>u7),multi:!0};function xye(){let e=Lv()?Lv().getUserAgent():``;return/android (\d+)/.test(e.toLowerCase())}var Sye=new Ni(``),u7=(()=>{class e extends c7{_compositionMode;_composing=!1;constructor(e,t,n){super(e,t),this._compositionMode=n,this._compositionMode??=!xye()}writeValue(e){let t=e??``;this.setProperty(`value`,t)}_handleInput(e){(!this._compositionMode||this._compositionMode&&!this._composing)&&this.onChange(e)}_compositionStart(){this._composing=!0}_compositionEnd(e){this._composing=!1,this._compositionMode&&this.onChange(e)}static ɵfac=function(t){return new(t||e)($p(vp),$p(Rl),$p(Sye,8))};static ɵdir=Sh({type:e,selectors:[[`input`,`formControlName`,``,3,`type`,`checkbox`,3,`ngNoCva`,``],[`textarea`,`formControlName`,``,3,`ngNoCva`,``],[`input`,`formControl`,``,3,`type`,`checkbox`,3,`ngNoCva`,``],[`textarea`,`formControl`,``,3,`ngNoCva`,``],[`input`,`ngModel`,``,3,`type`,`checkbox`,3,`ngNoCva`,``],[`textarea`,`ngModel`,``,3,`ngNoCva`,``],[``,`ngDefaultControl`,``]],hostBindings:function(e,t){e&1&&V(`input`,function(e){return t._handleInput(e.target.value)})(`blur`,function(){return t.onTouched()})(`compositionstart`,function(){return t._compositionStart()})(`compositionend`,function(e){return t._compositionEnd(e.target.value)})},standalone:!1,features:[rv([bye]),Mh]})}return e})();function d7(e){return e==null||f7(e)===0}function f7(e){return e==null?null:Array.isArray(e)||typeof e==`string`?e.length:e instanceof Set?e.size:null}var p7=new Ni(``),Cye=/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,m7=class{static min(e){return wye(e)}static max(e){return Tye(e)}static required(e){return h7(e)}static requiredTrue(e){return Eye(e)}static email(e){return Dye(e)}static minLength(e){return Oye(e)}static maxLength(e){return kye(e)}static pattern(e){return Aye(e)}static nullValidator(e){return g7()}static compose(e){return S7(e)}static composeAsync(e){return w7(e)}};function wye(e){return t=>{if(t.value==null||e==null)return null;let n=parseFloat(t.value);return!isNaN(n)&&n<e?{min:{min:e,actual:t.value}}:null}}function Tye(e){return t=>{if(t.value==null||e==null)return null;let n=parseFloat(t.value);return!isNaN(n)&&n>e?{max:{max:e,actual:t.value}}:null}}function h7(e){return d7(e.value)?{required:!0}:null}function Eye(e){return e.value===!0?null:{required:!0}}function Dye(e){return d7(e.value)||Cye.test(e.value)?null:{email:!0}}function Oye(e){return t=>{let n=t.value?.length??f7(t.value);return n===null||n===0?null:n<e?{minlength:{requiredLength:e,actualLength:n}}:null}}function kye(e){return t=>{let n=t.value?.length??f7(t.value);return n!==null&&n>e?{maxlength:{requiredLength:e,actualLength:n}}:null}}function Aye(e){if(!e)return g7;let t,n;return typeof e==`string`?(n=``,e.charAt(0)!==`^`&&(n+=`^`),n+=e,e.charAt(e.length-1)!==`$`&&(n+=`$`),t=new RegExp(n)):(n=e.toString(),t=e),e=>{if(d7(e.value))return null;let r=e.value;return t.test(r)?null:{pattern:{requiredPattern:n,actualValue:r}}}}function g7(e){return null}function _7(e){return e!=null}function v7(e){return ph(e)?Cee(e):e}function y7(e){let t={};return e.forEach(e=>{t=e==null?t:{...t,...e}}),Object.keys(t).length===0?null:t}function b7(e,t){return t.map(t=>t(e))}function jye(e){return!e.validate}function x7(e){return e.map(e=>jye(e)?e:t=>e.validate(t))}function S7(e){if(!e)return null;let t=e.filter(_7);return t.length==0?null:function(e){return y7(b7(e,t))}}function C7(e){return e==null?null:S7(x7(e))}function w7(e){if(!e)return null;let t=e.filter(_7);return t.length==0?null:function(e){return Pee(b7(e,t).map(v7)).pipe(_i(y7))}}function T7(e){return e==null?null:w7(x7(e))}function E7(e){return e?Array.isArray(e)?e:[e]:[]}function D7(e,t){return Array.isArray(e)?e.includes(t):e===t}function O7(e,t){let n=E7(t);return E7(e).forEach(e=>{D7(n,e)||n.push(e)}),n}function k7(e,t){return E7(t).filter(t=>!D7(e,t))}var Mye=class{get value(){return this.control?this.control.value:null}get valid(){return this.control?this.control.valid:null}get invalid(){return this.control?this.control.invalid:null}get pending(){return this.control?this.control.pending:null}get disabled(){return this.control?this.control.disabled:null}get enabled(){return this.control?this.control.enabled:null}get errors(){return this.control?this.control.errors:null}get pristine(){return this.control?this.control.pristine:null}get dirty(){return this.control?this.control.dirty:null}get touched(){return this.control?this.control.touched:null}get status(){return this.control?this.control.status:null}get untouched(){return this.control?this.control.untouched:null}get statusChanges(){return this.control?this.control.statusChanges:null}get valueChanges(){return this.control?this.control.valueChanges:null}get path(){return null}_composedValidatorFn;_composedAsyncValidatorFn;_rawValidators=[];_rawAsyncValidators=[];_setValidators(e){this._rawValidators=e||[],this._composedValidatorFn=C7(this._rawValidators)}_setAsyncValidators(e){this._rawAsyncValidators=e||[],this._composedAsyncValidatorFn=T7(this._rawAsyncValidators)}get validator(){return this._composedValidatorFn||null}get asyncValidator(){return this._composedAsyncValidatorFn||null}_onDestroyCallbacks=[];_registerOnDestroy(e){this._onDestroyCallbacks.push(e)}_invokeOnDestroyCallbacks(){this._onDestroyCallbacks.forEach(e=>e()),this._onDestroyCallbacks=[]}reset(e=void 0){this.control?.reset(e)}hasError(e,t){return this.control?this.control.hasError(e,t):!1}getError(e,t){return this.control?this.control.getError(e,t):null}},A7=`VALID`,j7=`INVALID`,M7=`PENDING`,N7=`DISABLED`,P7=class{},F7=class extends P7{value;source;constructor(e,t){super(),this.value=e,this.source=t}},I7=class extends P7{pristine;source;constructor(e,t){super(),this.pristine=e,this.source=t}},L7=class extends P7{touched;source;constructor(e,t){super(),this.touched=e,this.source=t}},R7=class extends P7{status;source;constructor(e,t){super(),this.status=e,this.source=t}},z7=class extends P7{source;constructor(e){super(),this.source=e}};function Nye(e){return Array.isArray(e)?C7(e):e||null}function Pye(e){return Array.isArray(e)?T7(e):e||null}function Fye(e){return e!=null&&!Array.isArray(e)&&typeof e==`object`}var Iye=class{_pendingDirty=!1;_hasOwnPendingAsyncValidator=null;_pendingTouched=!1;_onCollectionChange=()=>{};_updateOn;_hasRequired=w(!1);_parent=null;_asyncValidationSubscription;_composedValidatorFn;_composedAsyncValidatorFn;_rawValidators;_rawAsyncValidators;value;constructor(e,t){this._assignValidators(e),this._assignAsyncValidators(t)}get validator(){return this._composedValidatorFn}set validator(e){this._rawValidators=this._composedValidatorFn=e,this._updateHasRequiredValidator()}get asyncValidator(){return this._composedAsyncValidatorFn}set asyncValidator(e){this._rawAsyncValidators=this._composedAsyncValidatorFn=e}get parent(){return this._parent}get status(){return Z(this.statusReactive)}set status(e){Z(()=>this.statusReactive.set(e))}_status=X(()=>this.statusReactive());statusReactive=w(void 0);get valid(){return this.status===A7}get invalid(){return this.status===j7}get pending(){return this.status===M7}get disabled(){return this.status===N7}get enabled(){return this.status!==N7}errors;get pristine(){return Z(this.pristineReactive)}set pristine(e){Z(()=>this.pristineReactive.set(e))}_pristine=X(()=>this.pristineReactive());pristineReactive=w(!0);get dirty(){return!this.pristine}get touched(){return Z(this.touchedReactive)}set touched(e){Z(()=>this.touchedReactive.set(e))}_touched=X(()=>this.touchedReactive());touchedReactive=w(!1);get untouched(){return!this.touched}_events=new Gr;events=this._events.asObservable();valueChanges;statusChanges;get updateOn(){return this._updateOn?this._updateOn:this.parent?this.parent.updateOn:`change`}setValidators(e){this._assignValidators(e)}setAsyncValidators(e){this._assignAsyncValidators(e)}addValidators(e){this.setValidators(O7(e,this._rawValidators))}addAsyncValidators(e){this.setAsyncValidators(O7(e,this._rawAsyncValidators))}removeValidators(e){this.setValidators(k7(e,this._rawValidators))}removeAsyncValidators(e){this.setAsyncValidators(k7(e,this._rawAsyncValidators))}hasValidator(e){return D7(this._rawValidators,e)}hasAsyncValidator(e){return D7(this._rawAsyncValidators,e)}clearValidators(){this.validator=null}clearAsyncValidators(){this.asyncValidator=null}markAsTouched(e={}){let t=this.touched===!1;this.touched=!0;let n=e.sourceControl??this;e.onlySelf||this._parent?.markAsTouched({...e,sourceControl:n}),t&&e.emitEvent!==!1&&this._events.next(new L7(!0,n))}markAllAsDirty(e={}){this.markAsDirty({onlySelf:!0,emitEvent:e.emitEvent,sourceControl:this}),this._forEachChild(t=>t.markAllAsDirty(e))}markAllAsTouched(e={}){this.markAsTouched({onlySelf:!0,emitEvent:e.emitEvent,sourceControl:this}),this._forEachChild(t=>t.markAllAsTouched(e))}markAsUntouched(e={}){let t=this.touched===!0;this.touched=!1,this._pendingTouched=!1;let n=e.sourceControl??this;this._forEachChild(t=>{t.markAsUntouched({onlySelf:!0,emitEvent:e.emitEvent,sourceControl:n})}),e.onlySelf||this._parent?._updateTouched(e,n),t&&e.emitEvent!==!1&&this._events.next(new L7(!1,n))}markAsDirty(e={}){let t=this.pristine===!0;this.pristine=!1;let n=e.sourceControl??this;e.onlySelf||this._parent?.markAsDirty({...e,sourceControl:n}),t&&e.emitEvent!==!1&&this._events.next(new I7(!1,n))}markAsPristine(e={}){let t=this.pristine===!1;this.pristine=!0,this._pendingDirty=!1;let n=e.sourceControl??this;this._forEachChild(t=>{t.markAsPristine({onlySelf:!0,emitEvent:e.emitEvent})}),e.onlySelf||this._parent?._updatePristine(e,n),t&&e.emitEvent!==!1&&this._events.next(new I7(!0,n))}markAsPending(e={}){this.status=M7;let t=e.sourceControl??this;e.emitEvent!==!1&&(this._events.next(new R7(this.status,t)),this.statusChanges.emit(this.status)),e.onlySelf||this._parent?.markAsPending({...e,sourceControl:t})}disable(e={}){let t=this._parentMarkedDirty(e.onlySelf);this.status=N7,this.errors=null,this._forEachChild(t=>{t.disable({...e,onlySelf:!0})}),this._updateValue();let n=e.sourceControl??this;e.emitEvent!==!1&&(this._events.next(new F7(this.value,n)),this._events.next(new R7(this.status,n)),this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),this._updateAncestors({...e,skipPristineCheck:t},this),this._onDisabledChange.forEach(e=>e(!0))}enable(e={}){let t=this._parentMarkedDirty(e.onlySelf);this.status=A7,this._forEachChild(t=>{t.enable({...e,onlySelf:!0})}),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent}),this._updateAncestors({...e,skipPristineCheck:t},this),this._onDisabledChange.forEach(e=>e(!1))}_updateAncestors(e,t){e.onlySelf||(this._parent?.updateValueAndValidity(e),e.skipPristineCheck||this._parent?._updatePristine({},t),this._parent?._updateTouched({},t))}setParent(e){this._parent=e}getRawValue(){return this.value}updateValueAndValidity(e={}){if(this._setInitialStatus(),this._updateValue(),this.enabled){let t=this._cancelExistingSubscription();this.errors=this._runValidator(),this.status=this._calculateStatus(),(this.status===A7||this.status===M7)&&this._runAsyncValidator(t,e.emitEvent)}let t=e.sourceControl??this;e.emitEvent!==!1&&(this._events.next(new F7(this.value,t)),this._events.next(new R7(this.status,t)),this.valueChanges.emit(this.value),this.statusChanges.emit(this.status)),e.onlySelf||this._parent?.updateValueAndValidity({...e,sourceControl:t})}_updateTreeValidity(e={emitEvent:!0}){this._forEachChild(t=>t._updateTreeValidity(e)),this.updateValueAndValidity({onlySelf:!0,emitEvent:e.emitEvent})}_setInitialStatus(){this.status=this._allControlsDisabled()?N7:A7}_runValidator(){return this.validator?this.validator(this):null}_runAsyncValidator(e,t){if(this.asyncValidator){this.status=M7,this._hasOwnPendingAsyncValidator={emitEvent:t!==!1,shouldHaveEmitted:e!==!1};let n=v7(this.asyncValidator(this));this._asyncValidationSubscription=n.subscribe(n=>{this._hasOwnPendingAsyncValidator=null,this.setErrors(n,{emitEvent:t,shouldHaveEmitted:e})})}}_cancelExistingSubscription(){if(this._asyncValidationSubscription){this._asyncValidationSubscription.unsubscribe();let e=(this._hasOwnPendingAsyncValidator?.emitEvent||this._hasOwnPendingAsyncValidator?.shouldHaveEmitted)??!1;return this._hasOwnPendingAsyncValidator=null,e}return!1}setErrors(e,t={}){this.errors=e,this._updateControlsErrors(t.emitEvent!==!1,this,t.shouldHaveEmitted)}get(e){let t=e;return t==null||(Array.isArray(t)||(t=t.split(`.`)),t.length===0)?null:t.reduce((e,t)=>e&&e._find(t),this)}getError(e,t){let n=t?this.get(t):this;return n?.errors?n.errors[e]:null}hasError(e,t){return!!this.getError(e,t)}get root(){let e=this;for(;e._parent;)e=e._parent;return e}_updateControlsErrors(e,t,n){this.status=this._calculateStatus(),e&&this.statusChanges.emit(this.status),(e||n)&&this._events.next(new R7(this.status,t)),this._parent&&this._parent._updateControlsErrors(e,t,n)}_initObservables(){this.valueChanges=new Ns,this.statusChanges=new Ns}_calculateStatus(){return this._allControlsDisabled()?N7:this.errors?j7:this._hasOwnPendingAsyncValidator||this._anyControlsHaveStatus(M7)?M7:this._anyControlsHaveStatus(j7)?j7:A7}_anyControlsHaveStatus(e){return this._anyControls(t=>t.status===e)}_anyControlsDirty(){return this._anyControls(e=>e.dirty)}_anyControlsTouched(){return this._anyControls(e=>e.touched)}_updatePristine(e,t){let n=!this._anyControlsDirty(),r=this.pristine!==n;this.pristine=n,e.onlySelf||this._parent?._updatePristine(e,t),r&&this._events.next(new I7(this.pristine,t))}_updateTouched(e={},t){this.touched=this._anyControlsTouched(),this._events.next(new L7(this.touched,t)),e.onlySelf||this._parent?._updateTouched(e,t)}_onDisabledChange=[];_registerOnCollectionChange(e){this._onCollectionChange=e}_setUpdateStrategy(e){Fye(e)&&e.updateOn!=null&&(this._updateOn=e.updateOn)}_parentMarkedDirty(e){return!e&&!!this._parent?.dirty&&!this._parent._anyControlsDirty()}_find(e){return null}_assignValidators(e){this._rawValidators=Array.isArray(e)?e.slice():e,this._composedValidatorFn=Nye(this._rawValidators),this._updateHasRequiredValidator()}_assignAsyncValidators(e){this._rawAsyncValidators=Array.isArray(e)?e.slice():e,this._composedAsyncValidatorFn=Pye(this._rawAsyncValidators)}_updateHasRequiredValidator(){Z(()=>this._hasRequired.set(this.hasValidator(m7.required)))}};function B7(e){return e.tagName===`INPUT`||e.tagName===`SELECT`||e.tagName===`TEXTAREA`}function Lye(e){if(e.tagName!==`INPUT`)return!1;let t=e.type;return t===`number`||t===`range`||t===`date`||t===`month`}function Rye(e){return e.tagName===`INPUT`||e.tagName===`TEXTAREA`}function V7(e,t,n,r){switch(n){case`name`:e.setAttribute(t,n,r);break;case`disabled`:case`readonly`:case`required`:r?e.setAttribute(t,n,``):e.removeAttribute(t,n);break;case`max`:case`min`:case`minLength`:case`maxLength`:r===void 0?e.removeAttribute(t,n):e.setAttribute(t,n,r.toString())}}var zye=class{kind;context;control;message;constructor({kind:e,context:t,control:n}){this.kind=e,this.context=t,this.control=n}},Bye=(()=>{class e{_validator=g7;_onChange;_enabled;ngOnChanges(e){if(this.inputName in e){let t=this.normalizeInput(e[this.inputName].currentValue);this._enabled=this.enabled(t),this._validator=this._enabled?this.createValidator(t):g7,this._onChange?.()}}validate(e){return this._validator(e)}registerOnValidatorChange(e){this._onChange=e}enabled(e){return e!=null}static ɵfac=function(t){return new(t||e)};static ɵdir=Sh({type:e,features:[Ac]})}return e})(),Vye={provide:p7,useExisting:wi(()=>H7),multi:!0},H7=(()=>{class e extends Bye{required;inputName=`required`;normalizeInput=Mv;createValidator=e=>h7;enabled(e){return e}static ɵfac=(()=>{let t;return function(n){return(t||=jl(e))(n||e)}})();static ɵdir=Sh({type:e,selectors:[[``,`required`,``,`formControlName`,``,3,`type`,`checkbox`],[``,`required`,``,`formControl`,``,3,`type`,`checkbox`],[``,`required`,``,`ngModel`,``,3,`type`,`checkbox`]],hostVars:1,hostBindings:function(e,t){e&2&&O(`required`,t._enabled?``:null)},inputs:{required:`required`},standalone:!1,features:[rv([Vye]),Mh]})}return e})(),Hye=new Ni(``);function Uye(e){return Object.getPrototypeOf(e.constructor)===yye}function U7(e,t){if(!t)return null;let n,r,i;return t.forEach(e=>{e.constructor===u7?n=e:Uye(e)?r=e:i=e}),i||r||n||null}var Wye=class extends Mye{_parent=null;name=null;valueAccessor=null;isCustomControlBased=!1;userOnReset;resetSubscription;set onReset(e){this.userOnReset=e,this.resetSubscription?.unsubscribe(),this.resetSubscription=void 0,this.control&&(this.resetSubscription=this.control.events.subscribe(e=>{e instanceof z7&&this.control&&this.userOnReset?.(this.control.value)}),this.subscription?.add(this.resetSubscription))}isNativeFormElement=!1;rawValueAccessors;_selectedValueAccessor=null;get selectedValueAccessor(){return this._selectedValueAccessor??=U7(this,this.rawValueAccessors)}parseErrorsValidator=null;renderer;injector;requiredValidatorViaDi;subscription;customControlBindings=null;constructor(e,t,n){super(),this.injector=e,this.renderer=t,this.rawValueAccessors=n,this.injector?.get(Os)?.onDestroy(()=>{this.removeParseErrorsValidator(this.control),this.subscription?.unsubscribe()})}setupCustomControl(){this.subscription?.unsubscribe();let e=this.injector?.get(nne);if(!this.control||!e)return;let t=e.markForCheck.bind(e);this.subscription=new lr,this.subscription.add(this.control.valueChanges.subscribe(t)),this.subscription.add(this.control.statusChanges.subscribe(t)),this.resetSubscription?.unsubscribe(),this.resetSubscription=void 0,this.userOnReset&&(this.resetSubscription=this.control.events.subscribe(e=>{e instanceof z7&&this.control&&this.userOnReset?.(this.control.value)}),this.subscription.add(this.resetSubscription)),this.parseErrorsValidator&&this.control.addValidators(this.parseErrorsValidator)}ngControlCreate(e){!e.nativeElement.hasAttribute?.(`ngNoCva`)&&(this.rawValueAccessors&&this.rawValueAccessors.length>0||this.valueAccessor!==null)||!e.customControl||(this.isCustomControlBased=!0,e.listenToCustomControlModel(e=>{this.control?.markAsDirty(),this.control?.setValue(e,{emitModelToViewChange:!1}),this.viewToModelUpdate(e)}),e.listenToCustomControlOutput(`touch`,()=>{this.control?.markAsTouched()}),this.customControlBindings={},this.isNativeFormElement=B7(e.nativeElement),this.requiredValidatorViaDi=this._rawValidators.find(e=>e instanceof H7))}ngControlUpdate(e,t){if(!this.isCustomControlBased)return;let n=this.control,r=this.customControlBindings;Object.is(r.value,n.value)||(r.value=n.value,e.setCustomControlModelInput(n.value)),this.bindControlProperty(e,r,`touched`,n.touched),this.bindControlProperty(e,r,`dirty`,n.dirty),this.bindControlProperty(e,r,`valid`,n.valid),this.bindControlProperty(e,r,`invalid`,n.invalid),this.bindControlProperty(e,r,`pending`,n.pending),this.bindControlProperty(e,r,`disabled`,n.disabled),this.shouldBindRequired&&this.bindControlProperty(e,r,`required`,this.isRequired);let i=n.errors;if(r.errors!==i){r.errors=i;let t=this._convertErrors(i);e.setInputOnDirectives(`errors`,t)}}get isRequired(){return(this.requiredValidatorViaDi?._enabled||this.control?._hasRequired())??!1}get shouldBindRequired(){return!0}bindControlProperty(e,t,n,r){if(t[n]===r)return;t[n]=r;let i=e.setInputOnDirectives(n,r);this.isNativeFormElement&&!i&&(n===`disabled`||n===`required`)&&this.renderer&&V7(this.renderer,e.nativeElement,n,r)}_convertErrors(e){if(e===null)return[];let t=this.control;return Object.entries(e).map(([e,n])=>new zye({context:n,kind:e,control:t}))}setParseErrorSource(e){if(e===void 0)return;let t=null,n=X(()=>{let t=e();return t.length===0?null:t.reduce((e,t)=>(e[t.kind]=t,e),{})});this.parseErrorsValidator=(()=>t).bind(this),T(()=>{t=n(),this.control?.updateValueAndValidity({emitEvent:!1})},{injector:this.injector})}removeParseErrorsValidator(e){this.parseErrorsValidator&&(e?.removeValidators(this.parseErrorsValidator),e?.updateValueAndValidity({emitEvent:!1}))}},Gye=Symbol(`FIELD_TREE`),W7=0;function Kye(){return W7}function G7(e,t){return(...n)=>{try{return W7=t,e(...n)}finally{W7=0}}}function qye(e){return!e}function K7(e){return e}function q7(e){return Array.isArray(e)}function J7(e){return(typeof e==`object`||typeof e==`function`)&&e!=null}var Y7=Symbol(),X7=Symbol(),Z7=class{predicates;fns=[];constructor(e){this.predicates=e}push(e){this.fns.push(e9(this.predicates,e))}mergeIn(e){let t=this.predicates?e.fns.map(e=>e9(this.predicates,e)):e.fns;this.fns.push(...t)}hasRules(){return this.fns.length>0}},Q7=class extends Z7{get defaultValue(){return!1}compute(e){return this.fns.some(t=>{let n=t(e);return n&&n!==X7})}},$7=class e extends Z7{ignore;static ignoreNull(t){return new e(t,e=>e===null)}constructor(e,t){super(e),this.ignore=t}get defaultValue(){return[]}compute(e){return this.fns.reduce((t,n)=>{let r=n(e);return r===void 0||r===X7?t:q7(r)?[...t,...this.ignore?r.filter(e=>!this.ignore(e)):r]:this.ignore&&this.ignore(r)?t:[...t,r]},[])}},Jye=class extends $7{constructor(e){super(e,void 0)}},Yye=class extends Z7{key;get defaultValue(){return this.key.reducer.getInitial()}constructor(e,t){super(e),this.key=t}compute(e){if(this.fns.length===0)return this.key.reducer.getInitial();let t=this.key.reducer.getInitial();for(let n=0;n<this.fns.length;n++){let r=this.fns[n](e);r!==X7&&(t=this.key.reducer.reduce(t,r))}return t}};function e9(e,t){return e.length===0?t:n=>{for(let t of e){let e=n.stateOf(t.path),r=Z(e.structure.pathKeys).length-t.depth;for(let t=0;t<r;t++)e=e.structure.parent;if(!t.fn(e.context))return X7}return t(n)}}var t9=class{predicates;hidden;disabledReasons;readonly;syncErrors;syncTreeErrors;asyncErrors;metadata=new Map;constructor(e){this.predicates=e,this.hidden=new Q7(e),this.disabledReasons=new Jye(e),this.readonly=new Q7(e),this.syncErrors=$7.ignoreNull(e),this.syncTreeErrors=$7.ignoreNull(e),this.asyncErrors=$7.ignoreNull(e)}hasAnyLogic(){return this.hidden.hasRules()||this.disabledReasons.hasRules()||this.readonly.hasRules()||this.syncErrors.hasRules()||this.syncTreeErrors.hasRules()||this.asyncErrors.hasRules()||this.metadata.size>0}hasMetadata(e){return this.metadata.has(e)}hasMetadataKeys(){return this.metadata.size>0}getMetadataKeys(){return this.metadata.keys()}getMetadata(e){return this.metadata.has(e)||this.metadata.set(e,new Yye(this.predicates,e)),this.metadata.get(e)}mergeIn(e){this.hidden.mergeIn(e.hidden),this.disabledReasons.mergeIn(e.disabledReasons),this.readonly.mergeIn(e.readonly),this.syncErrors.mergeIn(e.syncErrors),this.syncTreeErrors.mergeIn(e.syncTreeErrors),this.asyncErrors.mergeIn(e.asyncErrors);for(let t of e.getMetadataKeys()){let n=e.metadata.get(t);this.getMetadata(t).mergeIn(n)}}},n9=class{depth;constructor(e){this.depth=e}build(){return new a9(this,[],0)}},r9=class e extends n9{constructor(e){super(e)}current;all=[];addHiddenRule(e){this.getCurrent().addHiddenRule(e)}addDisabledReasonRule(e){this.getCurrent().addDisabledReasonRule(e)}addReadonlyRule(e){this.getCurrent().addReadonlyRule(e)}addSyncErrorRule(e){this.getCurrent().addSyncErrorRule(e)}addSyncTreeErrorRule(e){this.getCurrent().addSyncTreeErrorRule(e)}addAsyncErrorRule(e){this.getCurrent().addAsyncErrorRule(e)}addMetadataRule(e,t){this.getCurrent().addMetadataRule(e,t)}getChild(e){if(e===Y7){let e=this.getCurrent().children;e.size>+!!e.has(Y7)&&(this.current=void 0)}return this.getCurrent().getChild(e)}hasLogic(e){return this===e||this.all.some(({builder:t})=>t.hasLogic(e))}hasRules(){return this.all.length>0}anyChildHasLogic(){return this.all.some(({builder:e})=>e.anyChildHasLogic())}mergeIn(e,t){t?this.all.push({builder:e,predicate:{fn:G7(t.fn,this.depth),path:t.path}}):this.all.push({builder:e}),this.current=void 0}getCurrent(){return this.current===void 0&&(this.current=new i9(this.depth),this.all.push({builder:this.current})),this.current}static newRoot(){return new e(0)}},i9=class extends n9{logic=new t9([]);children=new Map;constructor(e){super(e)}addHiddenRule(e){this.logic.hidden.push(G7(e,this.depth))}addDisabledReasonRule(e){this.logic.disabledReasons.push(G7(e,this.depth))}addReadonlyRule(e){this.logic.readonly.push(G7(e,this.depth))}addSyncErrorRule(e){this.logic.syncErrors.push(G7(e,this.depth))}addSyncTreeErrorRule(e){this.logic.syncTreeErrors.push(G7(e,this.depth))}addAsyncErrorRule(e){this.logic.asyncErrors.push(G7(e,this.depth))}addMetadataRule(e,t){this.logic.getMetadata(e).push(G7(t,this.depth))}getChild(e){return this.children.has(e)||this.children.set(e,new r9(this.depth+1)),this.children.get(e)}hasLogic(e){return this===e}hasRules(){return this.logic.hasAnyLogic()||this.children.size>0}anyChildHasLogic(){for(let e of this.children.values())if(e.hasRules())return!0;return!1}},a9=class e{builder;predicates;depth;logic;constructor(e,t,n){this.builder=e,this.predicates=t,this.depth=n,this.logic=e?Zye(e,t,n):new t9([])}getChild(t){let n=this.builder?o9(this.builder,t):[];if(n.length===0)return new e(void 0,[],this.depth+1);if(n.length===1){let{builder:t,predicates:r}=n[0];return new e(t,[...this.predicates,...r.map(e=>s9(e,this.depth))],this.depth+1)}return new Xye(n.map(({builder:t,predicates:n})=>new e(t,[...this.predicates,...n.map(e=>s9(e,this.depth))],this.depth+1)))}hasLogic(e){return this.builder?this.builder.hasLogic(e):!1}hasRules(){return this.builder?this.builder.hasRules():!1}anyChildHasLogic(){return this.builder?this.builder.anyChildHasLogic():!1}},Xye=class e{all;logic;constructor(e){this.all=e,this.logic=new t9([]);for(let t of e)this.logic.mergeIn(t.logic)}getChild(t){return new e(this.all.flatMap(e=>e.getChild(t)))}hasLogic(e){return this.all.some(t=>t.hasLogic(e))}hasRules(){return this.all.some(e=>e.hasRules())}anyChildHasLogic(){return this.all.some(e=>e.anyChildHasLogic())}};function o9(e,t){if(e instanceof r9)return e.all.flatMap(({builder:e,predicate:n})=>{let r=o9(e,t);return n?r.map(({builder:e,predicates:t})=>({builder:e,predicates:[...t,n]})):r});if(e instanceof i9)return[...t!==Y7&&e.children.has(Y7)?[{builder:e.getChild(Y7),predicates:[]}]:[],...e.children.has(t)?[{builder:e.getChild(t),predicates:[]}]:[]];throw new yi(1909,!1)}function Zye(e,t,n){let r=new t9(t);if(e instanceof r9){let i=e.all.map(({builder:e,predicate:r})=>new a9(e,r?[...t,s9(r,n)]:t,n));for(let e of i)r.mergeIn(e.logic)}else if(e instanceof i9)r.mergeIn(e.logic);else throw new yi(1909,!1);return r}function s9(e,t){return{...e,depth:t}}var c9=Symbol(`PATH`),l9=class e{keys;parent;keyInParent;root;children=new Map;fieldPathProxy=new Proxy(this,Qye);logicBuilder;constructor(e,t,n,r){this.keys=e,this.parent=n,this.keyInParent=r,this.root=t??this,n||(this.logicBuilder=r9.newRoot())}get builder(){return this.logicBuilder?this.logicBuilder:this.parent.builder.getChild(this.keyInParent)}getChild(t){return this.children.has(t)||this.children.set(t,new e([...this.keys,t],this.root,this,t)),this.children.get(t)}mergeIn(e,t){let n=e.compile();this.builder.mergeIn(n.builder,t)}static unwrapFieldPath(e){return e[c9]}static newRoot(){return new e([],void 0,void 0,void 0)}},Qye={get(e,t){return t===c9?e:e.getChild(t).fieldPathProxy}},u9=void 0,d9=new Map,f9=class e{schemaFn;constructor(e){this.schemaFn=e}compile(){if(d9.has(this))return d9.get(this);let e=l9.newRoot();d9.set(this,e);let t=u9;try{u9=e,this.schemaFn(e.fieldPathProxy)}finally{u9=t}return e}static create(t){return t instanceof e?t:new e(t)}static rootCompile(t){try{return d9.clear(),t===void 0?l9.newRoot():t instanceof e?t.compile():new e(t).compile()}finally{d9.clear()}}};function $ye(e){return e instanceof f9||typeof e==`function`}function p9(e){if(u9!==l9.unwrapFieldPath(e).root)throw new yi(1908,!1)}function m9(e,t,n){return p9(e),l9.unwrapFieldPath(e).builder.addMetadataRule(t,n),t}var h9={list(){return{reduce:(e,t)=>t===void 0?e:[...e,t],getInitial:()=>[]}},min(){return{reduce:(e,t)=>e===void 0||t===void 0?e??t:t<e?t:e,getInitial:()=>void 0}},max(){return{reduce:(e,t)=>e===void 0||t===void 0?e??t:t>e?t:e,getInitial:()=>void 0}},or(){return{reduce:(e,t)=>e||t,getInitial:()=>!1}},and(){return{reduce:(e,t)=>e&&t,getInitial:()=>!0}},override:ebe};function ebe(e){return{reduce:(e,t)=>t,getInitial:()=>e?.()}}var g9=Symbol(`IS_ASYNC_VALIDATION_RESOURCE`),tbe=class{reducer;create;brand;[g9];constructor(e,t){this.reducer=e,this.create=t}};function _9(e){return new tbe(e??h9.override())}function v9(){return _9()}var y9=_9(h9.or()),nbe=v9(),rbe=v9(),ibe=_9(h9.max()),abe=_9(h9.min()),obe=_9(h9.list());function b9(e,t){if(e===t)return!0;if(!e||!t||e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(!Object.is(e[n],t[n]))return!1;return!0}function sbe(e){return e.errors().length>0?`invalid`:e.pending()?`unknown`:`valid`}var cbe=class{node;constructor(e){this.node=e}rawSyncTreeErrors=X(()=>this.shouldSkipValidation()?[]:[...this.node.logicNode.logic.syncTreeErrors.compute(this.node.context),...this.node.structure.parent?.validationState.rawSyncTreeErrors()??[]],{equal:b9});syncErrors=X(()=>this.shouldSkipValidation()?[]:[...this.node.logicNode.logic.syncErrors.compute(this.node.context),...this.syncTreeErrors(),...lbe(this.node.submitState.submissionErrors())],{equal:b9});syncValid=X(()=>this.shouldSkipValidation()?!0:this.node.structure.reduceChildren(this.syncErrors().length===0,(e,t)=>t&&e.validationState.syncValid(),qye));syncTreeErrors=X(()=>this.rawSyncTreeErrors().filter(e=>e.fieldTree===this.node.fieldTree),{equal:b9});rawAsyncErrors=X(()=>this.shouldSkipValidation()?[]:[...this.node.logicNode.logic.asyncErrors.compute(this.node.context),...this.node.structure.parent?.validationState.rawAsyncErrors()??[]],{equal:b9});asyncErrors=X(()=>this.shouldSkipValidation()?[]:this.rawAsyncErrors().filter(e=>e===`pending`||e.fieldTree===this.node.fieldTree),{equal:b9});parseErrors=X(()=>this.node.formFieldBindings().flatMap(e=>e.parseErrors()),{equal:b9});errors=X(()=>[...this.parseErrors(),...this.syncErrors(),...this.asyncErrors().filter(e=>e!==`pending`)],{equal:b9});errorSummary=X(()=>{let e=this.node.structure.reduceChildren(this.errors(),(e,t)=>[...t,...e.errorSummary()]);return Z(()=>e.sort(ube)),e},{equal:b9});pending=X(()=>this.node.structure.reduceChildren(this.asyncErrors().includes(`pending`),(e,t)=>t||e.validationState.pending()));status=X(()=>{if(this.shouldSkipValidation())return`valid`;let e=sbe(this);return this.node.structure.reduceChildren(e,(e,t)=>t===`invalid`||e.validationState.status()===`invalid`?`invalid`:t===`unknown`||e.validationState.status()===`unknown`?`unknown`:`valid`,e=>e===`invalid`)});valid=X(()=>this.status()===`valid`);invalid=X(()=>this.status()===`invalid`);shouldSkipValidation=X(()=>this.node.hidden()||this.node.disabled()||this.node.readonly()||this.node.structure.isOrphaned())};function lbe(e){return e===void 0?[]:q7(e)?e:[e]}function x9(e,t){if(q7(e))for(let n of e)n.fieldTree??=t;else e&&(e.fieldTree??=t);return e}function S9(e){return e.formField?e.formField.element:e.fieldTree().formFieldBindings().reduce((e,t)=>!e||!t.element?e??t.element:e.compareDocumentPosition(t.element)&Node.DOCUMENT_POSITION_PRECEDING?t.element:e,void 0)}function ube(e,t){let n=S9(e),r=S9(t);return n===r?0:n===void 0||r===void 0?n===void 0?1:-1:n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_PRECEDING?1:-1}var C9=_9(),dbe=class{node;cache=new WeakMap;constructor(e){this.node=e,this.fieldTreeOf=this.fieldTreeOf.bind(this),this.stateOf=this.stateOf.bind(this)}resolve(e){if(!this.cache.has(e)){let t=X(()=>{let t=l9.unwrapFieldPath(e),n=this.node,r=Kye();for(;r>0||!n.structure.logic.hasLogic(t.root.builder);)if(r--,n=n.structure.parent,n===void 0)throw new yi(1900,!1);for(let e of t.keys)if(n=n.structure.getChild(e),n===void 0)throw new yi(1901,!1);return n.fieldTree});this.cache.set(e,t)}return this.cache.get(e)()}get fieldTree(){return this.node.fieldProxy}get state(){return this.node}get value(){return this.node.structure.value}get key(){return this.node.structure.keyInParent}get pathKeys(){return this.node.structure.pathKeys}index=X(()=>{let e=this.key();if(!q7(Z(this.node.structure.parent.value)))throw new yi(1906,!1);return Number(e)});fieldTreeOf(e){return this.resolve(e)}stateOf(e){return this.resolve(e)()}valueOf=e=>{let t=this.resolve(e)().value();if(t instanceof Iye)throw new yi(1907,!1);return t}},fbe=class{node;metadata=new Map;constructor(e){this.node=e}runMetadataCreateLifecycle(){if(!this.node.logicNode.logic.hasMetadataKeys())return;let e=Qte();e&&yv(!1);try{Z(()=>ao(this.node.structure.injector,()=>{for(let e of this.node.logicNode.logic.getMetadataKeys())if(e.create){let t=this.node.logicNode.logic.getMetadata(e),n=e.create(this.node,X(()=>t.compute(this.node.context)));this.metadata.set(e,n)}}))}finally{e&&yv(!0)}}get(e){if(this.has(e)&&!this.metadata.has(e)){if(e.create)throw new yi(1912,!1);let t=this.node.logicNode.logic.getMetadata(e);this.metadata.set(e,X(()=>t.compute(this.node.context)))}return this.metadata.get(e)}has(e){return this.node.logicNode.logic.hasMetadata(e)}},pbe={get(e,t,n){if(t===Gye)return!0;let r=e(),i=r.structure.getChild(t);if(i!==void 0)return i.fieldTree;let a=Z(r.value);if(q7(a)){if(t===`length`)return r.value().length;if(t===Symbol.iterator)return()=>(r.value(),Array.prototype[Symbol.iterator].apply(r.fieldTree))}if(J7(a)&&t===Symbol.iterator)return function*(){for(let e in n)yield[e,n[e]]}},getOwnPropertyDescriptor(e,t){let n=Z(e().value),r=Reflect.getOwnPropertyDescriptor(n,t);return r&&!r.configurable&&(r.configurable=!0),r},ownKeys(e){let t=Z(e().value);return typeof t==`object`&&t?Reflect.ownKeys(t):[]}};function mbe(e,t){let n=X(()=>e()[t()]);return n[an]=e[an],n.set=r=>{Object.is(Z(n),r)||e.update(e=>hbe(e,r,t()))},n.update=e=>{n.set(e(Z(n)))},n.asReadonly=()=>n,n}function hbe(e,t,n){if(q7(e)){let r=[...e];return r[n]=t,r}return{...e,[n]:t}}var w9=Symbol(``),T9=X(()=>!1),E9=class{logic;node;createChildNode;identitySymbol=Symbol();_injector=void 0;_anyChildHasLogic;get injector(){return this._injector??=Es.create({providers:[],parent:this.fieldManager.injector}),this._injector}constructor(e,t,n){this.logic=e,this.node=t,this.createChildNode=n}children(){this.ensureChildrenMap();let e=this.childrenMap();return e===void 0?[]:Array.from(e.byPropertyKey.values()).map(e=>Z(e.reader))}materializedChildren(){let e=this.childrenMap();return e===void 0?[]:Array.from(e.byPropertyKey.values()).map(e=>e.node)}_areChildrenMaterialized(){return Z(this.childrenMap)!==void 0}ensureChildrenMap(){this._areChildrenMaterialized()||Z(()=>{this.childrenMap.update(e=>this.computeChildrenMap(this.value(),e,!0))})}getChild(e){this.ensureChildrenMap();let t=e.toString(),n=Z(this.childrenMap)?.byPropertyKey.get(t)?.reader;return n||=this.createReader(t),n()}reduceChildren(e,t,n){let r=this.childrenMap();if(!r)return e;let i=e;for(let e of r.byPropertyKey.values()){if(n?.(i))break;i=t(Z(e.reader),i)}return i}destroy(){this.injector.destroy()}createKeyOrOrphanSignals(e,t,n){if(e===`root`)return{keyInParent:D9,isOrphaned:T9};let r=this.parent,i=n,a=X(()=>{if(r.structure.isOrphaned())return w9;let e=r.structure.childrenMap();if(!e)return w9;let n=e.byPropertyKey.get(i);if(n&&n.node===this.node)return i;if(t===void 0)return w9;for(let[t,n]of e.byPropertyKey)if(n.node===this.node)return i=t;return w9}),o=X(()=>a()===w9);return{keyInParent:X(()=>{let e=a();if(e===w9)throw t===void 0?new yi(-1902,!1):new yi(1904,!1);return e}),isOrphaned:o}}createChildrenMap(){return Q({source:this.value,computation:(e,t)=>this.computeChildrenMap(e,t?.value,!1)})}computeChildrenMap(e,t,n){if(!J7(e)||!n&&t===void 0&&!(this._anyChildHasLogic??=this.logic.anyChildHasLogic()))return;t??={byPropertyKey:new Map};let r,i=q7(e);t!==void 0&&(r=i?ybe(t,e,this.identitySymbol):bbe(t,e));for(let n of Object.keys(e)){let a,o=e[n];if(o===void 0){t.byPropertyKey.has(n)&&(r??={...t},r.byPropertyKey.delete(n));continue}i&&J7(o)&&!q7(o)&&(a=o[this.identitySymbol]??=Symbol(``));let s;a&&(t.byTrackingKey?.has(a)||(r??={...t},r.byTrackingKey??=new Map,r.byTrackingKey.set(a,this.createChildNode(n,a,i))),s=(r??t).byTrackingKey.get(a));let c=t.byPropertyKey.get(n);c===void 0?(r??={...t},r.byPropertyKey.set(n,{reader:this.createReader(n),node:s??this.createChildNode(n,a,i)})):s&&s!==c.node&&(r??={...t},c.node=s)}return r??t}createReader(e){return X(()=>this.childrenMap()?.byPropertyKey.get(e)?.node)}},gbe=class extends E9{fieldManager;value;get parent(){}get root(){return this.node}get pathKeys(){return vbe}get keyInParent(){return D9}isOrphaned=T9;childrenMap;constructor(e,t,n,r,i){super(t,e,i),this.fieldManager=n,this.value=r,this.childrenMap=this.createChildrenMap()}},_be=class extends E9{logic;parent;root;pathKeys;keyInParent;value;childrenMap;isOrphaned;get fieldManager(){return this.root.structure.fieldManager}constructor(e,t,n,r,i,a){super(t,e,a),this.logic=t,this.parent=n,this.root=this.parent.structure.root;let o=this.createKeyOrOrphanSignals(`child`,r,i);this.isOrphaned=o.isOrphaned,this.keyInParent=o.keyInParent,this.pathKeys=X(()=>[...n.structure.pathKeys(),this.keyInParent()]),this.value=mbe(this.parent.structure.value,this.keyInParent),this.childrenMap=this.createChildrenMap(),this.fieldManager.structures.add(this)}},vbe=X(()=>[]),D9=X(()=>{throw new yi(1905,!1)});function ybe(e,t,n){let r,i=new Set(e.byPropertyKey.keys()),a=e.byTrackingKey&&new Set(e.byTrackingKey.keys());for(let e=0;e<t.length;e++){let r=t[e];i.delete(e.toString()),a&&J7(r)&&Object.hasOwn(r,n)&&a.delete(r[n])}if(i.size>0){r??={...e};for(let e of i)r.byPropertyKey.delete(e)}if(a&&a.size>0){r??={...e};for(let e of a)r.byTrackingKey.delete(e)}return r}function bbe(e,t){let n;for(let r of e.byPropertyKey.keys())Object.hasOwn(t,r)||(n??={...e},n.byPropertyKey.delete(r));return n}var xbe=class{node;selfSubmitting=w(!1);submissionErrors;constructor(e){this.node=e,this.submissionErrors=Q({source:this.node.structure.value,computation:()=>[]})}submitting=X(()=>this.selfSubmitting()||(this.node.structure.parent?.submitting()??!1))},O9=class{structure;validationState;metadataState;nodeState;submitState;fieldAdapter;controlValue;_context=void 0;get context(){return this._context??=new dbe(this)}fieldProxy=new Proxy(()=>this,pbe);pathNode;constructor(e){this.pathNode=e.pathNode,this.fieldAdapter=e.fieldAdapter,this.structure=this.fieldAdapter.createStructure(this,e),this.validationState=this.fieldAdapter.createValidationState(this,e),this.nodeState=this.fieldAdapter.createNodeState(this,e),this.metadataState=new fbe(this),this.submitState=new xbe(this),this.controlValue=this.controlValueSignal(),this.metadataState.runMetadataCreateLifecycle()}focusBoundControl(e){this.getBindingForFocus()?.focus(e)}getBindingForFocus(){return this.formFieldBindings().filter(e=>e.focus!==void 0).reduce(k9,void 0)||this.structure.children().map(e=>e.getBindingForFocus()).reduce(k9,void 0)}pendingSync=Q({source:()=>this.value(),computation:(e,t)=>{t?.value?.abort()}});get fieldTree(){return this.fieldProxy}get logicNode(){return this.structure.logic}get value(){return this.structure.value}get keyInParent(){return this.structure.keyInParent}get errors(){return this.validationState.errors}get parseErrors(){return this.validationState.parseErrors}get errorSummary(){return this.validationState.errorSummary}get pending(){return this.validationState.pending}get valid(){return this.validationState.valid}get invalid(){return this.validationState.invalid}get dirty(){return this.nodeState.dirty}get touched(){return this.nodeState.touched}get disabled(){return this.nodeState.disabled}get disabledReasons(){return this.nodeState.disabledReasons}get hidden(){return this.nodeState.hidden}get readonly(){return this.nodeState.readonly}get formFieldBindings(){return this.nodeState.formFieldBindings}get submitting(){return this.submitState.submitting}get name(){return this.nodeState.name}get max(){let e=this.metadata(rbe)?.();return e?this.metadata(e):void 0}get maxLength(){return this.metadata(abe)}get min(){let e=this.metadata(nbe)?.();return e?this.metadata(e):void 0}get minLength(){return this.metadata(ibe)}get pattern(){return this.metadata(obe)??Sbe}get required(){return this.metadata(y9)??Cbe}metadata(e){return this.metadataState.get(e)}getError(e){return this.errors().find(t=>t.kind===e)}hasMetadata(e){return this.metadataState.has(e)}markAsTouched(e){this.structure.isOrphaned()||Z(()=>{this.markAsTouchedInternal(e),this.flushSync()})}markAsTouchedInternal(e){if(!this.structure.isOrphaned()&&!this.validationState.shouldSkipValidation()&&(this.nodeState.markAsTouched(),!e?.skipDescendants))for(let e of this.structure.children())e.markAsTouchedInternal()}markAsDirty(){this.nodeState.markAsDirty()}markAsPristine(){this.nodeState.markAsPristine()}markAsUntouched(){this.nodeState.markAsUntouched()}reset(e){Z(()=>this._reset(e))}_reset(e){this.pendingSync()?.abort(),e!==void 0&&this.value.set(e),this.controlValue.rawSet(this.value()),this.nodeState.markAsUntouched(),this.nodeState.markAsPristine();for(let e of this.formFieldBindings())e.reset();for(let e of this.structure.materializedChildren())e._reset()}reloadValidation(){Z(()=>this._reloadValidation())}_reloadValidation(){let e=this.logicNode.logic.getMetadataKeys();for(let t of e)t[g9]&&this.metadata(t).reload?.();for(let e of this.structure.children())e._reloadValidation()}controlValueSignal(){let e=Q(this.value);e.rawSet=e.set,e.set=t=>{e.rawSet(t),this.markAsDirty(),this.debounceSync()};let t=e.update;return e.update=e=>{t(e),this.markAsDirty(),this.debounceSync()},e}sync(){this.value.set(this.controlValue())}flushSync(){let e=this.pendingSync();e&&!e.signal.aborted&&(e.abort(),this.sync())}async debounceSync(){let e=Z(()=>(this.pendingSync()?.abort(),this.nodeState.debouncer()));if(e){let t=new AbortController,n=e(t.signal);if(n&&(this.pendingSync.set(t),await n,t.signal.aborted))return}this.structure.isOrphaned()||this.sync()}static newRoot(e,t,n,r){return r.newRoot(e,t,n,r)}createStructure(e){return e.kind===`root`?new gbe(this,e.logic,e.fieldManager,e.value,this.newChild.bind(this)):new _be(this,e.logic,e.parent,e.identityInParent,e.initialKeyInParent,this.newChild.bind(this))}newChild(e,t,n){let r,i;return n?(r=this.pathNode.getChild(Y7),i=this.structure.logic.getChild(Y7)):(r=this.pathNode.getChild(e),i=this.structure.logic.getChild(e)),this.fieldAdapter.newChild({kind:`child`,parent:this,pathNode:r,logic:i,initialKeyInParent:e,identityInParent:t,fieldAdapter:this.fieldAdapter})}},Sbe=X(()=>[]),Cbe=X(()=>!1);function k9(e,t){return e?t&&e.element.compareDocumentPosition(t.element)&Node.DOCUMENT_POSITION_PRECEDING?t:e:t}var wbe=class{node;selfTouched=w(!1);selfDirty=w(!1);markAsTouched(){this.selfTouched.set(!0)}markAsDirty(){this.selfDirty.set(!0)}markAsPristine(){this.selfDirty.set(!1)}markAsUntouched(){this.selfTouched.set(!1)}formFieldBindings=w([]);constructor(e){this.node=e}dirty=X(()=>{let e=this.selfDirty()&&!this.isNonInteractive();return this.node.structure.reduceChildren(e,(e,t)=>t||e.nodeState.dirty(),K7)});touched=X(()=>{let e=this.selfTouched()&&!this.isNonInteractive();return this.node.structure.reduceChildren(e,(e,t)=>t||e.nodeState.touched(),K7)});disabledReasons=X(()=>[...this.node.structure.parent?.nodeState.disabledReasons()??[],...this.node.logicNode.logic.disabledReasons.compute(this.node.context)],{equal:b9});disabled=X(()=>!!this.disabledReasons().length);readonly=X(()=>(this.node.structure.parent?.nodeState.readonly()||this.node.logicNode.logic.readonly.compute(this.node.context))??!1);hidden=X(()=>(this.node.structure.parent?.nodeState.hidden()||this.node.logicNode.logic.hidden.compute(this.node.context))??!1);name=X(()=>{let e=this.node.structure.parent;return e?`${e.name()}.${this.node.structure.keyInParent()}`:this.node.structure.fieldManager.rootName});debouncer=X(()=>{if(this.node.logicNode.logic.hasMetadata(C9)){let e=this.node.logicNode.logic.getMetadata(C9).compute(this.node.context);if(e)return t=>e(this.node.context,t)}return this.node.structure.parent?.nodeState.debouncer?.()});isNonInteractive=X(()=>this.hidden()||this.disabled()||this.readonly())},Tbe=class{newRoot(e,t,n,r){return new O9({kind:`root`,fieldManager:e,value:t,pathNode:n,logic:n.builder.build(),fieldAdapter:r})}newChild(e){return new O9(e)}createNodeState(e){return new wbe(e)}createValidationState(e){return new cbe(e)}createStructure(e,t){return e.createStructure(t)}},Ebe=class{injector;rootName;submitOptions;constructor(e,t,n){this.injector=e,this.rootName=t??`${this.injector.get(nc)}.form${Dbe++}`,this.submitOptions=n}structures=new Set;createFieldManagementEffect(e){T(()=>{let t=new Set;this.markStructuresLive(e,t);for(let e of this.structures)t.has(e)||(this.structures.delete(e),Z(()=>e.destroy()))},{injector:this.injector})}markStructuresLive(e,t){t.add(e);for(let n of e.children())this.markStructuresLive(n.structure,t)}},Dbe=0,Obe=new Ni(``);function kbe(e){let t,n,r;return e.length===3?[t,n,r]=e:e.length===2?$ye(e[1])?[t,n]=e:[t,r]=e:[t]=e,[t,n,r]}function Abe(...e){let[t,n,r]=kbe(e),i=r?.injector??b(Es),a=ao(i,()=>f9.rootCompile(n)),o=new Ebe(i,r?.name,r?.submission),s=r?.adapter??new Tbe,c=O9.newRoot(o,t,a,s);o.createFieldManagementEffect(c.structure);let{experimentalWebMcpTool:l}=r??{};if(l){let e=ao(i,()=>b(Obe,{optional:!0}));e&&ao(i,()=>e(c.fieldTree,{name:l.name,description:l.description}))}return c.fieldTree}async function jbe(e,t){let n=Z(e);if(Z(n.submitState.submitting))return!1;let r=t===void 0?n.structure.root.fieldProxy:e,i={root:n.structure.root.fieldProxy,submitted:e};t=typeof t==`function`?{action:t}:t??n.structure.fieldManager.submitOptions;let a=t?.action;if(!a)throw new yi(1915,!1);n.markAsTouched();let o=t?.onInvalid,s=Mbe(n,t?.ignoreValidators);try{if(s){n.submitState.selfSubmitting.set(!0);let e=await Z(()=>a?.(r,i));return e&&Nbe(n,e),!e||q7(e)&&e.length===0}return Z(()=>o?.(r,i)),!1}finally{n.submitState.selfSubmitting.set(!1)}}function Mbe(e,t){switch(t){case`all`:return!0;case`none`:return Z(e.valid);default:return!Z(e.invalid)}}function Nbe(e,t){q7(t)||(t=[t]);let n=new Map;for(let r of t){let t=x9(r,e.fieldTree),i=t.fieldTree(),a=n.get(i);a||(a=[],n.set(i,a)),a.push(t)}for(let[e,t]of n)e.submitState.submissionErrors.set(t)}var A9=class{kind=`compat`;control;fieldTree;context;message;constructor({context:e,kind:t,control:n}){this.context=e,this.kind=t,this.control=n}};function Pbe(e){if(e.length===0)return null;let t={};for(let n of e)t[n.kind]=n instanceof A9?n.context:n;return t}function Fbe(e,t){return e===null?[]:Object.entries(e).map(([e,n])=>new A9({context:n,kind:e,control:t}))}var Ibe=new Ni(``);function j9(e,t){return e instanceof Function?e(t):e}function Lbe(e){return typeof e==`number`?isNaN(e):e===``||e===!1||e==null}function M9(e){return e===void 0?[]:Array.isArray(e)?e:[e]}function Rbe(e,t){p9(e),l9.unwrapFieldPath(e).builder.addSyncErrorRule(e=>x9(t(e),e.fieldTree))}function zbe(e){return new Bbe(e)}var N9=class{__brand=void 0;kind=``;fieldTree;message;constructor(e){e&&Object.assign(this,e)}},Bbe=class extends N9{kind=`required`},P9=class extends N9{kind=`parse`};function Vbe(e,t){let n=m9(e,_9(),e=>!t?.when||t.when(e));m9(e,y9,({state:e})=>e.metadata(n)()),Rbe(e,e=>{if(e.state.metadata(n)()&&Lbe(e.value()))return t?.error?j9(t.error,e):zbe({message:j9(t?.message,e)})})}function Hbe(e,t,n){let r=Q({source:e,computation:()=>[],equal:b9});return{errors:r.asReadonly(),setRawValue:e=>{let i=n(e);r.set(M9(i.error)),i.value!==void 0&&t(i.value),r.set(M9(i.error))},reset:()=>{r.set([])}}}var Ube=class{field;constructor(e){this.field=e}control=this;get value(){return this.field().controlValue()}get valid(){return this.field().valid()}get invalid(){return this.field().invalid()}get pending(){return this.field().pending()}get disabled(){return this.field().disabled()}get enabled(){return!this.field().disabled()}get errors(){return Pbe(this.field().errors())}get pristine(){return!this.field().dirty()}get dirty(){return this.field().dirty()}get touched(){return this.field().touched()}get untouched(){return!this.field().touched()}get status(){if(this.field().disabled())return`DISABLED`;if(this.field().valid())return`VALID`;if(this.field().invalid())return`INVALID`;if(this.field().pending())return`PENDING`;throw new yi(1910,!1)}valueAccessor=null;hasValidator(e){return e===m7.required&&this.field().required()}updateValueAndValidity(){}},F9={disabled:`disabled`,disabledReasons:`disabledReasons`,dirty:`dirty`,errors:`errors`,hidden:`hidden`,invalid:`invalid`,max:`max`,maxLength:`maxLength`,min:`min`,minLength:`minLength`,name:`name`,pattern:`pattern`,pending:`pending`,readonly:`readonly`,required:`required`,touched:`touched`},Wbe=(()=>{let e={};for(let t of Object.keys(F9))e[F9[t]]=t;return e})();function I9(e,t){return e[Wbe[t]]?.()}var L9=Object.values(F9);function R9(){return{}}function z9(e,t,n){return e[t]!==n&&(e[t]=n,!0)}function Gbe(e,t,n){let r;if(H9(e)&&n.isBadInput(e))return{error:new P9};switch(e.type){case`checkbox`:return{value:e.checked};case`number`:case`range`:case`datetime-local`:if(r=Z(t),typeof r==`number`||r===null)return{value:e.value===``?null:e.valueAsNumber};break;case`date`:case`month`:case`time`:case`week`:if(r=Z(t),r===null||r instanceof Date)return{value:e.valueAsDate};if(typeof r==`number`)return{value:e.valueAsNumber}}if(e.tagName===`INPUT`&&e.type===`text`&&(r??=Z(t),typeof r==`number`||r===null)){if(e.value===``)return{value:null};let t=Number(e.value);return Number.isNaN(t)?{error:new P9}:{value:t}}return{value:e.value}}function B9(e,t){switch(e.type){case`checkbox`:e.checked=t;return;case`radio`:e.checked=t===e.value;return;case`number`:case`range`:case`datetime-local`:if(typeof t==`number`){V9(e,t);return}if(t===null){e.value=``;return}break;case`date`:case`month`:case`time`:case`week`:if(t===null||t instanceof Date){e.valueAsDate=t;return}if(typeof t==`number`){V9(e,t);return}}if(e.tagName===`INPUT`&&e.type===`text`){if(typeof t==`number`){e.value=isNaN(t)?``:String(t);return}if(t===null){e.value=``;return}}e.value=t}function V9(e,t){isNaN(t)?e.value=``:e.valueAsNumber=t}function H9(e){return e.tagName===`INPUT`}function Kbe(e){return e.type===`date`||e.type===`datetime-local`||e.type===`month`||e.type===`time`||e.type===`week`}function qbe(e,t){let n=e.getUTCFullYear(),r=String(e.getUTCMonth()+1).padStart(2,`0`);return t===`month`?`${n}-${r}`:`${n}-${r}-${String(e.getUTCDate()).padStart(2,`0`)}`}function U9(e,t,n){return t instanceof Date&&(e===`min`||e===`max`)&&(n===`date`||n===`month`)?qbe(t,n):t}function Jbe(e,t){e.listenToCustomControlModel(e=>t.state().controlValue.set(e)),e.listenToCustomControlOutput(`touch`,()=>t.state().markAsTouched()),t.registerAsBinding(e.customControl);let n=R9();return()=>{let r=t.state(),i=r.controlValue();z9(n,`controlValue`,i)&&e.setCustomControlModelInput(i);for(let i of L9){let a;if(a=i===`errors`?t.errors():I9(r,i),z9(n,i,a)&&(e.setInputOnDirectives(i,a),t.elementAcceptsNativeProperty(i)&&!e.customControlHasInput(i))){let e=U9(i,a,t.nativeFormElement.type);V7(t.renderer,t.nativeFormElement,i,e)}}}}function Ybe(e){return typeof e==`object`&&!!e}function Xbe(e,t){let n=R9();t.controlValueAccessor.registerOnChange(e=>{n.controlValue=e,t.state().controlValue.set(e)}),t.controlValueAccessor.registerOnTouched(()=>t.state().markAsTouched());let r=t.injector.get(p7,null,{optional:!0,self:!0});if(r){let e;for(let t of r)Ybe(t)&&t.registerOnValidatorChange&&(e??=w(0),t.registerOnValidatorChange(()=>{e.update(e=>e+1)}));let n=r.map(e=>typeof e==`function`?e:e.validate.bind(e)),i=m7.compose(n),a=X(()=>(e?.(),Fbe(i?i(t.interopNgControl.control):null,t.interopNgControl.control)));t.parseErrorsSource.set(a)}return t.registerAsBinding({reset:()=>{let e=t.state().value();n.controlValue=e,Z(()=>t.controlValueAccessor.writeValue(e))}}),()=>{let r=t.state(),i=r.controlValue();z9(n,`controlValue`,i)&&Z(()=>t.controlValueAccessor.writeValue(i));for(let i of L9){let a=I9(r,i);if(z9(n,i,a)){let n=e.setInputOnDirectives(i,a,i===`name`?Zbe:void 0);i===`disabled`&&t.controlValueAccessor.setDisabledState?Z(()=>t.controlValueAccessor.setDisabledState(a)):!n&&t.elementAcceptsNativeProperty(i)&&V7(t.renderer,t.nativeFormElement,i,a)}}}}function Zbe(e){return e==null}function Qbe(e,t,n){if(typeof MutationObserver!=`function`)return;let r=new MutationObserver(e=>{e.some(e=>$be(e))&&t()});r.observe(e,{attributes:!0,attributeFilter:[`value`],characterData:!0,childList:!0,subtree:!0}),n.onDestroy(()=>r.disconnect())}function $be(e){if(e.type===`childList`||e.type===`characterData`){if(e.target instanceof Comment)return!1;for(let t of e.addedNodes)if(!(t instanceof Comment))return!0;for(let t of e.removedNodes)if(!(t instanceof Comment))return!0;return!1}return e.type===`attributes`&&e.target instanceof HTMLOptionElement}function exe(e,t,n,r){let i=!1,a=t.nativeFormElement,o=Hbe(()=>t.state().value(),e=>t.state().controlValue.set(e),e=>Gbe(a,t.state().value,r));n.set(o.errors),t.onReset=()=>{o.reset();let e=t.state().value();s.controlValue=e,B9(a,e)},e.listenToDom(`input`,()=>o.setRawValue(void 0)),e.listenToDom(`blur`,()=>t.state().markAsTouched()),H9(a)&&Kbe(a)&&r.watchValidity(t.destroyRef,a,()=>o.setRawValue(void 0)),t.registerAsBinding(),a.tagName===`SELECT`&&Qbe(a,()=>{i&&(a.value=t.state().controlValue())},t.destroyRef);let s=R9();return()=>{let n=t.state();for(let r of L9){let i=I9(n,r);if(z9(s,r,i)&&(e.setInputOnDirectives(r,i),t.elementAcceptsNativeProperty(r))){let e=U9(r,i,a.type);V7(t.renderer,a,r,e)}}let r=n.controlValue(),o=z9(s,`controlValue`,r),c=a.type===`radio`&&z9(s,`radioValue`,a.value);(o||c)&&B9(a,r),i=!0}}var W9=(()=>{class e{static ɵfac=function(t){return new(t||e)};static ɵprov=Di({token:e,factory:e=>txe.ɵfac(e),providedIn:`root`})}return e})(),txe=(()=>{class e extends W9{document=b(Ds);cspNonce=b(oc,{optional:!0});injectedStyles=new WeakMap;watchValidity(e,t,n){let r=t.getRootNode();this.injectedStyles.has(r)||this.injectedStyles.set(r,this.createTransitionStyle(r));let i=e=>{let t=e;(t.animationName===`ng-valid`||t.animationName===`ng-invalid`)&&n()};t.addEventListener(`animationstart`,i),e.onDestroy(()=>{t.removeEventListener(`animationstart`,i)})}isBadInput(e){return e.validity?.badInput??!1}createTransitionStyle(e){let t=this.document.createElement(`style`);return this.cspNonce&&(t.nonce=this.cspNonce),t.textContent=`
+      @keyframes ng-valid {}
+      @keyframes ng-invalid {}
+      input:valid, textarea:valid {
+        animation: ng-valid 0.001s;
+      }
+      input:invalid, textarea:invalid {
+        animation: ng-invalid 0.001s;
+      }
+    `,e.nodeType===9?e.head?.appendChild(t):e.appendChild(t),t}ngOnDestroy(){this.injectedStyles.get(this.document)?.remove()}static ɵfac=(()=>{let t;return function(n){return(t||=jl(e))(n||e)}})();static ɵprov=Di({token:e,factory:e.ɵfac})}return e})(),nxe=Symbol(),G9=new Ni(``),rxe=(()=>{class e{field=$.required({alias:`formField`});state=X(()=>this.field()());renderer=b(vp);destroyRef=b(Os);injector=b(Es);element=b(Rl).nativeElement;elementIsNativeFormElement=B7(this.element);elementAcceptsTextualValues=Rye(this.element);_elementAcceptsMinMax;nativeFormElement=this.elementIsNativeFormElement?this.element:void 0;focuser=e=>this.element.focus(e);controlValueAccessors=b(l7,{optional:!0,self:!0});config=b(Ibe,{optional:!0});validityMonitor=b(W9);parseErrorsSource=w(void 0);_interopNgControl;get interopNgControl(){return this._interopNgControl??=new Ube(this.state)}parseErrors=X(()=>this.parseErrorsSource()?.().map(e=>({...e,fieldTree:Z(this.state).fieldTree,formField:this}))??[],{equal:b9});errors=X(()=>this.state().errors().filter(e=>!e.formField||e.formField===this),{equal:b9});isFieldBinding=!1;resetter=()=>{};parseErrorsResetCallback;setParseErrors(e){this.parseErrorsSource.set(e)}set onReset(e){this.parseErrorsResetCallback=e}get onReset(){return this.parseErrorsResetCallback}get controlValueAccessor(){return!this.controlValueAccessors||this.controlValueAccessors.length===0?this.interopNgControl?.valueAccessor??void 0:U7(this.interopNgControl,this.controlValueAccessors)??void 0}installClassBindingEffect(){let e=Object.entries(this.config?.classes??{}).map(([e,t])=>[e,X(()=>t(this))]);if(e.length===0)return;let t=R9();Fv({write:()=>{for(let[n,r]of e){let e=r();z9(t,n,e)&&(e?this.renderer.addClass(this.element,n):this.renderer.removeClass(this.element,n))}}},{injector:this.injector})}focus(e){this.focuser(e)}reset(){this.resetter(),this.parseErrorsResetCallback?.(this.state().value())}registerAsBinding(e){if(this.isFieldBinding)throw new yi(1913,!1);this.isFieldBinding=!0,this.installClassBindingEffect(),e?.focus&&(this.focuser=t=>e.focus(t)),e?.reset&&(this.resetter=()=>e.reset()),T(e=>{let t=this.state();t.nodeState.formFieldBindings.update(e=>[...e,this]),e(()=>{t.nodeState.formFieldBindings.update(e=>e.filter(e=>e!==this))})},{injector:this.injector})}[nxe];ɵngControlCreate(e){if(!e.hasPassThrough){if(this.controlValueAccessor)this.ɵngControlUpdate=Xbe(e,this);else if(e.customControl)this.ɵngControlUpdate=Jbe(e,this);else if(this.elementIsNativeFormElement)this.ɵngControlUpdate=exe(e,this,this.parseErrorsSource,this.validityMonitor);else throw new yi(1914,!1)}}ɵngControlUpdate;elementAcceptsNativeProperty(e){if(!this.elementIsNativeFormElement)return!1;switch(e){case`min`:case`max`:return this._elementAcceptsMinMax??=Lye(this.element);case`minLength`:case`maxLength`:return this.elementAcceptsTextualValues;case`disabled`:case`required`:case`readonly`:case`name`:return!0;default:return!1}}static ɵfac=function(t){return new(t||e)};static ɵdir=Sh({type:e,selectors:[[``,`formField`,``]],inputs:{field:[1,`formField`,`field`]},exportAs:[`formField`],features:[rv([{provide:G9,useExisting:e},{provide:Wye,useFactory:()=>b(e).interopNgControl},{provide:Hye,useFactory:()=>b(G9,{self:!0})}]),Ah(`formField`)]})}return e})(),ixe=(()=>{class e{fieldTree=$.required({alias:`formRoot`});onSubmit(e){e.preventDefault(),Z(()=>{let e=this.fieldTree();e().structure.fieldManager.submitOptions&&jbe(e)})}static ɵfac=function(t){return new(t||e)};static ɵdir=Sh({type:e,selectors:[[`form`,`formRoot`,``]],hostAttrs:[`novalidate`,``],hostBindings:function(e,t){e&1&&V(`submit`,function(e){return t.onSubmit(e)})},inputs:{fieldTree:[1,`formRoot`,`fieldTree`]}})}return e})(),axe=[`codeInput`],oxe=`https://pangular-inspector.dev/security/#one-time-code`,sxe=class e{client=$.required();docsUrl=oxe;busy=w(!1);error=w(``);notice=w(``);model=w({code:``});codeForm=Abe(this.model,e=>Vbe(e.code),{submission:{action:async()=>{await this.send()},onInvalid:()=>this.fail(`Enter the code from the terminal.`)}});codeInput=Ov(`codeInput`);constructor(){T(()=>{let e=this.client();Z(()=>void e.requestAuthCode().catch(()=>{}))}),Sd(()=>this.codeInput()?.nativeElement.focus())}async send(){let e=this.model().code.replace(/\s+/g,``);if(!/^\d{6}$/.test(e)){this.fail(`Enter the 6-digit code from the terminal.`);return}this.busy.set(!0),this.notice.set(``);try{await this.client().requestTrustWithCode(e)?this.error.set(``):this.fail(`That code didn't match. Check the terminal and try again.`)}catch{this.fail(`Can't reach the devtools server. Check that the dev server is running.`)}finally{this.busy.set(!1)}}async newCode(){this.busy.set(!0);try{await this.client().requestAuthCode({reissue:!0}),this.error.set(``),this.model.set({code:``}),this.notice.set(`A new code was printed in the terminal.`)}catch{this.notice.set(`Couldn't ask for a new code. Try again.`)}finally{this.busy.set(!1),this.codeInput()?.nativeElement.focus()}}fail(e){this.error.update(t=>t===e?`${e} `:e),this.codeInput()?.nativeElement.focus()}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-auth-code`]],viewQuery:function(e,t){e&1&&Ug(t.codeInput,axe,5),e&2&&Wg()},inputs:{client:[1,`client`]},decls:24,vars:10,consts:[[`codeInput`,``],[`aria-labelledby`,`auth-code-title`,1,`pairing`],[`id`,`auth-code-title`],[3,`formRoot`],[`for`,`auth-code-input`],[1,`row`],[`id`,`auth-code-input`,`autocomplete`,`one-time-code`,`inputmode`,`numeric`,`spellcheck`,`false`,3,`formField`],[`type`,`submit`,1,`primary`,3,`disabled`],[`id`,`auth-code-error`,`role`,`alert`,1,`error`],[1,`more`],[`type`,`button`,3,`click`,`disabled`],[`role`,`status`,1,`notice`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`sr-only`]],template:function(e,t){e&1&&(P(0,`section`,1)(1,`h2`,2),G(2,`Enter the one-time code`),F(),P(3,`p`),G(4,` The devtools server asks for a one-time code before it shares data from your app. Find the 6-digit code in the terminal that runs the dev server. `),F(),P(5,`form`,3)(6,`label`,4),G(7,`One-time code`),F(),P(8,`div`,5),I(9,`input`,6,0),Rp(),P(11,`button`,7),G(12),F()()(),P(13,`p`,8),G(14),F(),P(15,`div`,9)(16,`button`,10),V(`click`,function(){return t.newCode()}),G(17,`Print a new code`),F(),P(18,`p`,11),G(19),F()(),P(20,`a`,12),G(21,`About the one-time code`),P(22,`span`,13),G(23,` (opens in a new tab)`),F()()()),e&2&&(E(5),N(`formRoot`,t.codeForm),E(4),N(`formField`,t.codeForm.code),O(`aria-invalid`,t.error()?!0:null)(`aria-describedby`,t.error()?`auth-code-error`:null),Bp(),E(2),N(`disabled`,t.busy()),E(),q(` `,t.busy()?`Checking…`:`Connect`,` `),E(2),K(t.error()),E(2),N(`disabled`,t.busy()),E(3),K(t.notice()),E(),N(`href`,t.docsUrl,Fu))},dependencies:[rxe,ixe],styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+.pairing[_ngcontent-%COMP%] {
+  max-width: 60ch;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  line-height: 1.5;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0 0 6px;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+}
+
+p[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+}
+
+label[_ngcontent-%COMP%] {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--%NS%text-2);
+  font-weight: 500;
+}
+
+.row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+input[_ngcontent-%COMP%] {
+  flex: 1 1 10ch;
+  min-width: 0;
+  max-width: 16ch;
+  height: var(--%NS%control-h);
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text-strong);
+  font: inherit;
+  font-family: var(--%NS%font-mono);
+  letter-spacing: 0.08em;
+}
+input[_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+input[aria-invalid=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%danger);
+}
+
+button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+button[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+button[_ngcontent-%COMP%]:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+button.primary[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+  color: var(--%NS%accent-ink);
+}
+button.primary[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%accent-hover);
+  border-color: var(--%NS%accent-hover);
+}
+
+.error[_ngcontent-%COMP%] {
+  min-height: 0;
+  margin: 8px 0 0;
+  color: var(--%NS%danger-text);
+}
+.error[_ngcontent-%COMP%]:empty {
+  margin: 0;
+}
+
+.more[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin: 12px 0;
+}
+
+.notice[_ngcontent-%COMP%] {
+  margin: 0;
+  color: var(--%NS%text-2);
+}
+
+a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  border-radius: 2px;
+}
+a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},cxe=`https://pangular-inspector.dev/getting-started/troubleshooting/#the-panel-says-disconnected`,lxe=class e{retry=xv();docsUrl=cxe;static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-connection-error`]],outputs:{retry:`retry`},decls:10,vars:1,consts:[[`role`,`alert`,1,`connection-error`],[1,`connection-actions`],[`type`,`button`,3,`click`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`sr-only`]],template:function(e,t){e&1&&(L(0,`div`,0)(1,`p`),G(2,` Can't reach the devtools server. Check that the dev server is running. The panel keeps trying to connect. `),R(),L(3,`div`,1)(4,`button`,2),H(`click`,function(){return t.retry.emit()}),G(5,`Retry now`),R(),L(6,`a`,3),G(7,`Troubleshooting`),L(8,`span`,4),G(9,` (opens in a new tab)`),R()()()()),e&2&&(E(6),B(`href`,t.docsUrl,Fu))},styles:[`.connection-error[_ngcontent-%COMP%] {
+  max-width: 60ch;
+  margin: 0;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--%NS%danger) 36%, transparent);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+}
+.connection-error[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+}
+.connection-error[_ngcontent-%COMP%]   .connection-actions[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+}
+.connection-error[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+.connection-error[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+.connection-error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 14px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+.connection-error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+  border-color: var(--%NS%accent-line);
+}
+.connection-error[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},uxe={dark:{ngrx:{accent:`#d770e8`,text:`#f0abfc`},analog:{accent:`#ff5470`,text:`#fda4af`},"angular-native":{accent:`#ff4d6d`,text:`#fda4af`},nativescript:{accent:`#8196ff`,text:`#a5b4fc`},capacitor:{accent:`#53b9ff`,text:`#7dd3fc`}},light:{ngrx:{accent:`#a21caf`,text:`#701a75`},analog:{accent:`#be123c`,text:`#881337`},"angular-native":{accent:`#be123c`,text:`#881337`},nativescript:{accent:`#3448c5`,text:`#3730a3`},capacitor:{accent:`#0369a1`,text:`#0c4a6e`}}};function dxe(e,t){let n=uxe[t];return e&&n[e]||null}var fxe=[`toggle`];function pxe(e,t){e&1&&G(0,` Waiting for the devtools server. `)}function mxe(e,t){e&1&&G(0,` Loading the current setting. `)}function hxe(e,t){e&1&&G(0,` This is a saved report, so there is no page to change. The switch works with a running dev server. `)}function gxe(e,t){e&1&&(G(0,` This devtools server can't change it from the panel. Set `),L(1,`code`),G(2),R(),G(3,` in the devtools config. `)),e&2&&(E(2),J(`agent: `,`{`,` browserTools: true `,`}`))}function _xe(e,t){e&1&&k(0,hxe,1,0)(1,gxe,4,2),e&2&&A(+!U().staticReport())}function vxe(e,t){e&1&&G(0,` The devtools server didn't answer. `)}function yxe(e,t){if(e&1&&(G(0,` Applies right away to every page connected to this dev server, with no reload. It lasts until the server restarts, then `),L(1,`code`),G(2,`agent.browserTools`),R(),G(3)),e&2){let e=U();E(3),q(` in the devtools config decides again (`,e.configLabel(),`). `)}}function bxe(e,t){if(e&1){let e=z();L(0,`div`,8)(1,`span`),G(2),R(),L(3,`button`,10),H(`click`,function(){return x(e),S(U().retry())}),G(4,`Retry`),R()()}e&2&&(E(2),K(t))}function K9(e){if(!e||typeof e!=`object`)return null;let{enabled:t,config:n}=e;return typeof t==`boolean`?{enabled:t,config:n===!0}:null}var xxe=class e{rpc=$(null);state=w(null);status=w(`connecting`);saving=w(!1);error=w(``);announcement=w(``);staticReport=X(()=>cT(this.rpc()));enabled=X(()=>this.state()?.enabled??!1);canChange=X(()=>this.status()===`ready`&&!this.staticReport());configLabel=X(()=>this.state()?.config?`on in this project`:`off in this project`);toggle=Ov(`toggle`);destroyRef=b(Os);unsubscribe=null;attached=null;pending=null;constructor(){T(()=>{let e=this.rpc();e&&e!==this.attached&&this.load(e)}),this.destroyRef.onDestroy(()=>this.unsubscribe?.())}async set(e){let t=this.rpc();if(!t||!this.canChange()||this.saving()){this.syncBox();return}this.saving.set(!0),this.error.set(``);try{let n=K9(await oT(t,`set-browser-tools`,{enabled:e}));if(!n)throw Error(`no answer`);this.pending=null,this.state.set(n),this.say(n.enabled?`Browser agent tools on. Connected pages register them.`:`Browser agent tools off. Connected pages unregister them.`)}catch{this.pending=e,this.error.set(`Couldn't turn the browser agent tools ${e?`on`:`off`}. Check that the dev server is running.`)}finally{this.saving.set(!1),this.syncBox()}}retry(){let e=this.rpc();if(e){if(this.status()===`ready`&&this.pending!==null){this.set(this.pending);return}this.error.set(``),this.load(e)}}async load(e){this.attached=e,this.pending=null,this.status.set(`loading`),this.error.set(``),this.unsubscribe?.(),this.unsubscribe=null;try{let t=await e.scope(`pangular`).rpc.sharedState(`browser-tools`);if(this.destroyRef.destroyed||this.attached!==e)return;let n=t=>{let n=K9(t);this.state.set(n),this.status.set(n&&!cT(e)?`ready`:`unsupported`)};n(t.value()),this.unsubscribe=t.on(`updated`,n)}catch{if(this.attached!==e)return;this.status.set(`failed`),this.error.set(`Couldn't read the browser agent tools setting.`)}}syncBox(){let e=this.toggle()?.nativeElement;e&&(e.checked=this.enabled())}say(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-browser-tools-setting`]],viewQuery:function(e,t){e&1&&Ug(t.toggle,fxe,5),e&2&&Wg()},inputs:{rpc:[1,`rpc`]},decls:20,vars:7,consts:[[`toggle`,``],[`id`,`settings-browser-agents`],[`id`,`settings-browser-agents-hint`,1,`hint`],[1,`switch-row`],[`type`,`checkbox`,`role`,`switch`,`aria-describedby`,`settings-browser-agents-hint settings-browser-agents-status`,1,`switch`,3,`change`,`checked`,`disabled`],[1,`switch-label`],[`aria-hidden`,`true`,1,`state`],[`id`,`settings-browser-agents-status`,1,`hint`],[`role`,`alert`,1,`error`],[`role`,`status`,1,`sr-only`],[`type`,`button`,1,`action`,3,`click`]],template:function(e,t){if(e&1&&(L(0,`h2`,1),G(1,`Browser agents`),R(),L(2,`p`,2),G(3,` Registers the read-only agent tools on your app's page, so an agent that drives the browser finds them through WebMCP or Chrome DevTools for agents. Any script on the page can call them, so leave this off if the page loads scripts you don't trust. `),R(),L(4,`label`,3)(5,`input`,4,0),H(`change`,function(e){return t.set(e.target.checked)}),R(),L(7,`span`,5),G(8,`Browser agent tools`),R(),L(9,`span`,6),G(10),R()(),L(11,`p`,7),k(12,pxe,1,0)(13,mxe,1,0)(14,_xe,2,1)(15,vxe,1,0)(16,yxe,4,1),R(),k(17,bxe,5,1,`div`,8),L(18,`p`,9),G(19),R()),e&2){let e,n;E(5),B(`checked`,t.enabled())(`disabled`,!t.canChange()),O(`aria-busy`,t.saving()?`true`:null),E(5),K(t.enabled()?`On`:`Off`),E(2),A((e=t.status())===`connecting`?12:e===`loading`?13:e===`unsupported`?14:e===`failed`?15:16),E(5),A((n=t.error())?17:-1,n),E(2),K(t.announcement())}},styles:[`[_nghost-%COMP%] {
+  display: block;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 8px 0 12px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.switch-row[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: var(--%NS%control-h);
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+.switch-row[_ngcontent-%COMP%]:has(.switch:disabled) {
+  cursor: default;
+}
+
+.switch-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.state[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+.switch[_ngcontent-%COMP%] {
+  position: relative;
+  flex: none;
+  width: 36px;
+  height: 20px;
+  margin: 0;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 999px;
+  background: var(--%NS%surface-3);
+  appearance: none;
+  cursor: inherit;
+  transition: background-color 150ms var(--%NS%ease), border-color 150ms var(--%NS%ease);
+}
+.switch[_ngcontent-%COMP%]::before {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--%NS%text-2);
+  content: "";
+  transition: transform 150ms var(--%NS%ease), background-color 150ms var(--%NS%ease);
+}
+.switch[_ngcontent-%COMP%]:checked {
+  border-color: var(--%NS%accent);
+  background: var(--%NS%accent);
+}
+.switch[_ngcontent-%COMP%]:checked::before {
+  background: var(--%NS%accent-ink);
+  transform: translateX(16px);
+}
+.switch[_ngcontent-%COMP%]:disabled {
+  opacity: 0.6;
+}
+.switch[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .switch[_ngcontent-%COMP%] {
+    transition: none;
+  }
+  .switch[_ngcontent-%COMP%]::before {
+    transition: none;
+  }
+}
+
+.error[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  border: 1px solid color-mix(in srgb, var(--%NS%danger) 30%, transparent);
+  border-radius: var(--%NS%radius-sm);
+  background: color-mix(in srgb, var(--%NS%danger) 12%, transparent);
+  color: var(--%NS%danger-text);
+  font-size: 13px;
+}
+
+.action[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+.action[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-3);
+}
+.action[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}`]})},Sxe=(e,t)=>t.value,Cxe=(e,t)=>t.id;function wxe(e,t){if(e&1){let e=z();P(0,`label`,27)(1,`input`,28),V(`change`,function(){let t=x(e).$implicit;return S(U().theme.set(t.value))}),F(),P(2,`span`,29),G(3),F(),P(4,`span`,30),G(5),F()()}if(e&2){let e=t.$implicit,n=U();W(`checked`,n.theme()===e.value),E(),N(`value`,e.value)(`checked`,n.theme()===e.value),E(2),K(e.label),E(2),K(e.hint)}}function Txe(e,t){e&1&&(P(0,`span`,34),G(1,`Pinned`),F())}function Exe(e,t){if(e&1){let e=z();P(0,`li`,31),V(`keydown`,function(t){let n=x(e).$implicit;return S(U().onRowKey(t,n.id))}),I(1,`app-tab-icon`,32),P(2,`span`,33),G(3),k(4,Txe,2,0,`span`,34),F(),P(5,`button`,35),V(`click`,function(){let t=x(e).$implicit;return S(U().togglePinned(t.id))}),G(6,` Pin `),F(),P(7,`label`,36)(8,`input`,37),V(`change`,function(t){let n=x(e).$implicit;return S(U().setShown(n.id,t.target.checked))}),F(),P(9,`span`),G(10,`Shown`),F()(),P(11,`span`,38)(12,`button`,39),V(`click`,function(){let t=x(e).$implicit;return S(U().move(t.id,-1))}),C(),P(13,`svg`,40),I(14,`path`,41),F()(),ys(),P(15,`button`,42),V(`click`,function(){let t=x(e).$implicit;return S(U().move(t.id,1))}),C(),P(16,`svg`,40),I(17,`path`,43),F()()()()}if(e&2){let e=t.$implicit,n=U();W(`hidden-tab`,n.isHidden(e.id)),O(`data-tab`,e.id),E(),N(`name`,e.id),E(2),q(` `,e.label,` `),E(),A(n.isPinned(e.id)?4:-1),E(),O(`aria-pressed`,n.isPinned(e.id))(`aria-label`,`Pin `+e.label),E(3),N(`checked`,!n.isHidden(e.id)),O(`aria-label`,e.label+` shown in the tab bar`),E(4),N(`disabled`,!n.canMove(e.id,-1)),O(`aria-label`,`Move `+e.label+` up`),E(3),N(`disabled`,!n.canMove(e.id,1)),O(`aria-label`,`Move `+e.label+` down`)}}function Dxe(e,t){e&1&&(G(0,` Press `),P(1,`kbd`),G(2),F(),G(3,` on your app's page to open or close the panel. The button shows while the panel is open. The popup on the page saves this setting. `)),e&2&&(E(2),K(t))}function Oxe(e,t){e&1&&(G(0,` The popup shortcut is turned off in the devtools config (`),P(1,`code`),G(2,`popup.hotkey`),F(),G(3,`), so the button always shows. `))}function kxe(e,t){e&1&&(P(0,`kbd`),G(1),F()),e&2&&(E(),K(t))}function Axe(e,t){e&1&&G(0,` Off `)}var jxe=[{value:`system`,label:`System`,hint:`Follows the hub, or your system without it`},{value:`light`,label:`Light`,hint:`Always light`},{value:`dark`,label:`Dark`,hint:`Always dark`}],Mxe=class e{tabs=$([]);layout=Ev(H5);theme=Ev(`system`);passive=Ev(!1);pill=Ev(!1);hotkey=$(!1);paletteShortcut=$(`Ctrl+K`);rpc=$(null);themes=jxe;announcement=w(``);host=b(Rl);injector=b(Es);ids=X(()=>this.tabs().map(e=>e.id));orderedTabs=X(()=>{let e=new Map(this.tabs().map(e=>[e.id,e]));return K5(this.ids(),this.layout()).map(t=>e.get(t))});isDefaultLayout=X(()=>{let{order:e,hidden:t,pinned:n}=this.layout(),r=K5(this.ids(),this.layout());return!t.length&&!n.length&&(!e.length||r.every((e,t)=>e===this.ids()[t]))});isPinned(e){return this.layout().pinned.includes(e)}isHidden(e){return this.layout().hidden.includes(e)&&!this.isPinned(e)}canMove(e,t){return q5(this.ids(),this.layout(),e,t)!==this.layout()}move(e,t){let n=q5(this.ids(),this.layout(),e,t);if(n===this.layout())return;this.layout.set(n);let r=K5(this.ids(),n),i=this.label(e);this.say(`${i} moved to position ${r.indexOf(e)+1} of ${r.length}.`),Sd(()=>{let n=[...this.host.nativeElement.querySelectorAll(`.tab-row`)].find(t=>t.dataset.tab===e),r=n?.querySelector(`[data-move="${t<0?`up`:`down`}"]`),i=n?.querySelector(`[data-move="${t<0?`down`:`up`}"]`);(r&&!r.disabled?r:i)?.focus()},{injector:this.injector})}onRowKey(e,t){!e.altKey||e.key!==`ArrowUp`&&e.key!==`ArrowDown`||(e.preventDefault(),this.move(t,e.key===`ArrowUp`?-1:1))}togglePinned(e){let t=!this.isPinned(e);this.layout.set(Xve(this.ids(),this.layout(),e,t)),this.say(t?`${this.label(e)} pinned.`:`${this.label(e)} unpinned.`)}setShown(e,t){this.layout.set(Yve(this.layout(),e,!t)),this.say(t?`${this.label(e)} shown.`:`${this.label(e)} hidden.`)}resetTabs(){this.layout.set(H5),this.say(`Tabs reset to the default order.`)}label(e){return this.tabs().find(t=>t.id===e)?.label??e}say(e){this.announcement.update(t=>t===e?`${e} `:e)}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-settings`]],inputs:{tabs:[1,`tabs`],layout:[1,`layout`],theme:[1,`theme`],passive:[1,`passive`],pill:[1,`pill`],hotkey:[1,`hotkey`],paletteShortcut:[1,`paletteShortcut`],rpc:[1,`rpc`]},outputs:{layout:`layoutChange`,theme:`themeChange`,passive:`passiveChange`,pill:`pillChange`},decls:73,vars:9,consts:[[1,`intro`],[`aria-labelledby`,`settings-theme`,1,`card`],[`id`,`settings-theme`],[`role`,`radiogroup`,`aria-labelledby`,`settings-theme`,1,`themes`],[1,`theme`,3,`checked`],[`aria-labelledby`,`settings-tabs`,1,`card`],[1,`card-head`],[`id`,`settings-tabs`],[`type`,`button`,1,`action`,3,`click`,`disabled`],[`id`,`settings-tabs-hint`,1,`hint`],[`aria-labelledby`,`settings-tabs`,`aria-describedby`,`settings-tabs-hint`,1,`tab-list`],[1,`tab-row`,3,`hidden-tab`],[`aria-labelledby`,`settings-popup`,1,`card`],[`id`,`settings-popup`],[1,`check`,`wide`],[`type`,`checkbox`,`aria-describedby`,`settings-passive-hint`,3,`change`,`checked`,`disabled`],[`id`,`settings-passive-hint`,1,`hint`],[`type`,`checkbox`,`aria-describedby`,`settings-pill-hint`,3,`change`,`checked`],[`id`,`settings-pill-hint`,1,`hint`],[`aria-labelledby`,`settings-browser-agents`,1,`card`],[3,`rpc`],[`aria-labelledby`,`settings-keys`,1,`card`],[`id`,`settings-keys`],[1,`keys`],[1,`sr-only`],[`scope`,`col`],[`role`,`status`,1,`sr-only`],[1,`theme`],[`type`,`radio`,`name`,`settings-theme`,3,`change`,`value`,`checked`],[1,`theme-label`],[1,`hint`],[1,`tab-row`,3,`keydown`],[3,`name`],[1,`tab-label`],[1,`tag`],[`type`,`button`,1,`action`,`small`,3,`click`],[1,`check`],[`type`,`checkbox`,3,`change`,`checked`],[1,`moves`],[`type`,`button`,`data-move`,`up`,1,`icon`,3,`click`,`disabled`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`m6 15 6-6 6 6`],[`type`,`button`,`data-move`,`down`,1,`icon`,3,`click`,`disabled`],[`d`,`m6 9 6 6 6-6`]],template:function(e,t){if(e&1&&(P(0,`p`,0),G(1,` Settings for this panel in this browser. They are saved in the browser's local storage, so every panel on this address uses them. Browser agents is the exception: the dev server keeps it for every page and panel. `),F(),P(2,`section`,1)(3,`h2`,2),G(4,`Theme`),F(),P(5,`div`,3),j(6,wxe,6,6,`label`,4,Sxe),F()(),P(8,`section`,5)(9,`div`,6)(10,`h2`,7),G(11,`Tabs`),F(),P(12,`button`,8),V(`click`,function(){return t.resetTabs()}),G(13,` Reset tabs `),F()(),P(14,`p`,9),G(15,` Pinned tabs come first in the tab bar. Hidden tabs stay reachable from the command palette and from links. Use the arrow buttons, or `),P(16,`kbd`),G(17,`Alt`),F(),G(18,` with `),P(19,`kbd`),G(20,`↑`),F(),G(21,` and `),P(22,`kbd`),G(23,`↓`),F(),G(24,` on a row, to change the order. `),F(),P(25,`ol`,10),j(26,Exe,18,14,`li`,11,Cxe),F()(),P(28,`section`,12)(29,`h2`,13),G(30,`Popup on the page`),F(),P(31,`label`,14)(32,`input`,15),V(`change`,function(e){return t.passive.set(e.target.checked)}),F(),P(33,`span`),G(34,`Passive mode: hide the floating button until the shortcut is pressed`),F()(),P(35,`p`,16),k(36,Dxe,4,1)(37,Oxe,4,0),F(),P(38,`label`,14)(39,`input`,17),V(`change`,function(e){return t.pill.set(e.target.checked)}),F(),P(40,`span`),G(41,`Counts launcher: show render and error counts on the floating button`),F()(),P(42,`p`,18),G(43,` While the panel is closed, the button becomes a pill with the number of component renders and errors on the page since it loaded. Off by default. The popup on the page saves this setting. `),F()(),P(44,`section`,19),I(45,`app-browser-tools-setting`,20),F(),P(46,`section`,21)(47,`h2`,22),G(48,`Keyboard shortcuts`),F(),P(49,`table`,23)(50,`caption`,24),G(51,` Keyboard shortcuts `),F(),P(52,`thead`)(53,`tr`)(54,`th`,25),G(55,`Shortcut`),F(),P(56,`th`,25),G(57,`Action`),F()()(),P(58,`tbody`)(59,`tr`)(60,`td`)(61,`kbd`),G(62),F()(),P(63,`td`),G(64,`Open the command palette in the panel`),F()(),P(65,`tr`)(66,`td`),k(67,kxe,2,1,`kbd`)(68,Axe,1,0),F(),P(69,`td`),G(70,`Open or close the popup on your app's page`),F()()()()(),P(71,`p`,26),G(72),F()),e&2){let e,n;E(6),M(t.themes),E(6),N(`disabled`,t.isDefaultLayout()),E(14),M(t.orderedTabs()),E(6),N(`checked`,t.passive())(`disabled`,t.hotkey()===!1),E(4),A((e=t.hotkey())?36:37,e),E(3),N(`checked`,t.pill()),E(6),N(`rpc`,t.rpc()),E(17),K(t.paletteShortcut()),E(5),A((n=t.hotkey())?67:68,n),E(5),K(t.announcement())}},dependencies:[xxe,QT],styles:[`[_nghost-%COMP%] {
+  display: block;
+  max-width: 760px;
+}
+
+.intro[_ngcontent-%COMP%] {
+  max-width: 720px;
+  margin: 0 0 16px;
+  color: var(--%NS%text-2);
+  line-height: 1.5;
+}
+
+.card[_ngcontent-%COMP%] {
+  margin: 0 0 16px;
+  padding: 16px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+}
+
+.card-head[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+h2[_ngcontent-%COMP%] {
+  margin: 0 0 10px;
+  color: var(--%NS%text-strong);
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.card-head[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {
+  margin: 0;
+}
+
+.hint[_ngcontent-%COMP%] {
+  margin: 8px 0 12px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.themes[_ngcontent-%COMP%] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+}
+
+.theme[_ngcontent-%COMP%] {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 2px 8px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  cursor: pointer;
+}
+.theme[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {
+  grid-column: 2;
+  margin: 0;
+}
+.theme.checked[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+}
+.theme[_ngcontent-%COMP%]:has(input:focus-visible) {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.theme[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+
+.theme-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-strong);
+  font-weight: 600;
+}
+
+.tab-list[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius-sm);
+}
+
+.tab-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  min-height: 44px;
+  padding: 4px 8px 4px 12px;
+  color: var(--%NS%text);
+}
+.tab-row[_ngcontent-%COMP%]    + .tab-row[_ngcontent-%COMP%] {
+  border-top: 1px solid var(--%NS%border);
+}
+.tab-row[_ngcontent-%COMP%]   app-tab-icon[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+}
+
+.tab-row.hidden-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+.tab-label[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex: 1 1 120px;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.tag[_ngcontent-%COMP%] {
+  padding: 1px 8px;
+  border: 1px solid;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  border-color: color-mix(in srgb, var(--%NS%accent) 30%, transparent);
+  background: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  color: var(--%NS%accent-text);
+}
+
+.action[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  height: var(--%NS%control-h);
+  padding: 0 12px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+.action.small[_ngcontent-%COMP%] {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+.action[aria-pressed=true][_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+.action[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+}
+.action[_ngcontent-%COMP%]:disabled {
+  color: var(--%NS%text-3);
+  cursor: default;
+}
+.action[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.check[_ngcontent-%COMP%] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+  cursor: pointer;
+}
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {
+  margin: 0;
+  accent-color: var(--%NS%accent);
+}
+.check[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+.check.wide[_ngcontent-%COMP%] {
+  color: var(--%NS%text);
+  font-size: 13px;
+}
+
+.moves[_ngcontent-%COMP%] {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.icon[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+.icon[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+}
+.icon[_ngcontent-%COMP%]:hover:not(:disabled) {
+  background: var(--%NS%surface-3);
+}
+.icon[_ngcontent-%COMP%]:disabled {
+  color: var(--%NS%text-3);
+  opacity: 0.6;
+  cursor: default;
+}
+.icon[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+kbd[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 4px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+}
+
+code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+.keys[_ngcontent-%COMP%] {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.keys[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {
+  padding: 6px 8px;
+  text-align: left;
+  color: var(--%NS%text-3);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.keys[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {
+  padding: 8px;
+  border-top: 1px solid var(--%NS%border);
+  color: var(--%NS%text);
+}`]})};function q9(e,t){let n=e.toLowerCase(),r=t.toLowerCase().replace(/\s+/g,``);if(!r)return 0;let i=0,a=0,o=-2;for(let e of r){let t=n.indexOf(e,a);if(t<0)return-1;let r=t===0||/[\s:&/-]/.test(n[t-1]);i+=1,t===o+1&&(i+=3),r&&(i+=4),o=t,a=t+1}return i-n.length/100}function Nxe(e,t){let n=t.trim();return n?e.map((e,t)=>{let r=q9(e.title,n),i=q9(`${e.group} ${e.keywords??``}`,n);return{command:e,index:t,score:Math.max(r>=0?r+10:-1,i)}}).filter(e=>e.score>=0).sort((e,t)=>t.score-e.score||e.index-t.index).map(e=>e.command):[...e]}var Pxe=[`input`],Fxe=(e,t)=>t.id;function Ixe(e,t){if(e&1&&(L(0,`kbd`),G(1),R()),e&2){let e=U().$implicit;E(),K(e.shortcut)}}function Lxe(e,t){if(e&1){let e=z();L(0,`li`,14),H(`pointermove`,function(){let t=x(e).$index;return S(U(2).active.set(t))})(`click`,function(){let t=x(e).$implicit;return S(U(2).run(t))}),L(1,`span`,15),G(2),R(),k(3,Ixe,2,1,`kbd`),L(4,`span`,16),G(5),R()()}if(e&2){let e=t.$implicit,n=t.$index,r=U(2);W(`active`,n===r.active()),O(`id`,r.uid+`-opt-`+n)(`aria-selected`,n===r.active()),E(2),K(e.title),E(),A(e.shortcut?3:-1),E(2),K(e.group)}}function Rxe(e,t){if(e&1&&(L(0,`p`,11),G(1),R()),e&2){let e=U(2);E(),q(`No commands match “`,e.query().trim(),`”.`)}}function zxe(e,t){if(e&1){let e=z();L(0,`div`,1),H(`pointerdown`,function(){return x(e),S(U().close())}),R(),L(1,`div`,2),H(`keydown`,function(t){return x(e),S(U().onKey(t))}),L(2,`h2`,3),G(3,`Command palette`),R(),L(4,`div`,4),C(),L(5,`svg`,5),Sg(6,`circle`,6)(7,`path`,7),R(),ys(),L(8,`input`,8,0),H(`input`,function(t){return x(e),S(U().query.set(t.target.value))}),R()(),L(10,`ul`,9),H(`pointerdown`,function(e){return e.preventDefault()}),j(11,Lxe,6,7,`li`,10,Fxe),R(),k(13,Rxe,2,1,`p`,11),L(14,`p`,12)(15,`kbd`),G(16,`↑`),R(),L(17,`kbd`),G(18,`↓`),R(),G(19,` to move, `),L(20,`kbd`),G(21,`Enter`),R(),G(22,` to run, `),L(23,`kbd`),G(24,`Esc`),R(),G(25,` to close `),R(),L(26,`p`,13),G(27),R()()}if(e&2){let e=U();E(),O(`aria-labelledby`,e.uid+`-title`),E(),O(`id`,e.uid+`-title`),E(6),B(`value`,e.query()),O(`aria-controls`,e.uid+`-list`)(`aria-activedescendant`,e.activeId())(`aria-describedby`,e.uid+`-help`),E(2),B(`hidden`,!e.results().length),O(`id`,e.uid+`-list`),E(),M(e.results()),E(2),A(e.results().length?-1:13),E(),O(`id`,e.uid+`-help`),E(13),K(e.status())}}var Bxe=0,Vxe=class e{commands=$([]);open=Ev(!1);picked=xv();uid=`cp${Bxe++}`;query=w(``);results=X(()=>Nxe(this.commands(),this.query()));active=Q(()=>this.results().length?0:-1);activeId=X(()=>this.active()>=0?`${this.uid}-opt-${this.active()}`:null);status=X(()=>{let e=this.results().length;return e?`${e} ${e===1?`command`:`commands`}.`:`No commands match.`});input=Ov(`input`);injector=b(Es);returnFocus=null;constructor(){T(()=>{this.open()&&Z(()=>{let e=document.activeElement;this.returnFocus=e instanceof HTMLElement&&e!==document.body?e:null,this.query.set(``),Sd(()=>this.input()?.nativeElement.focus(),{injector:this.injector})})})}close(e){if(!this.open())return;this.open.set(!1);let t=this.returnFocus;this.returnFocus=null,Sd(()=>{t?.isConnected&&t.focus(),e?.()},{injector:this.injector})}run(e){this.close(()=>this.picked.emit(e.id))}onKey(e){let t=this.results().length;switch(e.key){case`ArrowDown`:case`ArrowUp`:{if(e.preventDefault(),!t)return;let n=e.key===`ArrowDown`?1:-1;this.active.set((this.active()+n+t)%t),this.reveal();return}case`PageDown`:case`PageUp`:if(e.preventDefault(),!t)return;this.active.set(e.key===`PageDown`?t-1:0),this.reveal();return;case`Enter`:{e.preventDefault();let t=this.results()[this.active()];t&&this.run(t);return}case`Escape`:e.preventDefault(),e.stopPropagation(),this.close();return;case`Tab`:e.preventDefault();return}}reveal(){Sd(()=>{let e=this.activeId();e&&document.getElementById(e)?.scrollIntoView?.({block:`nearest`})},{injector:this.injector})}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-command-palette`]],viewQuery:function(e,t){e&1&&Ug(t.input,Pxe,5),e&2&&Wg()},inputs:{commands:[1,`commands`],open:[1,`open`]},outputs:{open:`openChange`,picked:`picked`},decls:1,vars:1,consts:[[`input`,``],[`aria-hidden`,`true`,1,`backdrop`,3,`pointerdown`],[`role`,`dialog`,`aria-modal`,`true`,1,`palette`,3,`keydown`],[1,`sr-only`],[1,`field`],[`viewBox`,`0 0 24 24`,`aria-hidden`,`true`,1,`search-icon`],[`cx`,`11`,`cy`,`11`,`r`,`7`],[`d`,`m20 20-3.5-3.5`],[`type`,`text`,`role`,`combobox`,`aria-autocomplete`,`list`,`aria-expanded`,`true`,`autocomplete`,`off`,`spellcheck`,`false`,`placeholder`,`Type a command or a tab…`,`aria-label`,`Command`,3,`input`,`value`],[`role`,`listbox`,`aria-label`,`Commands`,1,`list`,3,`pointerdown`,`hidden`],[`role`,`option`,3,`active`],[1,`empty`],[1,`help`],[`role`,`status`,1,`sr-only`],[`role`,`option`,3,`pointermove`,`click`],[1,`title`],[1,`group`]],template:function(e,t){e&1&&k(0,zxe,28,11),e&2&&A(t.open()?0:-1)},styles:[`.backdrop[_ngcontent-%COMP%] {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: color-mix(in srgb, var(--%NS%bg) 55%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+.palette[_ngcontent-%COMP%] {
+  position: fixed;
+  top: min(12vh, 96px);
+  right: 0;
+  left: 0;
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  width: min(560px, 100vw - 32px);
+  max-height: min(70vh, 520px);
+  margin-inline: auto;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  animation: enter 0.18s var(--%NS%ease) both;
+}
+
+.field[_ngcontent-%COMP%] {
+  position: relative;
+  flex-shrink: 0;
+  padding: 10px;
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.search-icon[_ngcontent-%COMP%] {
+  position: absolute;
+  top: 50%;
+  left: 22px;
+  width: 16px;
+  height: 16px;
+  transform: translateY(-50%);
+  fill: none;
+  stroke: var(--%NS%text-3);
+  stroke-width: 2;
+  pointer-events: none;
+}
+
+input[_ngcontent-%COMP%] {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--%NS%control-h);
+  padding: 0 12px 0 36px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: var(--%NS%radius-sm);
+  background: var(--%NS%bg);
+  color: var(--%NS%text-strong);
+  font: inherit;
+  font-size: 14px;
+}
+input[_ngcontent-%COMP%]::placeholder {
+  color: var(--%NS%text-3);
+}
+input[_ngcontent-%COMP%]:focus {
+  outline: none;
+  border-color: var(--%NS%accent);
+  box-shadow: 0 0 0 3px var(--%NS%accent-soft);
+}
+
+.list[_ngcontent-%COMP%] {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 6px;
+  overflow-y: auto;
+  list-style: none;
+}
+.list[hidden][_ngcontent-%COMP%] {
+  display: none;
+}
+
+li[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: var(--%NS%control-h);
+  padding: 0 10px;
+  border-radius: var(--%NS%radius-sm);
+  color: var(--%NS%text);
+  cursor: pointer;
+}
+
+li.active[_ngcontent-%COMP%] {
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 2px 0 0 var(--%NS%accent);
+}
+
+.title[_ngcontent-%COMP%] {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.group[_ngcontent-%COMP%] {
+  flex-shrink: 0;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+kbd[_ngcontent-%COMP%] {
+  padding: 1px 6px;
+  border: 1px solid var(--%NS%border-strong);
+  border-radius: 4px;
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+  font-family: var(--%NS%font-mono);
+  font-size: 11px;
+}
+
+.empty[_ngcontent-%COMP%] {
+  margin: 0;
+  padding: 16px;
+  color: var(--%NS%text-2);
+}
+
+.help[_ngcontent-%COMP%] {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 8px 12px;
+  border-top: 1px solid var(--%NS%border);
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+
+@media (max-width: 480px) {
+  .group[_ngcontent-%COMP%], 
+   .help[_ngcontent-%COMP%] {
+    display: none;
+  }
+}`]})},Hxe=[`nav`],Uxe=[`main`],Wxe=e=>[e],Gxe=(e,t)=>t.id;function Kxe(e,t){e&1&&(C(),P(0,`svg`,4),I(1,`path`,31),F())}function qxe(e,t){e&1&&(C(),P(0,`svg`,4),I(1,`path`,32)(2,`path`,33)(3,`path`,34)(4,`path`,35)(5,`path`,36)(6,`path`,37),F())}function Jxe(e,t){e&1&&(C(),P(0,`svg`,5)(1,`defs`)(2,`linearGradient`,38),I(3,`stop`,39)(4,`stop`,40),F()(),I(5,`path`,41),P(6,`g`,42),I(7,`path`,43)(8,`path`,44)(9,`path`,45)(10,`path`,46),F()())}function Yxe(e,t){e&1&&(C(),P(0,`svg`,6),I(1,`path`,47)(2,`path`,48)(3,`path`,49)(4,`path`,50),F())}function Xxe(e,t){e&1&&(C(),P(0,`svg`,7),I(1,`path`,51),F())}function Zxe(e,t){e&1&&(C(),P(0,`svg`,8)(1,`defs`)(2,`linearGradient`,52),I(3,`stop`,53)(4,`stop`,54)(5,`stop`,55)(6,`stop`,56)(7,`stop`,57)(8,`stop`,58),F()(),I(9,`path`,59),F())}function Qxe(e,t){e&1&&(C(),P(0,`svg`,9),I(1,`rect`,60),P(2,`g`,61)(3,`defs`)(4,`mask`,62),I(5,`rect`,63),P(6,`g`,64),I(7,`path`,65)(8,`path`,66),F()(),P(9,`clipPath`,67),I(10,`rect`,68),F()(),P(11,`g`,69),I(12,`ellipse`,70),F(),P(13,`g`,71),I(14,`path`,72)(15,`path`,73),F(),P(16,`g`,69),I(17,`ellipse`,74)(18,`ellipse`,75),P(19,`g`,76),I(20,`line`,77)(21,`circle`,78)(22,`line`,79)(23,`circle`,80),F()()()())}function J9(e,t){if(e&1){let e=z();P(0,`button`,82),V(`click`,function(){let t=x(e).$implicit;return S(U(2).switchTab(t.id))}),I(1,`app-tab-icon`,83),P(2,`span`),G(3),F()()}if(e&2){let e=t.$implicit,n=U(2);W(`active`,n.tab()===e.id),O(`aria-current`,n.tab()===e.id?`page`:null)(`tabindex`,n.rovingTab()===e.id?0:-1),E(),N(`name`,e.id),E(2),K(e.label)}}function $xe(e,t){if(e&1&&(P(0,`div`,12),j(1,J9,4,6,`button`,81,Gxe),F()),e&2){let e=U();E(),M(e.tabs())}}function eSe(e,t){if(e&1){let e=z();P(0,`a`,84),V(`click`,function(t){let n=x(e);return S(U().openFullPanel(t,n.tab))}),C(),P(1,`svg`,85),I(2,`rect`,86)(3,`rect`,87)(4,`rect`,88)(5,`rect`,89),F(),G(6,` Open full panel `),F()}e&2&&N(`href`,t.href,Fu)}function tSe(e,t){if(e&1){let e=z();P(0,`app-settings`,90),V(`layoutChange`,function(t){return x(e),S(U().setTabLayout(t))})(`themeChange`,function(t){return x(e),S(U().setTheme(t))})(`passiveChange`,function(t){return x(e),S(U().setPassive(t))})(`pillChange`,function(t){return x(e),S(U().setPill(t))}),F()}if(e&2){let e=U();N(`tabs`,e.settingsTabs())(`layout`,e.tabLayout())(`theme`,e.themePreference())(`passive`,e.passive())(`pill`,e.pill())(`hotkey`,e.popupHotkey())(`paletteShortcut`,e.paletteShortcut)(`rpc`,e.rpc())}}function nSe(e,t){e&1&&I(0,`app-auth-code`,26),e&2&&N(`client`,t)}function rSe(e,t){if(e&1){let e=z();P(0,`app-connection-error`,91),V(`retry`,function(){return x(e),S(U().retryConnection())}),F()}}function iSe(e,t){e&1&&(P(0,`p`,27),G(1,`Connecting to the devtools server…`),F())}function aSe(e,t){e&1&&I(0,`app-coming-soon`,28),e&2&&N(`info`,t)}function oSe(e,t){e&1&&(P(0,`p`,27),G(1,`Looking for an Angular Native app…`),F())}function sSe(e,t){e&1&&(G(0,` To turn it on, set `),P(1,`code`),G(2),F(),G(3,` in the devtools options. `)),e&2&&(E(2),K(t))}function cSe(e,t){if(e&1&&(P(0,`p`,29),G(1,` This inspector is turned off in the devtools config (`),P(2,`code`),G(3,`inspectors`),F(),G(4,`). `),k(5,sSe,4,1),P(6,`a`,92),G(7,`About inspectors`),P(8,`span`,93),G(9,` (opens in a new tab)`),F()()()),e&2){let e,t=U();E(5),A((e=t.turnOnSnippet())?5:-1,e),E(),N(`href`,t.inspectorsDocsUrl,Fu)}}function lSe(e,t){if(e&1){let e=z();P(0,`app-dashboard`,101),V(`navigate`,function(t){return x(e),S(U(3).switchTab(t))}),F()}e&2&&N(`rpc`,U(3).rpc())}function uSe(e,t){if(e&1){let e=z();P(0,`app-timeline`,102),V(`open`,function(t){return x(e),S(U(3).openLink(t))}),F()}e&2&&N(`rpc`,U(3).rpc())}function dSe(e,t){if(e&1){let e=z();P(0,`app-audit-inspector`,103),V(`showComponent`,function(t){return x(e),S(U(3).showComponent(t))}),F()}if(e&2){let e=U(3);N(`rpc`,e.rpc())(`canShowComponent`,e.config().inspectors.components)}}function fSe(e,t){if(e&1){let e=z();P(0,`app-component-tree`,104),V(`focusHandled`,function(){return x(e),S(U(3).componentFocus.set(null))})(`commandHandled`,function(){return x(e),S(U(3).componentCommand.set(null))})(`showForm`,function(t){return x(e),S(U(3).showForm(t))})(`showInjector`,function(t){return x(e),S(U(3).showInjector(t))})(`showSignals`,function(t){return x(e),S(U(3).showSignals(t))})(`showPipe`,function(t){return x(e),S(U(3).showPipe(t))}),F()}if(e&2){let e=U(3);N(`rpc`,e.rpc())(`focus`,e.componentFocus())(`command`,e.componentCommand())(`canShowInjector`,e.config().inspectors.injectors)(`canShowSignals`,e.config().inspectors.signals)(`canShowPipes`,e.config().inspectors.pipes)}}function pSe(e,t){if(e&1){let e=z();P(0,`app-route-inspector`,105),V(`showComponent`,function(t){return x(e),S(U(3).showComponent(t))}),F()}e&2&&N(`rpc`,U(3).rpc())}function mSe(e,t){if(e&1&&I(0,`app-signal-inspector`,97),e&2){let e=U(3);N(`rpc`,e.rpc())(`focus`,e.signalFocus())}}function hSe(e,t){if(e&1){let e=z();P(0,`app-di-inspector`,106),V(`focusHandled`,function(){return x(e),S(U(3).injectorFocus.set(null))})(`showComponent`,function(t){return x(e),S(U(3).showComponent(t))}),F()}if(e&2){let e=U(3);N(`rpc`,e.rpc())(`focus`,e.injectorFocus())(`canShowComponent`,e.config().inspectors.components)}}function gSe(e,t){e&1&&I(0,`app-store-inspector`,94),e&2&&N(`rpc`,U(3).rpc())}function _Se(e,t){e&1&&I(0,`app-query-inspector`,94),e&2&&N(`rpc`,U(3).rpc())}function vSe(e,t){e&1&&I(0,`app-network-inspector`,94),e&2&&N(`rpc`,U(3).rpc())}function ySe(e,t){if(e&1){let e=z();P(0,`app-forms-inspector`,107),V(`focusHandled`,function(){return x(e),S(U(3).formFocus.set(null))}),F()}if(e&2){let e=U(3);N(`rpc`,e.rpc())(`focus`,e.formFocus())}}function bSe(e,t){if(e&1){let e=z();P(0,`app-pipes-inspector`,108),V(`focusHandled`,function(){return x(e),S(U(3).pipeFocus.set(null))}),F()}if(e&2){let e=U(3);N(`rpc`,e.rpc())(`focus`,e.pipeFocus())(`pageId`,e.pipePage())}}function xSe(e,t){e&1&&I(0,`app-analog-inspector`,94),e&2&&N(`rpc`,U(3).rpc())}function SSe(e,t){e&1&&I(0,`app-capacitor-inspector`,94),e&2&&N(`rpc`,U(3).rpc())}function CSe(e,t){e&1&&I(0,`app-plugins-inspector`,94),e&2&&N(`rpc`,U(3).rpc())}function wSe(e,t){if(e&1){let e=z();P(0,`app-performance-inspector`,103),V(`showComponent`,function(t){return x(e),S(U(3).showComponent(t))}),F()}if(e&2){let e=U(3);N(`rpc`,e.rpc())(`canShowComponent`,e.config().inspectors.components)}}function TSe(e,t){e&1&&I(0,`app-build-inspector`,94),e&2&&N(`rpc`,U(3).rpc())}function ESe(e,t){if(e&1){let e=z();P(0,`app-errors-inspector`,109),V(`showComponent`,function(t){return x(e),S(U(3).showComponent(t))}),F()}if(e&2){let e=U(3);N(`rpc`,e.rpc())(`canShowComponent`,e.config().inspectors.components)(`canExplainInjection`,e.config().inspectors.injectors)}}function DSe(e,t){if(e&1&&k(0,lSe,1,1,`app-dashboard`,94)(1,uSe,1,1,`app-timeline`,94)(2,dSe,1,2,`app-audit-inspector`,95)(3,fSe,1,6,`app-component-tree`,96)(4,pSe,1,1,`app-route-inspector`,94)(5,mSe,1,2,`app-signal-inspector`,97)(6,hSe,1,3,`app-di-inspector`,98)(7,gSe,1,1,`app-store-inspector`,94)(8,_Se,1,1,`app-query-inspector`,94)(9,vSe,1,1,`app-network-inspector`,94)(10,ySe,1,2,`app-forms-inspector`,97)(11,bSe,1,3,`app-pipes-inspector`,99)(12,xSe,1,1,`app-analog-inspector`,94)(13,SSe,1,1,`app-capacitor-inspector`,94)(14,CSe,1,1,`app-plugins-inspector`,94)(15,wSe,1,2,`app-performance-inspector`,95)(16,TSe,1,1,`app-build-inspector`,94)(17,ESe,1,3,`app-errors-inspector`,100),e&2){let e;A((e=U(2).tab())===`dashboard`?0:e===`timeline`?1:e===`audit`?2:e===`components`?3:e===`routes`?4:e===`signals`?5:e===`injectors`?6:e===`store`?7:e===`queries`?8:e===`network`?9:e===`forms`?10:e===`pipes`?11:e===`analog`?12:e===`capacitor`?13:e===`plugins`?14:e===`performance`?15:e===`build`?16:e===`errors`?17:-1)}}function OSe(e,t){e&1&&j(0,DSe,18,1,null,null,dg),e&2&&M(av(0,Wxe,U().scopeKey()))}var Y9=`all`,kSe=[Y9,...zC],ASe={angular:`Angular`,ngrx:`NgRx Store`,analog:`Analog`,"angular-native":`Angular Native`,nativescript:`NativeScript`,capacitor:`Capacitor`},X9={ngrx:`store`,analog:`analog`,capacitor:`capacitor`},Z9={store:`ngrx`,analog:`analog`,capacitor:`capacitor`},Q9={"angular-native":[`components`,`signals`,`injectors`,`store`,`queries`,`pipes`,`errors`]},jSe={id:`nativescript`,name:`NativeScript`,badge:`Available`,heading:`Inspect NativeScript apps`,summary:`A NativeScript Angular app reports from the simulator or device to this server, and its components, signals, injectors and NgRx stores show up in the Angular dock.`,color:`#3c5afd`,plansTitle:`Set up an app`,plans:[`Install @pangular-inspector/devtools and @valor/nativescript-websockets`,`Call initNativeScriptOverlay() in main.ts, before the app bootstraps`,`Run npx pangular dev --no-auth in the app, then open the Angular dock`],link:{label:`NativeScript setup guide`,href:`https://pangular-inspector.dev/getting-started/nativescript/`}},MSe={id:`capacitor`,name:`Capacitor`,badge:`Available`,heading:`Inspect Capacitor apps`,summary:`An Ionic or Capacitor app runs the browser overlay in its WebView and reports to this server, so it shows up in the Angular dock like a browser tab.`,color:`#119eff`,plansTitle:`Set up an app`,plans:[`With live reload on localhost, load @pangular-inspector/devtools/overlay as in a browser`,`In a bundled build, call initOverlay() from @pangular-inspector/devtools/overlay-manual with this server’s address and connectionMeta`,`Run the app, then come back here for its plugin calls, or open the Angular dock`],link:{label:`Capacitor setup guide`,href:`https://pangular-inspector.dev/guides/capacitor/`}},NSe={id:`analog`,name:`Analog`,badge:`Not in this app`,heading:`This app doesn’t use Analog`,summary:`In an Analog app this dock shows your file routes, server load() and API calls, render modes and route lint.`,color:`#dd0330`,plans:[`Which page, layout and .server.ts files render a URL`,`Every load(), server function and API call with timing`,`SSR, prerendered or client only, per page`],link:{label:`Get started with Analog`,href:`https://analogjs.org/docs/getting-started`}},PSe={id:`angular-native`,name:`Angular Native`,badge:`Not connected`,heading:`No Angular Native app is connected`,summary:`Start the overlay in your Angular Native app and run this server with --no-auth. The tabs fill as soon as the app reports.`,color:`#e11d48`,plans:[`The component tree, with the view outlined on the device`,`Signals and injectors of the running app`,`Live @ngrx/signals and @ngrx/store state`],link:{label:`Set up Angular Native`,href:`https://pangular-inspector.dev/getting-started/angular-native/`}},$9=[1e3,2e3,5e3,1e4];function FSe(){let e=new URLSearchParams(location.search).get(`view`);return zC.find(t=>t===e)??null}are(class e{analog=w(!1);allTabs=ew.map(({id:e,label:t})=>({id:e,label:t}));view=w(FSe());viewAccent=X(()=>dxe(this.view(),this.themeService.current()));title=X(()=>{let e=this.view();return e?ASe[e]:`Pangular Inspector`});mainLabel=X(()=>this.tab()===`settings`?`Settings`:this.availableTabs().find(e=>e.id===this.tab())?.label??this.title());analogKnown=w(!1);capacitorReporting=w(!1);pluginsReporting=w(!1);capacitorKnown=w(!1);nativePageId=w(null);nativeKnown=w(!1);scopeKey=X(()=>this.view()===`angular-native`?this.nativePageId()??``:``);comingSoon=X(()=>{let e=this.view();if(e===`analog`)return this.analogKnown()&&!this.analog()?NSe:void 0;if(e===`nativescript`)return jSe;if(e===`capacitor`)return this.config().inspectors.capacitor&&this.capacitorKnown()&&!this.capacitorReporting()?MSe:void 0;if(e===`angular-native`)return this.nativeKnown()&&!this.nativePageId()?PSe:void 0});config=X(()=>TT(this.rpc()));tabEnabled=MT;inspectorsDocsUrl=jT;turnOnSnippet=X(()=>{let e=AT(this.tab());return e?`inspectors: {${e}: true}`:null});availableTabs=X(()=>{if(this.comingSoon())return[];let e=this.view(),t=e?X9[e]:void 0,n=this.allTabs.filter(e=>MT(e.id,this.config()));if(t)return n.filter(e=>e.id===t);let r=e?Q9[e]:void 0;return r?n.filter(e=>r.includes(e.id)):n.filter(t=>(t.id!==`analog`||this.analog())&&(t.id!==`capacitor`||this.capacitorReporting())&&(t.id!==`plugins`||this.pluginsReporting())&&!(e===`angular`&&Z9[t.id]))});tabLayout=w(Hve());tabs=X(()=>{let e=this.tab(),t=Jve(this.availableTabs(),this.tabLayout(),e);return this.rpc()?t:t.filter(t=>t.id===`dashboard`||t.id===e)});settingsTabs=X(()=>this.availableTabs());rovingTab=X(()=>{let e=this.tabs(),t=this.tab();return e.some(e=>e.id===t)?t:e[0]?.id});onNavKey(e){let t=this.nav()?.nativeElement;if(!t||e.altKey||e.ctrlKey||e.metaKey)return;let n=[...t.querySelectorAll(`button`)],r=n.indexOf(document.activeElement);if(r<0)return;let i=n.length-1,a={ArrowRight:r===i?0:r+1,ArrowLeft:r===0?i:r-1,Home:0,End:i},o=Object.hasOwn(a,e.key)?a[e.key]:-1;o<0||(e.preventDefault(),n[o].focus())}fullPanelLink=X(()=>{let e=this.view();if(!e||location.protocol===`chrome-extension:`)return null;let t=this.comingSoon()?`dashboard`:X9[e]??this.tab();return{tab:t,href:oye(location.href,t)}});tab=Q(()=>{let e=this.view();return e&&(X9[e]??Q9[e]?.[0])||`dashboard`});rpc=w(null);openedDock=w(null);connected=w(!1);connectionFailed=w(!1);pairing=w(null);connectedNote=w(``);hiddenPages=w([]);pageId=tT();backgroundNote=X(()=>{let e=this.hiddenPages();return this.pageId?e.includes(this.pageId)?`Page in background, showing the last data.`:``:e.length?e.length===1?`A page is in the background, showing its last data.`:`${e.length} pages are in the background, showing their last data.`:``});stopVisibility=()=>{};stopNative=()=>{};stopCapacitor=()=>{};stopPlugins=()=>{};stopFollowing=()=>{};stopHighlights=()=>{};nav=Ov(`nav`);main=Ov(`main`);injector=b(Es);themeService=b(eye);navObserver;navFade=w({start:!1,end:!1});memory=b(Aq);stopScrollRestore=null;restoringScroll=!1;constructor(){b(rM).use(this.rpc),this.memory.useView(()=>this.tabScope()),Fv(()=>{let e=this.tab(),t=this.main()?.nativeElement;t&&this.rpc()&&Z(()=>{this.stopScrollRestore?.(),this.restoringScroll=!0,this.stopScrollRestore=Mq(t,this.memory.read(`${e}:scroll`)??0,void 0,()=>this.restoringScroll=!1)})}),Sd(()=>{let e=this.nav()?.nativeElement;e&&typeof ResizeObserver<`u`&&(this.navObserver=new ResizeObserver(()=>this.measureNav()),this.navObserver.observe(e))}),Fv(()=>{this.tab(),this.tabs(),Z(()=>{this.revealActiveTab(),this.measureNav()})}),T(()=>{this.connected()&&Z(()=>this.sendPill(this.pill()))}),T(()=>{let e=this.openedDock(),t=this.rpc();e&&t&&Z(()=>void sT(t,`hub-dock-seen`,BC(e.dock)))}),T(()=>{let e=this.themeService.current();Z(()=>{try{window.parent!==window&&B5(window.parent.document,e)}catch{}})})}measureNav(){let e=this.nav()?.nativeElement;if(!e)return;let t=e.scrollWidth-e.clientWidth,n=e.scrollLeft>1,r=t>1&&e.scrollLeft<t-1,i=this.navFade();(i.start!==n||i.end!==r)&&this.navFade.set({start:n,end:r})}revealActiveTab(){let e=this.nav()?.nativeElement,t=e?.querySelector(`button.active`);if(!e||!t||e.scrollWidth<=e.clientWidth)return;let n=t.offsetLeft-24,r=t.offsetLeft+t.offsetWidth+24-e.clientWidth;e.scrollLeft>n?e.scrollLeft=Math.max(0,n):e.scrollLeft<r&&(e.scrollLeft=r)}ngOnInit(){this.stopFollowing=e7(kSe,e=>{this.openedDock.set({dock:e}),e===Y9?this.showFullPanel():this.showView(e)});let e=i7(location.hash,a7(this.tabScope()),[...this.availableTabs().map(e=>e.id),`settings`]);e?(this.tab.set(e),this.restoreLinkItem()):!this.view()&&i7(location.hash,a7(this.tabScope()),[`capacitor`])===`capacitor`?this.restoreCapacitor=!0:!this.view()&&i7(location.hash,a7(this.tabScope()),[`analog`])===`analog`&&(this.restoreAnalog=!0),this.stopHighlights=lT(()=>this.rpc()),this.connect()}connecting=!1;pendingClient=null;retries=0;retryTimer;connect(){if(this.connecting||this.pendingClient||this.rpc()||this.pairing())return;this.connecting=!0,clearTimeout(this.retryTimer);let e=dye();this.dropped&&uT();let t=gye(e);LC({...e?{baseURL:e}:{},...t.token?{authToken:t.token}:{},cacheOptions:aT(),simpleAuth:!1}).then(e=>{if(this.connecting=!1,this.destroyed){e.close?.();return}this.pendingClient=e;let n=n=>{if(e===this.pendingClient||e===this.rpc()||e===this.pairing()){if(this.pendingClient===e&&n!==`connecting`&&(this.pendingClient=null),n===`connected`){let n=this.pairing()===e;this.pairing.set(null),setTimeout(()=>t.remember(e.connection?.authToken)),this.ready(e),this.connected.set(this.rpc()===e),n&&(this.connectedNote.update(e=>e===`Connected.`?`Connected.\xA0`:`Connected.`),this.focusCurrentTab())}else n===`unauthorized`?(this.connected.set(!1),this.rpc()===e&&this.rpc.set(null),this.pairing.set(e)):(n===`disconnected`||n===`error`)&&(this.connected.set(!1),this.rpc()===e&&this.rpc.set(null),this.pairing()===e&&this.pairing.set(null),e.close?.(),this.retryLater())}};e.events.on(`connection:status`,n),e.status!==`connecting`&&n(e.status)},()=>{this.connecting=!1,!this.destroyed&&(this.analogKnown.set(!0),this.nativeKnown.set(!0),this.retryLater())})}ready(e){this.rpc()===e||this.destroyed||(this.retries=0,this.connectionFailed.set(!1),this.refocusOnConnect&&this.focusCurrentTab(),this.refocusOnConnect=!1,this.rpc.set(e),this.listenForServer(e),this.watchVisibility(e),this.watchAngularNative(e),this.watchCapacitor(e),this.watchPlugins(e),e.scope(`pangular`).rpc.call(`analog-project`).then(e=>{let t=!!e?.analog;this.analog.set(t),this.analogKnown.set(!0),t&&this.restoreAnalog&&MT(`analog`,this.config())&&this.tab.set(`analog`),this.restoreAnalog=!1,!t&&this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)},()=>{this.analogKnown.set(!0),this.restoreAnalog=!1,this.tab()===`analog`&&!this.view()&&this.tab.set(`dashboard`)}))}dropped=!1;retryLater(){if(this.destroyed)return;this.dropped=!0,this.connectionFailed.set(!0);let e=$9[Math.min(this.retries++,$9.length-1)];clearTimeout(this.retryTimer),this.retryTimer=setTimeout(()=>this.connect(),e)}retryConnection(){this.retries=0,this.refocusOnConnect=!0,this.connect()}refocusOnConnect=!1;destroyed=!1;ngOnDestroy(){this.destroyed=!0,clearTimeout(this.retryTimer),this.stopNative(),this.stopCapacitor(),this.stopPlugins(),this.stopFollowing(),this.stopVisibility(),this.stopHighlights(),this.navObserver?.disconnect()}showView(e){if(e===this.view())return;eT(e===`angular-native`?this.nativePageId():null),this.view.set(e);let t=new URL(location.href);t.searchParams.set(`view`,e),t.hash=``,history.replaceState(history.state,``,t)}showFullPanel(e){if(!this.view())return;eT(null),this.view.set(null);let t=new URL(location.href);t.searchParams.delete(`view`),t.hash=e?`tab=${e}`:``,history.replaceState(history.state,``,t);let n=e??a7(this.tabScope()),r=this.availableTabs().map(e=>e.id),i=i7(t.hash,n,r);i?this.setTab(i):n===`capacitor`&&(this.restoreCapacitor=!0)}openFullPanel(e,t){sye(e)&&t7()&&(e.preventDefault(),this.showFullPanel(t),this.focusCurrentTab(),n7(Y9))}paletteOpen=w(!1);paletteShortcut=J5()?`⌘K`:`Ctrl+K`;themePreference=X(()=>this.themeService.preference());passive=w(Wve());pill=w(Kve());popupHotkey=X(()=>{let e=this.config().popup.hotkey;return e!==!1&&$C(e,J5())});popup=Zve();poppedOut=!!Y5();tabBeforeSettings=null;componentCommand=Q({source:this.tab,computation:()=>null});paletteCommands=X(()=>{let e=new Set(this.availableTabs().map(e=>e.id)),t=e.has(`components`)&&!!this.rpc();return cw(this.config()).filter(n=>n.id.startsWith(`tab:`)?e.has(n.id.slice(4)):n.id===`popout:return`?this.poppedOut:n.popupOnly?this.popup:n.id===`pick-component`||n.id.startsWith(`cd-`)?t:!0)});onGlobalKey(e){if(e.defaultPrevented)return;let t=J5(),n=this.config().popup.hotkey;if(this.popup&&n&&!e.repeat&&QC(e,n,t)){e.preventDefault(),this.postToPopup({type:`pangular:popup-close`});return}!(t?e.metaKey&&!e.ctrlKey:e.ctrlKey&&!e.metaKey)||e.altKey||e.shiftKey||e.key.toLowerCase()!==`k`||e.repeat||(e.preventDefault(),!this.paletteOpen()&&this.openPalette())}openPalette(){t7()&&aye()||this.paletteOpen.set(!0)}runCommand(e){if(e.startsWith(`tab:`)){let t=e.slice(4);this.availableTabs().some(e=>e.id===t)&&this.switchTab(t);return}if(e.startsWith(`theme:`)){let t=e.slice(6);(t===`system`||t===`light`||t===`dark`)&&this.setTheme(t);return}if(e===`dock:reset-size`){this.postToPopup({type:`pangular:popup-dock-size`});return}if(e.startsWith(`dock:`)){this.postToPopup({type:`pangular:popup-dock`,mode:e.slice(5)});return}if(e===`popout`){this.postToPopup({type:`pangular:popup-popout`});return}if(e===`popout:return`){$ve();return}let t={"pick-component":`pick`,"cd-record-start":`cd-start`,"cd-record-stop":`cd-stop`,"cd-clear":`cd-clear`};e===`settings`?this.tab()!==`settings`&&this.toggleSettings():t[e]&&this.availableTabs().some(e=>e.id===`components`)&&(this.tab()!==`components`&&this.switchTab(`components`),this.componentCommand.set({kind:t[e]}))}toggleSettings(){if(this.tab()===`settings`){let e=this.tabBeforeSettings,t=this.availableTabs().map(e=>e.id);this.switchTab(e&&t.includes(e)?e:t[0]??`dashboard`);return}this.tabBeforeSettings=this.tab(),this.switchTab(`settings`)}setTabLayout(e){this.tabLayout.set(e),Uve(e)}setTheme(e){this.themeService.setPreference(e)}setPassive(e){this.passive.set(e),Gve(e),this.postToPopup({type:`pangular:popup-passive`,passive:e})}setPill(e){this.pill.set(e),qve(e),this.sendPill(e)}sendPill(e){let t={type:`pangular:popup-pill`,pill:e};this.postToPopup(t),X5(t)}postToPopup(e){for(let{win:t,origin:n}of Q5())try{t.postMessage(e,n)}catch{}}openLink(e){let t=e.tab;if(!this.availableTabs().some(e=>e.id===t))return!1;if(this.tab()!==t&&this.switchTab(t),e.id&&Object.hasOwn(rw,t)){let n=e.page;t===`components`?this.componentFocus.set({id:e.id,pageId:n}):t===`injectors`?this.injectorFocus.set({componentId:e.id,pageId:n}):t===`signals`?this.signalFocus.set({componentId:e.id,pageId:n}):t===`forms`&&this.formFocus.set({id:e.id})}return history.replaceState(history.state,``,aw(e)),!0}followHash(){let e=ow(location.hash);if(e){if(e.tab===`settings`){this.tab()!==`settings`&&this.toggleSettings();return}this.openLink(e)}}listenForServer(e){let t=e.scope(`pangular`).rpc,n=()=>typeof document>`u`||document.visibilityState!==`hidden`;try{t.register({name:`panel-command`,type:`event`,jsonSerializable:!0,handler:e=>{let t=e?.command;typeof t==`string`&&n()&&this.runCommand(t)}}),t.register({name:`open-in-panel`,type:`event`,jsonSerializable:!0,handler:e=>{let t=e;n()&&typeof t?.tab==`string`&&this.openLink({tab:t.tab,...typeof t.id==`string`?{id:t.id}:{},...typeof t.page==`string`?{page:t.page}:{}})}})}catch{}}restoreLinkItem(){let e=ow(location.hash);if(!e?.id||e.tab!==this.tab())return;let t=e.tab;t===`components`?this.componentFocus.set({id:e.id,pageId:e.page}):t===`injectors`?this.injectorFocus.set({componentId:e.id,pageId:e.page}):t===`signals`?this.signalFocus.set({componentId:e.id,pageId:e.page}):t===`forms`&&this.formFocus.set({id:e.id})}formFocus=w(null);componentFocus=Q({source:this.tab,computation:()=>null});pipeFocus=Q({source:this.tab,computation:()=>null});pipePage=Q({source:this.tab,computation:()=>null});showPipe(e){this.config().inspectors.pipes&&(this.switchTab(`pipes`),this.pipeFocus.set(e.name),this.pipePage.set(e.pageId??null))}showForm(e){this.formFocus.set({id:e}),this.switchTab(`forms`)}injectorFocus=Q({source:this.tab,computation:()=>null});signalFocus=Q({source:this.tab,computation:()=>null});showSignals(e){if(!this.config().inspectors.signals)return;let t=e.pageId?{page:e.pageId}:{};this.openLink({tab:`signals`,id:e.componentId,...t})&&this.signalFocus.set(e)}showInjector(e){this.config().inspectors.injectors&&(this.switchTab(`injectors`),this.injectorFocus.set(e))}showComponent(e){this.config().inspectors.components&&(this.switchTab(`components`),this.componentFocus.set(e))}inspectFromPanel({source:e,origin:t,data:n}){if(e!==window.parent||t!==location.origin)return;let r=n;r?.type===`pangular:inspect-component`&&typeof r.id==`string`&&this.tab()===`components`&&this.config().inspectors.components&&this.componentFocus.set({id:r.id})}switchTab(e){let t=Z9[e];if(this.view()===`angular`&&t){this.activateDock(t,e);return}this.setTab(e),history.replaceState(history.state,``,`#tab=${e}`)}restoreAnalog=!1;restoreCapacitor=!1;setTab(e){this.restoreAnalog=!1,this.restoreCapacitor=!1,this.keepFocus(),this.tab.set(e),cye(this.tabScope(),e)}tabScope(){return this.view()??`panel`}rememberScroll(){if(this.restoringScroll)return;let e=this.main()?.nativeElement;e&&this.memory.write(`${this.tab()}:scroll`,Math.round(e.scrollTop))}async watchAngularNative(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`component-tree`),n=e=>{let t=e?.pages,n=KN(t,this.nativePageId());this.view()===`angular-native`&&eT(n),this.nativePageId.set(n),this.nativeKnown.set(!0)};n(t.value()),this.stopNative(),this.stopNative=t.on(`updated`,n)}catch{this.nativeKnown.set(!0)}}async watchPlugins(e){let t=!this.view()&&i7(location.hash,a7(this.tabScope()),[`plugins`])===`plugins`;try{let n=await e.scope(`pangular`).rpc.sharedState(`plugins`),r=e=>{if(e===void 0)return;let n=Xge(e);this.pluginsReporting.set(n),n&&t&&MT(`plugins`,this.config())&&this.tab.set(`plugins`),n&&(t=!1),!n&&this.tab()===`plugins`&&!this.view()&&this.tab.set(`dashboard`)};r(n.value()),this.stopPlugins(),this.stopPlugins=n.on(`updated`,r)}catch{this.pluginsReporting.set(!1)}}async watchCapacitor(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`capacitor`),n=e=>{if(e===void 0)return;let t=J8(e).length>0;this.capacitorReporting.set(t),this.capacitorKnown.set(!0),t&&this.restoreCapacitor&&MT(`capacitor`,this.config())&&(this.restoreCapacitor=!1,this.tab.set(`capacitor`)),!t&&this.tab()===`capacitor`&&!this.view()&&this.tab.set(`dashboard`)};n(t.value()),this.stopCapacitor(),this.stopCapacitor=t.on(`updated`,n)}catch{this.capacitorReporting.set(!1),this.capacitorKnown.set(!0)}}async watchVisibility(e){try{let t=await e.scope(`pangular`).rpc.sharedState(`page-visibility`),n=e=>{let t=e?.hidden;this.hiddenPages.set(Array.isArray(t)?t.filter(e=>typeof e==`string`):[])};n(t.value()),this.stopVisibility(),this.stopVisibility=t.on(`updated`,n)}catch{}}keepFocus(){let e=document.activeElement,t=this.main()?.nativeElement;(!e||e===document.body||t?.contains(e))&&this.focusCurrentTab()}focusCurrentTab(){Sd(()=>{let e=document.activeElement;e&&e!==document.body||(this.nav()?.nativeElement.querySelector(`button.active`)??this.main()?.nativeElement)?.focus()},{injector:this.injector})}async activateDock(e,t){if(await n7(e))return;if(window.parent===window){this.keepFocus(),this.showView(e);return}let n=this.rpc();if(!n?.call){this.setTab(t);return}try{await n.call(`hub:docks:activate`,{dockId:BC(e)}),this.keepFocus(),this.showView(e)}catch{this.setTab(t)}}static ɵfac=function(t){return new(t||e)};static ɵcmp=D({type:e,selectors:[[`app-root`]],viewQuery:function(e,t){e&1&&Ug(t.nav,Hxe,5)(t.main,Uxe,5),e&2&&Wg(2)},hostVars:4,hostBindings:function(e,t){e&1&&V(`message`,function(e){return t.inspectFromPanel(e)},Lu)(`hashchange`,function(){return t.followHash()},Lu)(`keydown`,function(e){return t.onGlobalKey(e)},Ru),e&2&&f_(`--%NS%accent`,t.viewAccent()?.accent??null)(`--%NS%accent-text`,t.viewAccent()?.text??null)},decls:41,vars:30,consts:[[`nav`,``],[`main`,``],[1,`brand`],[1,`mark`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 256 256`,`aria-hidden`,`true`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 32 32`,`aria-hidden`,`true`],[`width`,`24`,`height`,`17`,`viewBox`,`0 0 256 182`,`aria-hidden`,`true`],[`width`,`22`,`height`,`22`,`viewBox`,`0 0 24 24`,`fill`,`currentColor`,`aria-hidden`,`true`],[`width`,`20`,`height`,`22`,`viewBox`,`0 0 223 236`,`aria-hidden`,`true`],[`width`,`30`,`height`,`30`,`viewBox`,`0 0 500 500`,`aria-hidden`,`true`],[1,`title`],[`aria-label`,`Inspectors`,3,`scroll`,`keydown`],[`role`,`toolbar`,`aria-label`,`Inspectors`,`aria-orientation`,`horizontal`,1,`tab-bar`],[1,`full-panel`,3,`href`],[1,`shell-actions`],[`type`,`button`,`aria-haspopup`,`dialog`,1,`shell-btn`,3,`click`],[`width`,`16`,`height`,`16`,`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`d`,`M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z`],[`type`,`button`,`aria-label`,`Settings`,`title`,`Settings`,1,`shell-btn`,3,`click`],[`name`,`settings`],[`role`,`status`,1,`status`],[`aria-hidden`,`true`,1,`dot`],[`tabindex`,`0`,3,`scroll`],[`role`,`status`,1,`background-note`],[`role`,`status`,1,`sr-only`],[3,`tabs`,`layout`,`theme`,`passive`,`pill`,`hotkey`,`paletteShortcut`,`rpc`],[3,`client`],[`role`,`status`,1,`turned-off`],[3,`info`],[1,`turned-off`],[3,`openChange`,`picked`,`commands`,`open`],[`fill`,`#3c5afd`,`d`,`M237.248 18.752q18.061 18.06 18.748 45.247V192c-.457 18.12-6.707 33.207-18.748 45.247c-12.04 12.04-27.127 18.291-45.251 18.752H63.999q-27.187-.69-45.247-18.752C6.712 225.208.46 210.121 0 192.001V64q.69-27.187 18.752-45.247Q36.812.692 63.999 0h127.998c18.124.46 33.211 6.711 45.251 18.752m-17.655 103q-6.033-6.003-6.28-15.066V64q-.192-9.063-6.221-15.091c-4.02-4.023-9.054-6.093-15.095-6.22h-21.312v106.626L85.315 42.687H63.999c-6.042.128-11.072 2.198-15.091 6.221c-4.023 4.02-6.093 9.05-6.22 15.09v42.688q-.249 9.063-6.281 15.066q-6.03 5.996-15.091 6.246q9.062.255 15.09 6.25c4.024 4.002 6.115 9.024 6.281 15.066V192c.128 6.037 2.198 11.072 6.221 15.091q6.03 6.03 15.09 6.22h21.317V106.687l85.37 106.627h21.312c6.041-.128 11.076-2.202 15.095-6.221s6.093-9.054 6.22-15.09v-42.688q.249-9.063 6.281-15.066q6.03-5.995 15.091-6.25q-9.062-.25-15.09-6.246`],[`fill`,`#53b9ff`,`d`,`M39.863 54.115L.311 93.716l60.995 61.179L0 216.385l39.428 39.619l61.43-61.507l61.097 61.068l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m140.517 154.896l-39.658 39.601l61.097 61.069l39.552-39.602z`],[`fill-opacity`,`.2`,`d`,`m140.517 154.896l-39.658 39.601l15.267 15.182z`],[`fill`,`#53b9ff`,`d`,`M194.57 100.985L256 39.478L216.431 0l-61.412 61.384L93.917.311L54.365 39.913L216.01 201.761l39.552-39.602z`],[`fill`,`#119eff`,`d`,`m115.36 100.987l39.659-39.602L93.917.313L54.365 39.914z`],[`fill-opacity`,`.2`,`d`,`m115.359 100.985l39.659-39.601l-15.271-15.186z`],[`id`,`an-mark-grad`,`x1`,`0`,`y1`,`0`,`x2`,`1`,`y2`,`1`],[`offset`,`0`,`stop-color`,`#f0224f`],[`offset`,`1`,`stop-color`,`#c4002d`],[`d`,`M16 0C27.2 0 32 4.8 32 16S27.2 32 16 32 0 27.2 0 16 4.8 0 16 0Z`,`fill`,`url(#an-mark-grad)`],[`transform`,`translate(6.4 6.4) scale(0.8)`,`fill`,`#fff`],[`d`,`M14.8486 0L23.138 16.8551L23.9996 3.99892L14.8486 0Z`],[`d`,`M16.9875 17.7114H7.01272L5.73926 20.627L12.0001 24L18.261 20.627L16.9875 17.7114Z`],[`d`,`M8.72168 13.9298H15.2812L11.9997 6.39575L8.72168 13.9298Z`],[`d`,`M9.15103 0L0 3.99892L0.861556 16.8551L9.15103 0Z`],[`fill`,`#c30f2e`,`d`,`M152.228.001L48.455 181.046H256L152.228 0z`],[`fill`,`#dd0330`,`d`,`M88.314 26.967L0 181.52h176.628L88.315 26.967z`],[`fill`,`#fff`,`d`,`M18.167 135.294h220.236v-2.419H18.167z`],[`fill`,`#fff`,`d`,`M204.38 170.667c-.861 0-1.67-.358-2.348-1.034c-4.045-4.063-4.221-20.586-4.026-45.33c.11-13.521.257-32.043-1.9-33.504c-2.104.873-2.315 16.172-2.451 26.301c-.162 11.785-.327 23.98-2.242 30.189c-.57 1.84-1.306 3.525-2.786 3.39c-2.086-.185-2.76-3.48-4.317-16.478c-.647-5.4-1.317-10.98-2.101-13.14a11 11 0 0 0-.269-.66c-.835 1.889-1.8 7.079-2.47 10.682c-.927 4.976-1.803 9.676-2.9 11.726c-.847 1.575-2.19 3.63-4.067 3.231c-2.558-.537-3.323-5.693-3.552-8.719c0-25.455-3.33-28.417-3.997-28.753l-.107.081l-.162-.036c-2.377 1.038-2.506 9.294-2.627 17.276c-.096 5.856-.198 12.492-1.053 18.701c-1.108 8.05-2.448 9.603-4.115 9.507c-3.838-.262-3.95-13.482-3.95-14.987c0-.472.012-1.028.027-1.642c.074-3.076.205-8.8-1.687-10.604c-.25-.239-.603-.515-.879-.437c-1.347.339-2.745 4.714-3.209 6.153c-.147.457-.265.833-.364 1.09c-.078.214-.177.515-.294.88c-1.02 3.095-2.18 6.183-4.16 6.944c-.732.284-1.498.222-2.216-.183c-.953-.541-1.73-1.646-2.455-3.482c-.397-1.016-.735-2.046-1.082-3.081c-.419-1.263-.85-2.569-1.384-3.808c-.419-.965-1.464-1.4-2.796-1.164c-2.768.494-3.232 3.29-3.622 7.5c-.07.733-.137 1.452-.228 2.128c-.011.198-.501 6.38-.814 8.344c-.865 5.39-2.002 7.512-3.89 7.358c-4.66-.398-6.798-20.836-6.684-29.47c.088-6.592-1.104-9-1.818-9.382c-.074-.034-.189-.096-.46.095c-.843.571-1.594 2.348-1.363 4.215c2.566 20.32.674 43.592-3.96 48.833c-1.46 1.649-3.448 1.627-4.832.236c-4.049-4.064-4.218-20.586-4.026-45.33c.11-13.521.254-32.043-1.9-33.504c-2.105.873-2.311 16.172-2.45 26.301c-.163 11.785-.329 23.98-2.246 30.189c-.57 1.84-1.307 3.525-2.782 3.39c-2.091-.186-2.761-3.48-4.321-16.478c-.649-5.4-1.319-10.98-2.101-13.14c-.1-.273-.189-.49-.27-.66c-.832 1.889-1.796 7.079-2.466 10.682c-.927 4.976-1.803 9.676-2.904 11.726c-.846 1.575-2.19 3.63-4.063 3.231c-2.558-.537-3.324-5.693-3.552-8.719c-.003-25.455-3.33-28.417-3.997-28.753l-.106.081l-.166-.036c-2.374 1.038-2.503 9.293-2.629 17.276c-.091 5.856-.194 12.492-1.048 18.701c-1.107 8.05-2.437 9.618-4.111 9.507c-3.846-.262-3.958-13.482-3.958-14.987c0-.472.016-1.028.03-1.642c.074-3.076.207-8.8-1.685-10.604c-.25-.239-.603-.515-.88-.438c-1.347.34-2.75 4.715-3.206 6.155a47 47 0 0 1-.364 1.09q-.16.432-.298.875c-1.02 3.096-2.18 6.187-4.155 6.95c-.736.282-1.506.22-2.22-.185c-.953-.541-1.734-1.646-2.454-3.482c-.398-1.016-.74-2.046-1.083-3.081c-.42-1.263-.854-2.569-1.387-3.808c-.416-.965-1.465-1.4-2.797-1.164c-3.188.567-3.943 4.52-4.55 9.238l-.106.839l-2.411-.32l.114-.824c.527-4.137 1.328-10.39 6.53-11.31c2.446-.435 4.585.581 5.446 2.583c.578 1.34 1.031 2.695 1.466 4.008c.324.99.654 1.98 1.037 2.959c.674 1.708 1.197 2.15 1.392 2.257c1.218-.38 2.462-4.167 2.873-5.414c.13-.402.24-.732.328-.968c.085-.233.195-.571.328-.98c1.097-3.43 2.474-7.144 4.918-7.762c.747-.191 1.903-.166 3.157 1.035c2.665 2.544 2.525 8.48 2.433 12.41c-.014.59-.028 1.126-.028 1.583c0 6.272.93 10.655 1.64 12.16c.367-.77.998-2.63 1.598-7.007c.831-6.066.938-12.624 1.027-18.41c.161-10.24.275-17.663 3.982-19.408c.552-.339 1.469-.522 2.436-.033c3.586 1.803 5.326 11.885 5.326 30.817c.225 2.926 1.013 6.006 1.66 6.448c.004-.066.53-.39 1.394-2.01c.925-1.718 1.845-6.665 2.655-11.026c1.792-9.614 2.606-12.989 4.726-13.166c1.615-.158 2.362 1.896 2.676 2.76c.883 2.422 1.537 7.888 2.23 13.678c.54 4.49 1.31 10.902 2.094 13.497c.084-.228.18-.5.283-.836c1.815-5.878 1.98-17.887 2.14-29.507c.22-16.14.503-26.139 3.448-28.226a2.44 2.44 0 0 1 2.233-.316c3.448 1.144 3.714 11.254 3.519 35.8c-.14 17.799-.313 39.952 3.323 43.603c.317.32.542.32.622.32c.17 0 .413-.161.67-.452c3.681-4.162 6.01-26.022 3.372-46.927c-.328-2.602.677-5.337 2.392-6.514c.946-.652 2.036-.736 2.978-.232c2.145 1.14 3.187 5.024 3.102 11.546c-.15 11.387 2.584 24.714 4.37 26.842c.282-.471.842-1.763 1.379-5.145c.301-1.87.799-8.153.806-8.216c.09-.71.155-1.398.217-2.097c.369-3.924.82-8.804 5.613-9.654c2.444-.435 4.583.577 5.448 2.583c.577 1.34 1.027 2.695 1.46 4.008c.332.99.664 1.98 1.046 2.959c.67 1.708 1.197 2.15 1.387 2.257c1.218-.38 2.467-4.167 2.875-5.41c.132-.402.243-.737.328-.973c.088-.228.195-.57.324-.979c1.1-3.43 2.477-7.144 4.924-7.762c.74-.191 1.9-.166 3.154 1.035c2.665 2.543 2.526 8.48 2.437 12.41q-.029.792-.033 1.583c0 6.272.931 10.655 1.641 12.16c.365-.77.994-2.63 1.601-7.007c.832-6.066.931-12.624 1.027-18.41c.159-10.24.273-17.663 3.98-19.408c.55-.339 1.467-.522 2.44-.033c3.58 1.803 5.325 11.884 5.325 30.817c.224 2.926 1.012 6.006 1.656 6.448c.008-.066.526-.39 1.399-2.01c.923-1.718 1.84-6.665 2.653-11.026c1.786-9.614 2.602-12.989 4.722-13.166c1.62-.158 2.367 1.896 2.68 2.76c.88 2.422 1.535 7.888 2.233 13.678c.534 4.49 1.304 10.902 2.092 13.497c.08-.228.176-.5.28-.836c1.813-5.878 1.976-17.887 2.138-29.507c.216-16.14.504-26.139 3.448-28.226a2.45 2.45 0 0 1 2.234-.316c3.452 1.144 3.718 11.254 3.52 35.8c-.141 17.799-.314 39.952 3.319 43.603c.324.32.544.32.63.32c.165 0 .408-.161.662-.452c3.687-4.162 6.014-26.022 3.375-46.927c-.342-2.723.43-5.47 1.84-6.526c.71-.537 1.575-.647 2.37-.313c2.054.877 3.445 4.63 4.255 11.484c.339 2.87.641 5.974.931 9.036c.641 6.683 1.509 15.69 2.684 17.67c.36-.46 1.096-1.704 2.19-5.038l2.307.753c-1.696 5.157-3.026 7.1-4.755 6.902c-2.69-.299-3.468-5.734-4.84-20.055c-.29-3.048-.59-6.132-.928-8.989c-1.03-8.74-2.782-9.532-2.801-9.54c-.342.174-1.137 1.992-.842 4.31c2.558 20.32.673 43.597-3.964 48.834c-.747.842-1.587 1.27-2.485 1.27`],[`d`,`M12.024.017V0L12 .008L11.976 0v.017L.812 3.892l1.605 14.875l9.559 5.207V24l.024-.013l.024.013v-.026l9.559-5.207l1.605-14.875zm6.868 14.244q-1.64 3.948-6.031 4.166c-2.829 0-4.661-1.7-4.66-1.7q-1.745-1.359-2.398-3.417c-.695-.76-.702-.841-.774-1.145c-.072-.303.045-.388.249-.685q.204-.298.098-.85q-.26-.36-.3-1.128q0-.37.496-.783q.495-.413.607-.632q.083-.119.065-1.031q-.006-.897.995-.975c1-.08 1.565-.832 1.879-1.174c.21-.228.52-.339.91-.341c.551-.026 1.052.185 1.484.62c1.075-.055 2.176.235 3.292.863q2.379 1.414 2.596 3.055q-.257 2.158-5.788-.113q-2.895.819-2.846 3.552q0 2.508 2.422 3.643c-.787-.772-1.122-1.422-1.01-1.959q2.456 2.906 5.588 2.173c-.92.032-1.65-.264-2.198-.893q2.116-.05 3.998-1.972c-.724.576-1.482.794-2.284.657q3.26-2.563 2.307-5.98l-.002-.006a3.02 3.02 0 0 1 .788 2.03q.023 1.175-.795 2.477q.613-.478 1.413-2.047c.23 2.117-.625 3.724-2.574 4.825q.934-.085 2.473-1.23m-5.567-6.63a.319.319 0 1 1 .638 0a.319.319 0 0 1-.638 0`],[`id`,`ng-grad`,`x1`,`49`,`x2`,`226`,`y1`,`214`,`y2`,`130`,`gradientUnits`,`userSpaceOnUse`],[`stop-color`,`#E40035`],[`offset`,`.24`,`stop-color`,`#F60A48`],[`offset`,`.352`,`stop-color`,`#F20755`],[`offset`,`.494`,`stop-color`,`#DC087D`],[`offset`,`.745`,`stop-color`,`#9717E7`],[`offset`,`1`,`stop-color`,`#6C00F5`],[`fill`,`url(#ng-grad)`,`d`,`m222.077 39.192-8.019 125.923L137.387 0l84.69 39.192Zm-53.105 162.825-57.933 33.056-57.934-33.056 11.783-28.556h92.301l11.783 28.556ZM111.039 62.675l30.357 73.803H80.681l30.358-73.803ZM7.937 165.115 0 39.192 84.69 0 7.937 165.115Z`],[`width`,`500`,`height`,`500`,`rx`,`112`,`fill`,`#1c1a17`],[`transform`,`translate(250 252) scale(1.38) translate(-120 -129)`],[`id`,`pi-mark-mask`],[`x`,`-60`,`y`,`-60`,`width`,`360`,`height`,`380`,`fill`,`#fff`],[`fill`,`none`,`stroke`,`#000`,`stroke-width`,`30`,`stroke-linejoin`,`miter`],[`d`,`M88 66 V196`],[`d`,`M88 66 H143 L170 98 L143 130 H88 Z`],[`id`,`pi-mark-clip`],[`x`,`-40`,`y`,`129`,`width`,`320`,`height`,`200`],[`transform`,`rotate(-10 120 129)`],[`cx`,`120`,`cy`,`129`,`rx`,`128`,`ry`,`34`,`fill`,`none`,`stroke`,`#78350f`,`stroke-width`,`10`],[`mask`,`url(#pi-mark-mask)`],[`fill`,`#fbbf24`,`d`,`M120 5 L2 46 L22 198 L120 253 Z`],[`fill`,`#f59e0b`,`d`,`M120 5 L238 46 L218 198 L120 253 Z`],[`clip-path`,`url(#pi-mark-clip)`,`cx`,`120`,`cy`,`129`,`rx`,`128`,`ry`,`34`,`fill`,`none`,`stroke`,`#1c1a17`,`stroke-width`,`22`],[`clip-path`,`url(#pi-mark-clip)`,`cx`,`120`,`cy`,`129`,`rx`,`128`,`ry`,`34`,`fill`,`none`,`stroke`,`#fde68a`,`stroke-width`,`10`],[`transform`,`translate(230.9 146.0) rotate(10) scale(1.5) translate(-4 -4)`],[`x1`,`9`,`y1`,`9`,`x2`,`21`,`y2`,`21`,`stroke`,`#1c1a17`,`stroke-width`,`14`,`stroke-linecap`,`round`],[`r`,`16`,`fill`,`#1c1a17`],[`x1`,`9`,`y1`,`9`,`x2`,`21`,`y2`,`21`,`stroke`,`#fde68a`,`stroke-width`,`7`,`stroke-linecap`,`round`],[`r`,`12`,`fill`,`#1c1a17`,`stroke`,`#fde68a`,`stroke-width`,`5`],[`type`,`button`,3,`active`],[`type`,`button`,3,`click`],[3,`name`],[1,`full-panel`,3,`click`,`href`],[`width`,`14`,`height`,`14`,`viewBox`,`0 0 24 24`,`aria-hidden`,`true`],[`x`,`3`,`y`,`3`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[`x`,`14`,`y`,`3`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[`x`,`3`,`y`,`14`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[`x`,`14`,`y`,`14`,`width`,`7`,`height`,`7`,`rx`,`1.5`],[3,`layoutChange`,`themeChange`,`passiveChange`,`pillChange`,`tabs`,`layout`,`theme`,`passive`,`pill`,`hotkey`,`paletteShortcut`,`rpc`],[3,`retry`],[`target`,`_blank`,`rel`,`noopener noreferrer`,3,`href`],[1,`sr-only`],[3,`rpc`],[3,`rpc`,`canShowComponent`],[3,`rpc`,`focus`,`command`,`canShowInjector`,`canShowSignals`,`canShowPipes`],[3,`rpc`,`focus`],[3,`rpc`,`focus`,`canShowComponent`],[3,`rpc`,`focus`,`pageId`],[3,`rpc`,`canShowComponent`,`canExplainInjection`],[3,`navigate`,`rpc`],[3,`open`,`rpc`],[3,`showComponent`,`rpc`,`canShowComponent`],[3,`focusHandled`,`commandHandled`,`showForm`,`showInjector`,`showSignals`,`showPipe`,`rpc`,`focus`,`command`,`canShowInjector`,`canShowSignals`,`canShowPipes`],[3,`showComponent`,`rpc`],[3,`focusHandled`,`showComponent`,`rpc`,`focus`,`canShowComponent`],[3,`focusHandled`,`rpc`,`focus`],[3,`focusHandled`,`rpc`,`focus`,`pageId`],[3,`showComponent`,`rpc`,`canShowComponent`,`canExplainInjection`]],template:function(e,t){if(e&1){let e=z();P(0,`header`)(1,`h1`,2)(2,`span`,3),k(3,Kxe,2,0,`:svg:svg`,4)(4,qxe,7,0,`:svg:svg`,4)(5,Jxe,11,0,`:svg:svg`,5)(6,Yxe,5,0,`:svg:svg`,6)(7,Xxe,2,0,`:svg:svg`,7)(8,Zxe,10,0,`:svg:svg`,8)(9,Qxe,24,0,`:svg:svg`,9),F(),P(10,`span`,10),G(11),F()(),P(12,`nav`,11,0),V(`scroll`,function(){return t.measureNav()})(`keydown`,function(e){return t.onNavKey(e)}),k(14,$xe,3,0,`div`,12),F(),k(15,eSe,7,1,`a`,13),P(16,`span`,14)(17,`button`,15),V(`click`,function(){return t.openPalette()}),C(),P(18,`svg`,16),I(19,`path`,17),F()(),ys(),P(20,`button`,18),V(`click`,function(){return t.toggleSettings()}),I(21,`app-tab-icon`,19),F()(),P(22,`span`,20)(23,`span`,21),I(24,`span`),F(),G(25),F()(),P(26,`main`,22,1),V(`scroll`,function(){return t.rememberScroll()}),P(28,`p`,23),G(29),F(),P(30,`p`,24),G(31),F(),k(32,tSe,1,8,`app-settings`,25)(33,nSe,1,1,`app-auth-code`,26)(34,rSe,1,0,`app-connection-error`)(35,iSe,2,0,`p`,27)(36,aSe,1,1,`app-coming-soon`,28)(37,oSe,2,0,`p`,27)(38,cSe,10,2,`p`,29)(39,OSe,2,2),F(),P(40,`app-command-palette`,30),U_(`openChange`,function(n){return x(e),H_(t.paletteOpen,n)||(t.paletteOpen=n),S(n)}),V(`picked`,function(e){return t.runCommand(e)}),F()}if(e&2){let e,n;E(2),W(`ng-mark`,t.view()===`angular`)(`pi-mark`,!t.view()),E(),A(t.view()===`nativescript`?3:t.view()===`capacitor`?4:t.view()===`angular-native`?5:t.view()===`analog`?6:t.view()===`ngrx`?7:t.view()===`angular`?8:9),E(7),W(`ng-text`,t.view()===`angular`),E(),K(t.title()),E(),W(`fade-start`,t.navFade().start)(`fade-end`,t.navFade().end),E(2),A(t.availableTabs().length>1?14:-1),E(),A((e=t.fullPanelLink())?15:-1,e),E(2),O(`aria-label`,`Command palette (`+t.paletteShortcut+`)`)(`title`,`Command palette (`+t.paletteShortcut+`)`),E(3),W(`active`,t.tab()===`settings`),O(`aria-pressed`,t.tab()===`settings`),E(2),W(`connected`,t.connected())(`failed`,t.connectionFailed()),E(3),q(` `,t.connected()?`Live`:t.connectionFailed()?`Disconnected`:t.pairing()?`Code needed`:`Connecting…`,` `),E(),O(`aria-label`,t.mainLabel()),E(3),K(t.backgroundNote()),E(2),K(t.connectedNote()),E(),A(t.tab()===`settings`?32:(n=t.pairing())?33:t.connectionFailed()?34:t.rpc()?(n=t.comingSoon())?36:t.view()===`angular-native`&&!t.nativePageId()?37:t.tabEnabled(t.tab(),t.config())?39:38:35,n),E(8),N(`commands`,t.paletteCommands()),V_(`open`,t.paletteOpen)}},dependencies:[PE,BI,qV,BW,Oq,iQ,ZQ,n2,R4,vse,que,Kfe,Gme,ghe,Bhe,$ge,U_e,Rve,nde,QT,Mxe,Vxe,sxe,lxe],styles:[`[_nghost-%COMP%] {
+  --%NS%accent-soft: color-mix(in srgb, var(--%NS%accent) 12%, transparent);
+  --%NS%accent-line: color-mix(in srgb, var(--%NS%accent) var(--%NS%accent-line-amount), transparent);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  min-width: 0;
+  background: radial-gradient(900px 300px at 10% -10%, color-mix(in srgb, var(--%NS%accent) 7%, transparent), transparent 70%), var(--%NS%bg);
+}
+
+header[_ngcontent-%COMP%] {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px 16px;
+  height: 45px;
+  padding: 0 16px;
+  background: color-mix(in srgb, var(--%NS%surface) 82%, transparent);
+  backdrop-filter: blur(12px) saturate(1.3);
+  border-bottom: 1px solid var(--%NS%border);
+}
+
+.brand[_ngcontent-%COMP%] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  margin: 0;
+  color: var(--%NS%accent);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+
+.title[_ngcontent-%COMP%] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mark[_ngcontent-%COMP%] {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--%NS%accent) 8%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--%NS%accent) 28%, transparent);
+}
+
+.mark.pi-mark[_ngcontent-%COMP%] {
+  background: none;
+  box-shadow: none;
+}
+
+.mark.ng-mark[_ngcontent-%COMP%] {
+  background: linear-gradient(135deg, color-mix(in srgb, #f60a48 12%, transparent), color-mix(in srgb, #9717e7 12%, transparent));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, #dc087d 34%, transparent);
+}
+
+.ng-text[_ngcontent-%COMP%] {
+  background: linear-gradient(90deg, #ff4d75 0%, #f23d9a 45%, #c06bf5 80%, #a98bff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme=dark])   [_nghost-%COMP%]   .ng-text[_ngcontent-%COMP%] {
+    background-image: linear-gradient(90deg, #be123c 0%, #a21caf 50%, #6d28d9 100%);
+  }
+}
+:root[data-theme=light]   [_nghost-%COMP%]   .ng-text[_ngcontent-%COMP%] {
+  background-image: linear-gradient(90deg, #be123c 0%, #a21caf 50%, #6d28d9 100%);
+}
+
+nav[_ngcontent-%COMP%] {
+  position: relative;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
+  gap: 2px;
+  min-width: 0;
+  height: 34px;
+  padding: 2px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-padding-inline: 24px;
+  scrollbar-width: none;
+  border: 1px solid var(--%NS%border);
+  border-radius: 10px;
+  background: var(--%NS%bg);
+}
+
+nav[_ngcontent-%COMP%]::-webkit-scrollbar {
+  display: none;
+}
+
+nav.fade-start[_ngcontent-%COMP%] {
+  mask-image: linear-gradient(90deg, transparent, #000 28px);
+}
+
+nav.fade-end[_ngcontent-%COMP%] {
+  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
+}
+
+nav.fade-start.fade-end[_ngcontent-%COMP%] {
+  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
+}
+
+nav[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.tab-bar[_ngcontent-%COMP%] {
+  display: contents;
+}
+
+nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--%NS%text-2);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease), box-shadow 0.16s var(--%NS%ease), transform 0.12s var(--%NS%ease);
+}
+
+nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   app-tab-icon[_ngcontent-%COMP%] {
+  color: var(--%NS%text-3);
+  transition: color 0.16s var(--%NS%ease);
+}
+
+nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text);
+}
+
+nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover   app-tab-icon[_ngcontent-%COMP%] {
+  color: var(--%NS%text-2);
+}
+
+nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {
+  transform: scale(0.97);
+}
+
+nav[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] {
+  background: var(--%NS%surface-3);
+  color: var(--%NS%text-strong);
+  box-shadow: inset 0 0 0 1px var(--%NS%border-strong), 0 4px 14px -8px rgba(0, 0, 0, 0.9);
+}
+
+nav[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%]   app-tab-icon[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+}
+
+nav[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+.status[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  margin-left: auto;
+  padding: 0 10px 0 6px;
+  border: 1px solid var(--%NS%border);
+  border-radius: 999px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  transition: color 0.2s var(--%NS%ease), border-color 0.2s var(--%NS%ease), background-color 0.2s var(--%NS%ease);
+}
+
+.full-panel[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  margin-left: auto;
+  padding: 0 10px;
+  border: 1px solid var(--%NS%control-border);
+  border-radius: 8px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease);
+}
+.full-panel[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+}
+.full-panel[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+}
+.full-panel[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.shell-actions[_ngcontent-%COMP%] {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.full-panel[_ngcontent-%COMP%]    + .shell-actions[_ngcontent-%COMP%] {
+  margin-left: 0;
+}
+
+.shell-btn[_ngcontent-%COMP%] {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid var(--%NS%border);
+  border-radius: 8px;
+  background: var(--%NS%surface);
+  color: var(--%NS%text-2);
+  cursor: pointer;
+  transition: background-color 0.16s var(--%NS%ease), color 0.16s var(--%NS%ease);
+}
+.shell-btn[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.shell-btn[_ngcontent-%COMP%]:hover {
+  background: var(--%NS%surface-2);
+  color: var(--%NS%text-strong);
+}
+.shell-btn.active[_ngcontent-%COMP%] {
+  border-color: var(--%NS%accent-line);
+  background: var(--%NS%accent-soft);
+  color: var(--%NS%text-strong);
+}
+.shell-btn[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.shell-actions[_ngcontent-%COMP%]    + .status[_ngcontent-%COMP%] {
+  margin-left: 0;
+}
+
+.dot[_ngcontent-%COMP%] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 12px;
+  height: 12px;
+}
+
+.dot[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--%NS%warn);
+  animation: _ngcontent-%COMP%_blink 1.2s ease-in-out infinite;
+}
+
+.dot[_ngcontent-%COMP%]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--%NS%warn);
+  opacity: 0;
+}
+
+.status.connected[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%ok) 28%, transparent);
+  background: color-mix(in srgb, var(--%NS%ok) 8%, transparent);
+  color: var(--%NS%text);
+}
+
+.status.connected[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  background: var(--%NS%ok);
+  box-shadow: 0 0 6px var(--%NS%ok);
+  animation: none;
+}
+
+.status.failed[_ngcontent-%COMP%] {
+  border-color: color-mix(in srgb, var(--%NS%danger) 36%, transparent);
+  color: var(--%NS%text);
+}
+
+.status.failed[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {
+  background: var(--%NS%danger);
+  animation: none;
+}
+
+.status.connected[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]::before {
+  background: var(--%NS%ok);
+  animation: _ngcontent-%COMP%_ping 2s var(--%NS%ease) infinite;
+}
+
+@keyframes _ngcontent-%COMP%_blink {
+  50% {
+    opacity: 0.3;
+  }
+}
+@keyframes _ngcontent-%COMP%_ping {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.55;
+  }
+  80%, 100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+main[_ngcontent-%COMP%] {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  padding: 20px;
+}
+
+main[_ngcontent-%COMP%]:focus {
+  outline: none;
+}
+
+main[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: -2px;
+}
+
+main[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {
+  animation: enter 0.28s var(--%NS%ease) both;
+}
+
+.background-note[_ngcontent-%COMP%] {
+  margin: 0 0 12px;
+  color: var(--%NS%text-2);
+  font-size: 12px;
+}
+.background-note[_ngcontent-%COMP%]:empty {
+  display: none;
+}
+
+.turned-off[_ngcontent-%COMP%] {
+  max-width: 60ch;
+  margin: 0;
+  padding: 12px 14px;
+  border: 1px solid var(--%NS%border);
+  border-radius: var(--%NS%radius);
+  background: var(--%NS%surface);
+  color: var(--%NS%text);
+}
+
+.turned-off[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {
+  color: var(--%NS%accent);
+  border-radius: 2px;
+}
+.turned-off[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:focus-visible {
+  outline: 2px solid var(--%NS%accent);
+  outline-offset: 2px;
+}
+
+.turned-off[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {
+  font-family: var(--%NS%font-mono);
+}
+
+@media (max-width: 720px) {
+  header[_ngcontent-%COMP%] {
+    flex-wrap: wrap;
+    height: auto;
+    padding: 8px 16px;
+  }
+  nav[_ngcontent-%COMP%] {
+    order: 3;
+    flex: 1 1 100%;
+  }
+}
+@media (max-width: 560px) {
+  header[_ngcontent-%COMP%] {
+    padding-inline: 12px;
+  }
+  main[_ngcontent-%COMP%] {
+    padding: 16px 12px;
+  }
+}
+@media (max-width: 400px) {
+  .brand[_ngcontent-%COMP%] {
+    flex-shrink: 1;
+    gap: 8px;
+  }
+}`]})}).catch(console.error);export{eb as t};
\ No newline at end of file
diff --git a/extension/ui/index.html b/extension/ui/index.html
index 4cbe6fdb..233d0c08 100644
--- a/extension/ui/index.html
+++ b/extension/ui/index.html
@@ -9,7 +9,7 @@
     <script src="./theme-init.js"></script>
     <title>Pangular Inspector</title>
     <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
-    <script type="module" crossorigin src="./assets/index-fAMsQf9b.js"></script>
+    <script type="module" crossorigin src="./assets/index-xQ_9JX3C.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-CgeuIaNC.css">
   </head>
   <body>
diff --git a/lint-baseline.json b/lint-baseline.json
index 64fbbe8e..63d98686 100644
--- a/lint-baseline.json
+++ b/lint-baseline.json
@@ -14,24 +14,6 @@
   "app/src/app.ts": {
     "pangular(max-lines)": 1980
   },
-  "app/src/pages/analog-inspector.ts": {
-    "pangular(max-lines)": 2743
-  },
-  "app/src/pages/component-tree.ts": {
-    "pangular(max-lines)": 2982
-  },
-  "app/src/pages/di-inspector.ts": {
-    "pangular(max-lines)": 2742
-  },
-  "app/src/pages/pipes-inspector.ts": {
-    "pangular(max-lines)": 1606
-  },
-  "app/src/pages/signal-inspector.ts": {
-    "pangular(max-lines)": 2514
-  },
-  "app/src/pages/store-inspector.ts": {
-    "pangular(max-lines)": 2870
-  },
   "app/src/pages/store-types.ts": {
     "typescript(no-explicit-any)": 1
   },
diff --git a/packages/devtools/src/__tests__/inline-resources.ts b/packages/devtools/src/__tests__/inline-resources.ts
new file mode 100644
index 00000000..d5572bfd
--- /dev/null
+++ b/packages/devtools/src/__tests__/inline-resources.ts
@@ -0,0 +1,33 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import type { Plugin } from 'vite';
+
+const RESOURCE = /\b(templateUrl|styleUrl)\s*:\s*(['"])([^'"]+)\2/g;
+
+// Vite ids use forward slashes, also on Windows, and the drive letter's case can differ.
+const slashes = (path: string) => path.replaceAll('\\', '/');
+const comparable = (path: string) =>
+  process.platform === 'win32' ? slashes(path).toLowerCase() : slashes(path);
+
+/**
+ * The package tests render panel components in JIT, which cannot load `templateUrl` or
+ * `styleUrl` on its own. This inlines them as `template` and `styles` for files under `appSrc`,
+ * the same text the component would hold inline.
+ */
+export function inlineComponentResources(appSrc: string): Plugin {
+  const root = comparable(resolve(appSrc)) + '/';
+  return {
+    name: 'pangular-inline-component-resources',
+    enforce: 'pre',
+    transform(code, id) {
+      const file = id.split('?')[0];
+      if (!comparable(file).startsWith(root) || !file.endsWith('.ts')) return null;
+      if (!code.includes('templateUrl') && !code.includes('styleUrl')) return null;
+      const out = code.replace(RESOURCE, (_, key: string, _quote: string, path: string) => {
+        const text = readFileSync(resolve(dirname(file), path), 'utf8');
+        return `${key === 'templateUrl' ? 'template' : 'styles'}: ${JSON.stringify(text)}`;
+      });
+      return out === code ? null : { code: out, map: null };
+    },
+  };
+}
diff --git a/packages/devtools/src/__tests__/store-inspector.test.ts b/packages/devtools/src/__tests__/store-inspector.test.ts
index 013c8b3a..07ee3c60 100644
--- a/packages/devtools/src/__tests__/store-inspector.test.ts
+++ b/packages/devtools/src/__tests__/store-inspector.test.ts
@@ -14,12 +14,29 @@ async function mount() {
   const { StoreSession } = await import('../../../../app/src/pages/store-session.ts');
   const { Select } = await import('../../../../app/src/ui/select.ts');
   const { LiveControls } = await import('../../../../app/src/ui/live-feed.ts');
-  (StoreInspector as unknown as { propDecorators: unknown }).propDecorators = Object.fromEntries(
-    ['stateTree', 'latestButton', 'cancelButton', 'restoreButton'].map((name) => [
-      name,
-      [{ type: ViewChild, args: [name, { isSignal: true }] }],
-    ]),
-  );
+  const { StoreDetail } = await import('../../../../app/src/pages/store/store-detail.ts');
+  const { StoreEntry } = await import('../../../../app/src/pages/store/store-entry.ts');
+  const viewChildren = (type: unknown, names: string[]) => {
+    (type as { propDecorators: unknown }).propDecorators = Object.fromEntries(
+      names.map((name) => [name, [{ type: ViewChild, args: [name, { isSignal: true }] }]]),
+    );
+  };
+  viewChildren(StoreDetail, ['stateTree', 'latestButton']);
+  viewChildren(StoreEntry, ['cancelButton', 'restoreButton']);
+  // The entry detail reads its inputs under the names the old shared template used.
+  (StoreEntry as unknown as { propDecorators: Record<string, unknown[]> }).propDecorators = {
+    ...(StoreEntry as unknown as { propDecorators: Record<string, unknown[]> }).propDecorators,
+    ...Object.fromEntries(
+      [
+        ['entry', 'selected'],
+        ['level', 'headingLevel'],
+        ['prefix', 'idPrefix'],
+      ].map(([name, alias]) => [
+        name,
+        [{ type: Input, args: [{ isSignal: true, alias, required: true }] }],
+      ]),
+    ),
+  };
   // JIT sees signal inputs only through the metadata the AOT compiler would write.
   const signalInputs = (type: unknown, names: string[], required: string[] = []) => {
     (type as { propDecorators: unknown }).propDecorators = Object.fromEntries(
diff --git a/packages/devtools/vitest.config.ts b/packages/devtools/vitest.config.ts
index 576b8a45..fa969288 100644
--- a/packages/devtools/vitest.config.ts
+++ b/packages/devtools/vitest.config.ts
@@ -1,6 +1,10 @@
+import { join } from 'node:path';
 import { defineConfig } from 'vitest/config';
+import { inlineComponentResources } from './src/__tests__/inline-resources.ts';
 
 export default defineConfig({
+  // Panel components rendered in JIT get their template and style files inlined.
+  plugins: [inlineComponentResources(join(import.meta.dirname, '../../app/src'))],
   test: {
     // Node 25+ ships its own `localStorage` global, which is `undefined` without
     // `--localstorage-file` and hides the jsdom one the tests rely on.