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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 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';
@@ -3205,7 +3205,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.5';
 
 /* eslint-disable @typescript-eslint/naming-convention -- the `__export_*` keys are Insomnia's file format */
 const WORKSPACE_ID = 'wrk_ethlete_query_devtools';
@@ -4112,6 +4112,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 +4583,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 +5174,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(() => {