@svadmin/ui 0.0.6 → 0.3.0

package/src/components/Header.svelte

@@ -1,66 +1,35 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { Identity } from '@svadmin/core';
-  import { toggleTheme, getResolvedTheme } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { Button } from './ui/button/index.js';
-  import { Sun, Moon, Bell, Search } from 'lucide-svelte';
-
-  interface Props {
-    identity?: Identity | null;
-    title?: string;
-    showSearch?: boolean;
-    actions?: Snippet;
-    class?: string;
-  }
+  import { Moon, Sun } from 'lucide-svelte';
+  import { Button } from './ui/button';
+  import { getTheme, toggleTheme } from '@svadmin/core';
 
   let {
-    identity,
-    title = '',
-    showSearch = false,
-    actions,
-    class: className = '',
-  }: Props = $props();
+    showThemeToggle = true,
+    children,
+  } = $props<{
+    showThemeToggle?: boolean;
+    children?: import('svelte').Snippet;
+  }>();
 </script>
 
-<header class="sticky top-0 z-20 flex h-14 items-center gap-4 border-b border-border bg-background/95 px-6 backdrop-blur supports-[backdrop-filter]:bg-background/60 {className}">
-  {#if title}
-    <h2 class="text-lg font-semibold text-foreground">{title}</h2>
-  {/if}
-
-  <div class="flex-1"></div>
-
-  {#if showSearch}
-    <div class="relative hidden md:block">
-      <Search class="absolute left-2.5 top-2 h-4 w-4 text-muted-foreground" />
-      <input
-        type="search"
-        placeholder={t('common.search')}
-        class="h-8 w-64 rounded-lg border border-input bg-background pl-8 pr-3 text-sm outline-none focus:border-ring focus:ring-1 focus:ring-ring"
-      />
-    </div>
-  {/if}
-
-  {#if actions}
-    {@render actions()}
-  {/if}
-
-  <!-- Theme toggle -->
-  <Button variant="ghost" size="icon-sm" onclick={toggleTheme} title={t('common.toggleTheme')}>
-    {#if getResolvedTheme() === 'dark'}
-      <Sun class="h-4 w-4" />
-    {:else}
-      <Moon class="h-4 w-4" />
+<header class="sticky top-0 z-30 flex h-16 w-full shrink-0 items-center justify-between border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:px-6">
+  <div class="flex items-center gap-4">
+    <!-- Mobile sidebar toggle can go here -->
+  </div>
+  <div class="ml-auto flex items-center gap-4">
+    {#if children}
+      {@render children()}
     {/if}
-  </Button>
-
-  <!-- User info -->
-  {#if identity}
-    <div class="flex items-center gap-2">
-      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
-        {identity.name?.charAt(0).toUpperCase() ?? 'U'}
-      </div>
-      <span class="hidden text-sm font-medium text-foreground md:inline">{identity.name}</span>
-    </div>
-  {/if}
+    
+    {#if showThemeToggle}
+      <Button variant="ghost" size="icon" onclick={() => toggleTheme()} class="rounded-full">
+        {#if getTheme() === 'dark'}
+          <Moon class="h-5 w-5 transition-all" />
+        {:else}
+          <Sun class="h-5 w-5 transition-all" />
+        {/if}
+        <span class="sr-only">Toggle theme</span>
+      </Button>
+    {/if}
+  </div>
 </header>

package/src/components/ListPage.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { getResource } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
+  import PageHeader from './PageHeader.svelte';
+  import AutoTable from './AutoTable.svelte';
+  import { Button } from './ui/button/index.js';
+  import { Plus } from 'lucide-svelte';
+
+  interface Props {
+    resourceName: string;
+    title?: string;
+    canCreate?: boolean;
+    headerActions?: Snippet;
+    class?: string;
+  }
+
+  let {
+    resourceName,
+    title,
+    canCreate,
+    headerActions,
+    class: className = '',
+  }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const pageTitle = title ?? resource.label;
+  const showCreate = canCreate ?? resource.canCreate !== false;
+</script>
+
+<div class="space-y-6 {className}">
+  <PageHeader title={pageTitle}>
+    {#snippet actions()}
+      {#if showCreate}
+        <Button onclick={() => navigate(`/${resourceName}/create`)}>
+          <Plus class="h-4 w-4" data-icon="inline-start" /> {t('common.create')}
+        </Button>
+      {/if}
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
+    {/snippet}
+  </PageHeader>
+
+  <AutoTable {resourceName} />
+</div>

package/src/components/LiveIndicator.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { Wifi, WifiOff, Loader2 } from 'lucide-svelte';
+
+  let {
+    status = 'disconnected',
+    resource = '',
+    lastEvent = null,
+    showDetails = false,
+  } = $props<{
+    status: 'connecting' | 'connected' | 'disconnected';
+    resource?: string;
+    lastEvent?: { type: string; timestamp?: number } | null;
+    showDetails?: boolean;
+  }>();
+
+  const statusConfigs = {
+    connected: { color: 'var(--live-connected, #22c55e)', label: 'Live', icon: Wifi },
+    connecting: { color: 'var(--live-connecting, #f59e0b)', label: 'Connecting...', icon: Loader2 as typeof Wifi },
+    disconnected: { color: 'var(--live-disconnected, #ef4444)', label: 'Offline', icon: WifiOff },
+  } as const;
+  type StatusKey = 'connected' | 'connecting' | 'disconnected';
+  const statusConfig = $derived(statusConfigs[status as StatusKey]);
+
+  const timeSinceEvent = $derived(
+    lastEvent?.timestamp
+      ? Math.floor((Date.now() - lastEvent.timestamp) / 1000)
+      : null
+  );
+</script>
+
+<div class="live-indicator" title={statusConfig.label}>
+  <span class="live-dot" style="--dot-color: {statusConfig.color}">
+    {#if status === 'connected'}
+      <span class="live-pulse"></span>
+    {/if}
+  </span>
+  <span class="live-label" style="color: {statusConfig.color}">
+    {statusConfig.label}
+  </span>
+
+  {#if showDetails && resource}
+    <span class="live-resource">{resource}</span>
+  {/if}
+
+  {#if showDetails && lastEvent}
+    <span class="live-event">
+      {lastEvent.type}
+      {#if timeSinceEvent !== null && timeSinceEvent < 60}
+        <span class="live-time">{timeSinceEvent}s ago</span>
+      {/if}
+    </span>
+  {/if}
+</div>
+
+<style>
+  .live-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    background: hsl(var(--muted) / 0.3);
+    user-select: none;
+  }
+
+  .live-dot {
+    position: relative;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--dot-color);
+    flex-shrink: 0;
+  }
+
+  .live-pulse {
+    position: absolute;
+    inset: -3px;
+    border-radius: 50%;
+    background: var(--dot-color);
+    opacity: 0.4;
+    animation: live-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes live-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.4; }
+    50% { transform: scale(1.8); opacity: 0; }
+  }
+
+  .live-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .live-resource {
+    font-size: 0.625rem;
+    color: hsl(var(--muted-foreground));
+    font-family: monospace;
+  }
+
+  .live-event {
+    font-size: 0.625rem;
+    color: hsl(var(--muted-foreground));
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .live-time {
+    opacity: 0.6;
+  }
+</style>

package/src/components/NavigateToResource.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { useMenu } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  
+  const { menuItems } = useMenu();
+
+  $effect(() => {
+    // Automatically navigate to the first defined resource
+    if (menuItems.length > 0) {
+      navigate(menuItems[0].route);
+    }
+  });
+</script>
+
+<div class="flex h-screen w-screen items-center justify-center p-4 text-muted-foreground">
+  <div class="text-center">
+    <div class="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary border-r-transparent"></div>
+    <p>Navigating to default resource...</p>
+  </div>
+</div>

package/src/components/PageSkeleton.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { Skeleton } from './ui/skeleton';
+
+  let {
+    type = 'list',
+    rows = 5,
+  } = $props<{
+    type?: 'list' | 'show' | 'form';
+    rows?: number;
+  }>();
+</script>
+
+<div class="w-full space-y-6">
+  <!-- Header Skeleton -->
+  <div class="flex items-center justify-between">
+    <div class="space-y-2">
+      <Skeleton class="h-8 w-[200px]" />
+      <Skeleton class="h-4 w-[300px]" />
+    </div>
+    {#if type === 'list'}
+      <Skeleton class="h-10 w-[120px]" />
+    {/if}
+  </div>
+
+  <div class="rounded-md border p-4 space-y-4">
+    {#if type === 'list'}
+      <!-- Table Header -->
+      <div class="flex gap-4 border-b pb-4">
+        {#each Array(4) as _}
+          <Skeleton class="h-6 flex-1" />
+        {/each}
+      </div>
+      <!-- Table Rows -->
+      <div class="space-y-4">
+        {#each Array(rows) as _}
+          <div class="flex gap-4">
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+          </div>
+        {/each}
+      </div>
+    {:else if type === 'show'}
+      <!-- Key-Value pairs -->
+      <div class="space-y-6">
+        {#each Array(rows) as _}
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[100px]" />
+            <Skeleton class="h-6 w-[250px]" />
+          </div>
+        {/each}
+      </div>
+    {:else if type === 'form'}
+      <!-- Form Inputs -->
+      <div class="space-y-6">
+        {#each Array(rows) as _}
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[100px]" />
+            <Skeleton class="h-10 w-full max-w-md" />
+          </div>
+        {/each}
+        <div class="pt-4 flex gap-2">
+          <Skeleton class="h-10 w-[100px]" />
+          <Skeleton class="h-10 w-[100px]" />
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>

package/src/components/ShowPage.svelte

@@ -43,15 +43,15 @@
     {/if}
   </div>
 
-  {#if query.isLoading}
+  {#if query.query.isLoading}
     <div class="flex h-64 items-center justify-center">
       <Loader2 class="h-6 w-6 animate-spin text-primary" />
     </div>
-  {:else if query.data}
+  {:else if query.query.data?.data}
     <Card.Root>
       <Card.Content class="divide-y divide-border p-0">
         {#each showFields as field}
-          {@const value = (query.data as Record<string, unknown>)[field.key]}
+          {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
           <div class="flex px-6 py-4">
             <div class="w-1/3 text-sm font-medium text-muted-foreground">{field.label}</div>
             <div class="w-2/3 text-sm text-foreground">

package/src/components/Sidebar.svelte

@@ -3,7 +3,7 @@
   import type { Identity } 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 } from '@svadmin/core';
+  import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, canAccessAsync } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import * as Tooltip from './ui/tooltip/index.js';
   import { Separator } from './ui/separator/index.js';
@@ -36,15 +36,34 @@
     Icon: typeof LayoutDashboard;
   }
 
-  // Use $derived so navItems rebuild when locale changes
-  const navItems: NavItem[] = $derived([
-    { path: '/', label: t('common.home'), Icon: LayoutDashboard },
-    ...resources.map(r => ({
-      path: `/${r.name}`,
-      label: r.label,
-      Icon: iconMap[r.name] ?? Settings,
-    })),
-  ]);
+  // Use effect to build nav items, taking access control into account
+  let navItems = $state<NavItem[]>([]);
+
+  $effect(() => {
+    // Re-run when locale or resources change
+    const localeVal = getLocale();
+    
+    Promise.all(resources.map(async (r) => {
+      try {
+        const { can } = await canAccessAsync(r.name, 'list');
+        return { r, can };
+      } catch {
+        return { r, can: false };
+      }
+    })).then(results => {
+      const items: NavItem[] = [{ path: '/', label: t('common.home'), Icon: LayoutDashboard }];
+      for (const { r, can } of results) {
+        if (can) {
+          items.push({
+            path: `/${r.name}`,
+            label: r.label,
+            Icon: iconMap[r.name] ?? Settings,
+          });
+        }
+      }
+      navItems = items;
+    });
+  });
 
   /** Toggle between available locales */
   function toggleLocale() {

package/src/components/ThemedTitle.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getAdminOptions } from '@svadmin/core';
+
+  let {
+    collapsed = false,
+    icon,
+    text,
+    wrapperStyles = '',
+  } = $props<{
+    collapsed?: boolean;
+    icon?: string;
+    text?: string;
+    wrapperStyles?: string;
+  }>();
+
+  const adminOptions = getAdminOptions();
+  const titleText = $derived(text ?? adminOptions.title?.text ?? 'Admin');
+  const titleIcon = $derived(icon ?? adminOptions.title?.icon);
+</script>
+
+<div class="flex items-center gap-2 {wrapperStyles}">
+  {#if titleIcon}
+    <img src={titleIcon} alt="" class="h-6 w-6 shrink-0" />
+  {:else}
+    <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground text-sm font-bold">
+      {titleText.charAt(0).toUpperCase()}
+    </div>
+  {/if}
+  {#if !collapsed}
+    <span class="text-lg font-semibold text-foreground truncate">{titleText}</span>
+  {/if}
+</div>

package/src/components/Toast.svelte

@@ -2,6 +2,7 @@
   import { getToasts, removeToast } from '@svadmin/core/toast';
   import { Button } from './ui/button/index.js';
   import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-svelte';
+  import UndoableNotification from './UndoableNotification.svelte';
 
   const iconMap = {
     success: CheckCircle,
@@ -22,17 +23,26 @@
 {#if toasts.length > 0}
   <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
     {#each toasts as t (t.id)}
-      {@const Icon = iconMap[t.type]}
-      <div
-        class="flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg animate-slide-in {colorMap[t.type]}"
-        role="alert"
-      >
-        <Icon class="h-5 w-5 flex-shrink-0 mt-0.5" />
-        <p class="flex-1 text-sm font-medium">{t.message}</p>
-        <Button variant="ghost" size="icon-xs" onclick={() => removeToast(t.id)} class="flex-shrink-0 -mr-2 -mt-1">
-          <X class="h-4 w-4" />
-        </Button>
-      </div>
+      {#if t.type === 'undoable'}
+        <UndoableNotification
+          message={t.message}
+          duration={t.duration}
+          onUndo={() => { t.onUndo?.(); removeToast(t.id); }}
+          onTimeout={() => { t.onTimeout?.(); removeToast(t.id); }}
+        />
+      {:else}
+        {@const Icon = iconMap[t.type]}
+        <div
+          class="flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg animate-slide-in {colorMap[t.type]}"
+          role="alert"
+        >
+          <Icon class="h-5 w-5 flex-shrink-0 mt-0.5" />
+          <p class="flex-1 text-sm font-medium">{t.message}</p>
+          <Button variant="ghost" size="icon-xs" onclick={() => removeToast(t.id)} class="flex-shrink-0 -mr-2 -mt-1">
+            <X class="h-4 w-4" />
+          </Button>
+        </div>
+      {/if}
     {/each}
   </div>
 {/if}

package/src/components/buttons/CloneButton.svelte

@@ -12,7 +12,7 @@
   }>();
 
   const nav = useNavigation();
-  const can = accessControl?.enabled ? useCan({ resource, action: 'create' }) : null;
+  const can = accessControl?.enabled ? useCan(resource, 'create') : null;
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 

package/src/components/buttons/CreateButton.svelte

@@ -11,7 +11,7 @@
   }>();
 
   const nav = useNavigation();
-  const can = accessControl?.enabled ? useCan({ resource, action: 'create' }) : null;
+  const can = accessControl?.enabled ? useCan(resource, 'create') : null;
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 

package/src/components/buttons/DeleteButton.svelte

@@ -16,8 +16,8 @@
     class?: string;
   }>();
 
-  const deleteMut = useDelete(resource, { mutationMode: undoable ? 'undoable' : 'pessimistic' });
-  const can = accessControl?.enabled ? useCan({ resource, action: 'delete' }) : null;
+  const deleteMut = useDelete({ resource, mutationMode: undoable ? 'undoable' : 'pessimistic' });
+  const can = accessControl?.enabled ? useCan(resource, 'delete') : null;
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
   let confirming = $state(false);
 
@@ -27,8 +27,7 @@
       return;
     }
     confirming = false;
-    // @ts-expect-error $ rune prefix
-    await $deleteMut.mutateAsync(recordItemId);
+    await deleteMut.mutation.mutateAsync({ id: recordItemId, resource });
     onSuccess?.();
   }
 

package/src/components/buttons/EditButton.svelte

@@ -12,7 +12,7 @@
   }>();
 
   const nav = useNavigation();
-  const can = accessControl?.enabled ? useCan({ resource, action: 'edit' }) : null;
+  const can = accessControl?.enabled ? useCan(resource, 'edit') : null;
   const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
 </script>
 

package/src/components/buttons/ImportButton.svelte

@@ -1,26 +1,48 @@
 <script lang="ts">
-  import { useImport, t } from '@svadmin/core';
+  import { useImport, t, type UseImportOptions } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Upload } from 'lucide-svelte';
 
-  let { resource, hideText = false, onComplete, class: className = '' } = $props<{
+  let { resource, hideText = false, onFinish, class: className = '' } = $props<{
     resource: string;
     hideText?: boolean;
-    onComplete?: (result: { success: number; failed: number }) => void;
+    onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
     class?: string;
   }>();
 
-  const { triggerImport, isLoading } = useImport({
-    resource,
-    onComplete: (result) => onComplete?.(result),
+  let fileInput: HTMLInputElement | undefined = $state();
+
+  const importHook = useImport({
+    get resource() { return resource; },
+    onFinish: (result) => onFinish?.(result),
   });
+
+  function triggerImport() {
+    fileInput?.click();
+  }
+
+  function handleFileChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) {
+      importHook.handleChange({ file });
+      input.value = ''; // reset for re-import
+    }
+  }
 </script>
 
+<input
+  bind:this={fileInput}
+  type="file"
+  accept=".csv"
+  style="display:none"
+  onchange={handleFileChange}
+/>
 <Button
   variant="outline"
   size={hideText ? 'icon' : 'sm'}
   class={className}
-  disabled={isLoading}
+  disabled={importHook.isLoading}
   onclick={triggerImport}
 >
   <Upload class="h-4 w-4" />

package/src/components/buttons/RefreshButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useQueryClient } from '@tanstack/svelte-query';
+  import { useInvalidate, t } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { RefreshCw } from 'lucide-svelte';
 
@@ -9,12 +9,12 @@
     class?: string;
   }>();
 
-  const queryClient = useQueryClient();
+  const invalidate = useInvalidate();
   let spinning = $state(false);
 
   function refresh() {
     spinning = true;
-    queryClient.invalidateQueries({ queryKey: [resource] });
+    invalidate({ resource, invalidates: ['list', 'many'] });
     setTimeout(() => { spinning = false; }, 600);
   }
 </script>
@@ -26,5 +26,6 @@
   onclick={refresh}
 >
   <RefreshCw class="h-4 w-4 {spinning ? 'animate-spin' : ''}" />
-  {#if !hideText}<span class="ml-1">Refresh</span>{/if}
+  {#if !hideText}<span class="ml-1">{t('common.retry')}</span>{/if}
 </Button>
+

package/src/components/fields/BooleanField.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  interface Props { value: boolean | null | undefined; trueIcon?: string; falseIcon?: string }
+  let { value, trueIcon = '✓', falseIcon = '✗' }: Props = $props();
+</script>
+<span class="field-boolean" class:is-true={!!value} class:is-false={!value}>
+  {value ? trueIcon : falseIcon}
+</span>
+
+<style>
+  .field-boolean { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; }
+  .is-true { background: var(--color-success-bg, #dcfce7); color: var(--color-success, #16a34a); }
+  .is-false { background: var(--color-error-bg, #fef2f2); color: var(--color-error, #dc2626); }
+</style>

package/src/components/fields/DateField.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  interface Props { value: string | number | Date | null | undefined; locale?: string; options?: Intl.DateTimeFormatOptions }
+  let { value, locale = 'en-US', options = { dateStyle: 'medium' } }: Props = $props();
+  const formatted = $derived(value != null ? new Intl.DateTimeFormat(locale, options).format(new Date(value as string | number | Date)) : '—');
+</script>
+<span class="field-date">{formatted}</span>