@svadmin/ui 0.3.0 → 0.4.1

package/src/components/InferencerPanel.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
   import { getDataProvider, getResources, inferResource } from '@svadmin/core';
-  import type { InferResult, ResourceDefinition } from '@svadmin/core';
+  import type { InferResult } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
-  import { Wand2, Copy, Check, RefreshCw, Loader2 } from 'lucide-svelte';
+  import { Input } from './ui/input/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import * as Card from './ui/card/index.js';
+  import * as Table from './ui/table/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import { ScrollArea } from './ui/scroll-area/index.js';
+  import { Select } from './ui/select/index.js';
+  import { Wand2, Copy, Check, RefreshCw, Loader2, AlertCircle } from 'lucide-svelte';
 
   const dataProvider = getDataProvider();
   const resources = getResources();
@@ -13,6 +21,11 @@
   let error = $state<string | null>(null);
   let copied = $state(false);
   let customEndpoint = $state('');
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    return () => { if (copyTimer) clearTimeout(copyTimer); };
+  });
 
   async function runInference() {
     const resourceName = customEndpoint.trim() || selectedResource;
@@ -37,8 +50,8 @@
         resourceName,
         response.data as Record<string, unknown>[],
       );
-    } catch (e: any) {
-      error = e?.message ?? 'Failed to fetch data for inference.';
+    } catch (e: unknown) {
+      error = e instanceof Error ? e.message : 'Failed to fetch data for inference.';
     } finally {
       loading = false;
     }
@@ -48,119 +61,132 @@
     if (!inferResult) return;
     navigator.clipboard.writeText(inferResult.code);
     copied = true;
-    setTimeout(() => { copied = false; }, 2000);
+    if (copyTimer) clearTimeout(copyTimer);
+    copyTimer = setTimeout(() => { copied = false; }, 2000);
   }
 
-  const typeColors: Record<string, string> = {
-    text: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
-    number: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-    boolean: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
-    date: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
-    email: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200',
-    url: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
-    image: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200',
-    images: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200',
-    textarea: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-    json: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
-    tags: 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200',
-    select: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
-    relation: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
-    color: 'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900 dark:text-fuchsia-200',
-    phone: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200',
+  const typeVariants: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
+    text: 'secondary',
+    number: 'default',
+    boolean: 'outline',
+    date: 'secondary',
+    email: 'default',
+    url: 'outline',
+    image: 'secondary',
+    images: 'secondary',
+    textarea: 'outline',
+    json: 'secondary',
+    tags: 'default',
+    select: 'outline',
+    relation: 'destructive',
+    color: 'secondary',
+    phone: 'default',
   };
 </script>
 
