@svadmin/ui 0.73.0 → 0.74.0

package/dist/components/DashboardView.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { DashboardProvider, EnterpriseProviderRequestContext } from '@svadmin/core';
+interface Props {
+    provider: DashboardProvider;
+    dashboardId: string;
+    requestContext?: EnterpriseProviderRequestContext;
+    filters?: readonly {
+        field: string;
+        value: string | number | boolean | null;
+    }[];
+    title?: string;
+}
+declare const DashboardView: import("svelte").Component<Props, {}, "">;
+type DashboardView = ReturnType<typeof DashboardView>;
+export default DashboardView;

package/dist/components/DatePicker.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import DateTimeInput from './DateTimeInput.svelte';
+
+  export type DatePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
+
+  let props: DatePickerProps = $props();
+</script>
+
+<DateTimeInput {...props} mode="date" />

package/dist/components/DatePicker.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import DateTimeInput from './DateTimeInput.svelte';
+export type DatePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/DateRangeInput.svelte

@@ -1,19 +1,30 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
   import DateTimeInput, { type DateTimeInputMode } from './DateTimeInput.svelte';
   import { cn } from '../utils.js';
-  import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { dateInputAllowed, dateInputNumber } from '../date-input-policy.js';
+  import { Select } from './ui/select/index.js';
+  import type { DateInputOptions } from '@svadmin/core';
+  import { formatCivilDateTime, parseDateTimeInstant, type DateTimeValueMode, type DateTimeDisambiguation } from '@svadmin/core/date-time';
 
   export interface DateRangeInputValue {
     start: string | null;
     end: string | null;
   }
+  export type DateRangePreset = NonNullable<DateInputOptions['presets']>[number];
 
   interface Props {
     value?: DateRangeInputValue | null;
     mode?: DateTimeInputMode;
+    valueMode?: DateTimeValueMode;
+    timeZone?: string;
+    disambiguation?: DateTimeDisambiguation;
     min?: string;
     max?: string;
     step?: number;
+    disabledDate?: (date: string) => boolean;
+    presets?: DateRangePreset[];
     startId?: string;
     endId?: string;
     startName?: string;
@@ -22,6 +33,8 @@
     required?: boolean;
     invalid?: boolean;
     describedby?: string;
+    startAriaLabel?: string;
+    endAriaLabel?: string;
     class?: string;
     onchange?: (value: DateRangeInputValue) => void;
   }
@@ -29,9 +42,14 @@
   let {
     value = $bindable({ start: null, end: null }),
     mode = 'date',
+    valueMode = 'civil',
+    timeZone,
+    disambiguation = 'reject',
     min,
     max,
     step,
+    disabledDate,
+    presets = [],
     startId,
     endId,
     startName,
@@ -40,12 +58,52 @@
     required = false,
     invalid = false,
     describedby,
+    startAriaLabel,
+    endAriaLabel,
     class: className = '',
     onchange,
   }: Props = $props();
 
