@svadmin/ui 0.4.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.4.1",
+  "version": "0.5.2",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -40,7 +40,8 @@
   "author": "zuohuadong",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zuohuadong/svadmin.git"
+    "url": "https://github.com/zuohuadong/svadmin.git",
+    "directory": "packages/ui"
   },
   "homepage": "https://github.com/zuohuadong/svadmin#readme",
   "bugs": {

package/src/app.css

@@ -1,65 +1,94 @@
-/* @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.
+/* @svadmin/ui — Design Tokens (Shadcn New York style)
+ * Auto-imported by AdminApp. Can be overridden by consumer's CSS.
+ *
+ * Based on shadcn/ui "New York" theme with oklch() color space.
+ * Differences from "Default" style:
+ *   - Smaller border-radius (0.5rem vs 0.625rem)
+ *   - Refined color palette with deeper contrast
+ *   - Chart color tokens included
+ *   - More polished dark mode
  */
 
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+@layer base {
+  :root {
+    --radius: 0.5rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.965 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.965 0 0);
+    --muted-foreground: oklch(0.45 0 0);
+    --accent: oklch(0.965 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.965 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+
+  .dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.178 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.178 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.985 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.178 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+  }
 }
 
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+/* Typography — Inter font via Bunny Fonts (global CDN, works in China) */
+@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');
+
+body {
+  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Scrollbar styling */
@@ -67,3 +96,5 @@
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: oklch(0.8 0 0); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: oklch(0.65 0 0); }
+.dark ::-webkit-scrollbar-thumb { background: oklch(0.35 0 0); }
+.dark ::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0 0); }

package/src/components/AdminApp.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  // Auto-inject design tokens so consumers don't need to manually import
+  import '../app.css';
   import type { Snippet } from 'svelte';
   import type { DataProvider, AuthProvider, ResourceDefinition, ThemeMode, RouterProvider } from '@svadmin/core';
   import { setDataProvider, setAuthProvider, setResources, setLocale, setTheme, setRouterProvider, getAuthProvider, createHashRouterProvider } from '@svadmin/core';

package/src/components/CanAccess.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { canAccess } from '@svadmin/core/permissions';
-  import type { Action } from '@svadmin/core/permissions';
+  import { useCan } from '@svadmin/core';
+  import type { Action } from '@svadmin/core';
 
   let { resource, action, params, children, fallback } = $props<{
     resource: string;
@@ -11,10 +11,12 @@
     fallback?: Snippet;
   }>();
 
-  const result = $derived(canAccess(resource, action, params));
+  const can = $derived(useCan(resource, action, params));
 </script>
 
