@svadmin/ui 0.30.1 → 0.31.0

package/dist/ambient.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

package/dist/components/AdminApp.svelte

@@ -87,6 +87,15 @@
   const resolvedRouter = $derived(routerProvider ?? createHashRouterProvider());
   const resolvedRouteMode = $derived(routeMode ?? (routerProvider ? 'auto' : 'hash'));
 
+  // Set up initial context synchronously so children can access resources immediately during first render
+  setDataProvider(dataProvider);
+  if (authProvider) setAuthProvider(authProvider);
+  setResources(resources);
+  setRouterProvider(resolvedRouter);
+  if (locale) setLocale(locale);
+  if (userThemeConfig) configureTheme(userThemeConfig);
+  if (defaultTheme) setTheme(defaultTheme);
+
   // Set up context — use $effect so prop changes are tracked
   $effect.pre(() => {
     setDataProvider(dataProvider);
@@ -104,7 +113,8 @@
     },
   });
 
-  // Initialize router with provider
+  // Initialize router with provider synchronously
+  initRouter(resolvedRouter);
   $effect.pre(() => {
     initRouter(resolvedRouter);
   });
@@ -118,21 +128,35 @@
   let authChecked = $state(false);
 
   $effect(() => {
+    let cancelled = false;
     // Explicitly track route so auth is re-checked on navigation
     const _route = route;
 
     if (!authProvider) {
-      isAuthenticated = true;
-      authChecked = true;
+      if (!cancelled) {
+        isAuthenticated = true;
+        authChecked = true;
+      }
       return;
     }
     authProvider.check().then(result => {
+      if (cancelled) return;
       isAuthenticated = result.authenticated;
       authChecked = true;
       if (!result.authenticated && _route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
         navigate(result.redirectTo ?? '/login');
       }
+    }).catch(err => {
+      if (cancelled) return;
+      console.warn('Auth check failed:', err);
+      isAuthenticated = false;
+      authChecked = true;
+      if (_route !== '/login' && _route !== '/register' && _route !== '/forgot-password' && _route !== '/update-password') {
+        navigate('/login');
+      }
     });
+
+    return () => { cancelled = true; };
   });
 </script>
 
