@svadmin/ui 0.0.3 → 0.0.6

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/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/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/StatsCard.svelte

@@ -1,12 +1,31 @@
 <script lang="ts">
   import { Loader2 } from 'lucide-svelte';
 
+  type ColorVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  type StyleVariant = 'default' | 'outline' | 'filled';
+
+  const colorMap: Record<ColorVariant, string> = {
+    primary: 'bg-primary/10 text-primary',
+    success: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+    warning: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
+    danger: 'bg-red-500/10 text-red-600 dark:text-red-400',
+    info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+  };
+
+  const variantMap: Record<StyleVariant, string> = {
+    default: 'border border-border bg-card shadow-sm',
+    outline: 'border-2 border-border bg-transparent',
+    filled: 'border-0 bg-muted/50 shadow-sm',
+  };
+
   interface Props {
     label: string;
     value: string | number;
     icon?: typeof Loader2;
     trend?: { value: number; label?: string };
     loading?: boolean;
+    color?: ColorVariant;
+    variant?: StyleVariant;
     class?: string;
   }
 
@@ -16,13 +35,15 @@
     icon: Icon,
     trend,
     loading = false,
+    color = 'primary',
+    variant = 'default',
     class: className = '',
   }: Props = $props();
 </script>
 
-<div class="flex items-center gap-4 rounded-xl border border-border bg-card p-5 shadow-sm {className}">
+<div class="flex items-center gap-4 rounded-xl p-5 {variantMap[variant]} {className}">
   {#if Icon}
-    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+    <div class="flex h-12 w-12 items-center justify-center rounded-xl {colorMap[color]}">
       <Icon class="h-6 w-6" />
     </div>
   {/if}

package/src/components/UpdatePasswordPage.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+  import { useUpdatePassword } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { navigate } from '@svadmin/core/router';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import * as Card from './ui/card/index.js';
+  import { Lock, Eye, EyeOff, ShieldCheck } from 'lucide-svelte';
+
+  let { title = 'Admin' } = $props<{
+    title?: string;
+  }>();
+
+  const updatePw = useUpdatePassword();
+
+  let password = $state('');
+  let confirmPassword = $state('');
+  let showPassword = $state(false);
+  let error = $state('');
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    error = '';
+
+    if (!password) { error = t('auth.passwordRequired'); return; }
+    if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
+
+    const result = await updatePw.mutate({ password, confirmPassword });
+    if (!result.success) {
+      error = result.error?.message ?? t('common.operationFailed');
+    }
+  }
+</script>
+
+<div class="auth-page">
+  <div class="auth-container">
+    <Card.Card class="auth-card">
+      <Card.CardHeader class="auth-header">
+        <div class="auth-icon">
+          <ShieldCheck class="h-6 w-6" />
+        </div>
+        <Card.CardTitle class="text-2xl font-bold">{t('auth.resetPassword')}</Card.CardTitle>
+        <p class="text-sm text-muted-foreground">Enter your new password below.</p>
+      </Card.CardHeader>
+      <Card.CardContent>
+        <form onsubmit={handleSubmit} class="space-y-4">
+          {#if error}
+            <div class="error-alert">
+              <p>{error}</p>
+            </div>
+          {/if}
+
+          <div class="space-y-2">
+            <label for="new-password" class="text-sm font-medium text-foreground">{t('auth.password')}</label>
+            <div class="input-with-icon">
+              <Lock class="input-icon h-4 w-4" />
+              <Input
+                id="new-password"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="••••••••"
+                bind:value={password}
+                class="pl-9 pr-9"
+                autocomplete="new-password"
+              />
+              <button
+                type="button"
+                class="password-toggle"
+                onclick={() => showPassword = !showPassword}
+                tabindex={-1}
+              >
+                {#if showPassword}
+                  <EyeOff class="h-4 w-4" />
+                {:else}
+                  <Eye class="h-4 w-4" />
+                {/if}
+              </button>
+            </div>
+          </div>
+
+          <div class="space-y-2">
+            <label for="confirm-password" class="text-sm font-medium text-foreground">{t('auth.confirmPassword')}</label>
+            <div class="input-with-icon">
+              <Lock class="input-icon h-4 w-4" />
+              <Input
+                id="confirm-password"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="••••••••"
+                bind:value={confirmPassword}
+                class="pl-9"
+                autocomplete="new-password"
+              />
+            </div>
+          </div>
+
+          <Button type="submit" class="w-full" disabled={updatePw.isLoading}>
+            {#if updatePw.isLoading}
+              <span class="loading-spinner"></span>
+            {/if}
+            {t('auth.resetPassword')}
+          </Button>
+
+          <div class="auth-link">
+            <button
+              type="button"
+              class="text-sm text-primary hover:underline font-medium"
+              onclick={() => navigate('/login')}
+            >{t('auth.backToLogin')}</button>
+          </div>
+        </form>
+      </Card.CardContent>
+    </Card.Card>
+
+    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
+      Powered by {title}
+    </p>
+  </div>
+</div>
+
+<style>
+  .auth-page {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--background)) 50%, hsl(var(--primary) / 0.04) 100%);
+    padding: 1rem;
+  }
+
+  .auth-container {
+    width: 100%;
+    max-width: 420px;
+  }
+
+  :global(.auth-card) {
+    backdrop-filter: blur(20px);
+    border: 1px solid hsl(var(--border) / 0.5);
+    box-shadow: 0 8px 32px hsl(var(--primary) / 0.08), 0 2px 8px hsl(0 0% 0% / 0.06);
+  }
+
+  :global(.auth-header) {
+    text-align: center;
+    padding-bottom: 0.5rem;
+  }
+
+  .auth-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: hsl(var(--primary) / 0.1);
+    color: hsl(var(--primary));
+    margin: 0 auto 0.75rem;
+  }
+
+  .input-with-icon {
+    position: relative;
+  }
+
+  :global(.input-icon) {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: hsl(var(--muted-foreground));
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .password-toggle {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: hsl(var(--muted-foreground));
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
+    z-index: 1;
+  }
+  .password-toggle:hover {
+    color: hsl(var(--foreground));
+  }
+
+  .error-alert {
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    background: hsl(var(--destructive) / 0.1);
+    border: 1px solid hsl(var(--destructive) / 0.3);
+    color: hsl(var(--destructive));
+    font-size: 0.875rem;
+  }
+
+  .loading-spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+    margin-right: 0.5rem;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .auth-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.5rem;
+  }
+</style>