-{#if result.can}
+{#if can.isLoading}
+  <!-- Loading: nothing rendered -->
+{:else if can.allowed}
   {@render children()}
 {:else if fallback}
   {@render fallback()}

package/src/components/LoginPage.svelte

@@ -8,11 +8,34 @@
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
+  import { Separator } from './ui/separator/index.js';
   import { LogIn, Mail, Loader2, AlertCircle } from 'lucide-svelte';
 
-  let { title = 'Admin', onSuccess } = $props<{
+  /**
+   * Social provider config for the login page.
+   * Each entry renders a button that calls `onClick()` when clicked.
+   *
+   * @example
+   * ```ts
+   * const socialProviders = [
+   *   { name: 'Google', icon: '🔵', onClick: () => googleAuth.login({}) },
+   *   { name: 'GitHub', icon: '🐙', onClick: () => githubAuth.login({}) },
+   * ];
+   * ```
+   */
+  interface SocialProvider {
+    /** Display name (e.g., 'Google') */
+    name: string;
+    /** Icon character, emoji, or SVG string */
+    icon?: string;
+    /** Handler to initiate social login */
+    onClick: () => void | Promise<void>;
+  }
+
+  let { title = 'Admin', onSuccess, socialProviders = [] } = $props<{
     title?: string;
     onSuccess?: () => void;
+    socialProviders?: SocialProvider[];
   }>();
 
   const login = useLogin();
@@ -97,6 +120,30 @@
           </Button>
         </form>
 
+        {#if socialProviders.length > 0}
+          <div class="relative my-5">
+            <Separator />
+            <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
+              {t('auth.orContinueWith')}
+            </span>
+          </div>
+
+          <div class="grid gap-2" class:grid-cols-2={socialProviders.length >= 2}>
+            {#each socialProviders as provider (provider.name)}
+              <Button
+                variant="outline"
+                class="w-full"
+                onclick={provider.onClick}
+              >
+                {#if provider.icon}
+                  <span class="mr-2">{provider.icon}</span>
+                {/if}
+                {provider.name}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+
         {#if authProvider.register}
           <div class="flex items-center justify-center gap-1 mt-5 pt-5 border-t">
             <span class="text-sm text-muted-foreground">{t('auth.noAccount')}</span>

package/src/components/ProfilePage.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { useGetIdentity, useUpdatePassword } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import { Label } from './ui/label/index.js';
+  import * as Card from './ui/card/index.js';
+  import * as Alert from './ui/alert/index.js';
+  import PasswordInput from './PasswordInput.svelte';
+  import { User, Mail, Lock, Loader2, AlertCircle, CheckCircle } from 'lucide-svelte';
+
+  const identity = useGetIdentity();
+  const updatePw = useUpdatePassword();
+
+  // Password change form
+  let currentPassword = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');
+  let pwError = $state('');
+  let pwSuccess = $state(false);
+
+  async function handlePasswordChange(e: SubmitEvent) {
+    e.preventDefault();
+    pwError = '';
+    pwSuccess = false;
+
+    if (!newPassword) { pwError = t('auth.passwordRequired'); return; }
+    if (newPassword !== confirmPassword) { pwError = t('auth.passwordMismatch'); return; }
+
+    const result = await updatePw.mutate({
+      password: newPassword,
+      currentPassword,
+      confirmPassword,
+    });
+    if (result.success) {
+      pwSuccess = true;
+      currentPassword = '';
+      newPassword = '';
+      confirmPassword = '';
+    } else {
+      pwError = result.error?.message ?? t('common.operationFailed');
+    }
+  }
+
+  // Avatar initials
+  const initials = $derived(
+    identity.data?.name
+      ? identity.data.name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)
+      : '?'
+  );
+</script>
+
+<div class="max-w-2xl mx-auto space-y-6 p-4 sm:p-6">
+  <!-- Profile Info -->
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2">
+        <User class="h-5 w-5" />
+        {t('profile.title')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      {#if identity.isLoading}
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <Loader2 class="h-4 w-4 animate-spin" />
+          {t('common.loading')}
+        </div>
+      {:else if identity.data}
+        <div class="flex items-start gap-6">
+          <!-- Avatar -->
+          <div class="shrink-0">
+            {#if identity.data.avatar}
+              <img
+                src={identity.data.avatar}
+                alt={identity.data.name ?? ''}
+                class="h-20 w-20 rounded-xl object-cover ring-2 ring-primary/20"
+              />
+            {:else}
+              <div class="h-20 w-20 rounded-xl bg-primary/10 text-primary flex items-center justify-center text-2xl font-bold">
+                {initials}
+              </div>
+            {/if}
+          </div>
+
+          <!-- Info -->
+          <div class="space-y-3 flex-1 min-w-0">
+            <div>
+              <Label class="text-xs text-muted-foreground">{t('profile.name')}</Label>
+              <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
+            </div>
+
+            {#if identity.data.email}
+              <div class="flex items-center gap-2 text-sm text-muted-foreground">
+                <Mail class="h-4 w-4 shrink-0" />
+                <span class="truncate">{identity.data.email}</span>
+              </div>
+            {/if}
+
+            {#if identity.data.id}
+              <div class="text-xs text-muted-foreground/60 font-mono">
+                ID: {identity.data.id}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {:else}
+        <p class="text-sm text-muted-foreground">{t('profile.notAvailable')}</p>
+      {/if}
+    </Card.CardContent>
+  </Card.Card>
+
+  <!-- Change Password -->
+  <Card.Card>
+    <Card.CardHeader>
+      <Card.CardTitle class="flex items-center gap-2">
+        <Lock class="h-5 w-5" />
+        {t('profile.changePassword')}
+      </Card.CardTitle>
+    </Card.CardHeader>
+    <Card.CardContent>
+      <form onsubmit={handlePasswordChange} class="space-y-4 max-w-sm">
+        {#if pwError}
+          <Alert.Root variant="destructive">
+            <AlertCircle class="h-4 w-4" />
+            <Alert.Description>{pwError}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        {#if pwSuccess}
+          <Alert.Root class="border-green-500/30 bg-green-500/5 text-green-600 dark:text-green-400">
+            <CheckCircle class="h-4 w-4" />
+            <Alert.Description>{t('profile.passwordChanged')}</Alert.Description>
+          </Alert.Root>
+        {/if}
+
+        <PasswordInput
+          id="current-password"
+          label={t('profile.currentPassword')}
+          bind:value={currentPassword}
+          autocomplete="current-password"
+        />
+
+        <PasswordInput
+          id="new-password"
+          label={t('auth.password')}
+          bind:value={newPassword}
+          autocomplete="new-password"
+          showStrength
+        />
+
+        <PasswordInput
+          id="confirm-new-password"
+          label={t('auth.confirmPassword')}
+          bind:value={confirmPassword}
+          autocomplete="new-password"
+        />
+
+        <Button type="submit" disabled={updatePw.isLoading}>
+          {#if updatePw.isLoading}
+            <Loader2 class="h-4 w-4 animate-spin mr-2" />
+          {/if}
+          {t('profile.updatePassword')}
+        </Button>
+      </form>
+    </Card.CardContent>
+  </Card.Card>
+</div>

package/src/components/ui/alert/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import Alert, { type AlertVariant, alertVariants } from "./alert.svelte";
 import AlertTitle from "./alert-title.svelte";
 import AlertDescription from "./alert-description.svelte";

package/src/components/ui/badge/index.ts

@@ -1,2 +1,3 @@
+// @ts-nocheck
 export { default as Badge } from "./badge.svelte";
 export { badgeVariants, type BadgeVariant } from "./badge.svelte";

package/src/components/ui/button/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import Root, {
 	type ButtonProps,
 	type ButtonSize,

package/src/index.ts

@@ -28,6 +28,7 @@ export { default as DrawerForm } from './components/DrawerForm.svelte';
 export { default as DevTools } from './components/DevTools.svelte';
 export { default as Authenticated } from './components/Authenticated.svelte';
 export { default as UpdatePasswordPage } from './components/UpdatePasswordPage.svelte';
+export { default as ProfilePage } from './components/ProfilePage.svelte';
 export { default as ConfigErrorScreen } from './components/ConfigErrorScreen.svelte';
 export { default as InferencerPanel } from './components/InferencerPanel.svelte';
 export { default as LiveIndicator } from './components/LiveIndicator.svelte';