@svadmin/ui 0.65.1 → 0.67.0

package/dist/app.css

@@ -573,57 +573,6 @@ main {
 /* ─── svadmin UI Components CSS ─────────────────────────────── */
 /* These rules were moved from .svelte files to eliminate <style> tags */
 
-/* MarkdownRenderer Styles */
-.prose {
-  line-height: 1.6;
-}
-.prose p {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-/* Streaming cursor effect */
-.streaming > *:last-child::after {
-  content: '▋';
-  display: inline-block;
-  animation: svadmin-blink 1s step-start infinite;
-  margin-left: 2px;
-  vertical-align: baseline;
-  color: currentColor;
-}
-
-@keyframes svadmin-blink {
-  50% { opacity: 0; }
-}
-
-/* Handle copied state for dynamically injected buttons.
- * The check icon itself is swapped in by MarkdownRenderer (createCheckIcon)
- * with stroke="currentColor" so it inherits this semantic token color. */
-.copy-btn[data-copied-id] {
-  color: var(--success);
-}
-
-/* ChatDialog Styles */
-.chat-markdown pre.chat-code-block {
-  background: var(--color-muted, hsl(var(--muted)));
-  border-radius: 0.5rem;
-  padding: 0.75rem;
-  margin: 0.5rem 0;
-  overflow-x: auto;
-  font-size: 0.75rem;
-  line-height: 1.5;
-}
-.chat-markdown code.chat-inline-code {
-  background: var(--color-muted, hsl(var(--muted)));
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-size: 0.8125em;
-  font-family: ui-monospace, monospace;
-}
-.chat-markdown strong {
-  font-weight: 600;
-}
-
 /* Collapsible details normalization stays scoped to svadmin-owned hooks. */
 details[data-svadmin-filter]:not([open]) > :not(summary),
 details.svadmin-collapsible-filter:not([open]) > :not(summary),

package/dist/app.theme.css

@@ -572,57 +572,6 @@ main {
 /* ─── svadmin UI Components CSS ─────────────────────────────── */
 /* These rules were moved from .svelte files to eliminate <style> tags */
 
-/* MarkdownRenderer Styles */
-.prose {
-  line-height: 1.6;
-}
-.prose p {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-/* Streaming cursor effect */
-.streaming > *:last-child::after {
-  content: '▋';
-  display: inline-block;
-  animation: svadmin-blink 1s step-start infinite;
-  margin-left: 2px;
-  vertical-align: baseline;
-  color: currentColor;
-}
-
-@keyframes svadmin-blink {
-  50% { opacity: 0; }
-}
-
-/* Handle copied state for dynamically injected buttons.
- * The check icon itself is swapped in by MarkdownRenderer (createCheckIcon)
- * with stroke="currentColor" so it inherits this semantic token color. */
-.copy-btn[data-copied-id] {
-  color: var(--success);
-}
-
-/* ChatDialog Styles */
-.chat-markdown pre.chat-code-block {
-  background: var(--color-muted, hsl(var(--muted)));
-  border-radius: 0.5rem;
-  padding: 0.75rem;
-  margin: 0.5rem 0;
-  overflow-x: auto;
-  font-size: 0.75rem;
-  line-height: 1.5;
-}
-.chat-markdown code.chat-inline-code {
-  background: var(--color-muted, hsl(var(--muted)));
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-size: 0.8125em;
-  font-family: ui-monospace, monospace;
-}
-.chat-markdown strong {
-  font-weight: 600;
-}
-
 /* Collapsible details normalization stays scoped to svadmin-owned hooks. */
 details[data-svadmin-filter]:not([open]) > :not(summary),
 details.svadmin-collapsible-filter:not([open]) > :not(summary),

package/dist/components/AdminApp.svelte

@@ -56,7 +56,7 @@
   import { useTranslation } from '@svadmin/core/i18n';
   import { QueryClient, QueryClientProvider, type DefaultOptions } from '@tanstack/svelte-query';
   import { setComponentRegistry, type ComponentRegistry } from '../component-registry.svelte.js';
-  import Layout from './Layout.svelte';
+  import Layout, { type LayoutAIAssistantProps } from './Layout.svelte';
   import AutoTable from './AutoTable.svelte';
   import AutoForm from './AutoForm.svelte';
   import ShowPage from './ShowPage.svelte';
@@ -114,6 +114,8 @@
     /** Theme configuration for dark-first mode, CSS overrides, etc. */
     themeConfig?: ThemeConfig;
     dashboard?: Snippet;
+    /** Optional AI assistant rendered by Layout. Keep AI UI in @svadmin/ai-elements. */
+    aiAssistant?: Snippet<[LayoutAIAssistantProps]>;
     loginPage?: Snippet;
     /** Prefill and display credentials on the default login page, useful for demos/examples. */
     loginDefaults?: {
@@ -169,6 +171,7 @@
     defaultTheme,
     themeConfig: userThemeConfig,
     dashboard,
+    aiAssistant,
     loginPage,
     loginDefaults,
     components: userComponents,
@@ -548,7 +551,7 @@
       <ErrorComp status={standaloneErrorStatus} />
     </SystemPageShell>
   {:else if isAuthenticated || !resolvedAuthProvider}
-    <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
+    <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode} {aiAssistant}>
       <div class="relative min-h-40" aria-busy={authRechecking}>
         {#if authRechecking}
           <div class="absolute inset-0 z-10 flex min-h-40 items-center justify-center bg-background/80" role="status" aria-live="polite">

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

@@ -3,6 +3,7 @@ import { type Component, type Snippet } from 'svelte';
 import type { AccessControlProvider, AgentProvider, AuditLogProvider, AuthProvider, ChatProvider, CredentialProvider, DataProviderInput, IdentityGovernanceProvider, I18nProvider, LiveProvider, MenuItem, NotificationProvider, OrganizationProvider, ResourceDefinition, RouterProvider, SessionProvider, TaskProvider, TenantAdapter, TenantContext, ThemeConfig, ThemeMode } from '@svadmin/core';
 import { QueryClient, type DefaultOptions } from '@tanstack/svelte-query';
 import { type ComponentRegistry } from '../component-registry.svelte.js';
+import { type LayoutAIAssistantProps } from './Layout.svelte';
 import type { AdminProviderBundle } from '../types.js';
 interface Props {
     /** Single provider, or named providers such as `{ default, analytics }`. */
@@ -37,6 +38,8 @@ interface Props {
     /** Theme configuration for dark-first mode, CSS overrides, etc. */
     themeConfig?: ThemeConfig;
     dashboard?: Snippet;
+    /** Optional AI assistant rendered by Layout. Keep AI UI in @svadmin/ai-elements. */
+    aiAssistant?: Snippet<[LayoutAIAssistantProps]>;
     loginPage?: Snippet;
     /** Prefill and display credentials on the default login page, useful for demos/examples. */
     loginDefaults?: {

package/dist/components/CommandPalette.svelte

@@ -20,7 +20,9 @@
   let searchValue = $state('');
 
   const resources = $derived(getResources());
-  const hasAI = $derived(!!(adminContext.agentProvider || adminContext.chatProvider));
+  const hasAI = $derived(
+    !!(adminContext.agentProvider || adminContext.chatProvider) && typeof onAskAI === 'function',
+  );
 
   function close() {
     open = false;

package/dist/components/Layout.svelte

@@ -1,3 +1,11 @@
+<script module lang="ts">
+  export interface LayoutAIAssistantProps {
+    docked: boolean;
+    scope: string;
+    ownerScope: string;
+  }
+</script>
+
 <script lang="ts">
 /* eslint-disable svelte/no-useless-children-snippet */
   import type { Snippet } from 'svelte';
@@ -6,7 +14,6 @@
   import Header from './Header.svelte';
   import CommandPalette from './CommandPalette.svelte';
   import KeyboardShortcuts from './KeyboardShortcuts.svelte';
-  import ChatDialog from './ChatDialog.svelte';
   import DevTools from './DevTools.svelte';
   import { useTranslation } from '@svadmin/core/i18n';
 
@@ -25,7 +32,7 @@
   let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto' }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto' } = $props();
+  let { children, title = 'Admin', menu, siteUrl, routeMode = 'auto', aiAssistant }: { children: Snippet; title?: string; menu?: MenuItem[]; siteUrl?: string; routeMode?: 'hash' | 'path' | 'auto'; aiAssistant?: Snippet<[LayoutAIAssistantProps]> } = $props();
   const layoutId = $props.id();
   const layoutScope = `svadmin-layout-${layoutId}`;
   const mainContentId = `${layoutScope}-main`;
@@ -73,6 +80,13 @@
     document.getElementById(mainContentId)?.focus();
   }
 
+  function handleAskAI(query: string) {
+    if (!aiAssistant || typeof window === 'undefined') return;
+    window.dispatchEvent(new CustomEvent('svadmin:ask-ai', {
+      detail: { query, scope: chatScope },
+    }));
+  }
+
   let collapsed = $state(false);
 
   // Swipe gesture for mobile menu
@@ -235,19 +249,13 @@
 
       <footer class="flex min-h-14 shrink-0 items-center justify-end gap-2 border-t border-border/60 bg-background px-4 empty:hidden">
         <DevTools docked />
-        <ChatDialog docked scope={chatScope} ownerScope={layoutScope} />
+        {@render aiAssistant?.({ docked: true, scope: chatScope, ownerScope: layoutScope })}
       </footer>
     </div>
   </div>
-  <CommandPalette 
-    bind:open={commandOpen} 
-    onAskAI={(q) => {
-      if (typeof window !== 'undefined') {
-        window.dispatchEvent(new CustomEvent('svadmin:ask-ai', {
-          detail: { query: q, scope: chatScope },
-        }));
-      }
-    }}
+  <CommandPalette
+    bind:open={commandOpen}
+    onAskAI={aiAssistant ? handleAskAI : undefined}
   />
   <KeyboardShortcuts bind:open={shortcutsOpen} />
 {/if}

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

@@ -1,3 +1,8 @@
+export interface LayoutAIAssistantProps {
+    docked: boolean;
+    scope: string;
+    ownerScope: string;
+}
 import type { Snippet } from 'svelte';
 import type { MenuItem } from '@svadmin/core';
 type $$ComponentProps = {
@@ -6,6 +11,7 @@ type $$ComponentProps = {
     menu?: MenuItem[];
     siteUrl?: string;
     routeMode?: 'hash' | 'path' | 'auto';
+    aiAssistant?: Snippet<[LayoutAIAssistantProps]>;
 };
 declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Layout = ReturnType<typeof Layout>;

package/dist/components/MetricStrip.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { Skeleton } from './ui/skeleton/index.js';
+  import { cn } from '../utils.js';
+  import type { Snippet } from 'svelte';
+
+  export type MetricTone = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+  export interface MetricStripItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    tone?: MetricTone;
+    badge?: {
+      text: string;
+      tone?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+    };
+    icon?: import('svelte').Component<{ class?: string }>;
+    href?: string;
+    trend?: {
+      value: number;
+      label?: string;
+    };
+    loading?: boolean;
+    class?: string;
+  }
+
+  interface Props {
+    items?: MetricStripItem[];
+    columns?: 2 | 3 | 4 | 5 | 6 | 'auto';
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    items = [],
+    columns = 'auto',
+    ariaLabel = 'Metrics overview',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const columnClassMap = {
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-4',
+    5: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5',
+    6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+    auto: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
+  };
+
+  const toneValueColorMap: Record<MetricTone, string> = {
+    default: 'text-foreground',
+    primary: 'text-primary',
+    success: 'text-success',
+    warning: 'text-warning',
+    danger: 'text-destructive',
+    info: 'text-info',
+  };
+
+  const badgeToneMap: Record<
+    NonNullable<NonNullable<MetricStripItem['badge']>['tone']>,
+    string
+  > = {
+    default: 'bg-muted text-muted-foreground border-border',
+    success: 'bg-success/10 text-success border-success/20',
+    warning: 'bg-warning/10 text-warning border-warning/20',
+    danger: 'bg-destructive/10 text-destructive border-destructive/20',
+    info: 'bg-info/10 text-info border-info/20',
+  };
+</script>
+
+<div
+  role="region"
+  aria-label={ariaLabel}
+  class={cn(
+    'grid gap-px overflow-hidden rounded-lg border border-border bg-border shadow-xs',
+    columnClassMap[columns] || columnClassMap.auto,
+    className
+  )}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each items as item, index (item.id || index)}
+      {@const isInteractive = Boolean(item.href)}
+      <svelte:element
+        this={isInteractive ? 'a' : 'div'}
+        href={item.href}
+        class={cn(
+          'group relative flex flex-col justify-between gap-1 bg-card p-3.5 text-left transition-colors duration-150 sm:p-4',
+          isInteractive && 'cursor-pointer text-inherit no-underline hover:bg-muted/40',
+          item.class
+        )}
+      >
+        <div class="flex items-center justify-between gap-2">
+          <span class="truncate text-xs font-semibold text-muted-foreground">{item.label}</span>
+          {#if item.icon}
+            <span class="shrink-0 text-muted-foreground/70">
+              <item.icon class="h-3.5 w-3.5" />
+            </span>
+          {/if}
+        </div>
+
+        {#if item.loading}
+          <div class="mt-1 flex items-center justify-between">
+            <Skeleton class="h-6 w-16" />
+          </div>
+        {:else}
+          <div class="mt-0.5 flex items-baseline justify-between gap-2">
+            <strong
+              class={cn(
+                'text-xl font-bold tracking-tight tabular-nums sm:text-2xl',
+                toneValueColorMap[item.tone || 'default']
+              )}
+            >
+              {item.value}
+            </strong>
+
+            {#if item.badge}
+              <span
+                class={cn(
+                  'inline-flex items-center rounded-full border px-1.5 py-0.5 text-[11px] font-semibold',
+                  badgeToneMap[item.badge.tone || 'default']
+                )}
+              >
+                {item.badge.text}
+              </span>
+            {:else if item.trend}
+              <span
+                class={cn(
+                  'inline-flex items-center gap-0.5 text-xs font-medium tabular-nums',
+                  item.trend.value >= 0 ? 'text-success' : 'text-destructive'
+                )}
+                aria-label="{item.trend.value >= 0 ? '上升' : '下降'} {Math.abs(item.trend.value)}%"
+              >
+                <span aria-hidden="true">{item.trend.value >= 0 ? '↑' : '↓'}</span>
+                <span>{Math.abs(item.trend.value)}%</span>
+                {#if item.trend.label}
+                  <span class="ml-0.5 text-muted-foreground">{item.trend.label}</span>
+                {/if}
+              </span>
+            {/if}
+          </div>
+        {/if}
+      </svelte:element>
+    {/each}
+  {/if}
+</div>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+export type MetricTone = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface MetricStripItem {
+    id?: string;
+    label: string;
+    value: string | number;
+    tone?: MetricTone;
+    badge?: {
+        text: string;
+        tone?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+    };
+    icon?: import('svelte').Component<{
+        class?: string;
+    }>;
+    href?: string;
+    trend?: {
+        value: number;
+        label?: string;
+    };
+    loading?: boolean;
+    class?: string;
+}
+interface Props {
+    items?: MetricStripItem[];
+    columns?: 2 | 3 | 4 | 5 | 6 | 'auto';
+    ariaLabel?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const MetricStrip: import("svelte").Component<Props, {}, "">;
+type MetricStrip = ReturnType<typeof MetricStrip>;
+export default MetricStrip;

package/dist/components/ui/badge/badge.svelte

@@ -8,6 +8,11 @@
 				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
 				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15",
+				"subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15",
+				"subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15",
+				"subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15",
+				"subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium",
 				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
 				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
 				link: "text-primary underline-offset-4 hover:underline",

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

@@ -4,6 +4,11 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
         destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
+        subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15";
+        "subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15";
+        "subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15";
+        "subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15";
+        "subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium";
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground";
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
         link: "text-primary underline-offset-4 hover:underline";
@@ -13,6 +18,11 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
         destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
+        subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15";
+        "subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15";
+        "subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15";
+        "subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15";
+        "subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium";
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground";
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
         link: "text-primary underline-offset-4 hover:underline";
@@ -22,6 +32,11 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
         secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
         destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
+        subtle: "bg-primary/10 text-primary border-primary/20 [a]:hover:bg-primary/15";
+        "subtle-success": "bg-success/10 text-success border-success/20 [a]:hover:bg-success/15";
+        "subtle-warning": "bg-warning/10 text-warning border-warning/20 [a]:hover:bg-warning/15";
+        "subtle-destructive": "bg-destructive/10 text-destructive border-destructive/20 [a]:hover:bg-destructive/15";
+        "subtle-pill": "rounded-full bg-muted/70 text-muted-foreground border-border/80 font-medium";
         outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground";
         ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
         link: "text-primary underline-offset-4 hover:underline";

package/dist/components/ui/table/table-cell.svelte

@@ -4,19 +4,31 @@
 	import type { HTMLTdAttributes } from "svelte/elements";
 	import type { TableDensity } from "./table.svelte";
 
+	type Props = WithElementRef<HTMLTdAttributes, HTMLTableCellElement> & {
+		sticky?: "left" | "right" | boolean;
+	};
+
 	let {
 		ref = $bindable(null),
+		sticky = false,
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTdAttributes, HTMLTableCellElement> = $props();
+	}: Props = $props();
 
 	const getDensity = getContext<() => TableDensity>("svadmin-table-density");
 	const densityClass = $derived(getDensity?.() === "compact"
 		? "h-8 px-2 py-1 text-xs"
 		: "p-2");
+	const stickyClass = $derived(
+		sticky === "right" || sticky === true
+			? "sticky right-0 z-10 bg-background shadow-[-1px_0_0_var(--border)] group-hover/row:bg-muted/50 group-data-[state=selected]/row:bg-muted"
+			: sticky === "left"
+			? "sticky left-0 z-10 bg-background shadow-[1px_0_0_var(--border)] group-hover/row:bg-muted/50 group-data-[state=selected]/row:bg-muted"
+			: ""
+	);
 </script>
 
-<td bind:this={ref} data-slot="table-cell" class={cn("align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, className)} {...restProps}>
+<td bind:this={ref} data-slot="table-cell" data-sticky={sticky ? (typeof sticky === "string" ? sticky : "right") : undefined} class={cn("align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, stickyClass, className)} {...restProps}>
 	{@render children?.()}
 </td>

package/dist/components/ui/table/table-cell.svelte.d.ts

@@ -1,5 +1,8 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLTdAttributes } from "svelte/elements";
-declare const TableCell: import("svelte").Component<WithElementRef<HTMLTdAttributes, HTMLTableCellElement>, {}, "ref">;
+type Props = WithElementRef<HTMLTdAttributes, HTMLTableCellElement> & {
+    sticky?: "left" | "right" | boolean;
+};
+declare const TableCell: import("svelte").Component<Props, {}, "ref">;
 type TableCell = ReturnType<typeof TableCell>;
 export default TableCell;

package/dist/components/ui/table/table-head.svelte

@@ -4,19 +4,31 @@
 	import type { HTMLThAttributes } from "svelte/elements";
 	import type { TableDensity } from "./table.svelte";
 
+	type Props = WithElementRef<HTMLThAttributes, HTMLTableCellElement> & {
+		sticky?: "left" | "right" | boolean;
+	};
+
 	let {
 		ref = $bindable(null),
+		sticky = false,
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLThAttributes, HTMLTableCellElement> = $props();
+	}: Props = $props();
 
 	const getDensity = getContext<() => TableDensity>("svadmin-table-density");
 	const densityClass = $derived(getDensity?.() === "compact"
 		? "h-8 px-2 py-1 text-xs"
 		: "h-9 px-2");
+	const stickyClass = $derived(
+		sticky === "right" || sticky === true
+			? "sticky right-0 z-20 bg-background shadow-[-1px_0_0_var(--border)]"
+			: sticky === "left"
+			? "sticky left-0 z-20 bg-background shadow-[1px_0_0_var(--border)]"
+			: ""
+	);
 </script>
 
-<th bind:this={ref} data-slot="table-head" class={cn("text-foreground text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, className)} {...restProps}>
+<th bind:this={ref} data-slot="table-head" data-sticky={sticky ? (typeof sticky === "string" ? sticky : "right") : undefined} class={cn("text-foreground text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, stickyClass, className)} {...restProps}>
 	{@render children?.()}
 </th>

package/dist/components/ui/table/table-head.svelte.d.ts

@@ -1,5 +1,8 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLThAttributes } from "svelte/elements";
-declare const TableHead: import("svelte").Component<WithElementRef<HTMLThAttributes, HTMLTableCellElement>, {}, "ref">;
+type Props = WithElementRef<HTMLThAttributes, HTMLTableCellElement> & {
+    sticky?: "left" | "right" | boolean;
+};
+declare const TableHead: import("svelte").Component<Props, {}, "ref">;
 type TableHead = ReturnType<typeof TableHead>;
 export default TableHead;

package/dist/components/ui/table/table-row.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
-<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors", className)} {...restProps}>
+<tr bind:this={ref} data-slot="table-row" class={cn("group/row hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors", className)} {...restProps}>
 	{@render children?.()}
 </tr>

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { default as ShowPage } from './components/ShowPage.svelte';
 export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
 export { default as Sidebar } from './components/Sidebar.svelte';
 export { default as Layout } from './components/Layout.svelte';
+export type { LayoutAIAssistantProps } from './components/Layout.svelte';
 export { default as Header } from './components/Header.svelte';
 export { default as SvadminLogo } from './components/SvadminLogo.svelte';
 export { default as ErrorBoundary } from './components/ErrorBoundary.svelte';
@@ -13,6 +14,8 @@ export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
 export { default as FieldRenderer } from './components/FieldRenderer.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as StatsCard } from './components/StatsCard.svelte';
+export { default as MetricStrip } from './components/MetricStrip.svelte';
+export type { MetricStripItem, MetricTone } from './components/MetricStrip.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
@@ -117,14 +120,7 @@ export type { PendingMutation } from './components/OfflineSyncBanner.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
-export { default as ChatDialog } from "./components/ChatDialog.svelte";
-export { default as MarkdownRenderer } from "./components/MarkdownRenderer.svelte";
-export { default as SmartSuggest } from "./components/SmartSuggest.svelte";
-export { default as AICommandBar } from "./components/AICommandBar.svelte";
-export { default as CopilotPanel } from "./components/CopilotPanel.svelte";
-export { default as InsightCard } from "./components/InsightCard.svelte";
 export { default as AnomalyBadge } from "./components/AnomalyBadge.svelte";
-export { default as VoiceInput } from "./components/VoiceInput.svelte";
 export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
 export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
 export { default as InlineEdit } from "./components/InlineEdit.svelte";

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
 export { default as FieldRenderer } from './components/FieldRenderer.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as StatsCard } from './components/StatsCard.svelte';
+export { default as MetricStrip } from './components/MetricStrip.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ResourceOperationsPage } from './components/ResourceOperationsPage.svelte';
 export { default as RecordDetailDrawer } from './components/RecordDetailDrawer.svelte';
@@ -94,14 +95,7 @@ export { default as OfflineSyncBanner } from './components/OfflineSyncBanner.sve
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
-export { default as ChatDialog } from "./components/ChatDialog.svelte";
-export { default as MarkdownRenderer } from "./components/MarkdownRenderer.svelte";
-export { default as SmartSuggest } from "./components/SmartSuggest.svelte";
-export { default as AICommandBar } from "./components/AICommandBar.svelte";
-export { default as CopilotPanel } from "./components/CopilotPanel.svelte";
-export { default as InsightCard } from "./components/InsightCard.svelte";
 export { default as AnomalyBadge } from "./components/AnomalyBadge.svelte";
-export { default as VoiceInput } from "./components/VoiceInput.svelte";
 export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
 export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
 export { default as InlineEdit } from "./components/InlineEdit.svelte";