@svadmin/ui 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/app.css

@@ -1,40 +1,7 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
+/* @svadmin/ui — Design tokens (CSS custom properties)
+ * Import this in your app's CSS AFTER @import "tailwindcss"
+ * or import it standalone for the color variables.
+ */
 
 :root {
   --radius: 0.625rem;
@@ -95,17 +62,6 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground m-0;
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
-    -webkit-font-smoothing: antialiased;
-  }
-}
-
 /* Scrollbar styling */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }

package/src/components/AdminApp.svelte

@@ -2,13 +2,18 @@
   import type { Snippet } from 'svelte';
   import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode } from '@svadmin/core';
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme } from '@svadmin/core';
-  import { matchRoute, currentPath, navigate } from '@svadmin/core/router';
+  import { navigate } from '@svadmin/core/router';
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import Layout from './Layout.svelte';
   import AutoTable from './AutoTable.svelte';
   import AutoForm from './AutoForm.svelte';
   import ShowPage from './ShowPage.svelte';
   import Toast from './Toast.svelte';
+  import LoginPage from './LoginPage.svelte';
+  import RegisterPage from './RegisterPage.svelte';
+  import ForgotPasswordPage from './ForgotPasswordPage.svelte';
+  import DevTools from './DevTools.svelte';
+  import { initRouter, getRoute, getParams } from '../router-state.svelte.js';
 
   interface Props {
     dataProvider: DataProvider;
@@ -45,27 +50,12 @@
     },
   });
 
-  // Router state
-  const routes = [
-    '/login',
-    '/',
-    '/:resource',
-    '/:resource/create',
-    '/:resource/edit/:id',
-    '/:resource/show/:id',
-  ];
+  // Initialize hash router
+  initRouter();
 
-  let hash = $state(window.location.hash);
-
-  $effect(() => {
-    const handler = () => { hash = window.location.hash; };
-    window.addEventListener('hashchange', handler);
-    return () => window.removeEventListener('hashchange', handler);
-  });
-
-  const match = $derived(matchRoute(hash, routes));
-  const route = $derived(match?.route ?? '/');
-  const params = $derived(match?.params ?? {});
+  // Reactive getters for route state
+  const route = $derived(getRoute());
+  const params = $derived(getParams());
 
   // Auth check
   let isAuthenticated = $state(!authProvider);
