@svadmin/ui 0.29.0 → 0.29.2

package/src/components/ThemedTitle.svelte

@@ -1,32 +0,0 @@
-<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

@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { Toaster, toast as sonner } from 'sonner-svelte';
-  import { getResolvedTheme, getToastQueue, consumeToastQueue, getPromiseQueue, consumePromiseQueue } from '@svadmin/core';
-
-  const theme = $derived(getResolvedTheme() === 'dark' ? 'dark' : 'light');
-
-  $effect(() => {
-    const queue = getToastQueue();
-    if (queue.length > 0) {
-      for (const t of queue) {
-        switch (t.type) {
-          case 'success': sonner.success(t.message, { duration: t.duration }); break;
-          case 'error': sonner.error(t.message, { duration: t.duration }); break;
-          case 'warning': sonner.warning(t.message, { duration: t.duration }); break;
-          case 'info': sonner.info(t.message, { duration: t.duration }); break;
-        }
-      }
-      consumeToastQueue();
-    }
-  });
-
-  $effect(() => {
-    const pQueue = getPromiseQueue();
-    if (pQueue.length > 0) {
-      for (const p of pQueue) {
-        sonner.promise(p.promise, p.opts);
-      }
-      consumePromiseQueue();
-    }
-  });
-
-  const toasterProps = $derived({
-    position: "top-right",
-    richColors: true,
-    closeButton: true,
-    expand: true,
-    theme,
-    toastOptions: {
-      classes: {
-        toast: 'font-sans',
-      },
-    }
-  } as any);
-</script>
-
-<Toaster {...toasterProps} />

package/src/components/TooltipButton.svelte

@@ -1,42 +0,0 @@
-<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 extends Omit<HTMLButtonAttributes, 'class' | 'children'> {
-    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;
-    children: Snippet;
-  }
-
-  let {
-    tooltip,
-    variant = 'ghost',
-    size = 'icon',
-    side = 'top',
-    class: className = '',
-    onclick,
-    disabled = false,
-    type = 'button',
-    tabindex,
-    children,
-    ...restProps
-  }: Props = $props();
-</script>
-
-<Tooltip.Root>
-  <Tooltip.Trigger>
-    {#snippet child({ props })}
-      {@const buttonProps = { ...props, ...restProps, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, onclick, disabled, tabindex } as any}
-      <Button {...buttonProps}>
-        {@render children()}
-      </Button>
-    {/snippet}
-  </Tooltip.Trigger>
-  <Tooltip.Content {side}>{tooltip}</Tooltip.Content>
-</Tooltip.Root>

package/src/components/UndoableNotification.svelte

@@ -1,69 +0,0 @@
-<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<{
-    message: string;
-    duration?: number;
-    onUndo: () => void;
-    onTimeout: () => void;
-  }>();
-
-  let remaining = $state(0);
-  let dismissed = $state(false);
-
-  // Initialize remaining from prop
-  $effect.pre(() => {
-    remaining = duration;
-  });
-
-  $effect(() => {
-    const interval = setInterval(() => {
-      remaining -= 100;
-      if (remaining <= 0) {
-        clearInterval(interval);
-        if (!dismissed) {
-          dismissed = true;
-          onTimeout();
-        }
-      }
-    }, 100);
-    return () => clearInterval(interval);
-  });
-
-  function handleUndo() {
-    dismissed = true;
-    onUndo();
-  }
-
-  function handleDismiss() {
-    dismissed = true;
-    onTimeout();
-  }
-
-  const progressValue = $derived(remaining / duration * 100);
-</script>
-
-{#if !dismissed}
-  <div
-    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] min-w-80 max-w-lg rounded-lg border bg-card shadow-lg 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" />
-          {t('common.undo')}
-        </Button>
-        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={handleDismiss}>
-          <X class="h-3.5 w-3.5" />
-        </Button>
-      </div>
-    </div>
-    <Progress value={progressValue} class="h-1 rounded-none" />
-  </div>
-{/if}

package/src/components/UpdatePasswordPage.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">
-  import { useUpdatePassword } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  import { Button } from './ui/button/index.js';
-  import * as Card from './ui/card/index.js';
-  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;
-  }>();
-
-  const updatePw = useUpdatePassword();
-
-  let password = $state('');
-  let confirmPassword = $state('');
-  let error = $state('');
-
-  async function handleSubmit(e: SubmitEvent) {
-    e.preventDefault();
-    error = '';
-
-    if (!password) { error = t('auth.passwordRequired'); return; }
-    if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
-
-    const result = await updatePw.mutate({ password, confirmPassword });
-    if (!result.success) {
-      error = result.error?.message ?? t('common.operationFailed');
-    }
-  }
-</script>
-
-<div class="min-h-screen flex items-center justify-center bg-background p-4">
-  <div class="w-full max-w-[380px]">
-    <Card.Card>
-      <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
-          <ShieldCheck class="h-5 w-5" />
-        </div>
-        <Card.CardTitle class="text-xl">{t('auth.resetPassword')}</Card.CardTitle>
-        <p class="text-sm text-muted-foreground">{t('auth.resetPasswordDescription')}</p>
-      </Card.CardHeader>
-      <Card.CardContent>
-        <form onsubmit={handleSubmit} class="space-y-4">
-          {#if error}
-            <Alert.Root variant="destructive">
-              <AlertCircle class="h-4 w-4" />
-              <Alert.Description>{error}</Alert.Description>
-            </Alert.Root>
-          {/if}
-
-          <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}
-              <Loader2 class="h-4 w-4 animate-spin mr-2" />
-            {/if}
-            {t('auth.resetPassword')}
-          </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>
-    </Card.Card>
-
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
-      Powered by {title}
-    </p>
-  </div>
-</div>