package/src/components/buttons/CloneButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Copy } from 'lucide-svelte';
+
+  let { resource, recordItemId, hideText = false, accessControl, class: className = '' } = $props<{
+    resource: string;
+    recordItemId: string | number;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+  const can = accessControl?.enabled ? useCan({ resource, action: 'create' }) : null;
+  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+</script>
+
+{#if !hidden}
+  <Button
+    variant="outline"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={can ? !can.allowed : false}
+    onclick={() => nav.clone(resource, recordItemId)}
+  >
+    <Copy class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.clone')}</span>{/if}
+  </Button>
+{/if}

package/src/components/buttons/CreateButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { useNavigation, useCan, t } from '@svadmin/core';
+  import { Button } from '../ui/button/index.js';
+  import { Plus } from 'lucide-svelte';
+
+  let { resource, hideText = false, accessControl, class: className = '' } = $props<{
+    resource: string;
+    hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
+    class?: string;
+  }>();
+
+  const nav = useNavigation();
+  const can = accessControl?.enabled ? useCan({ resource, action: 'create' }) : null;
+  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+</script>
+
+{#if !hidden}
+  <Button
+    variant="default"
+    size={hideText ? 'icon' : 'default'}
+    class={className}
+    disabled={can ? !can.allowed : false}
+    onclick={() => nav.create(resource)}
+  >
+    <Plus class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.create')}</span>{/if}
+  </Button>
+{/if}