@ethlete/query-devtools 1.0.0-next.0 → 1.0.0-next.2

package/fesm2022/ethlete-query-devtools.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { signal, ViewEncapsulation, Component, input, output, computed, viewChild, effect, numberAttribute, linkedSignal, InjectionToken, inject, untracked, ElementRef, NgZone, DestroyRef, booleanAttribute } from '@angular/core';
-import { copyToClipboard, injectStyleManager, injectErrorTheme, ProvideColorDirective, clamp, injectRenderer, injectFileDownload, injectViewportSize, injectBreakpointObserver, createObjectUrlHandle, DragHandleDirective, ResizeHandlesComponent } from '@ethlete/core';
-import { queryDevtoolsAbout, hasQueryDevtoolsOverridesAtPath, detectPaginationShape, isDateShapedLeaf, generateQueryDevtoolsStringPreset, generateQueryDevtoolsNumberPreset, collectLeafPaths, armAllQueryDevtoolsMocks, clearQueryDevtoolsArmedMocks, clearQueryDevtoolsFaults, queryDevtoolsResponseHistory, queryDevtoolsMocks, queryDevtoolsArmedMocks, queryDevtoolsSettings, setQueryDevtoolsOverridesScope, setQueryDevtoolsArmedMocksScope, setQueryDevtoolsFaultsScope, setQueryDevtoolsSettings, QUERY_DEVTOOLS_TOKEN_TTL_LIMIT, setQueryDevtoolsTokenTtl, clearQueryDevtoolsTokenTtl, createQueryDevtoolsOverrides, applyQueryDevtoolsOverrides, queryDevtoolsSchemaNames, queryDevtoolsSchemaRoutes, queryDevtoolsSchemaState, measureQueryDevtoolsPayload, seedQueryDevtoolsSchemaBody, loadQueryDevtoolsSchema, queryDevtoolsMockId, saveQueryDevtoolsMock, armQueryDevtoolsMock, deleteQueryDevtoolsMock, collectQueryDevtoolsSchemaComponents, seedQueryDevtoolsSchemaRoute, QUERY_DEVTOOLS_FAULT_STATUSES, setQueryDevtoolsFault, serializeQueryDevtoolsOverrideTransfer, parseQueryDevtoolsOverrideTransfer, armQueryDevtoolsOverrideTransfer, countUnresolvedQueryDevtoolsOverrides, clearQueryDevtoolsTombstones, readQueryDevtoolsStore, queryDevtoolsEntries, queryDevtoolsTokenTtls, queryDevtoolsFaults, EMPTY_QUERY_DEVTOOLS_FAULT, isQueryDevtoolsFaultArmed, queryDevtoolsFaultsRestored, queryDevtoolsArmedMocksRestored, restoredQueryDevtoolsOverrides, queryDevtoolsRestoredOverridesScope, clearRestoredQueryDevtoolsOverrides, clearQueryDevtoolsStore, writeQueryDevtoolsStore, registerEthleteVersion, queryDevtoolsOverridePersistence, setQueryDevtoolsOverridePersistence, clearQueryDevtoolsOverrideStore, clearQueryDevtoolsMockStore, createQueryErrorResponse, applyQueryDevtoolsTokenTtl, canOverrideQueryDevtoolsTokenTtl, sumQueryDevtoolsStats } from '@ethlete/query';
-import { tap, Subject, switchMap, timer, interval, animationFrames, NEVER, takeUntil, finalize as finalize$1, merge, map, fromEvent, filter, EMPTY, take } from 'rxjs';
+import { copyToClipboard, injectStyleManager, injectErrorTheme, ProvideColorDirective, clamp, injectRenderer, injectFileDownload, injectViewportSize, injectIsDocumentVisible, injectBreakpointObserver, signalElementDimensions, randomId, createObjectUrlHandle, DragHandleDirective, ResizeHandlesComponent } from '@ethlete/core';
+import { queryDevtoolsAbout, hasQueryDevtoolsOverridesAtPath, detectPaginationShape, isDateShapedLeaf, generateQueryDevtoolsStringPreset, generateQueryDevtoolsNumberPreset, collectLeafPaths, armAllQueryDevtoolsMocks, clearQueryDevtoolsArmedMocks, clearQueryDevtoolsFaults, queryDevtoolsResponseHistory, queryDevtoolsMocks, queryDevtoolsArmedMocks, queryDevtoolsSettings, setQueryDevtoolsOverridesScope, setQueryDevtoolsArmedMocksScope, setQueryDevtoolsFaultsScope, setQueryDevtoolsSettings, QUERY_DEVTOOLS_TOKEN_TTL_LIMIT, setQueryDevtoolsTokenTtl, clearQueryDevtoolsTokenTtl, createQueryDevtoolsOverrides, applyQueryDevtoolsOverrides, queryDevtoolsSchemaNames, queryDevtoolsSchemaRoutes, queryDevtoolsSchemaState, measureQueryDevtoolsPayload, seedQueryDevtoolsSchemaBody, loadQueryDevtoolsSchema, queryDevtoolsMockId, saveQueryDevtoolsMock, armQueryDevtoolsMock, deleteQueryDevtoolsMock, collectQueryDevtoolsSchemaComponents, seedQueryDevtoolsSchemaRoute, QUERY_DEVTOOLS_FAULT_STATUSES, setQueryDevtoolsFault, serializeQueryDevtoolsOverrideTransfer, parseQueryDevtoolsOverrideTransfer, armQueryDevtoolsOverrideTransfer, countUnresolvedQueryDevtoolsOverrides, clearQueryDevtoolsTombstones, readQueryDevtoolsStore, createQueryKeyLockManager, queryDevtoolsEntries, queryDevtoolsTokenTtls, queryDevtoolsFaults, EMPTY_QUERY_DEVTOOLS_FAULT, isQueryDevtoolsFaultArmed, queryDevtoolsFaultsRestored, queryDevtoolsArmedMocksRestored, restoredQueryDevtoolsOverrides, queryDevtoolsRestoredOverridesScope, clearRestoredQueryDevtoolsOverrides, clearQueryDevtoolsStore, writeQueryDevtoolsStore, registerEthleteVersion, queryDevtoolsOverridePersistence, setQueryDevtoolsOverridePersistence, clearQueryDevtoolsOverrideStore, clearQueryDevtoolsMockStore, createQueryErrorResponse, applyQueryDevtoolsTokenTtl, canOverrideQueryDevtoolsTokenTtl, sumQueryDevtoolsStats } from '@ethlete/query';
+import { tap, Subject, switchMap, timer, interval, animationFrames, NEVER, takeUntil, finalize as finalize$1, EMPTY, startWith, merge, map, fromEvent, filter, take } from 'rxjs';
 import { takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
-import { MenuDirective, MenuTriggerDirective, MenuSurfaceDirective, MenuComponent, MenuItemComponent, MenuSearchDirective, MenuItemShortcutComponent, MenuSeparatorComponent, COMPONENTS_VERSION, MenuRadioGroupComponent, MenuRadioItemComponent } from '@ethlete/components';
+import { MenuDirective, MenuTriggerDirective, MenuSurfaceDirective, MenuComponent, MenuItemComponent, MenuSearchDirective, MenuItemShortcutComponent, MenuSeparatorComponent, SelectComponent, SelectSearchDirective, COMPONENTS_VERSION, MenuCheckboxItemComponent, MenuRadioGroupComponent, MenuRadioItemComponent } from '@ethlete/components';
 import { HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { QUERY_DEVTOOLS_VIEW_STATE_KEY, queryDevtoolsShortcutLabel, QueryDevtoolsToggleComponent } from '@ethlete/query-devtools/toggle';
@@ -2294,6 +2294,23 @@ const write = (value, depth) => {
 const toQueryDevtoolsYaml = (value) => `${write(value, 0).replace(/^\n/, '')}\n`;
 
 const METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'];
+const SEED_STYLES = [
+    {
+        value: 'placeholder',
+        label: 'Placeholder values',
+        hint: 'Every field named after itself - a body nobody mistakes for real data.',
+    },
+    {
+        value: 'realistic',
+        label: 'Realistic values',
+        hint: 'Varied sample values, and array elements generated one by one - a list of three different rows.',
+    },
+    {
+        value: 'stress',
+        label: 'Stress values',
+        hint: 'Long text, unbreakable words, unicode and huge numbers - what a layout breaks on. Declared formats, enums and bounds are still honoured.',
+    },
+];
 const SPEC_FORMATS = [
     { value: 'yaml', label: 'YAML' },
     { value: 'json', label: 'JSON' },
@@ -2330,26 +2347,52 @@ class QueryDevtoolsMocksTabComponent {
         this.DISARM_ALL = clearQueryDevtoolsArmedMocks;
         this.METHODS = METHODS;
         this.SPEC_FORMATS = SPEC_FORMATS;
-        this.SCHEMA_NAMES = queryDevtoolsSchemaNames;
-        this.SCHEMA_ROUTES = queryDevtoolsSchemaRoutes;
-        /** Whether the application handed an API description in at all - nothing below shows without one. */
-        this.hasSchema = computed(() => queryDevtoolsSchemaState().status !== 'unavailable', /* @ts-ignore */
+        this.SEED_STYLES = SEED_STYLES;
+        /** The new-mock form, or `null` while it is closed. */
+        this.draft = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        /** Which client the form is designing for - every description below is that client's, not the app's. */
+        this.draftClient = computed(() => this.draft()?.clientName ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draftClient" }] : /* istanbul ignore next */ []));
+        this.schemaNames = computed(() => queryDevtoolsSchemaNames(this.draftClient()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "schemaNames" }] : /* istanbul ignore next */ []));
+        this.schemaRoutes = computed(() => queryDevtoolsSchemaRoutes(this.draftClient()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "schemaRoutes" }] : /* istanbul ignore next */ []));
+        /**
+         * A description declares hundreds of routes and named types, so both pickers are handed their options
+         * as data: the select then windows the rows and filters the full set from its own search box.
+         */
+        this.routeOptions = computed(() => this.schemaRoutes().map((route) => {
+            const target = `${route.method} ${route.pattern}`;
+            return { value: target, label: route.summary ? `${target} — ${route.summary}` : target };
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routeOptions" }] : /* istanbul ignore next */ []));
+        this.schemaNameOptions = computed(() => this.schemaNames().map((name) => ({ value: name, label: name })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "schemaNameOptions" }] : /* istanbul ignore next */ []));
+        this.schemaState = computed(() => queryDevtoolsSchemaState(this.draftClient()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "schemaState" }] : /* istanbul ignore next */ []));
+        /** Whether the application handed this client's API description in - nothing below shows without one. */
+        this.hasSchema = computed(() => this.schemaState().status !== 'unavailable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasSchema" }] : /* istanbul ignore next */ []));
-        this.isSchemaReady = computed(() => queryDevtoolsSchemaState().status === 'ready', /* @ts-ignore */
+        this.isSchemaReady = computed(() => this.schemaState().status === 'ready', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isSchemaReady" }] : /* istanbul ignore next */ []));
         this.schemaError = computed(() => {
-            const state = queryDevtoolsSchemaState();
+            const state = this.schemaState();
             return state.status === 'error' ? state.message : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "schemaError" }] : /* istanbul ignore next */ []));
-        /** The new-mock form, or `null` while it is closed. */
-        this.draft = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
         this.draftError = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "draftError" }] : /* istanbul ignore next */ []));
         /** What the description said about the draft's body, kept so the designer can label its fields. */
         this.draftSeed = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "draftSeed" }] : /* istanbul ignore next */ []));
+        /** How lifelike the next seed comes out. The shape is the description's either way. */
+        this.seedStyle = signal('placeholder', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "seedStyle" }] : /* istanbul ignore next */ []));
+        this.seedSource = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "seedSource" }] : /* istanbul ignore next */ []));
+        this.seedStyleHint = computed(() => SEED_STYLES.find((style) => style.value === this.seedStyle())?.hint ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "seedStyleHint" }] : /* istanbul ignore next */ []));
         /** The named schema picked in the form, which is not the same thing as the one a body came from. */
         this.pickedSchema = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pickedSchema" }] : /* istanbul ignore next */ []));
@@ -2401,7 +2444,7 @@ class QueryDevtoolsMocksTabComponent {
             if (seeded)
                 return seeded;
             const name = row.mock.schemaName;
-            return name ? (seedQueryDevtoolsSchemaBody(name)?.types ?? null) : null;
+            return name ? (seedQueryDevtoolsSchemaBody(row.mock.clientName, name)?.types ?? null) : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "editingAnnotations" }] : /* istanbul ignore next */ []));
         /**
@@ -2438,26 +2481,40 @@ class QueryDevtoolsMocksTabComponent {
             return [...rows.values()];
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "captureRows" }] : /* istanbul ignore next */ []));
-        // The description is only worth fetching once someone is designing a mock, which is what opening
-        // this tab means - so an application that hands one in still ships it as its own lazy chunk.
-        loadQueryDevtoolsSchema();
+        // A description is only worth fetching once someone is designing a mock against that client, so an
+        // application that hands several in still ships each as its own lazy chunk, loaded one at a time.
+        effect(() => {
+            const client = this.draftClient() || this.editingRow()?.mock.clientName;
+            if (client)
+                loadQueryDevtoolsSchema(client);
+        });
     }
     openDraft() {
         this.draftError.set(null);
         this.draftSeed.set(null);
+        this.seedSource.set(null);
         this.draft.set({ ...EMPTY_DRAFT, clientName: this.host.clientNames()[0] ?? '' });
     }
     closeDraft() {
         this.draft.set(null);
         this.draftError.set(null);
         this.draftSeed.set(null);
+        this.seedSource.set(null);
     }
     patchDraft(patch) {
         this.draft.update((current) => (current ? { ...current, ...patch } : current));
     }
