@svadmin/ui 0.0.6 → 0.4.1

package/src/components/TooltipButton.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import * as Tooltip from './ui/tooltip/index.js';
+  import { Button } from './ui/button/index.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  interface Props {
+    tooltip: string;
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    tabindex?: number;
+    children: Snippet;
+  }
+
+  let {
+    tooltip,
+    variant = 'ghost',
+    size = 'icon',
+    side = 'top',
+    class: className = '',
+    onclick,
+    disabled = false,
+    type = 'button',
+    tabindex,
+    children,
+  }: Props = $props();
+</script>
+
+<Tooltip.Root>
+  <Tooltip.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        {variant}
+        {size}
+        {type}
+        class={className}
+        {onclick}
+        {disabled}
+        {tabindex}
+      >
+        {@render children()}
+      </Button>
+    {/snippet}
+  </Tooltip.Trigger>
+  <Tooltip.Content {side}>{tooltip}</Tooltip.Content>
+</Tooltip.Root>

package/src/components/UndoableNotification.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
   import { Button } from './ui/button/index.js';
+  import { Progress } from './ui/progress/index.js';
+  import { t } from '@svadmin/core/i18n';
+  import { slide } from 'svelte/transition';
   import { X, Undo2 } from 'lucide-svelte';
 
   let { message, duration = 5000, onUndo, onTimeout } = $props<{
@@ -12,121 +15,50 @@
   let remaining = $state(duration);
   let dismissed = $state(false);
 
-  const interval = setInterval(() => {
-    remaining -= 100;
-    if (remaining <= 0) {
-      clearInterval(interval);
-      if (!dismissed) {
-        dismissed = true;
-        onTimeout();
+  $effect(() => {
+    const interval = setInterval(() => {
+      remaining -= 100;
+      if (remaining <= 0) {
+        clearInterval(interval);
+        if (!dismissed) {
+          dismissed = true;
+          onTimeout();
+        }
       }
-    }
-  }, 100);
+    }, 100);
+    return () => clearInterval(interval);
+  });
 
   function handleUndo() {
-    clearInterval(interval);
     dismissed = true;
     onUndo();
   }
 
   function handleDismiss() {
-    clearInterval(interval);
     dismissed = true;
     onTimeout();
   }
 
-  const progress = $derived(remaining / duration * 100);
+  const progressValue = $derived(remaining / duration * 100);
 </script>
 
 {#if !dismissed}
-  <div class="undoable-notification">
-    <div class="undoable-content">
-      <p class="undoable-message">{message}</p>
-      <div class="undoable-actions">
-        <Button variant="ghost" size="sm" onclick={handleUndo} class="undoable-undo-btn">
+  <div
+    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] min-w-80 max-w-lg rounded-xl border bg-card shadow-2xl overflow-hidden"
+    transition:slide={{ duration: 250 }}
+  >
+    <div class="flex items-center justify-between px-4 py-3 gap-3">
+      <p class="text-sm text-foreground">{message}</p>
+      <div class="flex items-center gap-1 flex-shrink-0">
+        <Button variant="ghost" size="sm" onclick={handleUndo} class="font-semibold text-primary">
           <Undo2 class="h-3.5 w-3.5 mr-1" />
-          Undo
+          {t('common.undo')}
         </Button>
-        <button class="undoable-close" onclick={handleDismiss}>
+        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={handleDismiss}>
           <X class="h-3.5 w-3.5" />
-        </button>
+        </Button>
       </div>
     </div>
-    <div class="undoable-progress">
-      <div class="undoable-progress-bar" style="width: {progress}%"></div>
-    </div>
+    <Progress value={progressValue} class="h-1 rounded-none" />
   </div>
 {/if}
-
-<style>
-  .undoable-notification {
-    position: fixed;
-    bottom: 1.5rem;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 100;
-    min-width: 320px;
-    max-width: 480px;
-    background: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
-    border-radius: 0.75rem;
-    box-shadow: 0 8px 32px hsl(0 0% 0% / 0.15);
-    overflow: hidden;
-    animation: slideUp 0.3s ease;
-  }
-
-  .undoable-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.75rem 1rem;
-    gap: 0.75rem;
-  }
-
-  .undoable-message {
-    font-size: 0.875rem;
-    color: hsl(var(--foreground));
-    margin: 0;
-  }
-
-  .undoable-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-shrink: 0;
-  }
-
-  :global(.undoable-undo-btn) {
-    font-weight: 600;
-    color: hsl(var(--primary)) !important;
-  }
-
-  .undoable-close {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.25rem;
-    color: hsl(var(--muted-foreground));
-    border-radius: 0.25rem;
-  }
-  .undoable-close:hover {
-    color: hsl(var(--foreground));
-    background: hsl(var(--muted));
-  }
-
-  .undoable-progress {
-    height: 3px;
-    background: hsl(var(--muted));
-  }
-
-  .undoable-progress-bar {
-    height: 100%;
-    background: hsl(var(--primary));
-    transition: width 100ms linear;
-  }
-
-  @keyframes slideUp {
-    from { transform: translateX(-50%) translateY(100%); opacity: 0; }
-    to { transform: translateX(-50%) translateY(0); opacity: 1; }
-  }
-</style>

