@svadmin/ui 0.78.2 → 0.80.0

package/dist/app.css

@@ -9551,6 +9551,191 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   max-width: 32rem;
 }
 
+/* --- Auditable content primitives --- */
+.svadmin-filter-bottom-sheet[data-slot="sheet"] {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline: 0;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: 85dvh;
+  overflow-y: auto;
+  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+.svadmin-filter-bottom-sheet .svadmin-sheet-close { min-width: 44px; min-height: 44px; }
+.svadmin-filter-bottom-sheet [data-slot="sheet-content"] { display: grid; gap: 1rem; }
+.layout-clean-flat [data-svadmin-audit-section],
+.layout-clean-flat [data-svadmin-chart-container],
+.layout-clean-flat [data-svadmin-evidence-card],
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  min-width: 0;
+}
+
+.layout-clean-flat [data-svadmin-audit-section] {
+  position: relative;
+  border-block: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+.layout-clean-flat [data-svadmin-audit-section]::before,
+.layout-clean-flat [data-svadmin-evidence-card]::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 4px;
+  background: var(--svadmin-accent-color, var(--primary));
+  content: "";
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="info"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="info"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="info"] {
+  --svadmin-accent-color: var(--info);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="success"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="success"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="success"] {
+  --svadmin-accent-color: var(--success);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="warning"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="warning"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="warning"] {
+  --svadmin-accent-color: var(--warning);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="danger"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="danger"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="danger"] {
+  --svadmin-accent-color: var(--destructive);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="neutral"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="neutral"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="neutral"] {
+  --svadmin-accent-color: var(--muted-foreground);
+}
+
+.svadmin-audit-section__header,
+.svadmin-chart-container__header,
+.svadmin-evidence-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.svadmin-audit-section__header {
+  padding: 1rem 1.25rem;
+  border-block-end: 1px solid var(--svadmin-border, var(--border));
+}
+
+.svadmin-audit-section__heading,
+.svadmin-chart-container__header > div {
+  min-width: 0;
+}
+
+.svadmin-audit-section__eyebrow {
+  margin: 0 0 0.25rem;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.svadmin-audit-section__header h2,
+.svadmin-chart-container__header h3,
+.svadmin-evidence-card__header h3 {
+  margin: 0;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.svadmin-audit-section__description,
+.svadmin-chart-container__header p,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  margin: 0.25rem 0 0;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.svadmin-audit-section__body {
+  min-width: 0;
+}
+
+.svadmin-audit-section__header,
+.svadmin-audit-section__body,
+.svadmin-evidence-card__header,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  overflow-wrap: anywhere;
+}
+.svadmin-audit-section__actions { flex-shrink: 0; max-width: 100%; }
+.svadmin-audit-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-inline-start: 4px solid var(--warning);
+  background: var(--muted);
+  font-size: 0.8125rem;
+}
+.svadmin-audit-notice[data-state="readonly"] { border-inline-start-color: var(--muted-foreground); }
+.svadmin-status-pill[data-slot="badge"] { border-radius: 999px; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
+.layout-clean-flat [data-svadmin-coverage-matrix]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.layout-clean-flat [data-svadmin-coverage-matrix] table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
+.layout-clean-flat [data-svadmin-coverage-matrix] caption { padding: 0.75rem; text-align: start; font-weight: 600; }
+.layout-clean-flat [data-svadmin-coverage-matrix] :is(th, td) { padding: 0.75rem; text-align: start; min-width: 9rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
+.layout-clean-flat [data-svadmin-coverage-matrix] thead { color: var(--muted-foreground); background: var(--muted); }
+.layout-clean-flat [data-svadmin-coverage-matrix] tbody th { border-inline-start: 4px solid var(--svadmin-accent-color, var(--border)); }
+.svadmin-evidence-card__header { flex-wrap: wrap; }
+@media (max-width: 767px) {
+  .svadmin-audit-section__header { flex-wrap: wrap; }
+  .svadmin-audit-section__actions a { display: inline-flex; align-items: center; min-height: 44px; }
+}
+
+.svadmin-chart-container__body {
+  min-width: 0;
+  padding: 1rem;
+}
+
+.layout-clean-flat [data-svadmin-evidence-card] {
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+  padding: 1rem 1rem 1rem 1.25rem;
+}
+
+.svadmin-evidence-card__body {
+  margin-top: 0.75rem;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.svadmin-evidence-card__source {
+  margin-top: 1rem;
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  overflow-x: auto;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+
 @media (min-width: 768px) {
   .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] {
     display: grid;
@@ -10108,7 +10293,8 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active::before {
-  content: none;
+  width: 4px;
+  content: "";
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active svg {

package/dist/app.theme.css

@@ -9551,6 +9551,191 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
   max-width: 32rem;
 }
 
+/* --- Auditable content primitives --- */
+.svadmin-filter-bottom-sheet[data-slot="sheet"] {
+  inset-block-start: auto;
+  inset-block-end: 0;
+  inset-inline: 0;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: 85dvh;
+  overflow-y: auto;
+  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+.svadmin-filter-bottom-sheet .svadmin-sheet-close { min-width: 44px; min-height: 44px; }
+.svadmin-filter-bottom-sheet [data-slot="sheet-content"] { display: grid; gap: 1rem; }
+.layout-clean-flat [data-svadmin-audit-section],
+.layout-clean-flat [data-svadmin-chart-container],
+.layout-clean-flat [data-svadmin-evidence-card],
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  min-width: 0;
+}
+
+.layout-clean-flat [data-svadmin-audit-section] {
+  position: relative;
+  border-block: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+.layout-clean-flat [data-svadmin-audit-section]::before,
+.layout-clean-flat [data-svadmin-evidence-card]::before {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 4px;
+  background: var(--svadmin-accent-color, var(--primary));
+  content: "";
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="info"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="info"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="info"] {
+  --svadmin-accent-color: var(--info);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="success"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="success"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="success"] {
+  --svadmin-accent-color: var(--success);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="warning"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="warning"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="warning"] {
+  --svadmin-accent-color: var(--warning);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="danger"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="danger"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="danger"] {
+  --svadmin-accent-color: var(--destructive);
+}
+
+.layout-clean-flat [data-svadmin-audit-section][data-accent="neutral"],
+.layout-clean-flat [data-svadmin-coverage-matrix] [data-accent="neutral"],
+.layout-clean-flat [data-svadmin-evidence-card][data-accent="neutral"] {
+  --svadmin-accent-color: var(--muted-foreground);
+}
+
+.svadmin-audit-section__header,
+.svadmin-chart-container__header,
+.svadmin-evidence-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.svadmin-audit-section__header {
+  padding: 1rem 1.25rem;
+  border-block-end: 1px solid var(--svadmin-border, var(--border));
+}
+
+.svadmin-audit-section__heading,
+.svadmin-chart-container__header > div {
+  min-width: 0;
+}
+
+.svadmin-audit-section__eyebrow {
+  margin: 0 0 0.25rem;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.svadmin-audit-section__header h2,
+.svadmin-chart-container__header h3,
+.svadmin-evidence-card__header h3 {
+  margin: 0;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.svadmin-audit-section__description,
+.svadmin-chart-container__header p,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  margin: 0.25rem 0 0;
+  color: var(--svadmin-text-muted, var(--muted-foreground));
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+
+.svadmin-audit-section__body {
+  min-width: 0;
+}
+
+.svadmin-audit-section__header,
+.svadmin-audit-section__body,
+.svadmin-evidence-card__header,
+.svadmin-evidence-card__description,
+.svadmin-evidence-card__source {
+  overflow-wrap: anywhere;
+}
+.svadmin-audit-section__actions { flex-shrink: 0; max-width: 100%; }
+.svadmin-audit-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-inline-start: 4px solid var(--warning);
+  background: var(--muted);
+  font-size: 0.8125rem;
+}
+.svadmin-audit-notice[data-state="readonly"] { border-inline-start-color: var(--muted-foreground); }
+.svadmin-status-pill[data-slot="badge"] { border-radius: 999px; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
+.layout-clean-flat [data-svadmin-coverage-matrix]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.layout-clean-flat [data-svadmin-coverage-matrix] table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
+.layout-clean-flat [data-svadmin-coverage-matrix] caption { padding: 0.75rem; text-align: start; font-weight: 600; }
+.layout-clean-flat [data-svadmin-coverage-matrix] :is(th, td) { padding: 0.75rem; text-align: start; min-width: 9rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--border); }
+.layout-clean-flat [data-svadmin-coverage-matrix] thead { color: var(--muted-foreground); background: var(--muted); }
+.layout-clean-flat [data-svadmin-coverage-matrix] tbody th { border-inline-start: 4px solid var(--svadmin-accent-color, var(--border)); }
+.svadmin-evidence-card__header { flex-wrap: wrap; }
+@media (max-width: 767px) {
+  .svadmin-audit-section__header { flex-wrap: wrap; }
+  .svadmin-audit-section__actions a { display: inline-flex; align-items: center; min-height: 44px; }
+}
+
+.svadmin-chart-container__body {
+  min-width: 0;
+  padding: 1rem;
+}
+
+.layout-clean-flat [data-svadmin-evidence-card] {
+  position: relative;
+  min-width: 0;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+  padding: 1rem 1rem 1rem 1.25rem;
+}
+
+.svadmin-evidence-card__body {
+  margin-top: 0.75rem;
+  color: var(--svadmin-text, var(--foreground));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.svadmin-evidence-card__source {
+  margin-top: 1rem;
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.layout-clean-flat [data-svadmin-coverage-matrix] {
+  overflow-x: auto;
+  border: 1px solid var(--svadmin-border, var(--border));
+  background: var(--svadmin-surface, var(--card));
+}
+
+
 @media (min-width: 768px) {
   .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] {
     display: grid;
@@ -10108,7 +10293,8 @@ details.svadmin-collapsible:not([open]) > :not(summary) {
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active::before {
-  content: none;
+  width: 4px;
+  content: "";
 }
 
 .layout-clean-flat[data-theme="stripe"] .sidebar-menu-item-active svg {

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/components/content/AuditContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { definedOptions } from '@svadmin/core/options';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import DataState from './DataState.svelte';
+  import { Button } from '../ui/button/index.js';
+  import { RefreshCw } from '@lucide/svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  let { state = 'ready', message, retry, children }: {
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+    children?: Snippet | undefined;
+  } = $props();
+  const i18n = useTranslation();
+</script>
+
+{#if state === 'loading' || state === 'empty' || state === 'error' || state === 'forbidden'}
+  <DataState {state} {...definedOptions({ title: message, retry: state === 'error' ? retry : undefined })} />
+{:else}
+  {#if state === 'partial' || state === 'readonly'}
+    <div class="svadmin-audit-notice" data-state={state} role="status">
+      <span>{message ?? (state === 'partial'
+        ? (i18n.locale === 'zh-CN' ? '部分数据暂不可用' : 'Some data is unavailable')
+        : (i18n.locale === 'zh-CN' ? '只读' : 'Read only'))}</span>
+      {#if state === 'partial' && retry}
+        <Button variant="outline" size="sm" onclick={retry}><RefreshCw size={16} aria-hidden="true" />{i18n.t('common.retry')}</Button>
+      {/if}
+    </div>
+  {/if}
+  {@render children?.()}
+{/if}

package/dist/components/content/AuditContent.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+type $$ComponentProps = {
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+    children?: Snippet | undefined;
+};
+declare const AuditContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type AuditContent = ReturnType<typeof AuditContent>;
+export default AuditContent;

package/dist/components/content/AuditSection.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AuditContent from './AuditContent.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  export type AuditAccent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+
+  interface Props {
+    title: string;
+    description?: string | undefined;
+    eyebrow?: string;
+    accent?: AuditAccent;
+    actions?: Snippet | undefined;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let {
+    title,
+    description,
+    eyebrow,
+    accent = 'primary',
+    actions,
+    children,
+    class: className = '',
+    state = 'ready',
+    message,
+    retry,
+  }: Props = $props();
+</script>
+
+<section aria-label={title} class={cn('svadmin-audit-section', className)} data-svadmin-audit-section data-accent={accent} data-state={state}>
+  <header class="svadmin-audit-section__header">
+    <div class="svadmin-audit-section__heading">
+      {#if eyebrow}<p class="svadmin-audit-section__eyebrow">{eyebrow}</p>{/if}
+      <h2>{title}</h2>
+      {#if description}<p class="svadmin-audit-section__description">{description}</p>{/if}
+    </div>
+    {#if actions && state !== 'forbidden'}<div class="svadmin-audit-section__actions">{@render actions()}</div>{/if}
+  </header>
+  <div class="svadmin-audit-section__body"><AuditContent {state} {message} {retry} {children} /></div>
+</section>

package/dist/components/content/AuditSection.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+export type AuditAccent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+interface Props {
+    title: string;
+    description?: string | undefined;
+    eyebrow?: string;
+    accent?: AuditAccent;
+    actions?: Snippet | undefined;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const AuditSection: import("svelte").Component<Props, {}, "">;
+type AuditSection = ReturnType<typeof AuditSection>;
+export default AuditSection;

package/dist/components/content/ChartContainer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import AuditSection from './AuditSection.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    children,
+    class: className = '',
+    state = 'ready',
+    message,
+    retry,
+  }: Props = $props();
+</script>
+
+<AuditSection {title} {description} {actions} {state} {message} {retry} accent="info" class={cn('svadmin-chart-container', className)}>
+  <div class="svadmin-chart-container__body">{@render children?.()}</div>
+</AuditSection>

package/dist/components/content/ChartContainer.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { AuditDataState } from './audit-state.js';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const ChartContainer: import("svelte").Component<Props, {}, "">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;

package/dist/components/content/CoverageMatrix.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import type { AuditAccent } from './AuditSection.svelte';
+  import AuditContent from './AuditContent.svelte';
+  import type { AuditDataState } from './audit-state.js';
+
+  export interface CoverageMatrixColumn {
+    key: string;
+    label: string;
+  }
+
+  export interface CoverageMatrixRow {
+    id: string;
+    title: string;
+    cells: Readonly<Record<string, string | undefined>>;
+    accent?: AuditAccent;
+  }
+
+  interface Props {
+    columns: readonly CoverageMatrixColumn[];
+    rows: readonly CoverageMatrixRow[];
+    class?: string;
+    caption: string;
+    rowLabel?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+  }
+
+  let { columns, rows, caption, rowLabel = '', state = 'ready', message, retry, class: className = '' }: Props = $props();
+</script>
+
+<AuditContent state={state === 'ready' && rows.length === 0 ? 'empty' : state} {message} {retry}>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex (命名滚动区域需要键盘访问。) -->
+  <div class={cn('svadmin-coverage-matrix', className)} data-svadmin-coverage-matrix role="region" aria-label={caption} tabindex="0">
+    <table>
+      <caption>{caption}</caption>
+      <thead><tr><th scope="col">{rowLabel}</th>{#each columns as column (column.key)}<th scope="col">{column.label}</th>{/each}</tr></thead>
+      <tbody>
+        {#each rows as row (row.id)}
+          <tr data-accent={row.accent ?? 'neutral'}>
+            <th scope="row">{row.title}</th>
+            {#each columns as column (column.key)}<td>{row.cells[column.key] ?? '—'}</td>{/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</AuditContent>

package/dist/components/content/CoverageMatrix.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AuditAccent } from './AuditSection.svelte';
+import type { AuditDataState } from './audit-state.js';
+export interface CoverageMatrixColumn {
+    key: string;
+    label: string;
+}
+export interface CoverageMatrixRow {
+    id: string;
+    title: string;
+    cells: Readonly<Record<string, string | undefined>>;
+    accent?: AuditAccent;
+}
+interface Props {
+    columns: readonly CoverageMatrixColumn[];
+    rows: readonly CoverageMatrixRow[];
+    class?: string;
+    caption: string;
+    rowLabel?: string;
+    state?: AuditDataState;
+    message?: string | undefined;
+    retry?: (() => void) | undefined;
+}
+declare const CoverageMatrix: import("svelte").Component<Props, {}, "">;
+type CoverageMatrix = ReturnType<typeof CoverageMatrix>;
+export default CoverageMatrix;

package/dist/components/content/EvidenceCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import StatusPill, { type StatusPillTone } from './StatusPill.svelte';
+
+  interface Props {
+    title: string;
+    status: string;
+    statusTone?: StatusPillTone;
+    description?: string;
+    source?: string;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title,
+    status,
+    statusTone = 'neutral',
+    description,
+    source,
+    children,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<article aria-label={title} class={cn('svadmin-evidence-card', className)} data-svadmin-evidence-card data-accent={statusTone}>
+  <div class="svadmin-evidence-card__header">
+    <h3>{title}</h3>
+    <StatusPill label={status} tone={statusTone} />
+  </div>
+  {#if description}<p class="svadmin-evidence-card__description">{description}</p>{/if}
+  {#if children}<div class="svadmin-evidence-card__body">{@render children()}</div>{/if}
+  {#if source}<p class="svadmin-evidence-card__source">{source}</p>{/if}
+</article>

package/dist/components/content/EvidenceCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import { type StatusPillTone } from './StatusPill.svelte';
+interface Props {
+    title: string;
+    status: string;
+    statusTone?: StatusPillTone;
+    description?: string;
+    source?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const EvidenceCard: import("svelte").Component<Props, {}, "">;
+type EvidenceCard = ReturnType<typeof EvidenceCard>;
+export default EvidenceCard;

package/dist/components/content/FilterToolbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import * as Sheet from '../ui/sheet/index.js';
   import { Search, X, SlidersHorizontal, ChevronDown, ChevronUp } from '@lucide/svelte';
   import { Button } from '../ui/button/index.js';
   import { Input } from '../ui/input/index.js';
@@ -40,6 +42,15 @@
 
   const isCompact = $derived(density === 'compact');
   const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
+  const i18n = useTranslation();
+  let mobile = $state(false);
+  onMount(() => {
+    const media = window.matchMedia('(max-width: 767px)');
+    const update = () => { mobile = media.matches; };
+    update();
+    media.addEventListener('change', update);
+    return () => media.removeEventListener('change', update);
+  });
 </script>
 
 <div class={cn('svadmin-filter-toolbar', className)} data-density={density} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
@@ -67,12 +78,12 @@
         {/if}
       </div>
     {/if}
-    {#if filters}
+    {#if filters && !mobile}
       <div class="svadmin-filter-toolbar__filters">
         {@render filters()}
       </div>
     {/if}
-    {#if advanced}
+    {#if advanced || (mobile && filters)}
       <Button
         variant={advancedOpen ? 'secondary' : 'outline'}
         size={isCompact ? 'sm' : 'default'}
@@ -101,7 +112,16 @@
       </div>
     {/if}
   </div>
-  {#if advanced && advancedOpen}
+  {#if mobile && (advanced || filters)}
+    <Sheet.Root bind:open={advancedOpen} class="svadmin-filter-bottom-sheet" role="dialog" aria-modal="true"
+      aria-label={advancedLabel} id={advancedPanelId} closeLabel={i18n.t('common.close')}>
+      <Sheet.Header><Sheet.Title>{advancedLabel}</Sheet.Title></Sheet.Header>
+      <Sheet.Content>
+        {@render filters?.()}
+        {@render advanced?.()}
+      </Sheet.Content>
+    </Sheet.Root>
+  {:else if advanced && advancedOpen}
     <div id={advancedPanelId} role="region" aria-label={advancedLabel} class="svadmin-filter-toolbar-advanced" aria-hidden="false">
       {@render advanced()}
     </div>

package/dist/components/content/FilterToolbar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 interface Props {
     query?: string;
     placeholder?: string;

package/dist/components/content/StatusPill.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import StatusBadge from './StatusBadge.svelte';
+
+  export type StatusPillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+
+  interface Props {
+    label: string;
+    tone?: StatusPillTone;
+    class?: string;
+  }
+
+  let { label, tone = 'neutral', class: className = '' }: Props = $props();
+</script>
+
+<StatusBadge status={tone} {label} class={cn('svadmin-status-pill', className)} />

package/dist/components/content/StatusPill.svelte.d.ts

@@ -0,0 +1,9 @@
+export type StatusPillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+interface Props {
+    label: string;
+    tone?: StatusPillTone;
+    class?: string;
+}
+declare const StatusPill: import("svelte").Component<Props, {}, "">;
+type StatusPill = ReturnType<typeof StatusPill>;
+export default StatusPill;

package/dist/components/content/audit-state.d.ts

@@ -0,0 +1 @@
+export type AuditDataState = 'ready' | 'loading' | 'empty' | 'partial' | 'error' | 'forbidden' | 'readonly';

package/dist/components/content/audit-state.js

@@ -0,0 +1 @@
+export {};

package/dist/components/content/index.d.ts

@@ -48,5 +48,14 @@ export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
 export type { TimelineItem } from './AuditTimeline.svelte';
+export { default as AuditSection } from './AuditSection.svelte';
+export type { AuditAccent } from './AuditSection.svelte';
+export type { AuditDataState } from './audit-state.js';
+export { default as ChartContainer } from './ChartContainer.svelte';
+export { default as CoverageMatrix } from './CoverageMatrix.svelte';
+export type { CoverageMatrixColumn, CoverageMatrixRow } from './CoverageMatrix.svelte';
+export { default as EvidenceCard } from './EvidenceCard.svelte';
+export { default as StatusPill } from './StatusPill.svelte';
+export type { StatusPillTone } from './StatusPill.svelte';
 export { default as MediaThumbnail } from './MediaThumbnail.svelte';
 export type { MediaThumbnailSize, MediaThumbnailFit } from './MediaThumbnail.svelte';

package/dist/components/content/index.js

@@ -33,4 +33,9 @@ export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
+export { default as AuditSection } from './AuditSection.svelte';
+export { default as ChartContainer } from './ChartContainer.svelte';
+export { default as CoverageMatrix } from './CoverageMatrix.svelte';
+export { default as EvidenceCard } from './EvidenceCard.svelte';
+export { default as StatusPill } from './StatusPill.svelte';
 export { default as MediaThumbnail } from './MediaThumbnail.svelte';

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';
@@ -330,6 +331,15 @@ export type { RowActionItem } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
 export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
 export type { TimelineItem } from './components/content/AuditTimeline.svelte';
+export { default as AuditSection } from './components/content/AuditSection.svelte';
+export type { AuditAccent } from './components/content/AuditSection.svelte';
+export type { AuditDataState } from './components/content/audit-state.js';
+export { default as ChartContainer } from './components/content/ChartContainer.svelte';
+export { default as CoverageMatrix } from './components/content/CoverageMatrix.svelte';
+export type { CoverageMatrixColumn, CoverageMatrixRow } from './components/content/CoverageMatrix.svelte';
+export { default as EvidenceCard } from './components/content/EvidenceCard.svelte';
+export { default as StatusPill } from './components/content/StatusPill.svelte';
+export type { StatusPillTone } from './components/content/StatusPill.svelte';
 export type { TagTone } from './components/fields/TagField.svelte';
 export type { BooleanTone } from './components/fields/BooleanField.svelte';
 export type { DateFieldFormat } from './components/fields/DateField.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';
@@ -279,6 +279,11 @@ export { referenceDemoData } from './reference-data.js';
 export { default as RowActions } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
 export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
+export { default as AuditSection } from './components/content/AuditSection.svelte';
+export { default as ChartContainer } from './components/content/ChartContainer.svelte';
+export { default as CoverageMatrix } from './components/content/CoverageMatrix.svelte';
+export { default as EvidenceCard } from './components/content/EvidenceCard.svelte';
+export { default as StatusPill } from './components/content/StatusPill.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as BatchActionBar } from './components/BatchActionBar.svelte';
 export { default as MediaThumbnail } from './components/content/MediaThumbnail.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.78.2",
+  "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",