+    /** Switches which API the form is designing against, dropping what the previous one's seed named. */
+    pickClient(clientName) {
+        this.patchDraft({ clientName });
+        this.pickedSchema.set('');
+        this.seedSource.set(null);
+        this.draftSeed.set(null);
+        this.draftError.set(null);
+    }
     /** Fills the form from a route the description declares, whether or not the app has ever called it. */
     pickRoute(value) {
-        const [method, pattern] = value.split(' ');
+        const [method, pattern] = typeof value === 'string' ? value.split(' ') : [];
         if (!method || !pattern)
             return;
         this.patchDraft({ method, pattern });
@@ -2469,12 +2526,25 @@ class QueryDevtoolsMocksTabComponent {
         if (draft)
             this.seedFromRoute({ method: draft.method, pattern: draft.pattern.trim() });
     }
+    pickSchema(value) {
+        this.pickedSchema.set(typeof value === 'string' ? value : '');
+    }
     /** Seeds the body from one named schema, so a route the description does not declare still starts real. */
     seedFromSchema() {
         const name = this.pickedSchema();
         if (!name)
             return;
-        this.applySeed(seedQueryDevtoolsSchemaBody(name), `The description does not name ${name}.`);
+        this.applySeed({ kind: 'schema', name });
+    }
+    /** Re-rolls whatever the body was seeded from, so the picked style is what the form already shows. */
+    pickSeedStyle(value) {
+        const style = SEED_STYLES.find((entry) => entry.value === value);
+        if (!style)
+            return;
+        this.seedStyle.set(style.value);
+        const source = this.seedSource();
+        if (source)
+            this.applySeed(source);
     }
     /**
      * Saves the form as a designed mock and opens the designer on it. Nothing is checked against the
@@ -2609,10 +2679,40 @@ class QueryDevtoolsMocksTabComponent {
         saveQueryDevtoolsMock({ ...row.mock, body });
         this.cancelBody();
     }
-    /** The declared schemas the given mocks were seeded from, so their responses can reference them. */
+    /**
+     * The declared schemas the given mocks were seeded from, so their responses can reference them. Each
+     * client is asked its own description, and a name two of them both declare keeps the first - one
+     * exported document cannot hold two `MatchView`s.
+     */
     schemasFor(mocks) {
-        const names = mocks.map((mock) => mock.schemaName).filter((name) => !!name);
-        return collectQueryDevtoolsSchemaComponents([...new Set(names)]);
+        const byClient = new Map();
+        for (const mock of mocks) {
+            if (!mock.schemaName)
+                continue;
+            const names = byClient.get(mock.clientName) ?? new Set();
+            names.add(mock.schemaName);
+            byClient.set(mock.clientName, names);
+        }
+        const schemas = {};
+        const notes = new Set();
+        const owners = new Map();
+        for (const [clientName, names] of byClient) {
+            const collected = collectQueryDevtoolsSchemaComponents(clientName, [...names]);
+            for (const note of collected.notes)
+                notes.add(note);
+            for (const [name, schema] of Object.entries(collected.schemas)) {
+                const owner = owners.get(name);
+                if (owner !== undefined) {
+                    if (JSON.stringify(schemas[name]) !== JSON.stringify(schema)) {
+                        notes.add(`${name} is declared by both ${owner} and ${clientName} - the one from ${owner} was kept.`);
+                    }
+                    continue;
+                }
+                owners.set(name, clientName);
+                schemas[name] = schema;
+            }
+        }
+        return { schemas, notes: [...notes] };
     }
     write(document) {
         if (this.specFormat() === 'yaml')
@@ -2624,14 +2724,23 @@ class QueryDevtoolsMocksTabComponent {
             this.draftError.set('Name the path first - the seed comes from what the description says it returns.');
             return;
         }
-        this.applySeed(seedQueryDevtoolsSchemaRoute(target), `The description declares no JSON response for ${target.method} ${target.pattern}.`);
-    }
-    applySeed(seed, missing) {
+        this.applySeed({ kind: 'route', ...target });
+    }
+    applySeed(source) {
+        const style = this.seedStyle();
+        const client = this.draftClient();
+        const seed = source.kind === 'schema'
+            ? seedQueryDevtoolsSchemaBody(client, source.name, style)
+            : seedQueryDevtoolsSchemaRoute({ clientName: client, method: source.method, pattern: source.pattern }, style);
         if (!seed) {
             this.draftSeed.set(null);
-            this.draftError.set(missing);
+            this.seedSource.set(null);
+            this.draftError.set(source.kind === 'schema'
+                ? `The description does not name ${source.name}.`
+                : `The description declares no JSON response for ${source.method} ${source.pattern}.`);
             return;
         }
+        this.seedSource.set(source);
         this.draftSeed.set(seed);
         this.draftError.set(null);
         this.patchDraft({ body: JSON.stringify(seed.body, null, 2) });
@@ -2648,11 +2757,11 @@ class QueryDevtoolsMocksTabComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsMocksTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsMocksTabComponent, isStandalone: true, selector: "et-query-devtools-mocks-tab", ngImport: i0, template: "<div class=\"et-query-devtools-scroll\">\n  <div class=\"et-query-devtools-toolbar et-query-devtools-mocks-toolbar\">\n    <p class=\"et-query-devtools-hint\">\n      A mock replaces the request, so it answers a route that has never run - or does not exist yet. It bypasses the\n      interceptor chain by construction, so a mocked secure route never exercises the token flow. The library is kept;\n      whether a mock is <strong>armed</strong> is not, so a reload always stops serving them. GraphQL queries are not\n      offered: they all POST one route, so matching them needs the document rather than the path.\n    </p>\n    <div class=\"et-query-devtools-settings-controls\">\n      @if (rows().length && armedCount() < rows().length) {\n        <button\n          (click)=\"ARM_ALL()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Serve every mock in the library - the whole screen off the network at once\"\n        >\n          Arm all ({{ rows().length }})\n        </button>\n      }\n      @if (armedCount()) {\n        <button (click)=\"DISARM_ALL()\" class=\"et-query-devtools-btn\" type=\"button\">\n          Disarm all ({{ armedCount() }})\n        </button>\n      }\n      <button (click)=\"openDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n        <span aria-hidden=\"true\">\uFF0B</span>\n        New mock\n      </button>\n    </div>\n  </div>\n\n  @if (draft(); as form) {\n    <div class=\"et-query-devtools-card\">\n      <div class=\"et-query-devtools-card-head\">\n        <strong>New mock</strong>\n        <span class=\"et-query-devtools-count\">for any route, whether a query has ever called it or not</span>\n      </div>\n\n      <div class=\"et-query-devtools-mock-fields\">\n        <label class=\"et-query-devtools-field\">\n          <span>Client</span>\n          <select\n            #clientSelect\n            (change)=\"patchDraft({ clientName: clientSelect.value })\"\n            class=\"et-query-devtools-select\"\n          >\n            @for (name of host.clientNames(); track name) {\n              <option [value]=\"name\" [selected]=\"name === form.clientName\">{{ name }}</option>\n            }\n          </select>\n          <small>a mock answers one client, matched by name</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Method</span>\n          <select #methodSelect (change)=\"patchDraft({ method: methodSelect.value })\" class=\"et-query-devtools-select\">\n            @for (method of METHODS; track method) {\n              <option [value]=\"method\" [selected]=\"method === form.method\">{{ method }}</option>\n            }\n          </select>\n          <small>matched exactly</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Path</span>\n          <input\n            #patternInput\n            [value]=\"form.pattern\"\n            (input)=\"patchDraft({ pattern: patternInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"/posts/:id/comments\"\n          />\n          <small><code>:name</code> matches any one segment, so the route is mocked rather than one URL</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Query</span>\n          <input\n            #queryInput\n            [value]=\"form.query\"\n            (input)=\"patchDraft({ query: queryInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"page=2&limit=10\"\n          />\n          <small>\n            parameters the request must carry; anything else it asks for is ignored. Empty answers whatever the query\n            string is - and a mock naming parameters wins over one that does not\n          </small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Status</span>\n          <input\n            #statusDraftInput\n            [value]=\"form.status\"\n            (input)=\"patchDraft({ status: statusDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"100\"\n            max=\"599\"\n            step=\"1\"\n          />\n          <small>400 and above arrive as a real error</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Latency</span>\n          <input\n            #latencyDraftInput\n            [value]=\"form.latencyMs\"\n            (input)=\"patchDraft({ latencyMs: latencyDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"0\"\n            max=\"60000\"\n            step=\"100\"\n          />\n          <small>ms before it settles</small>\n        </label>\n      </div>\n\n      @if (hasSchema()) {\n        <div class=\"et-query-devtools-seed\">\n          <span class=\"et-query-devtools-section\">Seed</span>\n          @if (isSchemaReady()) {\n            <select #routePick (change)=\"pickRoute(routePick.value)\" class=\"et-query-devtools-select\">\n              <option value=\"\">a route the API description declares\u2026</option>\n              @for (route of SCHEMA_ROUTES(); track route.method + route.pattern) {\n                <option value=\"{{ route.method }} {{ route.pattern }}\">\n                  {{ route.method }} {{ route.pattern }}{{ route.summary ? ' \u2014 ' + route.summary : '' }}\n                </option>\n              }\n            </select>\n            <button\n              (click)=\"seedFromDraftRoute()\"\n              class=\"et-query-devtools-btn\"\n              type=\"button\"\n              title=\"Generate a body from what the description says this path returns\"\n            >\n              From this path\n            </button>\n            <select #schemaPick (change)=\"pickedSchema.set(schemaPick.value)\" class=\"et-query-devtools-select\">\n              <option value=\"\">a named type\u2026</option>\n              @for (name of SCHEMA_NAMES(); track name) {\n                <option [value]=\"name\" [selected]=\"name === pickedSchema()\">{{ name }}</option>\n              }\n            </select>\n            <button [disabled]=\"!pickedSchema()\" (click)=\"seedFromSchema()\" class=\"et-query-devtools-btn\" type=\"button\">\n              From this type\n            </button>\n          } @else if (schemaError(); as error) {\n            <span class=\"et-query-devtools-settings-warn\">The API description could not be loaded: {{ error }}</span>\n          } @else {\n            <span class=\"et-query-devtools-count\">Loading the API description\u2026</span>\n          }\n        </div>\n      }\n\n      <label class=\"et-query-devtools-mock-body\">\n        <span class=\"et-query-devtools-section\">Body</span>\n        <textarea\n          #bodyInput\n          [value]=\"form.body\"\n          (input)=\"patchDraft({ body: bodyInput.value })\"\n          class=\"et-query-devtools-input et-query-devtools-mock-textarea\"\n          rows=\"8\"\n          spellcheck=\"false\"\n        ></textarea>\n      </label>\n\n      @if (draftSeed(); as seed) {\n        <p class=\"et-query-devtools-hint\">\n          Generated from the API description{{ seed.schemaName ? ' as ' + seed.schemaName : '' }} - a starting point,\n          not the contract. Saving opens the designer on it.\n        </p>\n        @if (seed.notes.length) {\n          <ul class=\"et-query-devtools-designer-notes\">\n            @for (note of seed.notes; track note) {\n              <li>{{ note }}</li>\n            }\n          </ul>\n        }\n      }\n\n      @if (draftError(); as error) {\n        <p class=\"et-query-devtools-settings-warn\">{{ error }}</p>\n      }\n\n      <div class=\"et-query-devtools-mock-head\">\n        <button (click)=\"saveDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n          Save to the library\n        </button>\n        <button (click)=\"closeDraft()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n      </div>\n    </div>\n  }\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Designed</strong>\n      <span class=\"et-query-devtools-count\">{{ rows().length }} in the library</span>\n      @if (rows().length) {\n        <div class=\"et-query-devtools-spec-export\">\n          <select #formatPick (change)=\"pickSpecFormat(formatPick.value)\" class=\"et-query-devtools-select\">\n            @for (format of SPEC_FORMATS; track format.value) {\n              <option [value]=\"format.value\" [selected]=\"format.value === specFormat()\">{{ format.label }}</option>\n            }\n          </select>\n          <button\n            (click)=\"exportLibrary()\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Download every designed route as one OpenAPI 3.1 document - the response schemas inferred from the designed bodies, each body as an example\"\n          >\n            <span aria-hidden=\"true\">\u21E9</span>\n            Export OpenAPI\n          </button>\n        </div>\n      }\n    </div>\n\n    @for (row of rows(); track row.mock.id) {\n      <div [class.et-query-devtools-mock-row--armed]=\"row.armed\" class=\"et-query-devtools-mock-row\">\n        <div class=\"et-query-devtools-mock-head\">\n          <button\n            [class.et-query-devtools-btn--tampered]=\"row.armed\"\n            [attr.aria-pressed]=\"row.armed\"\n            (click)=\"toggleArmed(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"{{ row.armed ? 'Stop serving this response' : 'Serve this response instead of the request' }}\"\n          >\n            {{ row.armed ? 'Armed' : 'Arm' }}\n          </button>\n          <span class=\"et-query-devtools-method\">{{ row.mock.method }}</span>\n          <span class=\"et-query-devtools-route et-query-devtools-mono\">{{ row.mock.pattern }}</span>\n          @if (row.mock.query) {\n            <span class=\"et-query-devtools-url\">?{{ row.mock.query }}</span>\n          }\n          <span class=\"et-query-devtools-url\">{{ row.mock.clientName }}</span>\n          @if (row.mock.capturedAt) {\n            <span class=\"et-query-devtools-chip\">captured</span>\n          }\n          @if (row.mock.schemaName; as schemaName) {\n            <span class=\"et-query-devtools-chip\" title=\"Seeded from the API description\">{{ schemaName }}</span>\n          }\n          @if (row.isSecure) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--error\"\n              title=\"A mock sends nothing, so no token is attached and the auth flow is never exercised\"\n            >\n              no auth\n            </span>\n          }\n          <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n          <button (click)=\"editBody(row)\" class=\"et-query-devtools-btn\" type=\"button\">Body</button>\n          <button\n            (click)=\"copyDefinition(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as a @ethlete/query definition - the response type inferred from the body, the args contract and the creator call\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedId() === row.mock.id ? 'Copied' : 'TS' }}\n          </button>\n          <button\n            (click)=\"copyPathItem(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as an OpenAPI paths entry, ready to paste under an existing description\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedSpecId() === row.mock.id ? 'Copied' : 'OAS' }}\n          </button>\n          <button (click)=\"remove(row)\" class=\"et-query-devtools-btn et-query-devtools-btn--danger\" type=\"button\">\n            Delete\n          </button>\n        </div>\n\n        <div class=\"et-query-devtools-mock-fields\">\n          <label class=\"et-query-devtools-field\">\n            <span>Status</span>\n            <input\n              #statusInput\n              [value]=\"row.mock.status\"\n              (change)=\"setStatus(row, statusInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"100\"\n              max=\"599\"\n              step=\"1\"\n            />\n            <small>400 and above arrive as a real error, body and all</small>\n          </label>\n          <label class=\"et-query-devtools-field\">\n            <span>Latency</span>\n            <input\n              #latencyInput\n              [value]=\"row.mock.latencyMs\"\n              (change)=\"setLatency(row, latencyInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"0\"\n              max=\"60000\"\n              step=\"100\"\n            />\n            <small>ms before it settles, so the route still has a loading state</small>\n          </label>\n        </div>\n\n        @if (editingId() === row.mock.id) {\n          <et-query-devtools-mock-designer\n            [body]=\"row.mock.body\"\n            [annotations]=\"editingAnnotations()\"\n            (save)=\"saveBody(row, $event)\"\n            (dismiss)=\"cancelBody()\"\n          />\n        }\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">\n        Nothing designed yet. <strong>New mock</strong> writes one from scratch; capturing below seeds one from\n        something that actually happened.\n      </p>\n    }\n\n    @if (specNotes().length) {\n      <ul class=\"et-query-devtools-designer-notes\">\n        @for (note of specNotes(); track note) {\n          <li>{{ note }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Capture</strong>\n      <span class=\"et-query-devtools-count\">live queries holding a response</span>\n    </div>\n\n    @for (row of captureRows(); track row.entry.id) {\n      <div class=\"et-query-devtools-mock-head\">\n        <span class=\"et-query-devtools-method\">{{ row.method }}</span>\n        <button\n          (click)=\"host.selectQuery(row.entry.id)\"\n          class=\"et-query-devtools-route et-query-devtools-mono et-query-devtools-row-link\"\n          type=\"button\"\n          title=\"Open this query\"\n        >\n          {{ row.pattern }}\n        </button>\n        <span class=\"et-query-devtools-url\">{{ row.clientName }}</span>\n        @if (row.shared > 1) {\n          <span class=\"et-query-devtools-count\" title=\"A mock answers the route, so it answers all of them\">\n            {{ row.shared }} queries\n          </span>\n        }\n        <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n        <button (click)=\"capture(row)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ row.exists ? 'Re-capture' : 'Capture' }}\n        </button>\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">No live query has a response yet.</p>\n    }\n  </div>\n</div>\n", styles: ["@layer components{.et-query-devtools-mocks-toolbar{align-items:flex-start}.et-query-devtools-mock-row{padding-block:.6rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-card>.et-query-devtools-mock-row:first-of-type{border-block-start:0;padding-block-start:0}.et-query-devtools-mock-row--armed{background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-mock-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-mock-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));align-items:start;gap:.4rem 1.6rem;padding-block-start:.4rem}.et-query-devtools-mock-fields .et-query-devtools-field{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:baseline;row-gap:.2rem;color:var(--_et-qdt-fg)}.et-query-devtools-mock-fields .et-query-devtools-field small{grid-column:2;color:var(--_et-qdt-subtle);font-size:1.1rem}.et-query-devtools-mock-fields .et-query-devtools-field--wide{grid-column:1 / -1;grid-template-columns:7rem minmax(0,1fr)}.et-query-devtools-spec-export{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto}.et-query-devtools-seed{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding-block-start:.4rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-seed .et-query-devtools-select{max-inline-size:32rem}.et-query-devtools-mock-body{display:block;padding-block-start:.4rem}.et-query-devtools-mock-textarea{display:block;inline-size:100%;resize:vertical;font-family:inherit;font-size:1.15rem;line-height:1.5;tab-size:2}}\n"], dependencies: [{ kind: "component", type: QueryDevtoolsMockDesignerComponent, selector: "et-query-devtools-mock-designer", inputs: ["body", "annotations", "notes"], outputs: ["save", "dismiss"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsMocksTabComponent, isStandalone: true, selector: "et-query-devtools-mocks-tab", ngImport: i0, template: "<div class=\"et-query-devtools-scroll\">\n  <div class=\"et-query-devtools-toolbar et-query-devtools-mocks-toolbar\">\n    <p class=\"et-query-devtools-hint\">\n      A mock replaces the request, so it answers a route that has never run - or does not exist yet. It bypasses the\n      interceptor chain by construction, so a mocked secure route never exercises the token flow. The library is kept;\n      whether a mock is <strong>armed</strong> is not, so a reload always stops serving them. GraphQL queries are not\n      offered: they all POST one route, so matching them needs the document rather than the path.\n    </p>\n    <div class=\"et-query-devtools-settings-controls\">\n      @if (rows().length && armedCount() < rows().length) {\n        <button\n          (click)=\"ARM_ALL()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Serve every mock in the library - the whole screen off the network at once\"\n        >\n          Arm all ({{ rows().length }})\n        </button>\n      }\n      @if (armedCount()) {\n        <button (click)=\"DISARM_ALL()\" class=\"et-query-devtools-btn\" type=\"button\">\n          Disarm all ({{ armedCount() }})\n        </button>\n      }\n      <button (click)=\"openDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n        <span aria-hidden=\"true\">\uFF0B</span>\n        New mock\n      </button>\n    </div>\n  </div>\n\n  @if (draft(); as form) {\n    <div class=\"et-query-devtools-card\">\n      <div class=\"et-query-devtools-card-head\">\n        <strong>New mock</strong>\n        <span class=\"et-query-devtools-count\">for any route, whether a query has ever called it or not</span>\n      </div>\n\n      <div class=\"et-query-devtools-mock-fields\">\n        <label class=\"et-query-devtools-field\">\n          <span>Client</span>\n          <select #clientSelect (change)=\"pickClient(clientSelect.value)\" class=\"et-query-devtools-select\">\n            @for (name of host.clientNames(); track name) {\n              <option [value]=\"name\" [selected]=\"name === form.clientName\">{{ name }}</option>\n            }\n          </select>\n          <small>a mock answers one client, matched by name</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Method</span>\n          <select #methodSelect (change)=\"patchDraft({ method: methodSelect.value })\" class=\"et-query-devtools-select\">\n            @for (method of METHODS; track method) {\n              <option [value]=\"method\" [selected]=\"method === form.method\">{{ method }}</option>\n            }\n          </select>\n          <small>matched exactly</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Path</span>\n          <input\n            #patternInput\n            [value]=\"form.pattern\"\n            (input)=\"patchDraft({ pattern: patternInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"/posts/:id/comments\"\n          />\n          <small><code>:name</code> matches any one segment, so the route is mocked rather than one URL</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Query</span>\n          <input\n            #queryInput\n            [value]=\"form.query\"\n            (input)=\"patchDraft({ query: queryInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"page=2&limit=10\"\n          />\n          <small>\n            parameters the request must carry; anything else it asks for is ignored. Empty answers whatever the query\n            string is - and a mock naming parameters wins over one that does not\n          </small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Status</span>\n          <input\n            #statusDraftInput\n            [value]=\"form.status\"\n            (input)=\"patchDraft({ status: statusDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"100\"\n            max=\"599\"\n            step=\"1\"\n          />\n          <small>400 and above arrive as a real error</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Latency</span>\n          <input\n            #latencyDraftInput\n            [value]=\"form.latencyMs\"\n            (input)=\"patchDraft({ latencyMs: latencyDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"0\"\n            max=\"60000\"\n            step=\"100\"\n          />\n          <small>ms before it settles</small>\n        </label>\n      </div>\n\n      @if (hasSchema()) {\n        <div class=\"et-query-devtools-seed\">\n          <span class=\"et-query-devtools-section\">Seed</span>\n          @if (isSchemaReady()) {\n            <div class=\"et-query-devtools-seed-pick\">\n              <et-select\n                [options]=\"routeOptions()\"\n                (pickOption)=\"pickRoute($event)\"\n                class=\"et-query-devtools-combobox\"\n                mirrorPanelWidth=\"false\"\n                pickOnly\n              >\n                <input etSelectSearch placeholder=\"search the routes it declares\u2026\" />\n              </et-select>\n              <button\n                (click)=\"seedFromDraftRoute()\"\n                class=\"et-query-devtools-btn\"\n                type=\"button\"\n                title=\"Generate a body from what the description says this path returns\"\n              >\n                From this path\n              </button>\n            </div>\n            <div class=\"et-query-devtools-seed-pick\">\n              <et-select\n                [value]=\"pickedSchema()\"\n                [options]=\"schemaNameOptions()\"\n                (valueChange)=\"pickSchema($event)\"\n                class=\"et-query-devtools-combobox\"\n                mirrorPanelWidth=\"false\"\n              >\n                <input etSelectSearch placeholder=\"search its named types\u2026\" />\n              </et-select>\n              <button\n                [disabled]=\"!pickedSchema()\"\n                (click)=\"seedFromSchema()\"\n                class=\"et-query-devtools-btn\"\n                type=\"button\"\n              >\n                From this type\n              </button>\n            </div>\n            <select\n              #stylePick\n              (change)=\"pickSeedStyle(stylePick.value)\"\n              class=\"et-query-devtools-select\"\n              title=\"How lifelike the generated values are\"\n            >\n              @for (style of SEED_STYLES; track style.value) {\n                <option [value]=\"style.value\" [selected]=\"style.value === seedStyle()\">{{ style.label }}</option>\n              }\n            </select>\n            <small class=\"et-query-devtools-hint et-query-devtools-seed-hint\">{{ seedStyleHint() }}</small>\n          } @else if (schemaError(); as error) {\n            <span class=\"et-query-devtools-settings-warn\">The API description could not be loaded: {{ error }}</span>\n          } @else {\n            <span class=\"et-query-devtools-count\">Loading the API description\u2026</span>\n          }\n        </div>\n      }\n\n      <label class=\"et-query-devtools-mock-body\">\n        <span class=\"et-query-devtools-section\">Body</span>\n        <textarea\n          #bodyInput\n          [value]=\"form.body\"\n          (input)=\"patchDraft({ body: bodyInput.value })\"\n          class=\"et-query-devtools-input et-query-devtools-mock-textarea\"\n          rows=\"8\"\n          spellcheck=\"false\"\n        ></textarea>\n      </label>\n\n      @if (draftSeed(); as seed) {\n        <p class=\"et-query-devtools-hint\">\n          Generated from the API description{{ seed.schemaName ? ' as ' + seed.schemaName : '' }} - a starting point,\n          not the contract. Saving opens the designer on it.\n        </p>\n        @if (seed.notes.length) {\n          <ul class=\"et-query-devtools-designer-notes\">\n            @for (note of seed.notes; track note) {\n              <li>{{ note }}</li>\n            }\n          </ul>\n        }\n      }\n\n      @if (draftError(); as error) {\n        <p class=\"et-query-devtools-settings-warn\">{{ error }}</p>\n      }\n\n      <div class=\"et-query-devtools-mock-head\">\n        <button (click)=\"saveDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n          Save to the library\n        </button>\n        <button (click)=\"closeDraft()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n      </div>\n    </div>\n  }\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Designed</strong>\n      <span class=\"et-query-devtools-count\">{{ rows().length }} in the library</span>\n      @if (rows().length) {\n        <div class=\"et-query-devtools-spec-export\">\n          <select #formatPick (change)=\"pickSpecFormat(formatPick.value)\" class=\"et-query-devtools-select\">\n            @for (format of SPEC_FORMATS; track format.value) {\n              <option [value]=\"format.value\" [selected]=\"format.value === specFormat()\">{{ format.label }}</option>\n            }\n          </select>\n          <button\n            (click)=\"exportLibrary()\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Download every designed route as one OpenAPI 3.1 document - the response schemas inferred from the designed bodies, each body as an example\"\n          >\n            <span aria-hidden=\"true\">\u21E9</span>\n            Export OpenAPI\n          </button>\n        </div>\n      }\n    </div>\n\n    @for (row of rows(); track row.mock.id) {\n      <div [class.et-query-devtools-mock-row--armed]=\"row.armed\" class=\"et-query-devtools-mock-row\">\n        <div class=\"et-query-devtools-mock-head\">\n          <button\n            [class.et-query-devtools-btn--tampered]=\"row.armed\"\n            [attr.aria-pressed]=\"row.armed\"\n            (click)=\"toggleArmed(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"{{ row.armed ? 'Stop serving this response' : 'Serve this response instead of the request' }}\"\n          >\n            {{ row.armed ? 'Armed' : 'Arm' }}\n          </button>\n          <span class=\"et-query-devtools-method\">{{ row.mock.method }}</span>\n          <span class=\"et-query-devtools-route et-query-devtools-mono\">{{ row.mock.pattern }}</span>\n          @if (row.mock.query) {\n            <span class=\"et-query-devtools-url\">?{{ row.mock.query }}</span>\n          }\n          <span class=\"et-query-devtools-url\">{{ row.mock.clientName }}</span>\n          @if (row.mock.capturedAt) {\n            <span class=\"et-query-devtools-chip\">captured</span>\n          }\n          @if (row.mock.schemaName; as schemaName) {\n            <span class=\"et-query-devtools-chip\" title=\"Seeded from the API description\">{{ schemaName }}</span>\n          }\n          @if (row.isSecure) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--error\"\n              title=\"A mock sends nothing, so no token is attached and the auth flow is never exercised\"\n            >\n              no auth\n            </span>\n          }\n          <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n          <button (click)=\"editBody(row)\" class=\"et-query-devtools-btn\" type=\"button\">Body</button>\n          <button\n            (click)=\"copyDefinition(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as a @ethlete/query definition - the response type inferred from the body, the args contract and the creator call\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedId() === row.mock.id ? 'Copied' : 'TS' }}\n          </button>\n          <button\n            (click)=\"copyPathItem(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as an OpenAPI paths entry, ready to paste under an existing description\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedSpecId() === row.mock.id ? 'Copied' : 'OAS' }}\n          </button>\n          <button (click)=\"remove(row)\" class=\"et-query-devtools-btn et-query-devtools-btn--danger\" type=\"button\">\n            Delete\n          </button>\n        </div>\n\n        <div class=\"et-query-devtools-mock-fields\">\n          <label class=\"et-query-devtools-field\">\n            <span>Status</span>\n            <input\n              #statusInput\n              [value]=\"row.mock.status\"\n              (change)=\"setStatus(row, statusInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"100\"\n              max=\"599\"\n              step=\"1\"\n            />\n            <small>400 and above arrive as a real error, body and all</small>\n          </label>\n          <label class=\"et-query-devtools-field\">\n            <span>Latency</span>\n            <input\n              #latencyInput\n              [value]=\"row.mock.latencyMs\"\n              (change)=\"setLatency(row, latencyInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"0\"\n              max=\"60000\"\n              step=\"100\"\n            />\n            <small>ms before it settles, so the route still has a loading state</small>\n          </label>\n        </div>\n\n        @if (editingId() === row.mock.id) {\n          <et-query-devtools-mock-designer\n            [body]=\"row.mock.body\"\n            [annotations]=\"editingAnnotations()\"\n            (save)=\"saveBody(row, $event)\"\n            (dismiss)=\"cancelBody()\"\n          />\n        }\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">\n        Nothing designed yet. <strong>New mock</strong> writes one from scratch; capturing below seeds one from\n        something that actually happened.\n      </p>\n    }\n\n    @if (specNotes().length) {\n      <ul class=\"et-query-devtools-designer-notes\">\n        @for (note of specNotes(); track note) {\n          <li>{{ note }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Capture</strong>\n      <span class=\"et-query-devtools-count\">live queries holding a response</span>\n    </div>\n\n    @for (row of captureRows(); track row.entry.id) {\n      <div class=\"et-query-devtools-mock-head\">\n        <span class=\"et-query-devtools-method\">{{ row.method }}</span>\n        <button\n          (click)=\"host.selectQuery(row.entry.id)\"\n          class=\"et-query-devtools-route et-query-devtools-mono et-query-devtools-row-link\"\n          type=\"button\"\n          title=\"Open this query\"\n        >\n          {{ row.pattern }}\n        </button>\n        <span class=\"et-query-devtools-url\">{{ row.clientName }}</span>\n        @if (row.shared > 1) {\n          <span class=\"et-query-devtools-count\" title=\"A mock answers the route, so it answers all of them\">\n            {{ row.shared }} queries\n          </span>\n        }\n        <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n        <button (click)=\"capture(row)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ row.exists ? 'Re-capture' : 'Capture' }}\n        </button>\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">No live query has a response yet.</p>\n    }\n  </div>\n</div>\n", styles: ["@layer components{.et-query-devtools-mocks-toolbar{align-items:flex-start}.et-query-devtools-mock-row{padding-block:.6rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-card>.et-query-devtools-mock-row:first-of-type{border-block-start:0;padding-block-start:0}.et-query-devtools-mock-row--armed{background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-mock-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-mock-fields,.et-query-devtools-seed,.et-query-devtools-mock-body{max-inline-size:96rem}.et-query-devtools-mock-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(38rem,1fr));align-items:start;gap:.4rem 1.6rem;padding-block-start:.4rem}.et-query-devtools-mock-fields .et-query-devtools-field{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:baseline;row-gap:.2rem;color:var(--_et-qdt-fg)}.et-query-devtools-mock-fields .et-query-devtools-select{justify-self:start;max-inline-size:100%}.et-query-devtools-mock-fields .et-query-devtools-field small{grid-column:2;color:var(--_et-qdt-subtle);font-size:1.1rem}.et-query-devtools-mock-fields .et-query-devtools-field--wide{grid-column:1 / -1;grid-template-columns:7rem minmax(0,1fr)}.et-query-devtools-spec-export{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto}.et-query-devtools-seed{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 2.4rem;padding-block-start:.4rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-seed-pick{display:flex;align-items:center;gap:.2rem}.et-query-devtools-seed .et-query-devtools-select{max-inline-size:32rem}.et-query-devtools-combobox{flex:0 1 auto;inline-size:32rem;min-block-size:var(--_et-qdt-control-h);box-sizing:border-box;background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,var(--_et-qdt-bg));color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .6rem;font-size:1.15rem}.et-query-devtools-combobox input{background:none;border:0;padding:0;color:inherit;font:inherit}.et-query-devtools-seed-hint{flex-basis:100%;margin:0}.et-query-devtools-mock-body{display:block;padding-block-start:.4rem}.et-query-devtools-mock-textarea{display:block;inline-size:100%;resize:vertical;font-family:inherit;font-size:1.15rem;line-height:1.5;tab-size:2}}\n"], dependencies: [{ kind: "component", type: QueryDevtoolsMockDesignerComponent, selector: "et-query-devtools-mock-designer", inputs: ["body", "annotations", "notes"], outputs: ["save", "dismiss"] }, { kind: "component", type: SelectComponent, selector: "et-select", inputs: ["loadMoreLabel", "addNewLabel", "createLabel", "clearable", "clearLabel"] }, { kind: "directive", type: SelectSearchDirective, selector: "input[etSelectSearch]", inputs: ["query"], outputs: ["queryChange"], exportAs: ["etSelectSearch"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsMocksTabComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-query-devtools-mocks-tab', encapsulation: ViewEncapsulation.None, imports: [QueryDevtoolsMockDesignerComponent], template: "<div class=\"et-query-devtools-scroll\">\n  <div class=\"et-query-devtools-toolbar et-query-devtools-mocks-toolbar\">\n    <p class=\"et-query-devtools-hint\">\n      A mock replaces the request, so it answers a route that has never run - or does not exist yet. It bypasses the\n      interceptor chain by construction, so a mocked secure route never exercises the token flow. The library is kept;\n      whether a mock is <strong>armed</strong> is not, so a reload always stops serving them. GraphQL queries are not\n      offered: they all POST one route, so matching them needs the document rather than the path.\n    </p>\n    <div class=\"et-query-devtools-settings-controls\">\n      @if (rows().length && armedCount() < rows().length) {\n        <button\n          (click)=\"ARM_ALL()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Serve every mock in the library - the whole screen off the network at once\"\n        >\n          Arm all ({{ rows().length }})\n        </button>\n      }\n      @if (armedCount()) {\n        <button (click)=\"DISARM_ALL()\" class=\"et-query-devtools-btn\" type=\"button\">\n          Disarm all ({{ armedCount() }})\n        </button>\n      }\n      <button (click)=\"openDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n        <span aria-hidden=\"true\">\uFF0B</span>\n        New mock\n      </button>\n    </div>\n  </div>\n\n  @if (draft(); as form) {\n    <div class=\"et-query-devtools-card\">\n      <div class=\"et-query-devtools-card-head\">\n        <strong>New mock</strong>\n        <span class=\"et-query-devtools-count\">for any route, whether a query has ever called it or not</span>\n      </div>\n\n      <div class=\"et-query-devtools-mock-fields\">\n        <label class=\"et-query-devtools-field\">\n          <span>Client</span>\n          <select\n            #clientSelect\n            (change)=\"patchDraft({ clientName: clientSelect.value })\"\n            class=\"et-query-devtools-select\"\n          >\n            @for (name of host.clientNames(); track name) {\n              <option [value]=\"name\" [selected]=\"name === form.clientName\">{{ name }}</option>\n            }\n          </select>\n          <small>a mock answers one client, matched by name</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Method</span>\n          <select #methodSelect (change)=\"patchDraft({ method: methodSelect.value })\" class=\"et-query-devtools-select\">\n            @for (method of METHODS; track method) {\n              <option [value]=\"method\" [selected]=\"method === form.method\">{{ method }}</option>\n            }\n          </select>\n          <small>matched exactly</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Path</span>\n          <input\n            #patternInput\n            [value]=\"form.pattern\"\n            (input)=\"patchDraft({ pattern: patternInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"/posts/:id/comments\"\n          />\n          <small><code>:name</code> matches any one segment, so the route is mocked rather than one URL</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Query</span>\n          <input\n            #queryInput\n            [value]=\"form.query\"\n            (input)=\"patchDraft({ query: queryInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"page=2&limit=10\"\n          />\n          <small>\n            parameters the request must carry; anything else it asks for is ignored. Empty answers whatever the query\n            string is - and a mock naming parameters wins over one that does not\n          </small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Status</span>\n          <input\n            #statusDraftInput\n            [value]=\"form.status\"\n            (input)=\"patchDraft({ status: statusDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"100\"\n            max=\"599\"\n            step=\"1\"\n          />\n          <small>400 and above arrive as a real error</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Latency</span>\n          <input\n            #latencyDraftInput\n            [value]=\"form.latencyMs\"\n            (input)=\"patchDraft({ latencyMs: latencyDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"0\"\n            max=\"60000\"\n            step=\"100\"\n          />\n          <small>ms before it settles</small>\n        </label>\n      </div>\n\n      @if (hasSchema()) {\n        <div class=\"et-query-devtools-seed\">\n          <span class=\"et-query-devtools-section\">Seed</span>\n          @if (isSchemaReady()) {\n            <select #routePick (change)=\"pickRoute(routePick.value)\" class=\"et-query-devtools-select\">\n              <option value=\"\">a route the API description declares\u2026</option>\n              @for (route of SCHEMA_ROUTES(); track route.method + route.pattern) {\n                <option value=\"{{ route.method }} {{ route.pattern }}\">\n                  {{ route.method }} {{ route.pattern }}{{ route.summary ? ' \u2014 ' + route.summary : '' }}\n                </option>\n              }\n            </select>\n            <button\n              (click)=\"seedFromDraftRoute()\"\n              class=\"et-query-devtools-btn\"\n              type=\"button\"\n              title=\"Generate a body from what the description says this path returns\"\n            >\n              From this path\n            </button>\n            <select #schemaPick (change)=\"pickedSchema.set(schemaPick.value)\" class=\"et-query-devtools-select\">\n              <option value=\"\">a named type\u2026</option>\n              @for (name of SCHEMA_NAMES(); track name) {\n                <option [value]=\"name\" [selected]=\"name === pickedSchema()\">{{ name }}</option>\n              }\n            </select>\n            <button [disabled]=\"!pickedSchema()\" (click)=\"seedFromSchema()\" class=\"et-query-devtools-btn\" type=\"button\">\n              From this type\n            </button>\n          } @else if (schemaError(); as error) {\n            <span class=\"et-query-devtools-settings-warn\">The API description could not be loaded: {{ error }}</span>\n          } @else {\n            <span class=\"et-query-devtools-count\">Loading the API description\u2026</span>\n          }\n        </div>\n      }\n\n      <label class=\"et-query-devtools-mock-body\">\n        <span class=\"et-query-devtools-section\">Body</span>\n        <textarea\n          #bodyInput\n          [value]=\"form.body\"\n          (input)=\"patchDraft({ body: bodyInput.value })\"\n          class=\"et-query-devtools-input et-query-devtools-mock-textarea\"\n          rows=\"8\"\n          spellcheck=\"false\"\n        ></textarea>\n      </label>\n\n      @if (draftSeed(); as seed) {\n        <p class=\"et-query-devtools-hint\">\n          Generated from the API description{{ seed.schemaName ? ' as ' + seed.schemaName : '' }} - a starting point,\n          not the contract. Saving opens the designer on it.\n        </p>\n        @if (seed.notes.length) {\n          <ul class=\"et-query-devtools-designer-notes\">\n            @for (note of seed.notes; track note) {\n              <li>{{ note }}</li>\n            }\n          </ul>\n        }\n      }\n\n      @if (draftError(); as error) {\n        <p class=\"et-query-devtools-settings-warn\">{{ error }}</p>\n      }\n\n      <div class=\"et-query-devtools-mock-head\">\n        <button (click)=\"saveDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n          Save to the library\n        </button>\n        <button (click)=\"closeDraft()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n      </div>\n    </div>\n  }\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Designed</strong>\n      <span class=\"et-query-devtools-count\">{{ rows().length }} in the library</span>\n      @if (rows().length) {\n        <div class=\"et-query-devtools-spec-export\">\n          <select #formatPick (change)=\"pickSpecFormat(formatPick.value)\" class=\"et-query-devtools-select\">\n            @for (format of SPEC_FORMATS; track format.value) {\n              <option [value]=\"format.value\" [selected]=\"format.value === specFormat()\">{{ format.label }}</option>\n            }\n          </select>\n          <button\n            (click)=\"exportLibrary()\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Download every designed route as one OpenAPI 3.1 document - the response schemas inferred from the designed bodies, each body as an example\"\n          >\n            <span aria-hidden=\"true\">\u21E9</span>\n            Export OpenAPI\n          </button>\n        </div>\n      }\n    </div>\n\n    @for (row of rows(); track row.mock.id) {\n      <div [class.et-query-devtools-mock-row--armed]=\"row.armed\" class=\"et-query-devtools-mock-row\">\n        <div class=\"et-query-devtools-mock-head\">\n          <button\n            [class.et-query-devtools-btn--tampered]=\"row.armed\"\n            [attr.aria-pressed]=\"row.armed\"\n            (click)=\"toggleArmed(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"{{ row.armed ? 'Stop serving this response' : 'Serve this response instead of the request' }}\"\n          >\n            {{ row.armed ? 'Armed' : 'Arm' }}\n          </button>\n          <span class=\"et-query-devtools-method\">{{ row.mock.method }}</span>\n          <span class=\"et-query-devtools-route et-query-devtools-mono\">{{ row.mock.pattern }}</span>\n          @if (row.mock.query) {\n            <span class=\"et-query-devtools-url\">?{{ row.mock.query }}</span>\n          }\n          <span class=\"et-query-devtools-url\">{{ row.mock.clientName }}</span>\n          @if (row.mock.capturedAt) {\n            <span class=\"et-query-devtools-chip\">captured</span>\n          }\n          @if (row.mock.schemaName; as schemaName) {\n            <span class=\"et-query-devtools-chip\" title=\"Seeded from the API description\">{{ schemaName }}</span>\n          }\n          @if (row.isSecure) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--error\"\n              title=\"A mock sends nothing, so no token is attached and the auth flow is never exercised\"\n            >\n              no auth\n            </span>\n          }\n          <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n          <button (click)=\"editBody(row)\" class=\"et-query-devtools-btn\" type=\"button\">Body</button>\n          <button\n            (click)=\"copyDefinition(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as a @ethlete/query definition - the response type inferred from the body, the args contract and the creator call\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedId() === row.mock.id ? 'Copied' : 'TS' }}\n          </button>\n          <button\n            (click)=\"copyPathItem(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as an OpenAPI paths entry, ready to paste under an existing description\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedSpecId() === row.mock.id ? 'Copied' : 'OAS' }}\n          </button>\n          <button (click)=\"remove(row)\" class=\"et-query-devtools-btn et-query-devtools-btn--danger\" type=\"button\">\n            Delete\n          </button>\n        </div>\n\n        <div class=\"et-query-devtools-mock-fields\">\n          <label class=\"et-query-devtools-field\">\n            <span>Status</span>\n            <input\n              #statusInput\n              [value]=\"row.mock.status\"\n              (change)=\"setStatus(row, statusInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"100\"\n              max=\"599\"\n              step=\"1\"\n            />\n            <small>400 and above arrive as a real error, body and all</small>\n          </label>\n          <label class=\"et-query-devtools-field\">\n            <span>Latency</span>\n            <input\n              #latencyInput\n              [value]=\"row.mock.latencyMs\"\n              (change)=\"setLatency(row, latencyInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"0\"\n              max=\"60000\"\n              step=\"100\"\n            />\n            <small>ms before it settles, so the route still has a loading state</small>\n          </label>\n        </div>\n\n        @if (editingId() === row.mock.id) {\n          <et-query-devtools-mock-designer\n            [body]=\"row.mock.body\"\n            [annotations]=\"editingAnnotations()\"\n            (save)=\"saveBody(row, $event)\"\n            (dismiss)=\"cancelBody()\"\n          />\n        }\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">\n        Nothing designed yet. <strong>New mock</strong> writes one from scratch; capturing below seeds one from\n        something that actually happened.\n      </p>\n    }\n\n    @if (specNotes().length) {\n      <ul class=\"et-query-devtools-designer-notes\">\n        @for (note of specNotes(); track note) {\n          <li>{{ note }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Capture</strong>\n      <span class=\"et-query-devtools-count\">live queries holding a response</span>\n    </div>\n\n    @for (row of captureRows(); track row.entry.id) {\n      <div class=\"et-query-devtools-mock-head\">\n        <span class=\"et-query-devtools-method\">{{ row.method }}</span>\n        <button\n          (click)=\"host.selectQuery(row.entry.id)\"\n          class=\"et-query-devtools-route et-query-devtools-mono et-query-devtools-row-link\"\n          type=\"button\"\n          title=\"Open this query\"\n        >\n          {{ row.pattern }}\n        </button>\n        <span class=\"et-query-devtools-url\">{{ row.clientName }}</span>\n        @if (row.shared > 1) {\n          <span class=\"et-query-devtools-count\" title=\"A mock answers the route, so it answers all of them\">\n            {{ row.shared }} queries\n          </span>\n        }\n        <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n        <button (click)=\"capture(row)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ row.exists ? 'Re-capture' : 'Capture' }}\n        </button>\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">No live query has a response yet.</p>\n    }\n  </div>\n</div>\n", styles: ["@layer components{.et-query-devtools-mocks-toolbar{align-items:flex-start}.et-query-devtools-mock-row{padding-block:.6rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-card>.et-query-devtools-mock-row:first-of-type{border-block-start:0;padding-block-start:0}.et-query-devtools-mock-row--armed{background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-mock-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-mock-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));align-items:start;gap:.4rem 1.6rem;padding-block-start:.4rem}.et-query-devtools-mock-fields .et-query-devtools-field{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:baseline;row-gap:.2rem;color:var(--_et-qdt-fg)}.et-query-devtools-mock-fields .et-query-devtools-field small{grid-column:2;color:var(--_et-qdt-subtle);font-size:1.1rem}.et-query-devtools-mock-fields .et-query-devtools-field--wide{grid-column:1 / -1;grid-template-columns:7rem minmax(0,1fr)}.et-query-devtools-spec-export{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto}.et-query-devtools-seed{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding-block-start:.4rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-seed .et-query-devtools-select{max-inline-size:32rem}.et-query-devtools-mock-body{display:block;padding-block-start:.4rem}.et-query-devtools-mock-textarea{display:block;inline-size:100%;resize:vertical;font-family:inherit;font-size:1.15rem;line-height:1.5;tab-size:2}}\n"] }]
+            args: [{ selector: 'et-query-devtools-mocks-tab', encapsulation: ViewEncapsulation.None, imports: [QueryDevtoolsMockDesignerComponent, SelectComponent, SelectSearchDirective], template: "<div class=\"et-query-devtools-scroll\">\n  <div class=\"et-query-devtools-toolbar et-query-devtools-mocks-toolbar\">\n    <p class=\"et-query-devtools-hint\">\n      A mock replaces the request, so it answers a route that has never run - or does not exist yet. It bypasses the\n      interceptor chain by construction, so a mocked secure route never exercises the token flow. The library is kept;\n      whether a mock is <strong>armed</strong> is not, so a reload always stops serving them. GraphQL queries are not\n      offered: they all POST one route, so matching them needs the document rather than the path.\n    </p>\n    <div class=\"et-query-devtools-settings-controls\">\n      @if (rows().length && armedCount() < rows().length) {\n        <button\n          (click)=\"ARM_ALL()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Serve every mock in the library - the whole screen off the network at once\"\n        >\n          Arm all ({{ rows().length }})\n        </button>\n      }\n      @if (armedCount()) {\n        <button (click)=\"DISARM_ALL()\" class=\"et-query-devtools-btn\" type=\"button\">\n          Disarm all ({{ armedCount() }})\n        </button>\n      }\n      <button (click)=\"openDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n        <span aria-hidden=\"true\">\uFF0B</span>\n        New mock\n      </button>\n    </div>\n  </div>\n\n  @if (draft(); as form) {\n    <div class=\"et-query-devtools-card\">\n      <div class=\"et-query-devtools-card-head\">\n        <strong>New mock</strong>\n        <span class=\"et-query-devtools-count\">for any route, whether a query has ever called it or not</span>\n      </div>\n\n      <div class=\"et-query-devtools-mock-fields\">\n        <label class=\"et-query-devtools-field\">\n          <span>Client</span>\n          <select #clientSelect (change)=\"pickClient(clientSelect.value)\" class=\"et-query-devtools-select\">\n            @for (name of host.clientNames(); track name) {\n              <option [value]=\"name\" [selected]=\"name === form.clientName\">{{ name }}</option>\n            }\n          </select>\n          <small>a mock answers one client, matched by name</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Method</span>\n          <select #methodSelect (change)=\"patchDraft({ method: methodSelect.value })\" class=\"et-query-devtools-select\">\n            @for (method of METHODS; track method) {\n              <option [value]=\"method\" [selected]=\"method === form.method\">{{ method }}</option>\n            }\n          </select>\n          <small>matched exactly</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Path</span>\n          <input\n            #patternInput\n            [value]=\"form.pattern\"\n            (input)=\"patchDraft({ pattern: patternInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"/posts/:id/comments\"\n          />\n          <small><code>:name</code> matches any one segment, so the route is mocked rather than one URL</small>\n        </label>\n\n        <label class=\"et-query-devtools-field et-query-devtools-field--wide\">\n          <span>Query</span>\n          <input\n            #queryInput\n            [value]=\"form.query\"\n            (input)=\"patchDraft({ query: queryInput.value })\"\n            class=\"et-query-devtools-input\"\n            type=\"text\"\n            placeholder=\"page=2&limit=10\"\n          />\n          <small>\n            parameters the request must carry; anything else it asks for is ignored. Empty answers whatever the query\n            string is - and a mock naming parameters wins over one that does not\n          </small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Status</span>\n          <input\n            #statusDraftInput\n            [value]=\"form.status\"\n            (input)=\"patchDraft({ status: statusDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"100\"\n            max=\"599\"\n            step=\"1\"\n          />\n          <small>400 and above arrive as a real error</small>\n        </label>\n\n        <label class=\"et-query-devtools-field\">\n          <span>Latency</span>\n          <input\n            #latencyDraftInput\n            [value]=\"form.latencyMs\"\n            (input)=\"patchDraft({ latencyMs: latencyDraftInput.value })\"\n            class=\"et-query-devtools-input et-query-devtools-input--number\"\n            type=\"number\"\n            min=\"0\"\n            max=\"60000\"\n            step=\"100\"\n          />\n          <small>ms before it settles</small>\n        </label>\n      </div>\n\n      @if (hasSchema()) {\n        <div class=\"et-query-devtools-seed\">\n          <span class=\"et-query-devtools-section\">Seed</span>\n          @if (isSchemaReady()) {\n            <div class=\"et-query-devtools-seed-pick\">\n              <et-select\n                [options]=\"routeOptions()\"\n                (pickOption)=\"pickRoute($event)\"\n                class=\"et-query-devtools-combobox\"\n                mirrorPanelWidth=\"false\"\n                pickOnly\n              >\n                <input etSelectSearch placeholder=\"search the routes it declares\u2026\" />\n              </et-select>\n              <button\n                (click)=\"seedFromDraftRoute()\"\n                class=\"et-query-devtools-btn\"\n                type=\"button\"\n                title=\"Generate a body from what the description says this path returns\"\n              >\n                From this path\n              </button>\n            </div>\n            <div class=\"et-query-devtools-seed-pick\">\n              <et-select\n                [value]=\"pickedSchema()\"\n                [options]=\"schemaNameOptions()\"\n                (valueChange)=\"pickSchema($event)\"\n                class=\"et-query-devtools-combobox\"\n                mirrorPanelWidth=\"false\"\n              >\n                <input etSelectSearch placeholder=\"search its named types\u2026\" />\n              </et-select>\n              <button\n                [disabled]=\"!pickedSchema()\"\n                (click)=\"seedFromSchema()\"\n                class=\"et-query-devtools-btn\"\n                type=\"button\"\n              >\n                From this type\n              </button>\n            </div>\n            <select\n              #stylePick\n              (change)=\"pickSeedStyle(stylePick.value)\"\n              class=\"et-query-devtools-select\"\n              title=\"How lifelike the generated values are\"\n            >\n              @for (style of SEED_STYLES; track style.value) {\n                <option [value]=\"style.value\" [selected]=\"style.value === seedStyle()\">{{ style.label }}</option>\n              }\n            </select>\n            <small class=\"et-query-devtools-hint et-query-devtools-seed-hint\">{{ seedStyleHint() }}</small>\n          } @else if (schemaError(); as error) {\n            <span class=\"et-query-devtools-settings-warn\">The API description could not be loaded: {{ error }}</span>\n          } @else {\n            <span class=\"et-query-devtools-count\">Loading the API description\u2026</span>\n          }\n        </div>\n      }\n\n      <label class=\"et-query-devtools-mock-body\">\n        <span class=\"et-query-devtools-section\">Body</span>\n        <textarea\n          #bodyInput\n          [value]=\"form.body\"\n          (input)=\"patchDraft({ body: bodyInput.value })\"\n          class=\"et-query-devtools-input et-query-devtools-mock-textarea\"\n          rows=\"8\"\n          spellcheck=\"false\"\n        ></textarea>\n      </label>\n\n      @if (draftSeed(); as seed) {\n        <p class=\"et-query-devtools-hint\">\n          Generated from the API description{{ seed.schemaName ? ' as ' + seed.schemaName : '' }} - a starting point,\n          not the contract. Saving opens the designer on it.\n        </p>\n        @if (seed.notes.length) {\n          <ul class=\"et-query-devtools-designer-notes\">\n            @for (note of seed.notes; track note) {\n              <li>{{ note }}</li>\n            }\n          </ul>\n        }\n      }\n\n      @if (draftError(); as error) {\n        <p class=\"et-query-devtools-settings-warn\">{{ error }}</p>\n      }\n\n      <div class=\"et-query-devtools-mock-head\">\n        <button (click)=\"saveDraft()\" class=\"et-query-devtools-btn et-query-devtools-btn--primary\" type=\"button\">\n          Save to the library\n        </button>\n        <button (click)=\"closeDraft()\" class=\"et-query-devtools-btn\" type=\"button\">Cancel</button>\n      </div>\n    </div>\n  }\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Designed</strong>\n      <span class=\"et-query-devtools-count\">{{ rows().length }} in the library</span>\n      @if (rows().length) {\n        <div class=\"et-query-devtools-spec-export\">\n          <select #formatPick (change)=\"pickSpecFormat(formatPick.value)\" class=\"et-query-devtools-select\">\n            @for (format of SPEC_FORMATS; track format.value) {\n              <option [value]=\"format.value\" [selected]=\"format.value === specFormat()\">{{ format.label }}</option>\n            }\n          </select>\n          <button\n            (click)=\"exportLibrary()\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Download every designed route as one OpenAPI 3.1 document - the response schemas inferred from the designed bodies, each body as an example\"\n          >\n            <span aria-hidden=\"true\">\u21E9</span>\n            Export OpenAPI\n          </button>\n        </div>\n      }\n    </div>\n\n    @for (row of rows(); track row.mock.id) {\n      <div [class.et-query-devtools-mock-row--armed]=\"row.armed\" class=\"et-query-devtools-mock-row\">\n        <div class=\"et-query-devtools-mock-head\">\n          <button\n            [class.et-query-devtools-btn--tampered]=\"row.armed\"\n            [attr.aria-pressed]=\"row.armed\"\n            (click)=\"toggleArmed(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"{{ row.armed ? 'Stop serving this response' : 'Serve this response instead of the request' }}\"\n          >\n            {{ row.armed ? 'Armed' : 'Arm' }}\n          </button>\n          <span class=\"et-query-devtools-method\">{{ row.mock.method }}</span>\n          <span class=\"et-query-devtools-route et-query-devtools-mono\">{{ row.mock.pattern }}</span>\n          @if (row.mock.query) {\n            <span class=\"et-query-devtools-url\">?{{ row.mock.query }}</span>\n          }\n          <span class=\"et-query-devtools-url\">{{ row.mock.clientName }}</span>\n          @if (row.mock.capturedAt) {\n            <span class=\"et-query-devtools-chip\">captured</span>\n          }\n          @if (row.mock.schemaName; as schemaName) {\n            <span class=\"et-query-devtools-chip\" title=\"Seeded from the API description\">{{ schemaName }}</span>\n          }\n          @if (row.isSecure) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--error\"\n              title=\"A mock sends nothing, so no token is attached and the auth flow is never exercised\"\n            >\n              no auth\n            </span>\n          }\n          <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n          <button (click)=\"editBody(row)\" class=\"et-query-devtools-btn\" type=\"button\">Body</button>\n          <button\n            (click)=\"copyDefinition(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as a @ethlete/query definition - the response type inferred from the body, the args contract and the creator call\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedId() === row.mock.id ? 'Copied' : 'TS' }}\n          </button>\n          <button\n            (click)=\"copyPathItem(row)\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n            title=\"Copy this route as an OpenAPI paths entry, ready to paste under an existing description\"\n          >\n            <span aria-hidden=\"true\">\u29C9</span>\n            {{ copiedSpecId() === row.mock.id ? 'Copied' : 'OAS' }}\n          </button>\n          <button (click)=\"remove(row)\" class=\"et-query-devtools-btn et-query-devtools-btn--danger\" type=\"button\">\n            Delete\n          </button>\n        </div>\n\n        <div class=\"et-query-devtools-mock-fields\">\n          <label class=\"et-query-devtools-field\">\n            <span>Status</span>\n            <input\n              #statusInput\n              [value]=\"row.mock.status\"\n              (change)=\"setStatus(row, statusInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"100\"\n              max=\"599\"\n              step=\"1\"\n            />\n            <small>400 and above arrive as a real error, body and all</small>\n          </label>\n          <label class=\"et-query-devtools-field\">\n            <span>Latency</span>\n            <input\n              #latencyInput\n              [value]=\"row.mock.latencyMs\"\n              (change)=\"setLatency(row, latencyInput.value)\"\n              class=\"et-query-devtools-input et-query-devtools-input--number\"\n              type=\"number\"\n              min=\"0\"\n              max=\"60000\"\n              step=\"100\"\n            />\n            <small>ms before it settles, so the route still has a loading state</small>\n          </label>\n        </div>\n\n        @if (editingId() === row.mock.id) {\n          <et-query-devtools-mock-designer\n            [body]=\"row.mock.body\"\n            [annotations]=\"editingAnnotations()\"\n            (save)=\"saveBody(row, $event)\"\n            (dismiss)=\"cancelBody()\"\n          />\n        }\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">\n        Nothing designed yet. <strong>New mock</strong> writes one from scratch; capturing below seeds one from\n        something that actually happened.\n      </p>\n    }\n\n    @if (specNotes().length) {\n      <ul class=\"et-query-devtools-designer-notes\">\n        @for (note of specNotes(); track note) {\n          <li>{{ note }}</li>\n        }\n      </ul>\n    }\n  </div>\n\n  <div class=\"et-query-devtools-card\">\n    <div class=\"et-query-devtools-card-head\">\n      <strong>Capture</strong>\n      <span class=\"et-query-devtools-count\">live queries holding a response</span>\n    </div>\n\n    @for (row of captureRows(); track row.entry.id) {\n      <div class=\"et-query-devtools-mock-head\">\n        <span class=\"et-query-devtools-method\">{{ row.method }}</span>\n        <button\n          (click)=\"host.selectQuery(row.entry.id)\"\n          class=\"et-query-devtools-route et-query-devtools-mono et-query-devtools-row-link\"\n          type=\"button\"\n          title=\"Open this query\"\n        >\n          {{ row.pattern }}\n        </button>\n        <span class=\"et-query-devtools-url\">{{ row.clientName }}</span>\n        @if (row.shared > 1) {\n          <span class=\"et-query-devtools-count\" title=\"A mock answers the route, so it answers all of them\">\n            {{ row.shared }} queries\n          </span>\n        }\n        <span class=\"et-query-devtools-count\">{{ host.formatBytes(row.bytes) }}</span>\n        <button (click)=\"capture(row)\" class=\"et-query-devtools-btn\" type=\"button\">\n          {{ row.exists ? 'Re-capture' : 'Capture' }}\n        </button>\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">No live query has a response yet.</p>\n    }\n  </div>\n</div>\n", styles: ["@layer components{.et-query-devtools-mocks-toolbar{align-items:flex-start}.et-query-devtools-mock-row{padding-block:.6rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-card>.et-query-devtools-mock-row:first-of-type{border-block-start:0;padding-block-start:0}.et-query-devtools-mock-row--armed{background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-mock-head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-mock-fields,.et-query-devtools-seed,.et-query-devtools-mock-body{max-inline-size:96rem}.et-query-devtools-mock-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(38rem,1fr));align-items:start;gap:.4rem 1.6rem;padding-block-start:.4rem}.et-query-devtools-mock-fields .et-query-devtools-field{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:baseline;row-gap:.2rem;color:var(--_et-qdt-fg)}.et-query-devtools-mock-fields .et-query-devtools-select{justify-self:start;max-inline-size:100%}.et-query-devtools-mock-fields .et-query-devtools-field small{grid-column:2;color:var(--_et-qdt-subtle);font-size:1.1rem}.et-query-devtools-mock-fields .et-query-devtools-field--wide{grid-column:1 / -1;grid-template-columns:7rem minmax(0,1fr)}.et-query-devtools-spec-export{display:flex;align-items:center;gap:.6rem;margin-inline-start:auto}.et-query-devtools-seed{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 2.4rem;padding-block-start:.4rem;min-block-size:var(--_et-qdt-row-h)}.et-query-devtools-seed-pick{display:flex;align-items:center;gap:.2rem}.et-query-devtools-seed .et-query-devtools-select{max-inline-size:32rem}.et-query-devtools-combobox{flex:0 1 auto;inline-size:32rem;min-block-size:var(--_et-qdt-control-h);box-sizing:border-box;background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,var(--_et-qdt-bg));color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .6rem;font-size:1.15rem}.et-query-devtools-combobox input{background:none;border:0;padding:0;color:inherit;font:inherit}.et-query-devtools-seed-hint{flex-basis:100%;margin:0}.et-query-devtools-mock-body{display:block;padding-block-start:.4rem}.et-query-devtools-mock-textarea{display:block;inline-size:100%;resize:vertical;font-family:inherit;font-size:1.15rem;line-height:1.5;tab-size:2}}\n"] }]
         }], ctorParameters: () => [] });
 
 /** The Faults tab: arms latency/failure injection per client - in-memory only, not persisted. */
