@svadmin/ui 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/app.css

@@ -99,22 +99,25 @@
     --sidebar-ring: oklch(0.55 0.18 264);
   }
 
-  /* Elygate-style shadows — subtle depth without heaviness */
+  /* Stripe-inspired Soft Shadows — premium, multi-layered depth */
   [data-slot="button"],
   [data-slot="input"],
   [data-slot="select-trigger"],
   [data-slot="select"],
   [data-slot="textarea"] {
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    /* Subtle interaction shadow */
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
   }
   
   [data-slot="card"] {
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
+    /* Classic Stripe soft shadow: faint ambient + directional drop */
+    box-shadow: 0 2px 8px -2px rgb(0 0 0 / 0.05), 0 4px 16px -4px rgb(0 0 0 / 0.02);
   }
 
   [data-slot="dialog-content"],
   [data-slot="sheet-content"] {
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    /* Deep floating layer for modals */
+    box-shadow: 0 10px 30px -5px rgb(0 0 0 / 0.08), 0 20px 40px -10px rgb(0 0 0 / 0.04);
   }
 }
 
@@ -124,6 +127,33 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Premium Typography Refinements */
+h1, h2, h3 {
+  letter-spacing: -0.025em;
+  font-weight: 600;
+}
+h4, h5, h6 {
+  letter-spacing: -0.01em;
+}
+
+/* Micro-interactions: Linear/Apple ecosystem click scales */
+[data-slot="button"],
+button {
+  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, box-shadow 0.15s ease;
+}
+[data-slot="button"]:active:not(:disabled),
+button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+/* Subtle glowing focus ring for inputs */
+[data-slot="input"]:focus-visible,
+[data-slot="textarea"]:focus-visible,
+[data-slot="select-trigger"]:focus-visible {
+  box-shadow: 0 0 0 1px var(--color-background), 0 0 0 3px color-mix(in oklch, var(--color-primary) 30%, transparent) !important;
+  border-color: var(--color-primary);
+}
+
 /* Scrollbar styling */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
@@ -132,6 +162,216 @@ body {
 .dark ::-webkit-scrollbar-thumb { background: oklch(0.35 0 0); }
 .dark ::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0 0); }
 
