@svadmin/ui 0.79.0 → 0.80.0

package/dist/components/DevframePanel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { connectPanelChannel, type PanelChannel } from 'devframe/in-page-channel';
+  import { DEVTOOLS_CHANNEL } from '@vibeunion/devtools-devframe';
   import {
-    SVADMIN_DEVFRAME_CHANNEL,
+    type DevtoolsCacheMutation,
     type DevtoolsQuerySelector,
     type SvadminDevframeProtocol,
     type SvadminDevtoolsSnapshot,
@@ -22,11 +23,14 @@
     ...(selectedOperation ? { operation: selectedOperation } : {}),
   });
 
-  async function run(action: (selector?: DevtoolsQuerySelector) => Promise<void> | void): Promise<void> {
+  async function run(action: DevtoolsCacheMutation, selector?: DevtoolsQuerySelector): Promise<void> {
     if (!channel || !snapshot) return;
     busy = true;
     try {
-      await action(Object.keys(selector).length > 0 ? selector : undefined);
+      await channel.call('cacheAction', {
+        action,
+        ...(selector && Object.keys(selector).length > 0 ? { selector } : {}),
+      });
       snapshot = await channel.call('getSnapshot');
     } finally {
       busy = false;
@@ -35,7 +39,7 @@
 
   onMount(() => {
     const nextChannel = connectPanelChannel<SvadminDevframeProtocol>({
-      name: SVADMIN_DEVFRAME_CHANNEL,
+      name: DEVTOOLS_CHANNEL,
       functions: {},
     });
     channel = nextChannel;
@@ -109,13 +113,13 @@
       </ul>
     {/if}
     <div>
-      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheInvalidate', selector))}>Invalidate</button>
-      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheRefetch', selector))}>Refetch</button>
-      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheCancel', selector))}>Cancel</button>
-      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheReset', selector))}>Reset</button>
-      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheRemove', selector))}>Remove</button>
-      <button type="button" disabled={busy} onclick={() => run(() => channel?.call('cacheClear'))}>Clear cache</button>
-      <button type="button" disabled={busy} onclick={() => run(() => channel?.call('clearMutations'))}>Clear mutations</button>
+      <button type="button" disabled={busy} onclick={() => run('invalidate', selector)}>Invalidate</button>
+      <button type="button" disabled={busy} onclick={() => run('refetch', selector)}>Refetch</button>
+      <button type="button" disabled={busy} onclick={() => run('cancel', selector)}>Cancel</button>
+      <button type="button" disabled={busy} onclick={() => run('reset', selector)}>Reset</button>
+      <button type="button" disabled={busy} onclick={() => run('remove', selector)}>Remove</button>
+      <button type="button" disabled={busy} onclick={() => run('clear')}>Clear cache</button>
+      <button type="button" disabled={busy} onclick={() => run('clearMutations')}>Clear mutations</button>
     </div>
   {:else}
     <p>Waiting for an svadmin page.</p>

package/dist/devtools-bridge.d.ts

@@ -1,22 +1,7 @@
-import type { DevtoolsQueryDiagnostic, SvadminDevtoolsSnapshot } from '@svadmin/devtools-contract';
-export declare const SVADMIN_DEVFRAME_CHANNEL = "svadmin:devtools";
+import { type DevtoolsPageBridge } from '@vibeunion/devtools-devframe';
+import type { DevtoolsCacheActionRequest, DevtoolsCacheActionResult, DevtoolsQueryDiagnostic, SvadminDevtoolsSnapshot } from '@svadmin/devtools-contract';
 export type { DevtoolsCacheDiagnostics, DevtoolsProviderDiagnostic, DevtoolsQueryDiagnostic, SvadminDevtoolsSnapshot, } from '@svadmin/devtools-contract';
-export type SvadminDevtoolsBridge = {
-    getSnapshot: () => SvadminDevtoolsSnapshot | null;
-    subscribe: (listener: (snapshot: SvadminDevtoolsSnapshot) => void) => () => void;
-    cache: {
-        cancel: (selector?: DevtoolsQuerySelector) => Promise<void>;
-        invalidate: (selector?: DevtoolsQuerySelector) => Promise<void>;
-        refetch: (selector?: DevtoolsQuerySelector) => Promise<void>;
-        remove: (selector?: DevtoolsQuerySelector) => void;
-        reset: (selector?: DevtoolsQuerySelector) => Promise<void>;
-        clear: () => void;
-        clearMutations: () => void;
-    };
-    devframe: {
-        channelName: typeof SVADMIN_DEVFRAME_CHANNEL;
-    };
-};
+export type { DevtoolsCacheActionRequest, DevtoolsCacheActionResult, DevtoolsCacheMutation, } from '@svadmin/devtools-contract';
 export type DevtoolsQuerySelector = Partial<Pick<DevtoolsQueryDiagnostic, 'provider' | 'resource' | 'operation'>>;
 type QueryClientLike = {
     getQueryCache: () => {
@@ -43,19 +28,19 @@ type QueryClientLike = {
     }) => Promise<void>;
     getMutationCache: () => {
         clear: () => void;
+        getAll?: () => readonly unknown[];
     };
 };
+/**
+ * Page-script protocol as seen by a panel. It mirrors the shared DevTools wire
+ * (`getSnapshot` + `cacheAction`); the shared bridge installs the same shape on
+ * `window.__VIBEUNION_DEVTOOLS__`.
+ */
 export type SvadminDevframeProtocol = {
     functions: {
         pageScript: {
             getSnapshot: () => SvadminDevtoolsSnapshot | null;
-            cacheCancel: (selector?: DevtoolsQuerySelector) => Promise<void>;
-            cacheInvalidate: (selector?: DevtoolsQuerySelector) => Promise<void>;
-            cacheRefetch: (selector?: DevtoolsQuerySelector) => Promise<void>;
-            cacheRemove: (selector?: DevtoolsQuerySelector) => void;
-            cacheReset: (selector?: DevtoolsQuerySelector) => Promise<void>;
-            cacheClear: () => void;
-            clearMutations: () => void;
+            cacheAction: (request: DevtoolsCacheActionRequest) => Promise<DevtoolsCacheActionResult>;
         };
     };
 };
@@ -72,9 +57,10 @@ export declare function createSvadminDevtoolsCacheActions(): {
     clear: () => void;
     clearMutations: () => void | undefined;
 };
-export declare function installSvadminDevtoolsBridge(): void;
-declare global {
-    interface Window {
-        __SVADMIN_DEVTOOLS__?: SvadminDevtoolsBridge;
-    }
-}
+/**
+ * Executes a shared-protocol cache action against the attached query client and
+ * reports how many entries matched. Only the operations svadmin implements are
+ * accepted; mutation-variant operations the panel never advertises throw.
+ */
+export declare function runSvadminDevtoolsCacheAction(request: DevtoolsCacheActionRequest): Promise<DevtoolsCacheActionResult>;
+export declare function installSvadminDevtoolsBridge(): DevtoolsPageBridge | null;

package/dist/devtools-bridge.js

@@ -1,11 +1,9 @@
 import { parseQueryKey } from '@svadmin/core';
-import { createPageScriptChannel } from 'devframe/in-page-channel';
+import { installDevtoolsPageBridge, } from '@vibeunion/devtools-devframe';
 import { DEV } from 'esm-env';
-export const SVADMIN_DEVFRAME_CHANNEL = 'svadmin:devtools';
 const listeners = new Set();
 let snapshot = null;
 let queryClient = null;
-let devframeChannel = null;
 export function publishSvadminDevtoolsSnapshot(next) {
     snapshot = next;
     for (const listener of listeners)
@@ -58,35 +56,53 @@ export function createSvadminDevtoolsCacheActions() {
         clearMutations: () => queryClient?.getMutationCache().clear(),
     };
 }
-export function installSvadminDevtoolsBridge() {
-    if (typeof window === 'undefined' || !DEV)
-        return;
-    if (!devframeChannel) {
-        const cache = createSvadminDevtoolsCacheActions();
-        devframeChannel = createPageScriptChannel({
-            name: SVADMIN_DEVFRAME_CHANNEL,
-            functions: {
-                getSnapshot: { type: 'query', handler: getSvadminDevtoolsSnapshot },
-                cacheCancel: { type: 'action', handler: cache.cancel },
-                cacheInvalidate: { type: 'action', handler: cache.invalidate },
-                cacheRefetch: { type: 'action', handler: cache.refetch },
-                cacheRemove: { type: 'action', handler: cache.remove },
-                cacheReset: { type: 'action', handler: cache.reset },
-                cacheClear: { type: 'action', handler: cache.clear },
-                clearMutations: { type: 'action', handler: cache.clearMutations },
-            },
-        });
+/**
+ * Executes a shared-protocol cache action against the attached query client and
+ * reports how many entries matched. Only the operations svadmin implements are
+ * accepted; mutation-variant operations the panel never advertises throw.
+ */
+export async function runSvadminDevtoolsCacheAction(request) {
+    const { action, selector } = request;
+    const actions = createSvadminDevtoolsCacheActions();
+    let matched;
+    switch (action) {
+        case 'cancel':
+            matched = matchingQueryKeys(selector).length;
+            await actions.cancel(selector);
+            break;
+        case 'invalidate':
+            matched = matchingQueryKeys(selector).length;
+            await actions.invalidate(selector);
+            break;
+        case 'refetch':
+            matched = matchingQueryKeys(selector).length;
+            await actions.refetch(selector);
+            break;
+        case 'remove':
+            matched = matchingQueryKeys(selector).length;
+            actions.remove(selector);
+            break;
+        case 'reset':
+            matched = matchingQueryKeys(selector).length;
+            await actions.reset(selector);
+            break;
+        case 'clear':
+            matched = matchingQueryKeys().length;
+            actions.clear();
+            break;
+        case 'clearMutations':
+            matched = queryClient?.getMutationCache().getAll?.().length ?? 0;
+            actions.clearMutations();
+            break;
+        default:
+            throw new Error(`Unsupported svadmin cache action: ${String(action)}`);
     }
-    const bridge = {
+    return { action, matched, changed: matched };
+}
+export function installSvadminDevtoolsBridge() {
+    return installDevtoolsPageBridge({
+        development: DEV,
         getSnapshot: getSvadminDevtoolsSnapshot,
-        subscribe: subscribeSvadminDevtools,
-        cache: createSvadminDevtoolsCacheActions(),
-        devframe: { channelName: SVADMIN_DEVFRAME_CHANNEL },
-    };
-    Object.defineProperty(window, '__SVADMIN_DEVTOOLS__', {
-        configurable: true,
-        enumerable: false,
-        value: bridge,
-        writable: false,
+        cacheAction: runSvadminDevtoolsCacheAction,
     });
 }

package/dist/index.d.ts

@@ -48,8 +48,9 @@ export { default as Can } from './components/CanAccess.svelte';
 export { default as UndoableNotification } from './components/UndoableNotification.svelte';
 export { default as DevTools } from './components/DevTools.svelte';
 export { default as DevframePanel } from './components/DevframePanel.svelte';
-export { attachSvadminDevtoolsQueryClient, createSvadminDevtoolsCacheActions, getSvadminDevtoolsSnapshot, installSvadminDevtoolsBridge, publishSvadminDevtoolsSnapshot, subscribeSvadminDevtools, SVADMIN_DEVFRAME_CHANNEL, } from './devtools-bridge.js';
-export type { DevtoolsCacheDiagnostics, DevtoolsProviderDiagnostic, DevtoolsQueryDiagnostic, SvadminDevtoolsBridge, SvadminDevtoolsSnapshot, DevtoolsQuerySelector, SvadminDevframeProtocol, } from './devtools-bridge.js';
+export { attachSvadminDevtoolsQueryClient, createSvadminDevtoolsCacheActions, getSvadminDevtoolsSnapshot, installSvadminDevtoolsBridge, publishSvadminDevtoolsSnapshot, runSvadminDevtoolsCacheAction, subscribeSvadminDevtools, } from './devtools-bridge.js';
+export type { DevtoolsCacheDiagnostics, DevtoolsProviderDiagnostic, DevtoolsQueryDiagnostic, SvadminDevtoolsSnapshot, DevtoolsQuerySelector, SvadminDevframeProtocol, } from './devtools-bridge.js';
+export type { DevtoolsPageBridge } from '@vibeunion/devtools-devframe';
 export { default as Authenticated } from './components/Authenticated.svelte';
 export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.svelte';
 export { default as ProfilePage } from './components/ProfilePage.svelte';

package/dist/index.js

@@ -42,7 +42,7 @@ export { default as Can } from './components/CanAccess.svelte';
 export { default as UndoableNotification } from './components/UndoableNotification.svelte';
 export { default as DevTools } from './components/DevTools.svelte';
 export { default as DevframePanel } from './components/DevframePanel.svelte';
-export { attachSvadminDevtoolsQueryClient, createSvadminDevtoolsCacheActions, getSvadminDevtoolsSnapshot, installSvadminDevtoolsBridge, publishSvadminDevtoolsSnapshot, subscribeSvadminDevtools, SVADMIN_DEVFRAME_CHANNEL, } from './devtools-bridge.js';
+export { attachSvadminDevtoolsQueryClient, createSvadminDevtoolsCacheActions, getSvadminDevtoolsSnapshot, installSvadminDevtoolsBridge, publishSvadminDevtoolsSnapshot, runSvadminDevtoolsCacheAction, subscribeSvadminDevtools, } from './devtools-bridge.js';
 export { default as Authenticated } from './components/Authenticated.svelte';
 export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.svelte';
 export { default as ProfilePage } from './components/ProfilePage.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -139,7 +139,8 @@
     }
   },
   "dependencies": {
-    "@svadmin/devtools-contract": "^0.2.0",
+    "@svadmin/devtools-contract": "^0.3.0",
+    "@vibeunion/devtools-devframe": "^0.1.0",
     "@sinclair/typebox": "^0.34.52",
     "@floating-ui/dom": "^1.8.0",
     "esm-env": "^1.2.2",