@svadmin/ui 0.3.0 → 0.5.0

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

@@ -11,11 +11,17 @@
 
   const invalidate = useInvalidate();
   let spinning = $state(false);
+  let spinTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    return () => { if (spinTimer) clearTimeout(spinTimer); };
+  });
 
   function refresh() {
     spinning = true;
     invalidate({ resource, invalidates: ['list', 'many'] });
-    setTimeout(() => { spinning = false; }, 600);
+    if (spinTimer) clearTimeout(spinTimer);
+    spinTimer = setTimeout(() => { spinning = false; }, 600);
   }
 </script>
 
@@ -28,4 +34,3 @@
   <RefreshCw class="h-4 w-4 {spinning ? 'animate-spin' : ''}" />
   {#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

@@ -2,12 +2,12 @@
   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>
+{#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}

package/src/components/fields/EmailField.svelte

@@ -3,13 +3,7 @@
   let { value }: Props = $props();
 </script>
 {#if value}
-  <a href="mailto:{value}" class="field-email">{value}</a>
+  <a href="mailto:{value}" class="text-primary hover:underline no-underline">{value}</a>
 {:else}
-  <span class="field-email field-empty">—</span>
+  <span class="text-muted-foreground">—</span>
 {/if}
-
-<style>
-  .field-email { color: var(--color-primary, #3b82f6); text-decoration: none; }
-  .field-email:hover { text-decoration: underline; }
-  .field-empty { color: var(--color-text-muted, #9ca3af); }
-</style>

package/src/components/fields/FileField.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
+  import { Download } from 'lucide-svelte';
   interface Props { value: string | null | undefined; title?: string }
   let { value, title }: Props = $props();
   const fileName = $derived(value ? value.split('/').pop() ?? value : null);
 </script>
 {#if value}
-  <a href={value} download class="field-file" title={title ?? fileName ?? ''}>
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+  <a href={value} download class="text-primary hover:underline no-underline inline-flex items-center gap-1" title={title ?? fileName ?? ''}>
+    <Download class="h-3.5 w-3.5 opacity-60" />
     {fileName}
   </a>
 {:else}
-  <span class="field-file field-empty">—</span>
+  <span class="text-muted-foreground">—</span>
 {/if}
-
-<style>
-  .field-file { color: var(--color-primary, #3b82f6); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
-  .field-file:hover { text-decoration: underline; }
-  .field-empty { color: var(--color-text-muted, #9ca3af); }
-</style>

package/src/components/fields/ImageField.svelte

@@ -3,12 +3,7 @@
   let { value, alt = '', width = 80, height = 80 }: Props = $props();
 </script>
 {#if value}
-  <img src={value} {alt} {width} {height} class="field-image" />
+  <img src={value} {alt} {width} {height} class="rounded-lg object-cover border border-border" />
 {:else}
-  <span class="field-image field-empty">—</span>
+  <span class="inline-flex items-center justify-center w-20 h-20 bg-muted rounded-lg text-muted-foreground">—</span>
 {/if}
-
-<style>
-  .field-image { border-radius: 8px; object-fit: cover; border: 1px solid var(--color-border, #e5e7eb); }
-  .field-empty { color: var(--color-text-muted, #9ca3af); display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--color-surface, #f3f4f6); border-radius: 8px; }
-</style>

package/src/components/fields/JsonField.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Copy, Check, ChevronDown, ChevronRight } from 'lucide-svelte';
+
+  let { value } = $props<{
+    value: unknown;
+  }>();
+
+  let expanded = $state(false);
+  let copied = $state(false);
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    return () => { if (copyTimer) clearTimeout(copyTimer); };
+  });
+
+  const formatted = $derived(
+    value != null ? JSON.stringify(value, null, 2) : '—'
+  );
+
+  const preview = $derived(
+    value != null ? JSON.stringify(value).slice(0, 80) + (JSON.stringify(value).length > 80 ? '...' : '') : '—'
+  );
+
+  function copyJson() {
+    navigator.clipboard.writeText(formatted);
+    copied = true;
+    if (copyTimer) clearTimeout(copyTimer);
+    copyTimer = setTimeout(() => { copied = false; }, 2000);
+  }
+</script>
+
+{#if value == null}
+  <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="space-y-1">
+    <div class="flex items-center gap-2">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground h-auto py-0.5 px-1"
+        onclick={() => { expanded = !expanded; }}
+      >
+        {#if expanded}
+          <ChevronDown class="h-3 w-3" />
+        {:else}
+          <ChevronRight class="h-3 w-3" />
+        {/if}
+        {expanded ? t('common.collapse') : t('common.expand')}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground h-auto py-0.5 px-1"
+        onclick={copyJson}
+        aria-label={t('common.copy')}
+      >
+        {#if copied}
+          <Check class="h-3 w-3 text-emerald-500" />
+        {:else}
+          <Copy class="h-3 w-3" />
+        {/if}
+      </Button>
+    </div>
+    {#if expanded}
+      <pre class="rounded-lg bg-muted p-3 text-xs overflow-auto max-h-64 font-mono">{formatted}</pre>
+    {:else}
+      <code class="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">{preview}</code>
+    {/if}
+  </div>
+{/if}

package/src/components/fields/MarkdownField.svelte

@@ -3,17 +3,7 @@
   let { value }: Props = $props();
 </script>
 {#if value}
-  <div class="field-markdown">{@html value}</div>
+  <div class="prose prose-sm dark:prose-invert max-w-none leading-relaxed [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_a]:text-primary">{@html value}</div>
 {:else}
-  <span class="field-empty">—</span>
+  <span class="text-muted-foreground">—</span>
 {/if}
-
-<style>
-  .field-markdown { line-height: 1.6; }
-  .field-markdown :global(h1), .field-markdown :global(h2), .field-markdown :global(h3) { margin-top: 0.5em; margin-bottom: 0.25em; }
-  .field-markdown :global(p) { margin: 0.5em 0; }
-  .field-markdown :global(code) { background: var(--color-surface, #f3f4f6); padding: 2px 6px; border-radius: 4px; font-size: 0.875em; }
-  .field-markdown :global(pre) { background: var(--color-surface, #f3f4f6); padding: 12px; border-radius: 8px; overflow-x: auto; }
-  .field-markdown :global(a) { color: var(--color-primary, #3b82f6); }
-  .field-empty { color: var(--color-text-muted, #9ca3af); }
-</style>