@@ -3003,9 +3112,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             args: [{ selector: 'et-query-devtools-forms-tab', encapsulation: ViewEncapsulation.None, imports: [QueryDevtoolsDrawerComponent, QueryDevtoolsJsonComponent, QueryDevtoolsRouteComponent], template: "<div #panes class=\"et-query-devtools-split\">\n  <div class=\"et-query-devtools-scroll\">\n    @for (entry of host.formEntries(); track entry.id) {\n      @let form = host.asForm(entry);\n      @let expanded = host.selectedFormId() === entry.id;\n      <div class=\"et-query-devtools-card\">\n        <div class=\"et-query-devtools-card-head\">\n          <button\n            [attr.aria-expanded]=\"expanded\"\n            (click)=\"host.selectedFormId.set(expanded ? null : entry.id)\"\n            class=\"et-query-devtools-row-link\"\n            type=\"button\"\n          >\n            <span class=\"et-query-devtools-caret\">{{ expanded ? '\u25BE' : '\u25B8' }}</span>\n            <strong>{{ entry.meta.name || 'query form' }}</strong>\n          </button>\n          @if (form.activeFilterCount(); as count) {\n            <span class=\"et-query-devtools-chip\">{{ count }} active</span>\n          } @else {\n            <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">at defaults</span>\n          }\n          @if (form.isCommitPending()) {\n            <span class=\"et-query-devtools-chip et-query-devtools-chip--loading\">debouncing</span>\n          }\n          @if (!form.isObserving()) {\n            <span\n              class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n              title=\"observe() has not been called, so nothing syncs with the URL\"\n            >\n              not observing\n            </span>\n          }\n          <button\n            [disabled]=\"form.isAtDefaults()\"\n            (click)=\"form.resetAll()\"\n            class=\"et-query-devtools-btn\"\n            type=\"button\"\n          >\n            \u27F2 Reset all\n          </button>\n        </div>\n\n        @let driven = host.queriesDrivenByForm(entry);\n        <dl class=\"et-query-devtools-meta\">\n          <dt>Drives</dt>\n          <dd>\n            @if (driven.length) {\n              <div class=\"et-query-devtools-inner-queries\">\n                @for (link of driven; track link.id) {\n                  <button\n                    [class.et-query-devtools-inner-row--active]=\"host.formSelectedQueryId() === link.id\"\n                    [disabled]=\"!link.id\"\n                    (click)=\"host.formSelectedQueryId.set(link.id)\"\n                    class=\"et-query-devtools-inner-row\"\n                    type=\"button\"\n                  >\n                    <span [attr.data-status]=\"host.queryStatus(link.query)\" class=\"et-query-devtools-status\"></span>\n                    <span class=\"et-query-devtools-method\">{{ link.method }}</span>\n                    <span class=\"et-query-devtools-route\">\n                      <et-query-devtools-route [segments]=\"link.segments\" [fallback]=\"link.query.id() || 'query'\" />\n                    </span>\n                  </button>\n                }\n              </div>\n            } @else {\n              <span class=\"et-query-devtools-hint\">\n                No query has read this form's value yet. A query picks it up the first time its\n                <code>withArgs</code> reads <code>value()</code>.\n              </span>\n            }\n          </dd>\n        </dl>\n\n        @if (expanded) {\n          <table class=\"et-query-devtools-table\">\n            <thead>\n              <tr>\n                <th>Field</th>\n                <th>Value</th>\n                <th>Default</th>\n                <th>URL param</th>\n                <th>Rules</th>\n                <th></th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (field of form.fields(); track field.key) {\n                <tr [attr.data-status]=\"field.isDefault ? null : 'success'\">\n                  <td class=\"et-query-devtools-mono\">{{ field.key }}</td>\n                  <td class=\"et-query-devtools-mono\">\n                    {{ host.inlineValue(field.value) }}\n                    <!-- The live value only differs while a debounce is pending, which is exactly\n                       when \"the input says X but the query asked for Y\" needs explaining. -->\n                    @if (field.liveValue !== field.value) {\n                      <span class=\"et-query-devtools-stat-sub\">typing {{ host.inlineValue(field.liveValue) }}</span>\n                    }\n                  </td>\n                  <td class=\"et-query-devtools-mono\">{{ host.inlineValue(field.defaultValue) }}</td>\n                  <td class=\"et-query-devtools-mono\">\n                    @if (field.queryParam === undefined) {\n                      <span class=\"et-query-devtools-hint\">\u2014</span>\n                    } @else {\n                      {{ field.paramKey }}={{ host.inlineValue(field.queryParam) }}\n                    }\n                  </td>\n                  <td>\n                    <div class=\"et-query-devtools-chips\">\n                      @if (field.debounceMs !== null) {\n                        <span class=\"et-query-devtools-chip et-query-devtools-chip--muted\">\n                          {{ field.debounceMs }}ms\n                        </span>\n                      }\n                      @if (field.isResetBy.length) {\n                        <span\n                          class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                          title=\"Reset to its default whenever one of these changes\"\n                        >\n                          reset by {{ field.isResetBy.join(', ') }}\n                        </span>\n                      }\n                      @if (!field.countsAsFilter) {\n                        <span\n                          class=\"et-query-devtools-chip et-query-devtools-chip--muted\"\n                          title=\"Not counted by activeFilterCount\"\n                        >\n                          not a filter\n                        </span>\n                      }\n                    </div>\n                  </td>\n                  <td>\n                    <button\n                      [disabled]=\"field.isDefault\"\n                      (click)=\"form.resetField(field.key)\"\n                      class=\"et-query-devtools-btn\"\n                      type=\"button\"\n                    >\n                      \u27F2\n                    </button>\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n\n          <h4 class=\"et-query-devtools-section\">Committed value</h4>\n          <et-query-devtools-json [value]=\"form.value()\" />\n        }\n      </div>\n    } @empty {\n      <p class=\"et-query-devtools-empty\">\n        No query forms registered. A form created with <code>defineQueryForm()</code> registers itself.\n      </p>\n    }\n  </div>\n\n  <et-query-devtools-drawer\n    [sel]=\"host.formSelectedQuery()\"\n    [container]=\"panes\"\n    (dismiss)=\"host.formSelectedQueryId.set(null)\"\n  />\n</div>\n", styles: ["@layer components{.et-query-devtools-caret{display:inline-block;width:1.2rem;color:var(--_et-qdt-muted)}}\n"] }]
         }] });
 
