@ethlete/query-devtools 1.0.0-next.15 → 1.0.0-next.16

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.0-next.16
+
+### Minor Changes
+
+- A parked `withArgs` query now shows as parked, closing the panel turns Inspect off, open and close move focus, and a failed lazy panel load offers a page reload.
+
 ## 1.0.0-next.15
 
 ### Major Changes

package/fesm2022/ethlete-query-devtools-lazy.mjs

@@ -75,6 +75,10 @@ class QueryDevtoolsLazyComponent {
         this.openOnLoad.set(true);
         this.load.set(true);
     }
+    /** Angular never retries a failed `@defer`, so only a page load can fetch the panel chunk again. */
+    reload() {
+        this.document.defaultView?.location.reload();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsLazyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryDevtoolsLazyComponent, isStandalone: true, selector: "et-query-devtools-lazy", ngImport: i0, template: `
     @if (enabled) {
@@ -84,9 +88,11 @@ class QueryDevtoolsLazyComponent {
         <et-query-devtools-toggle [tampered]="tampered()" (openChange)="open()" />
       } @loading {
         <et-query-devtools-toggle [tampered]="tampered()" />
+      } @error {
+        <et-query-devtools-toggle [tampered]="tampered()" (openChange)="reload()" loadFailed />
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", inputs: ["tampered"], outputs: ["openChange"] }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [/* @ts-ignore */
+  `, isInline: true, dependencies: [{ kind: "component", type: QueryDevtoolsToggleComponent, selector: "et-query-devtools-toggle", inputs: ["tampered", "loadFailed"], outputs: ["openChange"] }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [/* @ts-ignore */
                 import('@ethlete/query-devtools').then(m => m.QueryDevtoolsComponent)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsLazyComponent, resolveDeferredDeps: () => [/* @ts-ignore */
@@ -102,6 +108,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.6", ng
         <et-query-devtools-toggle [tampered]="tampered()" (openChange)="open()" />
       } @loading {
         <et-query-devtools-toggle [tampered]="tampered()" />
+      } @error {
+        <et-query-devtools-toggle [tampered]="tampered()" (openChange)="reload()" loadFailed />
       }
     }
   `,

package/fesm2022/ethlete-query-devtools-lazy.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ethlete-query-devtools-lazy.mjs","sources":["../../../../libs/query-devtools/lazy/query-devtools-lazy.component.ts","../../../../libs/query-devtools/lazy/ethlete-query-devtools-lazy.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, computed, DestroyRef, inject, signal, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { setQueryDevtoolsUiMounted } from '@ethlete/query';\nimport {\n  isQueryDevtoolsEnabled,\n  queryDevtoolsArmedMocks,\n  queryDevtoolsEntries,\n  queryDevtoolsFaults,\n  queryDevtoolsTokenTtls,\n} from '@ethlete/query/devtools-contract';\nimport { filter, fromEvent, tap } from 'rxjs';\nimport { QueryDevtoolsComponent } from '@ethlete/query-devtools';\nimport {\n  isQueryDevtoolsShortcut,\n  QueryDevtoolsToggleComponent,\n  ɵwasQueryDevtoolsOpen,\n} from '@ethlete/query-devtools/toggle';\n\nlet warnedMissingProvider = false;\n\n/**\n * The query devtools behind a deferred load: renders only the floating toggle button until the panel is\n * first asked for, then downloads `<et-query-devtools>` as its own chunk and hands over. Use it instead\n * of `<et-query-devtools>` to keep the panel out of the bundle an application ships to its users.\n *\n * Without `provideQueryDevtools()` it renders nothing at all - no toggle, no shortcut, and the panel\n * chunk is never requested - so it can be left mounted in a production build.\n *\n * Everything else is identical - the same toggle, the same `Ctrl/Cmd + Alt + Q` shortcut, and a panel\n * that was open when the tab last stored its state comes back open without a click.\n *\n * @example\n * ```html\n * <et-query-devtools-lazy />\n * ```\n */\n@Component({\n  selector: 'et-query-devtools-lazy',\n  template: `\n    @if (enabled) {\n      @defer (when load()) {\n        <et-query-devtools [startOpen]=\"openOnLoad()\" />\n      } @placeholder {\n        <et-query-devtools-toggle [tampered]=\"tampered()\" (openChange)=\"open()\" />\n      } @loading {\n        <et-query-devtools-toggle [tampered]=\"tampered()\" />\n      }\n    }\n  `,\n  encapsulation: ViewEncapsulation.None,\n  imports: [QueryDevtoolsComponent, QueryDevtoolsToggleComponent],\n})\nexport class QueryDevtoolsLazyComponent {\n  private document = inject(DOCUMENT);\n\n  /**\n   * Whether `provideQueryDevtools()` is in the application. Everything else here is gated on it - the\n   * stored view state read, the shortcut listener and the template - so a build that ships the shell\n   * without the provider renders nothing and can never load the panel.\n   */\n  protected enabled = isQueryDevtoolsEnabled();\n\n  /**\n   * Whether the panel is wanted. Whether it was already open has to be answered before the panel exists,\n   * which is why the stored view state is read here rather than asked of the panel.\n   */\n  protected load = signal(this.enabled && ɵwasQueryDevtoolsOpen());\n\n  /** A restored panel opens because it was open; one that was clicked open has to be told to. */\n  protected openOnLoad = signal(false);\n\n  /**\n   * Whether anything armed is changing what the app does, for the dot on the closed toggle. The panel's\n   * own badge is per-query and finer-grained; this covers what can already be armed before the panel has\n   * ever been loaded - overrides and mocks restored from a previous page load, and anything an app or a\n   * test armed through the API.\n   */\n  protected tampered = computed(\n    () =>\n      Object.keys(queryDevtoolsFaults()).length > 0 ||\n      Object.keys(queryDevtoolsTokenTtls()).length > 0 ||\n      queryDevtoolsArmedMocks().size > 0 ||\n      queryDevtoolsEntries().some((entry) => (entry.overrides?.list().length ?? 0) > 0),\n  );\n\n  constructor() {\n    if (!this.enabled) {\n      if (ngDevMode && !warnedMissingProvider) {\n        warnedMissingProvider = true;\n        console.warn(\n          \"<et-query-devtools-lazy>: provideQueryDevtools() is not in the application providers, so the devtools render nothing. Add it to bootstrapApplication's providers.\",\n        );\n      }\n\n      return;\n    }\n\n    setQueryDevtoolsUiMounted(true);\n    inject(DestroyRef).onDestroy(() => setQueryDevtoolsUiMounted(false));\n\n    // The same shortcut the panel installs, for the one press that has to happen before it exists. Once\n    // the panel is loaded it owns the key, so this stops at the first press it handles.\n    fromEvent<KeyboardEvent>(this.document, 'keydown')\n      .pipe(\n        filter(() => !this.load()),\n        filter(isQueryDevtoolsShortcut),\n        tap((e) => {\n          e.preventDefault();\n          this.open();\n        }),\n        takeUntilDestroyed(),\n      )\n      .subscribe();\n  }\n\n  protected open() {\n    this.openOnLoad.set(true);\n    this.load.set(true);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵwasQueryDevtoolsOpen"],"mappings":"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"}
+{"version":3,"file":"ethlete-query-devtools-lazy.mjs","sources":["../../../../libs/query-devtools/lazy/query-devtools-lazy.component.ts","../../../../libs/query-devtools/lazy/ethlete-query-devtools-lazy.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Component, computed, DestroyRef, inject, signal, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { setQueryDevtoolsUiMounted } from '@ethlete/query';\nimport {\n  isQueryDevtoolsEnabled,\n  queryDevtoolsArmedMocks,\n  queryDevtoolsEntries,\n  queryDevtoolsFaults,\n  queryDevtoolsTokenTtls,\n} from '@ethlete/query/devtools-contract';\nimport { filter, fromEvent, tap } from 'rxjs';\nimport { QueryDevtoolsComponent } from '@ethlete/query-devtools';\nimport {\n  isQueryDevtoolsShortcut,\n  QueryDevtoolsToggleComponent,\n  ɵwasQueryDevtoolsOpen,\n} from '@ethlete/query-devtools/toggle';\n\nlet warnedMissingProvider = false;\n\n/**\n * The query devtools behind a deferred load: renders only the floating toggle button until the panel is\n * first asked for, then downloads `<et-query-devtools>` as its own chunk and hands over. Use it instead\n * of `<et-query-devtools>` to keep the panel out of the bundle an application ships to its users.\n *\n * Without `provideQueryDevtools()` it renders nothing at all - no toggle, no shortcut, and the panel\n * chunk is never requested - so it can be left mounted in a production build.\n *\n * Everything else is identical - the same toggle, the same `Ctrl/Cmd + Alt + Q` shortcut, and a panel\n * that was open when the tab last stored its state comes back open without a click.\n *\n * @example\n * ```html\n * <et-query-devtools-lazy />\n * ```\n */\n@Component({\n  selector: 'et-query-devtools-lazy',\n  template: `\n    @if (enabled) {\n      @defer (when load()) {\n        <et-query-devtools [startOpen]=\"openOnLoad()\" />\n      } @placeholder {\n        <et-query-devtools-toggle [tampered]=\"tampered()\" (openChange)=\"open()\" />\n      } @loading {\n        <et-query-devtools-toggle [tampered]=\"tampered()\" />\n      } @error {\n        <et-query-devtools-toggle [tampered]=\"tampered()\" (openChange)=\"reload()\" loadFailed />\n      }\n    }\n  `,\n  encapsulation: ViewEncapsulation.None,\n  imports: [QueryDevtoolsComponent, QueryDevtoolsToggleComponent],\n})\nexport class QueryDevtoolsLazyComponent {\n  private document = inject(DOCUMENT);\n\n  /**\n   * Whether `provideQueryDevtools()` is in the application. Everything else here is gated on it - the\n   * stored view state read, the shortcut listener and the template - so a build that ships the shell\n   * without the provider renders nothing and can never load the panel.\n   */\n  protected enabled = isQueryDevtoolsEnabled();\n\n  /**\n   * Whether the panel is wanted. Whether it was already open has to be answered before the panel exists,\n   * which is why the stored view state is read here rather than asked of the panel.\n   */\n  protected load = signal(this.enabled && ɵwasQueryDevtoolsOpen());\n\n  /** A restored panel opens because it was open; one that was clicked open has to be told to. */\n  protected openOnLoad = signal(false);\n\n  /**\n   * Whether anything armed is changing what the app does, for the dot on the closed toggle. The panel's\n   * own badge is per-query and finer-grained; this covers what can already be armed before the panel has\n   * ever been loaded - overrides and mocks restored from a previous page load, and anything an app or a\n   * test armed through the API.\n   */\n  protected tampered = computed(\n    () =>\n      Object.keys(queryDevtoolsFaults()).length > 0 ||\n      Object.keys(queryDevtoolsTokenTtls()).length > 0 ||\n      queryDevtoolsArmedMocks().size > 0 ||\n      queryDevtoolsEntries().some((entry) => (entry.overrides?.list().length ?? 0) > 0),\n  );\n\n  constructor() {\n    if (!this.enabled) {\n      if (ngDevMode && !warnedMissingProvider) {\n        warnedMissingProvider = true;\n        console.warn(\n          \"<et-query-devtools-lazy>: provideQueryDevtools() is not in the application providers, so the devtools render nothing. Add it to bootstrapApplication's providers.\",\n        );\n      }\n\n      return;\n    }\n\n    setQueryDevtoolsUiMounted(true);\n    inject(DestroyRef).onDestroy(() => setQueryDevtoolsUiMounted(false));\n\n    // The same shortcut the panel installs, for the one press that has to happen before it exists. Once\n    // the panel is loaded it owns the key, so this stops at the first press it handles.\n    fromEvent<KeyboardEvent>(this.document, 'keydown')\n      .pipe(\n        filter(() => !this.load()),\n        filter(isQueryDevtoolsShortcut),\n        tap((e) => {\n          e.preventDefault();\n          this.open();\n        }),\n        takeUntilDestroyed(),\n      )\n      .subscribe();\n  }\n\n  protected open() {\n    this.openOnLoad.set(true);\n    this.load.set(true);\n  }\n\n  /** Angular never retries a failed `@defer`, so only a page load can fetch the panel chunk again. */\n  protected reload() {\n    this.document.defaultView?.location.reload();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["ɵwasQueryDevtoolsOpen"],"mappings":"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"}

package/fesm2022/ethlete-query-devtools-toggle.mjs

@@ -1,6 +1,6 @@
 import { detectKbdPlatform } from '@ethlete/components';
 import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, Component } from '@angular/core';
+import { input, booleanAttribute, output, viewChild, ViewEncapsulation, Component } from '@angular/core';
 import { readQueryDevtoolsStore, queryDevtoolsSettings } from '@ethlete/query/devtools-contract';
 
 /**
@@ -34,12 +34,29 @@ class QueryDevtoolsToggleComponent {
     constructor() {
         this.tampered = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tampered" }] : /* istanbul ignore next */ []));
+        this.loadFailed = input(false, { ...(ngDevMode ? { debugName: "loadFailed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.openChange = output();
+        this.button = viewChild.required('button', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "button" }] : /* istanbul ignore next */ []));
         this.shortcut = queryDevtoolsShortcutLabel();
     }
+    /** Moves keyboard focus to the toggle button. */
+    focus() {
+        this.button().nativeElement.focus();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", inputs: { tampered: { classPropertyName: "tampered", publicName: "tampered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { attributes: { "data-et-overlay-layer": "2147483010" } }, ngImport: i0, template: `
-    <button (click)="openChange.emit()" type="button" title="Open query devtools ({{ shortcut }})">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryDevtoolsToggleComponent, isStandalone: true, selector: "et-query-devtools-toggle", inputs: { tampered: { classPropertyName: "tampered", publicName: "tampered", isSignal: true, isRequired: false, transformFunction: null }, loadFailed: { classPropertyName: "loadFailed", publicName: "loadFailed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { attributes: { "data-et-overlay-layer": "2147483010" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #button
+      [title]="
+        loadFailed()
+          ? 'The devtools panel failed to load. Click to reload the page.'
+          : 'Open query devtools (' + shortcut + ')'
+      "
+      [class.failed]="loadFailed()"
+      (click)="openChange.emit()"
+      type="button"
+    >
       <svg viewBox="0 0 24 24" aria-hidden="true">
         <ellipse cx="12" cy="6" rx="7.5" ry="3" />
         <path d="M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6" />
@@ -51,12 +68,22 @@ class QueryDevtoolsToggleComponent {
         <span class="tamper-dot" title="A query is showing an armed override or a devtools fault"></span>
       }
     </button>
-  `, isInline: true, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
+  `, isInline: true, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button.failed{--_accent: #f87171}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryDevtoolsToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-query-devtools-toggle', template: `
-    <button (click)="openChange.emit()" type="button" title="Open query devtools ({{ shortcut }})">
+    <button
+      #button
+      [title]="
+        loadFailed()
+          ? 'The devtools panel failed to load. Click to reload the page.'
+          : 'Open query devtools (' + shortcut + ')'
+      "
+      [class.failed]="loadFailed()"
+      (click)="openChange.emit()"
+      type="button"
+    >
       <svg viewBox="0 0 24 24" aria-hidden="true">
         <ellipse cx="12" cy="6" rx="7.5" ry="3" />
         <path d="M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6" />
@@ -73,8 +100,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         // It tells @ethlete/core that a press here lands on a surface above an application overlay, so
                         // opening the devtools does not read as an outside press and close it.
                         'data-et-overlay-layer': '2147483010',
-                    }, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"] }]
-        }], propDecorators: { tampered: [{ type: i0.Input, args: [{ isSignal: true, alias: "tampered", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+                    }, styles: [":host{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:2147483010}button{--_accent: var(--et-theme-color-primary-solid, #60a5fa);position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 12px 10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#1f1f23,#2a2a30);color:#fafafa;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px #00000059,inset 0 0 0 1px #ffffff14;transition:transform .15s ease,box-shadow .2s ease}button:before{content:\"\";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--_accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;transition:opacity .2s ease}button.failed{--_accent: #f87171}button:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006,0 0 0 4px color-mix(in srgb,var(--_accent) 22%,transparent),inset 0 0 0 1px #ffffff1a}button:hover:before{opacity:1}svg{inline-size:16px;block-size:16px;fill:none;stroke:var(--_accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.label{line-height:1}kbd{padding:3px 6px;border-radius:5px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;color:#d4d4d8;font:inherit;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}.tamper-dot{position:absolute;inset-block-start:-3px;inset-inline-end:-3px;inline-size:10px;block-size:10px;border-radius:50%;background:#f87171;box-shadow:0 0 0 2px #1f1f23}\n"] }]
+        }], propDecorators: { tampered: [{ type: i0.Input, args: [{ isSignal: true, alias: "tampered", required: false }] }], loadFailed: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadFailed", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], button: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }] } });
 
 /**
  * Where the panel's own view state lives - open/closed, dock, sizes, selection, filters. Bumped

package/fesm2022/ethlete-query-devtools-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ethlete-query-devtools-toggle.mjs","sources":["../../../../libs/query-devtools/toggle/query-devtools-shortcut.ts","../../../../libs/query-devtools/toggle/query-devtools-toggle.component.ts","../../../../libs/query-devtools/toggle/query-devtools-view-state.ts","../../../../libs/query-devtools/toggle/ethlete-query-devtools-toggle.ts"],"sourcesContent":["import { detectKbdPlatform } from '@ethlete/components';\n\n/**\n * The global devtools toggle shortcut, rendered for the current platform (`⌘⌥Q` on Apple, where the\n * symbols are the convention, `Ctrl+Alt+Q` everywhere else). Shown on both the floating toggle and\n * the panel's close button so the shortcut is discoverable without reading the docs.\n */\nexport const queryDevtoolsShortcutLabel = () => (detectKbdPlatform() === 'apple' ? '⌘⌥Q' : 'Ctrl+Alt+Q');\n\n/**\n * Whether a `keydown` is the devtools toggle shortcut (`Ctrl/Cmd + Alt + Q`). AltGr is rejected: Windows\n * reports it as Ctrl+Alt, and AltGr+Q types `@` on a German layout. Auto-repeat is rejected so a held\n * shortcut toggles once.\n */\nexport const isQueryDevtoolsShortcut = (e: KeyboardEvent) =>\n  !e.repeat &&\n  (e.ctrlKey || e.metaKey) &&\n  e.altKey &&\n  !e.getModifierState('AltGraph') &&\n  (e.code === 'KeyQ' || e.key.toLowerCase() === 'q');\n","import { Component, input, output, ViewEncapsulation } from '@angular/core';\nimport { queryDevtoolsShortcutLabel } from './query-devtools-shortcut';\n\n/**\n * The floating toggle button for the query devtools. Rendered with `ShadowDom` encapsulation so the\n * host application's global CSS (Tailwind resets, button styles, …) can never touch it and its own\n * styles can never leak out. Uses px (not rem) internally so it doesn't depend on the host's root\n * font-size; theme accent colour is read from an inherited custom property with a fallback.\n *\n * Mounted on its own - without `<et-query-devtools-lazy>` or `<et-query-devtools>` - it declares no\n * devtools UI, so the floating API env and session pills take themselves off the page once the\n * application settles. Call `setQueryDevtoolsUiMounted(true)` to keep them.\n */\n@Component({\n  selector: 'et-query-devtools-toggle',\n  template: `\n    <button (click)=\"openChange.emit()\" type=\"button\" title=\"Open query devtools ({{ shortcut }})\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <ellipse cx=\"12\" cy=\"6\" rx=\"7.5\" ry=\"3\" />\n        <path d=\"M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6\" />\n        <path d=\"M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6\" />\n      </svg>\n      <span class=\"label\">Query</span>\n      <kbd>{{ shortcut }}</kbd>\n      @if (tampered()) {\n        <span class=\"tamper-dot\" title=\"A query is showing an armed override or a devtools fault\"></span>\n      }\n    </button>\n  `,\n  // Shadow DOM is intentional: this always-visible floating button must be fully isolated from the\n  // host app's global CSS (resets, Tailwind, button styles), which the rest of the panel can't be.\n  // eslint-disable-next-line ethlete/require-view-encapsulation-none\n  encapsulation: ViewEncapsulation.ShadowDom,\n  host: {\n    // The level this button paints at - the same number as the `z-index` below; keep the two in step.\n    // It tells @ethlete/core that a press here lands on a surface above an application overlay, so\n    // opening the devtools does not read as an outside press and close it.\n    'data-et-overlay-layer': '2147483010',\n  },\n  styles: `\n    :host {\n      position: fixed;\n      inset-block-end: 16px;\n      inset-inline-end: 16px;\n      /* Above DEFAULT_OVERLAY_LAYER (2147483003) in @ethlete/core: rendered by the lazy shell, the\n         button is a sibling of the application's content, so anything less puts an open modal over it. */\n      z-index: 2147483010;\n    }\n\n    button {\n      --_accent: var(--et-theme-color-primary-solid, #60a5fa);\n\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 12px 10px 14px;\n      border: none;\n      border-radius: 999px;\n      background: linear-gradient(135deg, #1f1f23, #2a2a30);\n      color: #fafafa;\n      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n      font-size: 13px;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      cursor: pointer;\n      box-shadow:\n        0 6px 20px rgb(0 0 0 / 0.35),\n        inset 0 0 0 1px rgb(255 255 255 / 0.08);\n      transition:\n        transform 0.15s ease,\n        box-shadow 0.2s ease;\n    }\n\n    /* Gradient accent ring via a masked pseudo-element. */\n    button::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      padding: 1px;\n      background: linear-gradient(135deg, var(--_accent), transparent 60%);\n      -webkit-mask:\n        linear-gradient(#000 0 0) content-box,\n        linear-gradient(#000 0 0);\n      -webkit-mask-composite: xor;\n      mask-composite: exclude;\n      opacity: 0.7;\n      transition: opacity 0.2s ease;\n    }\n\n    button:hover {\n      transform: translateY(-2px);\n      box-shadow:\n        0 10px 28px rgb(0 0 0 / 0.4),\n        0 0 0 4px color-mix(in srgb, var(--_accent) 22%, transparent),\n        inset 0 0 0 1px rgb(255 255 255 / 0.1);\n    }\n\n    button:hover::before {\n      opacity: 1;\n    }\n\n    svg {\n      inline-size: 16px;\n      block-size: 16px;\n      fill: none;\n      stroke: var(--_accent);\n      stroke-width: 1.6;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .label {\n      line-height: 1;\n    }\n\n    kbd {\n      padding: 3px 6px;\n      border-radius: 5px;\n      background: rgb(255 255 255 / 0.07);\n      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);\n      color: #d4d4d8;\n      font: inherit;\n      font-size: 11px;\n      font-weight: 500;\n      line-height: 1;\n      /* The Apple glyphs need no separator; the \"Ctrl+Alt+Q\" spelling is wider, hence the nowrap. */\n      white-space: nowrap;\n    }\n\n    /* Visible with the panel closed, which is the point - a query being tampered with is a fact about\n       the running app, not just about whatever the panel happens to have open. */\n    .tamper-dot {\n      position: absolute;\n      inset-block-start: -3px;\n      inset-inline-end: -3px;\n      inline-size: 10px;\n      block-size: 10px;\n      border-radius: 50%;\n      background: #f87171;\n      box-shadow: 0 0 0 2px #1f1f23;\n    }\n  `,\n})\nexport class QueryDevtoolsToggleComponent {\n  public tampered = input(false);\n  public openChange = output<void>();\n\n  protected shortcut = queryDevtoolsShortcutLabel();\n}\n","import { queryDevtoolsSettings, readQueryDevtoolsStore } from '@ethlete/query/devtools-contract';\n\n/**\n * Where the panel's own view state lives - open/closed, dock, sizes, selection, filters. Bumped\n * whenever a shape change would make an older stored state restore into something wrong.\n */\nexport const QUERY_DEVTOOLS_VIEW_STATE_KEY = 'ethlete:query:devtools:v4';\n\n/**\n * Whether the panel was open when this tab last stored its view state. Read by\n * `<et-query-devtools-lazy>`, which has to load the panel before it can ask the panel anything.\n */\nexport const wasQueryDevtoolsOpen = () =>\n  readQueryDevtoolsStore<{ open?: boolean }>(queryDevtoolsSettings().viewState, QUERY_DEVTOOLS_VIEW_STATE_KEY)?.open ===\n  true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAEA;;;;AAIG;MACU,0BAA0B,GAAG,OAAO,iBAAiB,EAAE,KAAK,OAAO,GAAG,KAAK,GAAG,YAAY;AAEvG;;;;AAIG;AACI,MAAM,uBAAuB,GAAG,CAAC,CAAgB,KACtD,CAAC,CAAC,CAAC,MAAM;AACT,KAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC;AACxB,IAAA,CAAC,CAAC,MAAM;AACR,IAAA,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,CAAC;AAC/B,KAAC,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG;;AChBnD;;;;;;;;;AASG;MAqIU,4BAA4B,CAAA;AApIzC,IAAA,WAAA,GAAA;QAqIS,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK;qFAAC;QACvB,IAAA,CAAA,UAAU,GAAG,MAAM,EAAQ;QAExB,IAAA,CAAA,QAAQ,GAAG,0BAA0B,EAAE;AAClD,IAAA;8GALY,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,uBAAA,EAAA,YAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlI7B;;;;;;;;;;;;;AAaT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,SAAA,EAAA,CAAA,CAAA;;2FAqHU,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBApIxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,QAAA,EAC1B;;;;;;;;;;;;;GAaT,EAAA,aAAA,EAIc,iBAAiB,CAAC,SAAS,EAAA,IAAA,EACpC;;;;AAIJ,wBAAA,uBAAuB,EAAE,YAAY;AACtC,qBAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA;;;ACpCH;;;AAGG;AACI,MAAM,6BAA6B,GAAG;AAE7C;;;AAGG;AACI,MAAM,oBAAoB,GAAG,MAClC,sBAAsB,CAAqB,qBAAqB,EAAE,CAAC,SAAS,EAAE,6BAA6B,CAAC,EAAE,IAAI;AAClH,IAAA;;ACdF;;AAEG;;;;"}
+{"version":3,"file":"ethlete-query-devtools-toggle.mjs","sources":["../../../../libs/query-devtools/toggle/query-devtools-shortcut.ts","../../../../libs/query-devtools/toggle/query-devtools-toggle.component.ts","../../../../libs/query-devtools/toggle/query-devtools-view-state.ts","../../../../libs/query-devtools/toggle/ethlete-query-devtools-toggle.ts"],"sourcesContent":["import { detectKbdPlatform } from '@ethlete/components';\n\n/**\n * The global devtools toggle shortcut, rendered for the current platform (`⌘⌥Q` on Apple, where the\n * symbols are the convention, `Ctrl+Alt+Q` everywhere else). Shown on both the floating toggle and\n * the panel's close button so the shortcut is discoverable without reading the docs.\n */\nexport const queryDevtoolsShortcutLabel = () => (detectKbdPlatform() === 'apple' ? '⌘⌥Q' : 'Ctrl+Alt+Q');\n\n/**\n * Whether a `keydown` is the devtools toggle shortcut (`Ctrl/Cmd + Alt + Q`). AltGr is rejected: Windows\n * reports it as Ctrl+Alt, and AltGr+Q types `@` on a German layout. Auto-repeat is rejected so a held\n * shortcut toggles once.\n */\nexport const isQueryDevtoolsShortcut = (e: KeyboardEvent) =>\n  !e.repeat &&\n  (e.ctrlKey || e.metaKey) &&\n  e.altKey &&\n  !e.getModifierState('AltGraph') &&\n  (e.code === 'KeyQ' || e.key.toLowerCase() === 'q');\n","import { booleanAttribute, Component, ElementRef, input, output, viewChild, ViewEncapsulation } from '@angular/core';\nimport { queryDevtoolsShortcutLabel } from './query-devtools-shortcut';\n\n/**\n * The floating toggle button for the query devtools. Rendered with `ShadowDom` encapsulation so the\n * host application's global CSS (Tailwind resets, button styles, …) can never touch it and its own\n * styles can never leak out. Uses px (not rem) internally so it doesn't depend on the host's root\n * font-size; theme accent colour is read from an inherited custom property with a fallback.\n *\n * Mounted on its own - without `<et-query-devtools-lazy>` or `<et-query-devtools>` - it declares no\n * devtools UI, so the floating API env and session pills take themselves off the page once the\n * application settles. Call `setQueryDevtoolsUiMounted(true)` to keep them.\n */\n@Component({\n  selector: 'et-query-devtools-toggle',\n  template: `\n    <button\n      #button\n      [title]=\"\n        loadFailed()\n          ? 'The devtools panel failed to load. Click to reload the page.'\n          : 'Open query devtools (' + shortcut + ')'\n      \"\n      [class.failed]=\"loadFailed()\"\n      (click)=\"openChange.emit()\"\n      type=\"button\"\n    >\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <ellipse cx=\"12\" cy=\"6\" rx=\"7.5\" ry=\"3\" />\n        <path d=\"M4.5 6v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3V6\" />\n        <path d=\"M4.5 12v6c0 1.66 3.36 3 7.5 3s7.5-1.34 7.5-3v-6\" />\n      </svg>\n      <span class=\"label\">Query</span>\n      <kbd>{{ shortcut }}</kbd>\n      @if (tampered()) {\n        <span class=\"tamper-dot\" title=\"A query is showing an armed override or a devtools fault\"></span>\n      }\n    </button>\n  `,\n  // Shadow DOM is intentional: this always-visible floating button must be fully isolated from the\n  // host app's global CSS (resets, Tailwind, button styles), which the rest of the panel can't be.\n  // eslint-disable-next-line ethlete/require-view-encapsulation-none\n  encapsulation: ViewEncapsulation.ShadowDom,\n  host: {\n    // The level this button paints at - the same number as the `z-index` below; keep the two in step.\n    // It tells @ethlete/core that a press here lands on a surface above an application overlay, so\n    // opening the devtools does not read as an outside press and close it.\n    'data-et-overlay-layer': '2147483010',\n  },\n  styles: `\n    :host {\n      position: fixed;\n      inset-block-end: 16px;\n      inset-inline-end: 16px;\n      /* Above DEFAULT_OVERLAY_LAYER (2147483003) in @ethlete/core: rendered by the lazy shell, the\n         button is a sibling of the application's content, so anything less puts an open modal over it. */\n      z-index: 2147483010;\n    }\n\n    button {\n      --_accent: var(--et-theme-color-primary-solid, #60a5fa);\n\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 12px 10px 14px;\n      border: none;\n      border-radius: 999px;\n      background: linear-gradient(135deg, #1f1f23, #2a2a30);\n      color: #fafafa;\n      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n      font-size: 13px;\n      font-weight: 600;\n      letter-spacing: 0.02em;\n      cursor: pointer;\n      box-shadow:\n        0 6px 20px rgb(0 0 0 / 0.35),\n        inset 0 0 0 1px rgb(255 255 255 / 0.08);\n      transition:\n        transform 0.15s ease,\n        box-shadow 0.2s ease;\n    }\n\n    /* Gradient accent ring via a masked pseudo-element. */\n    button::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      padding: 1px;\n      background: linear-gradient(135deg, var(--_accent), transparent 60%);\n      -webkit-mask:\n        linear-gradient(#000 0 0) content-box,\n        linear-gradient(#000 0 0);\n      -webkit-mask-composite: xor;\n      mask-composite: exclude;\n      opacity: 0.7;\n      transition: opacity 0.2s ease;\n    }\n\n    button.failed {\n      --_accent: #f87171;\n    }\n\n    button:hover {\n      transform: translateY(-2px);\n      box-shadow:\n        0 10px 28px rgb(0 0 0 / 0.4),\n        0 0 0 4px color-mix(in srgb, var(--_accent) 22%, transparent),\n        inset 0 0 0 1px rgb(255 255 255 / 0.1);\n    }\n\n    button:hover::before {\n      opacity: 1;\n    }\n\n    svg {\n      inline-size: 16px;\n      block-size: 16px;\n      fill: none;\n      stroke: var(--_accent);\n      stroke-width: 1.6;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .label {\n      line-height: 1;\n    }\n\n    kbd {\n      padding: 3px 6px;\n      border-radius: 5px;\n      background: rgb(255 255 255 / 0.07);\n      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);\n      color: #d4d4d8;\n      font: inherit;\n      font-size: 11px;\n      font-weight: 500;\n      line-height: 1;\n      /* The Apple glyphs need no separator; the \"Ctrl+Alt+Q\" spelling is wider, hence the nowrap. */\n      white-space: nowrap;\n    }\n\n    /* Visible with the panel closed, which is the point - a query being tampered with is a fact about\n       the running app, not just about whatever the panel happens to have open. */\n    .tamper-dot {\n      position: absolute;\n      inset-block-start: -3px;\n      inset-inline-end: -3px;\n      inline-size: 10px;\n      block-size: 10px;\n      border-radius: 50%;\n      background: #f87171;\n      box-shadow: 0 0 0 2px #1f1f23;\n    }\n  `,\n})\nexport class QueryDevtoolsToggleComponent {\n  public tampered = input(false);\n  public loadFailed = input(false, { transform: booleanAttribute });\n  public openChange = output<void>();\n\n  private button = viewChild.required<ElementRef<HTMLButtonElement>>('button');\n\n  protected shortcut = queryDevtoolsShortcutLabel();\n\n  /** Moves keyboard focus to the toggle button. */\n  public focus() {\n    this.button().nativeElement.focus();\n  }\n}\n","import { queryDevtoolsSettings, readQueryDevtoolsStore } from '@ethlete/query/devtools-contract';\n\n/**\n * Where the panel's own view state lives - open/closed, dock, sizes, selection, filters. Bumped\n * whenever a shape change would make an older stored state restore into something wrong.\n */\nexport const QUERY_DEVTOOLS_VIEW_STATE_KEY = 'ethlete:query:devtools:v4';\n\n/**\n * Whether the panel was open when this tab last stored its view state. Read by\n * `<et-query-devtools-lazy>`, which has to load the panel before it can ask the panel anything.\n */\nexport const wasQueryDevtoolsOpen = () =>\n  readQueryDevtoolsStore<{ open?: boolean }>(queryDevtoolsSettings().viewState, QUERY_DEVTOOLS_VIEW_STATE_KEY)?.open ===\n  true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}