@svadmin/ui 0.52.0 → 0.53.1

package/dist/components/BatchActionBar.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { CheckCircle2, X } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    selectedCount?: number;
+    totalCount?: number;
+    selectedLabel?: string;
+    clearLabel?: string;
+    variant?: 'default' | 'floating' | 'subtle';
+    onclear?: () => void;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+
+  let {
+    selectedCount = 0,
+    totalCount,
+    selectedLabel,
+    clearLabel = 'Clear',
+    variant = 'default',
+    onclear,
+    actions,
+    children,
+    class: className = '',
+  }: Props = $props();
+
+  const isVisible = $derived(selectedCount > 0);
+  const displayText = $derived.by(() => {
+    if (selectedLabel) {
+      return selectedLabel.replace('{count}', String(selectedCount));
+    }
+    return totalCount !== undefined
+      ? `${selectedCount} of ${totalCount} selected`
+      : `${selectedCount} selected`;
+  });
+</script>
+
+{#if isVisible}
+  {#if variant === 'floating'}
+    <div
+      class={cn(
+        'fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-3 rounded-lg border border-border/80 bg-background/95 px-4 py-2.5 shadow-2xl backdrop-blur-md transition-all duration-200 animate-in fade-in-0 slide-in-from-bottom-4',
+        className
+      )}
+      role="region"
+      aria-label="Batch Actions"
+    >
+      <div class="flex items-center gap-2 pr-2 border-r border-border/60">
+        <CheckCircle2 class="h-4 w-4 text-primary" />
+        <span class="text-xs font-medium text-foreground">{displayText}</span>
+      </div>
+
+      {#if actions}
+        <div class="flex items-center gap-1.5">
+          {@render actions()}
+        </div>
+      {/if}
+
+      {#if children}
+        <div class="flex items-center gap-1.5">
+          {@render children()}
+        </div>
+      {/if}
+
+      {#if onclear}
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+          onclick={onclear}
+          aria-label={clearLabel}
+        >
+          <X class="h-3.5 w-3.5 mr-1" />
+          {clearLabel}
+        </Button>
+      {/if}
+    </div>
+  {:else}
+    <div
+      class={cn(
+        'flex flex-wrap items-center justify-between gap-2 rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs transition-all duration-150',
+        variant === 'subtle' ? 'border-border/60 bg-muted/40' : '',
+        className
+      )}
+      role="region"
+      aria-label="Batch Actions"
+    >
+      <div class="flex items-center gap-2">
+        <Badge variant="secondary" class="h-5 px-1.5 font-semibold text-[11px] bg-primary/15 text-primary border-primary/20">
+          {selectedCount}
+        </Badge>
+        <span class="font-medium text-foreground">{displayText}</span>
+        {#if onclear}
+          <button
+            type="button"
+            class="text-muted-foreground hover:text-foreground underline underline-offset-2 ml-1 text-xs cursor-pointer focus:outline-none"
+            onclick={onclear}
+          >
+            {clearLabel}
+          </button>
+        {/if}
+      </div>
+
+      <div class="flex items-center gap-2">
+        {#if actions}
+          {@render actions()}
+        {/if}
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+    </div>
+  {/if}
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    selectedCount?: number;
+    totalCount?: number;
+    selectedLabel?: string;
+    clearLabel?: string;
+    variant?: 'default' | 'floating' | 'subtle';
+    onclear?: () => void;
+    actions?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const BatchActionBar: import("svelte").Component<Props, {}, "">;
+type BatchActionBar = ReturnType<typeof BatchActionBar>;
+export default BatchActionBar;

package/dist/components/FilterDropdown.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Filter, X, Search } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { Input } from './ui/input/index.js';
+  import { clickOutside } from '../actions.js';
+  import { cn } from '../utils.js';
+
+  interface OptionItem {
+    label: string;
+    value: string | number;
+  }
+
+  interface Props {
+    title?: string;
+    open?: boolean;
+    active?: boolean;
+    value?: unknown;
+    options?: OptionItem[];
+    placeholder?: string;
+    applyLabel?: string;
+    resetLabel?: string;
+    align?: 'left' | 'right';
+    onapply?: (value: unknown) => void;
+    onreset?: () => void;
+    children?: Snippet;
+    trigger?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title = 'Filter',
+    open = $bindable(false),
+    active,
+    value = $bindable(undefined),
+    options,
+    placeholder = 'Search...',
+    applyLabel = 'Apply',
+    resetLabel = 'Reset',
+    align = 'right',
+    onapply,
+    onreset,
+    children,
+    trigger,
+    class: className = '',
+  }: Props = $props();
+
+  type OptionValue = OptionItem['value'];
+
+  function isOptionValue(candidate: unknown): candidate is OptionValue {
+    return typeof candidate === 'string' || typeof candidate === 'number';
+  }
+
+  function getTextValue(candidate: unknown): string {
+    return typeof candidate === 'string' ? candidate : '';
+  }
+
+  function getSelectedValues(candidate: unknown): OptionValue[] {
+    if (Array.isArray(candidate)) return candidate.filter(isOptionValue);
+    return isOptionValue(candidate) && candidate !== '' ? [candidate] : [];
+  }
+
+  let internalTextValue = $state(getTextValue(value));
+  let internalSelectedValues = $state<OptionValue[]>(getSelectedValues(value));
+  let optionSearch = $state('');
+
+  // Keep the editable draft aligned with controlled value changes.
+  $effect(() => {
+    internalTextValue = getTextValue(value);
+    internalSelectedValues = getSelectedValues(value);
+  });
+
+  const isFilterActive = $derived(
+    active !== undefined
+      ? active
+      : Array.isArray(value)
+        ? value.length > 0
+        : value != null && value !== ''
+  );
+
+  const filteredOptions = $derived(
+    options
+      ? optionSearch
+        ? options.filter((opt) => opt.label.toLowerCase().includes(optionSearch.toLowerCase()))
+        : options
+      : []
+  );
+
+  function restoreDraft() {
+    internalTextValue = getTextValue(value);
+    internalSelectedValues = getSelectedValues(value);
+    optionSearch = '';
+  }
+
+  function handleClose() {
+    restoreDraft();
+    open = false;
+  }
+
+  function handleClickOutside() {
+    if (open) handleClose();
+  }
+
+  function handleTriggerClick() {
+    if (open) {
+      handleClose();
+    } else {
+      open = true;
+    }
+  }
+
+  function toggleOption(optValue: OptionValue) {
+    if (internalSelectedValues.includes(optValue)) {
+      internalSelectedValues = internalSelectedValues.filter((v) => v !== optValue);
+    } else {
+      internalSelectedValues = [...internalSelectedValues, optValue];
+    }
+  }
+
+  function handleApply() {
+    if (options && options.length > 0) {
+      const nextValue = [...internalSelectedValues];
+      value = nextValue;
+      onapply?.(nextValue);
+    } else if (!children) {
+      value = internalTextValue;
+      onapply?.(internalTextValue);
+    } else {
+      onapply?.(value);
+    }
+    optionSearch = '';
+    open = false;
+  }
+
+  function handleReset() {
+    internalTextValue = '';
+    internalSelectedValues = [];
+    optionSearch = '';
+    value = options && options.length > 0 ? [] : undefined;
+    onreset?.();
+    open = false;
+  }
+</script>
+
+<div class={cn('relative inline-block text-left', className)} use:clickOutside={handleClickOutside}>
+  {#if trigger}
+    {@render trigger()}
+  {:else}
+    <Button
+      variant={isFilterActive ? 'secondary' : 'ghost'}
+      size="icon-sm"
+      class={cn(
+        'relative h-7 w-7 rounded-sm p-0 transition-colors',
+        isFilterActive ? 'text-primary bg-primary/10 border border-primary/20 hover:bg-primary/20' : 'text-muted-foreground hover:text-foreground'
+      )}
+      onclick={handleTriggerClick}
+      aria-label={title}
+      aria-expanded={open}
+      aria-haspopup="dialog"
+      title={title}
+    >
+      <Filter class="h-3.5 w-3.5" />
+      {#if isFilterActive}
+        <span class="absolute -top-0.5 -right-0.5 flex h-2 w-2">
+          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+          <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+        </span>
+      {/if}
+    </Button>
+  {/if}
+
+  {#if open}
+    <div
+      class={cn(
+        'absolute z-50 mt-1.5 w-64 rounded-md border border-border bg-popover text-popover-foreground shadow-lg outline-none animate-in fade-in-0 zoom-in-95',
+        align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left'
+      )}
+      role="dialog"
+      aria-label={title}
+    >
+      <div class="flex items-center justify-between border-b border-border/60 px-3 py-2">
+        <span class="text-xs font-semibold text-foreground">{title}</span>
+        <button
+          type="button"
+          class="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          onclick={handleClose}
+          aria-label="Close"
+        >
+          <X class="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      <div class="p-3">
+        {#if children}
+          {@render children()}
+        {:else if options && options.length > 0}
+          {#if options.length > 5}
+            <div class="relative mb-2">
+              <Search class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                bind:value={optionSearch}
+                placeholder="Search options..."
+                class="h-7 pl-7 text-xs"
+              />
+            </div>
+          {/if}
+          <div class="max-h-44 overflow-y-auto space-y-1.5 pr-1">
+            {#each filteredOptions as opt (opt.value)}
+              <label class="flex items-center gap-2 rounded px-1.5 py-1 text-xs hover:bg-accent cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={internalSelectedValues.includes(opt.value)}
+                  onchange={() => toggleOption(opt.value)}
+                  class="h-3.5 w-3.5 rounded border-muted-foreground text-primary focus:ring-primary"
+                />
+                <span class="flex-1 truncate">{opt.label}</span>
+              </label>
+            {:else}
+              <div class="py-2 text-center text-xs text-muted-foreground">No options match</div>
+            {/each}
+          </div>
+        {:else}
+          <Input
+            bind:value={internalTextValue}
+            {placeholder}
+            class="h-8 text-xs"
+            onkeydown={(e) => { if (e.key === 'Enter') handleApply(); }}
+          />
+        {/if}
+      </div>
+
+      <div class="flex items-center justify-between border-t border-border/60 bg-muted/30 px-3 py-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+          onclick={handleReset}
+        >
+          {resetLabel}
+        </Button>
+        <Button
+          variant="default"
+          size="sm"
+          class="h-7 px-3 text-xs"
+          onclick={handleApply}
+        >
+          {applyLabel}
+        </Button>
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+interface OptionItem {
+    label: string;
+    value: string | number;
+}
+interface Props {
+    title?: string;
+    open?: boolean;
+    active?: boolean;
+    value?: unknown;
+    options?: OptionItem[];
+    placeholder?: string;
+    applyLabel?: string;
+    resetLabel?: string;
+    align?: 'left' | 'right';
+    onapply?: (value: unknown) => void;
+    onreset?: () => void;
+    children?: Snippet;
+    trigger?: Snippet;
+    class?: string;
+}
+declare const FilterDropdown: import("svelte").Component<Props, {}, "value" | "open">;
+type FilterDropdown = ReturnType<typeof FilterDropdown>;
+export default FilterDropdown;

package/dist/components/fields/AvatarField.svelte

@@ -0,0 +1,123 @@
+<script module lang="ts">
+  export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error' | 'neutral';
+  export type AvatarSize = 'xs' | 'sm' | 'default' | 'lg';
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    src?: string | null | undefined;
+    name?: string | null | undefined;
+    subtitle?: string | null | undefined;
+    status?: AvatarStatus;
+    size?: AvatarSize;
+    shape?: 'circle' | 'square';
+    showName?: boolean;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    src,
+    name,
+    subtitle,
+    status,
+    size = 'sm',
+    shape = 'circle',
+    showName = false,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  let imgError = $state(false);
+
+  $effect(() => {
+    void src;
+    imgError = false;
+  });
+
+  const sizeClasses: Record<AvatarSize, { container: string; text: string; dot: string }> = {
+    xs: { container: 'h-5 w-5', text: 'text-[10px]', dot: 'h-1.5 w-1.5' },
+    sm: { container: 'h-7 w-7', text: 'text-xs', dot: 'h-2 w-2' },
+    default: { container: 'h-9 w-9', text: 'text-sm', dot: 'h-2.5 w-2.5' },
+    lg: { container: 'h-11 w-11', text: 'text-base', dot: 'h-3 w-3' },
+  };
+
+  const statusColors: Record<AvatarStatus, string> = {
+    online: 'bg-emerald-500',
+    success: 'bg-emerald-500',
+    busy: 'bg-rose-500',
+    error: 'bg-rose-500',
+    warning: 'bg-amber-500',
+    away: 'bg-amber-500',
+    offline: 'bg-slate-400',
+    neutral: 'bg-slate-400',
+  };
+
+  function getInitials(value?: string | null): string {
+    const trimmed = value?.trim();
+    if (!trimmed) return '?';
+
+    const parts = trimmed.split(/\s+/);
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts.at(-1)?.[0] ?? ''}`.toUpperCase();
+    }
+    return trimmed.slice(0, 2).toUpperCase();
+  }
+
+  const initials = $derived(getInitials(name));
+  const hasContent = $derived(Boolean(src || name?.trim()));
+</script>
+
+{#if !hasContent}
+  <span class={cn('field-avatar text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-avatar inline-flex items-center gap-2.5', className)}>
+    <div class="relative inline-block shrink-0">
+      <div
+        class={cn(
+          'flex items-center justify-center overflow-hidden bg-muted font-medium text-muted-foreground select-none',
+          shape === 'circle' ? 'rounded-full' : 'rounded-md',
+          sizeClasses[size].container,
+          sizeClasses[size].text
+        )}
+      >
+        {#if src && !imgError}
+          <img
+            {src}
+            alt={name?.trim() || 'Avatar'}
+            class="h-full w-full object-cover"
+            onerror={() => { imgError = true; }}
+          />
+        {:else}
+          <span>{initials}</span>
+        {/if}
+      </div>
+
+      {#if status}
+        <span
+          class={cn(
+            'absolute bottom-0 right-0 rounded-full ring-2 ring-background',
+            statusColors[status],
+            sizeClasses[size].dot
+          )}
+          role="img"
+          aria-label={`Status: ${status}`}
+          title={`Status: ${status}`}
+        ></span>
+      {/if}
+    </div>
+
+    {#if showName && (name || subtitle)}
+      <div class="flex flex-col min-w-0 text-left">
+        {#if name}
+          <span class="truncate text-xs font-medium text-foreground leading-tight">{name}</span>
+        {/if}
+        {#if subtitle}
+          <span class="truncate text-[11px] text-muted-foreground leading-tight">{subtitle}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/AvatarField.svelte.d.ts

@@ -0,0 +1,16 @@
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error' | 'neutral';
+export type AvatarSize = 'xs' | 'sm' | 'default' | 'lg';
+interface Props {
+    src?: string | null | undefined;
+    name?: string | null | undefined;
+    subtitle?: string | null | undefined;
+    status?: AvatarStatus;
+    size?: AvatarSize;
+    shape?: 'circle' | 'square';
+    showName?: boolean;
+    nullLabel?: string;
+    class?: string;
+}
+declare const AvatarField: import("svelte").Component<Props, {}, "">;
+type AvatarField = ReturnType<typeof AvatarField>;
+export default AvatarField;

package/dist/components/fields/CodeField.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { Copy, Check } from '@lucide/svelte';
+  import { Badge } from '../ui/badge/index.js';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: string | number | Record<string, unknown> | unknown[] | null | undefined;
+    language?: string;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    maxHeight?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    language,
+    copyable = true,
+    title = 'Copy code',
+    copiedTitle = 'Copied!',
+    nullLabel = '—',
+    maxHeight = 'max-h-48',
+    class: className = '',
+  }: Props = $props();
+
+  let copied = $state(false);
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let destroyed = false;
+
+  onDestroy(() => {
+    destroyed = true;
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+
+  const formattedCode = $derived.by(() => {
+    if (value == null || value === '') return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  });
+
+  async function handleCopy(event: MouseEvent) {
+    event.stopPropagation();
+    if (!formattedCode || !copyable) return;
+
+    const writeText = globalThis.navigator?.clipboard?.writeText;
+    if (!writeText) return;
+
+    try {
+      await writeText.call(globalThis.navigator.clipboard, formattedCode);
+    } catch {
+      return;
+    }
+
+    if (destroyed) return;
+    copied = true;
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      copied = false;
+      timeoutId = null;
+    }, 1500);
+  }
+</script>
+
+{#if !formattedCode}
+  <span class={cn('field-code text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-code relative group rounded-md border border-border/80 bg-muted/40 text-xs font-mono', className)}>
+    {#if language || copyable}
+      <div class="flex items-center justify-between border-b border-border/60 bg-muted/60 px-2.5 py-1 text-[11px] text-muted-foreground">
+        {#if language}
+          <Badge variant="outline" class="h-4 px-1 text-[10px] font-mono">
+            {language.toUpperCase()}
+          </Badge>
+        {:else}
+          <span></span>
+        {/if}
+
+        {#if copyable}
+          <button
+            type="button"
+            class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-muted-foreground hover:text-foreground hover:bg-background/80 transition-colors focus:outline-none focus:ring-1 focus:ring-ring"
+            onclick={handleCopy}
+            title={copied ? copiedTitle : title}
+            aria-label={copied ? copiedTitle : title}
+          >
+            {#if copied}
+              <Check class="h-3 w-3 text-success animate-in zoom-in-50" />
+              <span class="text-[10px] text-success">{copiedTitle}</span>
+            {:else}
+              <Copy class="h-3 w-3" />
+              <span class="text-[10px]">{title}</span>
+            {/if}
+          </button>
+        {/if}
+      </div>
+    {/if}
+
+    <pre class={cn('p-2.5 overflow-x-auto overflow-y-auto leading-relaxed select-all', maxHeight)}><code>{formattedCode}</code></pre>
+  </div>
+{/if}

package/dist/components/fields/CodeField.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    value?: string | number | Record<string, unknown> | unknown[] | null | undefined;
+    language?: string;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    maxHeight?: string;
+    class?: string;
+}
+declare const CodeField: import("svelte").Component<Props, {}, "">;
+type CodeField = ReturnType<typeof CodeField>;
+export default CodeField;

package/dist/components/fields/CopyField.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { Copy, Check } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: string | number | null | undefined;
+    displayValue?: string;
+    masked?: boolean;
+    monospace?: boolean;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+  }
+
+  let {
+    value,
+    displayValue,
+    masked = false,
+    monospace = true,
+    copyable = true,
+    title = 'Copy',
+    copiedTitle = 'Copied!',
+    nullLabel = '—',
+    oncopy,
+    class: className = '',
+  }: Props = $props();
+
+  let copied = $state(false);
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let destroyed = false;
+
+  onDestroy(() => {
+    destroyed = true;
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+
+  function maskText(str: string): string {
+    if (str.length <= 8) return '****';
+    return `${str.slice(0, 4)}...${str.slice(-4)}`;
+  }
+
+  const rawString = $derived(value != null && value !== '' ? String(value) : '');
+  const displayText = $derived.by(() => {
+    if (!rawString) return nullLabel;
+    if (displayValue) return displayValue;
+    if (masked) return maskText(rawString);
+    return rawString;
+  });
+
+  async function handleCopy(event: MouseEvent) {
+    event.stopPropagation();
+    if (!rawString || !copyable) return;
+
+    const writeText = globalThis.navigator?.clipboard?.writeText;
+    if (!writeText) return;
+
+    try {
+      await writeText.call(globalThis.navigator.clipboard, rawString);
+    } catch {
+      return;
+    }
+
+    if (destroyed) return;
+    copied = true;
+    oncopy?.(rawString);
+
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      copied = false;
+      timeoutId = null;
+    }, 1500);
+  }
+</script>
+
+{#if !rawString}
+  <span class={cn('field-copy text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <span class={cn('field-copy inline-flex items-center gap-1.5 text-sm group', className)}>
+    <span class={cn(monospace ? 'font-mono text-xs' : '', 'truncate select-all')}>
+      {displayText}
+    </span>
+    {#if copyable}
+      <button
+        type="button"
+        class="inline-flex items-center justify-center h-5 w-5 rounded text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors focus:outline-none focus:ring-1 focus:ring-ring"
+        onclick={handleCopy}
+        title={copied ? copiedTitle : title}
+        aria-label={copied ? copiedTitle : title}
+      >
+        {#if copied}
+          <Check class="h-3 w-3 text-success animate-in zoom-in-50 duration-150" />
+        {:else}
+          <Copy class="h-3 w-3 opacity-70 group-hover:opacity-100 transition-opacity" />
+        {/if}
+      </button>
+    {/if}
+  </span>
+{/if}

package/dist/components/fields/CopyField.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    value?: string | number | null | undefined;
+    displayValue?: string;
+    masked?: boolean;
+    monospace?: boolean;
+    copyable?: boolean;
+    title?: string;
+    copiedTitle?: string;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+}
+declare const CopyField: import("svelte").Component<Props, {}, "">;
+type CopyField = ReturnType<typeof CopyField>;
+export default CopyField;

package/dist/components/fields/DateRangeField.svelte

@@ -0,0 +1,98 @@
+<script module lang="ts">
+  export type DateRangeFormat = 'date' | 'time' | 'datetime' | 'iso';
+  export type DateRangeValue =
+    | [string | number | Date | null | undefined, string | number | Date | null | undefined]
+    | { start?: string | number | Date | null; end?: string | number | Date | null; from?: string | number | Date | null; to?: string | number | Date | null }
+    | null
+    | undefined;
+</script>
+
+<script lang="ts">
+  import { Calendar } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: DateRangeValue;
+    startDate?: string | number | Date | null | undefined;
+    endDate?: string | number | Date | null | undefined;
+    separator?: string;
+    locale?: string;
+    format?: DateRangeFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    showIcon?: boolean;
+    class?: string;
+  }
+
+  let {
+    value,
+    startDate,
+    endDate,
+    separator = '~',
+    locale = 'en-US',
+    format = 'date',
+    options,
+    nullLabel = '—',
+    showIcon = false,
+    class: className = '',
+  }: Props = $props();
+
+  const start = $derived.by(() => {
+    if (startDate !== undefined) return startDate;
+    if (Array.isArray(value)) return value[0];
+    if (value && typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      return (obj.start ?? obj.from) as string | number | Date | null | undefined;
+    }
+    return undefined;
+  });
+
+  const end = $derived.by(() => {
+    if (endDate !== undefined) return endDate;
+    if (Array.isArray(value)) return value[1];
+    if (value && typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      return (obj.end ?? obj.to) as string | number | Date | null | undefined;
+    }
+    return undefined;
+  });
+
+  function formatDate(val: string | number | Date | null | undefined): string | null {
+    if (val == null || val === '') return null;
+    const d = val instanceof Date ? val : new Date(val);
+    if (isNaN(d.getTime())) return null;
+
+    if (format === 'iso') return d.toISOString();
+
+    const defaultOptions: Intl.DateTimeFormatOptions =
+      options ??
+      (format === 'datetime'
+        ? { dateStyle: 'medium', timeStyle: 'short' }
+        : format === 'time'
+          ? { timeStyle: 'medium' }
+          : { dateStyle: 'medium' });
+
+    try {
+      return new Intl.DateTimeFormat(locale, defaultOptions).format(d);
+    } catch {
+      return d.toLocaleDateString();
+    }
+  }
+
+  const startFormatted = $derived(formatDate(start));
+  const endFormatted = $derived(formatDate(end));
+
+  const display = $derived.by(() => {
+    if (!startFormatted && !endFormatted) return nullLabel;
+    if (startFormatted && endFormatted) return `${startFormatted} ${separator} ${endFormatted}`;
+    if (startFormatted) return `${startFormatted} ${separator} ${nullLabel}`;
+    return `${nullLabel} ${separator} ${endFormatted}`;
+  });
+</script>
+
+<span class={cn('field-date-range inline-flex items-center gap-1.5 text-sm', className)}>
+  {#if showIcon}
+    <Calendar class="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+  {/if}
+  <span>{display}</span>
+</span>

package/dist/components/fields/DateRangeField.svelte.d.ts

@@ -0,0 +1,22 @@
+export type DateRangeFormat = 'date' | 'time' | 'datetime' | 'iso';
+export type DateRangeValue = [string | number | Date | null | undefined, string | number | Date | null | undefined] | {
+    start?: string | number | Date | null;
+    end?: string | number | Date | null;
+    from?: string | number | Date | null;
+    to?: string | number | Date | null;
+} | null | undefined;
+interface Props {
+    value?: DateRangeValue;
+    startDate?: string | number | Date | null | undefined;
+    endDate?: string | number | Date | null | undefined;
+    separator?: string;
+    locale?: string;
+    format?: DateRangeFormat;
+    options?: Intl.DateTimeFormatOptions;
+    nullLabel?: string;
+    showIcon?: boolean;
+    class?: string;
+}
+declare const DateRangeField: import("svelte").Component<Props, {}, "">;
+type DateRangeField = ReturnType<typeof DateRangeField>;
+export default DateRangeField;

package/dist/components/fields/PercentField.svelte

@@ -0,0 +1,103 @@
+<script module lang="ts">
+  export type PercentTone = 'auto' | 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: number | string | null | undefined;
+    precision?: number;
+    scale?: '100' | '1';
+    showProgress?: boolean;
+    tone?: PercentTone;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    precision = 1,
+    scale = '100',
+    showProgress = false,
+    tone = 'neutral',
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const normalizedPrecision = $derived(
+    Math.min(20, Math.max(0, Math.trunc(Number.isFinite(precision) ? precision : 1)))
+  );
+
+  const numericValue = $derived.by(() => {
+    if (value == null) return null;
+    if (typeof value === 'string' && value.trim() === '') return null;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  });
+
+  const percentNumber = $derived.by(() => {
+    if (numericValue === null) return null;
+    const scaled = scale === '1' ? numericValue * 100 : numericValue;
+    return Number.isFinite(scaled) ? scaled : null;
+  });
+
+  const formatted = $derived(
+    percentNumber === null ? nullLabel : `${percentNumber.toFixed(normalizedPrecision)}%`
+  );
+
+  const resolvedTone = $derived.by((): PercentTone => {
+    if (tone !== 'auto') return tone;
+    if (percentNumber === null) return 'neutral';
+    if (percentNumber >= 80) return 'success';
+    if (percentNumber >= 50) return 'warning';
+    return 'destructive';
+  });
+
+  const toneTextClass: Record<PercentTone, string> = {
+    auto: '',
+    success: 'text-success font-medium',
+    warning: 'text-warning-foreground font-medium',
+    destructive: 'text-destructive font-medium',
+    info: 'text-primary font-medium',
+    neutral: 'text-foreground',
+  };
+
+  const toneBarClass: Record<PercentTone, string> = {
+    auto: '',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    destructive: 'bg-destructive',
+    info: 'bg-primary',
+    neutral: 'bg-primary',
+  };
+
+  const clampedProgress = $derived(
+    percentNumber === null ? 0 : Math.min(100, Math.max(0, percentNumber))
+  );
+</script>
+
+{#if percentNumber === null}
+  <span class={cn('field-percent text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-percent inline-flex items-center gap-2 text-sm', className)}>
+    <span class={cn('tabular-nums', toneTextClass[resolvedTone])}>
+      {formatted}
+    </span>
+    {#if showProgress}
+      <div
+        class="h-1.5 w-16 overflow-hidden rounded-full bg-muted"
+        role="progressbar"
+        aria-label="Percentage"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow={clampedProgress}
+      >
+        <div
+          class={cn('h-full transition-all duration-300', toneBarClass[resolvedTone])}
+          style="width: {clampedProgress}%"
+        ></div>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/PercentField.svelte.d.ts

@@ -0,0 +1,13 @@
+export type PercentTone = 'auto' | 'success' | 'warning' | 'destructive' | 'info' | 'neutral';
+interface Props {
+    value?: number | string | null | undefined;
+    precision?: number;
+    scale?: '100' | '1';
+    showProgress?: boolean;
+    tone?: PercentTone;
+    nullLabel?: string;
+    class?: string;
+}
+declare const PercentField: import("svelte").Component<Props, {}, "">;
+type PercentField = ReturnType<typeof PercentField>;
+export default PercentField;

package/dist/components/fields/RatingField.svelte

@@ -0,0 +1,86 @@
+<script module lang="ts">
+  export type RatingSize = 'sm' | 'default' | 'lg';
+</script>
+
+<script lang="ts">
+  import { Star, StarHalf } from '@lucide/svelte';
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    value?: number | string | null | undefined;
+    max?: number;
+    showValue?: boolean;
+    size?: RatingSize;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    value,
+    max = 5,
+    showValue = false,
+    size = 'default',
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const normalizedMax = $derived(
+    Number.isFinite(max) ? Math.min(100, Math.max(1, Math.trunc(max))) : 5
+  );
+
+  const numericValue = $derived.by(() => {
+    if (value == null) return null;
+    if (typeof value === 'string' && value.trim() === '') return null;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(parsed)) return null;
+    return Math.max(0, Math.min(normalizedMax, parsed));
+  });
+
+  const sizeClasses: Record<RatingSize, { icon: string; text: string }> = {
+    sm: { icon: 'h-3.5 w-3.5', text: 'text-xs' },
+    default: { icon: 'h-4 w-4', text: 'text-sm' },
+    lg: { icon: 'h-5 w-5', text: 'text-base' },
+  };
+
+  const stars = $derived.by(() => {
+    if (numericValue === null) return [];
+    const result: ('full' | 'half' | 'empty')[] = [];
+    for (let index = 1; index <= normalizedMax; index += 1) {
+      if (numericValue >= index) {
+        result.push('full');
+      } else if (numericValue >= index - 0.5) {
+        result.push('half');
+      } else {
+        result.push('empty');
+      }
+    }
+    return result;
+  });
+</script>
+
+{#if numericValue === null}
+  <span class={cn('field-rating text-muted-foreground text-sm', className)}>{nullLabel}</span>
+{:else}
+  <div class={cn('field-rating inline-flex items-center gap-1.5', className)}>
+    <div
+      class="inline-flex items-center gap-0.5 text-amber-500"
+      role="img"
+      aria-label={`${numericValue} out of ${normalizedMax}`}
+    >
+      {#each stars as starType, idx (idx)}
+        {#if starType === 'full'}
+          <Star aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+        {:else if starType === 'half'}
+          <StarHalf aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+        {:else}
+          <Star aria-hidden="true" class={cn(sizeClasses[size].icon, 'text-muted-foreground/30')} />
+        {/if}
+      {/each}
+    </div>
+    {#if showValue}
+      <span class={cn('tabular-nums font-medium text-foreground', sizeClasses[size].text)}>
+        {numericValue}
+      </span>
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/RatingField.svelte.d.ts

@@ -0,0 +1,12 @@
+export type RatingSize = 'sm' | 'default' | 'lg';
+interface Props {
+    value?: number | string | null | undefined;
+    max?: number;
+    showValue?: boolean;
+    size?: RatingSize;
+    nullLabel?: string;
+    class?: string;
+}
+declare const RatingField: import("svelte").Component<Props, {}, "">;
+type RatingField = ReturnType<typeof RatingField>;
+export default RatingField;

package/dist/index.d.ts

@@ -103,8 +103,14 @@ export { default as ImageField } from './components/fields/ImageField.svelte';
 export { default as SelectField } from './components/fields/SelectField.svelte';
 export { default as MultiSelectField } from './components/fields/MultiSelectField.svelte';
 export { default as RelationField } from './components/fields/RelationField.svelte';
+export { default as DateRangeField } from './components/fields/DateRangeField.svelte';
 export { default as JsonField } from './components/fields/JsonField.svelte';
 export { default as RichTextField } from './components/fields/RichTextField.svelte';
+export { default as CopyField } from './components/fields/CopyField.svelte';
+export { default as AvatarField } from './components/fields/AvatarField.svelte';
+export { default as CodeField } from './components/fields/CodeField.svelte';
+export { default as PercentField } from './components/fields/PercentField.svelte';
+export { default as RatingField } from './components/fields/RatingField.svelte';
 export { CreateButton, EditButton, DeleteButton, ShowButton, ListButton, RefreshButton, ExportButton, ImportButton, SaveButton, CloneButton, } from './components/buttons/index.js';
 export { Button, buttonVariants } from './components/ui/button/index.js';
 export { Input } from './components/ui/input/index.js';
@@ -209,3 +215,9 @@ export type { TimelineItem } from './components/content/AuditTimeline.svelte';
 export type { TagTone } from './components/fields/TagField.svelte';
 export type { BooleanTone } from './components/fields/BooleanField.svelte';
 export type { DateFieldFormat } from './components/fields/DateField.svelte';
+export type { AvatarStatus, AvatarSize } from './components/fields/AvatarField.svelte';
+export { default as FilterDropdown } from './components/FilterDropdown.svelte';
+export { default as BatchActionBar } from './components/BatchActionBar.svelte';
+export type { DateRangeFormat, DateRangeValue } from './components/fields/DateRangeField.svelte';
+export type { PercentTone } from './components/fields/PercentField.svelte';
+export type { RatingSize } from './components/fields/RatingField.svelte';

package/dist/index.js

@@ -106,8 +106,14 @@ export { default as ImageField } from './components/fields/ImageField.svelte';
 export { default as SelectField } from './components/fields/SelectField.svelte';
 export { default as MultiSelectField } from './components/fields/MultiSelectField.svelte';
 export { default as RelationField } from './components/fields/RelationField.svelte';
+export { default as DateRangeField } from './components/fields/DateRangeField.svelte';
 export { default as JsonField } from './components/fields/JsonField.svelte';
 export { default as RichTextField } from './components/fields/RichTextField.svelte';
+export { default as CopyField } from './components/fields/CopyField.svelte';
+export { default as AvatarField } from './components/fields/AvatarField.svelte';
+export { default as CodeField } from './components/fields/CodeField.svelte';
+export { default as PercentField } from './components/fields/PercentField.svelte';
+export { default as RatingField } from './components/fields/RatingField.svelte';
 // Rich text editor (requires @svadmin/editor) as a direct import in consumer app
 // CRUD Buttons
 export { CreateButton, EditButton, DeleteButton, ShowButton, ListButton, RefreshButton, ExportButton, ImportButton, SaveButton, CloneButton, } from './components/buttons/index.js';
@@ -203,3 +209,5 @@ export { referenceDemoData } from './reference-data.js';
 export { default as RowActions } from './components/RowActions.svelte';
 export { default as DetailDrawer } from './components/DetailDrawer.svelte';
 export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
+export { default as FilterDropdown } from './components/FilterDropdown.svelte';
+export { default as BatchActionBar } from './components/BatchActionBar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.52.0",
+  "version": "0.53.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [