@svadmin/ui 0.73.0 → 0.75.0

package/dist/components/ui/button/button-variants.js

@@ -1,5 +1,7 @@
-import { uiButton } from '../../../styled-system/recipes/index.js';
-// 保留公开 helper、语义标记和 null 行为；样式由预生成 Panda recipe 提供。
-export const buttonVariants = ({ variant = "default", size = "default", class: className = "", className: extraClassName = "", } = {}) => ["svadmin-button", variant && `svadmin-button--${variant}`, size && `svadmin-button-size--${size}`,
-    uiButton({ ...(variant ? { variant } : {}), ...(size ? { size } : {}) }),
-    className, extraClassName].filter(Boolean).join(" ");
+import { buttonRecipe } from '../../../recipes.js';
+// 只组合语义类，不要求消费者安装 Tailwind 编译器或 class merger。
+export const buttonVariants = ({ variant, size, class: className = "", className: extraClassName = "", } = {}) => buttonRecipe({
+    variant,
+    size,
+    class: [className, extraClassName].filter(Boolean).join(" "),
+}).root;

package/dist/components/ui/checkbox/checkbox.svelte

@@ -8,14 +8,18 @@
 		ref = $bindable(null),
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		size = "default",
 		class: className,
 		...restProps
-	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+	}: Omit<WithoutChildrenOrChild<CheckboxPrimitive.RootProps>, "size"> & {
+		size?: "default" | "compact";
+	} = $props();
 </script>
 
 <CheckboxPrimitive.Root
 	bind:ref
 	data-slot="checkbox"
+	data-size={size}
 	class={cn("svadmin-checkbox", className)}
 	bind:checked
 	bind:indeterminate

