@svadmin/ui 0.18.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -26,7 +26,29 @@
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",
-    "tailwind-merge": "^3.0.0"
+    "tailwind-merge": "^3.0.0",
+    "marked": "^15.0.0",
+    "marked-highlight": "^2.2.0",
+    "highlight.js": "^11.0.0",
+    "isomorphic-dompurify": "^2.0.0",
+    "@svadmin/editor": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "marked": {
+      "optional": true
+    },
+    "marked-highlight": {
+      "optional": true
+    },
+    "highlight.js": {
+      "optional": true
+    },
+    "isomorphic-dompurify": {
+      "optional": true
+    },
+    "@svadmin/editor": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@lucide/svelte": "^0.577.0",

package/src/components/AuditLogViewer.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { getAuthProvider } from '@svadmin/core';
+  import type { AuditLog } from '@svadmin/core';
+  import { toast } from '@svadmin/core/toast';
+  import * as Table from './ui/table/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Loader2, ChevronLeft, ChevronRight, Search, FileSearch, Eye, X } from 'lucide-svelte';
+
+  const authProvider = getAuthProvider();
+
+  let logs = $state<AuditLog[]>([]);
+  let total = $state(0);
+  let page = $state(1);
+  let pageSize = 20;
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let searchQuery = $state('');
+
+  // Snapshot drawer
+  let drawerOpen = $state(false);
+  let drawerLog = $state<AuditLog | null>(null);
+
+  async function loadLogs() {
+    if (!authProvider?.getAuditLogs) {
+      error = t('settings.auditNotSupported') ?? 'Audit logs are not supported by the current AuthProvider';
+      loading = false;
+      return;
+    }
+    loading = true;
+    try {
+      const result = await authProvider.getAuditLogs({ page, pageSize });
+      logs = result.data;
+      total = result.total;
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => {
+    loadLogs();
+  });
+
+  let totalPages = $derived(Math.ceil(total / pageSize) || 1);
+
+  let filteredLogs = $derived(
+    searchQuery.trim()
+      ? logs.filter(l =>
+          (l.userName ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+          l.action.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          (l.resource ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+        )
+      : logs
+  );
+
+  function openSnapshot(log: AuditLog) {
+    drawerLog = log;
+    drawerOpen = true;
+  }
+
+  function formatDate(d: string | Date) {
+    return new Date(d).toLocaleString();
+  }
+
+  function getActionColor(action: string): 'default' | 'secondary' | 'destructive' | 'outline' {
+    const a = action.toLowerCase();
+    if (a.includes('delete') || a.includes('remove')) return 'destructive';
+    if (a.includes('create') || a.includes('add')) return 'default';
+    if (a.includes('update') || a.includes('edit')) return 'secondary';
+    return 'outline';
+  }
+</script>
+
+<div class="h-full flex flex-col">
+  <!-- Header -->
+  <div class="mb-6">
+    <h2 class="text-xl font-semibold text-foreground flex items-center gap-2">
+      <FileSearch class="h-5 w-5 text-muted-foreground" />
+      {t('settings.auditLogs') ?? 'Audit Logs'}
+    </h2>
+    <p class="text-sm text-muted-foreground mt-1">
+      {t('settings.auditDescription') ?? 'Track and review all system operations for compliance and debugging.'}
+    </p>
+  </div>
+
+  {#if error}
+    <div class="p-6 border border-destructive/20 bg-destructive/5 text-destructive rounded-lg text-center">
+      <p>{error}</p>
+    </div>
+  {:else}
+    <!-- Search Bar -->
+    <div class="mb-4 relative">
+      <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Input
+        bind:value={searchQuery}
+        placeholder={t('settings.searchLogs') ?? 'Search by user, action, or resource...'}
+        class="pl-9"
+      />
+    </div>
+
+    <!-- Table -->
+    <div class="flex-1 border 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" />
+          {t('common.loading')}
+        </div>
+      {:else}
+        <div class="overflow-auto">
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head class="w-[160px]">{t('settings.auditTime') ?? 'Time'}</Table.Head>
+                <Table.Head>{t('settings.auditUser') ?? 'User'}</Table.Head>
+                <Table.Head>{t('settings.auditAction') ?? 'Action'}</Table.Head>
+                <Table.Head>{t('settings.auditResource') ?? 'Resource'}</Table.Head>
+                <Table.Head class="w-[120px]">{t('settings.auditIp') ?? 'IP Address'}</Table.Head>
+                <Table.Head class="w-[60px] text-center">{t('common.detail') ?? 'Detail'}</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {#each filteredLogs as log}
+                <Table.Row class="hover:bg-muted/50 transition-colors">
+                  <Table.Cell class="text-xs text-muted-foreground font-mono">
+                    {formatDate(log.createdAt)}
+                  </Table.Cell>
+                  <Table.Cell class="text-sm font-medium">{log.userName ?? log.userId ?? '—'}</Table.Cell>
+                  <Table.Cell>
+                    <Badge variant={getActionColor(log.action)}>{log.action}</Badge>
+                  </Table.Cell>
+                  <Table.Cell class="text-sm text-muted-foreground">{log.resource ?? '—'}</Table.Cell>
+                  <Table.Cell class="text-xs text-muted-foreground font-mono">{log.ipAddress ?? '—'}</Table.Cell>
+                  <Table.Cell class="text-center">
+                    {#if log.details}
+                      <Button variant="ghost" size="icon" class="h-7 w-7" onclick={() => openSnapshot(log)}>
+                        <Eye class="h-3.5 w-3.5" />
+                      </Button>
+                    {/if}
+                  </Table.Cell>
+                </Table.Row>
+              {:else}
+                <Table.Row>
+                  <Table.Cell colspan={6} class="h-24 text-center text-muted-foreground">
+                    {t('common.noData')}
+                  </Table.Cell>
+                </Table.Row>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Pagination -->
+    <div class="mt-4 flex items-center justify-between text-sm text-muted-foreground">
+      <span>{total} {t('settings.auditTotal') ?? 'total records'}</span>
+      <div class="flex items-center gap-2">
+        <Button
+          variant="outline" size="sm"
+          disabled={page <= 1}
+          onclick={() => { page--; loadLogs(); }}
+        >
+          <ChevronLeft class="h-4 w-4" />
+        </Button>
+        <span>{page} / {totalPages}</span>
+        <Button
+          variant="outline" size="sm"
+          disabled={page >= totalPages}
+          onclick={() => { page++; loadLogs(); }}
+        >
+          <ChevronRight class="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- Snapshot Drawer -->
+{#if drawerOpen && drawerLog}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="fixed inset-0 z-[100] flex justify-end bg-black/40 backdrop-blur-sm" onclick={() => drawerOpen = false}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- 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>
+          <h2 class="text-lg font-bold text-foreground flex items-center gap-2">
+            <FileSearch class="h-5 w-5 text-primary" />
+            {t('settings.auditSnapshot') ?? 'Change Snapshot'}
+          </h2>
+          <p class="text-xs text-muted-foreground mt-1">{formatDate(drawerLog.createdAt)} · {drawerLog.userName ?? drawerLog.userId}</p>
+        </div>
+        <button onclick={() => drawerOpen = false} class="text-muted-foreground hover:text-foreground transition p-2 rounded-lg hover:bg-muted">
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Meta Tags -->
+      <div class="px-6 py-3 border-b border-border flex items-center gap-2 flex-wrap">
+        <Badge variant="outline">{drawerLog.action}</Badge>
+        {#if drawerLog.resource}
+          <Badge variant="secondary">{drawerLog.resource}</Badge>
+        {/if}
+        {#if drawerLog.ipAddress}
+          <Badge variant="outline" class="font-mono text-xs">{drawerLog.ipAddress}</Badge>
+        {/if}
+      </div>
+
+      <!-- JSON Diff Viewer -->
+      <div class="flex-1 p-6 overflow-y-auto bg-foreground/[0.03] dark:bg-background/50">
+        <pre class="whitespace-pre-wrap text-xs font-mono leading-relaxed text-foreground/80 bg-muted/30 rounded-lg p-4 border border-border">{typeof drawerLog.details === 'object' ? JSON.stringify(drawerLog.details, null, 2) : drawerLog.details}</pre>
+      </div>
+
+      <!-- Footer -->
+      <div class="p-4 border-t border-border bg-muted/20 text-right text-[11px] text-muted-foreground font-medium">
+        System audit snapshot · Read-only
+      </div>
+    </div>
+  </div>
+{/if}

package/src/components/AutoTable.svelte

@@ -13,7 +13,7 @@
   import { useList, useDelete, getResource } from '@svadmin/core';
   import type { Pagination as PaginationState, Sort, Filter, FieldDefinition } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
-  import { canAccess } from '@svadmin/core/permissions';
+  import { useCan, getAccessControlProvider } from '@svadmin/core';
   import { readURLState, writeURLState } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { fade } from 'svelte/transition';
@@ -36,6 +36,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 ─────────────────────────
@@ -136,10 +137,15 @@
   const deleteMutation = deleteResult.mutation;
 
   // ─── Permissions ──────────────────────────────────────────────
-  const canCreate = $derived(canAccess(resourceName, 'create').can && resource.canCreate !== false);
-  const canEdit = $derived(canAccess(resourceName, 'edit').can && resource.canEdit !== false);
-  const canDelete = $derived(canAccess(resourceName, 'delete').can && resource.canDelete !== false);
-  const canExport = $derived(canAccess(resourceName, 'export').can);
+  const acEnabled = $derived(!!getAccessControlProvider());
+  const canCreatePerm = useCan(() => ({ resource: resourceName, action: 'create', queryOptions: { enabled: acEnabled } }));
+  const canEditPerm = useCan(() => ({ resource: resourceName, action: 'edit', queryOptions: { enabled: acEnabled } }));
+  const canDeletePerm = useCan(() => ({ resource: resourceName, action: 'delete', queryOptions: { enabled: acEnabled } }));
+  const canExportPerm = useCan(() => ({ resource: resourceName, action: 'export', queryOptions: { enabled: acEnabled } }));
+  const canCreate = $derived(canCreatePerm.allowed && resource.canCreate !== false);
+  const canEdit = $derived(canEditPerm.allowed && resource.canEdit !== false);
+  const canDelete = $derived(canDeletePerm.allowed && resource.canDelete !== false);
+  const canExport = $derived(canExportPerm.allowed);
 
   // ─── TanStack Table state ────────────────────────────────────
   let sorting = $state<SortingState>(untrack(() =>

package/src/components/CanAccess.svelte

@@ -11,7 +11,7 @@
     fallback?: Snippet;
   }>();
 
-  const can = $derived(useCan(resource, action, params));
+  const can = useCan(() => ({ resource, action, params }));
 </script>
 
 {#if can.isLoading}

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  export interface GridModule {
+    id: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    modules = $bindable<GridModule[]>([]),
+    onOrderSave,
+    renderItem,
+    class: className = '',
+    columns = 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    gap = 'gap-4',
+  }: {
+    modules?: GridModule[];
+    onOrderSave?: (orderedIds: string[]) => void;
+    renderItem: Snippet<[{ module: GridModule; index: number; dragging: boolean }]>;
+    class?: string;
+    columns?: string;
+    gap?: string;
+  } = $props();
+
+  let draggingId = $state<string | null>(null);
+  let dragOverId = $state<string | null>(null);
+
+  function handleDragStart(e: DragEvent, id: string) {
+    draggingId = id;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', id);
+    }
+  }
+
+  function handleDragOver(e: DragEvent, id: string) {
+    e.preventDefault();
+    if (draggingId && draggingId !== id) {
+      dragOverId = id;
+    }
+  }
+
+  function handleDrop(e: DragEvent, targetId: string) {
+    e.preventDefault();
+    if (!draggingId || draggingId === targetId) {
+      dragOverId = null;
+      return;
+    }
+
+    const sourceIdx = modules.findIndex(m => m.id === draggingId);
+    const targetIdx = modules.findIndex(m => m.id === targetId);
+
+    if (sourceIdx === -1 || targetIdx === -1) {
+      dragOverId = null;
+      return;
+    }
+
+    const newModules = [...modules];
+    const [dragged] = newModules.splice(sourceIdx, 1);
+    newModules.splice(targetIdx, 0, dragged);
+
+    modules = newModules;
+    dragOverId = null;
+    onOrderSave?.(modules.map(m => m.id));
+  }
+
+  function handleDragEnd() {
+    draggingId = null;
+    dragOverId = null;
+  }
+</script>
+
+<div class="grid {columns} {gap} {className}">
+  {#each modules as mod, i (mod.id)}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      draggable="true"
+      ondragstart={(e) => handleDragStart(e, mod.id)}
+      ondragover={(e) => handleDragOver(e, mod.id)}
+      ondrop={(e) => handleDrop(e, mod.id)}
+      ondragend={handleDragEnd}
+      ondragleave={() => { if (dragOverId === mod.id) dragOverId = null; }}
+      class="transition-all duration-200
+        {draggingId === mod.id ? 'opacity-40 scale-[0.97] cursor-grabbing' : 'cursor-grab'}
+        {dragOverId === mod.id ? 'ring-2 ring-primary/40 ring-offset-2 ring-offset-background rounded-lg scale-[1.02]' : ''}"
+    >
+      {@render renderItem({ module: mod, index: i, dragging: draggingId === mod.id })}
+    </div>
+  {/each}
+</div>