@svadmin/ui 0.49.0 → 0.49.2

package/dist/components/AdminApp.svelte

@@ -351,6 +351,44 @@
   const renderedParams = $derived(params);
   const renderedHasRouteResource = $derived(!renderedParams.resource || resourceNames.has(renderedParams.resource));
   const renderedResourcePages = $derived(renderedParams.resource ? resourcePages?.[renderedParams.resource] : undefined);
+  const documentTitle = $derived.by(() => {
+    const resource = renderedParams.resource
+      ? resources.find((candidate) => candidate.name === renderedParams.resource)
+      : undefined;
+    let pageLabel = '';
+
+    if (resource) {
+      pageLabel = resource.label || resource.name;
+    } else if (renderedRoute.startsWith('/settings') || renderedRoute === '/account/:tab') {
+      const tab = renderedParams.tab === 'api-keys'
+        ? 'api'
+        : renderedParams.tab === 'audit-logs'
+          ? 'audit'
+          : renderedParams.tab ?? 'profile';
+      const labels: Record<string, string> = {
+        profile: translation.t('settings.profile'),
+        appearance: translation.t('settings.appearance'),
+        notifications: translation.t('settings.notifications'),
+        security: translation.t('settings.security'),
+        roles: translation.t('settings.rolesAndPermissions'),
+        integrations: translation.t('settings.integrations'),
+        api: translation.t('settings.api'),
+        audit: translation.t('settings.auditLogs'),
+        about: translation.t('settings.about'),
+      };
+      pageLabel = labels[tab] ?? translation.t('settings.title');
+    } else if (renderedRoute === '/login') {
+      pageLabel = translation.t('auth.login');
+    } else if (renderedRoute === '/' || renderedRoute === '/inventory-dashboard') {
+      pageLabel = translation.t('common.dashboard');
+    }
+
+    return pageLabel && pageLabel !== title ? `${pageLabel} - ${title}` : title;
+  });
+
+  $effect(() => {
+    if (typeof document !== 'undefined') document.title = documentTitle;
+  });
 
   async function navigateWithinApp(path: string, options?: { replaceState?: boolean }) {
     await adminContext.navigate(path, options);
@@ -578,12 +616,12 @@
           {@const Comp = renderedResourcePages?.create ?? mergedComponents.AutoForm}
           <Comp resourceName={renderedParams.resource} mode="create" />
         {/key}
-      {:else if (renderedRoute === '/:resource/edit/:id' || renderedRoute === '/:parent/:parentId/:resource/edit/:id') && renderedHasRouteResource}
+      {:else if (renderedRoute === '/:resource/edit/:id' || renderedRoute === '/:resource/:id/edit' || renderedRoute === '/:parent/:parentId/:resource/edit/:id') && renderedHasRouteResource}
         {#key `${renderedParams.resource}-${renderedParams.id}`}
           {@const Comp = renderedResourcePages?.edit ?? mergedComponents.AutoForm}
           <Comp resourceName={renderedParams.resource} mode="edit" id={renderedParams.id} />
         {/key}
-      {:else if (renderedRoute === '/:resource/show/:id' || renderedRoute === '/:parent/:parentId/:resource/show/:id') && renderedHasRouteResource}
+      {:else if (renderedRoute === '/:resource/show/:id' || renderedRoute === '/:resource/:id' || renderedRoute === '/:parent/:parentId/:resource/show/:id') && renderedHasRouteResource}
         {#key `${renderedParams.resource}-${renderedParams.id}`}
           {@const Comp = renderedResourcePages?.show ?? mergedComponents.ShowPage}
           <Comp resourceName={renderedParams.resource} id={renderedParams.id} />

package/dist/components/AutoTable.svelte

@@ -111,8 +111,6 @@
     sorters: externalSorters,
   }: Props = $props();
   const adminContext = captureAdminContext();
-  const headerDensityClass = $derived(density === 'compact' ? 'h-8 py-1.5 text-[0.6875rem]' : 'h-9 py-2.5 text-xs');
-  const cellDensityClass = $derived(density === 'compact' ? 'h-8 px-2 py-1 text-xs' : 'h-10 p-2 text-sm');
 
   const resource = $derived(getResource(resourceName));
   const primaryKey = $derived(resource.primaryKey ?? 'id');
@@ -710,7 +708,7 @@
       <div in:fade={{ duration: 150 }}>
         <!-- Desktop Table (hidden on mobile) -->
         <div class="hidden md:block">
-        <Table.Root>
+        <Table.Root {density}>
           <Table.Header>
             {#each tableView.headerGroups as headerGroup, _i (_i)}
               {@const visibleHeaders = headerGroup.headers.filter((header: Header<TableFeatures, BaseRecord, unknown>) => isColumnVisible(header.column.id))}
@@ -723,7 +721,7 @@
                   {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
                     {...dragProps}
-                    class={cn('border-b border-border bg-muted/25 font-medium tracking-normal text-muted-foreground hover:bg-muted/40', headerDensityClass, dragProps.class)}
+                    class={cn('border-b border-border bg-muted/25 font-medium tracking-normal text-muted-foreground hover:bg-muted/40', dragProps.class)}
                     style={header_getSize(header) != null && header_getSize(header) !== 150 ? `width:${header_getSize(header)}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -768,7 +766,7 @@
                   {#snippet child({ props })}
                     <Table.Row {...props} class="transition-all duration-300 border-b border-border/10 {row_getIsSelected(row) ? 'bg-primary/5' : 'hover:bg-muted/20'}">
                       {#each visibleCells as cell, _i (_i)}
-                        <Table.Cell class={cellDensityClass}>
+                        <Table.Cell>
                           {#if cell.column.id === '_select'}
                             <Checkbox
                               checked={row_getIsSelected(row)}

package/dist/components/DetailDrawer.svelte

@@ -7,7 +7,10 @@
   type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     open?: boolean;
     title?: string;
+    titleId?: string;
     description?: string;
+    descriptionId?: string;
+    closeLabel?: string;
     side?: 'left' | 'right';
     width?: string;
     onClose?: () => void;
@@ -24,6 +27,11 @@
     ref = $bindable(null),
     class: className,
     'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    titleId,
+    descriptionId,
+    closeLabel = 'Close',
     onClose,
     children,
     footer,
@@ -41,20 +49,23 @@
   bind:open
   {side}
   onClose={handleClose}
+  {closeLabel}
   class={cn('overflow-y-auto', width, className)}
   role="dialog"
   aria-modal="true"
-  aria-label={ariaLabel || title || 'Details'}
+  aria-label={(ariaLabelledby || titleId) ? ariaLabel : (ariaLabel || title || 'Details')}
+  aria-labelledby={ariaLabelledby || (titleId ? titleId : undefined)}
+  aria-describedby={ariaDescribedby || (descriptionId ? descriptionId : undefined)}
   {...restProps}
 >
   <Sheet.Content class="flex h-full flex-col">
     {#if title || description}
       <Sheet.Header>
         {#if title}
-          <Sheet.Title>{title}</Sheet.Title>
+          <Sheet.Title id={titleId}>{title}</Sheet.Title>
         {/if}
         {#if description}
-          <Sheet.Description>{description}</Sheet.Description>
+          <Sheet.Description id={descriptionId}>{description}</Sheet.Description>
         {/if}
       </Sheet.Header>
     {/if}

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

@@ -4,7 +4,10 @@ import { type WithElementRef } from '../utils.js';
 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     open?: boolean;
     title?: string;
+    titleId?: string;
     description?: string;
+    descriptionId?: string;
+    closeLabel?: string;
     side?: 'left' | 'right';
     width?: string;
     onClose?: () => void;

package/dist/components/Layout.svelte

@@ -188,6 +188,7 @@
         {siteUrl}
         {menu}
         showSearch={true}
+        showThemeToggle={true}
         onSearchClick={() => { commandOpen = true; }}
       >
         {#snippet children()}

package/dist/components/ProfilePage.svelte

@@ -20,7 +20,7 @@
 
   const identity = useGetIdentity();
   const notification = useNotification();
-  const updatePw = useUpdatePassword();
+  const updatePw = useUpdatePassword({ successNotification: i18n.t('profile.passwordChanged') });
 
   const authProvider = $derived(adminContext.authProvider);
   const tenantIdentity = $derived(adminContext.tenantCacheKey?.__svadminTenant);

package/dist/components/RowActions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Ellipsis } from '@lucide/svelte';
-  import type { Component, Snippet } from 'svelte';
+  import { tick, type Component, type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { cn, type WithElementRef } from '../utils.js';
   import * as DropdownMenu from './ui/dropdown-menu/index.js';
@@ -25,6 +25,9 @@
     children?: Snippet;
     moreContent?: Snippet;
   };
+  type RowActionsKeyboardEvent = KeyboardEvent & {
+    currentTarget: EventTarget & HTMLDivElement;
+  };
 
   let {
     actions = [],
@@ -32,6 +35,7 @@
     moreLabel = 'More actions',
     ref = $bindable(null),
     class: className,
+    onkeydown,
     children,
     moreContent,
     ...restProps
@@ -46,6 +50,9 @@
   );
   const visibleActions = $derived(availableActions.slice(0, visibleLimit));
   const overflowActions = $derived(availableActions.slice(visibleLimit));
+  let menuWasOpen = false;
+  let initialMenuFocus: 'first' | 'last' = 'first';
+  let restoreFocusOnClose = false;
 
   function resolvedVariant(action: RowActionItem): RowActionItem['variant'] {
     return action.variant ?? (action.danger ? 'destructive' : 'ghost');
@@ -56,15 +63,77 @@
       event.preventDefault();
       return;
     }
+    restoreFocusOnClose = true;
     overflowOpen = false;
     action.onclick?.(event);
   }
+
+  function menuElements(): HTMLElement[] {
+    return [...(ref?.querySelector('[data-slot="dropdown-menu-content"]')?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])]
+      .filter((element) => !element.matches(':disabled, [aria-disabled="true"]'));
+  }
+
+  function moveMenuFocus(event: KeyboardEvent, direction: 1 | -1): void {
+    const elements = menuElements();
+    if (!elements.length) return;
+    const currentIndex = elements.indexOf(document.activeElement as HTMLElement);
+    const nextIndex = currentIndex < 0
+      ? (direction > 0 ? 0 : elements.length - 1)
+      : (currentIndex + direction + elements.length) % elements.length;
+    event.preventDefault();
+    elements[nextIndex]?.focus();
+  }
+
+  function focusMenuBoundary(event: KeyboardEvent, boundary: 'first' | 'last'): void {
+    const elements = menuElements();
+    if (!elements.length) return;
+    event.preventDefault();
+    elements[boundary === 'first' ? 0 : elements.length - 1]?.focus();
+  }
+
+  function manageMenuKeyboard(event: RowActionsKeyboardEvent): void {
+    onkeydown?.(event);
+    if (event.defaultPrevented) return;
+    const target = event.target instanceof HTMLElement ? event.target : null;
+    const trigger = target?.closest<HTMLElement>('[data-slot="dropdown-menu-trigger"]');
+    const content = target?.closest<HTMLElement>('[data-slot="dropdown-menu-content"]');
+    if (trigger && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+      event.preventDefault();
+      initialMenuFocus = event.key === 'ArrowUp' ? 'last' : 'first';
+      trigger.click();
+    } else if (content && event.key === 'Escape') {
+      event.preventDefault();
+      restoreFocusOnClose = true;
+      overflowOpen = false;
+    } else if (content && event.key === 'ArrowDown') moveMenuFocus(event, 1);
+    else if (content && event.key === 'ArrowUp') moveMenuFocus(event, -1);
+    else if (content && event.key === 'Home') focusMenuBoundary(event, 'first');
+    else if (content && event.key === 'End') focusMenuBoundary(event, 'last');
+  }
+
+  $effect(() => {
+    if (overflowOpen) {
+      void tick().then(() => {
+        menuWasOpen = true;
+        const elements = menuElements();
+        elements[initialMenuFocus === 'last' ? elements.length - 1 : 0]?.focus();
+        initialMenuFocus = 'first';
+      });
+    } else if (menuWasOpen) {
+      menuWasOpen = false;
+      if (restoreFocusOnClose) {
+        restoreFocusOnClose = false;
+        ref?.querySelector<HTMLElement>('[data-slot="dropdown-menu-trigger"]')?.focus();
+      }
+    }
+  });
 </script>
 
 <div
   bind:this={ref}
   data-slot="row-actions"
   class={cn("inline-flex items-center gap-1.5", className)}
+  onkeydown={manageMenuKeyboard}
   {...restProps}
 >
   {#if children}
@@ -109,12 +178,12 @@
     <DropdownMenu.Root bind:open={overflowOpen}>
       <DropdownMenu.Trigger>
         {#snippet child({ props })}
-          <Button {...props} variant="ghost" size="icon-sm" title={moreLabel} aria-label={moreLabel}>
+          <Button {...props} variant="ghost" size="icon-sm" title={moreLabel} aria-label={moreLabel} aria-haspopup="menu" aria-expanded={overflowOpen}>
             <Ellipsis class="size-4" />
           </Button>
         {/snippet}
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="end" class="min-w-[8rem]">
+      <DropdownMenu.Content align="end" class="min-w-[8rem]" role="menu" aria-label={moreLabel}>
         {#each overflowActions as action (action)}
           {#if action.href}
             <Button
@@ -123,6 +192,8 @@
               size="sm"
               disabled={action.disabled}
               onclick={(event) => handleOverflowAction(action, event)}
+              role="menuitem"
+              tabindex={-1}
               class="h-auto w-full justify-start rounded-md px-2 py-1.5 text-sm font-normal"
             >
               {#if action.icon}
@@ -136,6 +207,8 @@
               onclick={(event) => handleOverflowAction(action, event)}
               disabled={action.disabled}
               destructive={action.danger || action.variant === 'destructive'}
+              role="menuitem"
+              tabindex={-1}
             >
               {#if action.icon}
                 {@const Icon = action.icon}

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

@@ -1,4 +1,4 @@
-import type { Component, Snippet } from 'svelte';
+import { type Component, type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../utils.js';
 export type RowActionItem = {

package/dist/components/SettingsPage.svelte

@@ -110,7 +110,7 @@
   let activeKey = $derived.by(() => {
     const tab = getParams().tab;
     if (!tab) return "profile";
-    const alias = tab === "api-keys" ? "api" : tab;
+    const alias = tab === "api-keys" ? "api" : tab === "audit-logs" ? "audit" : tab;
     if (sectionKeys.has(alias)) return alias;
     return content ? alias : "profile";
   });

package/dist/components/Sidebar.svelte

@@ -202,15 +202,26 @@
     return () => { cancelled = true; };
   });
 
-  function toggleLocale() {
-    const locales = i18n.getAvailableLocales();
-    const current = i18n.locale;
-    const idx = locales.indexOf(current);
-    const next = locales[(idx + 1) % locales.length];
-    i18n.setLocale(next);
+  const LOCALE_STORAGE_KEY = 'svadmin-locale';
+
+  function localeName(locale: string): string {
+    if (locale === 'zh-CN') return '简体中文';
+    if (locale === 'en') return 'English';
+    return locale;
   }
 
-  const localeLabel = $derived(i18n.locale === 'zh-CN' ? '中' : 'EN');
+  function selectLocale(locale: string): void {
+    i18n.setLocale(locale);
+    if (typeof window !== 'undefined') localStorage.setItem(LOCALE_STORAGE_KEY, locale);
+  }
+
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    const storedLocale = localStorage.getItem(LOCALE_STORAGE_KEY);
+    if (storedLocale && i18n.getAvailableLocales().includes(storedLocale)) {
+      i18n.setLocale(storedLocale);
+    }
+  });
 
   const path = $derived(getPath());
 
@@ -274,6 +285,19 @@
   });
 </script>
 
+{#snippet languageMenu()}
+  <select
+    aria-label={i18n.t('common.switchLanguage')}
+    value={i18n.locale}
+    onchange={(event) => selectLocale((event.target as HTMLSelectElement).value)}
+    class="h-8 w-14 rounded-md border border-border bg-sidebar px-1 text-[11px] font-semibold text-sidebar-foreground/70 outline-none focus:ring-2 focus:ring-ring"
+  >
+    {#each i18n.getAvailableLocales() as locale (locale)}
+      <option value={locale}>{localeName(locale)}</option>
+    {/each}
+  </select>
+{/snippet}
+
 
 
 <aside
@@ -444,9 +468,7 @@
         </div>
         <div class="mt-1 flex items-center justify-between px-1">
           <div class="flex items-center gap-0.5">
-            <TooltipButton tooltip={i18n.t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
-              <span class="text-[11px] font-semibold">{localeLabel}</span>
-            </TooltipButton>
+            {@render languageMenu()}
             <TooltipButton tooltip={i18n.t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
               {#if getResolvedTheme() === 'dark'}
                 <Sun class="h-3.5 w-3.5" />
@@ -465,16 +487,7 @@
       </div>
     {:else if collapsed}
       <div class="flex flex-col items-center gap-0.5 px-2 py-3">
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            {#snippet child({ props }: { props: Record<string, unknown> })}
-              <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
-                <span class="text-[11px] font-semibold">{localeLabel}</span>
-              </Button>
-            {/snippet}
-          </Tooltip.Trigger>
-          <Tooltip.Content side="right">{i18n.t('common.switchLanguage')}</Tooltip.Content>
-        </Tooltip.Root>
+        {@render languageMenu()}
         <Tooltip.Root>
           <Tooltip.Trigger>
             {#snippet child({ props }: { props: Record<string, unknown> })}
@@ -512,9 +525,7 @@
       </div>
     {:else}
       <div class="flex justify-center gap-1 p-3">
-        <TooltipButton tooltip={i18n.t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
-          <span class="text-[11px] font-semibold">{localeLabel}</span>
-        </TooltipButton>
+        {@render languageMenu()}
         <TooltipButton tooltip={i18n.t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-3.5 w-3.5" />

package/dist/components/content/WorkspaceStageStepper.svelte

@@ -18,6 +18,8 @@
     activeId: string;
     onselect?: (stage: WorkspaceStage) => void;
     ariaLabel?: string;
+    statusLabels?: Partial<Record<WorkspaceStageStatus, string>>;
+    getStageAriaLabel?: (stage: WorkspaceStage) => string;
     class?: string;
   }
 
@@ -26,6 +28,8 @@
     activeId,
     onselect,
     ariaLabel = 'Workflow stages',
+    statusLabels = {},
+    getStageAriaLabel,
     class: className = '',
   }: Props = $props();
 
@@ -35,6 +39,14 @@
     blocked: 'border-warning/40 bg-warning/15 text-warning-foreground',
     pending: 'border-border bg-background text-muted-foreground',
   };
+
+  const resolvedStatusLabels = $derived<Record<WorkspaceStageStatus, string>>({
+    complete: 'Complete',
+    current: 'Current stage',
+    blocked: 'Blocked',
+    pending: 'Pending',
+    ...statusLabels,
+  });
 </script>
 
 <nav aria-label={ariaLabel} class={cn('overflow-x-auto', className)} data-svadmin-workspace-stages>
@@ -45,7 +57,7 @@
           type="button"
           class="group grid min-w-28 grid-cols-[auto_minmax(0,1fr)] gap-x-2 rounded-md px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring sm:min-w-36"
           aria-current={stage.id === activeId ? 'step' : undefined}
-          aria-label={`${stage.label}: ${stage.status}`}
+          aria-label={getStageAriaLabel?.(stage) || `${stage.label}: ${resolvedStatusLabels[stage.status]}`}
           onclick={() => onselect?.(stage)}
         >
           <span class={cn('flex size-7 items-center justify-center rounded-full border', markerClass[stage.status])}>

package/dist/components/content/WorkspaceStageStepper.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     activeId: string;
     onselect?: (stage: WorkspaceStage) => void;
     ariaLabel?: string;
+    statusLabels?: Partial<Record<WorkspaceStageStatus, string>>;
+    getStageAriaLabel?: (stage: WorkspaceStage) => string;
     class?: string;
 }
 declare const WorkspaceStageStepper: import("svelte").Component<Props, {}, "">;

package/dist/components/ui/sheet/sheet.svelte

@@ -50,6 +50,7 @@
 		open?: boolean;
 		side?: "left" | "right";
 		onClose?: () => void;
+		closeLabel?: string;
 	};
 
 	let {
@@ -57,6 +58,7 @@
 		open = $bindable(false),
 		side = "right",
 		onClose,
+		closeLabel = "Close",
 		class: className,
 		tabindex = -1,
 		children,
@@ -185,7 +187,7 @@
 			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 				<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
 			</svg>
-			<span class="sr-only">Close</span>
+			<span class="sr-only">{closeLabel}</span>
 		</button>
 	</div>
 {/if}

package/dist/components/ui/sheet/sheet.svelte.d.ts

@@ -4,6 +4,7 @@ type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     open?: boolean;
     side?: "left" | "right";
     onClose?: () => void;
+    closeLabel?: string;
 };
 declare const Sheet: import("svelte").Component<Props, {}, "open" | "ref">;
 type Sheet = ReturnType<typeof Sheet>;

package/dist/components/ui/table/index.d.ts

@@ -6,4 +6,5 @@ import Footer from "./table-footer.svelte";
 import Head from "./table-head.svelte";
 import Header from "./table-header.svelte";
 import Row from "./table-row.svelte";
+export type { TableDensity } from "./table.svelte";
 export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { getContext } from "svelte";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLTdAttributes } from "svelte/elements";
+	import type { TableDensity } from "./table.svelte";
 
 	let {
 		ref = $bindable(null),
@@ -8,8 +10,13 @@
 		children,
 		...restProps
 	}: WithElementRef<HTMLTdAttributes, HTMLTableCellElement> = $props();
+
+	const getDensity = getContext<() => TableDensity>("svadmin-table-density");
+	const densityClass = $derived(getDensity?.() === "compact"
+		? "h-8 px-2 py-1 text-xs"
+		: "p-2");
 </script>
 
-<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+<td bind:this={ref} data-slot="table-cell" class={cn("align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, className)} {...restProps}>
 	{@render children?.()}
 </td>

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

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { getContext } from "svelte";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLThAttributes } from "svelte/elements";
+	import type { TableDensity } from "./table.svelte";
 
 	let {
 		ref = $bindable(null),
@@ -8,8 +10,13 @@
 		children,
 		...restProps
 	}: WithElementRef<HTMLThAttributes, HTMLTableCellElement> = $props();
+
+	const getDensity = getContext<() => TableDensity>("svadmin-table-density");
+	const densityClass = $derived(getDensity?.() === "compact"
+		? "h-8 px-2 py-1 text-xs"
+		: "h-9 px-2");
 </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}>
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", densityClass, className)} {...restProps}>
 	{@render children?.()}
 </th>

package/dist/components/ui/table/table.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
+	import { setContext } from "svelte";
 	import type { HTMLTableAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
 
+	export type TableDensity = "compact" | "comfortable";
+
+	type Props = WithElementRef<HTMLTableAttributes, HTMLTableElement> & {
+		density?: TableDensity;
+	};
+
 	let {
 		ref = $bindable(null),
+		density = "comfortable",
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTableAttributes, HTMLTableElement> = $props();
+	}: Props = $props();
+
+	setContext("svadmin-table-density", () => density);
 </script>
 
-<div data-slot="table-container" class="relative w-full overflow-x-auto">
+<div data-slot="table-container" data-table-density={density} class="relative w-full overflow-x-auto">
 	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
 		{@render children?.()}
 	</table>

package/dist/components/ui/table/table.svelte.d.ts

@@ -1,5 +1,9 @@
 import type { HTMLTableAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
-declare const Table: import("svelte").Component<WithElementRef<HTMLTableAttributes, HTMLTableElement>, {}, "ref">;
+export type TableDensity = "compact" | "comfortable";
+type Props = WithElementRef<HTMLTableAttributes, HTMLTableElement> & {
+    density?: TableDensity;
+};
+declare const Table: import("svelte").Component<Props, {}, "ref">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/router-state.svelte.js

@@ -49,6 +49,8 @@ const ROUTES = [
     '/:resource/edit/:id',
     '/:resource/show/:id',
     '/:resource/clone/:id',
+    '/:resource/:id/edit',
+    '/:resource/:id',
     '/:parent/:parentId/:resource',
     '/:parent/:parentId/:resource/create',
     '/:parent/:parentId/:resource/edit/:id',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.49.0",
+  "version": "0.49.2",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.39.0",
+    "@svadmin/core": "^0.40.1",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",