+  const i18n = useTranslation();
+  const instantMode = $derived(valueMode === 'instant');
+  const startMax = $derived(!instantMode && value?.end && (!max || value.end < max) ? value.end : max);
+  const endMin = $derived(!instantMode && value?.start && (!min || value.start > min) ? value.start : min);
+  function validInstant(value: string | null | undefined): string | undefined {
+    return value && parseDateTimeInstant(value) !== undefined ? value : undefined;
+  }
+
+  function presetAllowed(preset: DateRangePreset): boolean {
+    const { start, end } = preset.value;
+    if (instantMode) {
+      if (mode !== 'datetime' || !timeZone) return false;
+      const first = parseDateTimeInstant(start);
+      const last = parseDateTimeInstant(end);
+      if (first === undefined || last === undefined || first > last) return false;
+      const firstDraft = formatCivilDateTime(first, timeZone);
+      const lastDraft = formatCivilDateTime(last, timeZone);
+      return firstDraft !== undefined && lastDraft !== undefined
+        && dateInputAllowed(firstDraft, mode, min, max, disabledDate)
+        && dateInputAllowed(lastDraft, mode, min, max, disabledDate);
+    }
+    const first = dateInputNumber(start, mode);
+    const last = dateInputNumber(end, mode);
+    return first !== undefined && last !== undefined && first <= last
+      && dateInputAllowed(start, mode, min, max, disabledDate)
+      && dateInputAllowed(end, mode, min, max, disabledDate);
+  }
+
+  function choosePreset(event: Event): void {
+    const select = event.currentTarget;
+    if (!(select instanceof HTMLSelectElement)) return;
+    const preset = select.value === '' ? undefined : presets[Number(select.value)];
+    select.value = '';
+    if (disabled || !preset || !presetAllowed(preset)) return;
+    const result = { ...preset.value };
+    value = result;
+    onchange?.(result);
+  }
+
   function update(part: 'start' | 'end', next: string | null): void {
-    // null 范围首次编辑也必须返回两个明确的端点。
     const result: DateRangeInputValue = { start: value?.start ?? null, end: value?.end ?? null, [part]: next };
     value = result;
     onchange?.(result);
@@ -53,23 +111,45 @@
 </script>
 
 <div class={cn('svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-421ac2be5045', className)} data-date-range-input>
+  {#if presets.length > 0}
+    <Select value="" {disabled} aria-label={i18n.t('dateInput.presets')} onchange={choosePreset}>
+      <option value="">{i18n.t('dateInput.presets')}</option>
+      {#each presets as preset, index (index)}
+        <option value={String(index)} disabled={!presetAllowed(preset)}>{preset.label}</option>
+      {/each}
+    </Select>
+  {/if}
   <DateTimeInput
     value={value?.start ?? null}
     {mode}
-    {...definedOptions({ min, max, step, id: startId, name: startName, describedby })}
+    {valueMode}
+    {disambiguation}
+    {...definedOptions({
+      timeZone, min, max: startMax, step, disabledDate,
+      id: startId, name: startName, describedby,
+      maxInstant: instantMode ? validInstant(value?.end) : undefined,
+    })}
     {disabled}
     {required}
     {invalid}
+    ariaLabel={startAriaLabel ?? i18n.t('common.startDate')}
     onchange={(next) => update('start', next)}
   />
-  <span aria-hidden="true">至</span>
+  <span aria-hidden="true">{i18n.t('dateInput.to')}</span>
   <DateTimeInput
     value={value?.end ?? null}
     {mode}
-    {...definedOptions({ min, max, step, id: endId, name: endName, describedby })}
+    {valueMode}
+    {disambiguation}
+    {...definedOptions({
+      timeZone, min: endMin, max, step, disabledDate,
+      id: endId, name: endName, describedby,
+      minInstant: instantMode ? validInstant(value?.start) : undefined,
+    })}
     {disabled}
     {required}
     {invalid}
+    ariaLabel={endAriaLabel ?? i18n.t('common.endDate')}
     onchange={(next) => update('end', next)}
   />
 </div>

package/dist/components/DateRangeInput.svelte.d.ts

@@ -1,14 +1,22 @@
 import { type DateTimeInputMode } from './DateTimeInput.svelte';
+import type { DateInputOptions } from '@svadmin/core';
+import { type DateTimeValueMode, type DateTimeDisambiguation } from '@svadmin/core/date-time';
 export interface DateRangeInputValue {
     start: string | null;
     end: string | null;
 }
+export type DateRangePreset = NonNullable<DateInputOptions['presets']>[number];
 interface Props {
     value?: DateRangeInputValue | null;
     mode?: DateTimeInputMode;
+    valueMode?: DateTimeValueMode;
+    timeZone?: string;
+    disambiguation?: DateTimeDisambiguation;
     min?: string;
     max?: string;
     step?: number;
+    disabledDate?: (date: string) => boolean;
+    presets?: DateRangePreset[];
     startId?: string;
     endId?: string;
     startName?: string;
@@ -17,6 +25,8 @@ interface Props {
     required?: boolean;
     invalid?: boolean;
     describedby?: string;
+    startAriaLabel?: string;
+    endAriaLabel?: string;
     class?: string;
     onchange?: (value: DateRangeInputValue) => void;
 }

package/dist/components/DateRangePicker.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import DateRangeInput from './DateRangeInput.svelte';
+
+  export type DateRangePickerProps = Omit<ComponentProps<typeof DateRangeInput>, 'mode'>;
+
+  let props: DateRangePickerProps = $props();
+</script>
+
+<DateRangeInput {...props} mode="date" />

package/dist/components/DateRangePicker.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import DateRangeInput from './DateRangeInput.svelte';
+export type DateRangePickerProps = Omit<ComponentProps<typeof DateRangeInput>, 'mode'>;
+declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

package/dist/components/DateTimeInput.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { Input } from './ui/input/index.js';
   import { cn } from '../utils.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { civilDateTimeToInstant, parseDateTimeInstant, formatCivilDateTime, type DateTimeValueMode, type DateTimeDisambiguation } from '@svadmin/core/date-time';
+  import { untrack } from 'svelte';
+  import { dateInputAllowed } from '../date-input-policy.js';
 
   export type DateTimeInputMode = 'date' | 'time' | 'datetime';
 
@@ -9,15 +13,22 @@
     mode?: DateTimeInputMode;
     min?: string;
     max?: string;
+    minInstant?: string;
+    maxInstant?: string;
     step?: number;
+    disabledDate?: (date: string) => boolean;
     id?: string;
     name?: string;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
     describedby?: string;
+    ariaLabel?: string;
     class?: string;
     onchange?: (value: string | null) => void;
+    timeZone?: string;
+    valueMode?: DateTimeValueMode;
+    disambiguation?: DateTimeDisambiguation;
   }
 
   let {
@@ -25,41 +36,99 @@
     mode = 'date',
     min,
     max,
+    minInstant,
+    maxInstant,
     step,
+    disabledDate,
     id,
     name,
     disabled = false,
     required = false,
     invalid = false,
     describedby,
+    ariaLabel,
     class: className = '',
     onchange,
+    timeZone,
+    valueMode = 'civil',
+    disambiguation = 'reject',
   }: Props = $props();
 
   const inputType = $derived(mode === 'datetime' ? 'datetime-local' : mode);
+  const i18n = useTranslation();
+  function toDraft(next: string | null | undefined): string {
+    if (!next) return '';
+    if (mode !== 'datetime' || valueMode === 'civil') return next;
+    const instant = parseDateTimeInstant(next);
+    return instant !== undefined && timeZone ? formatCivilDateTime(instant, timeZone) ?? '' : '';
+  }
+  function toValue(next: string): string | null {
+    if (next === '') return null;
+    if (mode !== 'datetime' || valueMode === 'civil') return next;
+    if (!timeZone) return null;
+    // 已带偏移的绑定值已确定重复小时中的具体时间点，不重新猜测。
+    if (value && next === toDraft(value) && parseDateTimeInstant(value) !== undefined) return value;
+    const instant = civilDateTimeToInstant(next, timeZone, disambiguation);
+    return instant === undefined ? null : new Date(instant).toISOString();
+  }
+  let draft = $state(untrack(() => toDraft(value)));
+  let inputRef = $state<HTMLInputElement | null>(null);
+  const instantMode = $derived(valueMode === 'instant');
+  function instantAllowed(next: string | null): boolean {
+    if (!instantMode || next === null) return true;
+    const instant = parseDateTimeInstant(next);
+    const lower = minInstant === undefined ? undefined : parseDateTimeInstant(minInstant);
+    const upper = maxInstant === undefined ? undefined : parseDateTimeInstant(maxInstant);
+    return instant !== undefined && (lower === undefined || instant >= lower) && (upper === undefined || instant <= upper);
+  }
+  const configurationInvalid = $derived(instantMode && (mode !== 'datetime'
+    || !timeZone || formatCivilDateTime(0, timeZone) === undefined
+    || minInstant !== undefined && parseDateTimeInstant(minInstant) === undefined
+    || maxInstant !== undefined && parseDateTimeInstant(maxInstant) === undefined));
+  const boundValueInvalid = $derived(instantMode && !!value && toDraft(value) === '');
+  const policyInvalid = $derived(configurationInvalid || boundValueInvalid || draft !== '' && (
+    !dateInputAllowed(draft, mode, min, max, disabledDate)
+    || instantMode && (toValue(draft) === null || !instantAllowed(toValue(draft)))
+  ));
+  $effect.pre(() => {
+    void mode;
+    draft = toDraft(value);
+  });
+  $effect(() => {
+    inputRef?.setCustomValidity(policyInvalid ? i18n.t('dateInput.unavailable') : '');
+  });
 
   function handleInput(event: Event): void {
     const input = event.currentTarget;
-    if (!(input instanceof HTMLInputElement)) return;
-    const next = input.value === '' ? null : input.value;
+    if (!(input instanceof HTMLInputElement) || disabled || configurationInvalid) return;
+    draft = input.value;
+    if (draft && !dateInputAllowed(draft, mode, min, max, disabledDate)) return;
+    const next = toValue(input.value);
+    if (input.value !== '' && next === null) return;
+    if (!instantAllowed(next)) return;
     value = next;
     onchange?.(next);
   }
 </script>
 
 <div class={cn('svadmin-u-6da6a3c3f741', className)} data-date-time-input={mode}>
+  {#if instantMode && name}
+    <input type="hidden" {name} value={value ?? ''} {disabled} />
+  {/if}
   <Input
     {id}
-    {name}
+    name={instantMode ? undefined : name}
     type={inputType}
-    value={value ?? ''}
+    bind:ref={inputRef}
+    value={draft}
     {min}
     {max}
     {step}
     {disabled}
     {required}
-    aria-invalid={invalid || undefined}
+    aria-invalid={invalid || policyInvalid || undefined}
     aria-describedby={describedby}
+    aria-label={ariaLabel}
     oninput={handleInput}
   />
 </div>

package/dist/components/DateTimeInput.svelte.d.ts

@@ -1,18 +1,26 @@
+import { type DateTimeValueMode, type DateTimeDisambiguation } from '@svadmin/core/date-time';
 export type DateTimeInputMode = 'date' | 'time' | 'datetime';
 interface Props {
     value?: string | null;
     mode?: DateTimeInputMode;
     min?: string;
     max?: string;
+    minInstant?: string;
+    maxInstant?: string;
     step?: number;
+    disabledDate?: (date: string) => boolean;
     id?: string;
     name?: string;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
     describedby?: string;
+    ariaLabel?: string;
     class?: string;
     onchange?: (value: string | null) => void;
+    timeZone?: string;
+    valueMode?: DateTimeValueMode;
+    disambiguation?: DateTimeDisambiguation;
 }
 declare const DateTimeInput: import("svelte").Component<Props, {}, "value">;
 type DateTimeInput = ReturnType<typeof DateTimeInput>;

package/dist/components/DateTimePicker.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import DateTimeInput from './DateTimeInput.svelte';
+
+  export type DateTimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
+
+  let props: DateTimePickerProps = $props();
+</script>
+
+<DateTimeInput {...props} mode="datetime" />

package/dist/components/DateTimePicker.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import DateTimeInput from './DateTimeInput.svelte';
+export type DateTimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
+declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/components/DevTools.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { DEV } from 'esm-env';
   import { SvelteMap } from 'svelte/reactivity';
   import { fly } from 'svelte/transition';
   import { useQueryClient } from '@tanstack/svelte-query';
@@ -10,6 +11,11 @@
     parseQueryKey,
   } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
+  import {
+    attachSvadminDevtoolsQueryClient,
+    installSvadminDevtoolsBridge,
+    publishSvadminDevtoolsSnapshot,
+  } from '../devtools-bridge.js';
 
   import TooltipButton from './TooltipButton.svelte';
   import * as Tabs from './ui/tabs/index.js';
@@ -19,34 +25,18 @@
   import { X, Bug, ChevronDown, ChevronUp, Wand2 } from '@lucide/svelte';
   import InferencerPanel from './InferencerPanel.svelte';
 
-  type CacheDiagnostics = {
-    queries: { total: number; fetching: number; stale: number; errors: number };
-    mutations: { total: number; pending: number; paused: number; errors: number };
-  };
-
-  type ProviderDiagnostic = {
-    name: string;
-    configured: boolean;
-    capabilities: string;
-  };
-
-  type SafeQueryDiagnostic = {
-    provider: string;
-    resource: string;
-    operation: string;
-    status: string;
-    retries: number;
-    duration: string;
-    cacheAge: string;
-    invalidation: string;
-  };
+  import type {
+    DevtoolsCacheDiagnostics,
+    DevtoolsProviderDiagnostic,
+    DevtoolsQueryDiagnostic,
+  } from '../devtools-bridge.js';
 
-  const EMPTY_CACHE_DIAGNOSTICS: CacheDiagnostics = {
+  const EMPTY_CACHE_DIAGNOSTICS: DevtoolsCacheDiagnostics = {
     queries: { total: 0, fetching: 0, stale: 0, errors: 0 },
     mutations: { total: 0, pending: 0, paused: 0, errors: 0 },
   };
 
-  const isDev = import.meta.env.DEV;
+  const isDev = DEV;
   const i18n = useTranslation();
   const queryClient = useQueryClient();
   const adminContext = captureAdminContext();
@@ -54,8 +44,8 @@
   let { docked = false }: { docked?: boolean } = $props();
   let visible = $state(false);
   let collapsed = $state(false);
-  let cacheDiagnostics = $state.raw<CacheDiagnostics>(EMPTY_CACHE_DIAGNOSTICS);
-  let safeQueryDiagnostics = $state.raw<SafeQueryDiagnostic[]>([]);
+  let cacheDiagnostics = $state.raw<DevtoolsCacheDiagnostics>(EMPTY_CACHE_DIAGNOSTICS);
+  let safeQueryDiagnostics = $state.raw<DevtoolsQueryDiagnostic[]>([]);
   const queryTimings = new SvelteMap<string, { startedAt?: number; duration?: number }>();
 
   function toggle() {
@@ -109,6 +99,8 @@
 
   onMount(() => {
     if (!isDev) return;
+    attachSvadminDevtoolsQueryClient(queryClient);
+    installSvadminDevtoolsBridge();
     refreshCacheDiagnostics();
     const unsubscribeQueries = queryClient.getQueryCache().subscribe((event) => {
       // Observer events arrive in pairs during component rerenders. Refreshing diagnostics triggers another render,
@@ -163,7 +155,7 @@
     }
   });
 
-  const frameworkProviders = $derived.by((): ProviderDiagnostic[] => {
+  const frameworkProviders = $derived.by((): DevtoolsProviderDiagnostic[] => {
     const access = adminContext.accessControlProvider;
     const audit = adminContext.auditLogProvider;
     const notification = adminContext.notificationProvider;
@@ -233,6 +225,22 @@
       },
     ];
   });
+
+  $effect(() => {
+    if (!isDev) return;
+    publishSvadminDevtoolsSnapshot({
+      version: 1,
+      environment: 'development',
+      route: path,
+      locale,
+      theme,
+      colorTheme,
+      resourceCount: resources.length,
+      providers: frameworkProviders,
+      cache: cacheDiagnostics,
+      queries: safeQueryDiagnostics,
+    });
+  });
 </script>
 
 <svelte:window onkeydown={isDev ? handleKeydown : undefined} />

package/dist/components/DevframePanel.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { connectPanelChannel, type PanelChannel } from 'devframe/in-page-channel';
+  import {
+    SVADMIN_DEVFRAME_CHANNEL,
+    type DevtoolsQuerySelector,
+    type SvadminDevframeProtocol,
+    type SvadminDevtoolsSnapshot,
+  } from '../devtools-bridge.js';
+
+  let channel = $state<PanelChannel<SvadminDevframeProtocol> | null>(null);
+  let snapshot = $state<SvadminDevtoolsSnapshot | null>(null);
+  let status = $state('connecting');
+  let busy = $state(false);
+  let selectedProvider = $state('');
+  let selectedResource = $state('');
+  let selectedOperation = $state('');
+
+  const selector = $derived<DevtoolsQuerySelector>({
+    ...(selectedProvider ? { provider: selectedProvider } : {}),
+    ...(selectedResource ? { resource: selectedResource } : {}),
+    ...(selectedOperation ? { operation: selectedOperation } : {}),
+  });
+
+  async function run(action: (selector?: DevtoolsQuerySelector) => Promise<void> | void): Promise<void> {
+    if (!channel || !snapshot) return;
+    busy = true;
+    try {
+      await action(Object.keys(selector).length > 0 ? selector : undefined);
+      snapshot = await channel.call('getSnapshot');
+    } finally {
+      busy = false;
+    }
+  }
+
+  onMount(() => {
+    const nextChannel = connectPanelChannel<SvadminDevframeProtocol>({
+      name: SVADMIN_DEVFRAME_CHANNEL,
+      functions: {},
+    });
+    channel = nextChannel;
+    status = nextChannel.status;
+    const onStatus = () => {
+      status = nextChannel.status;
+      if (nextChannel.status === 'connected') {
+        void nextChannel.call('getSnapshot').then((next) => { snapshot = next; });
+      }
+    };
+    nextChannel.events.on('status:updated', onStatus);
+    onStatus();
+    return () => nextChannel.close();
+  });
+
+  function unique(values: string[]): string[] {
+    return [...new Set(values)].sort();
+  }
+</script>
+
+<section aria-label="svadmin Devframe panel">
+  <header>
+    <strong>svadmin DevTools</strong>
+    <span>{status}</span>
+  </header>
+
+  {#if snapshot}
+    <dl>
+      <div><dt>Route</dt><dd>{snapshot.route}</dd></div>
+      <div><dt>Resources</dt><dd>{snapshot.resourceCount}</dd></div>
+      <div><dt>Queries</dt><dd>{snapshot.cache.queries.total}</dd></div>
+      <div><dt>Mutations</dt><dd>{snapshot.cache.mutations.total}</dd></div>
+    </dl>
+    <div>
+      <label>
+        Provider
+        <select bind:value={selectedProvider}>
+          <option value="">All</option>
+          {#each unique(snapshot.queries.map((query) => query.provider)) as provider (provider)}
+            <option value={provider}>{provider}</option>
+          {/each}
+        </select>
+      </label>
+      <label>
+        Resource
+        <select bind:value={selectedResource}>
+          <option value="">All</option>
+          {#each unique(snapshot.queries.map((query) => query.resource)) as resource (resource)}
+            <option value={resource}>{resource}</option>
+          {/each}
+        </select>
+      </label>
+      <label>
+        Operation
+        <select bind:value={selectedOperation}>
+          <option value="">All</option>
+          {#each unique(snapshot.queries.map((query) => query.operation)) as operation (operation)}
+            <option value={operation}>{operation}</option>
+          {/each}
+        </select>
+      </label>
+    </div>
+    {#if snapshot.queries.length > 0}
+      <ul>
+        {#each snapshot.queries as query (`${query.provider}:${query.resource}:${query.operation}`)}
+          <li>
+            <strong>{query.provider} / {query.resource}</strong>
+            <span>{query.operation} · {query.status} · {query.duration}</span>
+          </li>
+        {/each}
+      </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>
+    </div>
+  {:else}
+    <p>Waiting for an svadmin page.</p>
+  {/if}
+</section>

package/dist/components/DevframePanel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DevframePanel: import("svelte").Component<Record<string, never>, {}, "">;
+type DevframePanel = ReturnType<typeof DevframePanel>;
+export default DevframePanel;