@svadmin/ui 0.3.0 → 0.5.0

package/src/components/FieldRenderer.svelte

@@ -1,154 +1,319 @@
+<script lang="ts" module>
+  export type { FieldDefinition } from '@svadmin/core';
+</script>
+
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
+  import { Input } from './ui/input/index.js';
+  import { Textarea } from './ui/textarea/index.js';
+  import { Switch } from './ui/switch/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Label } from './ui/label/index.js';
+  import { Select } from './ui/select/index.js';
+  import { Checkbox } from './ui/checkbox/index.js';
+  import { Button } from './ui/button/index.js';
+  import ComboboxField from './ComboboxField.svelte';
+  import { Plus, X } from 'lucide-svelte';
+  import type { Snippet } from 'svelte';
 
-  let { field, value, onchange } = $props<{
+  let { field, value, onchange, children } = $props<{
     field: FieldDefinition;
     value: unknown;
     onchange: (val: unknown) => void;
+    /** Optional custom renderer snippet */
+    children?: Snippet;
   }>();
 
-  function handleInput(e: Event) {
-    const target = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-    if (field.type === 'number') {
-      onchange(parseFloat(target.value) || 0);
-    } else if (field.type === 'boolean') {
-      onchange((target as HTMLInputElement).checked);
+  // Typed accessors
+  const strVal = $derived((value as string) ?? '');
+  const numVal = $derived((value as number) ?? 0);
+  const boolVal = $derived((value as boolean) ?? false);
+  const tagsVal = $derived((value as string[]) ?? []);
+  const multiVal = $derived((value as (string | number)[]) ?? []);
+  const imagesVal = $derived((value as string[]) ?? []);
+
+  function handleTagKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const input = e.target as HTMLInputElement;
+      const tag = input.value.trim();
+      if (tag) {
+        onchange([...tagsVal, tag]);
+        input.value = '';
+      }
+    }
+  }
+
+  function removeTag(index: number) {
+    onchange(tagsVal.filter((_: string, i: number) => i !== index));
+  }
+
+  // Multiselect toggle
+  function toggleMulti(optValue: string | number) {
+    if (multiVal.includes(optValue)) {
+      onchange(multiVal.filter((v: string | number) => v !== optValue));
     } else {
-      onchange(target.value);
+      onchange([...multiVal, optValue]);
     }
   }
+
+  // Images management
+  function addImage() {
+    onchange([...imagesVal, '']);
+  }
+
+  function updateImage(index: number, url: string) {
+    const next = [...imagesVal];
+    next[index] = url;
+    onchange(next);
+  }
+
+  function removeImage(index: number) {
+    onchange(imagesVal.filter((_: string, i: number) => i !== index));
+  }
 </script>
 
 <div class="space-y-1.5">
-  <label class="block text-sm font-medium text-gray-700" for={field.key}>
+  <Label for={field.key}>
     {field.label}
     {#if field.required}
-      <span class="text-red-500">*</span>
+      <span class="text-destructive">*</span>
     {/if}
-  </label>
+  </Label>
 
-  {#if field.type === 'text' || field.type === 'image'}
-    <input
+  {#if children}
+    {@render children()}
+
+  {:else if field.type === 'text' || field.type === 'image'}
+    <Input
       id={field.key}
       type="text"
-      value={value as string ?? ''}
-      oninput={handleInput}
+      value={strVal}
+      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
-      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
       placeholder={t('field.enterValue', { label: field.label })}
     />
 
+  {:else if field.type === 'email'}
+    <Input
+      id={field.key}
+      type="email"
+      value={strVal}
+      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+      required={field.required}
+      placeholder="name@example.com"
+    />
+
+  {:else if field.type === 'url'}
+    <Input
+      id={field.key}
+      type="url"
+      value={strVal}
+      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+      required={field.required}
+      placeholder="https://"
+    />
+
+  {:else if field.type === 'phone'}
+    <Input
+      id={field.key}
+      type="tel"
+      value={strVal}
+      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+      required={field.required}
+      placeholder="+1 (555) 000-0000"
+    />
+
+  {:else if field.type === 'color'}
+    <div class="flex items-center gap-3">
+      <input
+        id={field.key}
+        type="color"
+        value={strVal || '#000000'}
+        oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+        class="h-10 w-14 cursor-pointer rounded-md border border-input bg-background p-1"
+      />
+      <Input
+        type="text"
+        value={strVal}
+        oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+        placeholder="#000000"
+        class="max-w-32 font-mono text-sm"
+      />
+      {#if strVal}
+        <span
+          class="h-8 w-8 rounded-full border border-border shadow-sm"
+          style="background-color: {strVal}"
+        ></span>
+      {/if}
+    </div>
+
   {:else if field.type === 'number'}
-    <input
+    <Input
       id={field.key}
       type="number"
-      value={value as number ?? 0}
-      oninput={handleInput}
+      value={String(numVal)}
+      oninput={(e) => onchange(parseFloat((e.target as HTMLInputElement).value) || 0)}
       required={field.required}
-      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
     />
 
   {:else if field.type === 'textarea' || field.type === 'richtext'}
-    <textarea
+    <Textarea
       id={field.key}
-      value={value as string ?? ''}
-      oninput={handleInput}
+      value={strVal}
+      oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
       required={field.required}
       rows={field.type === 'richtext' ? 10 : 4}
-      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary resize-y"
       placeholder={t('field.enterValue', { label: field.label })}
-    ></textarea>
+      class="resize-y"
+    />
+
+  {:else if field.type === 'relation' && field.resource}
+    <ComboboxField
+      resource={field.resource}
+      value={value as string | number | null}
+      onchange={(v) => onchange(v)}
+      optionLabel={field.optionLabel ?? 'title'}
+      optionValue={field.optionValue ?? 'id'}
+      placeholder={t('field.selectPlaceholder')}
+    />
 
   {:else if field.type === 'select'}
-    <select
-      id={field.key}
-      value={value as string ?? ''}
-      onchange={handleInput}
-      required={field.required}
-      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary bg-white"
-    >
-      <option value="">{t('field.selectPlaceholder')}</option>
+    {#if (field.options?.length ?? 0) > 8}
+      <!-- Many options → use ComboboxField-style search -->
+      <ComboboxField
+        resource=""
+        value={value as string | number | null}
+        onchange={(v) => onchange(v)}
+        searchable={false}
+      />
+    {:else}
+      <Select
+        id={field.key}
+        value={strVal}
+        onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
+        required={field.required}
+        placeholder={t('field.selectPlaceholder')}
+      >
+        {#each field.options ?? [] as opt}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </Select>
+    {/if}
+
+  {:else if field.type === 'multiselect'}
+    <div class="space-y-2 rounded-lg border border-input p-3 max-h-48 overflow-y-auto">
       {#each field.options ?? [] as opt}
-        <option value={opt.value}>{opt.label}</option>
+        <label class="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5 transition-colors">
+          <Checkbox
+            checked={multiVal.includes(opt.value)}
+            onCheckedChange={() => toggleMulti(opt.value)}
+          />
+          {opt.label}
+        </label>
       {/each}
-    </select>
+      {#if !(field.options?.length)}
+        <p class="text-xs text-muted-foreground">{t('field.noOptions')}</p>
+      {/if}
+    </div>
+    {#if multiVal.length > 0}
+      <div class="flex flex-wrap gap-1 mt-1">
+        {#each multiVal as v}
+          {@const label = field.options?.find(o => o.value === v)?.label ?? String(v)}
+          <Badge variant="secondary" class="gap-1">
+            {label}
+            <button type="button" onclick={() => toggleMulti(v)} class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors" aria-label={t('common.clear')}>×</button>
+          </Badge>
+        {/each}
+      </div>
+    {/if}
 
   {:else if field.type === 'boolean'}
-    <label class="relative inline-flex cursor-pointer items-center">
-      <input
-        type="checkbox"
-        checked={value as boolean ?? false}
-        onchange={handleInput}
-        class="peer sr-only"
+    <div class="flex items-center gap-2 pt-1">
+      <Switch
+        checked={boolVal}
+        onCheckedChange={(v) => onchange(v)}
       />
-      <div class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-2 peer-focus:ring-primary/20"></div>
-    </label>
+      <span class="text-sm text-muted-foreground">{boolVal ? t('common.yes') : t('common.no')}</span>
+    </div>
 
   {:else if field.type === 'tags'}
-    {@const tags = (value as string[] ?? [])}
     <div class="space-y-2">
       <div class="flex flex-wrap gap-1.5">
-        {#each tags as tag, i}
-          <span class="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2.5 py-0.5 text-xs font-medium text-primary-700">
+        {#each tagsVal as tag, i}
+          <Badge variant="secondary" class="gap-1">
             {tag}
             <button
               type="button"
-              onclick={() => onchange(tags.filter((_, idx) => idx !== i))}
-              class="text-primary-400 hover:text-primary-700"
+              onclick={() => removeTag(i)}
+              class="ml-0.5 rounded-sm hover:text-destructive hover:bg-destructive/10 transition-colors"
+              aria-label={t('common.clear')}
             >×</button>
-          </span>
+          </Badge>
         {/each}
       </div>
-      <input
+      <Input
         type="text"
         placeholder={t('field.tagsPlaceholder')}
-        class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
-        onkeydown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            const input = e.target as HTMLInputElement;
-            if (input.value.trim()) {
-              onchange([...tags, input.value.trim()]);
-              input.value = '';
-            }
-          }
-        }}
+        onkeydown={handleTagKeydown}
       />
     </div>
 
   {:else if field.type === 'date'}
-    <input
+    <Input
       id={field.key}
       type="date"
-      value={value as string ?? ''}
-      oninput={handleInput}
+      value={strVal}
+      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
       required={field.required}
-      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
     />
 
+  {:else if field.type === 'images'}
+    <div class="space-y-2">
+      {#each imagesVal as url, i}
+        <div class="flex items-center gap-2">
+          <Input
+            type="text"
+            value={url}
+            oninput={(e) => updateImage(i, (e.target as HTMLInputElement).value)}
+            placeholder="https://example.com/image.jpg"
+            class="flex-1"
+          />
+          {#if url}
+            <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
+          {/if}
+          <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
+            <X class="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      {/each}
+      <Button variant="outline" size="sm" type="button" onclick={addImage}>
+        <Plus class="h-3.5 w-3.5 mr-1" /> {t('field.addImage')}
+      </Button>
+    </div>
+
   {:else if field.type === 'json'}
-    <textarea
+    <Textarea
       id={field.key}
-      value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
+      value={typeof value === 'string' ? strVal : JSON.stringify(value, null, 2)}
       oninput={(e) => {
         try {
           onchange(JSON.parse((e.target as HTMLTextAreaElement).value));
-        } catch (err) {
-          console.debug('[FieldRenderer] Invalid JSON input:', err);
+        } catch {
+          // keep raw text until valid JSON
         }
       }}
       rows={6}
-      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm font-mono focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary resize-y"
-    ></textarea>
+      class="resize-y font-mono text-xs"
+    />
 
   {:else}
-    <input
+    <Input
       id={field.key}
       type="text"
-      value={value as string ?? ''}
-      oninput={handleInput}
-      class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+      value={strVal}
+      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
     />
   {/if}
 </div>

package/src/components/ForgotPasswordPage.svelte

@@ -4,8 +4,10 @@
   import { navigate } from '@svadmin/core/router';
   import { Button } from './ui/button/index.js';
   import { Input } from './ui/input/index.js';
+  import { Label } from './ui/label/index.js';
   import * as Card from './ui/card/index.js';
-  import { KeyRound, Mail, ArrowLeft, CheckCircle } from 'lucide-svelte';
+  import * as Alert from './ui/alert/index.js';
+  import { KeyRound, Mail, ArrowLeft, CheckCircle, Loader2, AlertCircle } from 'lucide-svelte';
 
   let { title = 'Admin' } = $props<{
     title?: string;
@@ -32,11 +34,11 @@
   }
 </script>
 
-<div class="forgot-page">
-  <div class="forgot-container">
-    <Card.Card class="login-card">
-      <Card.CardHeader class="login-header">
-        <div class="forgot-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">
           {#if sent}
             <CheckCircle class="h-6 w-6" />
           {:else}
@@ -52,7 +54,7 @@
       </Card.CardHeader>
       <Card.CardContent>
         {#if sent}
-          <div class="success-state">
+          <div class="py-2">
             <p class="text-sm text-muted-foreground text-center mb-4">
               {t('auth.resetLinkSent')}
             </p>
@@ -64,15 +66,16 @@
         {:else}
           <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="forgot-email" class="text-sm font-medium text-foreground">{t('auth.email')}</label>
-              <div class="input-with-icon">
-                <Mail class="input-icon h-4 w-4" />
+              <Label for="forgot-email">{t('auth.email')}</Label>
+              <div class="relative">
+                <Mail class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
                 <Input
                   id="forgot-email"
                   type="email"
@@ -86,21 +89,17 @@
 
             <Button type="submit" class="w-full" disabled={forgot.isLoading}>
               {#if forgot.isLoading}
-                <span class="loading-spinner"></span>
+                <Loader2 class="h-4 w-4 animate-spin mr-2" />
               {/if}
               {t('auth.sendResetLink')}
             </Button>
           </form>
 
-          <div class="auth-link">
-            <button
-              type="button"
-              class="text-sm text-primary hover:underline font-medium inline-flex items-center gap-1"
-              onclick={() => navigate('/login')}
-            >
+          <div class="flex items-center justify-center mt-5 pt-5 border-t">
+            <Button variant="link" class="text-sm h-auto p-0 font-medium inline-flex items-center gap-1" onclick={() => navigate('/login')}>
               <ArrowLeft class="h-3 w-3" />
               {t('auth.backToLogin')}
-            </button>
+            </Button>
           </div>
         {/if}
       </Card.CardContent>
@@ -111,93 +110,3 @@
     </p>
   </div>
 </div>
-
-<style>
-  .forgot-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;
-  }
-
-  .forgot-container {
-    width: 100%;
-    max-width: 420px;
-  }
-
-  .forgot-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;
-  }
-
-  :global(.login-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(.login-header) {
-    text-align: center;
-    padding-bottom: 0.5rem;
-  }
-
-  .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;
-  }
-
-  .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;
-  }
-
-  .success-state {
-    padding: 0.5rem 0;
-  }
-
-  .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: 1.25rem;
-    padding-top: 1.25rem;
-    border-top: 1px solid hsl(var(--border));
-  }
-</style>

package/src/components/Header.svelte

@@ -1,35 +1,55 @@
 <script lang="ts">
-  import { Moon, Sun } from 'lucide-svelte';
+  import { Moon, Sun, Search } from 'lucide-svelte';
   import { Button } from './ui/button';
-  import { getTheme, toggleTheme } from '@svadmin/core';
+  import TooltipButton from './TooltipButton.svelte';
+  import { getResolvedTheme, toggleTheme } from '@svadmin/core';
+  import Breadcrumbs from './Breadcrumbs.svelte';
+  import { t } from '@svadmin/core/i18n';
 
   let {
     showThemeToggle = true,
+    showBreadcrumbs = true,
+    showSearch = true,
+    onSearchClick,
     children,
   } = $props<{
     showThemeToggle?: boolean;
+    showBreadcrumbs?: boolean;
+    showSearch?: boolean;
+    onSearchClick?: () => void;
     children?: import('svelte').Snippet;
   }>();
 </script>
 
 <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 -->
+    {#if showBreadcrumbs}
+      <Breadcrumbs />
+    {/if}
   </div>
-  <div class="ml-auto flex items-center gap-4">
+  <div class="ml-auto flex items-center gap-2">
     {#if children}
       {@render children()}
     {/if}
+
+    {#if showSearch && onSearchClick}
+      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground">
+        <Search class="h-4 w-4" />
+        <span class="hidden sm:inline text-xs">Search...</span>
+        <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+          <span class="text-xs">⌘</span>K
+        </kbd>
+      </Button>
+    {/if}
     
     {#if showThemeToggle}
-      <Button variant="ghost" size="icon" onclick={() => toggleTheme()} class="rounded-full">
-        {#if getTheme() === 'dark'}
+      <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
+        {#if getResolvedTheme() === '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>
+      </TooltipButton>
     {/if}
   </div>
 </header>