@svadmin/ui 0.0.3 → 0.3.0

package/src/components/ConfigErrorScreen.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { AlertTriangle, Copy, CheckCircle } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+
+  let { title = 'Configuration Required', missingVars = [], envTemplate = '' } = $props<{
+    title?: string;
+    missingVars?: { key: string; description?: string }[];
+    envTemplate?: string;
+  }>();
+
+  let copied = $state<Record<string, boolean>>({});
+
+  async function copyToClipboard(text: string, key: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied = { ...copied, [key]: true };
+      setTimeout(() => {
+        copied = { ...copied, [key]: false };
+      }, 2000);
+    } catch {
+      console.warn('[svadmin] clipboard API unavailable');
+    }
+  }
+
+  async function copyAll() {
+    const text = envTemplate || missingVars.map((v: { key: string }) => `${v.key}=`).join('\n');
+    await copyToClipboard(text, '__all__');
+  }
+</script>
+
+<div class="config-error-page">
+  <div class="config-error-container">
+    <Card.Card class="config-error-card">
+      <Card.CardHeader class="config-error-header">
+        <div class="config-error-icon">
+          <AlertTriangle class="h-7 w-7" />
+        </div>
+        <Card.CardTitle class="text-xl font-bold">{title}</Card.CardTitle>
+        <p class="text-sm text-muted-foreground">
+          {t('config.missingEnvDescription')}
+        </p>
+      </Card.CardHeader>
+      <Card.CardContent class="space-y-4">
+        {#if missingVars.length > 0}
+          <div class="env-var-list">
+            {#each missingVars as v (v.key)}
+              <div class="env-var-row">
+                <div class="env-var-info">
+                  <code class="env-var-key">{v.key}</code>
+                  {#if v.description}
+                    <span class="env-var-desc">{v.description}</span>
+                  {/if}
+                </div>
+                <button
+                  class="copy-btn"
+                  onclick={() => copyToClipboard(`${v.key}=`, v.key)}
+                  title="Copy"
+                >
+                  {#if copied[v.key]}
+                    <CheckCircle class="h-3.5 w-3.5 text-green-500" />
+                  {:else}
+                    <Copy class="h-3.5 w-3.5" />
+                  {/if}
+                </button>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        {#if envTemplate}
+          <div class="env-template">
+            <div class="env-template-header">
+              <span class="text-xs font-medium text-muted-foreground">{t('config.envFilePath')}</span>
+              <button
+                class="copy-btn"
+                onclick={copyAll}
+              >
+                {#if copied['__all__']}
+                  <CheckCircle class="h-3.5 w-3.5 text-green-500" />
+                  <span class="text-xs">Copied!</span>
+                {:else}
+                  <Copy class="h-3.5 w-3.5" />
+                  <span class="text-xs">Copy All</span>
+                {/if}
+              </button>
+            </div>
+            <pre class="env-template-code">{envTemplate}</pre>
+          </div>
+        {/if}
+
+        <p class="text-xs text-muted-foreground text-center mt-4">
+          {t('config.reload')}
+        </p>
+
+        <Button variant="outline" class="w-full" onclick={() => window.location.reload()}>
+          Reload Page
+        </Button>
+      </Card.CardContent>
+    </Card.Card>
+  </div>
+</div>
+
+<style>
+  .config-error-page {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, hsl(var(--destructive) / 0.05) 0%, hsl(var(--background)) 50%, hsl(var(--destructive) / 0.03) 100%);
+    padding: 1rem;
+  }
+
+  .config-error-container {
+    width: 100%;
+    max-width: 480px;
+  }
+
+  :global(.config-error-card) {
+    backdrop-filter: blur(20px);
+    border: 1px solid hsl(var(--border) / 0.5);
+    box-shadow: 0 8px 32px hsl(var(--destructive) / 0.08), 0 2px 8px hsl(0 0% 0% / 0.06);
+  }
+
+  :global(.config-error-header) {
+    text-align: center;
+    padding-bottom: 0.5rem;
+  }
+
+  .config-error-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: hsl(var(--destructive) / 0.1);
+    color: hsl(var(--destructive));
+    margin: 0 auto 0.75rem;
+  }
+
+  .env-var-list {
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .env-var-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid hsl(var(--border) / 0.5);
+    gap: 0.5rem;
+  }
+  .env-var-row:last-child {
+    border-bottom: none;
+  }
+
+  .env-var-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .env-var-key {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+    font-family: monospace;
+  }
+
+  .env-var-desc {
+    font-size: 0.6875rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .copy-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    color: hsl(var(--muted-foreground));
+    border-radius: 0.25rem;
+    transition: all 0.15s;
+    flex-shrink: 0;
+  }
+  .copy-btn:hover {
+    color: hsl(var(--foreground));
+    background: hsl(var(--muted) / 0.5);
+  }
+
+  .env-template {
+    border: 1px solid hsl(var(--border));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .env-template-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    background: hsl(var(--muted) / 0.5);
+    border-bottom: 1px solid hsl(var(--border) / 0.5);
+  }
+
+  .env-template-code {
+    padding: 0.75rem;
+    font-size: 0.75rem;
+    font-family: monospace;
+    line-height: 1.6;
+    color: hsl(var(--foreground));
+    background: hsl(var(--muted) / 0.2);
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+</style>

package/src/components/ConfirmDialog.svelte

@@ -37,7 +37,7 @@
       <Button variant="outline" onclick={oncancel}>
         {resolvedCancelText}
       </Button>
-      <Button variant={variantMap[variant]} onclick={onconfirm}>
+      <Button variant={variantMap[variant as keyof typeof variantMap]} onclick={onconfirm}>
         {resolvedConfirmText}
       </Button>
     </Dialog.Footer>

package/src/components/CreatePage.svelte

@@ -0,0 +1,42 @@
+<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 AutoForm from './AutoForm.svelte';
+  import { ArrowLeft } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+
+  interface Props {
+    resourceName: string;
+    title?: string;
+    headerActions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    title,
+    headerActions,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const pageTitle = title ?? `${t('common.create')}${resource.label}`;
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
+        <ArrowLeft class="h-5 w-5" />
+      </Button>
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoForm {resourceName} mode="create" />
+</div>

package/src/components/DevTools.svelte

@@ -4,10 +4,12 @@
   import { getLocale } from '@svadmin/core/i18n';
   import { currentPath } from '@svadmin/core/router';
   import { Button } from './ui/button/index.js';
-  import { X, Bug, ChevronDown, ChevronUp } from 'lucide-svelte';
+  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;
@@ -53,44 +55,57 @@
       </div>
 
       {#if !collapsed}
-        <div class="devtools-body">
-          <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-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-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 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>
 
-          <div class="devtools-section">
-            <h4>i18n</h4>
-            <div class="devtools-row">
-              <span class="devtools-label">Locale</span>
-              <code class="devtools-value">{locale}</code>
+            <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>
 
-          <div class="devtools-section">
-            <h4>Resources ({resources.length})</h4>
-            {#each resources as r}
+            <div class="devtools-section">
+              <h4>i18n</h4>
               <div class="devtools-row">
-                <span class="devtools-label">{r.name}</span>
-                <code class="devtools-value">{r.fields.length} fields</code>
+                <span class="devtools-label">Locale</span>
+                <code class="devtools-value">{locale}</code>
               </div>
-            {/each}
-          </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>
@@ -107,7 +122,8 @@
     bottom: 0;
     right: 1rem;
     z-index: 9999;
-    width: 320px;
+    width: 420px;
+    max-width: 95vw;
     background: hsl(var(--card));
     border: 1px solid hsl(var(--border));
     border-bottom: none;
@@ -161,7 +177,7 @@
   }
 
   .devtools-body {
-    max-height: 300px;
+    max-height: 400px;
     overflow-y: auto;
     padding: 0.5rem;
   }
@@ -228,4 +244,37 @@
     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/EditPage.svelte

@@ -0,0 +1,52 @@
+<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 AutoForm from './AutoForm.svelte';
+  import { ArrowLeft, Trash2 } from 'lucide-svelte';
+  import { Button } from './ui/button/index.js';
+
+  interface Props {
+    resourceName: string;
+    id: string | number;
+    title?: string;
+    canDelete?: boolean;
+    headerActions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    id,
+    title,
+    canDelete,
+    headerActions,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const pageTitle = title ?? `${t('common.edit')} ${resource.label} #${id}`;
+  const showDelete = canDelete ?? resource.canDelete !== false;
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      <Button variant="ghost" size="icon" onclick={() => navigate(`/${resourceName}`)}>
+        <ArrowLeft class="h-5 w-5" />
+      </Button>
+      {#if showDelete}
+        <Button variant="destructive" size="sm">
+          <Trash2 class="h-4 w-4" data-icon="inline-start" /> {t('common.delete')}
+        </Button>
+      {/if}
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoForm {resourceName} mode="edit" {id} />
+</div>

package/src/components/EmptyState.svelte

@@ -1,41 +1,27 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { t } from '@svadmin/core/i18n';
-  import { Button } from './ui/button/index.js';
-  import { InboxIcon } from 'lucide-svelte';
+  import { PackageOpen } from 'lucide-svelte';
+  import { t } from '@svadmin/core';
 
-  interface Props {
-    icon?: typeof InboxIcon;
+  let {
+    title = t('empty.title'),
+    description = t('empty.description'),
+    children,
+  } = $props<{
     title?: string;
     description?: string;
-    action?: Snippet;
-    class?: string;
-  }
-
-  let {
-    icon: Icon = InboxIcon,
-    title,
-    description,
-    action,
-    class: className = '',
-  }: Props = $props();
+    children?: import('svelte').Snippet;
+  }>();
 </script>
 
-<div class="flex flex-col items-center justify-center py-16 text-center {className}">
-  <div class="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
-    <Icon class="h-8 w-8 text-muted-foreground" />
+<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card rounded-lg border border-dashed border-border/50 shadow-sm transition-all duration-300">
+  <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">
+    <PackageOpen class="h-10 w-10 text-muted-foreground" />
   </div>
-  <h3 class="text-lg font-semibold text-foreground">
-    {title ?? t('common.noData')}
-  </h3>
-  {#if description}
-    <p class="mt-1 text-sm text-muted-foreground max-w-sm">
-      {description}
-    </p>
-  {/if}
-  {#if action}
-    <div class="mt-4">
-      {@render action()}
+  <h3 class="text-lg font-semibold tracking-tight">{title}</h3>
+  <p class="text-sm text-muted-foreground mt-2 max-w-sm">{description}</p>
+  {#if children}
+    <div class="mt-6">
+      {@render children()}
     </div>
   {/if}
 </div>

package/src/components/ErrorComponent.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { AlertTriangle, AlertCircle } from 'lucide-svelte';
+  import { t } from '@svadmin/core';
+  import { Button } from './ui/button';
+
+  let {
+    error,
+    title = t('error.title'),
+    description = t('error.description'),
+    retry,
+  } = $props<{
+    error?: Error | null;
+    title?: string;
+    description?: string;
+    retry?: () => void;
+  }>();
+</script>
+
+<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-destructive/5 rounded-lg border border-destructive/20 text-destructive transition-all duration-300">
+  <div class="h-16 w-16 rounded-full bg-destructive/10 flex items-center justify-center mb-4">
+    <AlertTriangle class="h-8 w-8 text-destructive" />
+  </div>
+  <h3 class="text-lg font-semibold">{title}</h3>
+  <p class="text-sm opacity-90 mt-2 max-w-md">
+    {error?.message || description}
+  </p>
+  {#if retry}
+    <div class="mt-6">
+      <Button variant="outline" class="border-destructive/30 hover:bg-destructive/10 text-destructive" onclick={retry}>
+        <AlertCircle class="mr-2 h-4 w-4" />
+        {t('buttons.retry')}
+      </Button>
+    </div>
+  {/if}
+</div>

package/src/components/ForgotPasswordPage.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
-  import type { AuthProvider } from '@svadmin/core';
+  import { useForgotPassword } 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 { KeyRound, Mail, ArrowLeft, CheckCircle } from 'lucide-svelte';
 
-  let { authProvider, title = 'Admin' } = $props<{
-    authProvider: AuthProvider;
+  let { title = 'Admin' } = $props<{
     title?: string;
   }>();
 
+  const forgot = useForgotPassword();
+
   let email = $state('');
-  let loading = $state(false);
   let error = $state('');
   let sent = $state(false);
 
@@ -24,20 +23,11 @@
 
     if (!email) { error = t('auth.emailRequired'); return; }
 
-    loading = true;
-    try {
-      const result = await authProvider.forgotPassword!({ email });
-      if (result.success) {
-        sent = true;
-        toast.success(t('auth.resetLinkSent'));
-      } 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 forgot.mutate({ email });
+    if (result.success) {
+      sent = true;
+    } else {
+      error = result.error?.message ?? t('common.operationFailed');
     }
   }
 </script>
@@ -94,8 +84,8 @@
               </div>
             </div>
 
-            <Button type="submit" class="w-full" disabled={loading}>
-              {#if loading}
+            <Button type="submit" class="w-full" disabled={forgot.isLoading}>
+              {#if forgot.isLoading}
                 <span class="loading-spinner"></span>
               {/if}
               {t('auth.sendResetLink')}
@@ -164,7 +154,7 @@
     position: relative;
   }
 
-  .input-icon {
+  :global(.input-icon) {
     position: absolute;
     left: 0.75rem;
     top: 50%;