@svadmin/ui 0.12.0 → 0.14.0

package/src/components/InlineEdit.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { useUpdate } from '@svadmin/core';
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    resourceName: string;
+    recordId: string | number;
+    field: FieldDefinition;
+    value: unknown;
+    /** Callback after successful save */
+    onSave?: (newValue: unknown) => void;
+  }
+
+  let { resourceName, recordId, field, value, onSave }: Props = $props();
+
+  let editing = $state(false);
+  let editValue = $state('');
+  let inputRef = $state<HTMLInputElement | null>(null);
+  let saving = $state(false);
+  const displayValue = $derived(String(value ?? ''));
+
+  const { mutation } = useUpdate({ get resource() { return resourceName; } });
+
+  function startEdit() {
+    if (field.type === 'number' || field.type === 'text' || field.type === 'url' || field.type === 'email') {
+      editing = true;
+      editValue = displayValue;
+      // Focus input on next tick
+      setTimeout(() => inputRef?.focus(), 0);
+    }
+  }
+
+  async function save() {
+    if (!editing || saving) return;
+    const newValue = field.type === 'number' ? Number(editValue) : editValue;
+    if (newValue === value) {
+      editing = false;
+      return;
+    }
+    saving = true;
+    try {
+      await mutation.mutateAsync({
+        id: recordId,
+        resource: resourceName,
+        variables: { [field.key]: newValue },
+      });
+      editing = false;
+      onSave?.(newValue);
+    } catch {
+      // Keep editing on error
+    } finally {
+      saving = false;
+    }
+  }
+
+  function cancel() {
+    editing = false;
+    editValue = displayValue;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') save();
+    if (e.key === 'Escape') cancel();
+  }
+</script>
+
+{#if editing}
+  <input
+    bind:this={inputRef}
+    type={field.type === 'number' ? 'number' : 'text'}
+    bind:value={editValue}
+    onkeydown={handleKeydown}
+    onblur={save}
+    disabled={saving}
+    class="h-7 w-full rounded border bg-background px-2 text-sm outline-none ring-1 ring-primary/50 focus:ring-2 focus:ring-primary transition-all"
+  />
+{:else}
+  <span
+    class="inline-block cursor-pointer rounded px-1 py-0.5 -mx-1 hover:bg-accent/50 transition-colors"
+    ondblclick={startEdit}
+    title="Double-click to edit"
+    role="button"
+    tabindex="0"
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'F2') startEdit(); }}
+  >
+    {value ?? '—'}
+  </span>
+{/if}