package/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Checkbox as CheckboxPrimitive } from "bits-ui";
-declare const Checkbox: import("svelte").Component<Omit<CheckboxPrimitive.RootProps, "children" | "child">, {}, "ref" | "checked" | "indeterminate">;
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+type $$ComponentProps = Omit<WithoutChildrenOrChild<CheckboxPrimitive.RootProps>, "size"> & {
+    size?: "default" | "compact";
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 	import { getContext } from "svelte";
@@ -19,7 +18,7 @@
 	function handleClick(e: MouseEvent) {
 		e.stopPropagation();
 		toggle?.();
-		restProps.onclick?.(e as any);
+		restProps.onclick?.(e as Parameters<NonNullable<typeof restProps.onclick>>[0]);
 	}
 </script>
 

package/dist/components/ui/input/input.svelte

@@ -11,7 +11,8 @@
 		? number | null | undefined
 		: string | null | undefined;
 
-	type Props = WithElementRef<Omit<HTMLInputAttributes, "type" | "value">> &
+	type Props = WithElementRef<Omit<HTMLInputAttributes, "type" | "value" | "size">> &
+			{ size?: "default" | "compact"; nativeSize?: number } &
 			(Type extends "file"
 				? { type: "file"; files?: FileList; value?: never }
 				: { type?: Type; files?: undefined; value?: InputValue });
@@ -22,6 +23,8 @@
 		type,
 		files = $bindable(),
 		disabled,
+		size = "default",
+		nativeSize,
 		class: className,
 		"data-slot": dataSlot = "input",
 		...restProps
@@ -30,7 +33,7 @@
 	const i18n = useTranslation();
 	const isFileInput = $derived(type?.toLowerCase() === "file");
 	const isDateInput = $derived(["date", "datetime-local", "month", "week", "time"].includes(type?.toLowerCase() ?? ""));
-	const attributes = $derived(definedOptions({ ...restProps, disabled }));
+	const attributes = $derived(definedOptions({ ...restProps, disabled, size: nativeSize }));
 	const selectedFiles = $derived(files ? Array.from(files) : []);
 	const selectedFileLabel = $derived.by(() => {
 		const firstFile = selectedFiles[0];
@@ -48,6 +51,7 @@
 		<input
 			bind:this={ref}
 			data-slot={dataSlot}
+			data-size={size}
 			data-input-type="file"
 			class={cn("svadmin-input", className)}
 			type="file"
@@ -63,6 +67,7 @@
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
+		data-size={size}
 			class={cn("svadmin-input", className)}
 			{type}
 			lang={isDateInput ? i18n.locale : undefined}

package/dist/components/ui/input/input.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 declare function $$render<Type extends HTMLInputTypeAttribute | undefined = undefined>(): {
-    props: Omit<HTMLInputAttributes, "type" | "value"> & {
+    props: Omit<HTMLInputAttributes, "type" | "size" | "value"> & {
         ref?: HTMLElement | null;
+    } & {
+        size?: "default" | "compact";
+        nativeSize?: number;
     } & (Type extends "file" ? {
         type: "file";
         files?: FileList;

package/dist/components/ui/select/select.svelte

@@ -4,8 +4,9 @@
 
 	// Use HTMLElement instead of HTMLSelectElement to avoid TS error:
 	// HTMLSelectElement.remove() returns void, incompatible with HTMLElement's Element return
-	type Props = WithElementRef<HTMLSelectAttributes, HTMLElement> & {
+	type Props = Omit<WithElementRef<HTMLSelectAttributes, HTMLElement>, "size"> & {
 		placeholder?: string;
+		size?: "default" | "compact";
 	};
 
 	let {
@@ -13,6 +14,7 @@
 		value = $bindable(""),
 		class: className,
 		placeholder,
+		size = "default",
 		children,
 		...restProps
 	}: Props = $props();
@@ -21,6 +23,7 @@
 <select
 	bind:this={ref}
 	data-slot="select"
+	data-size={size}
 	class={cn(
 		"svadmin-select",
 		className

package/dist/components/ui/select/select.svelte.d.ts

@@ -1,7 +1,8 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLSelectAttributes } from "svelte/elements";
-type Props = WithElementRef<HTMLSelectAttributes, HTMLElement> & {
+type Props = Omit<WithElementRef<HTMLSelectAttributes, HTMLElement>, "size"> & {
     placeholder?: string;
+    size?: "default" | "compact";
 };
 declare const Select: import("svelte").Component<Props, {}, "value" | "ref">;
 type Select = ReturnType<typeof Select>;

package/dist/components/ui/textarea/textarea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
-	import { uiTextarea } from "../../../styled-system/recipes/index.js";
+	import { textareaRecipe as uiTextarea } from "../../../recipes.js";
 
 	type Props = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
 
@@ -16,7 +16,7 @@
 <textarea
 	bind:this={ref}
 	data-slot="textarea"
-	class={cn("svadmin-textarea", uiTextarea(), className)}
+	class={cn(uiTextarea().root, className)}
 	bind:value
 	{...restProps}
 ></textarea>

package/dist/components.css

@@ -1,4 +1,4 @@
-/* @svadmin/ui - Stripe-first product tokens
+/* @svadmin/ui - Admin UI product tokens
  * Imported by AdminApp and overridable by consumer CSS.
  * Metronic references inform capability coverage, never visual styling.
  */
@@ -668,6 +668,37 @@ h1, h2, h3, h4, h5, h6, [data-slot="card-title"] {
 main {
   scroll-behavior: smooth;
 }
+.svadmin-sidebar-expanded,
+.svadmin-sidebar-collapsed {
+  flex: 0 0 auto;
+  width: var(--svadmin-sidebar-width);
+}
+.svadmin-sidebar-expanded {
+  --svadmin-sidebar-width: 252px;
+}
+.svadmin-sidebar-collapsed {
+  --svadmin-sidebar-width: 70px;
+}
+.svadmin-sidebar-content-expanded,
+.svadmin-sidebar-content-collapsed {
+  min-width: 0;
+}
+@media (min-width: 768px) {
+  .svadmin-sidebar-content-expanded {
+    margin-left: 252px;
+  }
+  .svadmin-sidebar-content-collapsed {
+    margin-left: 70px;
+  }
+  [dir="rtl"] .svadmin-sidebar-content-expanded {
+    margin-left: 0;
+    margin-right: 252px;
+  }
+  [dir="rtl"] .svadmin-sidebar-content-collapsed {
+    margin-left: 0;
+    margin-right: 70px;
+  }
+}
 [dir="rtl"] {
   direction: rtl;
 }
@@ -2114,7 +2145,7 @@ details[data-svadmin-filter]:not([open]) > :not(summary), details.svadmin-collap
   display: none !important;
 }
 
-/* --- Stripe-first layout preset (clean-flat) --- */
+/* --- Admin UI layout preset (clean-flat) --- */
 /* Keep this public class for layoutPreset API compatibility. The preset only
  * adjusts density and composition; color, focus, and elevation stay semantic. */
 .layout-clean-flat {

package/dist/date-input-policy.d.ts

@@ -0,0 +1,4 @@
+export type DateInputMode = 'date' | 'time' | 'datetime';
+/** 仅接受无时区原生输入值，不让 Date 的宽松解析改写日历含义。 */
+export declare function dateInputNumber(value: string, mode: DateInputMode): number | undefined;
+export declare function dateInputAllowed(value: string, mode: DateInputMode, min?: string, max?: string, disabledDate?: (date: string) => boolean): boolean;

package/dist/date-input-policy.js

@@ -0,0 +1,35 @@
+/** 仅接受无时区原生输入值，不让 Date 的宽松解析改写日历含义。 */
+export function dateInputNumber(value, mode) {
+    const day = '\\d{4}-\\d{2}-\\d{2}';
+    const time = '\\d{2}:\\d{2}(?::\\d{2}(?:\\.\\d{1,3})?)?';
+    if (!new RegExp(`^${mode === 'date' ? day : mode === 'time' ? time : `${day}T${time}`}$`).test(value))
+        return;
+    const source = mode === 'date' ? `${value}T00:00` : mode === 'time' ? `2000-01-01T${value}` : value;
+    const [date, clock = ''] = source.split('T');
+    if (date?.startsWith('0000-'))
+        return;
+    const [hours, minutes, seconds = '00'] = clock.split(':');
+    const [wholeSeconds, fraction = ''] = seconds.split('.');
+    const canonical = `${date}T${hours}:${minutes}:${wholeSeconds}.${fraction.padEnd(3, '0')}Z`;
+    const parsed = new Date(canonical);
+    if (!Number.isFinite(parsed.getTime()) || parsed.toISOString() !== canonical)
+        return;
+    return parsed.getTime();
+}
+export function dateInputAllowed(value, mode, min, max, disabledDate) {
+    const number = dateInputNumber(value, mode);
+    if (number === undefined)
+        return false;
+    const lower = min === undefined ? undefined : dateInputNumber(min, mode);
+    const upper = max === undefined ? undefined : dateInputNumber(max, mode);
+    if ((min !== undefined && lower === undefined) || (max !== undefined && upper === undefined))
+        return false;
+    if ((lower !== undefined && number < lower) || (upper !== undefined && number > upper))
+        return false;
+    try {
+        return mode === 'time' || !disabledDate?.(value.slice(0, 10));
+    }
+    catch {
+        return false;
+    }
+}

package/dist/design-system-components.d.ts

@@ -0,0 +1,100 @@
+export type DesignComponentState = "default" | "hover" | "focus" | "disabled" | "loading" | "error" | "readonly" | "open" | "closed" | "boundary" | "empty" | "filtered-empty" | "forbidden" | "success" | "warning" | "danger" | "neutral" | "active" | "inactive" | "checked" | "unchecked" | "mixed" | "focus-restore" | "overflow" | "value";
+export type DesignComponentContract = {
+    id: string;
+    name: string;
+    codePath: string;
+    codeExport: string;
+    states: readonly DesignComponentState[];
+    themes: readonly ["light", "dark"];
+    sizes: readonly ["default", "compact"];
+};
+export declare const designSystemComponents: readonly [{
+    readonly id: "ui.button";
+    readonly name: "Button";
+    readonly codePath: "packages/ui/src/components/ui/button/index.ts";
+    readonly codeExport: "Button";
+    readonly states: readonly ["default", "hover", "focus", "disabled", "loading"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.input";
+    readonly name: "Input";
+    readonly codePath: "packages/ui/src/components/ui/input/index.ts";
+    readonly codeExport: "Input";
+    readonly states: readonly ["empty", "value", "focus", "disabled", "error", "readonly"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.select";
+    readonly name: "Select";
+    readonly codePath: "packages/ui/src/components/ui/select/index.ts";
+    readonly codeExport: "Select";
+    readonly states: readonly ["empty", "value", "focus", "disabled", "error"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.checkbox";
+    readonly name: "Checkbox";
+    readonly codePath: "packages/ui/src/components/ui/checkbox/index.ts";
+    readonly codeExport: "Checkbox";
+    readonly states: readonly ["unchecked", "checked", "focus", "disabled", "mixed"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.tabs";
+    readonly name: "Tabs";
+    readonly codePath: "packages/ui/src/components/ui/tabs/index.ts";
+    readonly codeExport: "Tabs";
+    readonly states: readonly ["active", "inactive", "focus", "disabled"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.badge";
+    readonly name: "Badge";
+    readonly codePath: "packages/ui/src/components/ui/badge/index.ts";
+    readonly codeExport: "Badge";
+    readonly states: readonly ["success", "warning", "danger", "neutral"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.menu";
+    readonly name: "Menu";
+    readonly codePath: "packages/ui/src/components/ui/dropdown-menu/index.ts";
+    readonly codeExport: "DropdownMenu";
+    readonly states: readonly ["closed", "open", "focus", "overflow"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.dialog";
+    readonly name: "Dialog";
+    readonly codePath: "packages/ui/src/components/ui/dialog/index.ts";
+    readonly codeExport: "Dialog";
+    readonly states: readonly ["closed", "open", "focus-restore", "overflow"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.tooltip";
+    readonly name: "Tooltip";
+    readonly codePath: "packages/ui/src/components/ui/tooltip/index.ts";
+    readonly codeExport: "Tooltip";
+    readonly states: readonly ["closed", "open", "boundary"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.table";
+    readonly name: "Table";
+    readonly codePath: "packages/ui/src/components/ui/table/index.ts";
+    readonly codeExport: "Table";
+    readonly states: readonly ["loading", "default", "empty", "filtered-empty", "error", "forbidden"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}, {
+    readonly id: "ui.status-badge";
+    readonly name: "StatusBadge";
+    readonly codePath: "packages/ui/src/components/content/StatusBadge.svelte";
+    readonly codeExport: "StatusBadge";
+    readonly states: readonly ["success", "warning", "danger", "neutral"];
+    readonly themes: readonly ["light", "dark"];
+    readonly sizes: readonly ["default", "compact"];
+}];
+export type DesignComponentId = (typeof designSystemComponents)[number]["id"];

package/dist/design-system-components.js

@@ -0,0 +1,101 @@
+export const designSystemComponents = [
+    {
+        id: "ui.button",
+        name: "Button",
+        codePath: "packages/ui/src/components/ui/button/index.ts",
+        codeExport: "Button",
+        states: ["default", "hover", "focus", "disabled", "loading"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.input",
+        name: "Input",
+        codePath: "packages/ui/src/components/ui/input/index.ts",
+        codeExport: "Input",
+        states: ["empty", "value", "focus", "disabled", "error", "readonly"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.select",
+        name: "Select",
+        codePath: "packages/ui/src/components/ui/select/index.ts",
+        codeExport: "Select",
+        states: ["empty", "value", "focus", "disabled", "error"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.checkbox",
+        name: "Checkbox",
+        codePath: "packages/ui/src/components/ui/checkbox/index.ts",
+        codeExport: "Checkbox",
+        states: ["unchecked", "checked", "focus", "disabled", "mixed"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.tabs",
+        name: "Tabs",
+        codePath: "packages/ui/src/components/ui/tabs/index.ts",
+        codeExport: "Tabs",
+        states: ["active", "inactive", "focus", "disabled"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.badge",
+        name: "Badge",
+        codePath: "packages/ui/src/components/ui/badge/index.ts",
+        codeExport: "Badge",
+        states: ["success", "warning", "danger", "neutral"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.menu",
+        name: "Menu",
+        codePath: "packages/ui/src/components/ui/dropdown-menu/index.ts",
+        codeExport: "DropdownMenu",
+        states: ["closed", "open", "focus", "overflow"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.dialog",
+        name: "Dialog",
+        codePath: "packages/ui/src/components/ui/dialog/index.ts",
+        codeExport: "Dialog",
+        states: ["closed", "open", "focus-restore", "overflow"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.tooltip",
+        name: "Tooltip",
+        codePath: "packages/ui/src/components/ui/tooltip/index.ts",
+        codeExport: "Tooltip",
+        states: ["closed", "open", "boundary"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.table",
+        name: "Table",
+        codePath: "packages/ui/src/components/ui/table/index.ts",
+        codeExport: "Table",
+        states: ["loading", "default", "empty", "filtered-empty", "error", "forbidden"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+    {
+        id: "ui.status-badge",
+        name: "StatusBadge",
+        codePath: "packages/ui/src/components/content/StatusBadge.svelte",
+        codeExport: "StatusBadge",
+        states: ["success", "warning", "danger", "neutral"],
+        themes: ["light", "dark"],
+        sizes: ["default", "compact"],
+    },
+];

package/dist/design-system.js

@@ -1,4 +1,4 @@
-import { surfaceMetric, surfaceTable } from "./styled-system/recipes/index.js";
+import { surfaceMetricRecipe as surfaceMetric, surfaceTableRecipe as surfaceTable } from "./recipes.js";
 export function metricSurfaceClasses(tone = "neutral") {
     return surfaceMetric({ tone });
 }

package/dist/devtools-bridge.d.ts

@@ -0,0 +1,80 @@
+import type { DevtoolsQueryDiagnostic, SvadminDevtoolsSnapshot } from '@svadmin/devtools-contract';
+export declare const SVADMIN_DEVFRAME_CHANNEL = "svadmin:devtools";
+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 DevtoolsQuerySelector = Partial<Pick<DevtoolsQueryDiagnostic, 'provider' | 'resource' | 'operation'>>;
+type QueryClientLike = {
+    getQueryCache: () => {
+        getAll: () => Array<{
+            queryKey: readonly unknown[];
+            queryHash: string;
+        }>;
+        clear: () => void;
+    };
+    invalidateQueries: (filters: {
+        queryKey?: readonly unknown[];
+    }) => Promise<void>;
+    cancelQueries: (filters: {
+        queryKey?: readonly unknown[];
+    }) => Promise<void>;
+    refetchQueries: (filters: {
+        queryKey?: readonly unknown[];
+    }) => Promise<void>;
+    removeQueries: (filters: {
+        queryKey?: readonly unknown[];
+    }) => void;
+    resetQueries: (filters: {
+        queryKey?: readonly unknown[];
+    }) => Promise<void>;
+    getMutationCache: () => {
+        clear: () => void;
+    };
+};
+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;
+        };
+    };
+};
+export declare function publishSvadminDevtoolsSnapshot(next: SvadminDevtoolsSnapshot): void;
+export declare function getSvadminDevtoolsSnapshot(): SvadminDevtoolsSnapshot | null;
+export declare function subscribeSvadminDevtools(listener: (next: SvadminDevtoolsSnapshot) => void): () => void;
+export declare function attachSvadminDevtoolsQueryClient(client: QueryClientLike): void;
+export declare function createSvadminDevtoolsCacheActions(): {
+    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 | undefined;
+};
+export declare function installSvadminDevtoolsBridge(): void;
+declare global {
+    interface Window {
+        __SVADMIN_DEVTOOLS__?: SvadminDevtoolsBridge;
+    }
+}

package/dist/devtools-bridge.js

@@ -0,0 +1,92 @@
+import { parseQueryKey } from '@svadmin/core';
+import { createPageScriptChannel } from 'devframe/in-page-channel';
+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)
+        listener(next);
+}
+export function getSvadminDevtoolsSnapshot() {
+    return snapshot;
+}
+export function subscribeSvadminDevtools(listener) {
+    listeners.add(listener);
+    if (snapshot)
+        listener(snapshot);
+    return () => listeners.delete(listener);
+}
+function matchesSelector(query, selector) {
+    if (!selector || Object.keys(selector).length === 0)
+        return true;
+    const descriptor = parseQueryKey(query.queryKey);
+    if (!descriptor)
+        return false;
+    const operation = `${descriptor.kind}:${descriptor.action ?? 'call'}`;
+    return (selector.provider === undefined || selector.provider === descriptor.provider)
+        && (selector.resource === undefined || selector.resource === descriptor.resource)
+        && (selector.operation === undefined || selector.operation === operation);
+}
+function matchingQueryKeys(selector) {
+    return (queryClient?.getQueryCache().getAll() ?? [])
+        .filter((query) => matchesSelector(query, selector))
+        .map((query) => query.queryKey);
+}
+function withMatchingQueries(operation, selector) {
+    return Promise.all(matchingQueryKeys(selector).map((queryKey) => operation(queryKey))).then(() => undefined);
+}
+export function attachSvadminDevtoolsQueryClient(client) {
+    queryClient = client;
+}
+export function createSvadminDevtoolsCacheActions() {
+    return {
+        cancel: (selector) => withMatchingQueries((queryKey) => queryClient?.cancelQueries({ queryKey }), selector),
+        invalidate: (selector) => withMatchingQueries((queryKey) => queryClient?.invalidateQueries({ queryKey }), selector),
+        refetch: (selector) => withMatchingQueries((queryKey) => queryClient?.refetchQueries({ queryKey }), selector),
+        remove: (selector) => {
+            for (const queryKey of matchingQueryKeys(selector))
+                queryClient?.removeQueries({ queryKey });
+        },
+        reset: (selector) => withMatchingQueries((queryKey) => queryClient?.resetQueries({ queryKey }), selector),
+        clear: () => {
+            queryClient?.getQueryCache().clear();
+        },
+        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 },
+            },
+        });
+    }
+    const bridge = {
+        getSnapshot: getSvadminDevtoolsSnapshot,
+        subscribe: subscribeSvadminDevtools,
+        cache: createSvadminDevtoolsCacheActions(),
+        devframe: { channelName: SVADMIN_DEVFRAME_CHANNEL },
+    };
+    Object.defineProperty(window, '__SVADMIN_DEVTOOLS__', {
+        configurable: true,
+        enumerable: false,
+        value: bridge,
+        writable: false,
+    });
+}