@svadmin/ui 0.72.0 → 0.74.0

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

@@ -1,6 +1,8 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;

package/dist/components/DashboardView.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { Loader2, RefreshCw } from '@lucide/svelte';
+  import {
+    DashboardContractError, captureAdminContext, captureAuthSession, createEnterpriseRequestContext,
+    decodeDashboardQuery, decodeDashboardSnapshot,
+  } from '@svadmin/core';
+  import type { DashboardProvider, DashboardSnapshot, EnterpriseProviderRequestContext } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { onDestroy, untrack } from 'svelte';
+  import MetricStrip, { type MetricStripItem } from './MetricStrip.svelte';
+  import { Button } from './ui/button/index.js';
+
+  interface Props {
+    provider: DashboardProvider;
+    dashboardId: string;
+    requestContext?: EnterpriseProviderRequestContext;
+    filters?: readonly { field: string; value: string | number | boolean | null }[];
+    title?: string;
+  }
+  let { provider, dashboardId, requestContext, filters = [], title }: Props = $props();
+  const context = captureAdminContext();
+  const i18n = useTranslation();
+  let snapshot = $state<DashboardSnapshot>();
+  let loading = $state(false);
+  let error = $state<'load' | 'invalid'>();
+  let epoch = 0;
+  let mounted = true;
+  let generatedContext: EnterpriseProviderRequestContext | undefined;
+  onDestroy(() => { mounted = false; });
+
+  function resolveContext(): EnterpriseProviderRequestContext {
+    if (requestContext) return requestContext;
+    const tenant = context.tenantCacheKey?.__svadminTenant;
+    if (typeof tenant !== 'string' && typeof tenant !== 'number') throw new Error('Missing tenant context');
+    if (generatedContext?.tenantId === tenant) return generatedContext;
+    generatedContext = createEnterpriseRequestContext({ tenantId: tenant });
+    return generatedContext;
+  }
+
+  async function load(): Promise<void> {
+    const currentEpoch = ++epoch;
+    loading = true;
+    error = undefined;
+    try {
+      const request = decodeDashboardQuery({
+        dashboardId: dashboardId.trim(),
+        ...(filters.length ? { filters: filters.map(filter => ({ ...filter })) } : {}),
+      });
+      const result = decodeDashboardSnapshot(await provider.get(resolveContext(), request));
+      if (!mounted || currentEpoch !== epoch) return;
+      snapshot = result;
+    } catch (cause) {
+      if (!mounted || currentEpoch !== epoch) return;
+      snapshot = undefined;
+      error = cause instanceof DashboardContractError ? 'invalid' : 'load';
+    } finally {
+      if (mounted && currentEpoch === epoch) loading = false;
+    }
+  }
+
+  const metricItems = $derived<MetricStripItem[]>(snapshot?.widgets.flatMap(widget =>
+    widget.kind === 'metric' ? widget.metrics.map(metric => ({
+      id: `${widget.id}:${metric.id}`, label: metric.label,
+      value: typeof metric.value === 'boolean' ? String(metric.value) : metric.value ?? '—',
+      ...(metric.tone ? { tone: metric.tone } : {}),
+      ...(metric.href ? { href: metric.href } : {}),
+    })) : [],
+  ) ?? []);
+
+  $effect(() => {
+    void provider; void dashboardId; void requestContext; void filters;
+    void captureAuthSession(context.authProvider).cacheKey;
+    untrack(() => { snapshot = undefined; void load(); });
+  });
+</script>
+
+<section class="svadmin-dashboard-view" aria-label={title ?? i18n.t('dashboard.title')}>
+  <header class="svadmin-dashboard-view__header">
+    <h2>{title ?? i18n.t('dashboard.title')}</h2>
+    <Button type="button" variant="outline" size="sm" aria-label={i18n.t('common.refresh')} onclick={() => void load()}>
+      <RefreshCw aria-hidden="true" class={loading ? 'svadmin-dashboard-view__spin' : undefined} />
+    </Button>
+  </header>
+  {#if loading}<div role="status"><Loader2 aria-hidden="true" /> {i18n.t('common.loading')}</div>
+  {:else if error}<div role="alert">{i18n.t(`dashboard.${error}`)}</div>
+  {:else if snapshot}
+    {#each snapshot.widgets.filter(widget => widget.kind === 'text') as widget (widget.id)}
+      <section aria-labelledby={`dashboard-widget-${widget.id}`}><h3 id={`dashboard-widget-${widget.id}`}>{widget.title}</h3><p>{widget.text}</p></section>
+    {/each}
+    <MetricStrip items={metricItems} ariaLabel={title ?? i18n.t('dashboard.metrics')} />
+  {:else}<div role="status">{i18n.t('dashboard.empty')}</div>{/if}
+</section>
+
+<style>
+  .svadmin-dashboard-view { display: grid; gap: 1rem; min-width: 0; }
+  .svadmin-dashboard-view__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+  :global(.svadmin-dashboard-view__spin) { animation: svadmin-dashboard-spin 1s linear infinite; }
+  @keyframes svadmin-dashboard-spin { to { transform: rotate(360deg); } }
+</style>

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

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+  import DateTimeInput, { type DateTimeInputMode } from './DateTimeInput.svelte';
+  import { cn } from '../utils.js';
+  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;
+    endName?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    startAriaLabel?: string;
+    endAriaLabel?: string;
+    class?: string;
+    onchange?: (value: DateRangeInputValue) => void;
+  }
+
+  let {
+    value = $bindable({ start: null, end: null }),
+    mode = 'date',
+    valueMode = 'civil',
+    timeZone,
+    disambiguation = 'reject',
+    min,
+    max,
+    step,
+    disabledDate,
+    presets = [],
+    startId,
+    endId,
+    startName,
+    endName,
+    disabled = false,
+    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 {
+    const result: DateRangeInputValue = { start: value?.start ?? null, end: value?.end ?? null, [part]: next };
+    value = result;
+    onchange?.(result);
+  }
+</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}
+    {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">{i18n.t('dateInput.to')}</span>
+  <DateTimeInput
+    value={value?.end ?? null}
+    {mode}
+    {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

@@ -0,0 +1,35 @@
+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;
+    endName?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    startAriaLabel?: string;
+    endAriaLabel?: string;
+    class?: string;
+    onchange?: (value: DateRangeInputValue) => void;
+}
+declare const DateRangeInput: import("svelte").Component<Props, {}, "value">;
+type DateRangeInput = ReturnType<typeof DateRangeInput>;
+export default DateRangeInput;

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

@@ -0,0 +1,134 @@
+<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';
+
+  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;
+  }
+
+  let {
+    value = $bindable(null),
+    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) || 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={instantMode ? undefined : name}
+    type={inputType}
+    bind:ref={inputRef}
+    value={draft}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {required}
+    aria-invalid={invalid || policyInvalid || undefined}
+    aria-describedby={describedby}
+    aria-label={ariaLabel}
+    oninput={handleInput}
+  />
+</div>

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

@@ -0,0 +1,27 @@
+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>;
+export default 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} />
@@ -241,8 +249,8 @@
   {#if visible}
     <div
       class="svadmin-u-7bc555991dba svadmin-u-189f036c335c svadmin-u-5a438c30beec svadmin-u-f50571addf44 svadmin-u-11863ecc32e7 svadmin-u-c69e21ff5804 svadmin-u-1301e5c1ce71 svadmin-u-ca6bcd4b6f3f svadmin-u-d5e98261a758 svadmin-u-cd0ad9a56558 svadmin-u-14e46609fd68 svadmin-u-1d5904e7e755 svadmin-u-2cd02d11d1af"
-      class:w-auto={collapsed}
-      class:min-w-[200px]={collapsed}
+      class:svadmin-devtools--collapsed-width={collapsed}
+      class:svadmin-devtools--collapsed-min-width={collapsed}
       transition:fly={{ y: 400, duration: 300 }}
     >
       <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-2ef11f1cb219 svadmin-u-65fdbade2025">