package/src/components/UpdatePasswordPage.svelte

@@ -3,9 +3,10 @@
   import { t } from '@svadmin/core/i18n';
   import { navigate } from '@svadmin/core/router';
   import { Button } from './ui/button/index.js';
-  import { Input } from './ui/input/index.js';
   import * as Card from './ui/card/index.js';
-  import { Lock, Eye, EyeOff, ShieldCheck } from 'lucide-svelte';
+  import * as Alert from './ui/alert/index.js';
+  import PasswordInput from './PasswordInput.svelte';
+  import { ShieldCheck, Loader2, AlertCircle } from 'lucide-svelte';
 
   let { title = 'Admin' } = $props<{
     title?: string;
@@ -15,7 +16,6 @@
 
   let password = $state('');
   let confirmPassword = $state('');
-  let showPassword = $state(false);
   let error = $state('');
 
   async function handleSubmit(e: SubmitEvent) {
@@ -32,79 +32,51 @@
   }
 </script>
 
-<div class="auth-page">
-  <div class="auth-container">
-    <Card.Card class="auth-card">
-      <Card.CardHeader class="auth-header">
-        <div class="auth-icon">
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/[0.08] via-background to-primary/[0.04] p-4">
+  <div class="w-full max-w-[420px]">
+    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--primary)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+      <Card.CardHeader class="text-center pb-2">
+        <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mx-auto mb-3">
           <ShieldCheck class="h-6 w-6" />
         </div>
         <Card.CardTitle class="text-2xl font-bold">{t('auth.resetPassword')}</Card.CardTitle>
