@svadmin/ui 0.0.3 → 0.3.0

package/src/components/Header.svelte

@@ -1,66 +1,35 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { Identity } from '@svadmin/core';
-  import { toggleTheme, getResolvedTheme } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { Button } from './ui/button/index.js';
-  import { Sun, Moon, Bell, Search } from 'lucide-svelte';
-
-  interface Props {
-    identity?: Identity | null;
-    title?: string;
-    showSearch?: boolean;
-    actions?: Snippet;
-    class?: string;
-  }
+  import { Moon, Sun } from 'lucide-svelte';
+  import { Button } from './ui/button';
+  import { getTheme, toggleTheme } from '@svadmin/core';
 
   let {
-    identity,
-    title = '',
-    showSearch = false,
-    actions,
-    class: className = '',
-  }: Props = $props();
+    showThemeToggle = true,
+    children,
+  } = $props<{
+    showThemeToggle?: boolean;
+    children?: import('svelte').Snippet;
+  }>();
 </script>
 
-<header class="sticky top-0 z-20 flex h-14 items-center gap-4 border-b border-border bg-background/95 px-6 backdrop-blur supports-[backdrop-filter]:bg-background/60 {className}">
-  {#if title}
-    <h2 class="text-lg font-semibold text-foreground">{title}</h2>
-  {/if}
-
-  <div class="flex-1"></div>
-
-  {#if showSearch}
-    <div class="relative hidden md:block">
-      <Search class="absolute left-2.5 top-2 h-4 w-4 text-muted-foreground" />
-      <input
-        type="search"
-        placeholder={t('common.search')}
-        class="h-8 w-64 rounded-lg border border-input bg-background pl-8 pr-3 text-sm outline-none focus:border-ring focus:ring-1 focus:ring-ring"
-      />
-    </div>
-  {/if}
-
-  {#if actions}
-    {@render actions()}
-  {/if}
-
-  <!-- Theme toggle -->
-  <Button variant="ghost" size="icon-sm" onclick={toggleTheme} title={t('common.toggleTheme')}>
-    {#if getResolvedTheme() === 'dark'}
-      <Sun class="h-4 w-4" />
-    {:else}
-      <Moon class="h-4 w-4" />
+<header class="sticky top-0 z-30 flex h-16 w-full shrink-0 items-center justify-between border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:px-6">
+  <div class="flex items-center gap-4">
+    <!-- Mobile sidebar toggle can go here -->
+  </div>
+  <div class="ml-auto flex items-center gap-4">
+    {#if children}
+      {@render children()}
     {/if}
-  </Button>
-
-  <!-- User info -->
-  {#if identity}
-    <div class="flex items-center gap-2">
-      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
-        {identity.name?.charAt(0).toUpperCase() ?? 'U'}
-      </div>
-      <span class="hidden text-sm font-medium text-foreground md:inline">{identity.name}</span>
-    </div>
-  {/if}
+    
+    {#if showThemeToggle}
+      <Button variant="ghost" size="icon" onclick={() => toggleTheme()} class="rounded-full">
+        {#if getTheme() === 'dark'}
+          <Moon class="h-5 w-5 transition-all" />
+        {:else}
+          <Sun class="h-5 w-5 transition-all" />
+        {/if}
+        <span class="sr-only">Toggle theme</span>
+      </Button>
+    {/if}
+  </div>
 </header>

package/src/components/InferencerPanel.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { getDataProvider, getResources, inferResource } from '@svadmin/core';
+  import type { InferResult, ResourceDefinition } from '@svadmin/core';
+  import { Button } from './ui/button/index.js';
+  import { Wand2, Copy, Check, RefreshCw, Loader2 } from 'lucide-svelte';
+
+  const dataProvider = getDataProvider();
+  const resources = getResources();
+
+  let selectedResource = $state('');
+  let inferResult = $state<InferResult | null>(null);
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+  let copied = $state(false);
+  let customEndpoint = $state('');
+
+  async function runInference() {
+    const resourceName = customEndpoint.trim() || selectedResource;
+    if (!resourceName) return;
+
+    loading = true;
+    error = null;
+    inferResult = null;
+
+    try {
+      const response = await dataProvider.getList({
+        resource: resourceName,
+        pagination: { current: 1, pageSize: 25 },
+      });
+
+      if (!response.data || response.data.length === 0) {
+        error = `No data returned from "${resourceName}". The API must return at least one record to infer fields.`;
+        return;
+      }
+
+      inferResult = inferResource(
+        resourceName,
+        response.data as Record<string, unknown>[],
+      );
+    } catch (e: any) {
+      error = e?.message ?? 'Failed to fetch data for inference.';
+    } finally {
+      loading = false;
+    }
+  }
+
+  function copyCode() {
+    if (!inferResult) return;
+    navigator.clipboard.writeText(inferResult.code);
+    copied = true;
+    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',
+  };
+</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
+    {/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>
+
+    <!-- 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>
+      </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>

package/src/components/ListPage.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { getResource } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
+  import PageHeader from './PageHeader.svelte';
+  import AutoTable from './AutoTable.svelte';
+  import { Button } from './ui/button/index.js';
+  import { Plus } from 'lucide-svelte';
+
+  interface Props {
+    resourceName: string;
+    title?: string;
+    canCreate?: boolean;
+    headerActions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    title,
+    canCreate,
+    headerActions,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const pageTitle = title ?? resource.label;
+  const showCreate = canCreate ?? resource.canCreate !== false;
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      {#if showCreate}
+        <Button onclick={() => navigate(`/${resourceName}/create`)}>
+          <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
+        </Button>
+      {/if}
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoTable {resourceName} />
+</div>

package/src/components/LiveIndicator.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { Wifi, WifiOff, Loader2 } from 'lucide-svelte';
+
+  let {
+    status = 'disconnected',
+    resource = '',
+    lastEvent = null,
+    showDetails = false,
+  } = $props<{
+    status: 'connecting' | 'connected' | 'disconnected';
+    resource?: string;
+    lastEvent?: { type: string; timestamp?: number } | null;
+    showDetails?: boolean;
+  }>();
+
+  const statusConfigs = {
+    connected: { color: 'var(--live-connected, #22c55e)', label: 'Live', icon: Wifi },
+    connecting: { color: 'var(--live-connecting, #f59e0b)', label: 'Connecting...', icon: Loader2 as typeof Wifi },
+    disconnected: { color: 'var(--live-disconnected, #ef4444)', label: 'Offline', icon: WifiOff },
+  } as const;
+  type StatusKey = 'connected' | 'connecting' | 'disconnected';
+  const statusConfig = $derived(statusConfigs[status as StatusKey]);
+
+  const timeSinceEvent = $derived(
+    lastEvent?.timestamp
+      ? Math.floor((Date.now() - lastEvent.timestamp) / 1000)
+      : null
+  );
+</script>
+
+<div class="live-indicator" title={statusConfig.label}>
+  <span class="live-dot" style="--dot-color: {statusConfig.color}">
+    {#if status === 'connected'}
+      <span class="live-pulse"></span>
+    {/if}
+  </span>
+  <span class="live-label" style="color: {statusConfig.color}">
+    {statusConfig.label}
+  </span>
+
+  {#if showDetails && resource}
+    <span class="live-resource">{resource}</span>
+  {/if}
+
+  {#if showDetails && lastEvent}
+    <span class="live-event">
+      {lastEvent.type}
+      {#if timeSinceEvent !== null && timeSinceEvent < 60}
+        <span class="live-time">{timeSinceEvent}s ago</span>
+      {/if}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .live-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    background: hsl(var(--muted) / 0.3);
+    user-select: none;
+  }
+
+  .live-dot {
+    position: relative;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--dot-color);
+    flex-shrink: 0;
+  }
+
+  .live-pulse {
+    position: absolute;
+    inset: -3px;
+    border-radius: 50%;
+    background: var(--dot-color);
+    opacity: 0.4;
+    animation: live-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes live-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.4; }
+    50% { transform: scale(1.8); opacity: 0; }
+  }
+
+  .live-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .live-resource {
+    font-size: 0.625rem;
+    color: hsl(var(--muted-foreground));
+    font-family: monospace;
+  }
+
+  .live-event {
+    font-size: 0.625rem;
+    color: hsl(var(--muted-foreground));
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .live-time {
+    opacity: 0.6;
+  }
+</style>

package/src/components/LoginPage.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import type { AuthProvider } from '@svadmin/core';
+  import { useLogin, getAuthProvider } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
-  import { toast } from '@svadmin/core/toast';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import * as Card from './ui/card/index.js';
   import { LogIn, Mail, Lock, Eye, EyeOff } from 'lucide-svelte';
 
-  let { authProvider, title = 'Admin', onSuccess } = $props<{
-    authProvider: AuthProvider;
+  let { title = 'Admin', onSuccess } = $props<{
     title?: string;
     onSuccess?: () => void;
   }>();
 
+  const login = useLogin();
+  const authProvider = getAuthProvider();
+
   let email = $state('');
   let password = $state('');
-  let loading = $state(false);
   let showPassword = $state(false);
   let error = $state('');
 
@@ -27,20 +27,11 @@
     if (!email) { error = t('auth.emailRequired'); return; }
     if (!password) { error = t('auth.passwordRequired'); return; }
 
-    loading = true;
-    try {
-      const result = await authProvider.login({ email, password });
-      if (result.success) {
-        onSuccess?.();
-        if (result.redirectTo) navigate(result.redirectTo);
-      } else {
-        error = result.error?.message ?? t('common.loginFailed');
-      }
-    } catch (err) {
-      error = err instanceof Error ? err.message : t('common.loginFailed');
-      toast.error(error);
-    } finally {
-      loading = false;
+    const result = await login.mutate({ email, password });
+    if (result.success) {
+      onSuccess?.();
+    } else {
+      error = result.error?.message ?? t('common.loginFailed');
     }
   }
 </script>
@@ -114,8 +105,8 @@
             </div>
           </div>
 
-          <Button type="submit" class="w-full" disabled={loading}>
-            {#if loading}
+          <Button type="submit" class="w-full" disabled={login.isLoading}>
+            {#if login.isLoading}
               <span class="loading-spinner"></span>
             {/if}
             {t('auth.loginButton')}
@@ -183,7 +174,7 @@
     position: relative;
   }
 
-  .input-icon {
+  :global(.input-icon) {
     position: absolute;
     left: 0.75rem;
     top: 50%;

package/src/components/NavigateToResource.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { useMenu } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  
+  const { menuItems } = useMenu();
+
+  $effect(() => {
+    // Automatically navigate to the first defined resource
+    if (menuItems.length > 0) {
+      navigate(menuItems[0].route);
+    }
+  });
+</script>
+
+<div class="flex h-screen w-screen items-center justify-center p-4 text-muted-foreground">
+  <div class="text-center">
+    <div class="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary border-r-transparent"></div>
+    <p>Navigating to default resource...</p>
+  </div>
+</div>

package/src/components/PageSkeleton.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { Skeleton } from './ui/skeleton';
+
+  let {
+    type = 'list',
+    rows = 5,
+  } = $props<{
+    type?: 'list' | 'show' | 'form';
+    rows?: number;
+  }>();
+</script>
+
+<div class="w-full space-y-6">
+  <!-- Header Skeleton -->
+  <div class="flex items-center justify-between">
+    <div class="space-y-2">
+      <Skeleton class="h-8 w-[200px]" />
+      <Skeleton class="h-4 w-[300px]" />
+    </div>
+    {#if type === 'list'}
+      <Skeleton class="h-10 w-[120px]" />
+    {/if}
+  </div>
+
+  <div class="rounded-md border p-4 space-y-4">
+    {#if type === 'list'}
+      <!-- Table Header -->
+      <div class="flex gap-4 border-b pb-4">
+        {#each Array(4) as _}
+          <Skeleton class="h-6 flex-1" />
+        {/each}
+      </div>
+      <!-- Table Rows -->
+      <div class="space-y-4">
+        {#each Array(rows) as _}
+          <div class="flex gap-4">
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+          </div>
+        {/each}
+      </div>
+    {:else if type === 'show'}
+      <!-- Key-Value pairs -->
+      <div class="space-y-6">
+        {#each Array(rows) as _}
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[100px]" />
+            <Skeleton class="h-6 w-[250px]" />
+          </div>
+        {/each}
+      </div>
+    {:else if type === 'form'}
+      <!-- Form Inputs -->
+      <div class="space-y-6">
+        {#each Array(rows) as _}
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[100px]" />
+            <Skeleton class="h-10 w-full max-w-md" />
+          </div>
+        {/each}
+        <div class="pt-4 flex gap-2">
+          <Skeleton class="h-10 w-[100px]" />
+          <Skeleton class="h-10 w-[100px]" />
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>

package/src/components/RegisterPage.svelte

@@ -1,23 +1,22 @@
 <script lang="ts">
-  import type { AuthProvider } from '@svadmin/core';
+  import { useRegister } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
-  import { toast } from '@svadmin/core/toast';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
   import * as Card from './ui/card/index.js';
   import { UserPlus, Mail, Lock, Eye, EyeOff } from 'lucide-svelte';
 
-  let { authProvider, title = 'Admin', onSuccess } = $props<{
-    authProvider: AuthProvider;
+  let { title = 'Admin', onSuccess } = $props<{
     title?: string;
     onSuccess?: () => void;
   }>();
 
+  const register = useRegister();
+
   let email = $state('');
   let password = $state('');
   let confirmPassword = $state('');
-  let loading = $state(false);
   let showPassword = $state(false);
   let error = $state('');
 
@@ -29,21 +28,11 @@
     if (!password) { error = t('auth.passwordRequired'); return; }
     if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
 
-    loading = true;
-    try {
-      const result = await authProvider.register!({ email, password });
-      if (result.success) {
-        toast.success(t('auth.registerSuccess'));
-        onSuccess?.();
-        navigate(result.redirectTo ?? '/login');
-      } else {
-        error = result.error?.message ?? t('common.operationFailed');
-      }
-    } catch (err) {
-      error = err instanceof Error ? err.message : t('common.operationFailed');
-      toast.error(error);
-    } finally {
-      loading = false;
+    const result = await register.mutate({ email, password });
+    if (result.success) {
+      onSuccess?.();
+    } else {
+      error = result.error?.message ?? t('common.operationFailed');
     }
   }
 </script>
@@ -123,8 +112,8 @@
             </div>
           </div>
 
-          <Button type="submit" class="w-full" disabled={loading}>
-            {#if loading}
+          <Button type="submit" class="w-full" disabled={register.isLoading}>
+            {#if register.isLoading}
               <span class="loading-spinner"></span>
             {/if}
             {t('auth.registerButton')}
@@ -190,7 +179,7 @@
     position: relative;
   }
 
-  .input-icon {
+  :global(.input-icon) {
     position: absolute;
     left: 0.75rem;
     top: 50%;

package/src/components/ShowPage.svelte

@@ -43,15 +43,15 @@
     {/if}
   </div>
 
-  {#if query.isLoading}
+  {#if query.query.isLoading}
     <div class="flex h-64 items-center justify-center">
       <Loader2 class="h-6 w-6 animate-spin text-primary" />
     </div>
-  {:else if query.data}
+  {:else if query.query.data?.data}
     <Card.Root>
       <Card.Content class="divide-y divide-border p-0">
         {#each showFields as field}
-          {@const value = (query.data as Record<string, unknown>)[field.key]}
+          {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
           <div class="flex px-6 py-4">
             <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
             <div class="w-2/3 text-sm text-foreground">