@svadmin/ui 0.48.0 → 0.49.1

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

@@ -75,6 +75,7 @@
   interface Props {
     resourceName: string;
     selectable?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Custom header actions (right side) */
     headerActions?: Snippet;
     /** Custom cell renderers by field key */
@@ -98,6 +99,7 @@
   let {
     resourceName,
     selectable = true,
+    density = 'comfortable',
     headerActions,
     columns: customColumns,
     defaultCellRenderer,
@@ -682,7 +684,7 @@
   </div>
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-[24px] bg-card/80 backdrop-blur-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden ring-1 ring-border/30" role="region" aria-label="{resource.label} {i18n.t('common.list')}">
+  <div class="overflow-hidden rounded-lg border border-border bg-card shadow-sm" role="region" aria-label="{resource.label} {i18n.t('common.list')}" data-table-density={density}>
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -706,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))}
@@ -719,7 +721,7 @@
                   {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
                     {...dragProps}
-                    class={cn("bg-transparent hover:bg-muted/10 border-b border-border/20 uppercase tracking-[0.12em] text-[10px] text-muted-foreground/70 font-semibold py-4", 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'}

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

@@ -3,6 +3,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
     selectable?: boolean;
+    density?: 'compact' | 'comfortable';
     /** Custom header actions (right side) */
     headerActions?: Snippet;
     /** Custom cell renderers by field key */

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    status?: string;
+    primaryAction: Snippet;
+    secondaryActions?: Snippet;
+    class?: string;
+  }
+
+  let { title, description, status, primaryAction, secondaryActions, class: className = '' }: Props = $props();
+</script>
+
+<section
+  class={cn('flex flex-col gap-3 border-y border-border bg-card px-4 py-3 sm:flex-row sm:items-center sm:justify-between', className)}
+  aria-label={title}
+  data-svadmin-workspace-action-bar
+>
+  <div class="min-w-0">
+    <div class="flex flex-wrap items-center gap-2">
+      {#if status}<span class="rounded-sm bg-warning/15 px-2 py-0.5 text-xs font-medium text-warning-foreground">{status}</span>{/if}
+      <h2 class="text-sm font-semibold text-foreground">{title}</h2>
+    </div>
+    {#if description}<p class="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>{/if}
+  </div>
+  <div class="flex shrink-0 flex-wrap items-center gap-2">
+    {#if secondaryActions}{@render secondaryActions()}{/if}
+    {@render primaryAction()}
+  </div>
+</section>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    status?: string;
+    primaryAction: Snippet;
+    secondaryActions?: Snippet;
+    class?: string;
+}
+declare const WorkspaceActionBar: import("svelte").Component<Props, {}, "">;
+type WorkspaceActionBar = ReturnType<typeof WorkspaceActionBar>;
+export default WorkspaceActionBar;

package/dist/components/content/WorkspaceInspector.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { PanelRightClose, PanelRightOpen } from '@lucide/svelte';
+  import { Button } from '../ui/button/index.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    title: string;
+    description?: string;
+    open?: boolean;
+    ontoggle?: (open: boolean) => void;
+    children: Snippet;
+    footer?: Snippet;
+    openLabel?: string;
+    closeLabel?: string;
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    open = true,
+    ontoggle,
+    children,
+    footer,
+    openLabel = 'Open inspector',
+    closeLabel = 'Close inspector',
+    class: className = '',
+  }: Props = $props();
+
+  function toggle(): void {
+    ontoggle?.(!open);
+  }
+</script>
+
+<aside class={cn('overflow-hidden rounded-lg border border-border bg-card', className)} data-svadmin-workspace-inspector data-open={open}>
+  {#if open}
+    <header class="flex items-start justify-between gap-3 border-b border-border px-4 py-3">
+      <div class="min-w-0">
+        <h2 class="text-sm font-semibold text-foreground">{title}</h2>
+        {#if description}<p class="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>{/if}
+      </div>
+      <Button variant="ghost" size="icon-sm" aria-label={closeLabel} title={closeLabel} onclick={toggle}>
+        <PanelRightClose class="size-4" />
+      </Button>
+    </header>
+    <div class="max-h-[calc(100vh-15rem)] overflow-y-auto p-4">{@render children()}</div>
+    {#if footer}<footer class="border-t border-border p-3">{@render footer()}</footer>{/if}
+  {:else}
+    <div class="flex min-h-64 flex-col items-center gap-3 py-3">
+      <Button variant="ghost" size="icon-sm" aria-label={openLabel} title={openLabel} onclick={toggle}>
+        <PanelRightOpen class="size-4" />
+      </Button>
+      <span class="[writing-mode:vertical-rl] text-xs font-medium text-muted-foreground">{title}</span>
+    </div>
+  {/if}
+</aside>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    open?: boolean;
+    ontoggle?: (open: boolean) => void;
+    children: Snippet;
+    footer?: Snippet;
+    openLabel?: string;
+    closeLabel?: string;
+    class?: string;
+}
+declare const WorkspaceInspector: import("svelte").Component<Props, {}, "">;
+type WorkspaceInspector = ReturnType<typeof WorkspaceInspector>;
+export default WorkspaceInspector;

package/dist/components/content/WorkspaceLayout.svelte

@@ -7,6 +7,8 @@
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    secondaryCollapsed?: boolean;
+    secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
   }
@@ -16,12 +18,21 @@
     secondary,
     summary,
     secondaryWidth = '22rem',
+    secondaryCollapsed = false,
+    secondaryCollapsedWidth = '3rem',
     mobileOrder = 'primary-first',
     class: className = '',
   }: Props = $props();
+
+  const resolvedSecondaryWidth = $derived(secondaryCollapsed ? secondaryCollapsedWidth : secondaryWidth);
 </script>
 
-<div class={cn('flex flex-col gap-6', className)} data-svadmin-workspace-layout style:--workspace-secondary-width={secondaryWidth}>
+<div
+  class={cn('flex flex-col gap-6', className)}
+  data-svadmin-workspace-layout
+  data-secondary-collapsed={secondaryCollapsed}
+  style:--workspace-secondary-width={resolvedSecondaryWidth}
+>
   {#if summary}<div data-svadmin-workspace-summary>{@render summary()}</div>{/if}
   <div class={cn('grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]', mobileOrder === 'secondary-first' && 'grid-rows-[auto_auto]')}>
     {#if mobileOrder === 'secondary-first' && secondary}<aside class="order-1 min-w-0 xl:order-2">{@render secondary()}</aside>{/if}

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

@@ -4,6 +4,8 @@ interface Props {
     secondary?: Snippet;
     summary?: Snippet;
     secondaryWidth?: string;
+    secondaryCollapsed?: boolean;
+    secondaryCollapsedWidth?: string;
     mobileOrder?: 'primary-first' | 'secondary-first';
     class?: string;
 }

package/dist/components/content/WorkspaceSplitPane.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    primary: Snippet;
+    secondary: Snippet;
+    secondaryWidth?: string;
+    reverse?: boolean;
+    class?: string;
+  }
+
+  let {
+    primary,
+    secondary,
+    secondaryWidth = '42%',
+    reverse = false,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class={cn(
+    'grid min-w-0 overflow-hidden rounded-lg border border-border bg-card',
+    reverse ? 'lg:grid-cols-[var(--workspace-split-width)_minmax(0,1fr)]' : 'lg:grid-cols-[minmax(0,1fr)_var(--workspace-split-width)]',
+    className,
+  )}
+  style:--workspace-split-width={secondaryWidth}
+  data-svadmin-workspace-split-pane
+  data-reverse={reverse}
+>
+  <section class={cn('min-w-0 p-4', reverse && 'lg:order-2')} data-svadmin-split-primary>{@render primary()}</section>
+  <section class={cn('min-w-0 border-t border-border bg-muted/15 p-4 lg:border-l lg:border-t-0', reverse && 'lg:order-1 lg:border-l-0 lg:border-r')} data-svadmin-split-secondary>{@render secondary()}</section>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    primary: Snippet;
+    secondary: Snippet;
+    secondaryWidth?: string;
+    reverse?: boolean;
+    class?: string;
+}
+declare const WorkspaceSplitPane: import("svelte").Component<Props, {}, "">;
+type WorkspaceSplitPane = ReturnType<typeof WorkspaceSplitPane>;
+export default WorkspaceSplitPane;

package/dist/components/content/WorkspaceStageStepper.svelte

@@ -0,0 +1,83 @@
+<script module lang="ts">
+  export type WorkspaceStageStatus = 'complete' | 'current' | 'blocked' | 'pending';
+
+  export interface WorkspaceStage {
+    id: string;
+    label: string;
+    description?: string;
+    status: WorkspaceStageStatus;
+  }
+</script>
+
+<script lang="ts">
+  import { AlertTriangle, Check, Circle } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    stages: WorkspaceStage[];
+    activeId: string;
+    onselect?: (stage: WorkspaceStage) => void;
+    ariaLabel?: string;
+    statusLabels?: Partial<Record<WorkspaceStageStatus, string>>;
+    getStageAriaLabel?: (stage: WorkspaceStage) => string;
+    class?: string;
+  }
+
+  let {
+    stages,
+    activeId,
+    onselect,
+    ariaLabel = 'Workflow stages',
+    statusLabels = {},
+    getStageAriaLabel,
+    class: className = '',
+  }: Props = $props();
+
+  const markerClass: Record<WorkspaceStageStatus, string> = {
+    complete: 'border-success/30 bg-success/10 text-success',
+    current: 'border-primary bg-primary text-primary-foreground',
+    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>
+  <ol class="flex min-w-max items-start gap-0 px-0.5 py-1">
+    {#each stages as stage, index (stage.id)}
+      <li class="flex items-start">
+        <button
+          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={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])}>
+            {#if stage.status === 'complete'}
+              <Check class="size-3.5" />
+            {:else if stage.status === 'blocked'}
+              <AlertTriangle class="size-3.5" />
+            {:else}
+              <Circle class={cn('size-2.5', stage.status === 'current' && 'fill-current')} />
+            {/if}
+          </span>
+          <span class="min-w-0 pt-0.5">
+            <span class={cn('block text-xs font-medium', stage.id === activeId ? 'text-foreground' : 'text-muted-foreground')}>{stage.label}</span>
+            {#if stage.description}<span class="mt-0.5 block max-w-32 truncate text-[0.6875rem] text-muted-foreground">{stage.description}</span>{/if}
+          </span>
+        </button>
+        {#if index < stages.length - 1}
+          <span class={cn('mt-5 h-px w-4 bg-border sm:w-7', stage.status === 'complete' && 'bg-success/50')} aria-hidden="true"></span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

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

@@ -0,0 +1,19 @@
+export type WorkspaceStageStatus = 'complete' | 'current' | 'blocked' | 'pending';
+export interface WorkspaceStage {
+    id: string;
+    label: string;
+    description?: string;
+    status: WorkspaceStageStatus;
+}
+interface Props {
+    stages: WorkspaceStage[];
+    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, {}, "">;
+type WorkspaceStageStepper = ReturnType<typeof WorkspaceStageStepper>;
+export default WorkspaceStageStepper;

package/dist/components/content/index.d.ts

@@ -3,6 +3,10 @@ export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
 export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';

package/dist/components/content/index.js

@@ -3,6 +3,10 @@ export { default as ContentPageHeader } from './ContentPageHeader.svelte';
 export { default as SectionHeader } from './SectionHeader.svelte';
 export { default as PageToolbar } from './PageToolbar.svelte';
 export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './SettingsFieldRow.svelte';
 export { default as MetricBlock } from './MetricBlock.svelte';

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/index.d.ts

@@ -159,6 +159,11 @@ export { default as ContentPageHeader } from './components/content/ContentPageHe
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';
 export { default as WorkspaceLayout } from './components/content/WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './components/content/WorkspaceStageStepper.svelte';
+export type { WorkspaceStage, WorkspaceStageStatus } from './components/content/WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './components/content/WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './components/content/WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './components/content/WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './components/content/SettingsFieldRow.svelte';
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';

package/dist/index.js

@@ -174,6 +174,10 @@ export { default as ContentPageHeader } from './components/content/ContentPageHe
 export { default as SectionHeader } from './components/content/SectionHeader.svelte';
 export { default as PageToolbar } from './components/content/PageToolbar.svelte';
 export { default as WorkspaceLayout } from './components/content/WorkspaceLayout.svelte';
+export { default as WorkspaceStageStepper } from './components/content/WorkspaceStageStepper.svelte';
+export { default as WorkspaceActionBar } from './components/content/WorkspaceActionBar.svelte';
+export { default as WorkspaceInspector } from './components/content/WorkspaceInspector.svelte';
+export { default as WorkspaceSplitPane } from './components/content/WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
 export { default as SettingsFieldRow } from './components/content/SettingsFieldRow.svelte';
 export { default as MetricBlock } from './components/content/MetricBlock.svelte';

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.48.0",
+  "version": "0.49.1",
   "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.39.1",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",