+/* ① Card Hover Elevation Lift — Stripe-style float on hover */
+[data-slot="card"] {
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+[data-slot="card"]:hover {
+  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 8px 24px -6px rgb(0 0 0 / 0.04);
+  transform: translateY(-1px);
+}
+
+/* ② Table Row Hover — primary color tint instead of plain gray */
+[data-slot="table-row"]:hover {
+  background-color: color-mix(in oklch, var(--primary) 4%, var(--background)) !important;
+}
+[data-slot="table-row"] {
+  transition: background-color 0.15s ease;
+}
+
+/* ③ Sidebar Active Indicator — Linear-style left accent bar */
+.sidebar-nav-active {
+  position: relative;
+}
+.sidebar-nav-active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 60%;
+  border-radius: 0 3px 3px 0;
+  background: var(--primary);
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+/* ④ Skeleton Shimmer — metallic light sweep instead of static pulse */
+@keyframes svadmin-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+[data-slot="skeleton"] {
+  animation: svadmin-shimmer 1.5s ease-in-out infinite !important;
+  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklch, var(--muted) 60%, white) 50%, var(--muted) 75%) !important;
+  background-size: 200% 100% !important;
+}
+.dark [data-slot="skeleton"] {
+  background: linear-gradient(90deg, var(--muted) 25%, color-mix(in oklch, var(--muted) 60%, var(--foreground)) 50%, var(--muted) 75%) !important;
+}
+
+/* ⑤ Route Page Transition — fade + subtle slide-up */
+@keyframes svadmin-page-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.svadmin-page-enter {
+  animation: svadmin-page-enter 0.25s ease-out;
+}
+
+/* ⑥ Toast slide-in refinement (svelte-sonner) — tighter timing */
+[data-sonner-toaster] [data-sonner-toast] {
+  transition-duration: 200ms !important;
+  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+/* ⑦ Gradient Top Border on Cards — Vercel dashboard style */
+[data-slot="card"]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--primary) 20%, transparent), transparent);
+  border-radius: inherit;
+  pointer-events: none;
+}
+[data-slot="card"] {
+  position: relative;
+  overflow: hidden;
+}
+
+/* ⑧ Dark Mode Primary Glow — Linear-style neon accents */
+.dark [data-slot="button"][data-variant="default"],
+.dark [data-slot="badge"][data-variant="default"] {
+  box-shadow: 0 0 12px -3px color-mix(in oklch, var(--primary) 40%, transparent);
+}
+
+/* ⑨ Form Validation Shake Animation */
+@keyframes svadmin-shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(5px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(2px); }
+}
+.svadmin-shake {
+  animation: svadmin-shake 0.4s ease-out;
+}
+
+/* ⑩ Table Row Staggered Entrance */
+@keyframes svadmin-row-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+[data-slot="table-body"] [data-slot="table-row"] {
+  animation: svadmin-row-enter 0.3s ease-out both;
+}
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(1) { animation-delay: 0s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(2) { animation-delay: 0.03s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(3) { animation-delay: 0.06s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(4) { animation-delay: 0.09s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(5) { animation-delay: 0.12s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(6) { animation-delay: 0.15s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(7) { animation-delay: 0.18s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(8) { animation-delay: 0.21s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(9) { animation-delay: 0.24s; }
+[data-slot="table-body"] [data-slot="table-row"]:nth-child(10) { animation-delay: 0.27s; }
+
+/* ⑪ Accessibility: Respect reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ⑫ Optimistic Delete — row fade-out visual feedback */
+@keyframes svadmin-row-delete {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(20px);
+    height: 0;
+    padding: 0;
+    margin: 0;
+  }
+}
+.svadmin-deleting {
+  animation: svadmin-row-delete 0.3s ease-out forwards;
+  pointer-events: none;
+}
+
+/* ⑬ Popover & Dropdown — frosted glass backdrop + spring entrance */
+[data-slot="popover-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="context-menu-content"] {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+/* ⑭ Tooltip spring entrance */
+[data-slot="tooltip-content"] {
+  animation: svadmin-tooltip-enter 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@keyframes svadmin-tooltip-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ⑮ Smooth scrolling for content areas */
+main {
+  scroll-behavior: smooth;
+}
+
+/* ⑯ RTL (Right-to-Left) Language Support */
+[dir="rtl"] {
+  direction: rtl;
+}
+[dir="rtl"] aside {
+  left: auto;
+  right: 0;
+}
+[dir="rtl"] .sidebar-nav-active::before {
+  left: auto;
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+/* Mirror sidebar margins for RTL */
+[dir="rtl"] .md\:ml-64 {
+  margin-left: 0;
+  margin-right: 16rem;
+}
+[dir="rtl"] .md\:ml-16 {
+  margin-left: 0;
+  margin-right: 4rem;
+}
+
 /* Tailwind CSS v4 — Map design tokens to utility classes */
 @theme {
   --color-background: var(--background);

package/src/components/AdminApp.svelte

@@ -144,6 +144,8 @@
     <ConfigErrorScreen title="{title} — {t('common.configRequired')}" />
   {:else if isAuthenticated || !authProvider}
     <Layout {title}>
+      {#key route + (params.resource ?? '') + (params.id ?? '')}
+      <div class="svadmin-page-enter">
       {#if route === '/'}
         {#if dashboard}
           {@render dashboard()}
@@ -170,6 +172,8 @@
           <ShowPage resourceName={params.resource} id={params.id} />
         {/key}
       {/if}
+      </div>
+      {/key}
     </Layout>
   {:else}
     <div class="flex h-screen items-center justify-center">

package/src/components/AnimatedCounter.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+
+  interface Props {
+    /** The target number to animate to */
+    value: number | string;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** CSS class for the container */
+    class?: string;
+  }
+
+  let { value, duration = 600, class: className = '' }: Props = $props();
+
+  let displayValue = $state('0');
+  let prevTarget = 0;
+
+  $effect(() => {
+    const target = typeof value === 'number' ? value : parseInt(value, 10);
+    if (isNaN(target)) {
+      displayValue = String(value);
+      return;
+    }
+
+    const start = untrack(() => prevTarget);
+    prevTarget = target;
+    const startTime = performance.now();
+
+    function tick() {
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      // Ease-out cubic
+      const eased = 1 - Math.pow(1 - progress, 3);
+      const current = Math.round(start + (target - start) * eased);
+      displayValue = current.toLocaleString();
+
+      if (progress < 1) {
+        requestAnimationFrame(tick);
+      }
+    }
+
+    requestAnimationFrame(tick);
+  });
+</script>
+
+<span class={className}>{displayValue}</span>

package/src/components/AutoTable.svelte

@@ -35,6 +35,7 @@
   } from 'lucide-svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
   import TooltipButton from './TooltipButton.svelte';
+  import InlineEdit from './InlineEdit.svelte';
   import type { Snippet } from 'svelte';
 
   // ─── Props with Snippet composability ─────────────────────────
@@ -144,6 +145,15 @@
     sorters.map(s => ({ id: s.field, desc: s.order === 'desc' }))
   ));
   let columnVisibility = $state<VisibilityState>((() => {
+    // Try to restore from localStorage first
+    const storageKey = `svadmin-columns-${resourceName}`;
+    if (typeof localStorage !== 'undefined') {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored) return JSON.parse(stored);
+      } catch { /* ignore */ }
+    }
+    // Fall back to resource field definitions
     const vis: VisibilityState = {};
     for (const f of resource.fields) {
       if (f.showInList === false) vis[f.key] = false;
@@ -152,6 +162,17 @@
   })());
   let rowSelection = $state<RowSelectionState>({});
   let expanded = $state.raw<ExpandedState>({});
+  let columnOrder = $state<string[]>([]);
+
+  // Persist column visibility to localStorage
+  $effect(() => {
+    const storageKey = `svadmin-columns-${resourceName}`;
+    if (typeof localStorage !== 'undefined') {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(columnVisibility));
+      } catch { /* ignore quota errors */ }
+    }
+  });
 
   // Sync TanStack sorting → server sorters
   $effect(() => {
@@ -216,6 +237,7 @@
       get columnVisibility() { return columnVisibility; },
       get rowSelection() { return rowSelection; },
       get expanded() { return expanded; },
+      get columnOrder() { return columnOrder; },
     },
     onSortingChange: (updater) => {
       sorting = typeof updater === 'function' ? updater(sorting) : updater;
@@ -229,6 +251,9 @@
     onExpandedChange: (updater) => {
       expanded = typeof updater === 'function' ? updater(expanded) : updater;
     },
+    onColumnOrderChange: (updater) => {
+      columnOrder = typeof updater === 'function' ? updater(columnOrder) : updater;
+    },
     get enableRowSelection() { return selectable && canDelete; },
     get enableExpanding() { return !!expandedRowRender; },
   });
@@ -414,7 +439,7 @@
   {/if}
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-lg bg-card shadow-sm overflow-hidden">
+  <div class="rounded-lg bg-card shadow-sm overflow-hidden" role="region" aria-label="{resource.label} {t('common.list')}">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">
@@ -441,9 +466,16 @@
         <Table.Root>
           <Table.Header>
             {#each tbl.getHeaderGroups() as headerGroup}
-              <Table.Row class="bg-muted/50 hover:bg-muted/50">
-                {#each headerGroup.headers as header}
+              <DraggableHeader
+                columns={headerGroup.headers.map(h => ({ id: h.column.id, header: h }))}
+                resourceName={resourceName}
+                onReorder={(newOrder) => { columnOrder = newOrder.map(c => c.id); }}
+              >
+                {#snippet header(col, index, dragProps)}
+                  {@const header = col.header as typeof headerGroup.headers[0]}
                   <Table.Head
+                    {...dragProps}
+                    class={cn("bg-muted/50 hover:bg-muted/50", dragProps.class)}
                     style={header.getSize() !== 150 ? `width:${header.getSize()}px` : undefined}
                   >
                     {#if header.id === '_select'}
@@ -474,8 +506,8 @@
                       {visibleFields.find(f => f.key === header.id)?.label ?? header.id}
                     {/if}
                   </Table.Head>
-                {/each}
-              </Table.Row>
+                {/snippet}
+              </DraggableHeader>
             {/each}
           </Table.Header>
           <Table.Body>
@@ -535,6 +567,14 @@
                             {:else if field?.type === 'select' && field.options}
                               {@const opt = field.options.find(o => o.value === cell.getValue())}
                               <Badge variant="outline">{opt?.label ?? cell.getValue() ?? '—'}</Badge>
+                            {:else if canEdit && field && ['text', 'number', 'email', 'url'].includes(field.type)}
+                              <InlineEdit
+                                {resourceName}
+                                recordId={id}
+                                {field}
+                                value={cell.getValue()}
+                                onSave={() => listResult.query.refetch()}
+                              />
                             {:else}
                               {cell.getValue() ?? '—'}
                             {/if}
@@ -573,11 +613,23 @@
               {/if}
             {:else}
               <Table.Row>
-                <Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground">
+                <Table.Cell colspan={columns.length} class="h-48 text-center">
                   {#if emptyState}
                     {@render emptyState()}
                   {:else}
-                    {t('common.noData')}
+                    <div class="flex flex-col items-center justify-center py-8">
+                      <svg class="h-16 w-16 text-muted-foreground/30 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                      </svg>
+                      <p class="text-sm font-medium text-muted-foreground mb-1">{t('common.noData')}</p>
+                      <p class="text-xs text-muted-foreground/60 mb-4">{t('common.noDataHint') || 'Get started by creating your first record.'}</p>
+                      {#if canCreate}
+                        <Button variant="outline" size="sm" class="gap-2" onclick={() => navigate(`/${resourceName}/create`)}>
+                          <Plus class="h-3.5 w-3.5" />
+                          {t('common.create')}
+                        </Button>
+                      {/if}
+                    </div>
                   {/if}
                 </Table.Cell>
               </Table.Row>

package/src/components/Breadcrumbs.svelte

@@ -39,16 +39,18 @@
 {#if crumbs.length > 1}
   <Breadcrumb.Root class="mb-4">
     <Breadcrumb.List>
-      {#each crumbs as crumb, i}
+      {#each crumbs as crumb, i (crumb.href)}
         {#if i > 0}
           <Breadcrumb.Separator />
         {/if}
         <Breadcrumb.Item>
+          <span class="inline-flex svadmin-page-enter" style="animation-duration: 0.2s;">
           {#if i === crumbs.length - 1}
             <Breadcrumb.Page>{crumb.label}</Breadcrumb.Page>
           {:else}
             <Breadcrumb.Link href={crumb.href}>{crumb.label}</Breadcrumb.Link>
           {/if}
+          </span>
         </Breadcrumb.Item>
       {/each}
     </Breadcrumb.List>

package/src/components/DraggableHeader.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  /**
+   * DraggableHeader — Wraps table header cells with HTML5 Drag and Drop
+   * to enable column reorder. Persists order to localStorage.
+   *
+   * Usage:
+   *   <DraggableHeader columns={columns} resourceName="posts" onReorder={handleReorder}>
+   *     {#snippet header(column, index)}
+   *       <th>...</th>
+   *     {/snippet}
+   *   </DraggableHeader>
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Column {
+    id: string;
+    [key: string]: unknown;
+  }
+
+  interface Props {
+    columns: Column[];
+    resourceName: string;
+    onReorder: (newOrder: Column[]) => void;
+    header: Snippet<[Column, number, Record<string, any>]>;
+  }
+
+  let { columns, resourceName, onReorder, header }: Props = $props();
+
+  let dragIndex = $state<number | null>(null);
+  let dropIndex = $state<number | null>(null);
+
+  // Restore saved order from localStorage
+  $effect(() => {
+    const storageKey = `svadmin-colorder-${resourceName}`;
+    if (typeof localStorage === 'undefined') return;
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const savedOrder: string[] = JSON.parse(saved);
+        const reordered = savedOrder
+          .map(id => columns.find(c => c.id === id))
+          .filter((c): c is Column => c !== undefined);
+        // Add any new columns not in saved order
+        const remaining = columns.filter(c => !savedOrder.includes(c.id));
+        if (reordered.length > 0) {
+          onReorder([...reordered, ...remaining]);
+        }
+      }
+    } catch { /* ignore */ }
+  });
+
+  function handleDragStart(e: DragEvent, index: number) {
+    dragIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', String(index));
+    }
+  }
+
+  function handleDragOver(e: DragEvent, index: number) {
+    e.preventDefault();
+    dropIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move';
+    }
+  }
+
+  function handleDrop(e: DragEvent, index: number) {
+    e.preventDefault();
+    if (dragIndex === null || dragIndex === index) {
+      dragIndex = null;
+      dropIndex = null;
+      return;
+    }
+
+    const newColumns = [...columns];
+    const [moved] = newColumns.splice(dragIndex, 1);
+    newColumns.splice(index, 0, moved);
+
+    // Persist to localStorage
+    const storageKey = `svadmin-colorder-${resourceName}`;
+    if (typeof localStorage !== 'undefined') {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(newColumns.map(c => c.id)));
+      } catch { /* ignore */ }
+    }
+
+    onReorder(newColumns);
+    dragIndex = null;
+    dropIndex = null;
+  }
+
+  function handleDragEnd() {
+    dragIndex = null;
+    dropIndex = null;
+  }
+</script>
+
+<tr class="hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors bg-muted/50">
+  {#each columns as column, index}
+    {@render header(column, index, {
+      draggable: true,
+      ondragstart: (e: DragEvent) => handleDragStart(e, index),
+      ondragover: (e: DragEvent) => handleDragOver(e, index),
+      ondrop: (e: DragEvent) => handleDrop(e, index),
+      ondragend: handleDragEnd,
+      'data-dragging': dragIndex === index,
+      'data-drop-target': dropIndex === index && dropIndex !== dragIndex,
+      class: `cursor-grab active:cursor-grabbing select-none transition-opacity ${dragIndex === index ? 'opacity-50' : ''} ${dropIndex === index && dropIndex !== dragIndex ? 'border-l-2 border-primary' : ''}`
+    })}
+  {/each}
+</tr>