-<div class="inferencer-panel space-y-4">
-  <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-    <Wand2 class="h-4 w-4" />
-    Resource Inferencer
-  </div>
-
-  <!-- Resource selector -->
-  <div class="flex gap-2">
-    <select
-      class="flex-1 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
-      bind:value={selectedResource}
-    >
-      <option value="">— Select a resource —</option>
-      {#each resources as res}
-        <option value={res.name}>{res.label} ({res.name})</option>
-      {/each}
-    </select>
-    <span class="flex items-center text-xs text-gray-400">or</span>
-    <input
-      type="text"
-      class="w-36 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
-      placeholder="custom endpoint"
-      bind:value={customEndpoint}
-    />
-  </div>
-
-  <Button size="sm" onclick={runInference} disabled={loading || (!selectedResource && !customEndpoint.trim())}>
-    {#if loading}
-      <Loader2 class="mr-1 h-3 w-3 animate-spin" />
-      Inferring...
-    {:else}
-      <RefreshCw class="mr-1 h-3 w-3" />
-      Infer Fields
+<Card.Root>
+  <Card.CardHeader class="pb-3">
+    <Card.CardTitle class="flex items-center gap-2 text-base">
+      <Wand2 class="h-4 w-4" />
+      Resource Inferencer
+    </Card.CardTitle>
+  </Card.CardHeader>
+  <Card.CardContent class="space-y-4">
+    <!-- Resource selector -->
+    <div class="flex gap-2">
+      <Select
+        class="flex-1"
+        bind:value={selectedResource}
+        placeholder="— Select a resource —"
+      >
+        {#each resources as res}
+          <option value={res.name}>{res.label} ({res.name})</option>
+        {/each}
+      </Select>
+      <span class="flex items-center text-xs text-muted-foreground">or</span>
+      <Input
+        type="text"
+        class="w-36"
+        placeholder="custom endpoint"
+        bind:value={customEndpoint}
+      />
+    </div>
+
+    <Button size="sm" onclick={runInference} disabled={loading || (!selectedResource && !customEndpoint.trim())}>
+      {#if loading}
+        <Loader2 class="h-3 w-3 animate-spin" data-icon="inline-start" />
+        Inferring...
+      {:else}
+        <RefreshCw class="h-3 w-3" data-icon="inline-start" />
+        Infer Fields
+      {/if}
+    </Button>
+
+    {#if error}
+      <Alert.Root variant="destructive">
+        <AlertCircle class="h-4 w-4" />
+        <Alert.Description>{error}</Alert.Description>
+      </Alert.Root>
     {/if}
-  </Button>
 
-  {#if error}
-    <div class="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-300">
-      {error}
-    </div>
-  {/if}
-
-  {#if inferResult}
-    <!-- Field table -->
-    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
-      <table class="w-full text-left text-sm">
-        <thead class="bg-gray-50 dark:bg-gray-800">
-          <tr>
-            <th class="px-3 py-2 font-medium">Field</th>
-            <th class="px-3 py-2 font-medium">Type</th>
-            <th class="px-3 py-2 font-medium">List</th>
-            <th class="px-3 py-2 font-medium">Form</th>
-          </tr>
-        </thead>
-        <tbody>
-          {#each inferResult.fields as field}
-            <tr class="border-t border-gray-100 dark:border-gray-700/50">
-              <td class="px-3 py-1.5 font-mono text-xs">{field.key}</td>
-              <td class="px-3 py-1.5">
-                <span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {typeColors[field.type] ?? 'bg-gray-100 text-gray-600'}">
-                  {field.type}
-                  {#if field.resource}→ {field.resource}{/if}
-                </span>
-              </td>
-              <td class="px-3 py-1.5 text-center">{field.showInList ? '✓' : '—'}</td>
-              <td class="px-3 py-1.5 text-center">{field.showInForm ? '✓' : '—'}</td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </div>
+    {#if loading}
+      <div class="space-y-2">
+        {#each Array(4) as _}
+          <Skeleton class="h-8 w-full" />
+        {/each}
+      </div>
+    {/if}
 
-    <!-- Generated code -->
-    <div class="relative">
-      <div class="flex items-center justify-between rounded-t-lg bg-gray-800 px-3 py-1.5 text-xs text-gray-400">
-        <span>Generated ResourceDefinition</span>
-        <button class="flex items-center gap-1 hover:text-white transition-colors" onclick={copyCode}>
-          {#if copied}
-            <Check class="h-3 w-3 text-green-400" />
-            <span class="text-green-400">Copied!</span>
-          {:else}
-            <Copy class="h-3 w-3" />
-            Copy
-          {/if}
-        </button>
+    {#if inferResult}
+      <!-- Field table -->
+      <ScrollArea class="max-h-80">
+        <Table.Root>
+          <Table.Header>
+            <Table.Row class="bg-muted/50">
+              <Table.Head>Field</Table.Head>
+              <Table.Head>Type</Table.Head>
+              <Table.Head class="text-center">List</Table.Head>
+              <Table.Head class="text-center">Form</Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {#each inferResult.fields as field}
+              <Table.Row>
+                <Table.Cell class="font-mono text-xs">{field.key}</Table.Cell>
+                <Table.Cell>
+                  <Badge variant={typeVariants[field.type] ?? 'secondary'}>
+                    {field.type}
+                    {#if field.resource}→ {field.resource}{/if}
+                  </Badge>
+                </Table.Cell>
+                <Table.Cell class="text-center">{field.showInList ? '✓' : '—'}</Table.Cell>
+                <Table.Cell class="text-center">{field.showInForm ? '✓' : '—'}</Table.Cell>
+              </Table.Row>
+            {/each}
+          </Table.Body>
+        </Table.Root>
+      </ScrollArea>
+
+      <!-- Generated code -->
+      <div class="rounded-lg border overflow-hidden">
+        <div class="flex items-center justify-between bg-muted px-3 py-1.5 text-xs text-muted-foreground">
+          <span>Generated ResourceDefinition</span>
+          <Button variant="ghost" size="sm" class="h-6 text-xs gap-1" onclick={copyCode}>
+            {#if copied}
+              <Check class="h-3 w-3 text-emerald-500" />
+              <span class="text-emerald-500">Copied!</span>
+            {:else}
+              <Copy class="h-3 w-3" />
+              Copy
+            {/if}
+          </Button>
+        </div>
+        <pre class="max-h-64 overflow-auto bg-muted/30 p-3 text-xs text-foreground font-mono">{inferResult.code}</pre>
       </div>
-      <pre class="max-h-64 overflow-auto rounded-b-lg bg-gray-900 p-3 text-xs text-green-300 font-mono">{inferResult.code}</pre>
-    </div>
 
-    <p class="text-xs text-gray-400">
-      Inferred {inferResult.fields.length} fields from sample data. Copy the code above into your <code>resources.ts</code> file.
-    </p>
-  {/if}
-</div>
+      <p class="text-xs text-muted-foreground">
+        Inferred {inferResult.fields.length} fields from sample data. Copy the code above into your <code class="bg-muted px-1 rounded text-foreground">resources.ts</code> file.
+      </p>
+    {/if}
+  </Card.CardContent>
+</Card.Root>

package/src/components/InfiniteList.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { fade, fly } from 'svelte/transition';
+  import { useInfiniteList } from '@svadmin/core';
+  import type { BaseRecord, Sort, Filter } from '@svadmin/core';
+  import type { Snippet } from 'svelte';
+  import { t } from '@svadmin/core/i18n';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Loader2 } from 'lucide-svelte';
+  import { intersect } from '../actions.js';
+
+  interface Props<T extends BaseRecord = BaseRecord> {
+    resource: string;
+    pageSize?: number;
+    sorters?: Sort[];
+    filters?: Filter[];
+    /** Render each item */
+    children: Snippet<[{ item: T; index: number }]>;
+    /** Custom empty state */
+    empty?: Snippet;
+    /** Custom loading skeleton */
+    loadingSkeleton?: Snippet;
+  }
+
+  let {
+    resource,
+    pageSize = 20,
+    sorters,
+    filters,
+    children,
+    empty,
+    loadingSkeleton,
+  }: Props = $props();
+
+  const { query } = useInfiniteList({
+    resource,
+    pagination: { pageSize },
+    sorters,
+    filters,
+  });
+
+  const allItems = $derived(
+    (query.data as { pages?: { data: BaseRecord[] }[] })?.pages?.flatMap(p => p.data) ?? []
+  );
+
+  const hasNextPage = $derived(query.hasNextPage ?? false);
+  const isFetchingNextPage = $derived(query.isFetchingNextPage ?? false);
+
+  function loadMore() {
+    if (hasNextPage && !isFetchingNextPage) {
+      query.fetchNextPage();
+    }
+  }
+</script>
+
+<div class="space-y-2">
+  {#if query.isLoading}
+    {#if loadingSkeleton}
+      {@render loadingSkeleton()}
+    {:else}
+      <div class="space-y-3">
+        {#each Array(5) as _}
+          <Skeleton class="h-16 w-full rounded-lg" />
+        {/each}
+      </div>
+    {/if}
+  {:else if allItems.length === 0}
+    {#if empty}
+      {@render empty()}
+    {:else}
+      <p class="text-center text-sm text-muted-foreground py-8">{t('empty.title')}</p>
+    {/if}
+  {:else}
+    {#each allItems as item, index}
+      <div in:fade={{ duration: 200, delay: index < 20 ? index * 30 : 0 }}>
+        {@render children({ item, index })}
+      </div>
+    {/each}
+
+    {#if isFetchingNextPage}
+      <div class="flex justify-center py-4">
+        <Loader2 class="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    {/if}
+
+    {#if hasNextPage}
+      <!-- Sentinel for infinite scroll -->
+      <div use:intersect={loadMore} class="h-1"></div>
+    {:else}
+      <p class="text-center text-xs text-muted-foreground py-2">{t('empty.noMore')}</p>
+    {/if}
+  {/if}
+</div>

package/src/components/Layout.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { onMount } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
   import Sidebar from './Sidebar.svelte';
   import Toast from './Toast.svelte';
-  import Breadcrumbs from './Breadcrumbs.svelte';
+  import Header from './Header.svelte';
+  import CommandPalette from './CommandPalette.svelte';
+  import TooltipButton from './TooltipButton.svelte';
+  import { t } from '@svadmin/core/i18n';
   import { getAuthProvider } from '@svadmin/core';
   import type { Identity } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
-  import { Loader2 } from 'lucide-svelte';
+  import { currentPath } from '@svadmin/core/router';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import { Button } from './ui/button/index.js';
+  import * as Sheet from './ui/sheet/index.js';
+  import { Menu } from 'lucide-svelte';
+
+  let commandOpen = $state(false);
+  let mobileMenuOpen = $state(false);
 
   let { children, title = 'Admin' }: { children: Snippet; title?: string } = $props();
 
@@ -21,18 +31,23 @@
   let loading = $state(true);
   let identity = $state<Identity | null>(null);
 
-  onMount(async () => {
+  $effect(() => {
     if (!auth) {
       loading = false;
       return;
     }
-    const { authenticated, redirectTo } = await auth.check();
-    if (!authenticated) {
-      navigate(redirectTo ?? '/login');
-      return;
-    }
-    identity = await auth.getIdentity();
-    loading = false;
+    (async () => {
+      try {
+        const { authenticated, redirectTo } = await auth.check();
+        if (!authenticated) {
+          navigate(redirectTo ?? '/login');
+          return;
+        }
+        identity = await auth.getIdentity();
+      } finally {
+        loading = false;
+      }
+    })();
   });
 
   async function handleLogout() {
@@ -46,21 +61,69 @@
   let collapsed = $state(false);
 </script>
 
+<div role="application" onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }}>
 {#if loading}
-  <div class="flex h-screen items-center justify-center">
-    <Loader2 class="h-8 w-8 animate-spin text-primary" />
+  <div class="flex h-screen" in:fade={{ duration: 150 }}>
+    <div class="hidden md:block w-64 border-r bg-sidebar/80 p-4 space-y-4">
+      <Skeleton class="h-8 w-32" />
+      <div class="space-y-2 mt-6">
+        {#each Array(5) as _}
+          <Skeleton class="h-9 w-full rounded-lg" />
+        {/each}
+      </div>
+    </div>
+    <div class="flex-1 p-8 space-y-6">
+      <Skeleton class="h-8 w-48" />
+      <div class="space-y-3">
+        {#each Array(4) as _}
+          <Skeleton class="h-12 w-full" />
+        {/each}
+      </div>
+    </div>
   </div>
 {:else}
-  <div class="flex h-screen bg-gradient-to-br from-background via-background to-muted/30">
-    <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
-    <main
-      class="flex-1 overflow-y-auto p-8 transition-all duration-300"
-      class:ml-64={!collapsed}
-      class:ml-16={collapsed}
+  <div class="flex h-screen bg-gradient-to-br from-background via-background to-muted/30" in:fade={{ duration: 200, delay: 50 }}>
+    <!-- Desktop sidebar -->
+    <div class="hidden md:block">
+      <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+    </div>
+
+    <!-- Mobile sidebar via Sheet -->
+    <Sheet.Root bind:open={mobileMenuOpen} side="left">
+      <div class="md:hidden">
+        <Sidebar collapsed={false} {identity} {title} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+      </div>
+    </Sheet.Root>
+
+    <div
+      class="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+      class:md:ml-64={!collapsed}
+      class:md:ml-16={collapsed}
     >
-      <Breadcrumbs />
-      {@render children()}
-    </main>
+      <!-- Header with mobile hamburger -->
+      <Header
+        showSearch={true}
+        onSearchClick={() => { commandOpen = true; }}
+      >
+        {#snippet children()}
+          <!-- Mobile hamburger -->
+          <TooltipButton tooltip={t('common.menu')} class="md:hidden" onclick={() => { mobileMenuOpen = true; }}>
+            <Menu class="h-5 w-5" />
+          </TooltipButton>
+        {/snippet}
+      </Header>
+
+      <!-- Content area -->
+      <main class="flex-1 overflow-y-auto p-6 md:p-8">
+        {#key currentPath()}
+          <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
+            {@render children()}
+          </div>
+        {/key}
+      </main>
+    </div>
   </div>
+  <CommandPalette bind:open={commandOpen} />
   <Toast />
 {/if}
+</div>

package/src/components/ListPage.svelte

@@ -3,6 +3,7 @@
   import { navigate } from '@svadmin/core/router';
   import { t } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
+  import type { FieldDefinition } from '@svadmin/core';
   import PageHeader from './PageHeader.svelte';
   import AutoTable from './AutoTable.svelte';
   import { Button } from './ui/button/index.js';
@@ -12,7 +13,18 @@
     resourceName: string;
     title?: string;
     canCreate?: boolean;
+    /** Passthrough: enable row selection checkboxes */
+    selectable?: boolean;
+    /** Passthrough: custom header actions */
     headerActions?: Snippet;
+    /** Passthrough: custom cell renderer per field */
+    cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
+    /** Passthrough: custom row actions */
+    rowActions?: Snippet<[{ record: Record<string, unknown>; id: string | number }]>;
+    /** Passthrough: custom empty state */
+    emptyState?: Snippet;
+    /** Passthrough: expandable row content */
+    expandedRowRender?: Snippet<[{ record: Record<string, unknown> }]>;
     class?: string;
   }
 
@@ -20,7 +32,12 @@
     resourceName,
     title,
     canCreate,
+    selectable,
     headerActions,
+    cellRenderer,
+    rowActions,
+    emptyState,
+    expandedRowRender,
     class: className = '',
   }: Props = $props();
 
@@ -43,5 +60,12 @@
     {/snippet}
   </PageHeader>
 
-  <AutoTable {resourceName} />
+  <AutoTable
+    {resourceName}
+    {selectable}
+    {cellRenderer}
+    {rowActions}
+    {emptyState}
+    {expandedRowRender}
+  />
 </div>