@@ -160,7 +184,7 @@
     <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode}>
       {#key route + (params.resource ?? '') + (params.id ?? '')}
       <div class="svadmin-page-enter">
-      {#if currentPath().startsWith('/settings')}
+      {#if route.startsWith('/settings')}
         <SettingsPage />
       {:else if route === '/' || route === ''}
         {#if dashboard}
@@ -171,30 +195,30 @@
             <p class="text-muted-foreground">{t('common.dashboardHint')}</p>
           </div>
         {/if}
-      {:else if route === '/:resource'}
+      {:else if route === '/:resource' || route === '/:parent/:parentId/:resource'}
         {#key params.resource}
           {@const Comp = getComponentRegistry().AutoTable}
           <Comp resourceName={params.resource} />
         {/key}
-      {:else if route === '/:resource/create'}
+      {:else if route === '/:resource/create' || route === '/:parent/:parentId/:resource/create'}
         {#key params.resource}
           {@const Comp = getComponentRegistry().AutoForm}
           <Comp resourceName={params.resource} mode="create" />
         {/key}
-      {:else if route === '/:resource/edit/:id'}
+      {:else if route === '/:resource/edit/:id' || route === '/:parent/:parentId/:resource/edit/:id'}
         {#key `${params.resource}-${params.id}`}
           {@const Comp = getComponentRegistry().AutoForm}
           <Comp resourceName={params.resource} mode="edit" id={params.id} />
         {/key}
-      {:else if route === '/:resource/show/:id'}
+      {:else if route === '/:resource/show/:id' || route === '/:parent/:parentId/:resource/show/:id'}
         {#key `${params.resource}-${params.id}`}
           {@const Comp = getComponentRegistry().ShowPage}
           <Comp resourceName={params.resource} id={params.id} />
         {/key}
-      {:else if route === '/:resource/clone/:id'}
+      {:else if route === '/:resource/clone/:id' || route === '/:parent/:parentId/:resource/clone/:id'}
         {#key `${params.resource}-clone-${params.id}`}
           {@const Comp = getComponentRegistry().AutoForm}
-          <Comp resourceName={params.resource} mode="create" id={params.id} />
+          <Comp resourceName={params.resource} mode="clone" id={params.id} />
         {/key}
       {/if}
       </div>

package/dist/components/AppearanceSettings.svelte

@@ -27,7 +27,10 @@
 
   function setDensity(d: 'compact' | 'standard') {
     density = d;
-    if (typeof window !== 'undefined') localStorage.setItem(DENSITY_KEY, d);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(DENSITY_KEY, d);
+      window.dispatchEvent(new CustomEvent('svadmin-density-change', { detail: d }));
+    }
   }
 
   // Page size

package/dist/components/AuditLogViewer.svelte

@@ -9,7 +9,7 @@
   import { Input } from './ui/input/index.js';
   import { Loader2, ChevronLeft, ChevronRight, Search, FileSearch, Eye, X } from '@lucide/svelte';
 
-  const authProvider = getAuthProvider();
+  const authProvider = getAuthProvider({ optional: true });
 
   let logs = $state<AuditLog[]>([]);
   let total = $state(0);
@@ -42,6 +42,8 @@
   }
 
   $effect(() => {
+    // Track `page` to re-fetch on pagination — this is the single trigger
+    void page;
     loadLogs();
   });
 
@@ -162,7 +164,7 @@
         <Button
           variant="outline" size="sm"
           disabled={page <= 1}
-          onclick={() => { page--; loadLogs(); }}
+          onclick={() => { page--; }}
         >
           <ChevronLeft class="h-4 w-4" />
         </Button>
@@ -170,7 +172,7 @@
         <Button
           variant="outline" size="sm"
           disabled={page >= totalPages}
-          onclick={() => { page++; loadLogs(); }}
+          onclick={() => { page++; }}
         >
           <ChevronRight class="h-4 w-4" />
         </Button>

package/dist/components/Authenticated.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useIsAuthenticated } from '@svadmin/core';
+  import { useIsAuthenticated, getRouterProvider } from '@svadmin/core';
   import type { Snippet } from 'svelte';
   import { navigate } from '@svadmin/core';
 
@@ -23,8 +23,15 @@
     if (fallback) return;
     let url = redirectTo;
     if (appendCurrentPathToQuery && typeof window !== 'undefined') {
-      const current = encodeURIComponent(window.location.pathname + window.location.search);
-      url += `?to=${current}`;
+      const rp = getRouterProvider();
+      let currentString = window.location.pathname + window.location.search;
+      if (rp) {
+        const parsed = rp.parse();
+        const qs = new URLSearchParams(parsed.params).toString();
+        currentString = parsed.pathname + (qs ? `?${qs}` : '');
+      }
+      const current = encodeURIComponent(currentString);
+      url += url.includes('?') ? `&to=${current}` : `?to=${current}`;
     }
     navigate(url);
   }

package/dist/components/AutoForm.svelte

@@ -17,7 +17,7 @@
   interface Props {
     resourceName: string;
     id?: string | number;
-    mode?: 'create' | 'edit';
+    mode?: 'create' | 'edit' | 'clone';
     fieldRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; onchange: (v: unknown) => void }]>;
     formActions?: Snippet<[{ isLoading: boolean; onSubmit: () => void }]>;
     headerContent?: Snippet;

package/dist/components/AutoForm.svelte.d.ts

@@ -3,7 +3,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
     id?: string | number;
-    mode?: 'create' | 'edit';
+    mode?: 'create' | 'edit' | 'clone';
     fieldRenderer?: Snippet<[{
         field: FieldDefinition;
         value: unknown;

package/dist/components/AutoTable.svelte

@@ -6,10 +6,10 @@
     type ColumnDef,
     type SortingState,
     type RowSelectionState,
-    type VisibilityState,
+    type ColumnVisibilityState,
     type ExpandedState,
   } from '@tanstack/svelte-table';
-  import { getCoreRowModel } from '@tanstack/table-core';
+  import { createCoreRowModel } from '@tanstack/table-core';
 
   import { useList, useDelete, getResource } from '@svadmin/core';
   import type { Pagination as PaginationState, Sort, Filter, FieldDefinition } from '@svadmin/core';
@@ -101,6 +101,19 @@
   let filters = $state<Filter[]>([]);
   let searchText = $state(urlState.search ?? '');
 
+  // Sync external controlled state
+  $effect(() => {
+    if (externalPagination) {
+      pagination = externalPagination;
+    }
+  });
+
+  $effect(() => {
+    if (externalSorters) {
+      sorters = externalSorters;
+    }
+  });
+
   // URL sync
   $effect(() => {
     writeURLState({
@@ -168,7 +181,7 @@
   let sorting = $state<SortingState>(untrack(() =>
     sorters.map(s => ({ id: s.field, desc: s.order === 'desc' }))
   ));
-  let columnVisibility = $state<VisibilityState>((() => {
+  let columnVisibility = $state<ColumnVisibilityState>((() => {
     // Try to restore from localStorage first
     const storageKey = `svadmin-columns-${resourceName}`;
     if (typeof window !== 'undefined') {
@@ -178,7 +191,7 @@
       } catch { /* ignore */ }
     }
     // Fall back to resource field definitions
-    const vis: VisibilityState = {};
+    const vis: ColumnVisibilityState = {};
     for (const f of resource.fields) {
       if (f.showInList === false) vis[f.key] = false;
     }
@@ -214,7 +227,7 @@
     resource.fields.filter(f => f.showInList !== false)
   );
 
-  const columns = $derived<ColumnDef<Record<string, unknown>>[]>([
+  const columns = $derived<ColumnDef<any, Record<string, unknown>>[]>([
     // Selection column
     ...(selectable && canDelete ? [{
       id: '_select',
@@ -222,7 +235,7 @@
       cell: () => '',
       size: 40,
       enableSorting: false,
-    } satisfies ColumnDef<Record<string, unknown>>] : []),
+    } satisfies ColumnDef<any, Record<string, unknown>>] : []),
     // Expand column
     ...(expandedRowRender ? [{
       id: '_expand',
@@ -230,9 +243,9 @@
       cell: () => '',
       size: 40,
       enableSorting: false,
-    } satisfies ColumnDef<Record<string, unknown>>] : []),
+    } satisfies ColumnDef<any, Record<string, unknown>>] : []),
     // Data columns
-    ...visibleFields.map((field): ColumnDef<Record<string, unknown>> => ({
+    ...visibleFields.map((field): ColumnDef<any, Record<string, unknown>> => ({
       id: field.key,
       accessorKey: field.key,
       header: () => field.label,
@@ -252,10 +265,10 @@
   const tbl = createTable({
     get data() { return query.data?.data ?? []; },
     get columns() { return columns; },
-    getCoreRowModel: getCoreRowModel(),
+    getCoreRowModel: createCoreRowModel(),
     manualPagination: true,
     manualSorting: true,
-    getRowId: (row) => String(row[primaryKey]),
+    getRowId: (row: any) => String(row[primaryKey]),
     state: {
       get sorting() { return sorting; },
       get columnVisibility() { return columnVisibility; },
@@ -263,19 +276,19 @@
       get expanded() { return expanded; },
       get columnOrder() { return columnOrder; },
     },
-    onSortingChange: (updater) => {
+    onSortingChange: (updater: any) => {
       sorting = typeof updater === 'function' ? updater(sorting) : updater;
     },
-    onColumnVisibilityChange: (updater) => {
+    onColumnVisibilityChange: (updater: any) => {
       columnVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;
     },
-    onRowSelectionChange: (updater) => {
+    onRowSelectionChange: (updater: any) => {
       rowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
     },
-    onExpandedChange: (updater) => {
+    onExpandedChange: (updater: any) => {
       expanded = typeof updater === 'function' ? updater(expanded) : updater;
     },
-    onColumnOrderChange: (updater) => {
+    onColumnOrderChange: (updater: any) => {
       columnOrder = typeof updater === 'function' ? updater(columnOrder) : updater;
     },
     get enableRowSelection() { return selectable && canDelete; },
@@ -390,7 +403,7 @@
           {/snippet}
         </DropdownMenu.Trigger>
         <DropdownMenu.Content align="end" class="w-48">
-          {#each tbl.getAllLeafColumns().filter(c => !c.id.startsWith('_')) as column}
+          {#each tbl.getAllLeafColumns().filter((c: any) => !c.id.startsWith('_')) as column}
             <DropdownMenu.CheckboxItem
               checked={column.getIsVisible()}
               onCheckedChange={(v) => column.toggleVisibility(!!v)}
@@ -515,9 +528,9 @@
           <Table.Header>
             {#each tbl.getHeaderGroups() as headerGroup}
               <DraggableHeader
-                columns={headerGroup.headers.map(h => ({ id: h.column.id, header: h }))}
+                columns={headerGroup.headers.map((h: any) => ({ id: h.column.id, header: h }))}
                 resourceName={resourceName}
-                onReorder={(newOrder) => { columnOrder = newOrder.map(c => c.id); }}
+                onReorder={(newOrder) => { columnOrder = newOrder.map((c: any) => c.id); }}
               >
                 {#snippet header(col, index, dragProps)}
                   {@const header = col.header as typeof headerGroup.headers[0]}

package/dist/components/Breadcrumbs.svelte

@@ -1,41 +1,51 @@
 <script lang="ts">
   import { getResources } from '@svadmin/core';
-  import { currentPath } from '@svadmin/core/router';
+  import { getPath } from '../router-state.svelte.js';
+  import { formatLink } from '@svadmin/core/router';
   import { t } from '@svadmin/core/i18n';
   import * as Breadcrumb from './ui/breadcrumb/index.js';
 
   const resources = getResources();
-  let path = $state(currentPath());
-
-  function onHashChange() { path = currentPath(); }
 
   interface Crumb { label: string; href: string; }
 
   const crumbs = $derived.by(() => {
-    const result: Crumb[] = [{ label: t('common.home'), href: '#/' }];
-    if (path === '/') return result;
+    const result: Crumb[] = [{ label: t('common.home') ?? 'Home', href: formatLink('/') }];
+    const path = getPath().replace(/^\//, ''); 
+    if (path === '') return result;
 
     const segments = path.split('/').filter(Boolean);
-    const resourceName = segments[0];
-    const res = resources.find(r => r.name === resourceName);
-
-    if (res) {
-      result.push({ label: res.label, href: `#/${res.name}` });
-
-      if (segments[1] === 'create') {
-        result.push({ label: t('common.create'), href: `#/${res.name}/create` });
-      } else if (segments[1] === 'edit' && segments[2]) {
-        result.push({ label: `${t('common.edit')} #${segments[2]}`, href: `#/${res.name}/edit/${segments[2]}` });
-      } else if (segments[1] === 'show' && segments[2]) {
-        result.push({ label: `${t('common.detail')} #${segments[2]}`, href: `#/${res.name}/show/${segments[2]}` });
-      }
+    const resourceNames = resources.map(r => r.name);
+    
+    let currentPath = '';
+
+    for (let i = 0; i < segments.length; i++) {
+       const seg = segments[i];
+       currentPath += `/${seg}`;
+
+       if (resourceNames.includes(seg)) {
+          const res = resources.find(r => r.name === seg)!;
+          result.push({ label: res.label, href: formatLink(currentPath) });
+       } else if (i > 0 && resourceNames.includes(segments[i-1])) {
+          // This is a parent ID (e.g. /teams/123/users)
+          result.push({ label: `#${seg}`, href: formatLink(currentPath) });
+       } else if (seg === 'create') {
+          result.push({ label: t('common.create') ?? 'Create', href: formatLink(currentPath) });
+       } else if (['edit', 'show', 'clone'].includes(seg) && segments[i+1]) {
+          const actionLabel = seg === 'edit' ? (t('common.edit') ?? 'Edit') : 
+                              seg === 'show' ? (t('common.detail') ?? 'Details') : 
+                              (t('common.clone') ?? 'Clone');
+          const id = segments[i+1];
+          currentPath += `/${id}`; // advance path by id
+          result.push({ label: `${actionLabel} #${id}`, href: formatLink(currentPath) });
+          i++; // skip next segment since we consumed the id
+       }
     }
+
     return result;
   });
 </script>
 
-<svelte:window onhashchange={onHashChange} />
-
 {#if crumbs.length > 1}
   <Breadcrumb.Root class="mb-4">
     <Breadcrumb.List>

package/dist/components/ChatDialog.svelte

@@ -94,6 +94,8 @@
         }
       }
     }, 300);
+
+    return () => { if (persistTimer) clearTimeout(persistTimer); };
   });
 
   function genId(): string {

package/dist/components/DraggableHeader.svelte

@@ -29,10 +29,13 @@
   let dragIndex = $state<number | null>(null);
   let dropIndex = $state<number | null>(null);
 
-  // Restore saved order from localStorage
+  // Restore saved order from localStorage (once on mount)
+  let _restored = false;
   $effect(() => {
+    if (_restored) return;
     const storageKey = `svadmin-colorder-${resourceName}`;
     if (typeof window === 'undefined') return;
+    _restored = true;
     try {
       const saved = localStorage.getItem(storageKey);
       if (saved) {

package/dist/components/Header.svelte

@@ -27,7 +27,7 @@
   }>();
 
   // Retrieve optional component overrides from registry
-  const registry = getComponentRegistry();
+  const registry = getComponentRegistry() || {} as any;
   const CustomBreadcrumbs = registry.Breadcrumbs;
   const CustomThemeToggle = registry.ThemeToggle;
   const CustomUserMenu = registry.UserMenu;

package/dist/components/Layout.svelte

@@ -35,22 +35,20 @@
   let identity = $state<Identity | null>(null);
 
   $effect(() => {
+    let cancelled = false;
     if (!auth) {
-      loading = false;
+      if (!cancelled) loading = false;
       return;
     }
-    (async () => {
-      try {
-        const { authenticated, redirectTo } = await auth.check();
-        if (!authenticated) {
-          navigate(redirectTo ?? '/login');
-          return;
-        }
-        identity = await auth.getIdentity();
-      } finally {
+    auth.getIdentity().then(id => {
+      if (!cancelled) {
+        identity = id;
         loading = false;
       }
-    })();
+    }).catch(() => {
+      if (!cancelled) loading = false;
+    });
+    return () => { cancelled = true; };
   });
 
   async function handleLogout() {

package/dist/components/PermissionMatrix.svelte

@@ -2,6 +2,7 @@
   import { Shield, AlertCircle, Check } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
+  import { t } from '@svadmin/core/i18n';
   
   let {
     // Basic metadata lists
@@ -51,9 +52,9 @@
     <div>
       <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
         <Shield class="w-6 h-6 text-primary" />
-        统一操作权限矩阵
+        {t('permissions.title') || 'Permission Matrix'}
       </h1>
-      <p class="text-muted-foreground mt-1 text-sm">直观配置系统模块与角色的鉴权规则网络。</p>
+      <p class="text-muted-foreground mt-1 text-sm">{t('permissions.description') || 'Configure authorization rules for system modules and roles.'}</p>
     </div>
     
     <!-- Toast Feedback -->
@@ -72,7 +73,7 @@
   <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
     <!-- Left: Role Selector Sidebar -->
     <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-xl shadow-sm border border-border p-4 flex flex-col">
-      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">业务受众角色</h2>
+      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">{t('permissions.roles') || 'Roles'}</h2>
       <div class="space-y-1 flex-1 overflow-y-auto">
         {#each roles as role}
           <button 
@@ -84,7 +85,7 @@
           </button>
         {/each}
         {#if roles.length === 0}
-          <p class="text-center text-muted-foreground text-sm p-4">暂无角色</p>
+          <p class="text-center text-muted-foreground text-sm p-4">{t('permissions.noRoles') || 'No roles available'}</p>
         {/if}
       </div>
       
@@ -102,10 +103,10 @@
       <div class="p-5 border-b border-border bg-muted/30 flex items-center justify-between">
         <div class="flex items-center gap-4">
           <div>
-            <h2 class="text-lg font-bold text-foreground">当前视角: 
-              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || '未选择'}</span>
+            <h2 class="text-lg font-bold text-foreground">{t('permissions.currentRole') || 'Current role'}: 
+              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || (t('permissions.noneSelected') || 'None selected')}</span>
             </h2>
-            <p class="text-xs text-muted-foreground mt-1">勾选以即时挂载/收回操作权限</p>
+            <p class="text-xs text-muted-foreground mt-1">{t('permissions.toggleHint') || 'Toggle checkboxes to grant or revoke permissions'}</p>
           </div>
           
           <!-- Slot for header extra logic -->
@@ -116,7 +117,7 @@
         
         {#if conflictCount > 0}
           <div class="px-3 py-1.5 bg-destructive/10 text-destructive rounded-lg text-xs font-medium ring-1 ring-destructive/20 flex items-center gap-1.5">
-            <AlertCircle class="w-4 h-4" /> {conflictCount} 重叠/冲突规则
+            <AlertCircle class="w-4 h-4" /> {conflictCount} {t('permissions.conflicts') || 'conflicting rules'}
           </div>
         {/if}
       </div>
@@ -126,7 +127,7 @@
         <table class="min-w-full rounded-lg overflow-hidden shadow-sm ring-1 ring-border/10">
           <thead class="bg-muted/50">
             <tr>
-              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">模块域与资源点</th>
+              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">{t('permissions.resources') || 'Resources'}</th>
               {#each actions as action}
                 <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground">
                   <div class="flex flex-col items-center">
@@ -140,7 +141,7 @@
           <tbody class="bg-card">
             {#if resources.length === 0}
               <tr>
-                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">暂无可用资源</td>
+                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">{t('permissions.noResources') || 'No resources available'}</td>
               </tr>
             {/if}
             {#each resources as resource, i}

package/dist/components/RolesSettings.svelte

@@ -7,7 +7,7 @@
   import { toast } from '@svadmin/core/toast';
   import { AlertCircle } from '@lucide/svelte';
 
-  const authProvider = getAuthProvider();
+  const authProvider = getAuthProvider({ optional: true });
   const rawResources = getResources();
 
   let roles = $state<RoleInfo[]>([]);

package/dist/components/SettingsPage.svelte

@@ -8,6 +8,9 @@
   import AboutSettings from './AboutSettings.svelte';
   import RolesSettings from './RolesSettings.svelte';
   import AuditLogViewer from './AuditLogViewer.svelte';
+  import { getAuthProvider } from '@svadmin/core';
+
+  const authProvider = getAuthProvider({ optional: true });
 
   const sections = [
     {
@@ -20,26 +23,29 @@
     {
       group: 'settings.system',
       items: [
-        { key: 'roles', path: '/settings/roles', icon: Shield, label: 'settings.rolesAndPermissions' },
-        { key: 'audit', path: '/settings/audit', icon: FileSearch, label: 'settings.auditLogs' },
+        ...(authProvider ? [
+          { key: 'roles', path: '/settings/roles', icon: Shield, label: 'settings.rolesAndPermissions' },
+          { key: 'audit', path: '/settings/audit', icon: FileSearch, label: 'settings.auditLogs' },
+        ] : []),
         { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
       ],
     },
   ];
 
+  import { getParams, getRoute } from '../router-state.svelte.js';
+
   let activeKey = $derived.by(() => {
-    const path = currentPath();
-    if (path.includes('/settings/appearance')) return 'appearance';
-    if (path.includes('/settings/roles')) return 'roles';
-    if (path.includes('/settings/audit')) return 'audit';
-    if (path.includes('/settings/about')) return 'about';
+    const tab = getParams().tab;
+    if (tab === 'appearance') return 'appearance';
+    if (tab === 'roles') return 'roles';
+    if (tab === 'audit') return 'audit';
+    if (tab === 'about') return 'about';
     return 'profile';
   });
 
   // Default redirect to profile
   $effect(() => {
-    const path = currentPath();
-    if (path === '/settings') {
+    if (getRoute() === '/settings') {
       navigate('/settings/profile');
     }
   });

package/dist/components/ShowPage.svelte

@@ -11,6 +11,7 @@
   import ListButton from './buttons/ListButton.svelte';
   import EditButton from './buttons/EditButton.svelte';
   import DeleteButton from './buttons/DeleteButton.svelte';
+  import CloneButton from './buttons/CloneButton.svelte';
   import RefreshButton from './buttons/RefreshButton.svelte';
 
   let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
@@ -28,6 +29,9 @@
       {#if resource.canEdit !== false}
         <EditButton resource={resourceName} recordItemId={id} hideText />
       {/if}
+      {#if resource.canCreate !== false}
+        <CloneButton resource={resourceName} recordItemId={id} hideText />
+      {/if}
       {#if resource.canDelete !== false}
         <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
       {/if}

package/dist/components/Sidebar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { getResources, canAccessAsync } from '@svadmin/core';
   import type { Identity, MenuItem } from '@svadmin/core';
-  import { currentPath, navigate } from '@svadmin/core/router';
+  import { navigate } from '@svadmin/core/router';
+  import { getPath } from '../router-state.svelte.js';
   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';
@@ -118,9 +119,7 @@
   const localeLabel = $derived(getLocale() === 'zh-CN' ? '中' : 'EN');
 
   // Track current hash for active state
-  let path = $state(currentPath());
-
-  function onHashChange() { path = currentPath(); }
+  const path = $derived(getPath());
 
   function isActive(itemPath: string): boolean {
     if (itemPath === '/') return path === '/';
@@ -159,6 +158,26 @@
   let colorPickerRef = $state<HTMLDivElement | null>(null);
   let colorPickerOpenedAt = 0;
 
+  // Density state
+  let density = $state<'compact' | 'standard'>('standard');
+  
+  $effect(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem('svadmin-sidebar-density');
+      if (stored === 'compact' || stored === 'standard') density = stored;
+      
+      const onDensityChange = (e: Event) => {
+        const customEvent = e as CustomEvent<'compact' | 'standard'>;
+        density = customEvent.detail;
+      };
+      window.addEventListener('svadmin-density-change', onDensityChange);
+      return () => window.removeEventListener('svadmin-density-change', onDensityChange);
+    }
+  });
+
+  const pyClass = $derived(density === 'compact' ? 'py-1.5' : 'py-2.5');
+  const pyClassGroupItem = $derived(density === 'compact' ? 'py-1.5' : 'py-2');
+
   // Click-outside to close color picker
   $effect(() => {
     if (!colorPickerOpen) return;
@@ -176,7 +195,7 @@
   });
 </script>
 
-<svelte:window onhashchange={onHashChange} />
+
 
 <aside
   aria-label="Sidebar navigation"
@@ -235,7 +254,7 @@
                 {@const active = isActive(item.path)}
                 <a
                   href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                  class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+                  class="flex items-center gap-3 rounded-lg px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-200
                   {active
                     ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
                     : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
@@ -258,7 +277,7 @@
                   <a
                     {...props}
                     href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-                    class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+                    class="flex items-center justify-center gap-3 rounded-lg px-3 {pyClass} text-sm font-medium transition-all duration-200
                     {active
                       ? 'bg-sidebar-accent text-sidebar-accent-foreground'
                       : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
@@ -274,7 +293,7 @@
           {:else}
             <a
               href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
-              class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+              class="flex items-center gap-3 rounded-lg px-3 {pyClass} text-sm font-medium transition-all duration-200
               {active
                 ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
                 : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"

package/dist/components/SidebarItem.svelte

@@ -9,6 +9,8 @@
     ChevronDown, Folder, ExternalLink, type Icon as LucideIcon,
   } from '@lucide/svelte';
 
+  import { formatLink } from '@svadmin/core/router';
+  
   let { item, currentPath, collapsed = false, depth = 0 }: {
     item: MenuItem;
     currentPath: string;
@@ -37,6 +39,7 @@
   function isActive(itemHref: string | undefined): boolean {
     if (!itemHref) return false;
     if (itemHref === '/') return currentPath === '/';
+    // Remove hash/leading slash for comparison if necessary, but currentPath usually starts with /
     return currentPath.startsWith(itemHref);
   }
 
@@ -49,7 +52,9 @@
   const hasChildren = $derived(item.children && item.children.length > 0);
   const active = $derived(isActive(item.href));
   const childActive = $derived(hasActiveChild(item));
-  const isExternal = $derived(item.target === '_blank');
+  const isExternal = $derived(item.target === '_blank' || item.href?.startsWith('http'));
+
+  const finalHref = $derived(isExternal ? item.href : (item.href ? formatLink(item.href) : undefined));
 
   // Track open state — auto-open if a child is active
   let isOpen = $state(false);
@@ -92,7 +97,7 @@
       {#snippet child({ props }: { props: Record<string, unknown> })}
         <a
           {...props}
-          href={item.href ? `#${item.href}` : undefined}
+          href={finalHref}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
           class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
@@ -111,7 +116,7 @@
 {:else}
   <!-- Leaf node: render as a link -->
   <a
-    href={item.href ? `#${item.href}` : undefined}
+    href={finalHref}
     target={isExternal ? '_blank' : undefined}
     rel={isExternal ? 'noopener noreferrer' : undefined}
     class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { getContext } from "svelte";
 
 	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement>;
 
@@ -11,16 +12,25 @@
 		child,
 		...restProps
 	}: Props & { child?: import("svelte").Snippet<[{ props: Record<string, unknown> }]> } = $props();
+
+	const toggle = getContext<() => void>("svadmin-dropdown-toggle");
+
+	function handleClick(e: MouseEvent) {
+		e.stopPropagation();
+		toggle?.();
+		restProps.onclick?.(e as any);
+	}
 </script>
 
 {#if child}
-	{@render child({ props: { ...restProps, class: cn(className), "data-slot": "dropdown-menu-trigger" } })}
+	{@render child({ props: { ...restProps, class: cn(className), "data-slot": "dropdown-menu-trigger", onclick: handleClick } })}
 {:else}
 	<button
 		bind:this={ref}
 		data-slot="dropdown-menu-trigger"
 		class={cn(className)}
 		{...restProps}
+		onclick={handleClick}
 	>
 		{@render children?.()}
 	</button>

package/dist/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -26,6 +26,10 @@
 	}
 
 	setContext("svadmin-dropdown-open", () => open);
+	setContext("svadmin-dropdown-toggle", () => {
+		open = !open;
+		onOpenChange?.(open);
+	});
 
 	$effect(() => {
 		if (open) {

package/dist/router-state.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { RouterProvider } from '@svadmin/core';
 export declare function initRouter(provider?: RouterProvider): void;
 export declare function getRoute(): string;
+export declare function getPath(): string;
 export declare function getParams(): Record<string, string>;
 export declare function getRouterProviderInstance(): RouterProvider | undefined;

package/dist/router-state.svelte.js

@@ -2,6 +2,7 @@
 import { matchRoute, setActiveRouterProvider } from '@svadmin/core/router';
 let _route = $state('/');
 let _params = $state({});
+let _path = $state('/');
 let _initialized = false;
 let _provider;
 const ROUTES = [
@@ -9,6 +10,8 @@ const ROUTES = [
     '/register',
     '/forgot-password',
     '/update-password',
+    '/settings',
+    '/settings/:tab',
     '/',
     '/:resource',
     '/:resource/create',
@@ -28,12 +31,14 @@ function sync() {
         path = parsed.pathname || '/';
         const m = matchRoute(path, ROUTES);
         _route = m?.route ?? '/';
+        _path = path;
         _params = { ...(m?.params ?? {}), ...parsed.params };
     }
     else {
         path = typeof window !== 'undefined' ? window.location.hash.replace(/^#/, '') || '/' : '/';
         const m = matchRoute(path, ROUTES);
         _route = m?.route ?? '/';
+        _path = path;
         _params = m?.params ?? {};
     }
 }
@@ -52,6 +57,9 @@ export function initRouter(provider) {
 export function getRoute() {
     return _route;
 }
+export function getPath() {
+    return _path;
+}
 export function getParams() {
     return _params;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -10,7 +10,7 @@
     "dist"
   ],
   "main": "dist/index.js",
-  "types": "dist/index.d.d.ts",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,7 +25,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.21.1",
+    "@svadmin/core": "^0.22.0",
     "@tanstack/svelte-query": "^6.0.0",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.7.1",
@@ -53,7 +53,6 @@
   "dependencies": {
     "@lucide/svelte": "^1.7.0",
     "@tanstack/svelte-table": "^9.0.0-alpha.10",
-    "@tanstack/table-core": "^9.0.0-alpha.10",
     "bits-ui": "^2.17.1",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.19",
@@ -72,7 +71,9 @@
   "bugs": {
     "url": "https://github.com/zuohuadong/svadmin/issues"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@tanstack/table-core": "8.21.3"
+  },
   "scripts": {
     "build": "svelte-package -i src -o dist"
   }