+const KIND_LABELS = {
+    auth: 'Auth',
+    poll: 'Polling',
+    other: 'Other',
+};
+/**
+ * The Locks tab: the Web Locks held across this origin, which is the one view in the panel that shows
+ * something outside its own tab.
+ */
+class QueryDevtoolsLocksTabComponent {
+    constructor() {
+        this.host = injectQueryDevtoolsHost();
+    }
+    kindLabel(kind) {
+        return KIND_LABELS[kind];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsLocksTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsLocksTabComponent, isStandalone: true, selector: "et-query-devtools-locks-tab", ngImport: i0, template: "<div class=\"et-query-devtools-scroll\">\n  <div class=\"et-query-devtools-toolbar\">\n    <p class=\"et-query-devtools-hint et-query-devtools-locks-hint\">\n      The\n      <a href=\"https://developer.mozilla.org/docs/Web/API/Web_Locks_API\" target=\"_blank\" rel=\"noreferrer\">Web Locks</a>\n      held across this whole origin - every other tab, worker and service worker included, which is the one thing in\n      this panel that is not about this tab alone. Read only: a tab cannot release another tab's lock. Polled once a\n      second while this tab is open and the page is visible.\n    </p>\n  </div>\n\n  @if (host.lockRows(); as rows) {\n    <table class=\"et-query-devtools-table\">\n      <thead>\n        <tr>\n          <th>Lock</th>\n          <th>Kind</th>\n          <th>Taking part</th>\n          <th>This tab</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of rows; track row.name) {\n          <tr>\n            <td [title]=\"row.name\">\n              <span class=\"et-query-devtools-lock-name\">\n                <span class=\"et-query-devtools-url\">{{ row.label }}</span>\n                @if (row.channel) {\n                  <span class=\"et-query-devtools-count\">{{ row.channel }}</span>\n                }\n              </span>\n            </td>\n            <td>{{ kindLabel(row.kind) }}</td>\n            <td>{{ row.tabs }}</td>\n            <td>\n              @let standing = host.lockStanding(row);\n              <span\n                [class.et-query-devtools-chip--success]=\"standing.tone === 'success'\"\n                [class.et-query-devtools-chip--muted]=\"standing.tone === 'muted'\"\n                [title]=\"standing.title\"\n                class=\"et-query-devtools-chip\"\n              >\n                {{ standing.label }}\n              </span>\n            </td>\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"et-query-devtools-empty\" colspan=\"4\">\n              Nothing holds a lock on this origin. Multi-tab auth sync and cache polling both take one - without either,\n              there is nothing to coordinate.\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    <p class=\"et-query-devtools-empty\">\n      This browser has no Web Locks API, so nothing is coordinated across tabs at all: every tab refreshes its own\n      tokens and polls its own cache keys.\n    </p>\n  }\n</div>\n", styles: ["@layer components{.et-query-devtools-locks-hint{max-inline-size:80ch}.et-query-devtools-lock-name{display:flex;align-items:center;gap:.8rem}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsLocksTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-query-devtools-locks-tab', encapsulation: ViewEncapsulation.None, template: "<div class=\"et-query-devtools-scroll\">\n  <div class=\"et-query-devtools-toolbar\">\n    <p class=\"et-query-devtools-hint et-query-devtools-locks-hint\">\n      The\n      <a href=\"https://developer.mozilla.org/docs/Web/API/Web_Locks_API\" target=\"_blank\" rel=\"noreferrer\">Web Locks</a>\n      held across this whole origin - every other tab, worker and service worker included, which is the one thing in\n      this panel that is not about this tab alone. Read only: a tab cannot release another tab's lock. Polled once a\n      second while this tab is open and the page is visible.\n    </p>\n  </div>\n\n  @if (host.lockRows(); as rows) {\n    <table class=\"et-query-devtools-table\">\n      <thead>\n        <tr>\n          <th>Lock</th>\n          <th>Kind</th>\n          <th>Taking part</th>\n          <th>This tab</th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (row of rows; track row.name) {\n          <tr>\n            <td [title]=\"row.name\">\n              <span class=\"et-query-devtools-lock-name\">\n                <span class=\"et-query-devtools-url\">{{ row.label }}</span>\n                @if (row.channel) {\n                  <span class=\"et-query-devtools-count\">{{ row.channel }}</span>\n                }\n              </span>\n            </td>\n            <td>{{ kindLabel(row.kind) }}</td>\n            <td>{{ row.tabs }}</td>\n            <td>\n              @let standing = host.lockStanding(row);\n              <span\n                [class.et-query-devtools-chip--success]=\"standing.tone === 'success'\"\n                [class.et-query-devtools-chip--muted]=\"standing.tone === 'muted'\"\n                [title]=\"standing.title\"\n                class=\"et-query-devtools-chip\"\n              >\n                {{ standing.label }}\n              </span>\n            </td>\n          </tr>\n        } @empty {\n          <tr>\n            <td class=\"et-query-devtools-empty\" colspan=\"4\">\n              Nothing holds a lock on this origin. Multi-tab auth sync and cache polling both take one - without either,\n              there is nothing to coordinate.\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    <p class=\"et-query-devtools-empty\">\n      This browser has no Web Locks API, so nothing is coordinated across tabs at all: every tab refreshes its own\n      tokens and polls its own cache keys.\n    </p>\n  }\n</div>\n", styles: ["@layer components{.et-query-devtools-locks-hint{max-inline-size:80ch}.et-query-devtools-lock-name{display:flex;align-items:center;gap:.8rem}}\n"] }]
+        }] });
+
+/**
+ * Namespace of the probe lock the panel holds while the Locks tab is open. `LockInfo` carries a
+ * `clientId` but there is no API for "my own", so a lock under a name only this tab can have produced is
+ * the only way to learn it - and without it every row would say _some tab_ rather than _this tab_.
+ */
+const DEVTOOLS_PROBE_NAMESPACE = 'ethlete-devtools';
+const devtoolsProbeLockKey = (id) => `probe:${id}`;
+const devtoolsProbeLockName = (id) => `${DEVTOOLS_PROBE_NAMESPACE}:${devtoolsProbeLockKey(id)}`;
+const PROBE_PREFIX = `${DEVTOOLS_PROBE_NAMESPACE}:probe:`;
+const AUTH_PREFIX = 'ethlete-auth:leader:';
+const POLL_PREFIX = 'et-query-poll:';
+const decode = (name) => {
+    if (name.startsWith(AUTH_PREFIX))
+        return { kind: 'auth', label: name.slice(AUTH_PREFIX.length), channel: null };
+    if (name.startsWith(POLL_PREFIX)) {
+        const rest = name.slice(POLL_PREFIX.length);
+        const separator = rest.indexOf(':');
+        return separator === -1
+            ? { kind: 'poll', label: rest, channel: null }
+            : { kind: 'poll', label: rest.slice(separator + 1), channel: rest.slice(0, separator) };
+    }
+    return { kind: 'other', label: name, channel: null };
+};
+const KIND_ORDER = { auth: 0, poll: 1, other: 2 };
+/** The `clientId` of the tab the panel is open in, read off the probe lock it holds under `probeName`. */
+const probeClientId = (snapshot, probeName) => snapshot.held?.find((info) => info.name === probeName)?.clientId ?? null;
+/**
+ * Folds an origin-wide `navigator.locks.query()` snapshot into one row per lock name, decoded to the
+ * feature that took it and marked with where this tab stands on it.
+ *
+ * Probe locks are dropped from the result - every open panel on the origin holds one, and they describe
+ * the inspector rather than the app it inspects.
+ */
+const summarizeLocks = (options) => {
+    const { snapshot, clientId } = options;
+    const held = (snapshot.held ?? []).filter((info) => !info.name?.startsWith(PROBE_PREFIX));
+    const pending = (snapshot.pending ?? []).filter((info) => !info.name?.startsWith(PROBE_PREFIX));
+    const names = [...new Set([...held, ...pending].map((info) => info.name ?? ''))];
+    const rows = names.map((name) => {
+        const holders = held.filter((info) => info.name === name);
+        const queue = pending.filter((info) => info.name === name);
+        const place = queue.findIndex((info) => info.clientId === clientId) + 1;
+        const isHolder = holders.some((info) => info.clientId === clientId);
+        const standing = clientId === null ? 'unknown' : isHolder ? 'holder' : place > 0 ? 'queued' : 'absent';
+        return {
+            name,
+            ...decode(name),
+            tabs: holders.length + queue.length,
+            standing,
+            queuePlace: standing === 'queued' ? place : null,
+        };
+    });
+    return rows.sort((a, b) => KIND_ORDER[a.kind] - KIND_ORDER[b.kind] || a.label.localeCompare(b.label));
+};
+
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/query-devtools` this build was cut from. */
-const QUERY_DEVTOOLS_VERSION = '1.0.0-next.0';
+const QUERY_DEVTOOLS_VERSION = '1.0.0-next.2';
 
 /* eslint-disable @typescript-eslint/naming-convention -- the `__export_*` keys are Insomnia's file format */
 const WORKSPACE_ID = 'wrk_ethlete_query_devtools';
@@ -3816,6 +4004,16 @@ const DEVTOOLS_LAYOUTS = [
     },
 ];
 const layoutFor = (dock) => DEVTOOLS_LAYOUTS.find((layout) => layout.id === dock) ?? DEVTOOLS_LAYOUTS[0];
+/**
+ * The padding a dock takes out of the page, per edge. Logical properties, because the panel's own
+ * placement is: `bottom` is pinned with `inset-block-end`, `right` with `inset-inline-start: auto`.
+ */
+const DOCK_PADDING = {
+    bottom: 'paddingBlockEnd',
+    top: 'paddingBlockStart',
+    left: 'paddingInlineStart',
+    right: 'paddingInlineEnd',
+};
 const noop = () => undefined;
 /**
  * A devtools entry id as a person reads it. Ids are the registry's descriptor plus a per-descriptor
@@ -4124,6 +4322,7 @@ class QueryDevtoolsComponent {
         this.destroyRef = inject(DestroyRef);
         this.document = inject(DOCUMENT);
         this.viewport = injectViewportSize();
+        this.isDocumentVisible = injectIsDocumentVisible();
         /**
          * Opens the panel as soon as it is created, whatever the stored view state says. Set by
          * `<et-query-devtools-lazy>`, which downloads the panel on the click that was meant to open it.
@@ -4145,6 +4344,7 @@ class QueryDevtoolsComponent {
             { id: 'auth', label: 'Auth' },
             { id: 'ws', label: 'Sockets' },
             { id: 'cache', label: 'Cache' },
+            { id: 'locks', label: 'Locks' },
             { id: 'timeline', label: 'Timeline' },
             { id: 'events', label: 'Events' },
             { id: 'faults', label: 'Faults' },
@@ -4189,6 +4389,12 @@ class QueryDevtoolsComponent {
         /** The entry the layout button shows, so it names where the panel is rather than where it could go. */
         this.currentLayout = computed(() => layoutFor(this.dock()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentLayout" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether a docked panel takes its size out of the page instead of covering it - so the last rows of a
+         * long page can still be scrolled to. Only docks can: a float sits wherever it was dragged.
+         */
+        this.reservesSpace = signal(this.persisted.reservesSpace ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reservesSpace" }] : /* istanbul ignore next */ []));
         /** Where the floating panel sits and how big it is. Kept while docked, so a return to float restores it. */
         this.floatRect = signal(this.persisted.floatRect ?? DEFAULT_FLOAT_RECT, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "floatRect" }] : /* istanbul ignore next */ []));
@@ -4257,6 +4463,22 @@ class QueryDevtoolsComponent {
         ...(ngDevMode ? [{ debugName: "panelInsetBlock" }] : /* istanbul ignore next */ []));
         this.panelInsetInline = computed(() => (this.floating() ? this.floatRect().x : null), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "panelInsetInline" }] : /* istanbul ignore next */ []));
+        /**
+         * The panel's rendered size, not its dragged one - the stylesheet clamps a dock (`min-block-size`,
+         * `max-block-size: 90vh`) and it is the clamped size the page has to give up.
+         */
+        this.panelSize = signalElementDimensions(this.panelEl);
+        /** Which padding a docked panel asks of the page and how much, or `null` when it asks for none. */
+        this.pageReservation = computed(() => {
+            const dock = this.dock();
+            if (dock === 'float' || this.poppedOut() || !this.open() || !this.reservesSpace())
+                return null;
+            const size = this.panelSize().offset;
+            if (!size)
+                return null;
+            return { padding: DOCK_PADDING[dock], px: this.sideDocked() ? size.width : size.height };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageReservation" }] : /* istanbul ignore next */ []));
         /** Which section of the query detail is showing. Shared by the Queries tab and both drawers. */
         this.detailTab = signal(this.persisted.detailTab ?? 'overview', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "detailTab" }] : /* istanbul ignore next */ []));
@@ -4392,6 +4614,24 @@ class QueryDevtoolsComponent {
         this.copiedReset$ = new Subject();
         /** 1-second tick driving the cache freshness countdowns. */
         this.clock = toSignal(interval(1000), { initialValue: 0 });
+        /**
+         * The probe lock behind every Locks row's "this tab" answer, and the last snapshot read through it.
+         * Both only exist while the Locks tab is on screen - see the polling stream in the constructor.
+         */
+        this.probeLocks = createQueryKeyLockManager(DEVTOOLS_PROBE_NAMESPACE);
+        this.probeId = randomId();
+        this.probeHold = null;
+        this.lockSnapshot = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lockSnapshot" }] : /* istanbul ignore next */ []));
+        this.lockRows = computed(() => {
+            if (!this.probeLocks.isSupported)
+                return null;
+            const snapshot = this.lockSnapshot();
+            if (!snapshot)
+                return [];
+            return summarizeLocks({ snapshot, clientId: probeClientId(snapshot, devtoolsProbeLockName(this.probeId)) });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lockRows" }] : /* istanbul ignore next */ []));
         /** "Inspect" mode: hover the live UI to find the query that a component created. */
         this.inspectActive = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inspectActive" }] : /* istanbul ignore next */ []));
@@ -4556,6 +4796,9 @@ class QueryDevtoolsComponent {
                 auth: { count: this.authEntries().length, errors: 0 },
                 ws: { count: this.wsEntries().length, errors: 0 },
                 cache: { count: this.cacheEntryCount(), errors: 0 },
+                // Not a count of locks: the tab only reads them while it is open, so a badge would have to poll
+                // the whole origin whenever the panel is - and the tab bar folds an uncounted tab behind "More".
+                locks: { count: 0, errors: 0 },
                 timeline: this.runTotals(),
                 events: {
                     count: events.length,
@@ -4710,6 +4953,12 @@ class QueryDevtoolsComponent {
             }));
         }), takeUntilDestroyed())
             .subscribe();
+        // Web Locks has no change event, so the Locks tab polls - but a `locks.query()` per second is not a
+        // `Date.now()` read, so it only runs while that tab is the one on screen and the page is visible.
+        // The probe lock is taken for the same window: it is what tells this tab's rows from another tab's.
+        toObservable(computed(() => this.probeLocks.isSupported && this.open() && this.activeTab() === 'locks' && this.isDocumentVisible()))
+            .pipe(tap((inspecting) => this.holdProbeLock(inspecting)), switchMap((inspecting) => (inspecting ? interval(1000).pipe(startWith(0)) : EMPTY)), switchMap(() => navigator.locks.query()), tap((snapshot) => this.lockSnapshot.set(snapshot)), takeUntilDestroyed())
+            .subscribe();
         // Merge every live repository's event stream into the rolling log, re-subscribing as the set of
         // repositories changes. Composed with RxJS (not a subscribe-in-effect) per the styleguide.
         toObservable(this.repositories)
@@ -4730,6 +4979,7 @@ class QueryDevtoolsComponent {
                 listHeight: this.listHeight(),
                 drawerHeight: this.drawerHeight(),
                 dock: this.dock(),
+                reservesSpace: this.reservesSpace(),
                 floatRect: this.floatRect(),
                 floatParked: this.floatParked(),
                 activeTab: this.activeTab(),
@@ -4758,6 +5008,17 @@ class QueryDevtoolsComponent {
             }
             writeQueryDevtoolsStore(scope, STORAGE_KEY, state);
         });
+        // `border-box` is what makes the padding eat into a `height: 100%` shell instead of pushing it past
+        // the edge of the window; with the root's default `auto` height it changes nothing. The cleanup runs
+        // before each re-run, so the edge a dock switch left behind is always given back.
+        effect((onCleanup) => {
+            const reservation = this.pageReservation();
+            if (!reservation)
+                return;
+            const root = this.document.documentElement;
+            this.renderer.setStyle(root, { boxSizing: 'border-box', [reservation.padding]: `${reservation.px}px` });
+            onCleanup(() => this.renderer.removeStyles(root, 'boxSizing', reservation.padding));
+        });
         // A window that shrinks below the floating panel would otherwise leave it half (or wholly) off
         // screen, with no edge left to grab. Untracked on the way in so clamping cannot re-trigger itself.
         effect(() => {
@@ -4881,6 +5142,7 @@ class QueryDevtoolsComponent {
         clearQueryDevtoolsOverrideStore();
         clearQueryDevtoolsMockStore();
         this.dock.set('bottom');
+        this.reservesSpace.set(true);
         this.panelHeight.set(DEFAULT_HEIGHT);
         this.panelWidth.set(DEFAULT_WIDTH);
         this.floatRect.set(DEFAULT_FLOAT_RECT);
@@ -5775,6 +6037,31 @@ class QueryDevtoolsComponent {
     authQueryKeys(auth) {
         return Object.keys(auth.queries ?? {});
     }
+    /** Where this tab stands on one lock, as a chip. @see lockRows */
+    lockStanding(row) {
+        switch (row.standing) {
+            case 'holder':
+                return { label: 'holds it', tone: 'success', title: 'This tab is the one doing the work this lock guards.' };
+            case 'queued':
+                return {
+                    label: `waiting · #${row.queuePlace}`,
+                    tone: 'muted',
+                    title: `Another tab holds this lock. This one is number ${row.queuePlace} in line and takes over as soon as the tabs ahead of it release it - by closing, crashing or navigating away.`,
+                };
+            case 'absent':
+                return {
+                    label: 'not taking part',
+                    tone: 'muted',
+                    title: 'Another tab holds this lock and this one never asked for it.',
+                };
+            case 'unknown':
+                return {
+                    label: 'unknown',
+                    tone: 'muted',
+                    title: 'The probe lock this tab identifies itself with has not been granted yet - the next poll should resolve it.',
+                };
+        }
+    }
     /**
      * Which tab refreshes this provider's tokens, as a chip: whether it is this one, how many tabs are
      * in the election, and - when there is no election - why every tab reads as the leader.
@@ -5922,6 +6209,22 @@ class QueryDevtoolsComponent {
     downloadTextFile(file) {
         this.download({ content: file.content, filename: file.name, type: file.type });
     }
+    /**
+     * Takes - or gives back - the lock whose name only this tab can have produced. Its `clientId` in the
+     * snapshot is what tells this tab's rows from another tab's: `LockInfo` carries no tab identity, and
+     * the platform offers no way to ask for one's own client id.
+     */
+    holdProbeLock(inspecting) {
+        if (inspecting) {
+            this.probeHold ??= this.probeLocks.hold(devtoolsProbeLockKey(this.probeId));
+            return;
+        }
+        this.probeHold?.release();
+        this.probeHold = null;
+        // A snapshot outlives the probe that made it readable, so keeping it would have every row claim it
+        // belongs to some other tab the next time the tab is opened.
+        this.lockSnapshot.set(null);
+    }
     /**
      * The two runs the diff compares, oldest first - normalised by run index, so picking a pair in either
      * order reads the same way round as the `#before → #after` header prints it.
@@ -6636,7 +6939,7 @@ class QueryDevtoolsComponent {
         this.eventLog.update((log) => [item, ...log].slice(0, queryDevtoolsSettings().maxEvents));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", inputs: { startOpen: { classPropertyName: "startOpen", publicName: "startOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-dock": "dock()" }, classAttribute: "et-query-devtools-host" }, providers: [{ provide: QUERY_DEVTOOLS_HOST, useExisting: QueryDevtoolsComponent }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <section\n    #panel\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [attr.data-dock]=\"poppedOut() ? 'popout' : dock()\"\n    [attr.data-pane-axis]=\"paneAxis()\"\n    [attr.data-parked]=\"floatParked() ? '' : null\"\n    [style.block-size.px]=\"panelBlockSize()\"\n    [style.inline-size.px]=\"panelInlineSize()\"\n    [style.inset-block-start.px]=\"panelInsetBlock()\"\n    [style.inset-inline-start.px]=\"panelInsetInline()\"\n    [style.--_et-qdt-list-width.px]=\"listWidth()\"\n    [style.--_et-qdt-drawer-width.px]=\"drawerWidth()\"\n    [style.--_et-qdt-list-height.px]=\"listHeight()\"\n    [style.--_et-qdt-drawer-height.px]=\"drawerHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <!-- A pop-out is sized by its window, so there is no edge to drag. A float is a window in the page:\n         a title bar to move it and every edge to resize it, on the same `@ethlete/core` primitives the\n         stream pip window uses. A dock has one edge, and it does both. -->\n    @if (floating()) {\n      <!-- Parked, the panel is a grab strip: the edge handles would eat most of the peek that is left\n           to click, and resizing something you cannot see is not a thing to offer. -->\n      <et-resize-handles\n        [edges]=\"FLOAT_RESIZE_EDGES\"\n        [disabled]=\"floatParked()\"\n        (resizeStarted)=\"startFloatResize()\"\n        (resizeMoved)=\"resizeFloat($event)\"\n        (resizeEnded)=\"endFloatResize()\"\n        (resizeCancelled)=\"endFloatResize()\"\n      />\n      <div\n        (dragMoved)=\"moveFloat($event)\"\n        (dragEnded)=\"endFloatMove()\"\n        (dragCancelled)=\"endFloatMove()\"\n        (dragTapped)=\"restoreFloat()\"\n        class=\"et-query-devtools-move\"\n        title=\"Drag to move \u2014 shove it off an edge to park it, click the strip to bring it back\"\n        aria-hidden=\"true\"\n        etDragHandle\n      ></div>\n    } @else if (!poppedOut()) {\n      <div\n        (pointerdown)=\"startResize($event)\"\n        class=\"et-query-devtools-resize\"\n        title=\"Drag to resize\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of visibleTabs(); track tab.id) {\n          @let badge = tabBadges()[tab.id];\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (badge.count) {\n              <span class=\"et-query-devtools-tab-badge\">{{ badge.count }}</span>\n            }\n            @if (badge.errors) {\n              <span\n                class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\"\n                title=\"{{ badge.errors }} {{ badge.errorNoun ?? 'failing' }}\"\n              >\n                {{ badge.errors }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (overflowTabs().length; as overflowCount) {\n          <div class=\"et-query-devtools-menu\" etMenu>\n            <button\n              [title]=\"overflowCount + ' tabs with nothing in them'\"\n              class=\"et-query-devtools-tab\"\n              type=\"button\"\n              etMenuTrigger\n            >\n              More\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                @for (tab of overflowTabs(); track tab.id) {\n                  <button (activate)=\"activeTab.set(tab.id)\" et-menu-item type=\"button\">{{ tab.label }}</button>\n                }\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          [attr.aria-pressed]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-btn et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          <svg\n            class=\"et-query-devtools-inspect-icon\"\n            viewBox=\"0 0 16 16\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <circle class=\"et-query-devtools-inspect-icon-ring\" cx=\"8\" cy=\"8\" r=\"4.25\" />\n            <circle class=\"et-query-devtools-inspect-icon-dot\" cx=\"8\" cy=\"8\" r=\"1.15\" />\n            <path d=\"M8 0.9v2.1M8 13v2.1M0.9 8h2.1M13 8h2.1\" />\n          </svg>\n          {{ inspectActive() ? 'Inspecting' : 'Inspect' }}\n          @if (inspectActive()) {\n            <kbd class=\"et-query-devtools-kbd et-query-devtools-kbd--inverse\">Esc</kbd>\n          }\n        </button>\n        <button\n          (click)=\"downloadSession()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Download every registered entry, the event log, the cache totals and anything armed as one JSON file - the attachment for a bug report\"\n        >\n          <span aria-hidden=\"true\">\u2913</span>\n          Session\n        </button>\n        <!-- A gear, not a tab: Settings holds nothing to count, so the badge/overflow logic would push it\n             behind More - and the one control that explains a panel behaving oddly may not be hidden. -->\n        <button\n          [class.et-query-devtools-btn--active]=\"activeTab() === 'settings'\"\n          [attr.aria-pressed]=\"activeTab() === 'settings'\"\n          (click)=\"toggleSettings()\"\n          class=\"et-query-devtools-btn et-query-devtools-icon-btn\"\n          type=\"button\"\n          title=\"Settings: where panel state is kept, and the limits it holds\"\n          aria-label=\"Settings\"\n        >\n          <span aria-hidden=\"true\">\u2699</span>\n        </button>\n        @if (!poppedOut()) {\n          @let layout = currentLayout();\n          <div class=\"et-query-devtools-menu\" etMenu placement=\"bottom-end\">\n            <button class=\"et-query-devtools-btn\" title=\"Where the panel sits\" type=\"button\" etMenuTrigger>\n              <span class=\"et-query-devtools-menu-glyph\" aria-hidden=\"true\">{{ layout.glyph }}</span>\n              {{ layout.label }}\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                <et-menu-radio-group [value]=\"dock()\">\n                  @for (option of LAYOUTS; track option.id) {\n                    <!-- eslint-disable ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n                    <et-menu-radio-item\n                      [value]=\"option.id\"\n                      [title]=\"option.hint\"\n                      [closeOnActivate]=\"true\"\n                      (activate)=\"selectLayout(option.id)\"\n                    >\n                      <!-- eslint-enable ethlete/prefer-static-boolean-properties -->\n                      <span class=\"et-query-devtools-menu-item-glyph\" aria-hidden=\"true\">{{ option.glyph }}</span>\n                      {{ option.label }}\n                    </et-menu-radio-item>\n                  }\n                </et-menu-radio-group>\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n        <span class=\"et-query-devtools-header-divider\" aria-hidden=\"true\"></span>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-btn et-query-devtools-btn--danger\"\n          type=\"button\"\n          title=\"{{ poppedOut() ? 'Bring the panel back into the app window' : 'Close devtools (' + shortcut + ')' }}\"\n        >\n          @if (poppedOut()) {\n            <span aria-hidden=\"true\">\u29C8</span>\n            Dock back\n          } @else {\n            <span aria-hidden=\"true\">\u2715</span>\n            Close\n            <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n          }\n        </button>\n      </div>\n    </header>\n\n    @if (popOutBlocked()) {\n      <div class=\"et-query-devtools-notice-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-text\">\n          The browser blocked the pop-up window. Allow pop-ups for this site, or float the panel over the page instead \u2014\n          a float needs no permission.\n        </span>\n        <button (click)=\"floatPanel()\" class=\"et-query-devtools-btn\" type=\"button\">Float instead</button>\n        <button (click)=\"popOutBlocked.set(false)\" class=\"et-query-devtools-btn\" type=\"button\">Dismiss</button>\n      </div>\n    }\n\n    @if (armedFaultClients(); as armed) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Faults armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ armed.join(', ') }}</span>\n          \u2014 every failure and delay you see from\n          {{ armed.length === 1 ? 'this client' : 'these clients' }} is injected, not the API.\n          @if (faultsRestored()) {\n            They came back from your last page load \u2014 set <em>Armed faults</em> back to <em>none</em> in Settings to\n            stop that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'faults'\"\n          (click)=\"activeTab.set('faults')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"CLEAR_FAULTS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (armedMockRoutes(); as mocked) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Mocks armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ mocked.join(', ') }}</span>\n          \u2014 {{ mocked.length === 1 ? 'that route is' : 'those routes are' }} answered by the panel, so nothing they show\n          reached the API.\n          @if (mocksRestored()) {\n            They came back from your last page load \u2014 set <em>Armed mocks</em> back to <em>none</em> in Settings to stop\n            that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'mocks'\"\n          (click)=\"activeTab.set('mocks')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"DISARM_MOCKS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (restoredOverrides(); as restored) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          @if (restored.ops) {\n            <strong>Overrides re-armed</strong> \u2014 {{ restored.ops }} {{ restored.ops === 1 ? 'edit' : 'edits' }} from\n            your last page load {{ restored.ops === 1 ? 'is' : 'are' }} back on {{ restored.queries }}\n            {{ restored.queries === 1 ? 'query' : 'queries' }}, so those responses are not what the API sent.\n            @if (restored.fromLocalStorage) {\n              They came back from <strong>localStorage</strong>, so they outlive closing this tab \u2014 clear them, or set\n              overrides back to <em>session</em> in Settings.\n            }\n          } @else {\n            <strong>Overrides could not be re-armed.</strong>\n          }\n          @if (restored.orphaned.length) {\n            <span class=\"et-query-devtools-armed-orphans\">\n              {{ restored.orphaned.length }} stored\n              {{ restored.orphaned.length === 1 ? 'override' : 'overrides' }} matched no query \u2014\n              <span class=\"et-query-devtools-mono\">{{ restored.orphaned.join(', ') }}</span>\n            </span>\n          }\n        </span>\n        @if (restored.firstId; as firstId) {\n          <button (click)=\"reviewRestoredOverrides(firstId)\" class=\"et-query-devtools-btn\" type=\"button\">Review</button>\n        }\n        <button (click)=\"DROP_RESTORED_OVERRIDES()\" class=\"et-query-devtools-btn\" type=\"button\">Drop all</button>\n      </div>\n    }\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <et-query-devtools-queries-tab />\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <et-query-devtools-stacks-tab />\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <et-query-devtools-sequences-tab />\n        }\n\n        <!-- FORMS -->\n        @case ('forms') {\n          <et-query-devtools-forms-tab />\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <et-query-devtools-auth-tab />\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <et-query-devtools-sockets-tab />\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <et-query-devtools-cache-tab />\n        }\n\n        <!-- TIMELINE -->\n        @case ('timeline') {\n          <et-query-devtools-timeline-tab />\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <et-query-devtools-events-tab />\n        }\n\n        <!-- FAULTS -->\n        @case ('faults') {\n          <et-query-devtools-faults-tab />\n        }\n\n        <!-- MOCKS -->\n        @case ('mocks') {\n          <et-query-devtools-mocks-tab />\n        }\n\n        <!-- ABOUT -->\n        @case ('about') {\n          <et-query-devtools-about />\n        }\n\n        <!-- SETTINGS -->\n        @case ('settings') {\n          <et-query-devtools-settings />\n        }\n      }\n    </div>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle [tampered]=\"panelTampered()\" (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n\n@if (locatedRect(); as rect) {\n  <div\n    [style.left.px]=\"rect.left\"\n    [style.top.px]=\"rect.top\"\n    [style.width.px]=\"rect.width\"\n    [style.height.px]=\"rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">created here</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);--_et-qdt-title-bar: 2.4rem;--_et-qdt-radius: .5rem;--_et-qdt-control-h: 2.4rem;--_et-qdt-row-h: 3.6rem;position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}@media(pointer:coarse){.et-query-devtools-host{--_et-qdt-control-h: 3.4rem;--_et-qdt-row-h: 4.4rem}}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=right]){inset-block:0;inset-inline-start:auto}.et-query-devtools-panel:where([data-dock=right]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-start:1px solid var(--_et-qdt-border);box-shadow:-.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=float]){inset:0}.et-query-devtools-panel:where([data-dock=float]){--_et-qdt-frame: .8rem;--et-resize-handles-edge-size: var(--_et-qdt-frame);--et-resize-handles-touch-edge-size: var(--_et-qdt-frame);--et-resize-handles-corner-size: 1.6rem;--et-resize-handles-touch-corner-size: 1.6rem;--et-resize-handles-edge-inset: 1.6rem;--et-resize-handles-side-top: var(--_et-qdt-title-bar);--et-resize-handles-side-bottom: 1.6rem;--et-resize-handles-z-index: 3;position:absolute;inline-size:auto;min-block-size:0;max-block-size:none;padding-block-start:var(--_et-qdt-title-bar);padding-inline:var(--_et-qdt-frame);padding-block-end:var(--_et-qdt-frame);border:1px solid var(--_et-qdt-border);border-radius:.6rem;box-shadow:0 1rem 4rem #00000073;overflow:hidden}.et-query-devtools-move{position:absolute;inset-inline:0;inset-block-start:0;block-size:var(--_et-qdt-title-bar);cursor:move;z-index:2}.et-query-devtools-panel:where([data-dock=float]) .et-query-devtools-body{border-radius:.3rem;overflow:hidden}.et-query-devtools-move:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.9rem;inline-size:3rem;margin-inline-start:-1.5rem;block-size:.6rem;background-image:radial-gradient(currentcolor 40%,transparent 42%);background-size:.4rem .3rem;color:var(--_et-qdt-subtle)}@media(hover:hover){.et-query-devtools-move:hover:after{color:var(--_et-qdt-accent)}}.et-query-devtools-panel:where([data-dock=float][data-parked]){opacity:.85}@media(hover:hover){.et-query-devtools-panel:where([data-dock=float][data-parked]):hover{opacity:1}}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move{cursor:grab;background:var(--_et-qdt-active)}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move:after{color:var(--_et-qdt-accent)}.et-query-devtools-host:where([data-dock=left]){inset-block:0;inset-inline-end:auto}.et-query-devtools-panel:where([data-dock=left]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-end:1px solid var(--_et-qdt-border);box-shadow:.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=top]){inset-block-start:0;inset-block-end:auto}.et-query-devtools-panel:where([data-dock=top]){border-block-start:0;border-block-end:1px solid var(--_et-qdt-border);box-shadow:0 .4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=popout]){position:static;inline-size:100%;block-size:100%}.et-query-devtools-panel:where([data-dock=popout]){block-size:100%;max-block-size:none;border:0;box-shadow:none}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-header{flex-wrap:wrap}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions){flex:1 1 auto;flex-wrap:nowrap;min-inline-size:0;overflow-x:auto}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions)>*{flex:none}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-master-detail,.et-query-devtools-split){flex-direction:column}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-list,.et-query-devtools-detail,.et-query-devtools-drawer,.et-query-devtools-split .et-query-devtools-scroll){flex:1 1 50%;min-inline-size:0;min-block-size:0;max-inline-size:none;border-inline-start:0;border-inline-end:0}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-detail,.et-query-devtools-drawer){border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-master-detail>.et-query-devtools-list{flex:0 1 var(--_et-qdt-list-height, 50%);min-block-size:var(--_et-qdt-list-height, 0);max-block-size:var(--_et-qdt-list-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-split>.et-query-devtools-drawer{flex:0 1 var(--_et-qdt-drawer-height, 50%);min-block-size:var(--_et-qdt-drawer-height, 0);max-block-size:var(--_et-qdt-drawer-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-pane-resize{cursor:ns-resize}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize,.et-query-devtools-pane-resize{touch-action:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize{inset-inline:0 auto;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize{inset-inline:auto 0;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize{inset-block:auto 0}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize:after{inset-inline:.2rem auto;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize:after{inset-inline:auto .2rem;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize:after{inset-block:auto .2rem}@media(hover:hover){.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-armed-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-block-end:1px solid color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error);font-size:1.1rem}.et-query-devtools-armed-text{flex:1 1 auto;min-inline-size:0}.et-query-devtools-notice-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:var(--_et-qdt-hover);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg);font-size:1.1rem}.et-query-devtools-notice-bar .et-query-devtools-btn{flex:0 0 auto}.et-query-devtools-armed-orphans{display:block;opacity:.85}.et-query-devtools-armed-dot{flex:0 0 auto;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--_et-qdt-error);animation:et-query-devtools-armed-pulse 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-query-devtools-armed-dot{animation:none}}@keyframes et-query-devtools-armed-pulse{50%{opacity:.25}}.et-query-devtools-armed-bar .et-query-devtools-btn{flex:0 0 auto;border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}@media(hover:hover){.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-tab-badge{display:inline-block;padding-inline:.45rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-interaction) 12%,transparent);color:var(--_et-qdt-muted);font-size:1rem;font-variant-numeric:tabular-nums}.et-query-devtools-tab-badge--error{background:color-mix(in srgb,var(--_et-qdt-error) 25%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-menu{display:contents}.et-query-devtools-menu-caret{font-size:.9em;opacity:.7}.et-query-devtools-menu-glyph{display:inline-block;min-inline-size:1.2rem;text-align:center}.et-query-devtools-menu>[data-menu-open]{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-menu .et-query-devtools-menu-item-glyph{display:inline-block;inline-size:16px;text-align:center}.et-menu-item-content:has(.et-query-devtools-menu-item-note){display:flex;flex-direction:column;align-items:start;gap:2px;padding-block:8px}.et-query-devtools-menu-item-note{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));font-size:12px}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.2rem;flex:0 0 auto}.et-query-devtools-header-divider{inline-size:1px;block-size:1.6rem;margin-inline:.4rem;background:var(--_et-qdt-border)}.et-query-devtools-inspect-btn{position:relative}.et-query-devtools-inspect-icon{inline-size:1.4rem;block-size:1.4rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}.et-query-devtools-inspect-icon-dot{fill:currentColor;stroke:none}.et-query-devtools-btn.et-query-devtools-inspect-btn--active,.et-query-devtools-btn.et-query-devtools-inspect-btn--active:hover{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-inspect-btn--active:after{content:\"\";position:absolute;inset:-.3rem;border:1px solid var(--_et-qdt-accent);border-radius:calc(var(--_et-qdt-radius) + .3rem);pointer-events:none;animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}@keyframes et-query-devtools-inspect-pulse{0%,to{opacity:.2}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.et-query-devtools-inspect-btn--active:after,.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:none;opacity:1}}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-kbd--inverse{background:#00000026;box-shadow:inset 0 0 0 1px #00000040;color:inherit}@media(hover:none)and (pointer:coarse){.et-query-devtools-kbd{display:none}}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}@media(hover:hover){.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}@media(hover:hover){.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-pane{display:flex;flex-direction:column;flex:1 1 auto;block-size:100%;min-inline-size:0;min-block-size:0;overflow:hidden}.et-query-devtools-pane>.et-query-devtools-scroll{padding-block:0 1rem}.et-query-devtools-pane-resize{flex:0 0 .5rem;align-self:stretch;cursor:ew-resize;background:transparent;transition:background .12s ease}.et-query-devtools-pane-resize:active{background:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-pane-resize:hover{background:var(--_et-qdt-accent)}}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.8rem;position:sticky;inset-block-start:0;z-index:1;background:var(--_et-qdt-bg);border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-scroll>.et-query-devtools-toolbar{inset-block-start:-1rem}.et-query-devtools-toolbar-row{display:flex;align-items:center;flex-wrap:wrap;flex:1 1 100%;gap:.5rem}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,var(--_et-qdt-bg));color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .6rem;font:inherit;font-size:1.15rem}.et-query-devtools-select option{background-color:var(--_et-qdt-bg);color:var(--_et-qdt-fg)}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:stretch;inline-size:100%;min-block-size:var(--_et-qdt-row-h);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg)}@media(hover:hover){.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);border:1px solid transparent;border-radius:var(--_et-qdt-radius);background:transparent;color:var(--_et-qdt-muted);padding:.25rem .7rem;font:inherit;font-size:1.15rem;line-height:1.4;white-space:nowrap;cursor:pointer;transition:color .12s ease,background-color .12s ease,border-color .12s ease}@media(hover:hover){.et-query-devtools-btn:hover:not(:disabled){background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}}.et-query-devtools-btn:focus-visible{outline:2px solid var(--_et-qdt-accent);outline-offset:1px}.et-query-devtools-btn:disabled{color:var(--_et-qdt-subtle);cursor:default;background:transparent;opacity:.6}.et-query-devtools-btn--primary,.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 40%,transparent);color:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 26%,transparent)}}@media(hover:hover){.et-query-devtools-btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 16%,transparent);color:var(--_et-qdt-error)}}.et-query-devtools-btn--tampered,.et-query-devtools-btn--tampered:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-icon-btn{inline-size:var(--_et-qdt-control-h);padding-inline:0;font-size:1.3rem}.et-query-devtools-btn-group{display:inline-flex;flex:0 0 auto;border:1px solid var(--_et-qdt-border);border-radius:var(--_et-qdt-radius);overflow:hidden}.et-query-devtools-btn-group>.et-query-devtools-btn{border-radius:0;border-block:0;border-inline-start:0;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-btn-group>.et-query-devtools-btn:last-child{border-inline-end:0}.et-query-devtools-toolbar-btn{margin-inline-start:auto;flex:0 0 auto}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat{padding:.6rem .8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-stat dt{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat dd{margin:0;font-size:1.5rem;font-variant-numeric:tabular-nums}.et-query-devtools-stat-sub{display:block;font-size:1rem;color:var(--_et-qdt-subtle)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-retry-glyph{font-size:.7em;line-height:1}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}button.et-query-devtools-chip--button{appearance:none;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}@media(hover:hover){button.et-query-devtools-chip--button:hover{border-color:var(--_et-qdt-accent);color:var(--_et-qdt-accent)}}.et-query-devtools-facet{appearance:none;min-block-size:var(--_et-qdt-control-h);padding-inline:.8rem;background:transparent;cursor:pointer;color:var(--_et-qdt-muted);font:inherit;font-size:1.1rem;line-height:1.4}@media(hover:hover){.et-query-devtools-facet:hover:not(:disabled){color:var(--_et-qdt-fg);background:var(--_et-qdt-hover);border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent)}}.et-query-devtools-facet:disabled{color:var(--_et-qdt-subtle);cursor:default}.et-query-devtools-facet--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 14%,transparent)}.et-query-devtools-facet-count{font-variant-numeric:tabular-nums;color:inherit;opacity:.75}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card--armed{border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table td .et-query-devtools-chip{padding-block:0;line-height:1.4}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-cell-actions{display:inline-flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:1 1 16rem;min-inline-size:0;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,transparent);color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .8rem;font:inherit;font-size:1.15rem}.et-query-devtools-search:focus{outline:none;border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:var(--_et-qdt-bg)}.et-query-devtools-row-link{display:inline-flex;align-items:center;gap:.6rem;appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer}.et-query-devtools-row-link:focus-visible .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}@media(hover:hover){.et-query-devtools-row-link:hover .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}}.et-query-devtools-hint{flex:1 1 24rem;color:var(--_et-qdt-muted);font-size:1.1rem;margin:0}.et-query-devtools-input{inline-size:100%;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-input--number{inline-size:8rem;font-variant-numeric:tabular-nums}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-btn--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent)}}\n"], dependencies: [{ kind: "component", type: QueryDevtoolsAuthTabComponent, selector: "et-query-devtools-auth-tab" }, { kind: "component", type: QueryDevtoolsCacheTabComponent, selector: "et-query-devtools-cache-tab" }, { kind: "component", type: QueryDevtoolsEventsTabComponent, selector: "et-query-devtools-events-tab" }, { kind: "component", type: QueryDevtoolsAboutComponent, selector: "et-query-devtools-about" }, { kind: "component", type: QueryDevtoolsSettingsComponent, selector: "et-query-devtools-settings" }, { kind: "component", type: QueryDevtoolsFaultsTabComponent, selector: "et-query-devtools-faults-tab" }, { kind: "component", type: QueryDevtoolsFormsTabComponent, selector: "et-query-devtools-forms-tab" }, { kind: "component", type: QueryDevtoolsMocksTabComponent, selector: "et-query-devtools-mocks-tab" }, { kind: "component", type: QueryDevtoolsQueriesTabComponent, selector: "et-query-devtools-queries-tab" }, { kind: "component", type: QueryDevtoolsSequencesTabComponent, selector: "et-query-devtools-sequences-tab" }, { kind: "component", type: QueryDevtoolsSocketsTabComponent, selector: "et-query-devtools-sockets-tab" }, { kind: "component", type: QueryDevtoolsStacksTabComponent, selector: "et-query-devtools-stacks-tab" }, { kind: "component", type: QueryDevtoolsTimelineTabComponent, selector: "et-query-devtools-timeline-tab" }, { kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", inputs: ["tampered"], outputs: ["openChange"] }, { kind: "directive", type: DragHandleDirective, selector: "[etDragHandle]", inputs: ["commitThreshold", "disabled"], outputs: ["dragTapped", "dragStarted", "dragMoved", "dragEnded", "dragCancelled"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "loop", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "component", type: MenuItemComponent, selector: "button[et-menu-item], a[et-menu-item]", inputs: ["variant"] }, { kind: "component", type: MenuRadioGroupComponent, selector: "et-menu-radio-group" }, { kind: "component", type: MenuRadioItemComponent, selector: "et-menu-radio-item", inputs: ["icon"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded", "resizeCancelled"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: QueryDevtoolsComponent, isStandalone: true, selector: "et-query-devtools", inputs: { startOpen: { classPropertyName: "startOpen", publicName: "startOpen", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-dock": "dock()" }, classAttribute: "et-query-devtools-host" }, providers: [{ provide: QUERY_DEVTOOLS_HOST, useExisting: QueryDevtoolsComponent }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <section\n    #panel\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [attr.data-dock]=\"poppedOut() ? 'popout' : dock()\"\n    [attr.data-pane-axis]=\"paneAxis()\"\n    [attr.data-parked]=\"floatParked() ? '' : null\"\n    [style.block-size.px]=\"panelBlockSize()\"\n    [style.inline-size.px]=\"panelInlineSize()\"\n    [style.inset-block-start.px]=\"panelInsetBlock()\"\n    [style.inset-inline-start.px]=\"panelInsetInline()\"\n    [style.--_et-qdt-list-width.px]=\"listWidth()\"\n    [style.--_et-qdt-drawer-width.px]=\"drawerWidth()\"\n    [style.--_et-qdt-list-height.px]=\"listHeight()\"\n    [style.--_et-qdt-drawer-height.px]=\"drawerHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <!-- A pop-out is sized by its window, so there is no edge to drag. A float is a window in the page:\n         a title bar to move it and every edge to resize it, on the same `@ethlete/core` primitives the\n         stream pip window uses. A dock has one edge, and it does both. -->\n    @if (floating()) {\n      <!-- Parked, the panel is a grab strip: the edge handles would eat most of the peek that is left\n           to click, and resizing something you cannot see is not a thing to offer. -->\n      <et-resize-handles\n        [edges]=\"FLOAT_RESIZE_EDGES\"\n        [disabled]=\"floatParked()\"\n        (resizeStarted)=\"startFloatResize()\"\n        (resizeMoved)=\"resizeFloat($event)\"\n        (resizeEnded)=\"endFloatResize()\"\n        (resizeCancelled)=\"endFloatResize()\"\n      />\n      <div\n        (dragMoved)=\"moveFloat($event)\"\n        (dragEnded)=\"endFloatMove()\"\n        (dragCancelled)=\"endFloatMove()\"\n        (dragTapped)=\"restoreFloat()\"\n        class=\"et-query-devtools-move\"\n        title=\"Drag to move \u2014 shove it off an edge to park it, click the strip to bring it back\"\n        aria-hidden=\"true\"\n        etDragHandle\n      ></div>\n    } @else if (!poppedOut()) {\n      <div\n        (pointerdown)=\"startResize($event)\"\n        class=\"et-query-devtools-resize\"\n        title=\"Drag to resize\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of visibleTabs(); track tab.id) {\n          @let badge = tabBadges()[tab.id];\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (badge.count) {\n              <span class=\"et-query-devtools-tab-badge\">{{ badge.count }}</span>\n            }\n            @if (badge.errors) {\n              <span\n                class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\"\n                title=\"{{ badge.errors }} {{ badge.errorNoun ?? 'failing' }}\"\n              >\n                {{ badge.errors }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (overflowTabs().length; as overflowCount) {\n          <div class=\"et-query-devtools-menu\" etMenu>\n            <button\n              [title]=\"overflowCount + ' tabs with nothing in them'\"\n              class=\"et-query-devtools-tab\"\n              type=\"button\"\n              etMenuTrigger\n            >\n              More\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                @for (tab of overflowTabs(); track tab.id) {\n                  <button (activate)=\"activeTab.set(tab.id)\" et-menu-item type=\"button\">{{ tab.label }}</button>\n                }\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          [attr.aria-pressed]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-btn et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          <svg\n            class=\"et-query-devtools-inspect-icon\"\n            viewBox=\"0 0 16 16\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <circle class=\"et-query-devtools-inspect-icon-ring\" cx=\"8\" cy=\"8\" r=\"4.25\" />\n            <circle class=\"et-query-devtools-inspect-icon-dot\" cx=\"8\" cy=\"8\" r=\"1.15\" />\n            <path d=\"M8 0.9v2.1M8 13v2.1M0.9 8h2.1M13 8h2.1\" />\n          </svg>\n          {{ inspectActive() ? 'Inspecting' : 'Inspect' }}\n          @if (inspectActive()) {\n            <kbd class=\"et-query-devtools-kbd et-query-devtools-kbd--inverse\">Esc</kbd>\n          }\n        </button>\n        <button\n          (click)=\"downloadSession()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Download every registered entry, the event log, the cache totals and anything armed as one JSON file - the attachment for a bug report\"\n        >\n          <span aria-hidden=\"true\">\u2913</span>\n          Session\n        </button>\n        <!-- A gear, not a tab: Settings holds nothing to count, so the badge/overflow logic would push it\n             behind More - and the one control that explains a panel behaving oddly may not be hidden. -->\n        <button\n          [class.et-query-devtools-btn--active]=\"activeTab() === 'settings'\"\n          [attr.aria-pressed]=\"activeTab() === 'settings'\"\n          (click)=\"toggleSettings()\"\n          class=\"et-query-devtools-btn et-query-devtools-icon-btn\"\n          type=\"button\"\n          title=\"Settings: where panel state is kept, and the limits it holds\"\n          aria-label=\"Settings\"\n        >\n          <span aria-hidden=\"true\">\u2699</span>\n        </button>\n        @if (!poppedOut()) {\n          @let layout = currentLayout();\n          <div class=\"et-query-devtools-menu\" etMenu placement=\"bottom-end\">\n            <button class=\"et-query-devtools-btn\" title=\"Where the panel sits\" type=\"button\" etMenuTrigger>\n              <span class=\"et-query-devtools-menu-glyph\" aria-hidden=\"true\">{{ layout.glyph }}</span>\n              {{ layout.label }}\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                <et-menu-radio-group [value]=\"dock()\">\n                  @for (option of LAYOUTS; track option.id) {\n                    <!-- eslint-disable ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n                    <et-menu-radio-item\n                      [value]=\"option.id\"\n                      [title]=\"option.hint\"\n                      [closeOnActivate]=\"true\"\n                      (activate)=\"selectLayout(option.id)\"\n                    >\n                      <!-- eslint-enable ethlete/prefer-static-boolean-properties -->\n                      <span class=\"et-query-devtools-menu-item-glyph\" aria-hidden=\"true\">{{ option.glyph }}</span>\n                      {{ option.label }}\n                    </et-menu-radio-item>\n                  }\n                </et-menu-radio-group>\n                <et-menu-separator />\n                <et-menu-checkbox-item\n                  [checked]=\"reservesSpace()\"\n                  [disabled]=\"floating()\"\n                  (checkedChange)=\"reservesSpace.set($event)\"\n                  title=\"The page gives up the room the panel covers, so its last rows can still be scrolled to. Docks only - a float sits wherever it was dragged.\"\n                >\n                  Reserve page space\n                </et-menu-checkbox-item>\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n        <span class=\"et-query-devtools-header-divider\" aria-hidden=\"true\"></span>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-btn et-query-devtools-btn--danger\"\n          type=\"button\"\n          title=\"{{ poppedOut() ? 'Bring the panel back into the app window' : 'Close devtools (' + shortcut + ')' }}\"\n        >\n          @if (poppedOut()) {\n            <span aria-hidden=\"true\">\u29C8</span>\n            Dock back\n          } @else {\n            <span aria-hidden=\"true\">\u2715</span>\n            Close\n            <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n          }\n        </button>\n      </div>\n    </header>\n\n    @if (popOutBlocked()) {\n      <div class=\"et-query-devtools-notice-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-text\">\n          The browser blocked the pop-up window. Allow pop-ups for this site, or float the panel over the page instead \u2014\n          a float needs no permission.\n        </span>\n        <button (click)=\"floatPanel()\" class=\"et-query-devtools-btn\" type=\"button\">Float instead</button>\n        <button (click)=\"popOutBlocked.set(false)\" class=\"et-query-devtools-btn\" type=\"button\">Dismiss</button>\n      </div>\n    }\n\n    @if (armedFaultClients(); as armed) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Faults armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ armed.join(', ') }}</span>\n          \u2014 every failure and delay you see from\n          {{ armed.length === 1 ? 'this client' : 'these clients' }} is injected, not the API.\n          @if (faultsRestored()) {\n            They came back from your last page load \u2014 set <em>Armed faults</em> back to <em>none</em> in Settings to\n            stop that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'faults'\"\n          (click)=\"activeTab.set('faults')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"CLEAR_FAULTS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (armedMockRoutes(); as mocked) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Mocks armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ mocked.join(', ') }}</span>\n          \u2014 {{ mocked.length === 1 ? 'that route is' : 'those routes are' }} answered by the panel, so nothing they show\n          reached the API.\n          @if (mocksRestored()) {\n            They came back from your last page load \u2014 set <em>Armed mocks</em> back to <em>none</em> in Settings to stop\n            that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'mocks'\"\n          (click)=\"activeTab.set('mocks')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"DISARM_MOCKS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (restoredOverrides(); as restored) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          @if (restored.ops) {\n            <strong>Overrides re-armed</strong> \u2014 {{ restored.ops }} {{ restored.ops === 1 ? 'edit' : 'edits' }} from\n            your last page load {{ restored.ops === 1 ? 'is' : 'are' }} back on {{ restored.queries }}\n            {{ restored.queries === 1 ? 'query' : 'queries' }}, so those responses are not what the API sent.\n            @if (restored.fromLocalStorage) {\n              They came back from <strong>localStorage</strong>, so they outlive closing this tab \u2014 clear them, or set\n              overrides back to <em>session</em> in Settings.\n            }\n          } @else {\n            <strong>Overrides could not be re-armed.</strong>\n          }\n          @if (restored.orphaned.length) {\n            <span class=\"et-query-devtools-armed-orphans\">\n              {{ restored.orphaned.length }} stored\n              {{ restored.orphaned.length === 1 ? 'override' : 'overrides' }} matched no query \u2014\n              <span class=\"et-query-devtools-mono\">{{ restored.orphaned.join(', ') }}</span>\n            </span>\n          }\n        </span>\n        @if (restored.firstId; as firstId) {\n          <button (click)=\"reviewRestoredOverrides(firstId)\" class=\"et-query-devtools-btn\" type=\"button\">Review</button>\n        }\n        <button (click)=\"DROP_RESTORED_OVERRIDES()\" class=\"et-query-devtools-btn\" type=\"button\">Drop all</button>\n      </div>\n    }\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <et-query-devtools-queries-tab />\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <et-query-devtools-stacks-tab />\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <et-query-devtools-sequences-tab />\n        }\n\n        <!-- FORMS -->\n        @case ('forms') {\n          <et-query-devtools-forms-tab />\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <et-query-devtools-auth-tab />\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <et-query-devtools-sockets-tab />\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <et-query-devtools-cache-tab />\n        }\n\n        <!-- LOCKS -->\n        @case ('locks') {\n          <et-query-devtools-locks-tab />\n        }\n\n        <!-- TIMELINE -->\n        @case ('timeline') {\n          <et-query-devtools-timeline-tab />\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <et-query-devtools-events-tab />\n        }\n\n        <!-- FAULTS -->\n        @case ('faults') {\n          <et-query-devtools-faults-tab />\n        }\n\n        <!-- MOCKS -->\n        @case ('mocks') {\n          <et-query-devtools-mocks-tab />\n        }\n\n        <!-- ABOUT -->\n        @case ('about') {\n          <et-query-devtools-about />\n        }\n\n        <!-- SETTINGS -->\n        @case ('settings') {\n          <et-query-devtools-settings />\n        }\n      }\n    </div>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle [tampered]=\"panelTampered()\" (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n\n@if (locatedRect(); as rect) {\n  <div\n    [style.left.px]=\"rect.left\"\n    [style.top.px]=\"rect.top\"\n    [style.width.px]=\"rect.width\"\n    [style.height.px]=\"rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">created here</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);--_et-qdt-title-bar: 2.4rem;--_et-qdt-radius: .5rem;--_et-qdt-control-h: 2.4rem;--_et-qdt-row-h: 3.6rem;position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}@media(pointer:coarse){.et-query-devtools-host{--_et-qdt-control-h: 3.4rem;--_et-qdt-row-h: 4.4rem}}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=right]){inset-block:0;inset-inline-start:auto}.et-query-devtools-panel:where([data-dock=right]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-start:1px solid var(--_et-qdt-border);box-shadow:-.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=float]){inset:0}.et-query-devtools-panel:where([data-dock=float]){--_et-qdt-frame: .8rem;--et-resize-handles-edge-size: var(--_et-qdt-frame);--et-resize-handles-touch-edge-size: var(--_et-qdt-frame);--et-resize-handles-corner-size: 1.6rem;--et-resize-handles-touch-corner-size: 1.6rem;--et-resize-handles-edge-inset: 1.6rem;--et-resize-handles-side-top: var(--_et-qdt-title-bar);--et-resize-handles-side-bottom: 1.6rem;--et-resize-handles-z-index: 3;position:absolute;inline-size:auto;min-block-size:0;max-block-size:none;padding-block-start:var(--_et-qdt-title-bar);padding-inline:var(--_et-qdt-frame);padding-block-end:var(--_et-qdt-frame);border:1px solid var(--_et-qdt-border);border-radius:.6rem;box-shadow:0 1rem 4rem #00000073;overflow:hidden}.et-query-devtools-move{position:absolute;inset-inline:0;inset-block-start:0;block-size:var(--_et-qdt-title-bar);cursor:move;z-index:2}.et-query-devtools-panel:where([data-dock=float]) .et-query-devtools-body{border-radius:.3rem;overflow:hidden}.et-query-devtools-move:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.9rem;inline-size:3rem;margin-inline-start:-1.5rem;block-size:.6rem;background-image:radial-gradient(currentcolor 40%,transparent 42%);background-size:.4rem .3rem;color:var(--_et-qdt-subtle)}@media(hover:hover){.et-query-devtools-move:hover:after{color:var(--_et-qdt-accent)}}.et-query-devtools-panel:where([data-dock=float][data-parked]){opacity:.85}@media(hover:hover){.et-query-devtools-panel:where([data-dock=float][data-parked]):hover{opacity:1}}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move{cursor:grab;background:var(--_et-qdt-active)}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move:after{color:var(--_et-qdt-accent)}.et-query-devtools-host:where([data-dock=left]){inset-block:0;inset-inline-end:auto}.et-query-devtools-panel:where([data-dock=left]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-end:1px solid var(--_et-qdt-border);box-shadow:.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=top]){inset-block-start:0;inset-block-end:auto}.et-query-devtools-panel:where([data-dock=top]){border-block-start:0;border-block-end:1px solid var(--_et-qdt-border);box-shadow:0 .4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=popout]){position:static;inline-size:100%;block-size:100%}.et-query-devtools-panel:where([data-dock=popout]){block-size:100%;max-block-size:none;border:0;box-shadow:none}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-header{flex-wrap:wrap}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions){flex:1 1 auto;flex-wrap:nowrap;min-inline-size:0;overflow-x:auto}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions)>*{flex:none}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-master-detail,.et-query-devtools-split){flex-direction:column}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-list,.et-query-devtools-detail,.et-query-devtools-drawer,.et-query-devtools-split .et-query-devtools-scroll){flex:1 1 50%;min-inline-size:0;min-block-size:0;max-inline-size:none;border-inline-start:0;border-inline-end:0}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-detail,.et-query-devtools-drawer){border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-master-detail>.et-query-devtools-list{flex:0 1 var(--_et-qdt-list-height, 50%);min-block-size:var(--_et-qdt-list-height, 0);max-block-size:var(--_et-qdt-list-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-split>.et-query-devtools-drawer{flex:0 1 var(--_et-qdt-drawer-height, 50%);min-block-size:var(--_et-qdt-drawer-height, 0);max-block-size:var(--_et-qdt-drawer-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-pane-resize{cursor:ns-resize}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize,.et-query-devtools-pane-resize{touch-action:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize{inset-inline:0 auto;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize{inset-inline:auto 0;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize{inset-block:auto 0}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize:after{inset-inline:.2rem auto;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize:after{inset-inline:auto .2rem;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize:after{inset-block:auto .2rem}@media(hover:hover){.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-armed-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-block-end:1px solid color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error);font-size:1.1rem}.et-query-devtools-armed-text{flex:1 1 auto;min-inline-size:0}.et-query-devtools-notice-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:var(--_et-qdt-hover);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg);font-size:1.1rem}.et-query-devtools-notice-bar .et-query-devtools-btn{flex:0 0 auto}.et-query-devtools-armed-orphans{display:block;opacity:.85}.et-query-devtools-armed-dot{flex:0 0 auto;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--_et-qdt-error);animation:et-query-devtools-armed-pulse 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-query-devtools-armed-dot{animation:none}}@keyframes et-query-devtools-armed-pulse{50%{opacity:.25}}.et-query-devtools-armed-bar .et-query-devtools-btn{flex:0 0 auto;border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}@media(hover:hover){.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-tab-badge{display:inline-block;padding-inline:.45rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-interaction) 12%,transparent);color:var(--_et-qdt-muted);font-size:1rem;font-variant-numeric:tabular-nums}.et-query-devtools-tab-badge--error{background:color-mix(in srgb,var(--_et-qdt-error) 25%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-menu{display:contents}.et-query-devtools-menu-caret{font-size:.9em;opacity:.7}.et-query-devtools-menu-glyph{display:inline-block;min-inline-size:1.2rem;text-align:center}.et-query-devtools-menu>[data-menu-open]{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-menu .et-query-devtools-menu-item-glyph{display:inline-block;inline-size:16px;text-align:center}.et-menu-item-content:has(.et-query-devtools-menu-item-note){display:flex;flex-direction:column;align-items:start;gap:2px;padding-block:8px}.et-query-devtools-menu-item-note{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));font-size:12px}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.2rem;flex:0 0 auto}.et-query-devtools-header-divider{inline-size:1px;block-size:1.6rem;margin-inline:.4rem;background:var(--_et-qdt-border)}.et-query-devtools-inspect-btn{position:relative}.et-query-devtools-inspect-icon{inline-size:1.4rem;block-size:1.4rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}.et-query-devtools-inspect-icon-dot{fill:currentColor;stroke:none}.et-query-devtools-btn.et-query-devtools-inspect-btn--active,.et-query-devtools-btn.et-query-devtools-inspect-btn--active:hover{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-inspect-btn--active:after{content:\"\";position:absolute;inset:-.3rem;border:1px solid var(--_et-qdt-accent);border-radius:calc(var(--_et-qdt-radius) + .3rem);pointer-events:none;animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}@keyframes et-query-devtools-inspect-pulse{0%,to{opacity:.2}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.et-query-devtools-inspect-btn--active:after,.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:none;opacity:1}}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-kbd--inverse{background:#00000026;box-shadow:inset 0 0 0 1px #00000040;color:inherit}@media(hover:none)and (pointer:coarse){.et-query-devtools-kbd{display:none}}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}@media(hover:hover){.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}@media(hover:hover){.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-pane{display:flex;flex-direction:column;flex:1 1 auto;block-size:100%;min-inline-size:0;min-block-size:0;overflow:hidden}.et-query-devtools-pane>.et-query-devtools-scroll{padding-block:0 1rem}.et-query-devtools-pane-resize{flex:0 0 .5rem;align-self:stretch;cursor:ew-resize;background:transparent;transition:background .12s ease}.et-query-devtools-pane-resize:active{background:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-pane-resize:hover{background:var(--_et-qdt-accent)}}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.8rem;position:sticky;inset-block-start:0;z-index:1;background:var(--_et-qdt-bg);border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-scroll>.et-query-devtools-toolbar{inset-block-start:-1rem}.et-query-devtools-toolbar-row{display:flex;align-items:center;flex-wrap:wrap;flex:1 1 100%;gap:.5rem}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,var(--_et-qdt-bg));color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .6rem;font:inherit;font-size:1.15rem}.et-query-devtools-select option{background-color:var(--_et-qdt-bg);color:var(--_et-qdt-fg)}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:stretch;inline-size:100%;min-block-size:var(--_et-qdt-row-h);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg)}@media(hover:hover){.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);border:1px solid transparent;border-radius:var(--_et-qdt-radius);background:transparent;color:var(--_et-qdt-muted);padding:.25rem .7rem;font:inherit;font-size:1.15rem;line-height:1.4;white-space:nowrap;cursor:pointer;transition:color .12s ease,background-color .12s ease,border-color .12s ease}@media(hover:hover){.et-query-devtools-btn:hover:not(:disabled){background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}}.et-query-devtools-btn:focus-visible{outline:2px solid var(--_et-qdt-accent);outline-offset:1px}.et-query-devtools-btn:disabled{color:var(--_et-qdt-subtle);cursor:default;background:transparent;opacity:.6}.et-query-devtools-btn--primary,.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 40%,transparent);color:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 26%,transparent)}}@media(hover:hover){.et-query-devtools-btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 16%,transparent);color:var(--_et-qdt-error)}}.et-query-devtools-btn--tampered,.et-query-devtools-btn--tampered:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-icon-btn{inline-size:var(--_et-qdt-control-h);padding-inline:0;font-size:1.3rem}.et-query-devtools-btn-group{display:inline-flex;flex:0 0 auto;border:1px solid var(--_et-qdt-border);border-radius:var(--_et-qdt-radius);overflow:hidden}.et-query-devtools-btn-group>.et-query-devtools-btn{border-radius:0;border-block:0;border-inline-start:0;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-btn-group>.et-query-devtools-btn:last-child{border-inline-end:0}.et-query-devtools-toolbar-btn{margin-inline-start:auto;flex:0 0 auto}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat{padding:.6rem .8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-stat dt{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat dd{margin:0;font-size:1.5rem;font-variant-numeric:tabular-nums}.et-query-devtools-stat-sub{display:block;font-size:1rem;color:var(--_et-qdt-subtle)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-retry-glyph{font-size:.7em;line-height:1}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}button.et-query-devtools-chip--button{appearance:none;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}@media(hover:hover){button.et-query-devtools-chip--button:hover{border-color:var(--_et-qdt-accent);color:var(--_et-qdt-accent)}}.et-query-devtools-facet{appearance:none;min-block-size:var(--_et-qdt-control-h);padding-inline:.8rem;background:transparent;cursor:pointer;color:var(--_et-qdt-muted);font:inherit;font-size:1.1rem;line-height:1.4}@media(hover:hover){.et-query-devtools-facet:hover:not(:disabled){color:var(--_et-qdt-fg);background:var(--_et-qdt-hover);border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent)}}.et-query-devtools-facet:disabled{color:var(--_et-qdt-subtle);cursor:default}.et-query-devtools-facet--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 14%,transparent)}.et-query-devtools-facet-count{font-variant-numeric:tabular-nums;color:inherit;opacity:.75}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card--armed{border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table td .et-query-devtools-chip{padding-block:0;line-height:1.4}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-cell-actions{display:inline-flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:1 1 16rem;min-inline-size:0;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,transparent);color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .8rem;font:inherit;font-size:1.15rem}.et-query-devtools-search:focus{outline:none;border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:var(--_et-qdt-bg)}.et-query-devtools-row-link{display:inline-flex;align-items:center;gap:.6rem;appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer}.et-query-devtools-row-link:focus-visible .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}@media(hover:hover){.et-query-devtools-row-link:hover .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}}.et-query-devtools-hint{flex:1 1 24rem;color:var(--_et-qdt-muted);font-size:1.1rem;margin:0}.et-query-devtools-input{inline-size:100%;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-input--number{inline-size:8rem;font-variant-numeric:tabular-nums}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-btn--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent)}}\n"], dependencies: [{ kind: "component", type: QueryDevtoolsAuthTabComponent, selector: "et-query-devtools-auth-tab" }, { kind: "component", type: QueryDevtoolsCacheTabComponent, selector: "et-query-devtools-cache-tab" }, { kind: "component", type: QueryDevtoolsEventsTabComponent, selector: "et-query-devtools-events-tab" }, { kind: "component", type: QueryDevtoolsAboutComponent, selector: "et-query-devtools-about" }, { kind: "component", type: QueryDevtoolsSettingsComponent, selector: "et-query-devtools-settings" }, { kind: "component", type: QueryDevtoolsFaultsTabComponent, selector: "et-query-devtools-faults-tab" }, { kind: "component", type: QueryDevtoolsFormsTabComponent, selector: "et-query-devtools-forms-tab" }, { kind: "component", type: QueryDevtoolsLocksTabComponent, selector: "et-query-devtools-locks-tab" }, { kind: "component", type: QueryDevtoolsMocksTabComponent, selector: "et-query-devtools-mocks-tab" }, { kind: "component", type: QueryDevtoolsQueriesTabComponent, selector: "et-query-devtools-queries-tab" }, { kind: "component", type: QueryDevtoolsSequencesTabComponent, selector: "et-query-devtools-sequences-tab" }, { kind: "component", type: QueryDevtoolsSocketsTabComponent, selector: "et-query-devtools-sockets-tab" }, { kind: "component", type: QueryDevtoolsStacksTabComponent, selector: "et-query-devtools-stacks-tab" }, { kind: "component", type: QueryDevtoolsTimelineTabComponent, selector: "et-query-devtools-timeline-tab" }, { kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", inputs: ["tampered"], outputs: ["openChange"] }, { kind: "directive", type: DragHandleDirective, selector: "[etDragHandle]", inputs: ["commitThreshold", "disabled"], outputs: ["dragTapped", "dragStarted", "dragMoved", "dragEnded", "dragCancelled"] }, { kind: "component", type: MenuCheckboxItemComponent, selector: "et-menu-checkbox-item", inputs: ["icon"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "loop", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "component", type: MenuItemComponent, selector: "button[et-menu-item], a[et-menu-item]", inputs: ["variant"] }, { kind: "component", type: MenuRadioGroupComponent, selector: "et-menu-radio-group" }, { kind: "component", type: MenuRadioItemComponent, selector: "et-menu-radio-item", inputs: ["icon"] }, { kind: "component", type: MenuSeparatorComponent, selector: "et-menu-separator" }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded", "resizeCancelled"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryDevtoolsComponent, decorators: [{
             type: Component,
@@ -6648,6 +6951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         QueryDevtoolsSettingsComponent,
                         QueryDevtoolsFaultsTabComponent,
                         QueryDevtoolsFormsTabComponent,
+                        QueryDevtoolsLocksTabComponent,
                         QueryDevtoolsMocksTabComponent,
                         QueryDevtoolsQueriesTabComponent,
                         QueryDevtoolsSequencesTabComponent,
@@ -6656,18 +6960,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         QueryDevtoolsTimelineTabComponent,
                         QueryDevtoolsToggleComponent,
                         DragHandleDirective,
+                        MenuCheckboxItemComponent,
                         MenuComponent,
                         MenuDirective,
                         MenuItemComponent,
                         MenuRadioGroupComponent,
                         MenuRadioItemComponent,
+                        MenuSeparatorComponent,
                         MenuSurfaceDirective,
                         MenuTriggerDirective,
                         ResizeHandlesComponent,
                     ], providers: [{ provide: QUERY_DEVTOOLS_HOST, useExisting: QueryDevtoolsComponent }], host: {
                         class: 'et-query-devtools-host',
                         '[attr.data-dock]': 'dock()',
-                    }, template: "@if (open()) {\n  <section\n    #panel\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [attr.data-dock]=\"poppedOut() ? 'popout' : dock()\"\n    [attr.data-pane-axis]=\"paneAxis()\"\n    [attr.data-parked]=\"floatParked() ? '' : null\"\n    [style.block-size.px]=\"panelBlockSize()\"\n    [style.inline-size.px]=\"panelInlineSize()\"\n    [style.inset-block-start.px]=\"panelInsetBlock()\"\n    [style.inset-inline-start.px]=\"panelInsetInline()\"\n    [style.--_et-qdt-list-width.px]=\"listWidth()\"\n    [style.--_et-qdt-drawer-width.px]=\"drawerWidth()\"\n    [style.--_et-qdt-list-height.px]=\"listHeight()\"\n    [style.--_et-qdt-drawer-height.px]=\"drawerHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <!-- A pop-out is sized by its window, so there is no edge to drag. A float is a window in the page:\n         a title bar to move it and every edge to resize it, on the same `@ethlete/core` primitives the\n         stream pip window uses. A dock has one edge, and it does both. -->\n    @if (floating()) {\n      <!-- Parked, the panel is a grab strip: the edge handles would eat most of the peek that is left\n           to click, and resizing something you cannot see is not a thing to offer. -->\n      <et-resize-handles\n        [edges]=\"FLOAT_RESIZE_EDGES\"\n        [disabled]=\"floatParked()\"\n        (resizeStarted)=\"startFloatResize()\"\n        (resizeMoved)=\"resizeFloat($event)\"\n        (resizeEnded)=\"endFloatResize()\"\n        (resizeCancelled)=\"endFloatResize()\"\n      />\n      <div\n        (dragMoved)=\"moveFloat($event)\"\n        (dragEnded)=\"endFloatMove()\"\n        (dragCancelled)=\"endFloatMove()\"\n        (dragTapped)=\"restoreFloat()\"\n        class=\"et-query-devtools-move\"\n        title=\"Drag to move \u2014 shove it off an edge to park it, click the strip to bring it back\"\n        aria-hidden=\"true\"\n        etDragHandle\n      ></div>\n    } @else if (!poppedOut()) {\n      <div\n        (pointerdown)=\"startResize($event)\"\n        class=\"et-query-devtools-resize\"\n        title=\"Drag to resize\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of visibleTabs(); track tab.id) {\n          @let badge = tabBadges()[tab.id];\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (badge.count) {\n              <span class=\"et-query-devtools-tab-badge\">{{ badge.count }}</span>\n            }\n            @if (badge.errors) {\n              <span\n                class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\"\n                title=\"{{ badge.errors }} {{ badge.errorNoun ?? 'failing' }}\"\n              >\n                {{ badge.errors }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (overflowTabs().length; as overflowCount) {\n          <div class=\"et-query-devtools-menu\" etMenu>\n            <button\n              [title]=\"overflowCount + ' tabs with nothing in them'\"\n              class=\"et-query-devtools-tab\"\n              type=\"button\"\n              etMenuTrigger\n            >\n              More\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                @for (tab of overflowTabs(); track tab.id) {\n                  <button (activate)=\"activeTab.set(tab.id)\" et-menu-item type=\"button\">{{ tab.label }}</button>\n                }\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          [attr.aria-pressed]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-btn et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          <svg\n            class=\"et-query-devtools-inspect-icon\"\n            viewBox=\"0 0 16 16\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <circle class=\"et-query-devtools-inspect-icon-ring\" cx=\"8\" cy=\"8\" r=\"4.25\" />\n            <circle class=\"et-query-devtools-inspect-icon-dot\" cx=\"8\" cy=\"8\" r=\"1.15\" />\n            <path d=\"M8 0.9v2.1M8 13v2.1M0.9 8h2.1M13 8h2.1\" />\n          </svg>\n          {{ inspectActive() ? 'Inspecting' : 'Inspect' }}\n          @if (inspectActive()) {\n            <kbd class=\"et-query-devtools-kbd et-query-devtools-kbd--inverse\">Esc</kbd>\n          }\n        </button>\n        <button\n          (click)=\"downloadSession()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Download every registered entry, the event log, the cache totals and anything armed as one JSON file - the attachment for a bug report\"\n        >\n          <span aria-hidden=\"true\">\u2913</span>\n          Session\n        </button>\n        <!-- A gear, not a tab: Settings holds nothing to count, so the badge/overflow logic would push it\n             behind More - and the one control that explains a panel behaving oddly may not be hidden. -->\n        <button\n          [class.et-query-devtools-btn--active]=\"activeTab() === 'settings'\"\n          [attr.aria-pressed]=\"activeTab() === 'settings'\"\n          (click)=\"toggleSettings()\"\n          class=\"et-query-devtools-btn et-query-devtools-icon-btn\"\n          type=\"button\"\n          title=\"Settings: where panel state is kept, and the limits it holds\"\n          aria-label=\"Settings\"\n        >\n          <span aria-hidden=\"true\">\u2699</span>\n        </button>\n        @if (!poppedOut()) {\n          @let layout = currentLayout();\n          <div class=\"et-query-devtools-menu\" etMenu placement=\"bottom-end\">\n            <button class=\"et-query-devtools-btn\" title=\"Where the panel sits\" type=\"button\" etMenuTrigger>\n              <span class=\"et-query-devtools-menu-glyph\" aria-hidden=\"true\">{{ layout.glyph }}</span>\n              {{ layout.label }}\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                <et-menu-radio-group [value]=\"dock()\">\n                  @for (option of LAYOUTS; track option.id) {\n                    <!-- eslint-disable ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n                    <et-menu-radio-item\n                      [value]=\"option.id\"\n                      [title]=\"option.hint\"\n                      [closeOnActivate]=\"true\"\n                      (activate)=\"selectLayout(option.id)\"\n                    >\n                      <!-- eslint-enable ethlete/prefer-static-boolean-properties -->\n                      <span class=\"et-query-devtools-menu-item-glyph\" aria-hidden=\"true\">{{ option.glyph }}</span>\n                      {{ option.label }}\n                    </et-menu-radio-item>\n                  }\n                </et-menu-radio-group>\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n        <span class=\"et-query-devtools-header-divider\" aria-hidden=\"true\"></span>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-btn et-query-devtools-btn--danger\"\n          type=\"button\"\n          title=\"{{ poppedOut() ? 'Bring the panel back into the app window' : 'Close devtools (' + shortcut + ')' }}\"\n        >\n          @if (poppedOut()) {\n            <span aria-hidden=\"true\">\u29C8</span>\n            Dock back\n          } @else {\n            <span aria-hidden=\"true\">\u2715</span>\n            Close\n            <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n          }\n        </button>\n      </div>\n    </header>\n\n    @if (popOutBlocked()) {\n      <div class=\"et-query-devtools-notice-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-text\">\n          The browser blocked the pop-up window. Allow pop-ups for this site, or float the panel over the page instead \u2014\n          a float needs no permission.\n        </span>\n        <button (click)=\"floatPanel()\" class=\"et-query-devtools-btn\" type=\"button\">Float instead</button>\n        <button (click)=\"popOutBlocked.set(false)\" class=\"et-query-devtools-btn\" type=\"button\">Dismiss</button>\n      </div>\n    }\n\n    @if (armedFaultClients(); as armed) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Faults armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ armed.join(', ') }}</span>\n          \u2014 every failure and delay you see from\n          {{ armed.length === 1 ? 'this client' : 'these clients' }} is injected, not the API.\n          @if (faultsRestored()) {\n            They came back from your last page load \u2014 set <em>Armed faults</em> back to <em>none</em> in Settings to\n            stop that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'faults'\"\n          (click)=\"activeTab.set('faults')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"CLEAR_FAULTS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (armedMockRoutes(); as mocked) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Mocks armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ mocked.join(', ') }}</span>\n          \u2014 {{ mocked.length === 1 ? 'that route is' : 'those routes are' }} answered by the panel, so nothing they show\n          reached the API.\n          @if (mocksRestored()) {\n            They came back from your last page load \u2014 set <em>Armed mocks</em> back to <em>none</em> in Settings to stop\n            that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'mocks'\"\n          (click)=\"activeTab.set('mocks')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"DISARM_MOCKS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (restoredOverrides(); as restored) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          @if (restored.ops) {\n            <strong>Overrides re-armed</strong> \u2014 {{ restored.ops }} {{ restored.ops === 1 ? 'edit' : 'edits' }} from\n            your last page load {{ restored.ops === 1 ? 'is' : 'are' }} back on {{ restored.queries }}\n            {{ restored.queries === 1 ? 'query' : 'queries' }}, so those responses are not what the API sent.\n            @if (restored.fromLocalStorage) {\n              They came back from <strong>localStorage</strong>, so they outlive closing this tab \u2014 clear them, or set\n              overrides back to <em>session</em> in Settings.\n            }\n          } @else {\n            <strong>Overrides could not be re-armed.</strong>\n          }\n          @if (restored.orphaned.length) {\n            <span class=\"et-query-devtools-armed-orphans\">\n              {{ restored.orphaned.length }} stored\n              {{ restored.orphaned.length === 1 ? 'override' : 'overrides' }} matched no query \u2014\n              <span class=\"et-query-devtools-mono\">{{ restored.orphaned.join(', ') }}</span>\n            </span>\n          }\n        </span>\n        @if (restored.firstId; as firstId) {\n          <button (click)=\"reviewRestoredOverrides(firstId)\" class=\"et-query-devtools-btn\" type=\"button\">Review</button>\n        }\n        <button (click)=\"DROP_RESTORED_OVERRIDES()\" class=\"et-query-devtools-btn\" type=\"button\">Drop all</button>\n      </div>\n    }\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <et-query-devtools-queries-tab />\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <et-query-devtools-stacks-tab />\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <et-query-devtools-sequences-tab />\n        }\n\n        <!-- FORMS -->\n        @case ('forms') {\n          <et-query-devtools-forms-tab />\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <et-query-devtools-auth-tab />\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <et-query-devtools-sockets-tab />\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <et-query-devtools-cache-tab />\n        }\n\n        <!-- TIMELINE -->\n        @case ('timeline') {\n          <et-query-devtools-timeline-tab />\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <et-query-devtools-events-tab />\n        }\n\n        <!-- FAULTS -->\n        @case ('faults') {\n          <et-query-devtools-faults-tab />\n        }\n\n        <!-- MOCKS -->\n        @case ('mocks') {\n          <et-query-devtools-mocks-tab />\n        }\n\n        <!-- ABOUT -->\n        @case ('about') {\n          <et-query-devtools-about />\n        }\n\n        <!-- SETTINGS -->\n        @case ('settings') {\n          <et-query-devtools-settings />\n        }\n      }\n    </div>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle [tampered]=\"panelTampered()\" (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n\n@if (locatedRect(); as rect) {\n  <div\n    [style.left.px]=\"rect.left\"\n    [style.top.px]=\"rect.top\"\n    [style.width.px]=\"rect.width\"\n    [style.height.px]=\"rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">created here</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);--_et-qdt-title-bar: 2.4rem;--_et-qdt-radius: .5rem;--_et-qdt-control-h: 2.4rem;--_et-qdt-row-h: 3.6rem;position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}@media(pointer:coarse){.et-query-devtools-host{--_et-qdt-control-h: 3.4rem;--_et-qdt-row-h: 4.4rem}}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=right]){inset-block:0;inset-inline-start:auto}.et-query-devtools-panel:where([data-dock=right]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-start:1px solid var(--_et-qdt-border);box-shadow:-.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=float]){inset:0}.et-query-devtools-panel:where([data-dock=float]){--_et-qdt-frame: .8rem;--et-resize-handles-edge-size: var(--_et-qdt-frame);--et-resize-handles-touch-edge-size: var(--_et-qdt-frame);--et-resize-handles-corner-size: 1.6rem;--et-resize-handles-touch-corner-size: 1.6rem;--et-resize-handles-edge-inset: 1.6rem;--et-resize-handles-side-top: var(--_et-qdt-title-bar);--et-resize-handles-side-bottom: 1.6rem;--et-resize-handles-z-index: 3;position:absolute;inline-size:auto;min-block-size:0;max-block-size:none;padding-block-start:var(--_et-qdt-title-bar);padding-inline:var(--_et-qdt-frame);padding-block-end:var(--_et-qdt-frame);border:1px solid var(--_et-qdt-border);border-radius:.6rem;box-shadow:0 1rem 4rem #00000073;overflow:hidden}.et-query-devtools-move{position:absolute;inset-inline:0;inset-block-start:0;block-size:var(--_et-qdt-title-bar);cursor:move;z-index:2}.et-query-devtools-panel:where([data-dock=float]) .et-query-devtools-body{border-radius:.3rem;overflow:hidden}.et-query-devtools-move:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.9rem;inline-size:3rem;margin-inline-start:-1.5rem;block-size:.6rem;background-image:radial-gradient(currentcolor 40%,transparent 42%);background-size:.4rem .3rem;color:var(--_et-qdt-subtle)}@media(hover:hover){.et-query-devtools-move:hover:after{color:var(--_et-qdt-accent)}}.et-query-devtools-panel:where([data-dock=float][data-parked]){opacity:.85}@media(hover:hover){.et-query-devtools-panel:where([data-dock=float][data-parked]):hover{opacity:1}}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move{cursor:grab;background:var(--_et-qdt-active)}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move:after{color:var(--_et-qdt-accent)}.et-query-devtools-host:where([data-dock=left]){inset-block:0;inset-inline-end:auto}.et-query-devtools-panel:where([data-dock=left]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-end:1px solid var(--_et-qdt-border);box-shadow:.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=top]){inset-block-start:0;inset-block-end:auto}.et-query-devtools-panel:where([data-dock=top]){border-block-start:0;border-block-end:1px solid var(--_et-qdt-border);box-shadow:0 .4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=popout]){position:static;inline-size:100%;block-size:100%}.et-query-devtools-panel:where([data-dock=popout]){block-size:100%;max-block-size:none;border:0;box-shadow:none}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-header{flex-wrap:wrap}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions){flex:1 1 auto;flex-wrap:nowrap;min-inline-size:0;overflow-x:auto}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions)>*{flex:none}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-master-detail,.et-query-devtools-split){flex-direction:column}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-list,.et-query-devtools-detail,.et-query-devtools-drawer,.et-query-devtools-split .et-query-devtools-scroll){flex:1 1 50%;min-inline-size:0;min-block-size:0;max-inline-size:none;border-inline-start:0;border-inline-end:0}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-detail,.et-query-devtools-drawer){border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-master-detail>.et-query-devtools-list{flex:0 1 var(--_et-qdt-list-height, 50%);min-block-size:var(--_et-qdt-list-height, 0);max-block-size:var(--_et-qdt-list-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-split>.et-query-devtools-drawer{flex:0 1 var(--_et-qdt-drawer-height, 50%);min-block-size:var(--_et-qdt-drawer-height, 0);max-block-size:var(--_et-qdt-drawer-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-pane-resize{cursor:ns-resize}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize,.et-query-devtools-pane-resize{touch-action:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize{inset-inline:0 auto;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize{inset-inline:auto 0;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize{inset-block:auto 0}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize:after{inset-inline:.2rem auto;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize:after{inset-inline:auto .2rem;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize:after{inset-block:auto .2rem}@media(hover:hover){.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-armed-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-block-end:1px solid color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error);font-size:1.1rem}.et-query-devtools-armed-text{flex:1 1 auto;min-inline-size:0}.et-query-devtools-notice-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:var(--_et-qdt-hover);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg);font-size:1.1rem}.et-query-devtools-notice-bar .et-query-devtools-btn{flex:0 0 auto}.et-query-devtools-armed-orphans{display:block;opacity:.85}.et-query-devtools-armed-dot{flex:0 0 auto;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--_et-qdt-error);animation:et-query-devtools-armed-pulse 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-query-devtools-armed-dot{animation:none}}@keyframes et-query-devtools-armed-pulse{50%{opacity:.25}}.et-query-devtools-armed-bar .et-query-devtools-btn{flex:0 0 auto;border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}@media(hover:hover){.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-tab-badge{display:inline-block;padding-inline:.45rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-interaction) 12%,transparent);color:var(--_et-qdt-muted);font-size:1rem;font-variant-numeric:tabular-nums}.et-query-devtools-tab-badge--error{background:color-mix(in srgb,var(--_et-qdt-error) 25%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-menu{display:contents}.et-query-devtools-menu-caret{font-size:.9em;opacity:.7}.et-query-devtools-menu-glyph{display:inline-block;min-inline-size:1.2rem;text-align:center}.et-query-devtools-menu>[data-menu-open]{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-menu .et-query-devtools-menu-item-glyph{display:inline-block;inline-size:16px;text-align:center}.et-menu-item-content:has(.et-query-devtools-menu-item-note){display:flex;flex-direction:column;align-items:start;gap:2px;padding-block:8px}.et-query-devtools-menu-item-note{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));font-size:12px}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.2rem;flex:0 0 auto}.et-query-devtools-header-divider{inline-size:1px;block-size:1.6rem;margin-inline:.4rem;background:var(--_et-qdt-border)}.et-query-devtools-inspect-btn{position:relative}.et-query-devtools-inspect-icon{inline-size:1.4rem;block-size:1.4rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}.et-query-devtools-inspect-icon-dot{fill:currentColor;stroke:none}.et-query-devtools-btn.et-query-devtools-inspect-btn--active,.et-query-devtools-btn.et-query-devtools-inspect-btn--active:hover{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-inspect-btn--active:after{content:\"\";position:absolute;inset:-.3rem;border:1px solid var(--_et-qdt-accent);border-radius:calc(var(--_et-qdt-radius) + .3rem);pointer-events:none;animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}@keyframes et-query-devtools-inspect-pulse{0%,to{opacity:.2}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.et-query-devtools-inspect-btn--active:after,.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:none;opacity:1}}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-kbd--inverse{background:#00000026;box-shadow:inset 0 0 0 1px #00000040;color:inherit}@media(hover:none)and (pointer:coarse){.et-query-devtools-kbd{display:none}}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}@media(hover:hover){.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}@media(hover:hover){.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-pane{display:flex;flex-direction:column;flex:1 1 auto;block-size:100%;min-inline-size:0;min-block-size:0;overflow:hidden}.et-query-devtools-pane>.et-query-devtools-scroll{padding-block:0 1rem}.et-query-devtools-pane-resize{flex:0 0 .5rem;align-self:stretch;cursor:ew-resize;background:transparent;transition:background .12s ease}.et-query-devtools-pane-resize:active{background:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-pane-resize:hover{background:var(--_et-qdt-accent)}}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.8rem;position:sticky;inset-block-start:0;z-index:1;background:var(--_et-qdt-bg);border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-scroll>.et-query-devtools-toolbar{inset-block-start:-1rem}.et-query-devtools-toolbar-row{display:flex;align-items:center;flex-wrap:wrap;flex:1 1 100%;gap:.5rem}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,var(--_et-qdt-bg));color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .6rem;font:inherit;font-size:1.15rem}.et-query-devtools-select option{background-color:var(--_et-qdt-bg);color:var(--_et-qdt-fg)}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:stretch;inline-size:100%;min-block-size:var(--_et-qdt-row-h);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg)}@media(hover:hover){.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);border:1px solid transparent;border-radius:var(--_et-qdt-radius);background:transparent;color:var(--_et-qdt-muted);padding:.25rem .7rem;font:inherit;font-size:1.15rem;line-height:1.4;white-space:nowrap;cursor:pointer;transition:color .12s ease,background-color .12s ease,border-color .12s ease}@media(hover:hover){.et-query-devtools-btn:hover:not(:disabled){background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}}.et-query-devtools-btn:focus-visible{outline:2px solid var(--_et-qdt-accent);outline-offset:1px}.et-query-devtools-btn:disabled{color:var(--_et-qdt-subtle);cursor:default;background:transparent;opacity:.6}.et-query-devtools-btn--primary,.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 40%,transparent);color:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 26%,transparent)}}@media(hover:hover){.et-query-devtools-btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 16%,transparent);color:var(--_et-qdt-error)}}.et-query-devtools-btn--tampered,.et-query-devtools-btn--tampered:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-icon-btn{inline-size:var(--_et-qdt-control-h);padding-inline:0;font-size:1.3rem}.et-query-devtools-btn-group{display:inline-flex;flex:0 0 auto;border:1px solid var(--_et-qdt-border);border-radius:var(--_et-qdt-radius);overflow:hidden}.et-query-devtools-btn-group>.et-query-devtools-btn{border-radius:0;border-block:0;border-inline-start:0;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-btn-group>.et-query-devtools-btn:last-child{border-inline-end:0}.et-query-devtools-toolbar-btn{margin-inline-start:auto;flex:0 0 auto}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat{padding:.6rem .8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-stat dt{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat dd{margin:0;font-size:1.5rem;font-variant-numeric:tabular-nums}.et-query-devtools-stat-sub{display:block;font-size:1rem;color:var(--_et-qdt-subtle)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-retry-glyph{font-size:.7em;line-height:1}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}button.et-query-devtools-chip--button{appearance:none;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}@media(hover:hover){button.et-query-devtools-chip--button:hover{border-color:var(--_et-qdt-accent);color:var(--_et-qdt-accent)}}.et-query-devtools-facet{appearance:none;min-block-size:var(--_et-qdt-control-h);padding-inline:.8rem;background:transparent;cursor:pointer;color:var(--_et-qdt-muted);font:inherit;font-size:1.1rem;line-height:1.4}@media(hover:hover){.et-query-devtools-facet:hover:not(:disabled){color:var(--_et-qdt-fg);background:var(--_et-qdt-hover);border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent)}}.et-query-devtools-facet:disabled{color:var(--_et-qdt-subtle);cursor:default}.et-query-devtools-facet--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 14%,transparent)}.et-query-devtools-facet-count{font-variant-numeric:tabular-nums;color:inherit;opacity:.75}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card--armed{border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table td .et-query-devtools-chip{padding-block:0;line-height:1.4}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-cell-actions{display:inline-flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:1 1 16rem;min-inline-size:0;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,transparent);color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .8rem;font:inherit;font-size:1.15rem}.et-query-devtools-search:focus{outline:none;border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:var(--_et-qdt-bg)}.et-query-devtools-row-link{display:inline-flex;align-items:center;gap:.6rem;appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer}.et-query-devtools-row-link:focus-visible .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}@media(hover:hover){.et-query-devtools-row-link:hover .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}}.et-query-devtools-hint{flex:1 1 24rem;color:var(--_et-qdt-muted);font-size:1.1rem;margin:0}.et-query-devtools-input{inline-size:100%;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-input--number{inline-size:8rem;font-variant-numeric:tabular-nums}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-btn--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent)}}\n"] }]
+                    }, template: "@if (open()) {\n  <section\n    #panel\n    [class.et-query-devtools-panel--resizing]=\"resizing()\"\n    [attr.data-dock]=\"poppedOut() ? 'popout' : dock()\"\n    [attr.data-pane-axis]=\"paneAxis()\"\n    [attr.data-parked]=\"floatParked() ? '' : null\"\n    [style.block-size.px]=\"panelBlockSize()\"\n    [style.inline-size.px]=\"panelInlineSize()\"\n    [style.inset-block-start.px]=\"panelInsetBlock()\"\n    [style.inset-inline-start.px]=\"panelInsetInline()\"\n    [style.--_et-qdt-list-width.px]=\"listWidth()\"\n    [style.--_et-qdt-drawer-width.px]=\"drawerWidth()\"\n    [style.--_et-qdt-list-height.px]=\"listHeight()\"\n    [style.--_et-qdt-drawer-height.px]=\"drawerHeight()\"\n    class=\"et-query-devtools-panel\"\n  >\n    <!-- A pop-out is sized by its window, so there is no edge to drag. A float is a window in the page:\n         a title bar to move it and every edge to resize it, on the same `@ethlete/core` primitives the\n         stream pip window uses. A dock has one edge, and it does both. -->\n    @if (floating()) {\n      <!-- Parked, the panel is a grab strip: the edge handles would eat most of the peek that is left\n           to click, and resizing something you cannot see is not a thing to offer. -->\n      <et-resize-handles\n        [edges]=\"FLOAT_RESIZE_EDGES\"\n        [disabled]=\"floatParked()\"\n        (resizeStarted)=\"startFloatResize()\"\n        (resizeMoved)=\"resizeFloat($event)\"\n        (resizeEnded)=\"endFloatResize()\"\n        (resizeCancelled)=\"endFloatResize()\"\n      />\n      <div\n        (dragMoved)=\"moveFloat($event)\"\n        (dragEnded)=\"endFloatMove()\"\n        (dragCancelled)=\"endFloatMove()\"\n        (dragTapped)=\"restoreFloat()\"\n        class=\"et-query-devtools-move\"\n        title=\"Drag to move \u2014 shove it off an edge to park it, click the strip to bring it back\"\n        aria-hidden=\"true\"\n        etDragHandle\n      ></div>\n    } @else if (!poppedOut()) {\n      <div\n        (pointerdown)=\"startResize($event)\"\n        class=\"et-query-devtools-resize\"\n        title=\"Drag to resize\"\n        aria-hidden=\"true\"\n      ></div>\n    }\n    <header class=\"et-query-devtools-header\">\n      <nav class=\"et-query-devtools-tabs\" role=\"tablist\">\n        @for (tab of visibleTabs(); track tab.id) {\n          @let badge = tabBadges()[tab.id];\n          <button\n            [class.et-query-devtools-tab--active]=\"activeTab() === tab.id\"\n            [attr.aria-selected]=\"activeTab() === tab.id\"\n            (click)=\"activeTab.set(tab.id)\"\n            class=\"et-query-devtools-tab\"\n            type=\"button\"\n            role=\"tab\"\n          >\n            {{ tab.label }}\n            @if (badge.count) {\n              <span class=\"et-query-devtools-tab-badge\">{{ badge.count }}</span>\n            }\n            @if (badge.errors) {\n              <span\n                class=\"et-query-devtools-tab-badge et-query-devtools-tab-badge--error\"\n                title=\"{{ badge.errors }} {{ badge.errorNoun ?? 'failing' }}\"\n              >\n                {{ badge.errors }}\n              </span>\n            }\n          </button>\n        }\n\n        @if (overflowTabs().length; as overflowCount) {\n          <div class=\"et-query-devtools-menu\" etMenu>\n            <button\n              [title]=\"overflowCount + ' tabs with nothing in them'\"\n              class=\"et-query-devtools-tab\"\n              type=\"button\"\n              etMenuTrigger\n            >\n              More\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                @for (tab of overflowTabs(); track tab.id) {\n                  <button (activate)=\"activeTab.set(tab.id)\" et-menu-item type=\"button\">{{ tab.label }}</button>\n                }\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n      </nav>\n\n      <div class=\"et-query-devtools-header-actions\">\n        <button\n          [class.et-query-devtools-inspect-btn--active]=\"inspectActive()\"\n          [attr.aria-pressed]=\"inspectActive()\"\n          (click)=\"toggleInspect()\"\n          class=\"et-query-devtools-btn et-query-devtools-inspect-btn\"\n          type=\"button\"\n          title=\"Inspect: hover the UI to find its query\"\n        >\n          <svg\n            class=\"et-query-devtools-inspect-icon\"\n            viewBox=\"0 0 16 16\"\n            width=\"14\"\n            height=\"14\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <circle class=\"et-query-devtools-inspect-icon-ring\" cx=\"8\" cy=\"8\" r=\"4.25\" />\n            <circle class=\"et-query-devtools-inspect-icon-dot\" cx=\"8\" cy=\"8\" r=\"1.15\" />\n            <path d=\"M8 0.9v2.1M8 13v2.1M0.9 8h2.1M13 8h2.1\" />\n          </svg>\n          {{ inspectActive() ? 'Inspecting' : 'Inspect' }}\n          @if (inspectActive()) {\n            <kbd class=\"et-query-devtools-kbd et-query-devtools-kbd--inverse\">Esc</kbd>\n          }\n        </button>\n        <button\n          (click)=\"downloadSession()\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n          title=\"Download every registered entry, the event log, the cache totals and anything armed as one JSON file - the attachment for a bug report\"\n        >\n          <span aria-hidden=\"true\">\u2913</span>\n          Session\n        </button>\n        <!-- A gear, not a tab: Settings holds nothing to count, so the badge/overflow logic would push it\n             behind More - and the one control that explains a panel behaving oddly may not be hidden. -->\n        <button\n          [class.et-query-devtools-btn--active]=\"activeTab() === 'settings'\"\n          [attr.aria-pressed]=\"activeTab() === 'settings'\"\n          (click)=\"toggleSettings()\"\n          class=\"et-query-devtools-btn et-query-devtools-icon-btn\"\n          type=\"button\"\n          title=\"Settings: where panel state is kept, and the limits it holds\"\n          aria-label=\"Settings\"\n        >\n          <span aria-hidden=\"true\">\u2699</span>\n        </button>\n        @if (!poppedOut()) {\n          @let layout = currentLayout();\n          <div class=\"et-query-devtools-menu\" etMenu placement=\"bottom-end\">\n            <button class=\"et-query-devtools-btn\" title=\"Where the panel sits\" type=\"button\" etMenuTrigger>\n              <span class=\"et-query-devtools-menu-glyph\" aria-hidden=\"true\">{{ layout.glyph }}</span>\n              {{ layout.label }}\n              <span class=\"et-query-devtools-menu-caret\" aria-hidden=\"true\">\u25BE</span>\n            </button>\n\n            <ng-template etMenuSurface>\n              <et-menu>\n                <et-menu-radio-group [value]=\"dock()\">\n                  @for (option of LAYOUTS; track option.id) {\n                    <!-- eslint-disable ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n                    <et-menu-radio-item\n                      [value]=\"option.id\"\n                      [title]=\"option.hint\"\n                      [closeOnActivate]=\"true\"\n                      (activate)=\"selectLayout(option.id)\"\n                    >\n                      <!-- eslint-enable ethlete/prefer-static-boolean-properties -->\n                      <span class=\"et-query-devtools-menu-item-glyph\" aria-hidden=\"true\">{{ option.glyph }}</span>\n                      {{ option.label }}\n                    </et-menu-radio-item>\n                  }\n                </et-menu-radio-group>\n                <et-menu-separator />\n                <et-menu-checkbox-item\n                  [checked]=\"reservesSpace()\"\n                  [disabled]=\"floating()\"\n                  (checkedChange)=\"reservesSpace.set($event)\"\n                  title=\"The page gives up the room the panel covers, so its last rows can still be scrolled to. Docks only - a float sits wherever it was dragged.\"\n                >\n                  Reserve page space\n                </et-menu-checkbox-item>\n              </et-menu>\n            </ng-template>\n          </div>\n        }\n        <span class=\"et-query-devtools-header-divider\" aria-hidden=\"true\"></span>\n        <button\n          (click)=\"toggleOpen()\"\n          class=\"et-query-devtools-btn et-query-devtools-btn--danger\"\n          type=\"button\"\n          title=\"{{ poppedOut() ? 'Bring the panel back into the app window' : 'Close devtools (' + shortcut + ')' }}\"\n        >\n          @if (poppedOut()) {\n            <span aria-hidden=\"true\">\u29C8</span>\n            Dock back\n          } @else {\n            <span aria-hidden=\"true\">\u2715</span>\n            Close\n            <kbd class=\"et-query-devtools-kbd\">{{ shortcut }}</kbd>\n          }\n        </button>\n      </div>\n    </header>\n\n    @if (popOutBlocked()) {\n      <div class=\"et-query-devtools-notice-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-text\">\n          The browser blocked the pop-up window. Allow pop-ups for this site, or float the panel over the page instead \u2014\n          a float needs no permission.\n        </span>\n        <button (click)=\"floatPanel()\" class=\"et-query-devtools-btn\" type=\"button\">Float instead</button>\n        <button (click)=\"popOutBlocked.set(false)\" class=\"et-query-devtools-btn\" type=\"button\">Dismiss</button>\n      </div>\n    }\n\n    @if (armedFaultClients(); as armed) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Faults armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ armed.join(', ') }}</span>\n          \u2014 every failure and delay you see from\n          {{ armed.length === 1 ? 'this client' : 'these clients' }} is injected, not the API.\n          @if (faultsRestored()) {\n            They came back from your last page load \u2014 set <em>Armed faults</em> back to <em>none</em> in Settings to\n            stop that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'faults'\"\n          (click)=\"activeTab.set('faults')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"CLEAR_FAULTS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (armedMockRoutes(); as mocked) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          <strong>Mocks armed</strong> on\n          <span class=\"et-query-devtools-mono\">{{ mocked.join(', ') }}</span>\n          \u2014 {{ mocked.length === 1 ? 'that route is' : 'those routes are' }} answered by the panel, so nothing they show\n          reached the API.\n          @if (mocksRestored()) {\n            They came back from your last page load \u2014 set <em>Armed mocks</em> back to <em>none</em> in Settings to stop\n            that.\n          }\n        </span>\n        <button\n          [disabled]=\"activeTab() === 'mocks'\"\n          (click)=\"activeTab.set('mocks')\"\n          class=\"et-query-devtools-btn\"\n          type=\"button\"\n        >\n          Review\n        </button>\n        <button (click)=\"DISARM_MOCKS()\" class=\"et-query-devtools-btn\" type=\"button\">Disarm all</button>\n      </div>\n    }\n\n    @if (restoredOverrides(); as restored) {\n      <div class=\"et-query-devtools-armed-bar\" role=\"status\">\n        <span class=\"et-query-devtools-armed-dot\" aria-hidden=\"true\"></span>\n        <span class=\"et-query-devtools-armed-text\">\n          @if (restored.ops) {\n            <strong>Overrides re-armed</strong> \u2014 {{ restored.ops }} {{ restored.ops === 1 ? 'edit' : 'edits' }} from\n            your last page load {{ restored.ops === 1 ? 'is' : 'are' }} back on {{ restored.queries }}\n            {{ restored.queries === 1 ? 'query' : 'queries' }}, so those responses are not what the API sent.\n            @if (restored.fromLocalStorage) {\n              They came back from <strong>localStorage</strong>, so they outlive closing this tab \u2014 clear them, or set\n              overrides back to <em>session</em> in Settings.\n            }\n          } @else {\n            <strong>Overrides could not be re-armed.</strong>\n          }\n          @if (restored.orphaned.length) {\n            <span class=\"et-query-devtools-armed-orphans\">\n              {{ restored.orphaned.length }} stored\n              {{ restored.orphaned.length === 1 ? 'override' : 'overrides' }} matched no query \u2014\n              <span class=\"et-query-devtools-mono\">{{ restored.orphaned.join(', ') }}</span>\n            </span>\n          }\n        </span>\n        @if (restored.firstId; as firstId) {\n          <button (click)=\"reviewRestoredOverrides(firstId)\" class=\"et-query-devtools-btn\" type=\"button\">Review</button>\n        }\n        <button (click)=\"DROP_RESTORED_OVERRIDES()\" class=\"et-query-devtools-btn\" type=\"button\">Drop all</button>\n      </div>\n    }\n\n    <div class=\"et-query-devtools-body\">\n      @switch (activeTab()) {\n        <!-- QUERIES -->\n        @case ('queries') {\n          <et-query-devtools-queries-tab />\n        }\n\n        <!-- STACKS -->\n        @case ('stacks') {\n          <et-query-devtools-stacks-tab />\n        }\n\n        <!-- SEQUENCES -->\n        @case ('sequences') {\n          <et-query-devtools-sequences-tab />\n        }\n\n        <!-- FORMS -->\n        @case ('forms') {\n          <et-query-devtools-forms-tab />\n        }\n\n        <!-- AUTH -->\n        @case ('auth') {\n          <et-query-devtools-auth-tab />\n        }\n\n        <!-- SOCKETS -->\n        @case ('ws') {\n          <et-query-devtools-sockets-tab />\n        }\n\n        <!-- CACHE -->\n        @case ('cache') {\n          <et-query-devtools-cache-tab />\n        }\n\n        <!-- LOCKS -->\n        @case ('locks') {\n          <et-query-devtools-locks-tab />\n        }\n\n        <!-- TIMELINE -->\n        @case ('timeline') {\n          <et-query-devtools-timeline-tab />\n        }\n\n        <!-- EVENTS -->\n        @case ('events') {\n          <et-query-devtools-events-tab />\n        }\n\n        <!-- FAULTS -->\n        @case ('faults') {\n          <et-query-devtools-faults-tab />\n        }\n\n        <!-- MOCKS -->\n        @case ('mocks') {\n          <et-query-devtools-mocks-tab />\n        }\n\n        <!-- ABOUT -->\n        @case ('about') {\n          <et-query-devtools-about />\n        }\n\n        <!-- SETTINGS -->\n        @case ('settings') {\n          <et-query-devtools-settings />\n        }\n      }\n    </div>\n  </section>\n}\n\n@if (!open()) {\n  <et-query-devtools-toggle [tampered]=\"panelTampered()\" (openChange)=\"toggleOpen()\" />\n}\n\n@if (inspectActive() && inspectHover(); as hover) {\n  <div\n    [style.left.px]=\"hover.rect.left\"\n    [style.top.px]=\"hover.rect.top\"\n    [style.width.px]=\"hover.rect.width\"\n    [style.height.px]=\"hover.rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">{{ inspectLabel(hover.entries) }}</span>\n  </div>\n}\n\n@if (locatedRect(); as rect) {\n  <div\n    [style.left.px]=\"rect.left\"\n    [style.top.px]=\"rect.top\"\n    [style.width.px]=\"rect.width\"\n    [style.height.px]=\"rect.height\"\n    class=\"et-query-devtools-inspect-box\"\n  >\n    <span class=\"et-query-devtools-inspect-tag\">created here</span>\n  </div>\n}\n", styles: ["@layer components{.et-query-devtools-host{--_et-qdt-bg: var(--et-surface-background-solid, rgb(24 24 27));--_et-qdt-fg: var(--et-surface-color-solid, rgb(244 244 245));--_et-qdt-muted: var(--et-surface-color-muted-solid, rgb(161 161 170));--_et-qdt-subtle: var(--et-surface-color-subtle-solid, rgb(113 113 122));--_et-qdt-border: var(--et-surface-border-solid, rgb(255 255 255 / .12));--_et-qdt-interaction: var(--et-surface-interaction-solid, rgb(255 255 255));--_et-qdt-accent: var(--et-theme-color-primary-solid, rgb(96 165 250));--_et-qdt-hover: color-mix(in srgb, var(--_et-qdt-interaction) 10%, transparent);--_et-qdt-active: color-mix(in srgb, var(--_et-qdt-interaction) 18%, transparent);--_et-qdt-success: rgb(34 197 94);--_et-qdt-error: rgb(239 68 68);--_et-qdt-loading: rgb(234 179 8);--_et-qdt-title-bar: 2.4rem;--_et-qdt-radius: .5rem;--_et-qdt-control-h: 2.4rem;--_et-qdt-row-h: 3.6rem;position:fixed;inset-inline:0;inset-block-end:0;z-index:2147483000;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:1.2rem;line-height:1.4;pointer-events:none}.et-query-devtools-host>*{pointer-events:auto}@media(pointer:coarse){.et-query-devtools-host{--_et-qdt-control-h: 3.4rem;--_et-qdt-row-h: 4.4rem}}.et-query-devtools-panel{position:relative;display:flex;flex-direction:column;inline-size:100%;min-block-size:20rem;max-block-size:90vh;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border-block-start:1px solid var(--_et-qdt-border);box-shadow:0 -.4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=right]){inset-block:0;inset-inline-start:auto}.et-query-devtools-panel:where([data-dock=right]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-start:1px solid var(--_et-qdt-border);box-shadow:-.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=float]){inset:0}.et-query-devtools-panel:where([data-dock=float]){--_et-qdt-frame: .8rem;--et-resize-handles-edge-size: var(--_et-qdt-frame);--et-resize-handles-touch-edge-size: var(--_et-qdt-frame);--et-resize-handles-corner-size: 1.6rem;--et-resize-handles-touch-corner-size: 1.6rem;--et-resize-handles-edge-inset: 1.6rem;--et-resize-handles-side-top: var(--_et-qdt-title-bar);--et-resize-handles-side-bottom: 1.6rem;--et-resize-handles-z-index: 3;position:absolute;inline-size:auto;min-block-size:0;max-block-size:none;padding-block-start:var(--_et-qdt-title-bar);padding-inline:var(--_et-qdt-frame);padding-block-end:var(--_et-qdt-frame);border:1px solid var(--_et-qdt-border);border-radius:.6rem;box-shadow:0 1rem 4rem #00000073;overflow:hidden}.et-query-devtools-move{position:absolute;inset-inline:0;inset-block-start:0;block-size:var(--_et-qdt-title-bar);cursor:move;z-index:2}.et-query-devtools-panel:where([data-dock=float]) .et-query-devtools-body{border-radius:.3rem;overflow:hidden}.et-query-devtools-move:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.9rem;inline-size:3rem;margin-inline-start:-1.5rem;block-size:.6rem;background-image:radial-gradient(currentcolor 40%,transparent 42%);background-size:.4rem .3rem;color:var(--_et-qdt-subtle)}@media(hover:hover){.et-query-devtools-move:hover:after{color:var(--_et-qdt-accent)}}.et-query-devtools-panel:where([data-dock=float][data-parked]){opacity:.85}@media(hover:hover){.et-query-devtools-panel:where([data-dock=float][data-parked]):hover{opacity:1}}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move{cursor:grab;background:var(--_et-qdt-active)}.et-query-devtools-panel:where([data-dock=float][data-parked]) .et-query-devtools-move:after{color:var(--_et-qdt-accent)}.et-query-devtools-host:where([data-dock=left]){inset-block:0;inset-inline-end:auto}.et-query-devtools-panel:where([data-dock=left]){inline-size:auto;block-size:100%;max-block-size:none;max-inline-size:90vw;border-block-start:0;border-inline-end:1px solid var(--_et-qdt-border);box-shadow:.4rem 0 2rem #00000059}.et-query-devtools-host:where([data-dock=top]){inset-block-start:0;inset-block-end:auto}.et-query-devtools-panel:where([data-dock=top]){border-block-start:0;border-block-end:1px solid var(--_et-qdt-border);box-shadow:0 .4rem 2rem #00000059}.et-query-devtools-host:where([data-dock=popout]){position:static;inline-size:100%;block-size:100%}.et-query-devtools-panel:where([data-dock=popout]){block-size:100%;max-block-size:none;border:0;box-shadow:none}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-header{flex-wrap:wrap}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions){flex:1 1 auto;flex-wrap:nowrap;min-inline-size:0;overflow-x:auto}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-tabs,.et-query-devtools-header-actions)>*{flex:none}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-master-detail,.et-query-devtools-split){flex-direction:column}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-list,.et-query-devtools-detail,.et-query-devtools-drawer,.et-query-devtools-split .et-query-devtools-scroll){flex:1 1 50%;min-inline-size:0;min-block-size:0;max-inline-size:none;border-inline-start:0;border-inline-end:0}.et-query-devtools-panel:where([data-pane-axis=block]) :is(.et-query-devtools-detail,.et-query-devtools-drawer){border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-master-detail>.et-query-devtools-list{flex:0 1 var(--_et-qdt-list-height, 50%);min-block-size:var(--_et-qdt-list-height, 0);max-block-size:var(--_et-qdt-list-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-split>.et-query-devtools-drawer{flex:0 1 var(--_et-qdt-drawer-height, 50%);min-block-size:var(--_et-qdt-drawer-height, 0);max-block-size:var(--_et-qdt-drawer-height, none)}.et-query-devtools-panel:where([data-pane-axis=block]) .et-query-devtools-pane-resize{cursor:ns-resize}.et-query-devtools-panel--resizing{-webkit-user-select:none;user-select:none}.et-query-devtools-resize,.et-query-devtools-pane-resize{touch-action:none}.et-query-devtools-resize{position:absolute;inset-inline:0;inset-block-start:0;block-size:.6rem;cursor:ns-resize;z-index:1}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize{inset-inline:0 auto;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize{inset-inline:auto 0;inset-block:0;inline-size:.6rem;block-size:auto;cursor:ew-resize}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize{inset-block:auto 0}.et-query-devtools-resize:after{content:\"\";position:absolute;inset-inline:50%;inset-block-start:.2rem;inline-size:4rem;margin-inline-start:-2rem;block-size:.2rem;border-radius:999px;background:var(--_et-qdt-border)}.et-query-devtools-panel:where([data-dock=right]) .et-query-devtools-resize:after{inset-inline:.2rem auto;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=left]) .et-query-devtools-resize:after{inset-inline:auto .2rem;inset-block:50% auto;inline-size:.2rem;block-size:4rem;margin-inline-start:0;margin-block-start:-2rem}.et-query-devtools-panel:where([data-dock=top]) .et-query-devtools-resize:after{inset-block:auto .2rem}@media(hover:hover){.et-query-devtools-resize:hover:after{background:var(--_et-qdt-accent)}}.et-query-devtools-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-inline:.8rem;border-block-end:1px solid var(--_et-qdt-border);flex:0 0 auto}.et-query-devtools-armed-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-block-end:1px solid color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error);font-size:1.1rem}.et-query-devtools-armed-text{flex:1 1 auto;min-inline-size:0}.et-query-devtools-notice-bar{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding:.6rem .8rem;background:var(--_et-qdt-hover);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg);font-size:1.1rem}.et-query-devtools-notice-bar .et-query-devtools-btn{flex:0 0 auto}.et-query-devtools-armed-orphans{display:block;opacity:.85}.et-query-devtools-armed-dot{flex:0 0 auto;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--_et-qdt-error);animation:et-query-devtools-armed-pulse 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.et-query-devtools-armed-dot{animation:none}}@keyframes et-query-devtools-armed-pulse{50%{opacity:.25}}.et-query-devtools-armed-bar .et-query-devtools-btn{flex:0 0 auto;border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-tabs{display:flex;flex-wrap:wrap;gap:.2rem}.et-query-devtools-tab{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:none;background:transparent;color:var(--_et-qdt-muted);padding:.9rem 1rem;cursor:pointer;border-block-end:2px solid transparent;font:inherit}@media(hover:hover){.et-query-devtools-tab:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-tab--active{color:var(--_et-qdt-fg);border-block-end-color:var(--_et-qdt-accent)}.et-query-devtools-tab-badge{display:inline-block;padding-inline:.45rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-interaction) 12%,transparent);color:var(--_et-qdt-muted);font-size:1rem;font-variant-numeric:tabular-nums}.et-query-devtools-tab-badge--error{background:color-mix(in srgb,var(--_et-qdt-error) 25%,transparent);color:var(--_et-qdt-fg)}.et-query-devtools-menu{display:contents}.et-query-devtools-menu-caret{font-size:.9em;opacity:.7}.et-query-devtools-menu-glyph{display:inline-block;min-inline-size:1.2rem;text-align:center}.et-query-devtools-menu>[data-menu-open]{background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}.et-menu .et-query-devtools-menu-item-glyph{display:inline-block;inline-size:16px;text-align:center}.et-menu-item-content:has(.et-query-devtools-menu-item-note){display:flex;flex-direction:column;align-items:start;gap:2px;padding-block:8px}.et-query-devtools-menu-item-note{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));font-size:12px}.et-query-devtools-header-actions{display:flex;align-items:center;gap:.2rem;flex:0 0 auto}.et-query-devtools-header-divider{inline-size:1px;block-size:1.6rem;margin-inline:.4rem;background:var(--_et-qdt-border)}.et-query-devtools-inspect-btn{position:relative}.et-query-devtools-inspect-icon{inline-size:1.4rem;block-size:1.4rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}.et-query-devtools-inspect-icon-dot{fill:currentColor;stroke:none}.et-query-devtools-btn.et-query-devtools-inspect-btn--active,.et-query-devtools-btn.et-query-devtools-inspect-btn--active:hover{color:#09090b;background:var(--_et-qdt-accent);border-color:var(--_et-qdt-accent)}.et-query-devtools-inspect-btn--active:after{content:\"\";position:absolute;inset:-.3rem;border:1px solid var(--_et-qdt-accent);border-radius:calc(var(--_et-qdt-radius) + .3rem);pointer-events:none;animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:et-query-devtools-inspect-pulse 1.4s ease-in-out infinite}@keyframes et-query-devtools-inspect-pulse{0%,to{opacity:.2}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.et-query-devtools-inspect-btn--active:after,.et-query-devtools-inspect-btn--active .et-query-devtools-inspect-icon-ring{animation:none;opacity:1}}.et-query-devtools-close{appearance:none;border:none;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.6rem;font:inherit}.et-query-devtools-kbd{border-radius:.3rem;background:var(--_et-qdt-hover);box-shadow:inset 0 0 0 1px var(--_et-qdt-border);color:var(--_et-qdt-muted);padding:.15rem .4rem;font:inherit;font-size:1.1rem;line-height:1.2;white-space:nowrap}.et-query-devtools-kbd--inverse{background:#00000026;box-shadow:inset 0 0 0 1px #00000040;color:inherit}@media(hover:none)and (pointer:coarse){.et-query-devtools-kbd{display:none}}.et-query-devtools-inspect-box{position:fixed;z-index:2147483002;pointer-events:none;border:2px solid var(--_et-qdt-accent);background:color-mix(in srgb,var(--_et-qdt-accent) 15%,transparent);border-radius:.2rem}.et-query-devtools-inspect-tag{position:absolute;inset-block-start:100%;inset-inline-start:0;margin-block-start:.2rem;padding:.2rem .5rem;border-radius:.3rem;background:var(--_et-qdt-accent);color:#09090b;font-family:ui-monospace,monospace;font-size:1.1rem;font-weight:600;white-space:nowrap}@media(hover:hover){.et-query-devtools-close:hover{color:var(--_et-qdt-fg)}}.et-query-devtools-body{flex:1 1 auto;min-block-size:0;overflow:hidden}.et-query-devtools-detail{flex:1 1 auto;min-inline-size:0;overflow-y:auto;padding:1rem}.et-query-devtools-detail .et-query-devtools-meta,.et-query-devtools-drawer .et-query-devtools-meta{padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-detail .et-query-devtools-section-row,.et-query-devtools-drawer .et-query-devtools-section-row{padding-block-start:.8rem;border-block-start:1px solid var(--_et-qdt-border)}.et-query-devtools-filter-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-qdt-accent) 45%,transparent);color:var(--_et-qdt-accent);font-size:1.1rem;font-weight:600;letter-spacing:.02em}.et-query-devtools-filter-icon{font-size:1.3rem;line-height:1}.et-query-devtools-filter-count{border-radius:999px;background:var(--_et-qdt-accent);color:#09090b;min-inline-size:1.8rem;padding:0 .5rem;text-align:center}.et-query-devtools-filter-clear{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-muted);cursor:pointer;padding:.3rem .6rem;font:inherit;font-size:1.15rem;line-height:1.4}@media(hover:hover){.et-query-devtools-filter-clear:hover{border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent);color:var(--_et-qdt-fg)}}.et-query-devtools-scroll{block-size:100%;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.et-query-devtools-split{display:flex;block-size:100%;min-block-size:0}.et-query-devtools-split .et-query-devtools-scroll{flex:1 1 auto;min-inline-size:0}.et-query-devtools-pane{display:flex;flex-direction:column;flex:1 1 auto;block-size:100%;min-inline-size:0;min-block-size:0;overflow:hidden}.et-query-devtools-pane>.et-query-devtools-scroll{padding-block:0 1rem}.et-query-devtools-pane-resize{flex:0 0 .5rem;align-self:stretch;cursor:ew-resize;background:transparent;transition:background .12s ease}.et-query-devtools-pane-resize:active{background:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-pane-resize:hover{background:var(--_et-qdt-accent)}}.et-query-devtools-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.8rem;position:sticky;inset-block-start:0;z-index:1;background:var(--_et-qdt-bg);border-block-end:1px solid var(--_et-qdt-border)}.et-query-devtools-scroll>.et-query-devtools-toolbar{inset-block-start:-1rem}.et-query-devtools-toolbar-row{display:flex;align-items:center;flex-wrap:wrap;flex:1 1 100%;gap:.5rem}.et-query-devtools-field{display:inline-flex;align-items:center;gap:.6rem;color:var(--_et-qdt-muted)}.et-query-devtools-select{flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,var(--_et-qdt-bg));color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .6rem;font:inherit;font-size:1.15rem}.et-query-devtools-select option{background-color:var(--_et-qdt-bg);color:var(--_et-qdt-fg)}.et-query-devtools-count{color:var(--_et-qdt-subtle)}.et-query-devtools-row{display:flex;align-items:stretch;inline-size:100%;min-block-size:var(--_et-qdt-row-h);border-block-end:1px solid var(--_et-qdt-border);color:var(--_et-qdt-fg)}@media(hover:hover){.et-query-devtools-row:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-method{font-weight:700;font-size:1.1rem;color:var(--_et-qdt-muted);white-space:nowrap}.et-query-devtools-route{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-inline-size:0}.et-query-devtools-status{inline-size:.8rem;block-size:.8rem;border-radius:999px;flex:0 0 auto;background:var(--_et-qdt-subtle)}.et-query-devtools-status[data-status=success]{background:var(--_et-qdt-success)}.et-query-devtools-status[data-status=error]{background:var(--_et-qdt-error)}.et-query-devtools-status[data-status=loading],.et-query-devtools-status[data-status=running]{background:var(--_et-qdt-loading)}.et-query-devtools-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;flex:0 0 auto;min-block-size:var(--_et-qdt-control-h);border:1px solid transparent;border-radius:var(--_et-qdt-radius);background:transparent;color:var(--_et-qdt-muted);padding:.25rem .7rem;font:inherit;font-size:1.15rem;line-height:1.4;white-space:nowrap;cursor:pointer;transition:color .12s ease,background-color .12s ease,border-color .12s ease}@media(hover:hover){.et-query-devtools-btn:hover:not(:disabled){background:var(--_et-qdt-hover);color:var(--_et-qdt-fg)}}.et-query-devtools-btn:focus-visible{outline:2px solid var(--_et-qdt-accent);outline-offset:1px}.et-query-devtools-btn:disabled{color:var(--_et-qdt-subtle);cursor:default;background:transparent;opacity:.6}.et-query-devtools-btn--primary,.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 16%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 40%,transparent);color:var(--_et-qdt-accent)}@media(hover:hover){.et-query-devtools-btn--primary:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-accent) 26%,transparent)}}@media(hover:hover){.et-query-devtools-btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 16%,transparent);color:var(--_et-qdt-error)}}.et-query-devtools-btn--tampered,.et-query-devtools-btn--tampered:hover:not(:disabled){background:color-mix(in srgb,var(--_et-qdt-error) 14%,transparent);border-color:color-mix(in srgb,var(--_et-qdt-error) 45%,transparent);color:var(--_et-qdt-error)}.et-query-devtools-icon-btn{inline-size:var(--_et-qdt-control-h);padding-inline:0;font-size:1.3rem}.et-query-devtools-btn-group{display:inline-flex;flex:0 0 auto;border:1px solid var(--_et-qdt-border);border-radius:var(--_et-qdt-radius);overflow:hidden}.et-query-devtools-btn-group>.et-query-devtools-btn{border-radius:0;border-block:0;border-inline-start:0;border-inline-end:1px solid var(--_et-qdt-border)}.et-query-devtools-btn-group>.et-query-devtools-btn:last-child{border-inline-end:0}.et-query-devtools-toolbar-btn{margin-inline-start:auto;flex:0 0 auto}.et-query-devtools-meta{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0 0 1rem}.et-query-devtools-meta dt{color:var(--_et-qdt-muted)}.et-query-devtools-meta dd{margin:0;overflow-wrap:anywhere}.et-query-devtools-section{margin:1rem 0 .4rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat{padding:.6rem .8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 3%,transparent)}.et-query-devtools-stat dt{font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--_et-qdt-muted)}.et-query-devtools-stat dd{margin:0;font-size:1.5rem;font-variant-numeric:tabular-nums}.et-query-devtools-stat-sub{display:block;font-size:1rem;color:var(--_et-qdt-subtle)}.et-query-devtools-json{margin:0;padding:.8rem;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:color-mix(in srgb,var(--_et-qdt-interaction) 4%,transparent);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;max-block-size:24rem;overflow-y:auto}.et-query-devtools-json--error{border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-mono{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.et-query-devtools-url{display:inline-block;max-inline-size:32rem;margin-inline-start:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.et-query-devtools-chips,.et-query-devtools-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-end:.8rem}.et-query-devtools-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--_et-qdt-border);font-size:1.1rem;color:var(--_et-qdt-fg);background:color-mix(in srgb,var(--_et-qdt-interaction) 6%,transparent)}.et-query-devtools-chip--muted{color:var(--_et-qdt-muted)}.et-query-devtools-retry-glyph{font-size:.7em;line-height:1}.et-query-devtools-chip--loading{color:var(--_et-qdt-loading);border-color:color-mix(in srgb,var(--_et-qdt-loading) 50%,transparent)}.et-query-devtools-chip--error{color:var(--_et-qdt-error);border-color:color-mix(in srgb,var(--_et-qdt-error) 50%,transparent)}.et-query-devtools-chip--success{color:var(--_et-qdt-success);border-color:color-mix(in srgb,var(--_et-qdt-success) 50%,transparent)}button.et-query-devtools-chip--button{appearance:none;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}@media(hover:hover){button.et-query-devtools-chip--button:hover{border-color:var(--_et-qdt-accent);color:var(--_et-qdt-accent)}}.et-query-devtools-facet{appearance:none;min-block-size:var(--_et-qdt-control-h);padding-inline:.8rem;background:transparent;cursor:pointer;color:var(--_et-qdt-muted);font:inherit;font-size:1.1rem;line-height:1.4}@media(hover:hover){.et-query-devtools-facet:hover:not(:disabled){color:var(--_et-qdt-fg);background:var(--_et-qdt-hover);border-color:color-mix(in srgb,var(--_et-qdt-accent) 60%,transparent)}}.et-query-devtools-facet:disabled{color:var(--_et-qdt-subtle);cursor:default}.et-query-devtools-facet--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 14%,transparent)}.et-query-devtools-facet-count{font-variant-numeric:tabular-nums;color:inherit;opacity:.75}.et-query-devtools-card{border:1px solid var(--_et-qdt-border);border-radius:.6rem;padding:1rem}.et-query-devtools-card--armed{border-color:color-mix(in srgb,var(--_et-qdt-error) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-error) 6%,transparent)}.et-query-devtools-card-head{display:flex;align-items:center;gap:.6rem;margin-block-end:.8rem}.et-query-devtools-inner-queries{display:flex;flex-direction:column;gap:.3rem}.et-query-devtools-inner-row{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:1px solid var(--_et-qdt-border);border-radius:.4rem;background:transparent;color:var(--_et-qdt-fg);padding:.4rem .6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-inner-row:hover:not([disabled]){background:var(--_et-qdt-hover)}}.et-query-devtools-inner-row--active{background:var(--_et-qdt-active);border-color:var(--_et-qdt-accent)}.et-query-devtools-inner-row[disabled]{cursor:default;opacity:.6}.et-query-devtools-step-toggle{display:flex;align-items:center;gap:.6rem;inline-size:100%;text-align:start;appearance:none;border:none;background:transparent;color:var(--_et-qdt-fg);padding:.6rem;cursor:pointer;font:inherit}@media(hover:hover){.et-query-devtools-step-toggle:hover{background:var(--_et-qdt-hover)}}.et-query-devtools-step-index{flex:1 1 auto;min-inline-size:0}.et-query-devtools-step-caret{color:var(--_et-qdt-muted)}.et-query-devtools-table{inline-size:100%;border-collapse:collapse}.et-query-devtools-table th,.et-query-devtools-table td{text-align:start;padding:.5rem .6rem;border-block-end:1px solid var(--_et-qdt-border);vertical-align:top}.et-query-devtools-table td .et-query-devtools-chip{padding-block:0;line-height:1.4}.et-query-devtools-table th{color:var(--_et-qdt-muted);font-weight:600;position:sticky;inset-block-start:0;background:var(--_et-qdt-bg)}.et-query-devtools-table tr[data-status=error] td{color:var(--_et-qdt-error)}.et-query-devtools-empty{color:var(--_et-qdt-subtle);padding:1.2rem;text-align:center}.et-query-devtools-cell-actions{display:inline-flex;gap:.4rem;white-space:nowrap}.et-query-devtools-section-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-block-start:1rem}.et-query-devtools-search{flex:1 1 16rem;min-inline-size:0;min-block-size:var(--_et-qdt-control-h);background:color-mix(in srgb,var(--_et-qdt-interaction) 5%,transparent);color:var(--_et-qdt-fg);border:1px solid transparent;border-radius:var(--_et-qdt-radius);padding:.4rem .8rem;font:inherit;font-size:1.15rem}.et-query-devtools-search:focus{outline:none;border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:var(--_et-qdt-bg)}.et-query-devtools-row-link{display:inline-flex;align-items:center;gap:.6rem;appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:start;cursor:pointer}.et-query-devtools-row-link:focus-visible .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}@media(hover:hover){.et-query-devtools-row-link:hover .et-query-devtools-url{color:var(--_et-qdt-accent);text-decoration:underline}}.et-query-devtools-hint{flex:1 1 24rem;color:var(--_et-qdt-muted);font-size:1.1rem;margin:0}.et-query-devtools-input{inline-size:100%;background:var(--_et-qdt-bg);color:var(--_et-qdt-fg);border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.4rem .6rem;font:inherit}.et-query-devtools-input--number{inline-size:8rem;font-variant-numeric:tabular-nums}.et-query-devtools-editor{border:1px solid var(--_et-qdt-border);border-radius:.4rem;padding:.8rem;margin-block-end:1rem}.et-query-devtools-editor-error{color:var(--_et-qdt-error);margin:.4rem 0 0}.et-query-devtools-btn--active{color:var(--_et-qdt-accent);border-color:color-mix(in srgb,var(--_et-qdt-accent) 55%,transparent);background:color-mix(in srgb,var(--_et-qdt-accent) 12%,transparent)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { startOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOpen", required: false }] }], panelEl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 const QUERY_DEVTOOLS_IMPORTS = [QueryDevtoolsComponent];