@svadmin/ui 0.19.0 → 0.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -30,7 +30,8 @@
     "marked": "^15.0.0",
     "marked-highlight": "^2.2.0",
     "highlight.js": "^11.0.0",
-    "isomorphic-dompurify": "^2.0.0"
+    "isomorphic-dompurify": "^2.0.0",
+    "@svadmin/editor": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "marked": {
@@ -44,6 +45,9 @@
     },
     "isomorphic-dompurify": {
       "optional": true
+    },
+    "@svadmin/editor": {
+      "optional": true
     }
   },
   "dependencies": {

package/src/components/AuditLogViewer.svelte

@@ -103,7 +103,7 @@
     </div>
 
     <!-- Table -->
-    <div class="flex-1 border rounded-lg bg-card overflow-hidden">
+    <div class="flex-1 shadow-sm ring-1 ring-border/10 rounded-lg bg-card overflow-hidden">
       {#if loading}
         <div class="flex items-center justify-center h-48 text-muted-foreground">
           <Loader2 class="h-5 w-5 animate-spin mr-2" />
@@ -124,7 +124,7 @@
             </Table.Header>
             <Table.Body>
               {#each filteredLogs as log}
-                <Table.Row class="hover:bg-muted/50 transition-colors">
+                <Table.Row class="border-0 even:bg-muted/20 hover:bg-muted/40 transition-colors">
                   <Table.Cell class="text-xs text-muted-foreground font-mono">
                     {formatDate(log.createdAt)}
                   </Table.Cell>
@@ -188,7 +188,7 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div class="bg-card shadow-2xl w-full max-w-2xl h-full flex flex-col animate-in slide-in-from-right duration-300" onclick={(e) => e.stopPropagation()}>
       <!-- Drawer Header -->
-      <div class="p-6 border-b border-border flex items-center justify-between bg-muted/30">
+      <div class="p-6 shadow-[0_1px_0_rgba(0,0,0,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)] flex items-center justify-between bg-muted/30">
         <div>
           <h2 class="text-lg font-bold text-foreground flex items-center gap-2">
             <FileSearch class="h-5 w-5 text-primary" />
@@ -202,7 +202,7 @@
       </div>
 
       <!-- Meta Tags -->
-      <div class="px-6 py-3 border-b border-border flex items-center gap-2 flex-wrap">
+      <div class="px-6 py-3 shadow-[0_1px_0_rgba(0,0,0,0.05)] dark:shadow-[0_1px_0_rgba(255,255,255,0.05)] flex items-center gap-2 flex-wrap">
         <Badge variant="outline">{drawerLog.action}</Badge>
         {#if drawerLog.resource}
           <Badge variant="secondary">{drawerLog.resource}</Badge>
@@ -218,7 +218,7 @@
       </div>
 
       <!-- Footer -->
-      <div class="p-4 border-t border-border bg-muted/20 text-right text-[11px] text-muted-foreground font-medium">
+      <div class="p-4 shadow-[0_-1px_0_rgba(0,0,0,0.05)] dark:shadow-[0_-1px_0_rgba(255,255,255,0.05)] bg-muted/20 text-right text-[11px] text-muted-foreground font-medium">
         System audit snapshot · Read-only
       </div>
     </div>

package/src/components/AutoForm.svelte

@@ -139,7 +139,7 @@
 
   {#if form.loading}
     <div class="max-w-3xl space-y-6">
-      <div class="rounded-lg border p-6 space-y-5">
+      <div class="rounded-lg shadow-sm ring-1 ring-border/10 p-6 space-y-5">
         {#each Array(4) as _}
           <div class="space-y-2">
             <Skeleton class="h-4 w-24" />
@@ -159,7 +159,7 @@
 
       {#if hasGroups}
         {#each groups as group}
-          <Card.Root>
+          <Card.Root class="border-border/40 shadow-sm">
             {#if group.name}
               <Card.Header>
                 <Card.Title class="text-lg">{group.name}</Card.Title>
@@ -186,7 +186,7 @@
           </Card.Root>
         {/each}
       {:else}
-        <Card.Root>
+        <Card.Root class="border-border/40 shadow-sm">
           <Card.Content class="space-y-5 px-4 sm:px-6 pb-4 sm:pb-6 pt-0">
             {#each formFields as field (field.key)}
               <div class:border-destructive={!!form.errors[field.key]}>

package/src/components/AutoTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
+  import { cn } from '../utils.js';
   import {
     createTable,
     getCoreRowModel,
@@ -36,6 +37,7 @@
   import ConfirmDialog from './ConfirmDialog.svelte';
   import TooltipButton from './TooltipButton.svelte';
   import InlineEdit from './InlineEdit.svelte';
+  import DraggableHeader from './DraggableHeader.svelte';
   import type { Snippet } from 'svelte';
 
   // ─── Props with Snippet composability ─────────────────────────
@@ -445,7 +447,7 @@
   {/if}
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-lg bg-card shadow-sm overflow-hidden" role="region" aria-label="{resource.label} {t('common.list')}">
+  <div class="rounded-lg bg-card shadow-sm ring-1 ring-border/10 overflow-hidden" role="region" aria-label="{resource.label} {t('common.list')}">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -523,7 +525,7 @@
               <ContextMenu.Root>
                 <ContextMenu.Trigger>
                   {#snippet child({ props })}
-                    <Table.Row {...props} class="transition-colors {row.getIsSelected() ? 'bg-accent' : ''}">
+                    <Table.Row {...props} class="transition-colors border-0 even:bg-muted/20 {row.getIsSelected() ? 'bg-accent/50' : 'hover:bg-muted/40'}">
                       {#each row.getVisibleCells() as cell}
                         <Table.Cell>
                           {#if cell.column.id === '_select'}
@@ -652,7 +654,7 @@
             {@const record = row.original}
             {@const id = record[primaryKey] as string | number}
             <div
-              class="rounded-xl border bg-card p-4 shadow-sm transition-colors {row.getIsSelected() ? 'ring-2 ring-primary bg-accent/30' : ''}"
+              class="rounded-xl shadow-sm ring-1 ring-border/10 bg-card p-4 transition-colors {row.getIsSelected() ? 'ring-2 ring-primary bg-accent/30' : ''}"
             >
               <!-- Card header: ID + select + actions -->
               <div class="flex items-center justify-between mb-3">

package/src/components/ChatDialog.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { getChatProvider, getChatContext, setChatContext } from '@svadmin/core';
-  import type { ChatMessage, ChatAction } from '@svadmin/core';
+  import { getChatProvider, getChatContext, setChatContext, getAgentProvider, registerApproval, resolveApproval } from '@svadmin/core';
+  import type { ChatMessage, ChatAction, AgentEvent } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { useParsed } from '@svadmin/core';
   import { fly, fade, scale } from 'svelte/transition';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
-  import { MessageCircle, X, Minus, Send, Loader2, Bot, Trash2 } from 'lucide-svelte';
+  import { MessageCircle, X, Minus, Send, Loader2, Bot, Trash2, ShieldCheck, ShieldX, Wrench, LayoutDashboard } from 'lucide-svelte';
 
   interface Props {
     /** localStorage key for chat history persistence. Set to '' to disable. */
@@ -37,8 +37,12 @@
   let initialized = $state(false);
 
   const provider = $derived(getChatProvider());
+  const agent = $derived(getAgentProvider());
   const parsed = useParsed();
 
+  /** Track pending approval requests for UI rendering */
+  let pendingApprovalIds = $state<string[]>([]);
+
   // ─── Auto-update ChatContext from current route ─────────────
   $effect(() => {
     setChatContext({
@@ -125,7 +129,7 @@
   }
 
   async function sendMessage() {
-    if (!inputValue.trim() || isStreaming || !provider) return;
+    if (!inputValue.trim() || isStreaming || (!provider && !agent)) return;
 
     const userMsg: ChatMessage = {
       id: genId(),
@@ -157,24 +161,93 @@
       const allMessages = messages.filter((m) => m.content);
       const messagesToSend = contextMsg ? [contextMsg, ...allMessages] : allMessages;
 
-      const result = provider.sendMessage(
-        messagesToSend,
-        { signal: abortController.signal },
-      );
-
-      if (result && typeof result === 'object' && Symbol.asyncIterator in result) {
-        // Streaming response
-        for await (const chunk of result as AsyncGenerator<string>) {
-          assistantMsg.content += chunk;
+      if (agent) {
+        // ─── AgentProvider path: typed event stream ─────────
+        const stream = agent.chat(messagesToSend, {
+          signal: abortController.signal,
+          context: getChatContext(),
+        });
+
+        const collectedActions: ChatAction[] = [];
+
+        for await (const event of stream) {
+          switch (event.type) {
+            case 'text':
+              assistantMsg.content += event.content;
+              messages = [...messages.slice(0, -1), { ...assistantMsg }];
+              scrollToBottom();
+              break;
+
+            case 'tool_call':
+              assistantMsg.content += `\n🔧 *${event.tool}*(${JSON.stringify(event.args)})`;
+              messages = [...messages.slice(0, -1), { ...assistantMsg }];
+              scrollToBottom();
+              break;
+
+            case 'tool_result':
+              if (event.result.success) {
+                assistantMsg.content += `\n✅ ${event.tool} completed`;
+              } else {
+                assistantMsg.content += `\n❌ ${event.tool} failed: ${event.result.error ?? 'Unknown error'}`;
+              }
+              messages = [...messages.slice(0, -1), { ...assistantMsg }];
+              scrollToBottom();
+              break;
+
+            case 'approval_request': {
+              // Register in the core approval system
+              const reqId = event.id;
+              pendingApprovalIds = [...pendingApprovalIds, reqId];
+
+              collectedActions.push(
+                {
+                  label: `✅ ${t('common.confirm') || 'Approve'}: ${event.description}`,
+                  variant: 'default',
+                  payload: { approvalId: reqId, approved: true },
+                },
+                {
+                  label: `❌ ${t('common.cancel') || 'Reject'}`,
+                  variant: 'destructive',
+                  payload: { approvalId: reqId, approved: false },
+                },
+              );
+
+              assistantMsg.content += `\n⚠️ **${t('chat.approvalRequired') || 'Approval required'}**: ${event.description}`;
+              assistantMsg.actions = [...collectedActions];
+              messages = [...messages.slice(0, -1), { ...assistantMsg }];
+              scrollToBottom();
+              break;
+            }
+
+            case 'component':
+              assistantMsg.content += `\n📊 [${event.name}]`;
+              messages = [...messages.slice(0, -1), { ...assistantMsg }];
+              scrollToBottom();
+              break;
+
+            case 'done':
+              break;
+          }
+        }
+      } else if (provider) {
+        // ─── ChatProvider path: raw text stream ─────────────
+        const result = provider.sendMessage(
+          messagesToSend,
+          { signal: abortController.signal },
+        );
+
+        if (result && typeof result === 'object' && Symbol.asyncIterator in result) {
+          for await (const chunk of result as AsyncGenerator<string>) {
+            assistantMsg.content += chunk;
+            messages = [...messages.slice(0, -1), { ...assistantMsg }];
+            scrollToBottom();
+          }
+        } else {
+          const text = await (result as Promise<string>);
+          assistantMsg.content = text;
           messages = [...messages.slice(0, -1), { ...assistantMsg }];
           scrollToBottom();
         }
-      } else {
-        // Non-streaming response
-        const text = await (result as Promise<string>);
-        assistantMsg.content = text;
-        messages = [...messages.slice(0, -1), { ...assistantMsg }];
-        scrollToBottom();
       }
     } catch (err: unknown) {
       if (err instanceof Error && err.name === 'AbortError') return;
@@ -228,6 +301,17 @@
   }
 
   function handleAction(action: ChatAction, msg: ChatMessage) {
+    // Handle approval actions from AgentProvider
+    if (action.payload?.approvalId) {
+      const id = action.payload.approvalId as string;
+      const approved = action.payload.approved as boolean;
+      resolveApproval(id, approved);
+      pendingApprovalIds = pendingApprovalIds.filter(pid => pid !== id);
+      // Remove action buttons after resolution
+      msg.actions = undefined;
+      messages = [...messages];
+      return;
+    }
     if (onAction) {
       onAction(action, msg);
     }
@@ -252,7 +336,7 @@
 
 <svelte:window onkeydown={handleGlobalKeydown} />
 
-{#if provider}
+{#if provider || agent}
   <!-- FAB Button -->
   {#if !open}
     <div transition:scale={{ duration: 200 }}>

package/src/components/CommandPalette.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
-  import { getResources } from '@svadmin/core';
+  import { getResources, getAgentProvider, getChatProvider } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { t } from '@svadmin/core/i18n';
   import { toggleTheme } from '@svadmin/core';
   import { Command } from 'cmdk-sv';
   import * as Dialog from './ui/dialog/index.js';
-  import { Search, LayoutDashboard, Plus, Sun, FileText } from 'lucide-svelte';
+  import { Search, LayoutDashboard, Plus, Sun, FileText, Bot, Sparkles } from 'lucide-svelte';
 
-  let { open = $bindable(false) } = $props<{ open?: boolean }>();
+  interface Props {
+    open?: boolean;
+    /** Callback fired when user selects "Ask AI" with a query string */
+    onAskAI?: (query: string) => void;
+  }
+
+  let { open = $bindable(false), onAskAI }: Props = $props();
   let searchValue = $state('');
 
   const resources = getResources();
+  const hasAI = $derived(!!(getAgentProvider() || getChatProvider()));
 
   function close() {
     open = false;
@@ -22,6 +29,14 @@
     close();
   }
 
+  function askAI() {
+    const query = searchValue.trim();
+    if (onAskAI && query) {
+      onAskAI(query);
+    }
+    close();
+  }
+
   const itemClass = 'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50';
 </script>
 
@@ -32,16 +47,42 @@
         <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
         <Command.Input
           bind:value={searchValue}
-          placeholder={t('common.search')}
+          placeholder={hasAI ? (t('commandPalette.searchOrAsk') || 'Search or ask AI...') : t('common.search')}
           class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
         />
         <kbd class="ml-2 text-[10px] font-mono font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border">ESC</kbd>
       </div>
       <Command.List class="max-h-[320px] overflow-y-auto overflow-x-hidden p-1">
         <Command.Empty class="py-6 text-center text-sm text-muted-foreground">
-          {t('common.noData')}
+          {#if hasAI && searchValue.trim()}
+            <button
+              class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors cursor-pointer text-sm font-medium"
+              onclick={askAI}
+            >
+              <Sparkles class="h-3.5 w-3.5" />
+              {t('commandPalette.askAI') || 'Ask AI'}: "{searchValue.trim()}"
+            </button>
+          {:else}
+            {t('common.noData')}
+          {/if}
         </Command.Empty>
 
+        <!-- AI -->
+        {#if hasAI && searchValue.trim()}
+          <Command.Group heading="AI">
+            <Command.Item
+              value="ask-ai-{searchValue}"
+              onSelect={askAI}
+              class={itemClass}
+            >
+              <Sparkles class="h-4 w-4 text-primary" />
+              <span class="text-primary font-medium">{t('commandPalette.askAI') || 'Ask AI'}</span>
+              <span class="text-muted-foreground truncate ml-1">"{searchValue.trim()}"</span>
+            </Command.Item>
+          </Command.Group>
+          <Command.Separator class="mx-1 my-1 h-px bg-border" />
+        {/if}
+
         <!-- Navigation -->
         <Command.Group heading={t('common.home')}>
           <Command.Item
@@ -91,3 +132,4 @@
     </Command.Root>
   </Dialog.DialogContent>
 </Dialog.Dialog>
+

package/src/components/DraggableGrid.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
+<script context="module">
   export interface GridModule {
     id: string;
     [key: string]: unknown;
   }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
 
   let {
     modules = $bindable<GridModule[]>([]),

package/src/components/FieldRenderer.svelte

@@ -163,13 +163,43 @@
       required={field.required}
     />
 
-  {:else if field.type === 'textarea' || field.type === 'richtext'}
+  {:else if field.type === 'richtext'}
+    {#await import('@svadmin/editor')}
+      <Textarea
+        id={field.key}
+        value={strVal}
+        oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
+        required={field.required}
+        rows={10}
+        placeholder={t('field.enterValue', { label: field.label })}
+        class="resize-y"
+      />
+    {:then editorMod}
+      <editorMod.Editor
+        value={strVal}
+        placeholder={t('field.enterValue', { label: field.label })}
+        preset="full"
+        onchange={(html) => onchange(html)}
+      />
+    {:catch}
+      <Textarea
+        id={field.key}
+        value={strVal}
+        oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
+        required={field.required}
+        rows={10}
+        placeholder={t('field.enterValue', { label: field.label })}
+        class="resize-y"
+      />
+    {/await}
+
+  {:else if field.type === 'textarea'}
     <Textarea
       id={field.key}
       value={strVal}
       oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
       required={field.required}
-      rows={field.type === 'richtext' ? 10 : 4}
+      rows={4}
       placeholder={t('field.enterValue', { label: field.label })}
       class="resize-y"
     />

package/src/components/PermissionMatrix.svelte

@@ -1,4 +1,4 @@
-<script module context="module">
+<script context="module">
   export type RoleInfo = { code: string; name: string; [key: string]: any };
   export type ResourceInfo = { code: string; name: string; section?: string; [key: string]: any };
   export type ActionInfo = { code: string; name: string; [key: string]: any };
@@ -128,12 +128,12 @@
       
       <!-- Table Area -->
       <div class="flex-1 overflow-auto p-4">
-        <table class="min-w-full divide-y divide-border border border-border rounded-lg overflow-hidden">
+        <table class="min-w-full rounded-lg overflow-hidden shadow-sm ring-1 ring-border/10">
           <thead class="bg-muted/50">
             <tr>
-              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground border-r border-border w-48">模块域与资源点</th>
+              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">模块域与资源点</th>
               {#each actions as action}
-                <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground border-r border-border">
+                <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground">
                   <div class="flex flex-col items-center">
                     <span>{action.name}</span>
                     <span class="text-[10px] text-muted-foreground font-mono">{action.code}</span>
@@ -142,7 +142,7 @@
               {/each}
             </tr>
           </thead>
-          <tbody class="divide-y divide-border bg-card">
+          <tbody class="bg-card">
             {#if resources.length === 0}
               <tr>
                  <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">暂无可用资源</td>
@@ -156,8 +156,8 @@
                 </tr>
               {/if}
               
-              <tr class="hover:bg-muted/50 transition-colors">
-                <td class="whitespace-nowrap py-3 pl-4 pr-3 text-sm border-r border-border">
+              <tr class="even:bg-muted/30 hover:bg-muted/50 transition-colors">
+                <td class="whitespace-nowrap py-3 pl-4 pr-3 text-sm">
                   <div class="font-medium text-foreground">{resource.name}</div>
                   <div class="text-xs text-muted-foreground font-mono">{resource.code}</div>
                 </td>
@@ -165,7 +165,7 @@
                 <!-- Action Checkboxes -->
                 {#each actions as action}
                   {@const granted = selectedRole ? isGranted(selectedRole, resource.code, action.code) : false}
-                  <td class="whitespace-nowrap px-3 py-3 text-center border-r border-border">
+                  <td class="whitespace-nowrap px-3 py-3 text-center">
                     <div class="flex items-center justify-center">
                       <button 
                         disabled={loading || !selectedRole}

package/src/components/SettingsPage.svelte

@@ -47,7 +47,7 @@
 
 <div class="flex flex-col lg:flex-row gap-0 min-h-full">
   <!-- Left sidebar navigation -->
-  <nav class="w-full lg:w-56 shrink-0 border-b lg:border-b-0 lg:border-r border-border bg-muted/30">
+  <nav class="w-full lg:w-56 shrink-0 bg-muted/10 shadow-[inset_0_-1px_0_rgba(0,0,0,0.05)] lg:shadow-[inset_-1px_0_0_rgba(0,0,0,0.05)] dark:shadow-[inset_-1px_0_0_rgba(255,255,255,0.05)]">
     <!-- Mobile: horizontal scroll tabs -->
     <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
       {#each sections as section}

package/src/components/ShowPage.svelte

@@ -36,10 +36,10 @@
   </PageHeader>
 
   {#if query.query.isLoading}
-    <Card.Root>
-      <Card.Content class="divide-y divide-border p-0">
-        {#each showFields.slice(0, 6) as _}
-          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
+        {#each showFields.slice(0, 6) as _, i}
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
             <Skeleton class="h-4 w-1/2 sm:w-1/4" />
             <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
           </div>
@@ -47,12 +47,12 @@
       </Card.Content>
     </Card.Root>
   {:else if query.query.data?.data}
-    <Card.Root>
-      <Card.Content class="divide-y divide-border p-0">
-        {#each showFields as field}
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
+        {#each showFields as field, i}
           {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
             <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
             <div class="sm:w-2/3 text-sm text-foreground">
               {#if DisplayComponent && value != null}

package/src/components/TaskQueueDrawer.svelte

@@ -1,9 +1,4 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { Loader2, CheckCircle2, XCircle, Clock, Download, X, ListTodo } from 'lucide-svelte';
-  import { Button } from './ui/button/index.js';
-  import { Badge } from './ui/badge/index.js';
-
+<script context="module">
   export type TaskStatus = 'pending' | 'running' | 'completed' | 'failed';
 
   export interface BackgroundTask {
@@ -16,6 +11,13 @@
     downloadUrl?: string;
     [key: string]: unknown;
   }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Loader2, CheckCircle2, XCircle, Clock, Download, X, ListTodo } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
 
   let {
     open = $bindable(false),

package/src/components/TenantSwitcher.svelte

@@ -1,15 +1,17 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { ChevronsUpDown, Building2, Check } from 'lucide-svelte';
-  import { Button } from './ui/button/index.js';
-  import * as DropdownMenu from './ui/dropdown-menu/index.js';
-
+<script context="module">
   export interface Tenant {
     id: string;
     name: string;
     logo?: string;
     [key: string]: unknown;
   }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { ChevronsUpDown, Building2, Check } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
 
   let {
     tenants = [],
@@ -59,14 +61,14 @@
         </button>
       {/snippet}
     </DropdownMenu.Trigger>
-    <DropdownMenu.Content class="w-56" align="start" side="right" sideOffset={8}>
+    <DropdownMenu.Content class="w-56">
       {#if headerSnippet}
         <div class="px-2 py-1.5">
           {@render headerSnippet()}
         </div>
         <DropdownMenu.Separator />
       {/if}
-      <DropdownMenu.Label class="text-xs text-muted-foreground">Workspaces</DropdownMenu.Label>
+      <div class="px-2 py-1.5 text-xs text-muted-foreground">Workspaces</div>
       {#each tenants as tenant}
         <DropdownMenu.Item
           class="flex items-center gap-3 cursor-pointer"

package/src/index.ts

@@ -93,6 +93,9 @@ export { default as RelationField } from './components/fields/RelationField.svel
 export { default as JsonField } from './components/fields/JsonField.svelte';
 export { default as RichTextField } from './components/fields/RichTextField.svelte';
 
+// Rich text editor (requires @svadmin/editor)
+export { Editor as RichTextEditor } from '@svadmin/editor';
+
 // CRUD Buttons
 export {
   CreateButton, EditButton, DeleteButton, ShowButton, ListButton,