@svadmin/ui 0.5.14 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.5.14",
+  "version": "0.7.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "svelte": "^5.0.0",
     "@svadmin/core": "^0.5.0",
-    "@tanstack/svelte-query": "^5.0.0",
+    "@tanstack/svelte-query": "^6.0.0",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",

package/src/components/AuditLogDrawer.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { getAuditLogProvider, t } from '@svadmin/core';
+  import type { AuditEntry } from '@svadmin/core';
+  import * as Sheet from './ui/sheet/index.js';
+  import { History, Loader2 } from 'lucide-svelte';
+
+  let { open = $bindable(false), resource, recordId } = $props<{
+    open: boolean;
+    resource: string;
+    recordId?: string | number;
+  }>();
+
+  let logs = $state<AuditEntry[]>([]);
+  let isLoading = $state(false);
+
+  $effect(() => {
+    if (open) {
+      const provider = getAuditLogProvider();
+      if (provider) {
+        isLoading = true;
+        provider.get({ resource, meta: recordId ? { recordId } : undefined })
+          .then((data) => {
+            logs = data;
+            isLoading = false;
+          })
+          .catch((err) => {
+            console.error('[svadmin] Failed to fetch audit logs', err);
+            isLoading = false;
+          });
+      }
+    }
+  });
+
+  // Action semantic color mapping
+  function getActionColor(action: string) {
+    switch (action) {
+      case 'create': return 'bg-green-500';
+      case 'update': return 'bg-blue-500';
+      case 'delete': return 'bg-red-500';
+      default: return 'bg-slate-400';
+    }
+  }
+</script>
+
+<Sheet.Root bind:open>
+  <Sheet.Content class="w-full sm:max-w-md overflow-y-auto">
+    <Sheet.Header>
+      <Sheet.Title class="flex items-center gap-2">
+        <History class="h-5 w-5" />
+        {t('common.history') || 'History'}
+      </Sheet.Title>
+      <Sheet.Description>
+        Audit log and revision history for this record.
+      </Sheet.Description>
+    </Sheet.Header>
+
+    <div class="mt-8 space-y-4">
+      {#if isLoading}
+        <div class="flex justify-center py-8 text-muted-foreground">
+          <Loader2 class="h-6 w-6 animate-spin" />
+        </div>
+      {:else if logs.length === 0}
+        <div class="text-center py-10">
+          <History class="h-8 w-8 mx-auto text-muted-foreground/30 mb-3" />
+          <p class="text-sm text-muted-foreground">
+            {t('common.noData') || 'No audit logs found'}
+          </p>
+        </div>
+      {:else}
+        <div class="relative border-l border-border ml-3 pl-6 space-y-8">
+          {#each logs as log}
+            <div class="relative">
+              <span class="absolute -left-7 top-1 flex h-2 w-2 items-center justify-center rounded-full ring-4 ring-background {getActionColor(log.action)}"></span>
+              <div class="flex flex-col gap-1.5">
+                <div class="flex items-center gap-2 justify-between">
+                  <span class="text-sm font-semibold capitalize">{log.action}</span>
+                  <span class="text-xs text-muted-foreground">
+                    {new Date(log.timestamp).toLocaleString()}
+                  </span>
+                </div>
+                {#if log.userId}
+                  <span class="text-xs text-muted-foreground font-mono bg-muted inline-flex px-1.5 py-0.5 rounded w-fit">
+                    User: {log.userId}
+                  </span>
+                {/if}
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </Sheet.Content>
+</Sheet.Root>

package/src/components/AutoTable.svelte

@@ -414,7 +414,7 @@
   {/if}
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-lg border border-border bg-card shadow-sm overflow-hidden">
+  <div class="rounded-lg bg-card shadow-sm overflow-hidden">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">

package/src/components/CreatePage.svelte

@@ -5,9 +5,7 @@
   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';
-  import TooltipButton from './TooltipButton.svelte';
+  import ListButton from './buttons/ListButton.svelte';
 
   interface Props {
     resourceName: string;
@@ -30,9 +28,7 @@
 <div class="space-y-6 {className}">
   <PageHeader title={pageTitle}>
     {#snippet actions()}
-      <TooltipButton tooltip={t('common.back')} onclick={() => navigate(`/${resourceName}`)}>
-        <ArrowLeft class="h-5 w-5" />
-      </TooltipButton>
+      <ListButton resource={resourceName} hideText />
       {#if headerActions}
         {@render headerActions()}
       {/if}

package/src/components/EditPage.svelte

@@ -5,10 +5,10 @@
   import type { Snippet } from 'svelte';
   import PageHeader from './PageHeader.svelte';
   import AutoForm from './AutoForm.svelte';
-  import ConfirmDialog from './ConfirmDialog.svelte';
-  import { ArrowLeft, Trash2 } from 'lucide-svelte';
-  import { Button } from './ui/button/index.js';
-  import TooltipButton from './TooltipButton.svelte';
+  import ListButton from './buttons/ListButton.svelte';
+  import ShowButton from './buttons/ShowButton.svelte';
+  import RefreshButton from './buttons/RefreshButton.svelte';
+  import DeleteButton from './buttons/DeleteButton.svelte';
 
   interface Props {
     resourceName: string;
@@ -31,29 +31,16 @@
   const resource = $derived(getResource(resourceName));
   const pageTitle = $derived(title ?? `${t('common.edit')} ${resource.label} #${id}`);
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
-
-  const deleteResult = useDelete({ get resource() { return resourceName; } });
-  const deleteMutation = deleteResult.mutation;
-
-  let confirmOpen = $state(false);
-
-  async function handleDelete() {
-    await deleteMutation.mutateAsync({ id, resource: resourceName });
-    confirmOpen = false;
-    navigate(`/${resourceName}`);
-  }
 </script>
 
 <div class="space-y-6 {className}">
   <PageHeader title={pageTitle}>
     {#snippet actions()}
-      <TooltipButton tooltip={t('common.back')} onclick={() => navigate(`/${resourceName}`)}>
-        <ArrowLeft class="h-5 w-5" />
-      </TooltipButton>
-      {#if showDelete}
-        <TooltipButton tooltip={t('common.delete')} variant="destructive" size="sm" onclick={() => { confirmOpen = true; }}>
-          <Trash2 class="h-4 w-4" />
-        </TooltipButton>
+      <ListButton resource={resourceName} hideText />
+      <ShowButton resource={resourceName} recordItemId={id} hideText />
+      <RefreshButton resource={resourceName} hideText />
+      {#if showDelete !== false}
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
       {/if}
       {#if headerActions}
         {@render headerActions()}
@@ -63,10 +50,3 @@
 
   <AutoForm {resourceName} mode="edit" {id} />
 </div>
-
-<ConfirmDialog
-  bind:open={confirmOpen}
-  title={t('common.deleteConfirm')}
-  onconfirm={handleDelete}
-  oncancel={() => confirmOpen = false}
-/>

package/src/components/EmptyState.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <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"
+  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card/50 rounded-lg shadow-sm"
   in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
 >
   <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">

package/src/components/ForgotPasswordPage.svelte

@@ -7,7 +7,7 @@
   import { Label } from './ui/label/index.js';
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
-  import { KeyRound, Mail, ArrowLeft, CheckCircle, Loader2, AlertCircle } from 'lucide-svelte';
+  import { KeyRound, User, ArrowLeft, CheckCircle, Loader2, AlertCircle } from 'lucide-svelte';
 
   let { title = 'Admin' } = $props<{
     title?: string;
@@ -15,17 +15,17 @@
 
   const forgot = useForgotPassword();
 
-  let email = $state('');
+  let identifier = $state('');
   let error = $state('');
   let sent = $state(false);
 
-  async function handleSubmit(e: SubmitEvent) {
+  async function handleSubmit(e: Event) {
     e.preventDefault();
     error = '';
 
-    if (!email) { error = t('auth.emailRequired'); return; }
+    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
 
-    const result = await forgot.mutate({ email });
+    const result = await forgot.mutate({ email: identifier, username: identifier });
     if (result.success) {
       sent = true;
     } else {
@@ -73,16 +73,16 @@
             {/if}
 
             <div class="space-y-2">
-              <Label for="forgot-email">{t('auth.email')}</Label>
+              <Label for="forgot-identifier">{t('auth.usernameOrEmail')}</Label>
               <div class="relative">
-                <Mail class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+                <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
                 <Input
-                  id="forgot-email"
-                  type="email"
-                  placeholder="name@example.com"
-                  bind:value={email}
+                  id="forgot-identifier"
+                  type="text"
+                  placeholder={t('auth.identifierPlaceholder')}
+                  bind:value={identifier}
                   class="pl-9"
-                  autocomplete="email"
+                  autocomplete="username"
                 />
               </div>
             </div>

package/src/components/Header.svelte

@@ -21,7 +21,7 @@
   }>();
 </script>
 
-<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between border-b border-slate-200/60 dark:border-slate-800/60 bg-white/60 dark:bg-slate-900/60 backdrop-blur-md px-4 md:px-6">
+<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-white/60 dark:bg-slate-900/60 backdrop-blur-md px-4 md:px-6">
   <div class="flex items-center gap-4">
     {#if children}
       {@render children()}

package/src/components/Layout.svelte

@@ -64,7 +64,7 @@
 <div role="application" onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }}>
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
-    <div class="hidden md:block w-64 border-r bg-sidebar/80 p-4 space-y-4">
+    <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
       <Skeleton class="h-8 w-32" />
       <div class="space-y-2 mt-6">
         {#each Array(5) as _}

package/src/components/LoginPage.svelte

@@ -9,7 +9,7 @@
   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';
+  import { LogIn, User, Loader2, AlertCircle } from 'lucide-svelte';
 
   /**
    * Social provider config for the login page.
@@ -41,18 +41,18 @@
   const login = useLogin();
   const authProvider = getAuthProvider();
 
-  let email = $state('');
+  let identifier = $state('');
   let password = $state('');
   let error = $state('');
 
-  async function handleSubmit(e: SubmitEvent) {
+  async function handleSubmit(e: Event) {
     e.preventDefault();
     error = '';
 
-    if (!email) { error = t('auth.emailRequired'); return; }
+    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
     if (!password) { error = t('auth.passwordRequired'); return; }
 
-    const result = await login.mutate({ email, password });
+    const result = await login.mutate({ email: identifier, username: identifier, password });
     if (result.success) {
       onSuccess?.();
     } else {
@@ -81,16 +81,16 @@
           {/if}
 
           <div class="space-y-2">
-            <Label for="login-email">{t('auth.email')}</Label>
+            <Label for="login-identifier">{t('auth.usernameOrEmail')}</Label>
             <div class="relative">
-              <Mail class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+              <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
               <Input
-                id="login-email"
-                type="email"
-                placeholder="name@example.com"
-                bind:value={email}
+                id="login-identifier"
+                type="text"
+                placeholder={t('auth.identifierPlaceholder')}
+                bind:value={identifier}
                 class="pl-9"
-                autocomplete="email"
+                autocomplete="username"
               />
             </div>
           </div>

package/src/components/ProfilePage.svelte

@@ -88,10 +88,14 @@
               <p class="text-lg font-semibold truncate">{identity.data.name ?? '—'}</p>
             </div>
 
-            {#if identity.data.email}
+            {#if identity.data.email || identity.data.username}
               <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>
+                {#if identity.data.email}
+                  <Mail class="h-4 w-4 shrink-0" />
+                {:else}
+                  <User class="h-4 w-4 shrink-0" />
+                {/if}
+                <span class="truncate">{identity.data.email || identity.data.username}</span>
               </div>
             {/if}
 

package/src/components/RegisterPage.svelte

@@ -8,7 +8,7 @@
   import * as Card from './ui/card/index.js';
   import * as Alert from './ui/alert/index.js';
   import PasswordInput from './PasswordInput.svelte';
-  import { UserPlus, Mail, Loader2, AlertCircle } from 'lucide-svelte';
+  import { UserPlus, User, Loader2, AlertCircle } from 'lucide-svelte';
 
   let { title = 'Admin', onSuccess } = $props<{
     title?: string;
@@ -17,7 +17,7 @@
 
   const register = useRegister();
 
-  let email = $state('');
+  let identifier = $state('');
   let password = $state('');
   let confirmPassword = $state('');
   let error = $state('');
@@ -26,11 +26,11 @@
     e.preventDefault();
     error = '';
 
-    if (!email) { error = t('auth.emailRequired'); return; }
+    if (!identifier) { error = t('auth.usernameOrEmailRequired'); return; }
     if (!password) { error = t('auth.passwordRequired'); return; }
     if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
 
-    const result = await register.mutate({ email, password });
+    const result = await register.mutate({ email: identifier, username: identifier, password });
     if (result.success) {
       onSuccess?.();
     } else {
@@ -59,16 +59,16 @@
           {/if}
 
           <div class="space-y-2">
-            <Label for="register-email">{t('auth.email')}</Label>
+            <Label for="register-identifier">{t('auth.usernameOrEmail')}</Label>
             <div class="relative">
-              <Mail class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+              <User class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
               <Input
-                id="register-email"
-                type="email"
-                placeholder="name@example.com"
-                bind:value={email}
+                id="register-identifier"
+                type="text"
+                placeholder={t('auth.identifierPlaceholder')}
+                bind:value={identifier}
                 class="pl-9"
-                autocomplete="email"
+                autocomplete="username"
               />
             </div>
           </div>

package/src/components/ShowPage.svelte

@@ -7,9 +7,11 @@
   import * as Card from './ui/card/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import PageHeader from './PageHeader.svelte';
-  import TooltipButton from './TooltipButton.svelte';
   import { getDisplayComponent } from './fieldComponentMap';
-  import { ArrowLeft, Pencil } from 'lucide-svelte';
+  import ListButton from './buttons/ListButton.svelte';
+  import EditButton from './buttons/EditButton.svelte';
+  import DeleteButton from './buttons/DeleteButton.svelte';
+  import RefreshButton from './buttons/RefreshButton.svelte';
 
   let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
 
@@ -22,14 +24,14 @@
 <div class="space-y-6">
   <PageHeader title="{resource.label} {t('common.detail')}">
     {#snippet actions()}
-      <TooltipButton tooltip={t('common.back')} onclick={() => navigate(`/${resourceName}`)}>
-        <ArrowLeft class="h-5 w-5" />
-      </TooltipButton>
+      <ListButton resource={resourceName} hideText />
       {#if resource.canEdit !== false}
-        <Button onclick={() => navigate(`/${resourceName}/edit/${id}`)}>
-          <Pencil class="h-4 w-4" data-icon="inline-start" /> {t('common.edit')}
-        </Button>
+        <EditButton resource={resourceName} recordItemId={id} hideText />
       {/if}
+      {#if resource.canDelete !== false}
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
+      {/if}
+      <RefreshButton resource={resourceName} hideText />
     {/snippet}
   </PageHeader>
 

package/src/components/Sidebar.svelte

@@ -142,13 +142,13 @@
 
 <aside
   aria-label="Sidebar navigation"
-  class="fixed inset-y-0 left-0 z-30 flex flex-col backdrop-blur-xl border-r border-sidebar-border transition-all duration-300"
+  class="fixed inset-y-0 left-0 z-30 flex flex-col backdrop-blur-xl transition-all duration-300"
   style="background-color: var(--sidebar);"
   class:w-64={!collapsed}
   class:w-16={collapsed}
 >
   <!-- Logo -->
-  <div class="flex h-16 items-center justify-between border-b border-sidebar-border px-4">
+  <div class="flex h-16 items-center justify-between px-4">
     {#if !collapsed}
       <div class="flex items-center gap-3">
         <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
@@ -208,7 +208,7 @@
           {#if collapsed}
             <Tooltip.Root>
               <Tooltip.Trigger>
-                {#snippet child({ props })}
+                {#snippet child({ props }: { props: Record<string, unknown> })}
                   <a
                     {...props}
                     href={`#${item.path}`}
@@ -245,7 +245,7 @@
   </ScrollArea>
 
   <!-- Footer -->
-  <div class="border-t border-sidebar-border">
+  <div>
     <!-- Color theme picker -->
     {#if !collapsed}
       <div class="px-3 pt-3 pb-1">
@@ -294,7 +294,7 @@
           />
           <div class="flex-1 min-w-0">
             <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
-            <p class="truncate text-[10px] text-sidebar-foreground/50">Administrator</p>
+            <p class="truncate text-[10px] text-sidebar-foreground/50">{((identity as Record<string, unknown>).role || (identity as Record<string, unknown>).roleName) ?? 'User'}</p>
           </div>
         </div>
         <div class="flex items-center justify-between px-1 mt-1">
@@ -317,7 +317,7 @@
       <div class="px-1 py-3 space-y-1">
         <Tooltip.Root>
           <Tooltip.Trigger>
-            {#snippet child({ props })}
+            {#snippet child({ props }: { props: Record<string, unknown> })}
               <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
                 <span class="text-xs font-bold">{localeLabel}</span>
               </Button>
@@ -327,7 +327,7 @@
         </Tooltip.Root>
         <Tooltip.Root>
           <Tooltip.Trigger>
-            {#snippet child({ props })}
+            {#snippet child({ props }: { props: Record<string, unknown> })}
               <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
                 {#if getResolvedTheme() === 'dark'}
                   <Sun class="h-4 w-4" />
@@ -341,7 +341,7 @@
         </Tooltip.Root>
         <Tooltip.Root>
           <Tooltip.Trigger>
-            {#snippet child({ props })}
+            {#snippet child({ props }: { props: Record<string, unknown> })}
               <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground/60 hover:text-destructive">
                 <LogOut class="h-4 w-4" />
               </Button>

package/src/components/StatsCard.svelte

@@ -14,7 +14,7 @@
   };
 
   const variantMap: Record<StyleVariant, string> = {
-    default: 'border border-border bg-card shadow-sm',
+    default: 'bg-card shadow-sm hover:shadow-md transition-shadow duration-300',
     outline: 'border-2 border-border bg-transparent',
     filled: 'border-0 bg-muted/50 shadow-sm',
   };

package/src/components/buttons/CloneButton.svelte

@@ -3,7 +3,7 @@
   import { Button } from '../ui/button/index.js';
   import { Copy } from 'lucide-svelte';
 
-  let { resource, recordItemId, hideText = false, accessControl, class: className = '' } = $props<{
+  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;

package/src/components/buttons/CreateButton.svelte

@@ -3,7 +3,7 @@
   import { Button } from '../ui/button/index.js';
   import { Plus } from 'lucide-svelte';
 
-  let { resource, hideText = false, accessControl, class: className = '' } = $props<{
+  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
     accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };

package/src/components/buttons/DeleteButton.svelte

@@ -5,7 +5,7 @@
 
   let {
     resource, recordItemId, hideText = false,
-    accessControl, onSuccess, undoable = false, class: className = '',
+    accessControl = { enabled: true, hideIfUnauthorized: true }, onSuccess, undoable = false, class: className = '',
   } = $props<{
     resource: string;
     recordItemId: string | number;

package/src/components/buttons/EditButton.svelte

@@ -3,7 +3,7 @@
   import { Button } from '../ui/button/index.js';
   import { Pencil } from 'lucide-svelte';
 
-  let { resource, recordItemId, hideText = false, accessControl, class: className = '' } = $props<{
+  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;

package/src/components/buttons/ExportButton.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
-  import { useExport, t } from '@svadmin/core';
+  import { useExport, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Download } from 'lucide-svelte';
 
-  let { resource, hideText = false, class: className = '' } = $props<{
+  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
     class?: string;
   }>();
 
   const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
+  const can = $derived(accessControl?.enabled ? useCan(resource, 'export') : null);
+  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 
-<Button
-  variant="outline"
-  size={hideText ? 'icon' : 'sm'}
-  class={className}
-  disabled={isLoading}
-  onclick={triggerExport}
->
-  <Download class="h-4 w-4" />
-  {#if !hideText}<span class="ml-1">{t('common.export')}</span>{/if}
-</Button>
+{#if !hidden}
+
+  <Button
+    variant="outline"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={isLoading || (can ? !can.allowed : false)}
+    onclick={triggerExport}
+  >
+    <Download class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.export')}</span>{/if}
+  </Button>
+{/if}

package/src/components/buttons/ImportButton.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { useImport, t, type UseImportOptions } from '@svadmin/core';
+  import { useImport, useCan, t, type UseImportOptions } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Upload } from 'lucide-svelte';
 
-  let { resource, hideText = false, onFinish, class: className = '' } = $props<{
+  let { resource, hideText = false, onFinish, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
     onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
     class?: string;
   }>();
 
@@ -29,8 +30,12 @@
       input.value = ''; // reset for re-import
     }
   }
+
+  const can = $derived(accessControl?.enabled ? useCan(resource, 'import') : null);
+  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 
+{#if !hidden}
 <input
   bind:this={fileInput}
   type="file"
@@ -38,13 +43,14 @@
   style="display:none"
   onchange={handleFileChange}
 />
-<Button
-  variant="outline"
-  size={hideText ? 'icon' : 'sm'}
-  class={className}
-  disabled={importHook.isLoading}
-  onclick={triggerImport}
->
-  <Upload class="h-4 w-4" />
-  {#if !hideText}<span class="ml-1">{t('common.import')}</span>{/if}
-</Button>
+  <Button
+    variant="outline"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={importHook.isLoading || (can ? !can.allowed : false)}
+    onclick={triggerImport}
+  >
+    <Upload class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.import')}</span>{/if}
+  </Button>
+{/if}

package/src/components/buttons/ShowButton.svelte

@@ -1,24 +1,31 @@
 <script lang="ts">
-  import { useNavigation, t } from '@svadmin/core';
+  import { useNavigation, useCan, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Eye } from 'lucide-svelte';
 
-  let { resource, recordItemId, hideText = false, class: className = '' } = $props<{
+  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
     resource: string;
     recordItemId: string | number;
     hideText?: boolean;
+    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
     class?: string;
   }>();
 
   const nav = useNavigation();
+  const can = $derived(accessControl?.enabled ? useCan(resource, 'show') : null);
+  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 
-<Button
-  variant="ghost"
-  size={hideText ? 'icon' : 'sm'}
-  class={className}
-  onclick={() => nav.show(resource, recordItemId)}
->
-  <Eye class="h-4 w-4" />
-  {#if !hideText}<span class="ml-1">{t('common.detail')}</span>{/if}
-</Button>
+{#if !hidden}
+
+  <Button
+    variant="ghost"
+    size={hideText ? 'icon' : 'sm'}
+    class={className}
+    disabled={can ? !can.allowed : false}
+    onclick={() => nav.show(resource, recordItemId)}
+  >
+    <Eye class="h-4 w-4" />
+    {#if !hideText}<span class="ml-1">{t('common.detail')}</span>{/if}
+  </Button>
+{/if}

package/src/components/ui/avatar/avatar.svelte

@@ -19,7 +19,7 @@
 	// AvatarSize type is exported from the package index.ts
 	type AvatarSize = VariantProps<typeof avatarVariants>["size"];
 
-	type Props = WithElementRef<HTMLImgAttributes> & {
+	type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
 		size?: AvatarSize;
 		fallback?: string;
 	};

package/src/components/ui/button/button.svelte

@@ -34,8 +34,8 @@
 	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> &
+		WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
 			variant?: ButtonVariant;
 			size?: ButtonSize;
 		};

package/src/components/ui/card/card-footer.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	class={cn("bg-muted/50 rounded-b-xl p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/card/card.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
+	class={cn("shadow-sm bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		checked?: boolean;
 		onCheckedChange?: (checked: boolean) => void;
 	};

package/src/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		inset?: boolean;
 		destructive?: boolean;
 	};

package/src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes>;
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement>;
 
 	let {
 		ref = $bindable(null),

package/src/components/ui/label/label.svelte

@@ -2,7 +2,7 @@
   import { cn, type WithElementRef } from '../../../utils.js';
   import type { HTMLLabelAttributes } from 'svelte/elements';
 
-  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLabelAttributes> = $props();
+  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLabelAttributes, HTMLLabelElement> = $props();
 </script>
 
 <label

package/src/components/ui/select/select.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLSelectAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLSelectAttributes> & {
+	type Props = WithElementRef<HTMLSelectAttributes, HTMLSelectElement> & {
 		placeholder?: string;
 	};
 

package/src/components/ui/switch/switch.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		checked?: boolean;
 		disabled?: boolean;
 		onCheckedChange?: (checked: boolean) => void;

package/src/components/ui/table/table-body.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+<tbody bind:this={ref} data-slot="table-body" class={cn(className)} {...restProps}>
 	{@render children?.()}
 </tbody>

package/src/components/ui/table/table-cell.svelte

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTdAttributes> = $props();
+	}: WithElementRef<HTMLTdAttributes, HTMLTableCellElement> = $props();
 </script>
 
 <td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>

package/src/components/ui/table/table-footer.svelte

@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	class={cn("bg-muted/50 font-medium", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/table/table-head.svelte

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLThAttributes> = $props();
+	}: WithElementRef<HTMLThAttributes, HTMLTableCellElement> = $props();
 </script>
 
 <th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>

package/src/components/ui/table/table-header.svelte

@@ -13,7 +13,7 @@
 <thead
 	bind:this={ref}
 	data-slot="table-header"
-	class={cn("[&_tr]:border-b", className)}
+	class={cn(className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/table/table-row.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
-<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors", className)} {...restProps}>
 	{@render children?.()}
 </tr>

package/src/components/ui/table/table.svelte

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTableAttributes> = $props();
+	}: WithElementRef<HTMLTableAttributes, HTMLTableElement> = $props();
 </script>
 
 <div data-slot="table-container" class="relative w-full overflow-x-auto">

package/src/components/ui/tabs/tabs-trigger.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		value: string;
 		active?: boolean;
 	};

package/src/components/ui/textarea/textarea.svelte

@@ -2,7 +2,7 @@
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
 
-	type Props = WithElementRef<HTMLTextareaAttributes>;
+	type Props = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
 
 	let {
 		ref = $bindable(null),