@@ -76,7 +66,7 @@
     authProvider.check().then(result => {
       isAuthenticated = result.authenticated;
       authChecked = true;
-      if (!result.authenticated && route !== '/login') {
+      if (!result.authenticated && route !== '/login' && route !== '/register' && route !== '/forgot-password') {
         navigate(result.redirectTo ?? '/login');
       }
     });
@@ -90,11 +80,17 @@
     </div>
   {:else if route === '/login' && loginPage}
     {@render loginPage()}
-  {:else if route === '/login'}
-    <div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div class="w-full max-w-sm rounded-2xl bg-white p-8 shadow-xl text-center">
-        <h1 class="text-xl font-bold text-gray-900">{title}</h1>
-        <p class="mt-2 text-sm text-gray-500">Please configure a loginPage snippet or authProvider.</p>
+  {:else if route === '/login' && authProvider}
+    <LoginPage {authProvider} {title} onSuccess={() => { isAuthenticated = true; navigate('/'); }} />
+  {:else if route === '/register' && authProvider?.register}
+    <RegisterPage {authProvider} {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>
   {:else if isAuthenticated || !authProvider}
@@ -104,18 +100,26 @@
           {@render dashboard()}
         {:else}
           <div class="space-y-4">
-            <h1 class="text-2xl font-bold text-gray-900">Welcome to {title}</h1>
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Welcome to {title}</h1>
             <p class="text-gray-500">Select a resource from the sidebar to get started.</p>
           </div>
         {/if}
       {:else if route === '/:resource'}
-        <AutoTable resourceName={params.resource} />
+        {#key params.resource}
+          <AutoTable resourceName={params.resource} />
+        {/key}
       {:else if route === '/:resource/create'}
-        <AutoForm resourceName={params.resource} mode="create" />
+        {#key params.resource}
+          <AutoForm resourceName={params.resource} mode="create" />
+        {/key}
       {:else if route === '/:resource/edit/:id'}
-        <AutoForm resourceName={params.resource} mode="edit" id={params.id} />
+        {#key `${params.resource}-${params.id}`}
+          <AutoForm resourceName={params.resource} mode="edit" id={params.id} />
+        {/key}
       {:else if route === '/:resource/show/:id'}
-        <ShowPage resourceName={params.resource} id={params.id} />
+        {#key `${params.resource}-${params.id}`}
+          <ShowPage resourceName={params.resource} id={params.id} />
+        {/key}
       {/if}
     </Layout>
   {:else}
@@ -124,4 +128,5 @@
     </div>
   {/if}
   <Toast />
+  <DevTools />
 </QueryClientProvider>

package/src/components/AutoForm.svelte

@@ -34,6 +34,7 @@
 
   // Form state
   let formData = $state<Record<string, unknown>>({});
+  let fieldErrors = $state<Record<string, string>>({});
   let submitting = $state(false);
   let error = $state<string | null>(null);
   let initialized = $state(false);
@@ -61,8 +62,8 @@
       }
       formData = defaults;
       initialized = true;
-    } else if (existingQuery && $existingQuery?.data) {
-      formData = { ...$existingQuery.data as Record<string, unknown> };
+    } else if (existingQuery && existingQuery?.data) {
+      formData = { ...existingQuery.data as Record<string, unknown> };
       initialized = true;
     }
   });
@@ -84,10 +85,36 @@
   const createMut = useCreate(resourceName);
   const updateMut = useUpdate(resourceName);
 
+  function validateFields(): boolean {
+    const errors: Record<string, string> = {};
+    for (const field of formFields) {
+      const value = formData[field.key];
+      // Required check
+      if (field.required) {
+        if (value === undefined || value === null || value === '') {
+          errors[field.key] = t('validation.required');
+          continue;
+        }
+      }
+      // Custom per-field validator
+      if (field.validate) {
+        const msg = field.validate(value);
+        if (msg) { errors[field.key] = msg; }
+      }
+    }
+    fieldErrors = errors;
+    return Object.keys(errors).length === 0;
+  }
+
   async function handleSubmit() {
     submitting = true;
     error = null;
 
+    if (!validateFields()) {
+      submitting = false;
+      return;
+    }
+
     try {
       const cleanData: Record<string, unknown> = {};
       for (const field of formFields) {
@@ -98,9 +125,9 @@
       }
 
       if (mode === 'create') {
-        await $createMut.mutateAsync(cleanData);
+        await createMut.mutateAsync(cleanData);
       } else if (id != null) {
-        await $updateMut.mutateAsync({ id, variables: cleanData });
+        await updateMut.mutateAsync({ id, variables: cleanData });
       }
 
       isDirty = false;
@@ -115,9 +142,15 @@
   function handleFieldChange(key: string, val: unknown) {
     formData[key] = val;
     isDirty = true;
+    // Clear field error when user starts typing
+    if (fieldErrors[key]) {
+      const next = { ...fieldErrors };
+      delete next[key];
+      fieldErrors = next;
+    }
   }
 
-  const isLoading = $derived(mode === 'edit' && existingQuery ? $existingQuery?.isLoading : false);
+  const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery?.isLoading : false);
 
   const pageTitle = $derived(
     mode === 'create'
@@ -158,11 +191,16 @@
       <Card.Root>
         <Card.Content class="space-y-5">
           {#each formFields as field (field.key)}
-            <FieldRenderer
-              {field}
-              value={formData[field.key]}
-              onchange={(val: unknown) => handleFieldChange(field.key, val)}
-            />
+            <div class="field-wrapper" class:has-error={fieldErrors[field.key]}>
+              <FieldRenderer
+                {field}
+                value={formData[field.key]}
+                onchange={(val: unknown) => handleFieldChange(field.key, val)}
+              />
+              {#if fieldErrors[field.key]}
+                <p class="field-error">{fieldErrors[field.key]}</p>
+              {/if}
+            </div>
           {/each}
         </Card.Content>
       </Card.Root>
@@ -190,3 +228,17 @@
     </form>
   {/if}
 </div>
+
+<style>
+  .field-error {
+    color: hsl(var(--destructive));
+    font-size: 0.8125rem;
+    margin-top: 0.25rem;
+  }
+
+  .field-wrapper.has-error :global(input),
+  .field-wrapper.has-error :global(textarea),
+  .field-wrapper.has-error :global(select) {
+    border-color: hsl(var(--destructive));
+  }
+</style>

package/src/components/AutoTable.svelte

@@ -102,7 +102,7 @@
       selectedIds = new Set();
       selectAll = false;
     } else {
-      const allIds = ($query.data?.data ?? []).map(r => r[primaryKey] as string | number);
+      const allIds = (query.data?.data ?? []).map(r => r[primaryKey] as string | number);
       selectedIds = new Set(allIds);
       selectAll = true;
     }
@@ -111,7 +111,7 @@
   function confirmDelete(id: string | number) {
     confirmMessage = t('common.deleteConfirm');
     confirmAction = async () => {
-      await $deleteMutation.mutateAsync(id);
+      await deleteMutation.mutateAsync(id);
       confirmOpen = false;
     };
     confirmOpen = true;
@@ -121,7 +121,7 @@
     confirmMessage = t('common.batchDeleteConfirm', { count: selectedIds.size });
     confirmAction = async () => {
       for (const id of selectedIds) {
-        await $deleteMutation.mutateAsync(id);
+        await deleteMutation.mutateAsync(id);
       }
       selectedIds = new Set();
       selectAll = false;
@@ -132,7 +132,7 @@
 
   // CSV Export
   function exportCSV() {
-    const data = $query.data?.data ?? [];
+    const data = query.data?.data ?? [];
     if (data.length === 0) return;
 
     const headers = listFields.map(f => f.label);
@@ -173,7 +173,7 @@
   const canDelete = canAccess(resourceName, 'delete').can && resource.canDelete !== false;
   const canExport = canAccess(resourceName, 'export').can;
 
-  const totalPages = $derived(Math.ceil(($query.data?.total ?? 0) / (pagination.pageSize ?? 10)));
+  const totalPages = $derived(Math.ceil((query.data?.total ?? 0) / (pagination.pageSize ?? 10)));
 </script>
 
 <div class="space-y-4">
@@ -217,14 +217,14 @@
   {/if}
 
   <!-- Table -->
-  <div class="rounded-xl border border-border bg-card shadow-sm">
-    {#if $query.isLoading}
+  <div class="rounded-xl border border-border/60 bg-card shadow-md overflow-hidden">
+    {#if 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.error}
+    {:else if query.error}
       <div class="flex h-64 items-center justify-center text-destructive text-sm">
-        {t('common.loadFailed', { message: ($query.error as Error).message })}
+        {t('common.loadFailed', { message: (query.error as Error).message })}
       </div>
     {:else}
       <Table.Root>
@@ -247,9 +247,9 @@
           </Table.Row>
         </Table.Header>
         <Table.Body>
-          {#each $query.data?.data ?? [] as record}
+          {#each query.data?.data ?? [] as record}
             {@const id = record[primaryKey] as string | number}
-            <Table.Row class={selectedIds.has(id) ? 'bg-accent' : ''}>
+            <Table.Row class="transition-colors {selectedIds.has(id) ? 'bg-accent' : ''}">
               {#if canDelete}
                 <Table.Cell>
                   <Checkbox checked={selectedIds.has(id)} onCheckedChange={() => toggleSelect(id)} />
@@ -313,7 +313,7 @@
 
   <!-- Pagination -->
   <div class="flex items-center justify-between text-sm text-muted-foreground">
-    <span>{t('common.total', { total: $query.data?.total ?? 0 })}</span>
+    <span>{t('common.total', { total: query.data?.total ?? 0 })}</span>
     <div class="flex items-center gap-2">
       <Button
         variant="outline" size="icon-sm"

package/src/components/CanAccess.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { canAccess } from '@svadmin/core/permissions';
+  import type { Action } from '@svadmin/core/permissions';
+
+  let { resource, action, params, children, fallback } = $props<{
+    resource: string;
+    action: Action;
+    params?: Record<string, unknown>;
+    children: Snippet;
+    fallback?: Snippet;
+  }>();
+
+  const result = $derived(canAccess(resource, action, params));
+</script>
+
+{#if result.can}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

package/src/components/DevTools.svelte

@@ -0,0 +1,231 @@
+<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 } from 'lucide-svelte';
+
+  let visible = $state(false);
+  let collapsed = $state(false);
+
+  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-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-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>
+        </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: 320px;
+    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: 300px;
+    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);
+  }
+</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}