@svadmin/ui 0.29.2 → 0.29.4

package/dist/components/TenantSwitcher.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { ChevronsUpDown, Building2, Check } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
+  import type { Tenant } from '../types.js';
+
+  let {
+    tenants = [],
+    currentTenantId = $bindable(''),
+    collapsed = false,
+    onSwitch,
+    headerSnippet,
+  }: {
+    tenants: Tenant[];
+    currentTenantId?: string;
+    collapsed?: boolean;
+    onSwitch?: (tenantId: string) => void;
+    headerSnippet?: Snippet;
+  } = $props();
+
+  let currentTenant = $derived(tenants.find(t => t.id === currentTenantId) ?? tenants[0]);
+
+  function selectTenant(id: string) {
+    currentTenantId = id;
+    onSwitch?.(id);
+  }
+</script>
+
+{#if tenants.length > 0}
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props }: { props: Record<string, unknown> })}
+        <button
+          {...props}
+          class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-sidebar-accent/50
+            {collapsed ? 'justify-center' : ''}"
+        >
+          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary text-sm font-bold">
+            {#if currentTenant?.logo}
+              <img src={currentTenant.logo} alt={currentTenant.name} class="h-full w-full rounded-lg object-cover" />
+            {:else}
+              <Building2 class="h-4 w-4" />
+            {/if}
+          </div>
+          {#if !collapsed}
+            <div class="flex-1 min-w-0">
+              <p class="truncate text-sm font-semibold text-sidebar-foreground">{currentTenant?.name ?? 'Select'}</p>
+              <p class="truncate text-[10px] text-sidebar-foreground/50">Workspace</p>
+            </div>
+            <ChevronsUpDown class="h-4 w-4 shrink-0 text-sidebar-foreground/40" />
+          {/if}
+        </button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content class="w-56">
+      {#if headerSnippet}
+        <div class="px-2 py-1.5">
+          {@render headerSnippet()}
+        </div>
+        <DropdownMenu.Separator />
+      {/if}
+      <div class="px-2 py-1.5 text-xs text-muted-foreground">Workspaces</div>
+      {#each tenants as tenant}
+        <DropdownMenu.Item
+          class="flex items-center gap-3 cursor-pointer"
+          onclick={() => selectTenant(tenant.id)}
+        >
+          <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary text-xs font-bold">
+            {#if tenant.logo}
+              <img src={tenant.logo} alt={tenant.name} class="h-full w-full rounded object-cover" />
+            {:else}
+              {tenant.name.charAt(0).toUpperCase()}
+            {/if}
+          </div>
+          <span class="flex-1 truncate">{tenant.name}</span>
+          {#if tenant.id === currentTenantId}
+            <Check class="h-4 w-4 text-primary" />
+          {/if}
+        </DropdownMenu.Item>
+      {/each}
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+{/if}

package/dist/components/TenantSwitcher.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { Tenant } from '../types.js';
+type $$ComponentProps = {
+    tenants: Tenant[];
+    currentTenantId?: string;
+    collapsed?: boolean;
+    onSwitch?: (tenantId: string) => void;
+    headerSnippet?: Snippet;
+};
+declare const TenantSwitcher: import("svelte").Component<$$ComponentProps, {}, "currentTenantId">;
+type TenantSwitcher = ReturnType<typeof TenantSwitcher>;
+export default TenantSwitcher;

package/dist/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/dist/components/ThemedTitle.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    collapsed?: boolean;
+    icon?: string;
+    text?: string;
+    wrapperStyles?: string;
+};
+declare const ThemedTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemedTitle = ReturnType<typeof ThemedTitle>;
+export default ThemedTitle;

package/dist/components/Toast.svelte

@@ -0,0 +1,46 @@
+<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/dist/components/Toast.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Toast: import("svelte").Component<Record<string, never>, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/TooltipButton.svelte

@@ -0,0 +1,42 @@
+<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/dist/components/TooltipButton.svelte.d.ts

@@ -0,0 +1,14 @@
+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;
+}
+declare const TooltipButton: import("svelte").Component<Props, {}, "">;
+type TooltipButton = ReturnType<typeof TooltipButton>;
+export default TooltipButton;

package/dist/components/UndoableNotification.svelte

@@ -0,0 +1,69 @@
+<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/dist/components/UndoableNotification.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    message: string;
+    duration?: number;
+    onUndo: () => void;
+    onTimeout: () => void;
+};
+declare const UndoableNotification: import("svelte").Component<$$ComponentProps, {}, "">;
+type UndoableNotification = ReturnType<typeof UndoableNotification>;
+export default UndoableNotification;

package/dist/components/UpdatePasswordPage.svelte

@@ -0,0 +1,89 @@
+<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/dist/components/UpdatePasswordPage.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    title?: string;
+};
+declare const UpdatePasswordPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type UpdatePasswordPage = ReturnType<typeof UpdatePasswordPage>;
+export default UpdatePasswordPage;

package/dist/components/VirtualTable.svelte

@@ -0,0 +1,76 @@
+<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/dist/components/VirtualTable.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+   * 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;
+}
+declare const VirtualTable: import("svelte").Component<Props<unknown>, {}, "">;
+type VirtualTable = ReturnType<typeof VirtualTable>;
+export default VirtualTable;

package/dist/components/VoiceInput.svelte

@@ -0,0 +1,120 @@
+<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/dist/components/VoiceInput.svelte.d.ts

@@ -0,0 +1,15 @@
+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;
+}
+declare const VoiceInput: import("svelte").Component<Props, {}, "">;
+type VoiceInput = ReturnType<typeof VoiceInput>;
+export default VoiceInput;