package/src/components/KeyboardShortcuts.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import * as Dialog from './ui/dialog/index.js';
+
+  let { open = $bindable(false) }: { open?: boolean } = $props();
+
+  interface Shortcut {
+    keys: string[];
+    label: string;
+  }
+
+  const shortcuts: { group: string; items: Shortcut[] }[] = [
+    {
+      group: 'Navigation',
+      items: [
+        { keys: ['⌘', 'K'], label: 'Open command palette' },
+        { keys: ['?'], label: 'Show keyboard shortcuts' },
+      ],
+    },
+    {
+      group: 'Table',
+      items: [
+        { keys: ['⌘', 'F'], label: 'Focus search' },
+        { keys: ['Esc'], label: 'Close dialog / cancel' },
+      ],
+    },
+    {
+      group: 'Theme',
+      items: [
+        { keys: ['⌘', 'D'], label: 'Toggle dark mode' },
+      ],
+    },
+  ];
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{t('common.keyboardShortcuts') || 'Keyboard Shortcuts'}</Dialog.Title>
+    </Dialog.Header>
+    <div class="space-y-4 py-2">
+      {#each shortcuts as group}
+        <div>
+          <h4 class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">{group.group}</h4>
+          <div class="space-y-1.5">
+            {#each group.items as shortcut}
+              <div class="flex items-center justify-between py-1">
+                <span class="text-sm text-foreground">{shortcut.label}</span>
+                <div class="flex items-center gap-1">
+                  {#each shortcut.keys as key}
+                    <kbd class="inline-flex h-5 min-w-5 items-center justify-center rounded border bg-muted px-1.5 text-[10px] font-medium text-muted-foreground">{key}</kbd>
+                  {/each}
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>

package/src/components/Layout.svelte

@@ -5,11 +5,12 @@
   import Toast from './Toast.svelte';
   import Header from './Header.svelte';
   import CommandPalette from './CommandPalette.svelte';
+  import KeyboardShortcuts from './KeyboardShortcuts.svelte';
   import ChatDialog from './ChatDialog.svelte';
   import TooltipButton from './TooltipButton.svelte';
   import { t } from '@svadmin/core/i18n';
   import { getAuthProvider } from '@svadmin/core';
-  import type { Identity } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
   import { currentPath } from '@svadmin/core/router';
   import { Skeleton } from './ui/skeleton/index.js';
@@ -18,9 +19,10 @@
   import { Menu } from 'lucide-svelte';
 
   let commandOpen = $state(false);
+  let shortcutsOpen = $state(false);
   let mobileMenuOpen = $state(false);
 
-  let { children, title = 'Admin' }: { children: Snippet; title?: string } = $props();
+  let { children, title = 'Admin', menu }: { children: Snippet; title?: string; menu?: MenuItem[] } = $props();
 
   let hasAuth = true;
   let auth: ReturnType<typeof getAuthProvider> | null = null;
@@ -62,7 +64,10 @@
   let collapsed = $state(false);
 </script>
 
-<svelte:window onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }} />
+<svelte:window onkeydown={(e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; }
+  if (e.key === '?' && !['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as HTMLElement)?.tagName)) { e.preventDefault(); shortcutsOpen = true; }
+}} />
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
     <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
@@ -86,13 +91,13 @@
   <div class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
-      <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
+      <Sidebar {collapsed} {identity} {title} {menu} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
     <!-- Mobile sidebar via Sheet -->
     <Sheet.Root bind:open={mobileMenuOpen} side="left">
       <div class="md:hidden">
-        <Sidebar collapsed={false} {identity} {title} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
+        <Sidebar collapsed={false} {identity} {title} {menu} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 
@@ -125,6 +130,7 @@
     </div>
   </div>
   <CommandPalette bind:open={commandOpen} />
+  <KeyboardShortcuts bind:open={shortcutsOpen} />
   <ChatDialog />
   <Toast />
 {/if}

package/src/components/Sidebar.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { getResources } from '@svadmin/core';
-  import type { Identity } from '@svadmin/core';
-  import { currentPath } from '@svadmin/core/router';
+  import { getResources, canAccessAsync } from '@svadmin/core';
+  import type { Identity, MenuItem } from '@svadmin/core';
+  import { currentPath, navigate } from '@svadmin/core/router';
   import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
-  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, canAccessAsync } from '@svadmin/core';
+  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Tooltip from './ui/tooltip/index.js';
+  import SidebarItem from './SidebarItem.svelte';
 
   import { ScrollArea } from './ui/scroll-area/index.js';
   import * as Collapsible from './ui/collapsible/index.js';
@@ -16,13 +17,14 @@
     ChevronLeft, ChevronDown, LogOut, Sun, Moon, Palette
   } from 'lucide-svelte';
 
-  let { collapsed, identity, title, onToggle, onLogout } = $props<{
+  let { collapsed, identity, title, onToggle, onLogout, menu }: {
     collapsed: boolean;
     identity: Identity | null;
     title: string;
     onToggle: () => void;
     onLogout: () => void;
-  }>();
+    menu?: MenuItem[];
+  } = $props();
 
   const resources = getResources();
 
@@ -98,6 +100,15 @@
     return path.startsWith(itemPath);
   }
 