package/src/components/VirtualTable.svelte

@@ -1,76 +0,0 @@
-<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/VoiceInput.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">
-  import { Mic, MicOff, Loader2 } from '@lucide/svelte';
-  import TooltipButton from './TooltipButton.svelte';
-
-  // Web Speech API type declarations
-  interface SpeechRecognitionEvent extends Event {
-    results: SpeechRecognitionResultList;
-  }
-  interface SpeechRecognitionErrorEvent extends Event {
-    error: string;
-  }
-  interface SpeechRecognitionInstance extends EventTarget {
-    continuous: boolean;
-    interimResults: boolean;
-    lang: string;
-    onstart: (() => void) | null;
-    onresult: ((event: SpeechRecognitionEvent) => void) | null;
-    onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
-    onend: (() => void) | null;
-    start(): void;
-    stop(): void;
-  }
-
-  interface Props {
-    /** Called when a speech recognition result is finalized */
-    onresult?: (text: string) => void;
-    /** Called when the engine starts listening */
-    onstart?: () => void;
-    /** Called when the engine stops listening */
-    onend?: () => void;
-    /** Standard button size */
-    size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
-    /** Custom class for the button */
-    class?: string;
-  }
-
-  let { 
-    onresult, 
-    onstart, 
-    onend, 
-    size = 'icon', 
-    class: className = '' 
-  }: Props = $props();
-
-  let isListening = $state(false);
-  let notSupported = $state(false);
-  let recognition: SpeechRecognitionInstance | null = null;
-
-  // Initialize SpeechRecognition on mount
-  $effect(() => {
-    const SpeechRecognitionCtor = (
-      (globalThis as Record<string, unknown>).SpeechRecognition ||
-      (globalThis as Record<string, unknown>).webkitSpeechRecognition
-    ) as (new () => SpeechRecognitionInstance) | undefined;
-    
-    if (!SpeechRecognitionCtor) {
-      notSupported = true;
-      return;
-    }
-
-    recognition = new SpeechRecognitionCtor();
-    recognition.continuous = false;
-    recognition.interimResults = false;
-    recognition.lang = navigator.language || 'en-US';
-
-    recognition.onstart = () => {
-      isListening = true;
-      if (onstart) onstart();
-    };
-
-    recognition.onresult = (event: SpeechRecognitionEvent) => {
-      const transcript = Array.from(event.results)
-        .map((result: SpeechRecognitionResult) => result[0])
-        .map((result: SpeechRecognitionAlternative) => result.transcript)
-        .join('');
-      
-      if (onresult && transcript) {
-        onresult(transcript);
-      }
-    };
-
-    recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
-      console.warn('SpeechRecognition error:', event.error);
-      isListening = false;
-      if (onend) onend();
-    };
-
-    recognition.onend = () => {
-      isListening = false;
-      if (onend) onend();
-    };
-  });
-
-  function toggleListening(e?: MouseEvent) {
-    if (e) e.preventDefault();
-    if (!recognition) return;
-    
-    if (isListening) {
-      recognition.stop();
-    } else {
-      recognition.start();
-    }
-  }
-</script>
-
-<TooltipButton 
-  tooltip={notSupported ? "Voice input not supported in this browser" : (isListening ? "Stop listening" : "Start voice input")}
-  variant={isListening ? "destructive" : "ghost"} 
-  {size}
-  class="{isListening ? 'animate-pulse' : ''} {className}"
-  onclick={toggleListening}
-  disabled={notSupported}
->
-  {#if isListening}
-    <Loader2 class="h-4 w-4 animate-spin -ml-1 mr-1.5 inline-block sm:hidden" />
-    <MicOff class="h-4 w-4" />
-  {:else}
-    <Mic class="h-4 w-4" />
-  {/if}
-</TooltipButton>

package/src/components/buttons/CloneButton.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Copy } from '@lucide/svelte';
-
-  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
-    resource: string;
-    recordItemId: string | number;
-    hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
-    class?: string;
-  }>();
-
-  const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-</script>
-
-{#if !hidden}
-  <Button
-    variant="outline"
-    size={hideText ? 'icon' : 'sm'}
-    class={className}
-    disabled={!can.allowed}
-    onclick={() => nav.clone(resource, recordItemId)}
-  >
-    <Copy class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.clone')}</span>{/if}
-  </Button>
-{/if}

package/src/components/buttons/CreateButton.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Plus } from '@lucide/svelte';
-
-  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
-    resource: string;
-    hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
-    class?: string;
-  }>();
-
-  const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-</script>
-
-{#if !hidden}
-  <Button
-    variant="default"
-    size={hideText ? 'icon' : 'default'}
-    class={className}
-    disabled={!can.allowed}
-    onclick={() => nav.create(resource)}
-  >
-    <Plus class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.create')}</span>{/if}
-  </Button>
-{/if}

package/src/components/buttons/DeleteButton.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import { useDelete, useCan, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Trash2 } from '@lucide/svelte';
-
-  let {
-    resource, recordItemId, hideText = false,
-    accessControl = { enabled: true, hideIfUnauthorized: true }, onSuccess, undoable = false, class: className = '',
-  } = $props<{
-    resource: string;
-    recordItemId: string | number;
-    hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
-    onSuccess?: () => void;
-    undoable?: boolean;
-    class?: string;
-  }>();
-
-  const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
-  const can = useCan(() => ({ resource, action: 'delete', queryOptions: { enabled: accessControl?.enabled ?? true } }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-  let confirming = $state(false);
-
-  async function handleDelete() {
-    if (!confirming) {
-      confirming = true;
-      return;
-    }
-    confirming = false;
-    await deleteMut.mutation.mutateAsync({ id: recordItemId, resource });
-    onSuccess?.();
-  }
-
-  function cancel() { confirming = false; }
-</script>
-
-{#if !hidden}
-  {#if confirming}
-    <div class="inline-flex items-center gap-1">
-      <Button variant="destructive" size="sm" onclick={handleDelete}>
-        {t('common.confirm')}
-      </Button>
-      <Button variant="ghost" size="sm" onclick={cancel}>
-        {t('common.cancel')}
-      </Button>
-    </div>
-  {:else}
-    <Button
-      variant="ghost"
-      size={hideText ? 'icon' : 'sm'}
-      class="text-destructive hover:text-destructive {className}"
-      disabled={!can.allowed}
-      onclick={handleDelete}
-    >
-      <Trash2 class="h-4 w-4" />
-      {#if !hideText}<span class="ml-1">{t('common.delete')}</span>{/if}
-    </Button>
-  {/if}
-{/if}

package/src/components/buttons/EditButton.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Pencil } from '@lucide/svelte';
-
-  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
-    resource: string;
-    recordItemId: string | number;
-    hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
-    class?: string;
-  }>();
-
-  const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'edit', queryOptions: { enabled: accessControl?.enabled ?? true } }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-</script>
-
-{#if !hidden}
-  <Button
-    variant="outline"
-    size={hideText ? 'icon' : 'sm'}
-    class={className}
-    disabled={!can.allowed}
-    onclick={() => nav.edit(resource, recordItemId)}
-  >
-    <Pencil class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.edit')}</span>{/if}
-  </Button>
-{/if}

package/src/components/buttons/ExportButton.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { useExport, useCan, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Download } from '@lucide/svelte';
-
-  let { resource, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
-    resource: string;
-    hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
-    class?: string;
-  }>();
-
-  const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
-  const can = useCan(() => ({ resource, action: 'export', queryOptions: { enabled: accessControl?.enabled ?? true } }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-</script>
-
-{#if !hidden}
-
-  <Button
-    variant="outline"
-    size={hideText ? 'icon' : 'sm'}
-    class={className}
-    disabled={isLoading || !can.allowed}
-    onclick={triggerExport}
-  >
-    <Download class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.export')}</span>{/if}
-  </Button>
-{/if}