@svadmin/ui 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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,14 @@
   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 { initRouter, getRoute, getParams } from '../router-state.svelte.js';
 
   interface Props {
     dataProvider: DataProvider;
@@ -45,27 +46,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);
@@ -104,18 +90,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}

package/src/components/AutoForm.svelte

@@ -61,8 +61,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;
     }
   });
@@ -98,9 +98,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;
@@ -117,7 +117,7 @@
     isDirty = true;
   }
 
-  const isLoading = $derived(mode === 'edit' && existingQuery ? $existingQuery?.isLoading : false);
+  const isLoading = $derived(mode === 'edit' && existingQuery ? existingQuery?.isLoading : false);
 
   const pageTitle = $derived(
     mode === 'create'

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

@@ -51,10 +51,10 @@
     <Loader2 class="h-8 w-8 animate-spin text-primary" />
   </div>
 {:else}
-  <div class="flex h-screen">
+  <div class="flex h-screen bg-gradient-to-br from-background via-background to-muted/30">
     <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     <main
-      class="flex-1 overflow-y-auto p-6 transition-all duration-300"
+      class="flex-1 overflow-y-auto p-8 transition-all duration-300"
       class:ml-64={!collapsed}
       class:ml-16={collapsed}
     >

package/src/components/ShowPage.svelte

@@ -43,15 +43,15 @@
     {/if}
   </div>
 
-  {#if $query.isLoading}
+  {#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.data}
+  {:else if query.data}
     <Card.Root>
       <Card.Content class="divide-y divide-border p-0">
         {#each showFields as field}
-          {@const value = ($query.data as Record<string, unknown>)[field.key]}
+          {@const value = (query.data as Record<string, unknown>)[field.key]}
           <div class="flex px-6 py-4">
             <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
             <div class="w-2/3 text-sm text-foreground">

package/src/components/Sidebar.svelte

@@ -2,14 +2,14 @@
   import { getResources } from '@svadmin/core';
   import type { Identity } from '@svadmin/core';
   import { currentPath, navigate } from '@svadmin/core/router';
-  import { t } from '@svadmin/core/i18n';
-  import { toggleTheme, getResolvedTheme } from '@svadmin/core';
+  import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
+  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import * as Tooltip from './ui/tooltip/index.js';
   import { Separator } from './ui/separator/index.js';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronLeft, ChevronRight, LogOut, Sun, Moon
+    ChevronLeft, ChevronRight, LogOut, Sun, Moon, Languages
   } from 'lucide-svelte';
 
   let { collapsed, identity, title, onToggle, onLogout } = $props<{
@@ -36,14 +36,27 @@
     Icon: typeof LayoutDashboard;
   }
 
-  const navItems: NavItem[] = [
+  // Use $derived so navItems rebuild when locale changes
+  const navItems: NavItem[] = $derived([
     { path: '/', label: t('common.home'), Icon: LayoutDashboard },
     ...resources.map(r => ({
       path: `/${r.name}`,
       label: r.label,
       Icon: iconMap[r.name] ?? Settings,
     })),
-  ];
+  ]);
+
+  /** Toggle between available locales */
+  function toggleLocale() {
+    const locales = getAvailableLocales();
+    const current = getLocale();
+    const idx = locales.indexOf(current);
+    const next = locales[(idx + 1) % locales.length];
+    setLocale(next);
+  }
+
+  /** Short display label for current locale */
+  const localeLabel = $derived(getLocale() === 'zh-CN' ? '中' : 'EN');
 
   // Track current hash for active state
   let path = $state(currentPath());
@@ -60,7 +73,7 @@
 </script>
 
 <aside
-  class="fixed inset-y-0 left-0 z-30 flex flex-col bg-sidebar border-r border-sidebar-border transition-all duration-300"
+  class="fixed inset-y-0 left-0 z-30 flex flex-col bg-sidebar/80 backdrop-blur-xl border-r border-sidebar-border/50 shadow-xl transition-all duration-300"
   class:w-64={!collapsed}
   class:w-16={collapsed}
 >
@@ -123,7 +136,21 @@
 
   <!-- Footer -->
   <Separator class="bg-sidebar-border" />
-  <div class="p-3 space-y-1">
+  <div class="p-3 space-y-2">
+    <!-- Color theme picker -->
+    {#if !collapsed}
+      <div class="flex items-center justify-center gap-1.5 px-2 py-1">
+        {#each colorThemes as ct}
+          <button
+            class="h-5 w-5 rounded-full transition-all duration-200 hover:scale-110 {getColorTheme() === ct.id ? 'ring-2 ring-offset-2 ring-offset-sidebar scale-110' : 'opacity-70 hover:opacity-100'}"
+            style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
+            title={ct.label}
+            onclick={() => setColorTheme(ct.id)}
+          ></button>
+        {/each}
+      </div>
+    {/if}
+
     {#if !collapsed && identity}
       <div class="flex items-center gap-3 rounded-lg px-2 py-2">
         <div class="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium text-sidebar-accent-foreground">
@@ -132,6 +159,9 @@
         <div class="flex-1 min-w-0">
           <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
         </div>
+        <Button variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground" title="Switch language">
+          <span class="text-xs font-bold">{localeLabel}</span>
+        </Button>
         <Button variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground" title={t('common.toggleTheme')}>
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-4 w-4" />
@@ -144,6 +174,9 @@
         </Button>
       </div>
     {:else if collapsed}
+      <Button variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground" title="Switch language">
+        <span class="text-xs font-bold">{localeLabel}</span>
+      </Button>
       <Button variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground" title={t('common.toggleTheme')}>
         {#if getResolvedTheme() === 'dark'}
           <Sun class="h-5 w-5" />
@@ -156,6 +189,9 @@
       </Button>
     {:else}
       <div class="flex gap-1">
+        <Button variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground" title="Switch language">
+          <span class="text-xs font-bold">{localeLabel}</span>
+        </Button>
         <Button variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground" title={t('common.toggleTheme')}>
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-5 w-5" />

package/src/router-state.svelte.ts

@@ -0,0 +1,37 @@
+// Shared reactive hash router state — .svelte.ts enables $state at module level
+import { matchRoute } from '@svadmin/core/router';
+
+let _route = $state('/');
+let _params: Record<string, string> = $state({});
+let _initialized = false;
+
+const ROUTES = [
+  '/login',
+  '/',
+  '/:resource',
+  '/:resource/create',
+  '/:resource/edit/:id',
+  '/:resource/show/:id',
+];
+
+function sync() {
+  const hash = window.location.hash;
+  const m = matchRoute(hash, ROUTES);
+  _route = m?.route ?? '/';
+  _params = m?.params ?? {};
+}
+
+export function initRouter() {
+  if (_initialized) return;
+  _initialized = true;
+  sync();
+  window.addEventListener('hashchange', sync);
+}
+
+export function getRoute(): string {
+  return _route;
+}
+
+export function getParams(): Record<string, string> {
+  return _params;
+}