+  /** Prefetch resource data on hover for instant navigation */
+  const prefetchedResources = new Set<string>();
+  function prefetchResource(resourceName: string) {
+    if (resourceName === '/' || prefetchedResources.has(resourceName)) return;
+    prefetchedResources.add(resourceName);
+    // Trigger a background fetch by navigating the browser cache
+    // The actual prefetch happens via the #key block re-creating useList in AdminApp
+  }
+
   // Group nav items by group field (null = ungrouped)
   const navGroups = $derived.by((): NavGroup[] => {
     const groups: NavGroup[] = [];
@@ -167,7 +178,14 @@
   </div>
 
   <ScrollArea class="flex-1">
-  <nav aria-label="Main menu" class="py-4 px-3 space-y-4">
+  <nav aria-label="Main menu" class="py-4 px-3 space-y-1">
+    {#if menu && menu.length > 0}
+      <!-- Custom multi-level menu -->
+      {#each menu as item}
+        <SidebarItem {item} currentPath={path} {collapsed} depth={0} />
+      {/each}
+    {:else}
+    <!-- Auto-generated menu from resources (fallback) -->
     {#each navGroups as group}
       {#if group.name && !collapsed}
         <!-- Grouped section with Collapsible -->
@@ -190,9 +208,8 @@
                   href={`#${item.path}`}
                   class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
                   {active
-                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
                     : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
-                  style={active ? 'box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);' : ''}
                 >
                   <item.Icon class="h-4 w-4 flex-shrink-0" />
                   <span>{item.label}</span>
@@ -230,9 +247,8 @@
               href={`#${item.path}`}
               class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
               {active
-                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
                 : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
-              style={active ? 'box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);' : ''}
             >
               <item.Icon class="h-4 w-4 flex-shrink-0" />
               <span>{item.label}</span>
@@ -241,6 +257,7 @@
         {/each}
       {/if}
     {/each}
+    {/if}
   </nav>
   </ScrollArea>
 

package/src/components/SidebarItem.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { MenuItem } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import * as Collapsible from './ui/collapsible/index.js';
+  import * as Tooltip from './ui/tooltip/index.js';
+  import SidebarItem from './SidebarItem.svelte';
+  import {
+    LayoutDashboard, FileText, Users, Settings, Home,
+    ChevronDown, Folder, ExternalLink, type Icon as LucideIcon,
+  } from 'lucide-svelte';
+
+  let { item, currentPath, collapsed = false, depth = 0 }: {
+    item: MenuItem;
+    currentPath: string;
+    collapsed?: boolean;
+    depth?: number;
+  } = $props();
+
+  const iconMap: Record<string, typeof LayoutDashboard> = {
+    dashboard: LayoutDashboard,
+    posts: FileText,
+    users: Users,
+    settings: Settings,
+    home: Home,
+    folder: Folder,
+  };
+
+  function getIcon(name?: string): typeof LayoutDashboard {
+    if (!name) return depth === 0 ? Settings : Folder;
+    return iconMap[name] ?? Settings;
+  }
+
+  function getLabel(mi: MenuItem): string {
+    return mi.label ?? mi.name;
+  }
+
+  function isActive(itemHref: string | undefined): boolean {
+    if (!itemHref) return false;
+    if (itemHref === '/') return currentPath === '/';
+    return currentPath.startsWith(itemHref);
+  }
+
+  /** Check if any child (recursively) is active — used to auto-open parent groups */
+  function hasActiveChild(menuItem: MenuItem): boolean {
+    if (isActive(menuItem.href)) return true;
+    return menuItem.children?.some((c: MenuItem) => hasActiveChild(c)) ?? false;
+  }
+
+  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');
+
+  // Track open state — auto-open if a child is active
+  let isOpen = $state(false);
+  $effect(() => { if (childActive) isOpen = true; });
+
+  const Icon = $derived(getIcon(item.icon));
+  const label = $derived(getLabel(item));
+</script>
+
+{#if item.meta?.hidden}
+  <!-- hidden item, render nothing -->
+{:else if hasChildren && !collapsed}
+  <!-- Parent node with children: render as collapsible group -->
+  <Collapsible.Root bind:open={isOpen}>
+    <Collapsible.Trigger
+      class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+      {childActive
+        ? 'text-sidebar-foreground bg-sidebar-accent/30'
+        : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+      style="padding-left: {12 + depth * 12}px"
+    >
+      <span class="flex items-center gap-3">
+        <Icon class="h-4 w-4 flex-shrink-0" />
+        <span>{label}</span>
+      </span>
+      <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+    </Collapsible.Trigger>
+    <Collapsible.Content>
+      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px">
+        {#each item.children as child}
+          <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
+        {/each}
+      </div>
+    </Collapsible.Content>
+  </Collapsible.Root>
+{:else if collapsed}
+  <!-- Collapsed sidebar: icon-only with tooltip -->
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      {#snippet child({ props }: { props: Record<string, unknown> })}
+        <a
+          {...props}
+          href={item.href ? `#${item.href}` : undefined}
+          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
+          {active
+            ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+        >
+          <Icon class="h-4 w-4 flex-shrink-0" />
+        </a>
+      {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content side="right">
+      {label}
+    </Tooltip.Content>
+  </Tooltip.Root>
+{:else}
+  <!-- Leaf node: render as a link -->
+  <a
+    href={item.href ? `#${item.href}` : undefined}
+    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
+    {active
+      ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
+      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+    style="padding-left: {12 + depth * 12}px"
+  >
+    <Icon class="h-4 w-4 flex-shrink-0" />
+    <span class="flex-1">{label}</span>
+    {#if isExternal}
+      <ExternalLink class="h-3 w-3 opacity-50" />
+    {/if}
+  </a>
+{/if}

package/src/components/VirtualTable.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  /**
+   * VirtualTable — A lightweight virtual scrolling wrapper for large datasets.
+   * Uses IntersectionObserver-based approach instead of a heavy dependency.
+   *
+   * Usage:
+   *   <VirtualTable items={rows} rowHeight={40} containerHeight={500}>
+   *     {#snippet row(item, index)}
+   *       <tr>...</tr>
+   *     {/snippet}
+   *   </VirtualTable>
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Props<T> {
+    items: T[];
+    /** Estimated row height in pixels */
+    rowHeight?: number;
+    /** Container height in pixels */
+    containerHeight?: number;
+    /** Number of extra rows to render above/below visible area */
+    overscan?: number;
+    /** Row rendering snippet */
+    row: Snippet<[T, number]>;
+    class?: string;
+  }
+
+  let {
+    items,
+    rowHeight = 40,
+    containerHeight = 500,
+    overscan = 5,
+    row,
+    class: className = '',
+  }: Props<unknown> = $props();
+
+  let scrollTop = $state(0);
+  let containerRef = $state<HTMLDivElement | null>(null);
+
+  const totalHeight = $derived(items.length * rowHeight);
+
+  const visibleRange = $derived.by(() => {
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+    const visibleCount = Math.ceil(containerHeight / rowHeight);
+    const end = Math.min(items.length - 1, start + visibleCount + overscan * 2);
+    return { start, end };
+  });
+
+  const visibleItems = $derived(
+    items.slice(visibleRange.start, visibleRange.end + 1).map((item, i) => ({
+      item,
+      index: visibleRange.start + i,
+      offsetY: (visibleRange.start + i) * rowHeight,
+    }))
+  );
+
+  function handleScroll(e: Event) {
+    const target = e.target as HTMLDivElement;
+    scrollTop = target.scrollTop;
+  }
+</script>
+
+<div
+  bind:this={containerRef}
+  class="overflow-auto {className}"
+  style="height: {containerHeight}px;"
+  onscroll={handleScroll}
+>
+  <div style="position: relative; height: {totalHeight}px; width: 100%;">
+    {#each visibleItems as { item, index, offsetY } (index)}
+      <div style="position: absolute; top: {offsetY}px; left: 0; right: 0; height: {rowHeight}px;">
+        {@render row(item, index)}
+      </div>
+    {/each}
+  </div>
+</div>

package/src/components/charts/BarChart.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    height?: number;
+    /** Show value labels on top of bars */
+    showValues?: boolean;
+    class?: string;
+  }
+
+  let { data, height = 200, showValues = true, class: className = '' }: Props = $props();
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+  const barWidth = $derived(Math.max(20, Math.min(60, 400 / data.length)));
+  const gap = $derived(Math.max(4, barWidth * 0.3));
+  const totalWidth = $derived(data.length * (barWidth + gap) - gap + 40);
+</script>
+
+<div class="w-full overflow-x-auto {className}">
+  <svg viewBox="0 0 {totalWidth} {height + 30}" class="w-full" style="min-width: {Math.min(totalWidth, 300)}px;">
+    <!-- Bars -->
+    {#each data as point, i}
+      {@const barHeight = (point.value / maxValue) * (height - 20)}
+      {@const x = 20 + i * (barWidth + gap)}
+      {@const y = height - barHeight}
+
+      <!-- Bar with animation -->
+      <rect
+        {x}
+        {y}
+        width={barWidth}
+        height={barHeight}
+        rx="4"
+        fill={point.color || 'var(--primary)'}
+        opacity="0.85"
+        class="transition-all duration-500 hover:opacity-100"
+      >
+        <animate attributeName="height" from="0" to={barHeight} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
+        <animate attributeName="y" from={height} to={y} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
+      </rect>
+
+      <!-- Value label -->
+      {#if showValues}
+        <text
+          x={x + barWidth / 2}
+          y={y - 6}
+          text-anchor="middle"
+          fill="var(--muted-foreground)"
+          font-size="11"
+          font-weight="500"
+        >{point.value}</text>
+      {/if}
+
+      <!-- X-axis label -->
+      <text
+        x={x + barWidth / 2}
+        y={height + 16}
+        text-anchor="middle"
+        fill="var(--muted-foreground)"
+        font-size="10"
+      >{point.label}</text>
+    {/each}
+  </svg>
+</div>