@svadmin/ui 0.0.2 → 0.0.6

package/src/components/DevTools.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+  import { getResources } from '@svadmin/core';
+  import { getTheme, getColorTheme } from '@svadmin/core';
+  import { getLocale } from '@svadmin/core/i18n';
+  import { currentPath } from '@svadmin/core/router';
+  import { Button } from './ui/button/index.js';
+  import { X, Bug, ChevronDown, ChevronUp, Wand2 } from 'lucide-svelte';
+  import InferencerPanel from './InferencerPanel.svelte';
+
+  let visible = $state(false);
+  let collapsed = $state(false);
+  let activeTab = $state<'state' | 'inferencer'>('state');
+
+  function toggle() {
+    visible = !visible;
+  }
+
+  // Keyboard shortcut: Ctrl+Shift+D
+  if (typeof window !== 'undefined') {
+    window.addEventListener('keydown', (e) => {
+      if (e.ctrlKey && e.shiftKey && e.key === 'D') {
+        e.preventDefault();
+        toggle();
+      }
+    });
+  }
+
+  const resources = $derived((() => { try { return getResources(); } catch { return []; } })());
+  const path = $derived(currentPath());
+  const theme = $derived(getTheme());
+  const colorTheme = $derived(getColorTheme());
+  const locale = $derived(getLocale());
+</script>
+
+{#if import.meta.env.DEV}
+  {#if visible}
+    <div class="devtools-panel" class:collapsed>
+      <div class="devtools-header">
+        <div class="devtools-title">
+          <Bug class="h-4 w-4" />
+          <span>svadmin DevTools</span>
+        </div>
+        <div class="devtools-header-actions">
+          <button onclick={() => collapsed = !collapsed} class="devtools-btn">
+            {#if collapsed}
+              <ChevronUp class="h-3.5 w-3.5" />
+            {:else}
+              <ChevronDown class="h-3.5 w-3.5" />
+            {/if}
+          </button>
+          <button onclick={toggle} class="devtools-btn">
+            <X class="h-3.5 w-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {#if !collapsed}
+        <div class="devtools-tabs">
+          <button class="devtools-tab" class:active={activeTab === 'state'} onclick={() => activeTab = 'state'}>
+            State
+          </button>
+          <button class="devtools-tab" class:active={activeTab === 'inferencer'} onclick={() => activeTab = 'inferencer'}>
+            <Wand2 class="h-3 w-3" /> Inferencer
+          </button>
+        </div>
+
+        <div class="devtools-body">
+          {#if activeTab === 'state'}
+            <div class="devtools-section">
+              <h4>Router</h4>
+              <div class="devtools-row">
+                <span class="devtools-label">Path</span>
+                <code class="devtools-value">{path}</code>
+              </div>
+            </div>
+
+            <div class="devtools-section">
+              <h4>Theme</h4>
+              <div class="devtools-row">
+                <span class="devtools-label">Mode</span>
+                <code class="devtools-value">{theme}</code>
+              </div>
+              <div class="devtools-row">
+                <span class="devtools-label">Color</span>
+                <code class="devtools-value">{colorTheme}</code>
+              </div>
+            </div>
+
+            <div class="devtools-section">
+              <h4>i18n</h4>
+              <div class="devtools-row">
+                <span class="devtools-label">Locale</span>
+                <code class="devtools-value">{locale}</code>
+              </div>
+            </div>
+
+            <div class="devtools-section">
+              <h4>Resources ({resources.length})</h4>
+              {#each resources as r}
+                <div class="devtools-row">
+                  <span class="devtools-label">{r.name}</span>
+                  <code class="devtools-value">{r.fields.length} fields</code>
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <InferencerPanel />
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <button class="devtools-fab" onclick={toggle} title="DevTools (Ctrl+Shift+D)">
+      <Bug class="h-4 w-4" />
+    </button>
+  {/if}
+{/if}
+
+<style>
+  .devtools-panel {
+    position: fixed;
+    bottom: 0;
+    right: 1rem;
+    z-index: 9999;
+    width: 420px;
+    max-width: 95vw;
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    border-bottom: none;
+    border-radius: 0.75rem 0.75rem 0 0;
+    box-shadow: 0 -4px 24px hsl(0 0% 0% / 0.12);
+    font-size: 0.8125rem;
+    overflow: hidden;
+  }
+
+  .devtools-panel.collapsed {
+    width: auto;
+    min-width: 200px;
+  }
+
+  .devtools-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    background: hsl(var(--muted));
+    border-bottom: 1px solid hsl(var(--border));
+  }
+
+  .devtools-title {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-weight: 600;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--foreground));
+  }
+
+  .devtools-header-actions {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .devtools-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    color: hsl(var(--muted-foreground));
+    border-radius: 0.25rem;
+  }
+  .devtools-btn:hover {
+    background: hsl(var(--accent));
+    color: hsl(var(--foreground));
+  }
+
+  .devtools-body {
+    max-height: 400px;
+    overflow-y: auto;
+    padding: 0.5rem;
+  }
+
+  .devtools-section {
+    padding: 0.375rem 0;
+  }
+
+  .devtools-section h4 {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: hsl(var(--muted-foreground));
+    margin: 0 0 0.25rem;
+    padding: 0 0.25rem;
+  }
+
+  .devtools-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.1875rem 0.25rem;
+    border-radius: 0.25rem;
+  }
+  .devtools-row:hover {
+    background: hsl(var(--muted) / 0.5);
+  }
+
+  .devtools-label {
+    color: hsl(var(--foreground));
+    font-size: 0.75rem;
+  }
+
+  .devtools-value {
+    font-size: 0.6875rem;
+    color: hsl(var(--primary));
+    background: hsl(var(--primary) / 0.1);
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    font-family: monospace;
+  }
+
+  .devtools-fab {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 9999;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px hsl(var(--primary) / 0.3);
+    transition: all 0.2s;
+    opacity: 0.6;
+  }
+  .devtools-fab:hover {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+  .devtools-tabs {
+    display: flex;
+    border-bottom: 1px solid hsl(var(--border));
+  }
+
+  .devtools-tab {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: hsl(var(--muted-foreground));
+    border-bottom: 2px solid transparent;
+    transition: all 0.15s;
+  }
+
+  .devtools-tab:hover {
+    color: hsl(var(--foreground));
+    background: hsl(var(--muted) / 0.3);
+  }
+
+  .devtools-tab.active {
+    color: hsl(var(--primary));
+    border-bottom-color: hsl(var(--primary));
+  }
+</style>

package/src/components/DrawerForm.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { getResource } from '@svadmin/core';
+  import { Sheet } from './ui/sheet/index.js';
+  import AutoForm from './AutoForm.svelte';
+
+  let { resourceName, mode = 'create', id, open = $bindable(false), side = 'right' } = $props<{
+    resourceName: string;
+    mode?: 'create' | 'edit';
+    id?: string | number;
+    open: boolean;
+    side?: 'left' | 'right';
+  }>();
+
+  const resource = $derived(getResource(resourceName));
+</script>
+
+{#if open}
+  <Sheet bind:open {side}>
+    <div class="p-6 space-y-4">
+      <h2 class="text-lg font-semibold text-foreground">
+        {mode === 'create' ? `Create ${resource.label}` : `Edit ${resource.label}`}
+      </h2>
+      <AutoForm {resourceName} {mode} {id} />
+    </div>
+  </Sheet>
+{/if}

package/src/components/ForgotPasswordPage.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import { useForgotPassword } 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 { KeyRound, Mail, ArrowLeft, CheckCircle } from 'lucide-svelte';
+
+  let { title = 'Admin' } = $props<{
+    title?: string;
+  }>();
+
+  const forgot = useForgotPassword();
+
+  let email = $state('');
+  let error = $state('');
+  let sent = $state(false);
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    error = '';
+
+    if (!email) { error = t('auth.emailRequired'); return; }
+
+    const result = await forgot.mutate({ email });
+    if (result.success) {
+      sent = true;
+    } else {
+      error = result.error?.message ?? t('common.operationFailed');
+    }
+  }
+</script>
+
+<div class="forgot-page">
+  <div class="forgot-container">
+    <Card.Card class="login-card">
+      <Card.CardHeader class="login-header">
+        <div class="forgot-icon">
+          {#if sent}
+            <CheckCircle class="h-6 w-6" />
+          {:else}
+            <KeyRound class="h-6 w-6" />
+          {/if}
+        </div>
+        <Card.CardTitle class="text-2xl font-bold">
+          {sent ? t('auth.resetLinkSent') : t('auth.forgotPassword')}
+        </Card.CardTitle>
+        {#if !sent}
+          <p class="text-sm text-muted-foreground">{t('auth.forgotPasswordDescription')}</p>
+        {/if}
+      </Card.CardHeader>
+      <Card.CardContent>
+        {#if sent}
+          <div class="success-state">
+            <p class="text-sm text-muted-foreground text-center mb-4">
+              {t('auth.resetLinkSent')}
+            </p>
+            <Button variant="outline" class="w-full" onclick={() => navigate('/login')}>
+              <ArrowLeft class="h-4 w-4 mr-2" />
+              {t('auth.backToLogin')}
+            </Button>
+          </div>
+        {:else}
+          <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="forgot-email" class="text-sm font-medium text-foreground">{t('auth.email')}</label>
+              <div class="input-with-icon">
+                <Mail class="input-icon h-4 w-4" />
+                <Input
+                  id="forgot-email"
+                  type="email"
+                  placeholder="name@example.com"
+                  bind:value={email}
+                  class="pl-9"
+                  autocomplete="email"
+                />
+              </div>
+            </div>
+
+            <Button type="submit" class="w-full" disabled={forgot.isLoading}>
+              {#if forgot.isLoading}
+                <span class="loading-spinner"></span>
+              {/if}
+              {t('auth.sendResetLink')}
+            </Button>
+          </form>
+
+          <div class="auth-link">
+            <button
+              type="button"
+              class="text-sm text-primary hover:underline font-medium inline-flex items-center gap-1"
+              onclick={() => navigate('/login')}
+            >
+              <ArrowLeft class="h-3 w-3" />
+              {t('auth.backToLogin')}
+            </button>
+          </div>
+        {/if}
+      </Card.CardContent>
+    </Card.Card>
+
+    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
+      Powered by {title}
+    </p>
+  </div>
+</div>
+
+<style>
+  .forgot-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;
+  }
+
+  .forgot-container {
+    width: 100%;
+    max-width: 420px;
+  }
+
+  .forgot-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;
+  }
+
+  :global(.login-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(.login-header) {
+    text-align: center;
+    padding-bottom: 0.5rem;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .success-state {
+    padding: 0.5rem 0;
+  }
+
+  .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: 1.25rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid hsl(var(--border));
+  }
+</style>

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>