-        <p class="text-sm text-muted-foreground">Enter your new password below.</p>
+        <p class="text-sm text-muted-foreground">{t('auth.resetPasswordDescription')}</p>
       </Card.CardHeader>
       <Card.CardContent>
         <form onsubmit={handleSubmit} class="space-y-4">
           {#if error}
-            <div class="error-alert">
-              <p>{error}</p>
-            </div>
+            <Alert.Root variant="destructive">
+              <AlertCircle class="h-4 w-4" />
+              <Alert.Description>{error}</Alert.Description>
+            </Alert.Root>
           {/if}
 
-          <div class="space-y-2">
-            <label for="new-password" class="text-sm font-medium text-foreground">{t('auth.password')}</label>
-            <div class="input-with-icon">
-              <Lock class="input-icon h-4 w-4" />
-              <Input
-                id="new-password"
-                type={showPassword ? 'text' : 'password'}
-                placeholder="••••••••"
-                bind:value={password}
-                class="pl-9 pr-9"
-                autocomplete="new-password"
-              />
-              <button
-                type="button"
-                class="password-toggle"
-                onclick={() => showPassword = !showPassword}
-                tabindex={-1}
-              >
-                {#if showPassword}
-                  <EyeOff class="h-4 w-4" />
-                {:else}
-                  <Eye class="h-4 w-4" />
-                {/if}
-              </button>
-            </div>
-          </div>
-
-          <div class="space-y-2">
-            <label for="confirm-password" class="text-sm font-medium text-foreground">{t('auth.confirmPassword')}</label>
-            <div class="input-with-icon">
-              <Lock class="input-icon h-4 w-4" />
-              <Input
-                id="confirm-password"
-                type={showPassword ? 'text' : 'password'}
-                placeholder="••••••••"
-                bind:value={confirmPassword}
-                class="pl-9"
-                autocomplete="new-password"
-              />
-            </div>
-          </div>
+          <PasswordInput
+            id="new-password"
+            label={t('auth.password')}
+            bind:value={password}
+            autocomplete="new-password"
+            showStrength
+          />
+
+          <PasswordInput
+            id="confirm-password"
+            label={t('auth.confirmPassword')}
+            bind:value={confirmPassword}
+            autocomplete="new-password"
+          />
 
           <Button type="submit" class="w-full" disabled={updatePw.isLoading}>
             {#if updatePw.isLoading}
-              <span class="loading-spinner"></span>
+              <Loader2 class="h-4 w-4 animate-spin mr-2" />
             {/if}
             {t('auth.resetPassword')}
           </Button>
 
-          <div class="auth-link">
-            <button
-              type="button"
-              class="text-sm text-primary hover:underline font-medium"
-              onclick={() => navigate('/login')}
-            >{t('auth.backToLogin')}</button>
+          <div class="flex items-center justify-center mt-2">
+            <Button variant="link" class="text-sm h-auto p-0 font-medium" onclick={() => navigate('/login')}>
+              {t('auth.backToLogin')}
+            </Button>
           </div>
         </form>
       </Card.CardContent>
@@ -115,103 +87,3 @@
     </p>
   </div>
 </div>
-
-<style>
-  .auth-page {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(135deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--background)) 50%, hsl(var(--primary) / 0.04) 100%);
-    padding: 1rem;
-  }
-
-  .auth-container {
-    width: 100%;
-    max-width: 420px;
-  }
-
-  :global(.auth-card) {
-    backdrop-filter: blur(20px);
-    border: 1px solid hsl(var(--border) / 0.5);
-    box-shadow: 0 8px 32px hsl(var(--primary) / 0.08), 0 2px 8px hsl(0 0% 0% / 0.06);
-  }
-
-  :global(.auth-header) {
-    text-align: center;
-    padding-bottom: 0.5rem;
-  }
-
-  .auth-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 12px;
-    background: hsl(var(--primary) / 0.1);
-    color: hsl(var(--primary));
-    margin: 0 auto 0.75rem;
-  }
-
-  .input-with-icon {
-    position: relative;
-  }
-
-  :global(.input-icon) {
-    position: absolute;
-    left: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: hsl(var(--muted-foreground));
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  .password-toggle {
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: hsl(var(--muted-foreground));
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 2px;
-    z-index: 1;
-  }
-  .password-toggle:hover {
-    color: hsl(var(--foreground));
-  }
-
-  .error-alert {
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    background: hsl(var(--destructive) / 0.1);
-    border: 1px solid hsl(var(--destructive) / 0.3);
-    color: hsl(var(--destructive));
-    font-size: 0.875rem;
-  }
-
-  .loading-spinner {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border: 2px solid transparent;
-    border-top-color: currentColor;
-    border-radius: 50%;
-    animation: spin 0.6s linear infinite;
-    margin-right: 0.5rem;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .auth-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 0.5rem;
-  }
-</style>

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,13 +9,19 @@
     class?: string;
   }>();
 
