@ethlete/query-devtools 1.0.0-next.4 → 1.0.0-next.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.0.0-next.6
+
+### Patch Changes
+
+- [#3067](https://github.com/ethlete-io/ethdk/pull/3067) [`e271c58`](https://github.com/ethlete-io/ethdk/commit/e271c58ffc395075a5c4496abf34b34568855276) Thanks [@github-actions](https://github.com/apps/github-actions)! - Query devtools: the value explorer shows the headers a `headers` provider hands the request, instead of an `fn(headerProvider)` row.
+
+## 1.0.0-next.5
+
+### Patch Changes
+
+- [`4044a00`](https://github.com/ethlete-io/ethdk/commit/4044a0007de55d25b5a697c6e4190e21d68d022f) Thanks [@TomTomB](https://github.com/TomTomB)! - - Notifications: a toast keeps one elevation, paints above overlays, and keeps out of every reserved viewport edge.
+  - Query devtools: a side dock reserves the edge it covers.
+  - `SurfaceContextTracker` drops `topType` / `topElevation`.
+
+- [`3122607`](https://github.com/ethlete-io/ethdk/commit/3122607d1727844a2d987032f45ad631f678c2ca) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlays and floating chrome now keep out of space a surface above the page reserved with `reserveOverlayViewportSpace()` - so a dialog, menu or toast is no longer stacked under the docked query devtools panel.
+
 ## 1.0.0-next.4
 
 ### Patch Changes

package/fesm2022/ethlete-query-devtools.mjs

@@ -1,6 +1,6 @@
 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, injectIsDocumentVisible, injectBreakpointObserver, signalElementDimensions, randomId, createObjectUrlHandle, DragHandleDirective, ResizeHandlesComponent } from '@ethlete/core';
+import { copyToClipboard, injectStyleManager, injectErrorTheme, ProvideColorDirective, clamp, injectRenderer, injectFileDownload, injectViewportSize, injectIsDocumentVisible, injectBreakpointObserver, signalElementDimensions, randomId, reserveOverlayViewportSpace, 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, serializeQueryDevtoolsOverrideTransfer, parseQueryDevtoolsOverrideTransfer, armQueryDevtoolsOverrideTransfer, countUnresolvedQueryDevtoolsOverrides, createQueryDevtoolsOverrides, applyQueryDevtoolsOverrides, queryDevtoolsSchemaNames, queryDevtoolsSchemaRoutes, queryDevtoolsSchemaState, measureQueryDevtoolsPayload, seedQueryDevtoolsSchemaBody, loadQueryDevtoolsSchema, queryDevtoolsMockId, saveQueryDevtoolsMock, armQueryDevtoolsMock, deleteQueryDevtoolsMock, collectQueryDevtoolsSchemaComponents, seedQueryDevtoolsSchemaRoute, QUERY_DEVTOOLS_FAULT_STATUSES, setQueryDevtoolsFault, 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';
@@ -290,14 +290,20 @@ const isHeadersValue = (value) => !!value &&
     'getAll' in value &&
     typeof value.getAll === 'function' &&
     'lazyInit' in value;
+const HEADERS_KEY = 'headers';
 /**
  * How to render `value` if it is one of the built-ins the explorer knows, or `null` for anything it
- * should keep treating as a plain object or array.
+ * should keep treating as a plain object or array. `key` is the name the value sits under; a
+ * `headers` function is called so the row shows the headers it hands the request.
  */
-const exoticOf = (value) => {
-    // A header provider is the case in practice; `String(fn)` would dump its whole source into the row.
-    if (typeof value === 'function')
+const exoticOf = (value, key) => {
+    if (typeof value === 'function') {
+        const provided = key === HEADERS_KEY && value.length === 0 ? providedHeaders(value) : null;
+        if (provided)
+            return { typeName: 'HttpHeaders', entries: headerEntries(provided) };
+        // `String(fn)` would dump the whole source of the function into the row.
         return { typeName: 'fn', display: value.name || 'anonymous' };
+    }
     if (!value || typeof value !== 'object')
         return null;
     if (value instanceof Date) {
@@ -337,6 +343,20 @@ const exoticOf = (value) => {
     }
     return null;
 };
+/**
+ * The headers a `headers` provider hands the request, or `null` if it hands anything else. A secure
+ * query resolves its access token inside such a provider and throws while no token is available yet -
+ * both cases keep the plain `fn` row.
+ */
+const providedHeaders = (provider) => {
+    try {
+        const value = provider();
+        return isHeadersValue(value) ? value : null;
+    }
+    catch {
+        return null;
+    }
+};
 /**
  * The headers an `HttpHeaders` actually holds, as `name: value` pairs. A header set more than once
  * joins on `, ` the way the wire format does.
@@ -717,10 +737,10 @@ const kindOf = (value) => {
         return 'array';
     return typeof value;
 };
-const entriesOf = (value) => {
+const entriesOf = (value, key) => {
     if (Array.isArray(value))
         return value.map((v, i) => ({ k: String(i), v }));
-    const exotic = exoticOf(value);
+    const exotic = exoticOf(value, key);
     if (exotic)
         return exotic.entries ?? [];
     if (value && typeof value === 'object') {
@@ -786,7 +806,7 @@ class QueryDevtoolsJsonComponent {
         ...(ngDevMode ? [{ debugName: "annotations" }] : /* istanbul ignore next */ []));
         this.kind = computed(() => kindOf(this.value()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
-        this.exotic = computed(() => exoticOf(this.value()), /* @ts-ignore */
+        this.exotic = computed(() => exoticOf(this.value(), this.nodeKey()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "exotic" }] : /* istanbul ignore next */ []));
         /** One annotation covers every element of an array, so the lookup path forgets which index this is. */
         this.shapePath = computed(() => this.path()
@@ -798,12 +818,20 @@ class QueryDevtoolsJsonComponent {
         ...(ngDevMode ? [{ debugName: "annotation" }] : /* istanbul ignore next */ []));
         this.annotationTitle = computed(() => `Declared in the API description as ${this.annotation()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "annotationTitle" }] : /* istanbul ignore next */ []));
-        /** A `Date` or a `File` is object-typed but has nothing to expand into, so it renders as a leaf. */
-        this.isContainer = computed(() => (this.kind() === 'array' || this.kind() === 'object') && !this.exotic()?.display, /* @ts-ignore */
+        /**
+         * A `Date` is object-typed but has nothing to expand into, so it renders as a leaf. A resolved
+         * header provider is the other way round: a function that does expand.
+         */
+        this.isContainer = computed(() => {
+            const exotic = this.exotic();
+            if (exotic)
+                return !!exotic.entries;
+            return this.kind() === 'array' || this.kind() === 'object';
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isContainer" }] : /* istanbul ignore next */ []));
         /** The entries this node covers: the container's own, or just the window a chunk stands for. */
         this.ownEntries = computed(() => {
-            const entries = entriesOf(this.value());
+            const entries = entriesOf(this.value(), this.nodeKey());
             const chunk = this.chunk();
             return chunk ? entries.slice(chunk.start, chunk.end) : entries;
         }, /* @ts-ignore */
@@ -844,7 +872,7 @@ class QueryDevtoolsJsonComponent {
         /** Only slices that actually contain a match unfold while searching, so a filter stays cheap. */
         this.chunkHasHit = computed(() => {
             const term = this.search();
-            return !!term && this.ownEntries().some(({ k, v }) => k.toLowerCase().includes(term) || matchesDeep(v, term));
+            return (!!term && this.ownEntries().some((entry) => entry.k.toLowerCase().includes(term) || matchesDeep(entry, term)));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "chunkHasHit" }] : /* istanbul ignore next */ []));
         this.effectiveExpanded = computed(() => {
@@ -895,7 +923,7 @@ class QueryDevtoolsJsonComponent {
             return count ? `{…} ${count}` : '{}';
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
-        this.display = computed(() => displayOf(this.value()), /* @ts-ignore */
+        this.display = computed(() => displayOf(this.value(), this.nodeKey()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
         this.keyHit = computed(() => {
             const term = this.search();
@@ -1239,8 +1267,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], nodeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeKey", required: false }] }], depth: [{ type: i0.Input, args: [{ isSignal: true, alias: "depth", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], chunk: [{ type: i0.Input, args: [{ isSignal: true, alias: "chunk", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], expandedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedPaths", required: false }] }], collapsedPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedPaths", required: false }] }], toggleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleFn", required: false }] }], jsonPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "jsonPath", required: false }] }], parentKind: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentKind", required: false }] }], overrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrides", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }] } });
 // Below the component: an interpolated template literal above an inline template breaks the Angular
 // language service for the whole template (see `ethlete/no-template-literal-before-inline-template`).
-const displayOf = (value) => {
-    const exotic = exoticOf(value);
+const displayOf = (value, key) => {
+    const exotic = exoticOf(value, key);
     if (exotic?.display)
         return `${exotic.typeName}(${exotic.display})`;
     switch (kindOf(value)) {
@@ -1268,11 +1296,13 @@ const buildChunks = (entries, window) => {
     return chunks;
 };
 /** Whether a search term appears anywhere in a subtree - used to keep non-matching slices folded. */
-const matchesDeep = (value, term) => {
-    if (!value || typeof value !== 'object' || exoticOf(value)?.display) {
-        return displayOf(value).toLowerCase().includes(term);
+const matchesDeep = (entry, term) => {
+    const { k, v } = entry;
+    const exotic = exoticOf(v, k);
+    if (exotic ? !exotic.entries : !v || typeof v !== 'object') {
+        return displayOf(v, k).toLowerCase().includes(term);
     }
-    return entriesOf(value).some(({ k, v }) => k.toLowerCase().includes(term) || matchesDeep(v, term));
+    return entriesOf(v, k).some((child) => child.k.toLowerCase().includes(term) || matchesDeep(child, term));
 };
 
 const QUERY_DEVTOOLS_HOST = new InjectionToken('QUERY_DEVTOOLS_HOST');
@@ -3205,7 +3235,7 @@ const summarizeLocks = (options) => {
 
 // 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.4';
+const QUERY_DEVTOOLS_VERSION = '1.0.0-next.6';
 
 /* eslint-disable @typescript-eslint/naming-convention -- the `__export_*` keys are Insomnia's file format */
 const WORKSPACE_ID = 'wrk_ethlete_query_devtools';
@@ -4112,6 +4142,11 @@ const DOCK_PADDING = {
     left: 'paddingInlineStart',
     right: 'paddingInlineEnd',
 };
+/**
+ * The panel's own z-index, mirrored from `query-devtools.component.css`. An overlay below it keeps out
+ * of the space a docked panel covers; the panel's own overlays paint a level above it and may use it.
+ */
+const PANEL_LAYER = 2147483010;
 const noop = () => undefined;
 /**
  * A devtools entry id as a person reads it. Ids are the registry's descriptor plus a per-descriptor
@@ -4578,6 +4613,28 @@ class QueryDevtoolsComponent {
             return { padding: DOCK_PADDING[dock], px: this.sideDocked() ? size.width : size.height };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageReservation" }] : /* istanbul ignore next */ []));
+        /**
+         * The viewport edge a docked panel covers, reserved for overlays whatever {@link reservesSpace} says:
+         * page content can be scrolled out from under the panel, a dialog or a menu cannot. A dock edge is
+         * logical, so which physical edge a side dock covers flips in RTL - read from the panel, since the
+         * writing direction cannot change under a dock switch.
+         */
+        this.overlayReservation = computed(() => {
+            const dock = this.dock();
+            if (dock === 'float' || this.poppedOut() || !this.open())
+                return null;
+            const panel = this.panelEl()?.nativeElement;
+            const size = this.panelSize().offset;
+            if (!panel || !size)
+                return null;
+            if (dock === 'top')
+                return { top: size.height, layer: PANEL_LAYER };
+            if (dock === 'bottom')
+                return { bottom: size.height, layer: PANEL_LAYER };
+            const coversLeft = (dock === 'left') !== (getComputedStyle(panel).direction === 'rtl');
+            return coversLeft ? { left: size.width, layer: PANEL_LAYER } : { right: size.width, layer: PANEL_LAYER };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayReservation" }] : /* 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 */ []));
@@ -5147,6 +5204,12 @@ class QueryDevtoolsComponent {
             this.renderer.setStyle(root, { boxSizing: 'border-box', [reservation.padding]: `${reservation.px}px` });
             onCleanup(() => this.renderer.removeStyles(root, 'boxSizing', reservation.padding));
         });
+        effect((onCleanup) => {
+            const reservation = this.overlayReservation();
+            if (!reservation)
+                return;
+            onCleanup(reserveOverlayViewportSpace(reservation));
+        });
         // 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(() => {