@svadmin/ui 0.0.3 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -21,7 +21,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@svadmin/core": "0.1.0",
+    "@svadmin/core": "0.0.5",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",

package/src/components/AdminApp.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode } from '@svadmin/core';
-  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme } from '@svadmin/core';
+  import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider } from '@svadmin/core';
+  import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import Layout from './Layout.svelte';
@@ -12,12 +12,15 @@
   import LoginPage from './LoginPage.svelte';
   import RegisterPage from './RegisterPage.svelte';
   import ForgotPasswordPage from './ForgotPasswordPage.svelte';
+  import UpdatePasswordPage from './UpdatePasswordPage.svelte';
+  import ConfigErrorScreen from './ConfigErrorScreen.svelte';
   import DevTools from './DevTools.svelte';
   import { initRouter, getRoute, getParams } from '../router-state.svelte.js';
 
   interface Props {
     dataProvider: DataProvider;
     authProvider?: AuthProvider;
+    routerProvider?: RouterProvider;
     resources: ResourceDefinition[];
     locale?: string;
     title?: string;
@@ -29,6 +32,7 @@
   let {
     dataProvider,
     authProvider,
+    routerProvider,
     resources,
     locale,
     title = 'Admin',
@@ -37,10 +41,14 @@
     loginPage,
   }: Props = $props();
 
+  // Resolve router provider (default to hash)
+  const resolvedRouter = routerProvider ?? createHashRouterProvider();
+
   // Set up context
   setDataProvider(dataProvider);
   if (authProvider) setAuthProvider(authProvider);
   setResources(resources);
+  setRouterProvider(resolvedRouter);
   if (locale) setLocale(locale);
   if (defaultTheme) setTheme(defaultTheme);
 
@@ -50,23 +58,27 @@
     },
   });
 
-  // Initialize hash router
-  initRouter();
+  // Initialize router with provider
+  initRouter(resolvedRouter);
 
   // Reactive getters for route state
   const route = $derived(getRoute());
   const params = $derived(getParams());
 
   // Auth check
-  let isAuthenticated = $state(!authProvider);
-  let authChecked = $state(!authProvider);
+  let isAuthenticated = $state(false);
+  let authChecked = $state(false);
 
   $effect(() => {
-    if (!authProvider) return;
+    if (!authProvider) {
+      isAuthenticated = true;
+      authChecked = true;
+      return;
+    }
     authProvider.check().then(result => {
       isAuthenticated = result.authenticated;
       authChecked = true;
-      if (!result.authenticated && route !== '/login' && route !== '/register' && route !== '/forgot-password') {
+      if (!result.authenticated && route !== '/login' && route !== '/register' && route !== '/forgot-password' && route !== '/update-password') {
         navigate(result.redirectTo ?? '/login');
       }
     });
@@ -81,18 +93,15 @@
   {:else if route === '/login' && loginPage}
     {@render loginPage()}
   {:else if route === '/login' && authProvider}
-    <LoginPage {authProvider} {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
+    <LoginPage {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
   {:else if route === '/register' && authProvider?.register}
-    <RegisterPage {authProvider} {title} />
+    <RegisterPage {title} />
   {:else if route === '/forgot-password' && authProvider?.forgotPassword}
-    <ForgotPasswordPage {authProvider} {title} />
-  {:else if route === '/login' || route === '/register' || route === '/forgot-password'}
-    <div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
-      <div class="w-full max-w-sm rounded-2xl bg-white dark:bg-gray-900 p-8 shadow-xl text-center">
-        <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">{title}</h1>
-        <p class="mt-2 text-sm text-gray-500">Please configure an authProvider.</p>
-      </div>
-    </div>
+    <ForgotPasswordPage {title} />
+  {:else if route === '/update-password' && authProvider?.updatePassword}
+    <UpdatePasswordPage {title} />
+  {:else if route === '/login' || route === '/register' || route === '/forgot-password' || route === '/update-password'}
+    <ConfigErrorScreen title="{title} — Configuration Required" />
   {:else if isAuthenticated || !authProvider}
     <Layout {title}>
       {#if route === '/'}

package/src/components/Authenticated.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useIsAuthenticated } from '@svadmin/core';
+
+  let { children, fallback, loading } = $props<{
+    children: Snippet;
+    fallback?: Snippet;
+    loading?: Snippet;
+  }>();
+
+  const auth = useIsAuthenticated();
+</script>
+
+{#if auth.isLoading}
+  {#if loading}
+    {@render loading()}
+  {:else}
+    <div class="flex items-center justify-center min-h-[200px]">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+    </div>
+  {/if}
+{:else if auth.isAuthenticated}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

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/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/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%;