-  const queryClient = useQueryClient();
+  const invalidate = useInvalidate();
   let spinning = $state(false);
+  let spinTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    return () => { if (spinTimer) clearTimeout(spinTimer); };
+  });
 
   function refresh() {
     spinning = true;
-    queryClient.invalidateQueries({ queryKey: [resource] });
-    setTimeout(() => { spinning = false; }, 600);
+    invalidate({ resource, invalidates: ['list', 'many'] });
+    if (spinTimer) clearTimeout(spinTimer);
+    spinTimer = setTimeout(() => { spinning = false; }, 600);
   }
 </script>
 
@@ -26,5 +32,5 @@
   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/fieldComponentMap.ts

@@ -0,0 +1,79 @@
+// Shared field type → display component mapping
+// Used by both ShowPage and FieldRenderer to avoid duplicate if/else chains.
+// Components are lazily resolved by field type at runtime.
+
+import type { Component } from 'svelte';
+
+export interface FieldComponentMap {
+  [fieldType: string]: Component<Record<string, unknown>>;
+}
+
+// Default display component map (read-only field display)
+// Dynamically imports components only when first used
+const displayCache = new Map<string, Component<Record<string, unknown>>>();
+
+// Pre-import all field display components (tree-shaken by bundler)
+import BooleanField from './fields/BooleanField.svelte';
+import ImageField from './fields/ImageField.svelte';
+import TagField from './fields/TagField.svelte';
+import DateField from './fields/DateField.svelte';
+import EmailField from './fields/EmailField.svelte';
+import UrlField from './fields/UrlField.svelte';
+import SelectField from './fields/SelectField.svelte';
+import MultiSelectField from './fields/MultiSelectField.svelte';
+import RelationField from './fields/RelationField.svelte';
+import JsonField from './fields/JsonField.svelte';
+import RichTextField from './fields/RichTextField.svelte';
+import NumberField from './fields/NumberField.svelte';
+import FileField from './fields/FileField.svelte';
+
+/**
+ * Built-in display components for show/detail pages.
+ * Keys match FieldDefinition.type values.
+ */
+export const builtinDisplayComponents: FieldComponentMap = {
+  boolean: BooleanField,
+  image: ImageField,
+  images: ImageField,
+  tags: TagField,
+  date: DateField,
+  email: EmailField,
+  url: UrlField,
+  select: SelectField,
+  multiselect: MultiSelectField,
+  relation: RelationField,
+  json: JsonField,
+  richtext: RichTextField,
+  textarea: RichTextField,
+  number: NumberField,
+  file: FileField,
+};
+
+// ─── Custom component registry ─────────────────────────────────
+// Users can register custom field display components at runtime
+
+const customDisplayComponents = new Map<string, Component<Record<string, unknown>>>();
+
+/**
+ * Register a custom field display component for a given field type.
+ * The component will be used by ShowPage and any other display contexts.
+ */
+export function registerDisplayComponent(fieldType: string, component: Component<Record<string, unknown>>): void {
+  customDisplayComponents.set(fieldType, component);
+}
+
+/**
+ * Get the display component for a field type.
+ * Custom components take precedence over built-in ones.
+ * Returns undefined if no component is registered for the type.
+ */
+export function getDisplayComponent(fieldType: string): Component<Record<string, unknown>> | undefined {
+  return customDisplayComponents.get(fieldType) ?? builtinDisplayComponents[fieldType];
+}
+
+/**
+ * Check if a field type has a display component (custom or built-in).
+ */
+export function hasDisplayComponent(fieldType: string): boolean {
+  return customDisplayComponents.has(fieldType) || fieldType in builtinDisplayComponents;
+}

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>
+{#if value}
+  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400">
+    {trueIcon}
+  </span>
+{:else}
+  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-red-50 text-red-600 dark:bg-red-500/20 dark:text-red-400">
+    {falseIcon}
+  </span>
+{/if}