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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/query-devtools",
-  "version": "1.0.0-next.0",
+  "version": "1.0.0-next.2",
   "license": "MIT",
   "sideEffects": false,
   "peerDependencies": {

package/types/ethlete-query-devtools.d.ts

@@ -167,6 +167,30 @@ type QueryDevtoolsDiff = {
     truncated: boolean;
 };
 
+/** Which SDK feature a lock name belongs to, or `other` for one the panel did not put there. */
+type DevtoolsLockKind = 'auth' | 'poll' | 'other';
+/** Where the tab the panel is open in stands on one lock. */
+type DevtoolsLockStanding = 'holder' | 'queued' | 'absent' | 'unknown';
+/** One lock name, with every client that holds or waits for it folded into a single row. */
+type DevtoolsLockRow = {
+    /** The raw name, so a lock the panel cannot decode is still greppable from the row. */
+    name: string;
+    /** What the name means: the provider for an auth lock, the cache key for a poll lock. */
+    label: string;
+    kind: DevtoolsLockKind;
+    /** The sync channel a poll lock belongs to, or `null` for a name that carries no such part. */
+    channel: string | null;
+    /**
+     * Held plus queued on this name. Every participant requests the same lock and exactly one gets it, so
+     * this is the number of tabs, workers and service workers taking part - the same arithmetic the auth
+     * provider's own `instanceCount` does.
+     */
+    tabs: number;
+    standing: DevtoolsLockStanding;
+    /** This tab's 1-based place in the queue, or `null` unless {@link standing} is `queued`. */
+    queuePlace: number | null;
+};
+
 type AnyQuery = Query<any>;
 /** The query a detail pane is showing, together with the registry entry it was registered as. */
 type QueryDevtoolsSelection = {
@@ -178,7 +202,7 @@ type QueryDevtoolsSelection = {
  * to count, so the badge/overflow logic would push it behind **More** - it is reached from the header's
  * gear instead.
  */
-type DevtoolsTab = 'queries' | 'stacks' | 'sequences' | 'forms' | 'auth' | 'ws' | 'cache' | 'timeline' | 'events' | 'faults' | 'mocks' | 'about' | 'settings';
+type DevtoolsTab = 'queries' | 'stacks' | 'sequences' | 'forms' | 'auth' | 'ws' | 'cache' | 'locks' | 'timeline' | 'events' | 'faults' | 'mocks' | 'about' | 'settings';
 /**
  * The sections of the query detail drawer. The head and its actions stay pinned above them - the detail
  * holds more than fits a column, and everything below the actions is reading material.
@@ -208,11 +232,11 @@ type RouteSegment = {
     name?: string;
 };
 /**
- * Which tab refreshes an auth provider's tokens, as the auth tab's chip renders it. `title` carries
- * the caveats the label has no room for - why every tab reads as the leader, or how approximate the
- * tab count is.
+ * A one-line verdict the panel renders as a chip - which tab refreshes an auth provider's tokens, where
+ * this tab stands on a lock. `title` carries the caveats the label has no room for: why every tab reads
+ * as the leader, or how approximate a tab count is.
  */
-type QueryDevtoolsLeadership = {
+type QueryDevtoolsChip = {
     label: string;
     tone: 'success' | 'muted';
     title: string;
@@ -391,6 +415,14 @@ type QueryDevtoolsHost = {
     clearPersistedQueries(client: QueryClient): void;
     /** The features of the client behind a cache tab card, or `null` for a client without any. */
     clientFeatures(client: QueryClient | null | undefined): QueryDevtoolsFeature[] | null;
+    /**
+     * Every Web Lock held or queued across this origin, decoded, or `null` in a browser without the Web
+     * Locks API. Empty while the Locks tab has not read its first snapshot - it polls, because Web Locks
+     * has no change event to listen to.
+     */
+    lockRows: Signal<DevtoolsLockRow[] | null>;
+    /** Where this tab stands on one lock, as a chip: whether it holds it, waits for it, or is not in it. */
+    lockStanding(row: DevtoolsLockRow): QueryDevtoolsChip;
     /** Unique client names present across queries and auth providers, for the Queries/Timeline pickers. */
     clientNames: Signal<string[]>;
     /** What each tab holds - also drives the tab bar's own badges, so it lives here rather than per-tab. */
@@ -426,7 +458,7 @@ type QueryDevtoolsHost = {
     /** The access-token expiry the app acts on, plus the lifetime the panel has armed over it. */
     authTokenLifetime(entry: QueryDevtoolsEntry): QueryDevtoolsTokenLifetime;
     /** The multi-tab leadership chip, or `null` for a provider without `withBearerAuthMultiTabSync`. */
-    authLeadership(auth: AnyBearerAuthProvider): QueryDevtoolsLeadership | null;
+    authLeadership(auth: AnyBearerAuthProvider): QueryDevtoolsChip | null;
     queryStatus(query: AnyQuery): 'idle' | 'loading' | 'success' | 'error';
     isStale(query: AnyQuery): boolean;
     /** Whether an entry is showing an armed response override or a devtools-faulted outcome. */
@@ -753,6 +785,7 @@ type PersistedState = {
     listHeight?: number | null;
     drawerHeight?: number | null;
     dock?: DevtoolsDock;
+    reservesSpace?: boolean;
     floatRect?: FloatRect;
     floatParked?: boolean;
     activeTab?: DevtoolsTab;
@@ -821,6 +854,7 @@ declare class QueryDevtoolsComponent implements OnInit {
     private destroyRef;
     private document;
     private viewport;
+    private isDocumentVisible;
     /**
      * 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.
@@ -854,6 +888,9 @@ declare class QueryDevtoolsComponent implements OnInit {
     } | {
         id: "cache";
         label: string;
+    } | {
+        id: "locks";
+        label: string;
     } | {
         id: "timeline";
         label: string;
@@ -956,6 +993,11 @@ declare class QueryDevtoolsComponent implements OnInit {
         readonly label: "Pop out";
         readonly hint: "Move the panel into a window of its own - the same live panel, on your other screen";
     }>;
+    /**
+     * 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.
+     */
+    protected reservesSpace: WritableSignal<boolean>;
     /** Where the floating panel sits and how big it is. Kept while docked, so a return to float restores it. */
     private floatRect;
     /** The rect a resize gesture started from, or `null` outside one. */
@@ -993,6 +1035,13 @@ declare class QueryDevtoolsComponent implements OnInit {
     /** The floating panel's offset from the viewport's top-left, or `null` while it is docked. */
     protected panelInsetBlock: _angular_core.Signal<number | null>;
     protected panelInsetInline: _angular_core.Signal<number | null>;
+    /**
+     * 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.
+     */
+    private panelSize;
+    /** Which padding a docked panel asks of the page and how much, or `null` when it asks for none. */
+    private pageReservation;
     /** Which section of the query detail is showing. Shared by the Queries tab and both drawers. */
     detailTab: WritableSignal<DetailTab>;
     selectedClientName: WritableSignal<string | null>;
@@ -1088,6 +1137,15 @@ declare class QueryDevtoolsComponent implements OnInit {
     private copiedReset$;
     /** 1-second tick driving the cache freshness countdowns. */
     private clock;
+    /**
+     * 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.
+     */
+    private probeLocks;
+    private probeId;
+    private probeHold;
+    private lockSnapshot;
+    lockRows: _angular_core.Signal<DevtoolsLockRow[] | null>;
     /** "Inspect" mode: hover the live UI to find the query that a component created. */
     protected inspectActive: WritableSignal<boolean>;
     protected inspectHover: WritableSignal<{
@@ -1179,6 +1237,9 @@ declare class QueryDevtoolsComponent implements OnInit {
     } | {
         id: "cache";
         label: string;
+    } | {
+        id: "locks";
+        label: string;
     } | {
         id: "timeline";
         label: string;
@@ -1217,6 +1278,9 @@ declare class QueryDevtoolsComponent implements OnInit {
     } | {
         id: "cache";
         label: string;
+    } | {
+        id: "locks";
+        label: string;
     } | {
         id: "timeline";
         label: string;
@@ -1591,11 +1655,13 @@ declare class QueryDevtoolsComponent implements OnInit {
     authTokenPayload(auth: AnyBearerAuthProvider): Record<string, unknown> | null;
     queriesForStack(stack: AnyQueryStack | AnyPagedQueryStack): QueryLink[];
     authQueryKeys(auth: AnyBearerAuthProvider): string[];
+    /** Where this tab stands on one lock, as a chip. @see lockRows */
+    lockStanding(row: DevtoolsLockRow): QueryDevtoolsChip;
     /**
      * 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.
      */
-    authLeadership(auth: AnyBearerAuthProvider): QueryDevtoolsLeadership | null;
+    authLeadership(auth: AnyBearerAuthProvider): QueryDevtoolsChip | null;
     /**
      * The access token's expiry as the app sees it, plus whatever the panel is doing to it: an armed
      * lifetime replaces the countdown, and the token's own is reported next to it so the card never claims
@@ -1634,6 +1700,12 @@ declare class QueryDevtoolsComponent implements OnInit {
         content: string;
         type: string;
     }): void;
+    /**
+     * 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.
+     */
+    private holdProbeLock;
     /**
      * 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.
@@ -1771,7 +1843,7 @@ declare class QueryDevtoolsComponent implements OnInit {
 declare const QUERY_DEVTOOLS_IMPORTS: readonly [typeof QueryDevtoolsComponent];
 
 /** The version of `@ethlete/query-devtools` this build was cut from. */
-declare const QUERY_DEVTOOLS_VERSION = "1.0.0-next.0";
+declare const QUERY_DEVTOOLS_VERSION = "1.0.0-next.2";
 
 export { QUERY_DEVTOOLS_IMPORTS, QUERY_DEVTOOLS_VERSION, QueryDevtoolsAboutComponent, QueryDevtoolsComponent, QueryDevtoolsJsonComponent, QueryDevtoolsJsonStylesComponent, QueryDevtoolsSettingsComponent, QueryDevtoolsTimelineStylesComponent, clampFloatToPeek, kindOf, resizedFloatRect, settledFloatRect };
 export type { JsonKind };